Merge pull request #544 from canada-ca/hotfix/style-guide-thumbnail

Update metadata and add cover image for Canada.ca Content Style Guide

Author: delisma

_config.staging.yml

@@ -3,4 +3,4 @@ analytics:
     # adobe:
     #   tracking_id: be5dfd287373/0127575cd23a/launch-913b1beddf7a-staging
     #   service: TBS-DTO-TEST_TEST-BTN-SCT
-url: ""
+url: "DEPLOY_PRIME_URL"

_config.yml

@@ -64,7 +64,7 @@
   "remote_theme": "wet-boew/gcweb-jekyll",
   "themeopt": "Policies",
   "title": "Canada.ca design",
-  "url": "",
+  "url": "https://design.canada.ca",
   "urlconception": "https://conception.canada.ca",
   "urlcanadaca": "https://www.canada.ca",
   "urlblogca": "https://blog.canada.ca",

_includes/metadata.html

@@ -1,8 +1,12 @@
 <!-- Custom code starts here (Metadata) / Code personalisé commence ici (Métadonnées) -->
-		<link rel="canonical" href="{{ page.url | remove_first: '/' | remove_first: page.lang | prepend: site.altLangUrl[ page.lang ] }}" />
-		<link rel="alternate" href="{{ page.altLangPage | prepend: site.altLangUrl[ i18nText-altLang ] }}" hreflang="{{ i18nText-altLang }}" />
+		<link rel="canonical" href="{{ page.url | absolute_url }}" />
+		<link rel="alternate" href="{{ page.altLangPage }}" hreflang="{{ i18nText-altLang }}" />
 {%- if page.description %}
 		<meta name="description" content="{{ page.description }}" />
+		{%- if page.image %}
+		<meta name="og:description" content="{{ page.description }}" />
+		<meta name="twitter:description" content="{{ page.description }}" />
+		{% endif %}
   {%- elsif site.description %}
 		<meta name="description" content="{{ site.description[ page.lang ] }}" />
 {%- endif %}
@@ -33,23 +37,23 @@
 		<meta name="dcterms.service" content="{{ site.analytics.providers.adobe.service }}">
 {%- endif %}
 		<meta name="generator" content="Jekyll v{{ jekyll.version }}" />
-{%- if page.layout == "post" %}
+{%- if page.layout == "post" or page.image %}
   {%- if page.title %}
 		<meta property="og:title" content="{{ page.title }}" />
 		<meta property="twitter:title" content="{{ page.title }}" />
   {%- endif %}
 		<meta property="og:locale" content="{{ page.lang | append: '_CA' }}" />
-		<meta property="og:url" content="{{ site.urlalt[ page.lang ] }}{{ page.url | remove_first: '/' | remove_first: page.lang }}" />
+		<meta property="og:url" content="{{ page.url | absolute_url }}" />
   {%- if page.image %}
-    {%- capture ogimage -%}{{ page.lang | prepend: '/' }}/images/{{ page.date | date: "%F" | prepend: "og-" }}.png{%- endcapture -%}
+    {%- capture ogimage -%}/images/thumbs/{{ page.image.filename }}{%- endcapture -%}
     {%- assign file_exists = site.static_files | where: "path", ogimage -%}
 
     {%- if file_exists[0].path %}
-		<meta property="og:image" content="{{ site.urlalt[ page.lang ] }}{{ ogimage | remove_first: '/' | remove_first: page.lang }}" />
-		<meta property="twitter:image" content="{{ site.urlalt[ page.lang ] }}{{ ogimage | remove_first: '/' | remove_first: page.lang }}" />
+		<meta property="og:image" content="{{ ogimage | absolute_url }}" />
+		<meta property="twitter:image" content="{{ ogimage | absolute_url }}" />
 	{%- else %}
-		<meta property="og:image" content="{{ site.urlalt[ page.lang ] }}/images/thumbs/{{ page.date | date: '%F' }}.png" />
-		<meta property="twitter:image" content="{{ site.urlalt[ page.lang ] }}/images/thumbs/{{ page.date | date: '%F' }}.png" />
+		<meta property="og:image" content="{{ site.url }}/images/thumbs/{{ page.date | date: '%F' }}.png" />
+		<meta property="twitter:image" content="{{ site.url }}/images/thumbs/{{ page.date | date: '%F' }}.png" />
 	{%- endif %}
 
 	{%- if page.image.height %}
@@ -80,7 +84,7 @@
     {%- endif %}
 
     {%- if site.title %}
-		<meta property="og:site_name" content="{{ site.title[ page.lang ] }}" />
+		<meta property="og:site_name" content="{{ site.title }}" />
     {%- endif -%}
 
     {%- if paginator.previous_page %}

images/thumbs/sg-preview-img.png

@@ -1,3 +1,3 @@
 [context.deploy-preview]
     # const url = process.env.DEPLOY_URL
-	command = "bundle exec jekyll build --config _config.yml,_config.staging.yml"
+	command = "sed -i.bak 's|DEPLOY_PRIME_URL|'${DEPLOY_PRIME_URL}'|g' _config.staging.yml && bundle exec jekyll build --config _config.yml,_config.staging.yml"

netlify.toml

@@ -3,8 +3,12 @@ altLangPage: "https://conception.canada.ca/guide-redaction"
 date: 2017-10-05
 dateModified:  2024-08-06
 description: "The Canada.ca Content Style Guide provides the rules to create web content that can be easily found, understood and used."
+image:
+  filename: sg-preview-img.png
+  alt: "Canada.ca Content Style Guide cover image"
 title: "Canada.ca Content Style Guide"
 ---
+
 <section id="intro">
   <p>These are the rules to create web content that can be easily found, understood and used. They are based on writing principles and techniques that help make web content clear and adapted to the needs of all people. Use it with the <a href="{{ site.url }}/architecture/canada-content-information-architecture-specification.html">Canada.ca Specifications</a> when you're designing and organizing web content.</p>
 </section>