Add main page title component

This commit adds the main page title component, which includes the SCSS file, HTML template, JSON data, and Markdown documentation for both English and French versions. The component provides a default H1 style with a short bold red underline for use in Canada.ca websites. It also includes guidance and code samples for implementing the component with and without RDFa + schema.org markup.

_config.yml

@@ -1,6 +1,7 @@
 #
 # Local site settings
 remote_theme: wet-boew/gcweb-jekyll
+repository: wet-boew/GCWeb
 title: "GCWeb, the Canada.ca official theme" # Site name or title
 website: "https://wet-boew.github.io/GCWeb/" # URL of your public facing website
 global:

components/baseline/_base.scss

@@ -7,19 +7,6 @@
 	background-color: #355688;
 }
 
-/* H1 short bold red underline */
-h1.gc-thickline {
-	border-bottom: none;
-
-	&::after {
-		border-bottom: .18em solid #af3c43;
-		content: "";
-		display: block;
-		padding-bottom: 8px;
-		width: 70px;
-	}
-}
-
 /*
 * Panel title
 */

sites/_variables.scss

@@ -14,6 +14,11 @@ $search-gray: #e0e0e0;
 $profile-gray: #eaebed;
 $gray-light: #6f6f6f; // Light grey colour (Bootstrap override).
 
+// Brand variables - Main page title
+$main-page-title-rule-width: 71px;
+$main-page-title-rule-thickness: .18em;
+$main-page-title-rule-color: $border-red;
+
 // Colours for the alert styles
 $alert-danger-color: #d3080c;
 $alert-warning-color: #ee7100;

sites/baseline/_heading.scss

@@ -8,7 +8,6 @@
  */
 
 h1 {
-	border-bottom: 1px solid $border-red;
 	margin-bottom: .2em;
 	margin-top: 1em;
 	padding-bottom: .2em;

sites/main-page-title/_base.scss

@@ -0,0 +1,7 @@
+/* H1 short bold red underline */
+
+h1#wb-cont {
+	border-bottom: $main-page-title-rule-thickness solid $main-page-title-rule-color;
+	border-image: linear-gradient(to right, $main-page-title-rule-color $main-page-title-rule-width, transparent $main-page-title-rule-width);
+	border-image-slice: 1;
+}

sites/main-page-title/includes/main-page-title.html

@@ -0,0 +1 @@
+<h1 property="name" id="wb-cont">{{ page.title }}</h1>

sites/main-page-title/index.json-ld

@@ -0,0 +1,162 @@
+{
+	"@context": {
+		"@version": 2.0,
+		"dct": "http://purl.org/dc/terms/",
+		"title": { "@id": "dct:title", "@container": "@language" },
+		"description": { "@id": "dct:description", "@container": "@language" },
+		"modified": "dct:modified"
+	},
+	"title": {
+		"en": "Main title of the page",
+		"fr": "Titre principal"
+	},
+	"description": {
+		"en": "Documentation on how to use the Main title of the page component.",
+		"fr": "Documentation sur l'utilisation du composant Titre principal."
+	},
+	"modified": "2024-01-29",
+	"componentName": "main-page-title",
+	"status": "stable",
+	"version": "1.1.0",
+	"pages": {
+		"docs": [
+			{
+				"title": "Main page title documentation",
+				"language": "en",
+				"path": "main-page-title-en.html"
+			},
+			{
+				"title": "Documentation du titre principal",
+				"language": "fr",
+				"path": "main-page-title-fr.html"
+			}
+		]
+	},
+	"dependencies": [],
+	"a11yGuidance": "This component respects all WCAG 2.1 guidelines.",
+	"variations": [
+		{
+			"name": {
+				"en": "Main page title - default",
+				"fr": "Titre principal - par défaut"
+			},
+			"status": "stable",
+			"description": {
+				"en": "When the H1 is the main title of a page, it includes a red bar as part of the Canada.ca brand.",
+				"fr": "Lorsque le H1 est le titre principal d'une page, il inclut une barre rouge faisant partie de la marque Canada.ca."
+			},
+			"guidance": {
+				"en": "https://design.canada.ca/styles/typography.html",
+				"fr": "https://conception.canada.ca/styles/typographie.html"
+			},
+			"iteration": "_:iteration_mpt_2",
+			"example": [
+				{
+					"en": { "href": "../../content-page/content-en.html", "text": "Content page (main page title)" },
+					"fr": { "href": "../../content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
+				}
+			],
+			"implementation": [
+				"_:implement_mpt"
+			],
+			"history": [
+				{
+					"en": "2024-01 - Visual update",
+					"fr": "2024-01 - Mise à jour visuelle"
+				}
+			]
+		}
+	],
+	"implementation": [
+		{
+			"@id": "_:implement_mpt",
+			"iteration": "_:iteration_mpt_2",
+			"name": {
+				"en": "Standard",
+				"fr": "Standard"
+			},
+			"introduction": {
+				"en": "The purpose of the main page title component is to provide a default style for the first H1 in the main element with a short bold red rule for use in Canada.ca websites. It is used to indicate the main heading of a page.",
+				"fr": "Le but du composant du titre principal de la page est de fournir un style par défaut pour le premier H1 de l'élément main avec une ligne rouge épaisse et courte pour utilisation sur les sites web de Canada.ca. Il est utilisé pour indiquer le titre principal d'une page"
+			},
+			"sample": {
+				"en": [
+					{
+						"@type": "source-code",
+						"description": "HTML sample",
+						"code":	"<h1 id=\"wb-cont\">Main page title</h1>"
+					}
+				],
+				"fr": [
+					{
+						"@type": "source-code",
+						"description": "Exemple HTML",
+						"code":	"<h1 id=\"wb-cont\">Titre principal</h1>"
+					}
+				]
+			}
+		}
+	],
+	"changeset": [
+		{
+			"@id": "_:cs_mpt",
+			"name": {
+				"en": "Default h1",
+				"fr": "H1 par default"
+			},
+			"baseOnIteration": "_:iteration_mpt_2",
+			"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43.",
+			"layout": "The line is positioned below the text.",
+			"semantic": {
+				"@type": "h1",
+				"description": "Level 1 heading",
+				"code": {
+					"@type": [
+						"@id",
+						"rdf:HTML"
+					],
+					"@value": "includes/main-page-title.html"
+				}
+			},
+			"static": "none",
+			"schema": "dct:title",
+			"include": {
+				"@type": "source-code",
+				"collapsed": true,
+				"description": "Include with logic in Liquid.",
+				"code": {
+					"@type": [ "@id", "rdf:HTML" ],
+					"@value": "includes/main-page-title.html"
+				}
+			},
+			"style": "The line has a width of 3.55em (71px) and a thickness of 0.18em (3.6px) with the color #af3c43. Optionally, include a byline, tagline, or subtitle.",
+			"logic": "none",
+			"behaviour": "none",
+			"perceptible": "The thin hairline has been replaced with a shorter and thicker line.",
+			"guidance": "https://design.canada.ca/styles/typography.html",
+			"context": "First semantic element inside the main",
+			"configuration": "none",
+			"dependency": "none",
+			"file": "none"
+		}
+	],
+	"iteration": [
+		{
+			"@id": "_:iteration_mpt_1",
+			"name": "Visual update 2019",
+			"date": "2019-06",
+			"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be the width of the main container long and the thickness should be 1px, with the color #af3c43.",
+			"successor": "_:iteration_mpt_2"
+		},
+		{
+			"@id": "_:iteration_mpt_2",
+			"name": "Visual update 2024",
+			"date": "2024-01",
+			"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43.",
+			"breaking": {
+				"style": "Width of the line should 70px and the thickness .18em #af3c43. Followed by optional byline, tagline or subtitle"
+			},
+			"predecessor": "_:iteration_mpt_1"
+		}
+	]
+}

sites/main-page-title/main-page-title-en.md

@@ -0,0 +1,10 @@
+---
+altLangPage: "main-page-title-fr.html"
+dateModified: "2024-01-29"
+description: "Documentation on the default H1 use as the main title of a page with a short bold red underline."
+language: "en"
+pageclass: "wb-prettify all-pre"
+title: "Main page title"
+layout: documentation
+index_json: index.json-ld
+---

sites/main-page-title/main-page-title-fr.md

@@ -0,0 +1,10 @@
+---
+altLangPage: "main-page-title-en.html"
+dateModified: "2024-01-29"
+description: "Documentation à propos du H1 par défaut souligné d'une courte ligne rouge en gras."
+language: "fr"
+pageclass: "wb-prettify all-pre"
+title: "Titre principal de la page"
+layout: documentation
+index_json: index.json-ld
+---

sites/theme.scss

@@ -79,6 +79,7 @@
 @import "gcweb-menu/base";
 @import "authentication/base";
 @import "header/base";
+@import "main-page-title/base";
 
 /*! Components (CSS type only) */
 @import "bootstrap-sass/assets/stylesheets/bootstrap/component-animations";