Skip to content

Commit

Permalink
Add main page title component
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
delisma committed Jan 4, 2024
1 parent 9920fbc commit a2a91a6
Show file tree
Hide file tree
Showing 6 changed files with 629 additions and 0 deletions.
10 changes: 10 additions & 0 deletions sites/main-page-title/_main-page-title.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/* 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;
}
12 changes: 12 additions & 0 deletions sites/main-page-title/includes/main-page-title.html
View file
Original file line number Diff line number Diff line change
@@ -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 %}
273 changes: 273 additions & 0 deletions sites/main-page-title/index.json-ld
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,273 @@
{
"@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 page title",
"fr": "Titre principal"
},
"description": {
"en": "Documentation on how to use the Main page title component.",
"fr": "Documentation sur l'utilisation du composant Titre principal."
},
"modified": "2023-07-26",
"componentName": "gc-main-page-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": ""
}
]
}
}
]
}
Loading

0 comments on commit a2a91a6

Please sign in to comment.