Add stylesheet support

StoryRampSchema.json

@@ -55,8 +55,18 @@
                 ]
             },
             "properties": {
-                "width": "number",
-                "description": "The width of the panel inside the slide (between 0 and 100)."
+                "width": {
+                    "type": "number",
+                    "description": "The width of the panel inside the slide (between 0 and 100)."
+                },
+                "customStyles": {
+                    "type": "string",
+                    "description": "Optional style string to add to the panel."
+                },
+                "cssClasses": {
+                    "type": "string",
+                    "description": "Optional string of css classes to add to the panel."
+                }
             },
             "minItems": 1,
             "maxItems": 2
@@ -653,6 +663,15 @@
             "enum": ["en", "fr"]
         },
 
+        "stylesheets": {
+            "type": "array",
+            "description": "A list of relative paths to stylesheets to include on the page.",
+            "items": {
+                "type": "string",
+                "description": "A relative path to a stylesheet."
+            }
+        },
+
         "dateModified": {
             "type": "string",
             "description": "The last date that this config file was modified."

public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json

@@ -123,8 +123,9 @@
                             "id": "panel-1",
                             "panel": {
                                 "title": "Hello World",
-                                "content": "I am a text panel. I am a child of the dynamic panel config.",
-                                "type": "text"
+                                "content": "I am a text panel. I am a child of the dynamic panel config. ![](00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg)",
+                                "type": "text",
+                                "cssClasses": "textPanelOutline"
                             }
                         },
                         {
@@ -169,7 +170,7 @@
                                 "type": "text",
                                 "title": "Longer-form text content with table",
                                 "content": "Barren-ground Caribou\n=====================\n\nSpecies' Status\n---------------\n\n*Dolphin and Union population*\n\n- Special concern in Northwest Territories (2015) and under the *Species at Risk Act* (SARA; 2011)\n\n- Not currently listed under Nunavut legislation\n\n- [The Committee on the Status of Endangered Wildlife in Canada (COSEWIC) assessed as endangered (2017)](https://species-registry.canada.ca/index-en.html#/documents/3366)\n\n*Barren-ground population*\n\n- No species at risk legislation in Yukon\n\n- Threatened in Northwest Territories (2018)\n\n- Accidental/Vagrant in Alberta (2015)\n\n- Migratory in Saskatchewan (2020)\n\n- Not listed under Manitoba and Nunavut legislation, or under SARA\n\n- [COSEWIC assessed as threatened (2016)](https://species-registry.canada.ca/index-en.html#/documents/3189)\n\nConservation Approach\n---------------------\n\n- All partners to facilitate trust-building and cooperation with Indigenous peoples through engagement and collaboration\n\n- Pursue and continue multi-partner venues to collaborate on the recovery of each population, including those that are regional-based (for example, Advisory Committee for Cooperation on Wildlife Management; Bathurst Caribou Advisory Committee; Beverly and Qamanirjuaq Caribou Management Board; Conference of Management Authorities (Northwest Territories)) and international (International Porcupine Caribou Board; Porcupine Caribou Management Board; Porcupine Caribou Technical Committee)\n\n- Pursue on-the-ground collaborative projects led by Indigenous communities, Wildlife Management Boards and other co-management partners, ENGOs, industry, local governments\n\nRecovery Goals\n--------------\n\n*Dolphin and Union population*\n\n- Adaptively co-manage using a community-based approach and fill knowledge gaps using Inuit Qaujimajatuqangit and Indigenous knowledge, community monitoring and scientific methods. Minimize habitat disturbance and preserve sea ice, and allow for local population levels sufficient to sustain traditional Indigenous harvesting activities\n\n*Barren-ground population*\n\n- Promote the conditions needed for recovery, and maintain or restore self-sustaining, resilient populations. Support and maintain the caribou-people relationship, and promote conditions that allow caribou to move and migrate across their historic ranges without barriers\n\nRecovery Planning\n-----------------\n\n*Dolphin and Union population*\n\n- [Dolphin and Union Caribou (*Rangifer tarandus groenlandicus*): Management Plan (2018)](https://species-registry.canada.ca/index-en.html#/consultations/3144); adopted under SARA\n\n*Barren-ground population*\n\nTerritorial and co-management partner recovery and policy documents:\n\n- A Management Plan for the Bathurst Caribou Herd (2004); update ongoing\n\n- [Bathurst Caribou Range Plan (2019)](https://www.enr.gov.nt.ca/en/services/caribou-de-la-toundra/bathurst-caribou-range-plan)\n\n- Belarewı́le Gots'ę́ Ɂekwę́ Caribou for All Time - A Délı̨nę Got'ı̨nę Plan of Action (2015)\n\n- Beverly and Qamanirjuaq Caribou Management Plan 2013-2022 (2014)\n\n- Łutsël K'é Dene Fırst Nation's Yúnethé X́á Ɂetthën Hádı (Caribou Stewardship Plan) (2020)\n\n- [Recovery Strategy for Barren-ground Caribou in the Northwest Territories (2020)](https://www.nwtspeciesatrisk.ca/sites/enr-species-at-risk/files/barren-ground_caribou_recovery_strategy_final_8april2020.pdf); all Northwest Territories herds minus Porcupine herd (English only)\n\n- [Consensus Agreement on Accepting the Recovery Strategy for Barren-ground Caribou in the Northwest Territories (2020)](https://www.nwtspeciesatrisk.ca/sites/enr-species-at-risk/files/consensus_agreement_bgc_recovery_strategy_signed_8apr2020.pdf) (English only)\n\n- [Taking Care of Caribou: The Cape Bathurst, Bluenose-West, and Bluenose-East Barren-ground Caribou Herds Management Plan (2014)](https://www.enr.gov.nt.ca/sites/enr/files/rev_bluenose_caribou_herds_draft_management_plan_v10_final_signed_-_nov_4_2014_0.pdf) (English only)\n\n- [Technical Report on the Cape Bathurst, Bluenose-West, and Bluenose-East Barren-ground Caribou Herds (2016)](https://www.enr.gov.nt.ca/sites/enr/files/150_file.pdf) (English only)\n\n- We have been Living with the Caribou all our Lives: a report on information recorded during community meetings for 'Taking Care of Caribou -- the Cape Bathurst, Bluenose-West, and Bluenose-East Barren-ground Caribou Herds Management Plan' (2014)\n\n- 2020/2021 Action Plan: Bluenose-East (2020)\n\n- 2020/2021 Action Plan: Bluenose-West (2020)\n\n- 2020/2021 Action Plan: Cape Bathurst (2020)\n\n- Porcupine herd:         \n\n- Conservation Plan under development\n\n- [Harvest Management Plan for the Porcupine Caribou Herd in Canada (2010)](https://pcmb.ca/wp-content/uploads/2020/06/Harvest-Management-Plan-2010.pdf) (English only)\n\n- [Implementation Plan (2016)](https://pcmb.ca/wp-content/uploads/2020/06/Implementation-Plan-%E2%80%93-Revised-2016.pdf) (English only)\n\n- [Porcupine Caribou Herd Canadian Range-wide Native User Agreement (2019)](https://pcmb.ca/wp-content/uploads/2020/06/PCH-Range-Wide-Native-User-Agreement.pdf) (English only)\n\nProgress Indicators\n-------------------\n\n*Barren-ground caribou*\n\n- Over 27 million hectares (~12%) of barren-ground caribou range covered by protected areas\n\n*Dolphin and Union caribou*\n\n- Over 2.1 million hectares (~5.5%) of Dolphin and Union caribou range covered by protected areas\n\n- 100% of Dolphin and Union caribou sea-ice crossings covered by mitigation measures against ice-breaking activity through Transport Canada's Pro-active Vessel Management program\n\nAchievements and Future Milestones\n----------------------------------\n\n||Achievements|Ongoing Efforts and Planned Milestones|\n|-|-|-|\n|**Recovery**|*Dolphin and Union population*<p><ul><li>Initiated [Transport Canada's Pro-active Vessel Management program](https://tc.canada.ca/en/marine-transportation/navigation-marine-conditions/proactive-vessel-management) to mitigate shipping/ icebreaking impacts on sea ice crossings</li></ul></p>*Barren-ground population*<p><ul><li>On-the-ground actions for Northwest Territories, Nunavut and Yukon herds through management boards and Indigenous/territorial governments</li><li>On-the-ground partner-led projects, including Indigenous Protected and Conserved Areas initiatives relevant to barren-ground caribou</li></ul></p>|*Dolphin and Union population*<p><ul><li>Continue conservation planning to complete herd-specific plans</li><li>Continue engagement with Indigenous peoples on the Pan-Canadian Approach</li></ul></p>*Barren-ground population*<p><ul><li>Protection of freshwater crossings, access corridors, and calving/post-calving grounds in Nunavut</li><li>Continue conservation planning to complete herd-specific plans</li><li>Continue engagement with Indigenous peoples on the Pan-Canadian Approach</li></ul></p>|\n|**Knowledge**|*Dolphin and Union population*<p><ul><li>Identification of knowledge gaps in the national Management Plan and respectful inclusion of Indigenous knowledge in addressing these gaps through negotiated contribution agreementsBarren-ground population</li></ul></p><p><ul><li>Identification of knowledge gaps in herd management plans and respectful inclusion of Indigenous knowledge in addressing these gaps through negotiated contribution agreements</li></ul></p>|*Dolphin and Union population*<p><ul><li>Continue collaborative monitoring programs</li><li>Build on recovery actions identified in the national Management Plan to address additional knowledge gaps and priorities with key partners</li><li>Participate in the North American Caribou Workshop to facilitate knowledge sharing</li></ul></p>*Barren-ground population*<p><ul><li>Continue collaborative monitoring programs</li><li>Address and identify additional knowledge gaps and priorities with key partners</li><li>Participate in the North American Caribou Workshop to facilitate knowledge sharing</li></ul></p>|\n|**Reporting**|*Dolphin and Union population*<p><ul><li>Federal and territorial reporting on recovery implementation, including through various agreements’ annual reporting mechanisms and priority species dedicated web pages to communicate progress to Canadians</li></ul></p>*Barren-ground population*<p><ul><li>Federal, provincial, and territorial reporting on recovery implementation, including through various agreements’ annual reporting mechanisms and priority species dedicated web pages to communicate progress to Canadians</li><ul></p>|<ul><li>Ongoing reporting through existing mechanisms and priority species dedicated web pages</li></ul>|",
-                                "customStyles": "border: 2px solid black;"
+                                "cssClasses": "textPanelOutline"
                             }
                         },
                         {
@@ -535,6 +536,7 @@
         }
     ],
     "tocOrientation": "vertical",
+    "stylesheets": ["00000000-0000-0000-0000-000000000000/styles/main.css"],
     "contextLink": "https://www.canada.ca/en/environment-climate-change/services/national-pollutant-release-inventory/tools-resources-data/exploredata.html",
     "contextLabel": "Explore National Pollutant Release Inventory data",
     "lang": "en",

public/00000000-0000-0000-0000-000000000000/styles/main.css

@@ -0,0 +1,3 @@
+.textPanelOutline {
+    border: 2px solid black;
+}

src/components/panels/panel.vue

@@ -16,6 +16,7 @@
             :slideIdx="slideIdx"
             :lang="lang"
             :style="config.customStyles"
+            :class="config.cssClasses"
             :background="background"
         ></component>
     </div>

src/components/story/story.vue

@@ -145,6 +145,10 @@ const fetchConfig = (uid: string, lang: string): void => {
                     if (config.value) {
                         document.title = config.value.title + ' - Canada.ca';
                     }
+                    // add stylesheets to the page, we want this to happen ASAP
+                    if (config.value.stylesheets) {
+                        addStylesheets(config.value.stylesheets);
+                    }
                 })
                 .catch(() => {
                     // An error occurred while trying to convert the reponse to JSON. Most likely case for this to occur is
@@ -168,6 +172,15 @@ const fetchConfig = (uid: string, lang: string): void => {
         });
 };
 
+const addStylesheets = (paths: string[]): void => {
+    paths.forEach((path) => {
+        const styleLink = document.createElement('link');
+        styleLink.setAttribute('rel', 'stylesheet');
+        styleLink.setAttribute('href', path);
+        document.head.appendChild(styleLink);
+    });
+}
+
 const updateActiveIndex = (idx: number): void => {
     activeChapterIndex.value = idx;
     // determine header height

src/definitions.ts

@@ -9,6 +9,7 @@ export interface StoryRampConfig {
     contextLabel: string;
     tocOrientation: string;
     returnTop?: boolean;
+    stylesheets?: string[];
     dateModified: string;
 }
 
@@ -144,6 +145,7 @@ export interface BasePanel {
     type: string;
     width?: number;
     customStyles?: string; // css string
+    cssClasses?: string;
 }
 
 export interface TextPanel extends BasePanel {