Content - Institutional landing page: adding AEM instructions (#2352)

wet-boew · May 21, 2024 · 34bb191 · 34bb191
1 parent c092c2b
commit 34bb191
Show file tree

Hide file tree

Showing 8 changed files with 225 additions and 70 deletions.
diff --git a/_data/templates.json b/_data/templates.json
@@ -506,27 +506,23 @@
 		],
 		"reports": [
 			{
-				"title": "GCWU theme - English institution landing template",
+				"title": "Accessibility assessment #1 - Institutional template",
 				"language": "en",
-				"url": "https://wet-boew.github.io/GCWeb/templates/institutional-landing/demoted/institution-landing-en.html",
 				"path": "reports/a11y-1-en.html"
 			},
 			{
-				"title": "Thème FEGC - Français - Gabarit d'atterrissage de profil institutionnel",
+				"title": "Évaluation d'accessibilité #1 - Modèle institutionnel",
 				"language": "fr",
-				"url": "https://wet-boew.github.io/GCWeb/templates/institutional-landing/demoted/institution-landing-fr.html",
 				"path": "reports/a11y-1-fr.html"
 			},
 			{
-				"title": "Canada.ca theme - A reference implementation of the Canada.ca Content and Information Architecture Specification, the Canada.ca Content Style Guide and the Canada.ca Design System",
+				"title": "Accessibility assessment #2 - Institutional template",
 				"language": "en",
-				"url": "https://wet-boew.github.io/GCWeb/templates/institutional-landing/institutional-landing-en.html",
 				"path": "reports/a11y-2-en.html"
 			},
 			{
-				"title": "Thème Canada.ca - Une implémentation de référence de la spécification de contenu et d'architecture de l'information de Canada.ca, du guide de style de contenu de Canada.ca et du système de conception de Canada.ca",
+				"title": "Évaluation d'accessibilité #2 - Modèle institutionnel",
 				"language": "fr",
-				"url": "https://wet-boew.github.io/GCWeb/templates/institutional-landing/institutional-landing-fr.html",
 				"path": "reports/a11y-2-fr.html"
 			}
 		]
@@ -555,39 +551,44 @@
 				"en": "https://design.canada.ca/mandatory-templates/institutional-profile-pages.html",
 				"fr": "https://conception.canada.ca/modeles-obligatoire/pages-profil-institutionnel.html"
 			},
-			"iteration": "_:iteration_ilp_2",
+			"iteration": "_:iteration_ilp_3",
 			"example": [
 				{
 					"en": { "href": "institutional-landing-en.html", "text": "Institutional landing page" },
 					"fr": { "href": "institutional-landing-fr.html", "text": "Pages d'accueil institutionnelle" }
 				}
 			],
 			"implementation": [
-				"_:implement_ilp"
+				"_:implement_ilp",
+				"_:implement_ilp_aem"
 			],
 			"history": [
 				{
-					"en": "March 2024 - Stabilization of the page template.",
-					"fr": "Mars 2024 - Stabilisation du gabarit de page."
+					"en": "March 2024 - Stabilization of the version 2 of the page template.",
+					"fr": "Mars 2024 - Stabilisation de la version 2 du gabarit de page."
 				},
 				{
-					"en": "June 2021 - Provisional implementation of the page template.",
-					"fr": "Juin 2021 - Implémentation provisoire du gabarit de page."
+					"en": "June 2021 - Provisional implementation of the version 2 of the page template.",
+					"fr": "Juin 2021 - Implémentation provisoire de la version 2 du gabarit de page."
+				},
+				{
+					"en": "April 2014 - Implementation of the version 1 of the page template.",
+					"fr": "Avril 2014 - Implémentation de la version 1 du gabarit de page."
 				}
 			]
 		}
 	],
 	"implementation": [
 		{
 			"@id": "_:implement_ilp",
-			"iteration": "_:iteration_ilp_1",
+			"iteration": "_:iteration_ilp_3",
 			"name": {
 				"en": "Standard",
 				"fr": "Standard"
 			},
 			"introduction": {
-				"en": "This implementation is meant for developers/publishers adding the component manually.",
-				"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement."
+				"en": "This implementation is meant for developers/publishers adding the template manually.",
+				"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le gabarit manuellement."
 			},
 			"instructions": {
 				"en": [
@@ -609,31 +610,109 @@
 					"Si vous n'ajoutez pas la classe CSS requise (<code>.page-type-ilp</code>), les styles spécifiques à ce gabarit ne seront pas appliqués. Nous avons mis en œuvre une solution de contournement temporaire en guise de transition vers ce nouveau modèle. La solution de contournement sera supprimée en même temps que la version 1 de la PAI rétrogradée/obsolète."
 				]
 			}
+		},
+		{
+			"@id": "_:implement_ilp_aem",
+			"iteration": "_:iteration_ilp_3",
+			"name": {
+				"en": "AEM users",
+				"fr": "Utilisateurs AEM"
+			},
+			"introduction": {
+				"en": "This implementation is meant for publishers adding the template manually into an AEM page.",
+				"fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM."
+			},
+			"instructions": {
+				"en": [
+					"Create a page with the <strong>Generic template</strong>",
+					"Applying Content type (navigation page – institutional profile) via the page <strong>Properties</strong> -> <strong>Basic tab</strong> -> <strong>Content type</strong>, set the value to “<strong>navigation page – institutional profile</strong>”.",
+					"Configure Page container manually via the page <strong>Properties</strong> -> <strong>Template options</strong> tab -> <strong>Advanced</strong>, check “<strong>Page container: Configure manually</strong>”.",
+					"Configure your ILP page. The ILP page contains several GCWeb components. Each component has its own configuration which you can adapt as per your institutional needs. Please see individual component for more details about their configurable options.",
+					"Remove the <strong>H1 Title</strong>.",
+					"Add the ILP HTML code with a <strong>Generic HTML component</strong> component.",
+					"Edit the ILP HTML code"
+				],
+				"fr": [
+					"Créez une page avec le gabarit de <strong>Page générique</strong>.",
+					"En appliquant Type de contenu (page de navigation – profil institutionnel) via les <strong>Propriétés</strong> de la page -> Onglet <strong>De base</strong> -> <strong>Type de contenu</strong>, définissez la valeur sur «&nbsp;<strong>page de navigation – profil institutionnel</strong>&nbsp;».",
+					"Configurez manuellement le conteneur de pages dans les <strong>Propriétés</strong> via l'onglet  -> <strong>Options du gabarit</strong> -> <strong>Avancé</strong>, cochez «&nbsp;<strong>Conteneur de page&nbsp;: configurer manuellement</strong>&nbsp;».",
+					"Configurez votre page PAI. La page PAI contient plusieurs composants GCWeb. Chaque composant a sa propre configuration que vous pouvez adapter selon vos besoins institutionnels. Veuillez consulter chaque composant pour plus de détails sur leurs options configurables.",
+					"Supprimez le <strong>Titre H1</strong>.",
+					"Ajoutez le code HTML PAI avec un composant <strong>Composant HTML générique</strong>.",
+					"Modifiez le code HTML de la PAI"
+				]
+			},
+			"notes": {
+				"en": [
+					"For a more detailed implementation guide, a document has been created on the <a href='https://www.gcpedia.gc.ca/wiki/AEM_GC-specific_Documentation_6.5'>AEM learning material on GCPedia</a>, which includes screenshots and detailed step by step instructions."
+				],
+				"fr": [
+					"Pour un guide de mise en œuvre plus détaillé, un document a été créé dans la section du <a href='https://www.gcpedia.gc.ca/wiki/Documentation_d%27AEM_sp%C3%A9cifique_au_GC_6.5'>matériel d'apprentissage d'AEM sur GCPedia</a>, qui comprend des captures d'écran et des instructions détaillées étape par étape."
+				]
+			},
+			"ajaxSourceCode": {
+				"en": "institutional-landing-en.html main > *:not(.pagedetails)",
+				"fr": "institutional-landing-fr.html main > *:not(.pagedetails)"
+			}
 		}
 	],
 	"iteration": [
 		{
-			"@id": "_:iteration_ilp_2",
-			"name": "Institutional landing page - Iteration 2",
+			"@id": "_:iteration_ilp_3",
+			"name": "Institutional landing page - Iteration 3",
 			"date": "2024-03",
 			"breaking": [
 				"Stabilization of the page template."
 			],
 			"detectableBy": ".page-type-ilp"
 		},
+		{
+			"@id": "_:iteration_ilp_2",
+			"name": "Institutional landing page - Iteration 2",
+			"date": "2021-06",
+			"detectableBy": "Social media channels have the horizontal layout. About the institution and social media channels are on a white background.",
+			"example": {
+				"en": [
+					{
+						"href": "deprecated/institution-landing-en.html",
+						"text": "Institutional landing page version 2 (beta)"
+					}
+				],
+				"fr": [
+					{
+						"href": "deprecated/institution-landing-fr.html",
+						"text": "Page d'accueil institutionnelle version 2 (bêta)"
+					}
+				]
+			}
+		},
 		{
 			"@id": "_:iteration_ilp_1",
 			"name": "Institutional landing page - Iteration 1",
-			"date": "2021-06",
-			"detectableBy": "Social media channels at top right. Latest news directly under intro block."
+			"date": "2014-04",
+			"detectableBy": "Social media channels at top right. Latest news directly under intro block.",
+			"example": {
+				"en": [
+					{
+						"href": "deprecated/institution-en.html",
+						"text": "Institutional landing page version 1"
+					}
+				],
+				"fr": [
+					{
+						"href": "deprecated/institution-fr.html",
+						"text": "Page d'accueil institutionnelle version 1"
+					}
+				]
+			}
 		}
 	],
 	"changesets": [
 		{
 			"@id": "_:cs_ilp_2",
 			"name": "Institutional landing page",
 			"status": "stable",
-			"baseOnIteration": "_:iteration_ilp_2",
+			"baseOnIteration": "_:iteration_ilp_3",
 			"detectableBy": ".page-type-ilp",
 			"layout": [
 				"Intro block",
@@ -702,16 +781,6 @@
 				"title": "organisme indépendamment - [Nom de l’institution]",
 				"language": "fr",
 				"path": "institution-arms-fr.html"
-			},
-			{
-				"title": "[Institution name] - Canada.ca",
-				"language": "en",
-				"path": "https://servicecanada.github.io/wet-boew-demos/ilp-template/templates/institutional/institutional-landing-en.html"
-			},
-			{
-				"title": "[Nom de l'institution] - Canada.ca",
-				"language": "fr",
-				"path": "https://servicecanada.github.io/wet-boew-demos/ilp-template/templates/institutional/institutional-landing-fr.html"
 			}
 		],
 		"related": [

diff --git a/sites/layouts/documentation.html b/sites/layouts/documentation.html
@@ -317,6 +317,19 @@ <h2 id="variations">{% if lng == "fr" %}Variantes{% else %}Variations{% endif %}
 							]
 						},
 
+						{
+							"template": "[data-ajax-source-code]",
+							"test": "fn:isLiteral",
+							"assess": "/ajaxSourceCode/{{lng}}",
+							"mapping": [
+								{
+									"selector": "code",
+									"value": "/ajaxSourceCode/{{lng}}",
+									"attr": "data-ajax-append"
+								}
+							]
+						},
+
 						{
 							"template": "[data-notes]",
 							"test": "fn:isArray",
@@ -526,6 +539,10 @@ <h4>{% if lng == "fr" %}Implémentation{% else %}Implementation{% endif %}</h4>
 								</ul>
 							</template>
 
+							<template data-ajax-source-code>
+								<pre><code data-wb-ajax='{ "encode": true }'></code></pre>
+							</template>
+
 							<template data-notes>
 								<p>Notes:</p>
 								<ul>

diff --git a/...ional-landing/demoted/institution-en.html → ...al-landing/deprecated/institution-en.html b/...ional-landing/demoted/institution-en.html → ...al-landing/deprecated/institution-en.html
@@ -28,15 +28,15 @@ <h2>Latest</h2>
 			<div class="row">
 				<div class="col-md-6">
 					<a href="#">
-						<img src="../img/news-360x203.png" alt="" class="img-responsive thumbnail"/>
+						<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail"/>
 						<p>[News title]</p>
 					</a>
 					<small>YYYY-MM-DD hh:mm - Type of news product</small>
 					<p>Brief description of the news item.</p>
 				</div>
 				<div class="col-md-6">
 					<a href="#">
-						<img src="../img/news-360x203.png" alt="" class="img-responsive thumbnail"/>
+						<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail"/>
 						<p>[News title]</p>
 					</a>
 					<small>YYYY-MM-DD hh:mm - Type of news product</small>

diff --git a/...ional-landing/demoted/institution-fr.html → ...al-landing/deprecated/institution-fr.html b/...ional-landing/demoted/institution-fr.html → ...al-landing/deprecated/institution-fr.html
@@ -28,15 +28,15 @@ <h2>Nouveautés</h2>
 			<div class="row">
 				<div class="col-md-6">
 					<a href="#">
-						<img src="../img/news-360x203.png" alt="" class="img-responsive thumbnail"/>
+						<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail"/>
 						<p>[Titre de l’article]</p>
 					</a>
 					<small>AAAA-MM-JJ hh:mm - Type de produit médiatique</small>
 					<p>Brève description de la nouvelle.</p>
 				</div>
 				<div class="col-md-6">
 					<a href="#">
-						<img src="../img/news-360x203.png" alt="" class="img-responsive thumbnail"/>
+						<img src="https://via.placeholder.com/360x203/000000/FFFFFF.png" alt="" class="img-responsive thumbnail"/>
 						<p>[Titre de l’article]</p>
 					</a>
 					<small>AAAA-MM-JJ hh:mm - Type de produit médiatique</small>

diff --git a/...nding/demoted/institution-landing-en.html → ...ng/deprecated/institution-landing-en.html b/...nding/demoted/institution-landing-en.html → ...ng/deprecated/institution-landing-en.html
@@ -12,7 +12,7 @@
 ---
 {%- include variable-core.liquid -%}
 
-<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
+<div class="bg-center bg-cover" data-bgimg-srcset="../img/1x1.png 991w, ../img/ip-cover-image-1200x726.jpg 992w">
 	<div class="container">
 		<div class="row mrgn-bttm-md">
 			<div class="col-md-7">

diff --git a/...nding/demoted/institution-landing-fr.html → ...ng/deprecated/institution-landing-fr.html b/...nding/demoted/institution-landing-fr.html → ...ng/deprecated/institution-landing-fr.html
@@ -12,7 +12,7 @@
 ---
 {%- include variable-core.liquid -%}
 
-<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
+<div class="bg-center bg-cover" data-bgimg-srcset="../img/1x1.png 991w, ../img/ip-cover-image-1200x726.jpg 992w">
 	<div class="container">
 		<div class="row mrgn-bttm-md">
 			<div class="col-md-7">