Add tag listing page and update internationalization for tags

cds-snc · Dec 30, 2024 · b0f3895 · b0f3895
1 parent 352281f
commit b0f3895
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 11 deletions.
diff --git a/assets/sass/cds/_blog.scss b/assets/sass/cds/_blog.scss
@@ -387,4 +387,13 @@ article.post {
   @include mobile_only {
     display: none;
   }
- }
+ }
+
+.lst-spcd {
+  li {
+    margin-bottom: 10px
+  }
+  ol, ul {
+    margin-top: 10px
+  }
+}
diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -226,7 +226,6 @@ product-url:
   other: "/product/"
 privacy-page-url:
   other: "/legal/privacy"
-
 fip-logo-alt:
   other: "Government of Canada logo"
 fip-header:
@@ -274,11 +273,11 @@ footer-contact-us:
 footer-jobs:
   other: "Jobs at CDS"
 footer-jobs-link:
-  other: "/jobs/"    
+  other: "/jobs/"
 footer-security:
   other: "Security"
 footer-security-link:
-  other: "/security-notice/"                
+  other: "/security-notice/"
 footer-privacy:
   other: "Privacy"
 footer-privacy-link:
@@ -308,4 +307,10 @@ meta-subject:
 homepage:
   other: "Home page"
 ga4-linkedin:
-  other: "EN_LinkedIn"    
+  other: "EN_LinkedIn"
+tagged-with:
+  other: "Tagged with"
+topics:
+  other: "Topics"
+view-tags:
+  other: "View posts tagged with:"
diff --git a/i18n/fr.yaml b/i18n/fr.yaml
@@ -312,4 +312,10 @@ meta-subject:
 homepage:
   other: "Page d’accueil"
 ga4-linkedin:
-  other: "FR_LinkedIn"        
+  other: "FR_LinkedIn"
+tagged-with:
+  other: "Balisé avec&nbsp;"
+topics:
+  other: "Sujets&nbsp;"
+view-tags:
+  other: "Voir les billets balisés avec:"
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -181,7 +181,9 @@ <h1>{{ .Params.title }}</h1>
     <script src="/lib-cds/gcweb-dist/wet-boew/js/wet-boew.min.js"></script>
     <script src="/lib-cds/gcweb-dist/GCWeb/js/theme.min.js"></script>
     <script type="text/javascript" src="{{ $js.RelPermalink }}"></script>
+    {{ if eq .Section "blog" }}
     <script type="text/javascript" src="/js/blog.js"></script>
+    {{ end }}
     <script src="/js/lazyload.js" async=""></script>
 
 

diff --git a/layouts/tags/list.html b/layouts/tags/list.html
@@ -0,0 +1,79 @@
+{{ define "title" }}
+<div class="page-banner standard">
+  <div class="container">
+    <div class="page-banner--title">
+      <h1>{{ i18n "tagged-with" }}: {{ .Title }}</h1>
+    </div>
+  </div>
+</div>
+{{ end }}
+
+{{ define "main" }}
+<div class="container">
+  <div class="row">
+    <section class="col-md-8">
+      <ul id ="blog-list-result" class="blogpost-list">
+        {{ $currentTag := .Title}}
+        {{ range .Pages }}
+        {{ if in .Params.tags $currentTag }}
+        <li class="post">
+          <article class="post-container">
+            <div class="text-container">
+              <div style="margin-top: 1rem;">
+                <a href="{{ .Permalink }}" class="blog-title">
+                  <h2 style="font-size: 2.2rem; font-weight:600;">{{ .Title | markdownify }}</h2>
+                </a>
+              </div>
+              <div class="date">
+                <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+                  {{ .Date.Format "January 2, 2006" }}
+                </time>
+              </div>
+              <div class="author">
+                <span>{{ .Params.author }}</span>
+              </div>
+              <div class="summary">
+                <p>{{ .Params.description }}</p>
+              </div>
+              <gcds-button size="small" button-role="secondary" button-id="read-full-post-btn" type="link" href="{{ .Permalink }}">
+                {{ i18n "read-more" }}
+                <span style="display: none;">: {{ .Title }}</span>
+                <gcds-icon name="fa-solid fa-chevron-right" | size="inherit"></gcds-icon>
+              </gcds-button>
+              <div class="tags">
+                <p><b>{{ i18n "topics" }}:</b>&nbsp;
+                  {{ $tags := .Params.tags }}
+                  {{ range $index, $tag := $tags }}
+                  <a href='{{ "/tags/" | relLangURL }}{{ . | urlize }}'>{{ . }}</a>{{ if ne (add $index 1) (len $tags) }}, {{ end }}
+                  {{ end }}
+                </p>
+              </div>
+            </div>
+          </article>
+        </li>
+        {{ end }}
+        {{ end }}
+      </ul>
+      <div class="container" style="display: flex; flex-direction: column;">
+        <div style="margin-left: auto; margin-right: auto; margin-bottom: 2rem;">
+          <gcds-button id="blog-btn" button-id="load-more-blog-btn">{{ i18n "load-more"}} <gcds-icon name="fa-solid fa-chevron-right fa-rotate-90"></gcds-icon></gcds-button>
+        </div>
+      </div>
+    </section>
+    <aside class="col-md-4">
+      <div class="container">
+        <div class="row">
+          <h2 class="h3" style="margin-top: 4rem;">{{ i18n "view-tags" }}</h2>
+          <ul class="blogpost-list lst-spcd">
+            {{ range .Site.Taxonomies.tags }}
+            <li>
+              <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
+            </li>
+            {{ end }}
+          </ul>
+        </div>
+      </div>
+    </aside>
+  </div>
+</div>
+{{ end }}
diff --git a/static/js/blog.js b/static/js/blog.js
@@ -1,10 +1,10 @@
-// Test #4
 let blogIndex, blogResults;
 let blogRows = 6;
 let blogListResults = document.getElementById("blog-list-result")
 let myBlogLi = document.getElementById("my-blog-li")
 let loadMoreBlogButton = document.querySelector("#blog-btn")
 let jsMainNavButton = document.querySelector("#js-mainNavButton")
+let lang = document.documentElement.lang
 async function initBlogSearch() {
     try {
         const response = await fetch ("/index.json")
@@ -80,10 +80,10 @@ loadMoreBlogButton.addEventListener( "click", () => {
 function dateFormat( date ) {
     let formattedDate;
     const blogDate = new Date( date )
-    if ( document.documentElement.lang == 'en' ) {
+    if ( lang == 'en' ) {
         const options = { year: 'numeric', month: 'short', day: 'numeric' }
         formattedDate = blogDate.toLocaleDateString( 'en-us', options)
-    } else if ( document.documentElement.lang == 'fr' ) {
+    } else if ( lang == 'fr' ) {
         const options = { year: 'numeric', month: 'long', day: 'numeric' }
         formattedDate = blogDate.toLocaleDateString( 'fr-ca', options )
     }
@@ -94,10 +94,10 @@ function dateFormat( date ) {
 function readFullPostTranslation() {
     let readFullPost;
 
-    if ( document.documentElement.lang == 'en' ) {
+    if ( lang == 'en' ) {
         return 'Read full post'
     }
-    else if ( document.documentElement.lang == 'fr' ) {
+    else if ( lang == 'fr' ) {
         return 'Lire l’intégralité du billet'
     }
 }