Minor - Gc intro block (#2229)

* intro block

* Update gc-intro-block-en.html

* Update gc-intro-block-en.html

* run html formatter, add property, etc to h1

* manually fix indents

* add fr to json file

* add available FR content

* create and link demo page

* move to folder

* fr text available

* Create ip-cover-image-1200x726.jpg

* Update design-patterns/gc-intro/gc-intro-block-demos-en.html

Co-authored-by: Garneauma <[email protected]>
Update design-patterns/gc-intro/gc-intro-block-demos-en.html

Co-authored-by: Garneauma <[email protected]>
Update design-patterns/gc-intro/gc-intro-block-demos-fr.html

Co-authored-by: Garneauma <[email protected]>
Update design-patterns/gc-intro/gc-intro-block-demos-fr.html

Co-authored-by: Garneauma <[email protected]>

* Intro block: converting to data-first documentation

* Intro block: new doc template, small doc edits

---------

Co-authored-by: Garneauma <[email protected]>
Co-authored-by: Marc-André Garneau <[email protected]>

_data/design-patterns.json

@@ -113,4 +113,4 @@
 		}
 	]
 }
-]
+]

_includes/design-patterns/gc-intro/gc-intro-image.html

@@ -0,0 +1,11 @@
+<div class="bg-center bg-cover" data-bgimg-srcset="https://wet-boew.github.io/vocab/wb/utilities#no-image 991w, img/ip-cover-image-1200x726.jpg 992w">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-7">
+				<h1 property="name" id="wb-cont">{{ page.title }}</h1>
+				<p>{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}</p>
+				<p><a class="btn btn-call-to-action" href="#">{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}</a></p>
+			</div>
+		</div>
+	</div>
+</div>

_includes/design-patterns/gc-intro/gc-intro.html

@@ -0,0 +1,3 @@
+<h1 property="name" id="wb-cont">{{ page.title }}</h1>
+<p>{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}</p>
+<p><a class="btn btn-call-to-action" href="#">{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}</a></p>

design-patterns/gc-intro/gc-intro-doc-en.html

@@ -0,0 +1,9 @@
+---
+title: Introduction block
+description: Documentation for the introduction block design pattern.
+language: en
+altLangPage: gc-intro-doc-fr.html
+dateModified: 2024-03-14
+layout: documentation_pattern
+index_json: index.json-ld
+---

design-patterns/gc-intro/gc-intro-doc-fr.html

@@ -0,0 +1,9 @@
+---
+title: Bloc d’introduction
+description: Documentation de la configuration de conception du bloc d’introduction.
+language: fr
+altLangPage: gc-intro-doc-en.html
+dateModified: 2024-03-14
+layout: documentation_pattern
+index_json: index.json-ld
+---

design-patterns/gc-intro/gc-intro-en.html

@@ -0,0 +1,20 @@
+---
+{
+	"title": "Introduction block",
+	"language": "en",
+	"altLangPage": "gc-intro-fr.html",
+	"dateModified": "2024-03-14",
+	"breadcrumbs": [
+		{ "title": "Introduction block - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-en.html" }
+	],
+	"layout": "without-h1",
+}
+---
+<div class="wb-prettify all-pre"></div>
+
+<div class="container">
+	{% include_relative samples/gc-intro.html %}
+
+	<h2>Code sample</h2>
+	{% highlight html %}{% include_relative samples/gc-intro.html %}{% endhighlight %}
+</div>

design-patterns/gc-intro/gc-intro-fr.html

@@ -0,0 +1,20 @@
+---
+{
+	"title": "Bloc d'introduction",
+	"language": "fr",
+	"altLangPage": "gc-intro-en.html",
+	"dateModified": "2024-03-14",
+	"breadcrumbs": [
+		{ "title": "Bloc d'introduction - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-fr.html" }
+	],
+	"layout": "without-h1",
+}
+---
+<div class="wb-prettify all-pre"></div>
+
+<div class="container">
+	{% include_relative samples/gc-intro.html %}
+
+	<h2>Code</h2>
+	{% highlight html %}{% include_relative samples/gc-intro.html %}{% endhighlight %}
+</div>

design-patterns/gc-intro/gc-intro-image-en.html

@@ -0,0 +1,20 @@
+---
+{
+	"title": "Introduction block with image",
+	"language": "en",
+	"altLangPage": "gc-intro-image-fr.html",
+	"dateModified": "2024-03-14",
+	"breadcrumbs": [
+		{ "title": "Introduction block - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-en.html" }
+	],
+	"layout": "no-container"
+}
+---
+<div class="wb-prettify all-pre"></div>
+
+{% include_relative samples/gc-intro-image.html %}
+
+<div class="container">
+	<h2>Code sample</h2>
+	{% highlight html %}{% include_relative samples/gc-intro-image.html %}{% endhighlight %}
+</div>

design-patterns/gc-intro/gc-intro-image-fr.html

@@ -0,0 +1,21 @@
+---
+{
+	"title": "Bloc d'introduction avec image",
+	"language": "fr",
+	"altLangPage": "gc-intro-image-en.html",
+	"layout": "no-container",
+	"dateModified": "2024-03-14",
+	"breadcrumbs": [
+		{ "title": "Bloc d'introduction - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-fr.html" }
+	],
+	"layout": "no-container"
+}
+---
+<div class="wb-prettify all-pre"></div>
+
+{% include_relative samples/gc-intro-image.html %}
+
+<div class="container">
+	<h2>Code</h2>
+	{% highlight html %}{% include_relative samples/gc-intro-image.html %}{% endhighlight %}
+</div>

design-patterns/gc-intro/index.json-ld

@@ -0,0 +1,220 @@
+{
+	"@context": {
+		"@version": 1.1,
+		"dct": "http://purl.org/dc/terms/",
+		"title": { "@id": "dct:title", "@container": "@language" },
+		"description": { "@id": "dct:description", "@container": "@language" },
+		"modified": "dct:modified"
+	},
+	"title": {
+		"en": "Introduction block - Documentation and working example",
+		"fr": "Bloc d’introduction - Documentation et example pratique"
+	},
+	"description": {
+		"en": "Guidance about using the introduction block pattern on Canada.ca.",
+		"fr": "Orientation sur l’utilisation de la configuration de conception du bloc d’introduction sur Canada.ca."
+	},
+	"modified": "2023-08-16",
+	"componentName": "gc-intro",
+	"pages": {
+		"docs": [
+			{
+				"title": "Introduction block",
+				"language": "en",
+				"path": "gc-intro-doc-en.html"
+			},
+		{
+				"title": "Bloc d’introduction",
+				"language": "fr",
+				"path": "gc-intro-doc-fr.html"
+			}
+		],
+		"examples": [
+			{
+				"title": "Introduction block",
+				"language": "en",
+				"path": "gc-intro-en.html"
+			},
+			{
+				"title": "Bloc d’introduction",
+				"language": "fr",
+				"path": "gc-intro-fr.html"
+			},
+			{
+				"title": "Introduction block with image",
+				"language": "en",
+				"path": "gc-intro-image-en.html"
+			},
+			{
+				"title": "Bloc d’introduction avec image",
+				"language": "fr",
+				"path": "gc-intro-image-fr.html"
+			}
+		]
+	},
+	"dependencies": [
+		"bgimg"
+	],
+	"a11yGuidance": "No accessibility guidance.",
+	"variations": [
+		{
+			"name": {
+				"en": "Introduction block - default",
+				"fr": "Bloc d'introduction - par défaut"
+			},
+			"description": {
+				"en": "The introduction block pattern introduces the content of a landing page.",
+				"fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil."
+			},
+			"guidance": {
+				"en": "https://design.canada.ca/common-design-patterns/intro-block.html",
+				"fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html"
+			},
+			"iteration": "_:iteration_intro_1",
+			"example": [
+				{
+					"en": { "href": "gc-intro-en.html", "text": "Introduction block" },
+					"fr": { "href": "gc-intro-fr.html", "text": "Bloc d'introduction" }
+				}
+			],
+			"implementation": [
+				"_:implement_intro"
+			],
+			"history": [
+				{
+					"en": "March 2024 - Initial implementation of the variation.",
+					"fr": "Mars 2024 - Implémentation initiale de la variante."
+				}
+			]
+		},
+		{
+			"name": {
+				"en": "Introduction block with image",
+				"fr": "Bloc d'introduction avec image"
+			},
+			"description": {
+				"en": "The introduction block pattern introduces the content of a landing page. This variation can contain an image and a super task button.",
+				"fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation peur contenir une image."
+			},
+			"guidance": {
+				"en": "https://design.canada.ca/common-design-patterns/intro-block.html",
+				"fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html"
+			},
+			"example": [
+				{
+					"en": { "href": "gc-intro-image-en.html", "text": "Introduction block with image" },
+					"fr": { "href": "gc-intro-image-fr.html", "text": "Bloc d'introduction avec image" }
+				}
+			],
+			"implementation": [
+				"_:implement_intro_image"
+			],
+			"history": [
+				{
+					"en": "March 2024 - Initial implementation of the variation.",
+					"fr": "Mars 2024 - Implémentation initiale de la variante."
+				}
+			]
+		}
+	],
+	"implementation": [
+		{
+			"@id": "_:implement_intro",
+			"iteration": "_:iteration_intro_1",
+			"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."
+			},
+			"instructions": {
+				"en": [
+					"The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.",
+					"According to the Canada.ca design system guidance, the introduction block with image contains the following elements:<ul><li>title (mandatory)</li><li>short description (mandatory)</li><li>supertask button (optional)</li></ul>",
+					"Refer to the code sample below."
+				],
+				"fr": [
+					"La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.",
+					"Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image contient les éléments suivants&nbsp;:<ul><li>titre (obligatoire)</li><li>description courte (obligatoire)</li><li> bouton de super-tâche (facultatif)</li></ul>",
+					"Référez-vous au code qui suit."
+				]
+			},
+			"sample": {
+				"en": [
+					{
+						"@type": "source-code",
+						"description": "Code sample:",
+						"code": "<h1 property=\"name\" id=\"wb-cont\">Introduction block</h1>\n<p>The introduction block pattern introduces the content of a landing page.</p>\n<p><a class=\"btn btn-call-to-action\" href=\"#\">Super task button</a></p>"
+					}
+				],
+				"fr": [
+					{
+						"@type": "source-code",
+						"description": "Exemple de code :",
+						"code": "<h1 property=\"name\" id=\"wb-cont\">Bloc d'introduction</h1>\n<p>La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil.</p>\n<p><a class=\"btn btn-call-to-action\" href=\"#\">Bouton de super-tâche</a></p>"
+					}
+				]
+			}
+		},
+		{
+			"@id": "_:implement_intro_image",
+			"iteration": "_:iteration_intro_image_1",
+			"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."
+			},
+			"instructions": {
+				"en": [
+					"The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.",
+					"According to the Canada.ca design system guidance, the introduction block with image contains the following elements:<ul><li>title (mandatory)</li><li>short description (mandatory)</li><li>image (mandatory)</li><li>supertask button (optional)</li></ul>",
+					"Refer to the code sample below."
+				],
+				"fr": [
+					"La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.",
+					"Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image contient les éléments suivants&nbsp;:<ul><li>titre (obligatoire)</li><li>description courte (obligatoire)</li><li>image (obligatoire)</li><li> bouton de super-tâche (facultatif)</li></ul>",
+					"Référez-vous au code qui suit."
+				]
+			},
+			"techConsiderations": {
+				"en": [
+					"It is the responsibility of the author to make sure the whole text has a minimum contrast ratio of 4:1 with the background image on every breakpoint and with a zoom of up to 400%.",
+					"The background image size recommended is 1200px by 726px. For more information on the background image, please consult the official guidelines."
+				],
+				"fr": [
+					"Il est de la responsabilité de l'auteur de s'assurer que l'ensemble du texte présente un rapport de contraste minimum de 4:1 avec l'image d'arrière-plan sur chaque point d'arrêt et avec un zoom allant jusqu'à 400&nbsp;%.",
+					"La taille de l’image d’arrière-plan recommandée est de 1200px par 726px. Pour plus d'information sur l'image d'arrière-plan, veuillez consulter les directives officielles."
+				]
+			},
+			"notes": {
+				"en": [
+					"The introduction block pattern with image must be located outside of the default page container (or any element with the class <code>.container</code>)."
+				],
+				"fr": [
+					"La configuration de conception du bloc d’introduction avec image doit être située en dehors du conteneur de page par défaut (ou de tout élément avec la classe <code>.container</code>)."
+				]
+			},
+			"sample": {
+				"en": [
+					{
+						"@type": "source-code",
+						"description": "Code sample:",
+						"code": "<div class=\"bg-center bg-cover\" data-bgimg-srcset=\"https://wet-boew.github.io/vocab/wb/utilities#no-image 991w, img/ip-cover-image-1200x726.jpg 992w\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-md-7\">\n\t\t\t\t<h1 property=\"name\" id=\"wb-cont\">[Institution name]</h1>\n\t\t\t\t<p>Short description of the institution’s mandate.</p>\n\t\t\t\t<p><a class=\"btn btn-call-to-action\" href=\"#\">Super task button</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>"
+					}
+				],
+				"fr": [
+					{
+						"@type": "source-code",
+						"description": "Exemple de code :",
+						"code": "<div class=\"bg-center bg-cover\" data-bgimg-srcset=\"https://wet-boew.github.io/vocab/wb/utilities#no-image 991w, img/ip-cover-image-1200x726.jpg 992w\">\n\t<div class=\"container\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-md-7\">\n\t\t\t\t<h1 property=\"name\" id=\"wb-cont\">[Nom de l’institution]</h1>\n\t\t\t\t<p>Description courte du mandat de d’institution.</p>\n\t\t\t\t<p><a class=\"btn btn-call-to-action\" href=\"#\">Bouton de super-tâche</a></p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>"
+					}
+				]
+			}
+		}
+	]
+}

design-patterns/gc-intro/samples/gc-intro-image.html

@@ -0,0 +1,11 @@
+<div class="bg-center bg-cover" data-bgimg-srcset="https://wet-boew.github.io/vocab/wb/utilities#no-image 991w, img/ip-cover-image-1200x726.jpg 992w">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-7">
+				<h1 property="name" id="wb-cont">{{ page.title }}</h1>
+				<p>{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}</p>
+				<p><a class="btn btn-call-to-action" href="#">{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}</a></p>
+			</div>
+		</div>
+	</div>
+</div>

design-patterns/gc-intro/samples/gc-intro.html

@@ -0,0 +1,3 @@
+<h1 property="name" id="wb-cont">{{ page.title }}</h1>
+<p>{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}</p>
+<p><a class="btn btn-call-to-action" href="#">{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}</a></p>