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.

_data/sites.json

@@ -2132,6 +2132,279 @@
 		]
 	}
 }
+,{
+    "@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-04",
+    "componentName": "gc-main-title",
+    "status": "stable",
+    "version": "1.0.1",
+    "pages": {
+        "docs": [
+            {
+                "title": "Main page title",
+                "language": "en",
+                "path": "gc-main-page-title-en.html"
+            },
+            {
+                "title": "Titre principal",
+                "language": "fr",
+                "path": "gc-main-page-title-fr.html"
+            }
+        ]
+    },
+    "dependencies": [],
+    "a11yGuidance": "This component respects all WCAG 2.1 guidelines.",
+    "variations": [
+        {
+            "name": {
+                "en": "Main page title with [id=wb-cont]",
+                "fr": "Titre principal avec [id=wb-cont]"
+            },
+            "status": "stable",
+            "description": {
+                "en": "This variant should be used when the heading is the main content heading.",
+                "fr": "Cette variante doit être utilisée lorsque le titre est le titre principal du contenu."
+            },
+            "guidance": {
+                "en": "https://design.canada.ca/common-design-patterns/gc-h1.html",
+                "fr": "https://conception.canada.ca/configurations-conception-communes/gc-h1.html"
+            },
+            "revisedFor": "_:iteration_2",
+            "example": {
+                "en": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ],
+                "fr": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ]
+            },
+            "implementation": [
+                "_:implement_1_upgrade",
+            ],
+            "oldImplementation": [
+                "_:implement_1_build"
+            ],
+            "history": [
+                {
+                    "en": "AAAA-MM-DD - Description 1",
+                    "fr": "AAAA-MM-DD - Description 1"
+                }
+            ]
+        },
+        {
+            "name": {
+                "en": "Main page title without [id=wb-cont]",
+                "fr": "Titre principal sans [id=wb-cont]"
+            },
+            "status": "stable",
+            "description": {
+                "en": "This variant should be used for other headings.",
+                "fr": "Cette variante doit être utilisée pour les autres titres."
+            },
+            "guidance": {
+                "en": "",
+                "fr": ""
+            },
+            "implementation": {
+                "sample": {
+                    "rev_code": "<h1 property=\"name\" dir="ltr">Main page title</h1>"
+                }
+            },
+            "history": []
+        },
+        {
+            "name": {
+                "en": "Main page title enhanced with RDFa + schema.org with [id=wb-cont]",
+                "fr": "Titre principal enrichi avec RDFa + schema.org avec [id=wb-cont]"
+            },
+            "description": {
+                "en": "This variant should be used when structured data is required, and its use should be consistent with the overall SEO and data strategy of Canada.ca.",
+                "fr": "Cette variante doit être utilisée lorsque des données structurées sont nécessaires, et son utilisation doit être cohérente avec la stratégie globale de SEO et de données de Canada.ca."
+            },
+            "status": "stable",
+            "guidance": {
+                "en": "",
+                "fr": ""
+            },
+            "history": []
+        },
+        {
+            "name": {
+                "en": "Main page title enhanced with RDFa + schema.org without [id=wb-cont]",
+                "fr": "Titre principal enrichi avec RDFa + schema.org sans [id=wb-cont]"
+            },
+            "description": {
+                "en": "This variant should be used when structured data is required, and its use should be consistent with the overall SEO and data strategy of Canada.ca.",
+                "fr": "Cette variante doit être utilisée lorsque des données structurées sont nécessaires, et son utilisation doit être cohérente avec la stratégie globale de SEO et de données de Canada.ca."
+            },
+            "status": "stable",
+            "guidance": {
+                "en": "",
+                "fr": ""
+            },
+            "implementation": {
+                "sample": {
+                    "rev_code": "<h1 property=\"name\" typeof=\"Thing\" dir=\"ltr\">Your Heading Here</h1>"
+                }
+            },
+            "history": []
+        }
+    ],
+    "implementation": [
+        {
+            "@id": "_:implement_1_new",
+            "status": "",
+            "iteration": "_:iteration_1",
+            "name": {
+                "en": "",
+                "fr": ""
+            },
+            "sample": {
+                "@type": "code-compare",
+                "rev_title": "Version 2.0",
+                "rev_code": "",
+                "from_title": "",
+                "from_code": ""
+            },
+            "introduction": {
+                "en": "",
+                "fr": ""
+            }
+        }
+    ],
+    "changeset": [
+        {
+            "@id": "_:cs_default",
+            "name": {
+                "en": "Version 1",
+                "fr": "Version 1"
+            },
+            "status": "stable",
+            "baseOnIteration": "_:iteration_1",
+            "detectableBy": "",
+            "layout": [
+                ""
+            ],
+            "style": [
+
+            ],
+            "semantic": {
+                "@type": "",
+                "description": "",
+                "code": {
+                    "@type": [
+                        "@id",
+                        "rdf:HTML"
+                    ],
+                    "@value": "includes/gc-h1.html"
+                }
+            },
+            "logic": "",
+            "behaviour": "",
+            "recognition": "",
+            "guidance": "",
+            "context": "",
+            "configuration":[
+                ""
+            ],
+            "static": "",
+            "schema": "",
+            "dependency": [
+                ""
+            ],
+            "file": [
+                ""
+            ]
+        }
+    ],
+    "iteration": [
+        {
+            "@id": "_:iteration_1",
+            "name": {
+                "en": "v1",
+                "fr": "v1"
+            },
+            "date": "2018-09",
+            "detectableBy": "",
+            "comment": "",
+            "successor": "_:iteration_2",
+            "example": {
+                "en": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ],
+                "fr": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ]
+            }
+        }
+        {
+            "@id": "_:iteration_2",
+            "name": {
+                "en": "v2",
+                "fr": "v2"
+            },
+            "date": "2023-08",
+            "detectableBy": "",
+            "breaking": {
+                "semantic": ""
+            },
+            "additions": {
+                "api": ""
+            },
+            "fixes": {
+                "api": ""
+            },
+            "predecessor": "_:iteration_1",
+            "comment": "",
+            "example": {
+                "en": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ],
+                "fr": [
+                    {
+                        "href": "",
+                        "text": ""
+                    }
+                ]
+            }
+        }
+    ]
+}
 ,{
 	"@context": {
 		"@version": 2.0,

sites/baseline/_heading.scss

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

sites/main-page-title/_main-page-title.scss

@@ -0,0 +1,24 @@
+/* H1 short bold red underline */
+/* Using border-image and linear-gradient to avoid pseudo-element and would be easier to override in edge cases (like if a campaign page or something needed to disable the thickline style for whatever reason). */
+h1#wb-cont {
+	$thickline-color: #af3c43;
+	$thickline-width: 71px;
+	$thickline-thickness: .18em;
+	border-bottom: $thickline-thickness solid $thickline-color;
+	border-image: linear-gradient(to right, $thickline-color $thickline-width, transparent $thickline-width);
+	border-image-slice: 1;
+}
+
+/* Reference other H1 styles */
+/*
+ * baselines/_heading.scss
+  h1 {
+	border-bottom: 1px solid $border-red;
+	margin-bottom: .2em;
+	margin-top: 1em;
+	padding-bottom: .2em;
+	}
+ * gc-subway
+
+ *
+ */

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

@@ -0,0 +1,12 @@
+{% if include %}
+	{% if include.dir == 'ltr' or include.dir == 'rtl' %}
+		<h1 property="name"
+		{%- if include.rdfa -%}
+		typeof="WebPageElement"
+		{%- endif -%}
+		{%- if include.id -%}
+		id="wb-cont"
+		{%- endif -%}
+		dir="{{ include.dir }}">{{ page.title }}</h1>
+	{% endif %}
+{% endif %}