feat: add language selection landing page, redirect accordingly

inclusive-design · Apr 17, 2024 · 0ca43ae · 0ca43ae
1 parent 3aa8155
commit 0ca43ae
Show file tree

Hide file tree

Showing 17 changed files with 159 additions and 20 deletions.
diff --git a/src/404.md b/src/404.md
@@ -0,0 +1,18 @@
+---
+title: Page Not Found / Page non trouvée 
+eleventyExcludeFromCollections: true
+layout: layouts/base
+permalink: /404.html
+---
+<div class="flow">
+<div lang="en-CA">
+
+The page you were looking for does not exist. Go back to the [home page?](/en/)
+
+</div>
+<div lang="fr-CA">
+
+La page que vous recherchez n'existe pas. Retournez à la [page d'accueil?](/fr/)
+
+</div>
+</div>
diff --git a/src/_includes/i18n/en.js b/src/_includes/i18n/en.js
@@ -32,7 +32,7 @@ module.exports = {
         "all": "All submissions",
         "filtered": "filtered result/filtered results"
     },
-    "registration": "Registration site",
+    "registration": "Registration",
     "interpretation": {
         "asl": "with ASL",
         "lsq": "with LSQ"

diff --git a/src/_includes/i18n/fr.js b/src/_includes/i18n/fr.js
@@ -32,7 +32,7 @@ module.exports = {
         "all": "Toutes les soumissions",
         "filtered": "résultat filtré/résultats filtrés"
     },
-    "registration": "Site d'enregistrement",
+    "registration": "Enregistrement",
     "interpretation": {
         "asl": "avec ASL",
         "lsq": "avec LSQ"

diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -1,16 +1,19 @@
 <!doctype html>
-<html lang="{{ lang }}-CA" dir="ltr">
+<html lang="{{ lang if lang else 'en' }}-CA" dir="ltr">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width">
-        <title>{% if title %} {{ title }} | {% endif %} {{ site[lang].name }}</title>
+        <meta name="theme-color" content="#fff">
+        <title>{% if title %} {{ title }}{% if lang %} |{% endif %}{% endif %}{% if lang %} {{ site[lang].name }}{% endif %}</title>
         {% include "partials/global/stylesheets.njk" %}
+        {% if lang %}
         {% include "partials/global/meta.njk" %}
+        {% endif %}
         {% include "partials/global/icons.njk" %}
         <link rel="manifest" href="/manifest.webmanifest">
         {% include "partials/global/scripts.njk" %}
     </head>
-    <body>
+    <body{% if bodyClass %} class="{{ bodyClass }}"{% endif %}>
         {% include "partials/global/header.njk" %}
         <main>
             <article class="container">

diff --git a/src/_includes/layouts/index.njk b/src/_includes/layouts/index.njk
@@ -0,0 +1,34 @@
+{% extends "layouts/base.njk" %}
+
+{% block pageHeader %}
+{% endblock %}
+
+{% block content %}
+<div class="content">
+    <div class="flow">
+        <div lang="en-CA">
+            <a href=="/en/" hreflang="en-CA">English</a>
+        </div>
+        <div lang="fr-CA">
+            <a href=="/fr/" hreflang="fr-CA">Français</a>
+        </div>
+    </div>
+</div>
+<script>
+    const savedLanguage = localStorage.getItem("lang") ?? null;
+    
+    if (savedLanguage) {
+        shortLanguage = savedLanguage.split('-')[0];
+        window.location.replace(shortLanguage);
+    }
+
+    document.addEventListener('click', (event) => {
+        event.preventDefault();
+        const selectedLanguage = event.target.getAttribute('hreflang');
+        localStorage.setItem("lang", selectedLanguage);
+        shortLanguage = selectedLanguage.split('-')[0];
+        window.location.replace(shortLanguage);
+    });
+</script>
+{% endblock %}
+
diff --git a/src/_includes/layouts/page.njk b/src/_includes/layouts/page.njk
@@ -32,5 +32,8 @@
     </div>
     {% include "partials/components/pagination.njk" %}
 </filter-container>
+<script>
+    localStorage.setItem("lang", "{{ lang }}");
+</script>
 {% endblock %}
 
diff --git a/src/_includes/partials/components/brand.njk b/src/_includes/partials/components/brand.njk
@@ -3,7 +3,7 @@
                 {% set homeUrl = "/" + supportedLanguages[lang].slug + "/" %}
                 {% else %}
                 {% set lang = defaultLanguage %}
-                {% set homeUrl = "/" %}
+                {% set homeUrl = "/" + supportedLanguages[lang].slug + "/" %}
                 {% endif %}
 
                 <a rel="home" href="{{ homeUrl }}"{% if page.url === homeUrl %} aria-current="page"{% endif %}>

diff --git a/src/_includes/partials/components/navigation.njk b/src/_includes/partials/components/navigation.njk
@@ -6,10 +6,10 @@
                     <li>
                         <ul role="list">
                             <li>
-                                <a href="/" lang="en-CA" hreflang="en-CA"{% if '/' == page.url %} aria-current="page"{% endif %}>English</a>
+                                <a href="/en/" lang="en-CA" hreflang="en-CA"{% if '/en/' == page.url %} aria-current="page"{% endif %}>English</a>
                             </li>
                             <li>
-                                <a href="/fr" lang="en-CA" hreflang="en-CA"{% if '/fr/' == page.url %} aria-current="page"{% endif %}>Français</a>
+                                <a href="/fr/" lang="en-CA" hreflang="en-CA"{% if '/fr/' == page.url %} aria-current="page"{% endif %}>Français</a>
                             </li>
                         </ul>
                     </li>

diff --git a/src/_includes/partials/global/header.njk b/src/_includes/partials/global/header.njk
@@ -1,6 +1,8 @@
         <header role="banner">
             <div class="container">
                 {% include "partials/components/brand.njk" %}
+                {% if not eleventyExcludeFromCollections and lang %}
                 {% include "partials/components/navigation.njk" %}
+                {% endif %}
             </div>
         </header>
diff --git a/src/_includes/partials/global/meta.njk b/src/_includes/partials/global/meta.njk
@@ -1,6 +1,5 @@
     <meta name="description" content="{{ site[lang].description }}">
-    <meta name="theme-color" content="#fff">
-    <meta property="og:title" content="{% if title %} {{ title }} | {% endif %} {{ site[locale].name }}">
+    <meta property="og:title" content="{% if title %}{{ title }} | {% endif %}{{ site[lang].name }}">
     <meta property="og:description" content="{{ site[lang].description }}">
     <meta property="og:locale" content="{{ lang }}">
     <meta property="og:type" content="website">

diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
@@ -180,6 +180,15 @@ body > * {
     padding-inline: 3rem;
 }
 
+.index {
+    display: grid;
+    grid-template-rows: repeat(2, 1fr);
+}
+
+.index > * {
+    padding-inline: 1.5rem;
+}
+
 .container {
     margin-inline: auto;
     max-width: 75rem;
@@ -205,12 +214,25 @@ header .container {
     gap: 1.75rem;
 }
 
+.index header {
+    align-self: end;
+}
+
+.index header .container {
+    display: block;
+    text-align: center;
+}
+
 .brand svg {
     height: auto;
     max-width: 31rem;
     width: 100%;
 }
 
+.index .brand svg {
+    max-width: 37.5rem;
+}
+
 .nav > ul {
     display: flex;
     flex-direction: column;
@@ -247,10 +269,16 @@ header .container {
     text-decoration: none;
 }
 
+/* Footer */
+
+.index footer {
+    display: none;
+}
+
 /* Typography */
 
 h1 {
-    font-size: 3rem;
+    font-size: 2.5rem;
     font-weight: 700;
     margin-block: 5rem 2.8125rem;
 }
@@ -315,6 +343,7 @@ h2::after,
     background-position: top right;
     background-repeat: no-repeat;
     border: 0;
+    color: currentcolor;
     margin: 0;
     padding: 0;
     text-align: start;
@@ -378,6 +407,7 @@ label[for="search"] {
 
 [type="search"] {
     appearance: none;
+    background-color: transparent;
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 23 22"><path stroke="%23000" stroke-width="3" d="M10.438 10.414 21.961 20.89"/><circle cx="9" cy="9" r="7.5" fill="%23FFF" stroke="%23000" stroke-width="3"/></svg>');
     background-position: 1rem center;
     background-repeat: no-repeat;
@@ -431,6 +461,27 @@ label[for="search"] {
     margin-block-start: 2.3125rem;
 }
 
+.index .content {
+    display: block;
+    margin-block-start: 0;
+    padding-block-start: 1.5rem;
+    text-align: center;
+    width: 100%;
+}
+
+.index .content a {
+    border: 0.125rem solid black;
+    border-radius: 1.25rem;
+    display: block;
+    font-size: 1.25rem;
+    font-weight: 800;
+    height: 2.5rem;
+    margin-inline: auto;
+    max-width: 12rem;
+    text-decoration: none;
+    width: 100%;
+}
+
 .content img {
     display: none;
 }
@@ -441,26 +492,25 @@ label[for="search"] {
 
 .formats li {
     align-items: center;
-    display: flex;
 }
 
 .formats li + li {
     margin-block-start: 1rem;
 }
 
 .formats svg {
+    margin-block-end: -0.25em;
     margin-inline-end: 1.75rem;
     width: 1.5rem;
 }
 
 .formats a {
-    display: inline-block;
     height: 1.875rem;
 }
 
 .formats span + span::before {
-    content: "/";
-    padding-inline: 1ex;
+    content: " / ";
+    text-decoration: none;
 }
 
 /* Pagination */
@@ -584,6 +634,10 @@ lite-youtube.lyt-activated > .lty-playbtn {
 }
 
 @media (width >= 72rem) {
+    h1 {
+        font-size: 3rem;
+    }
+
     filter-container {
         column-gap: 8.625rem;
         display: grid;
@@ -642,4 +696,8 @@ lite-youtube.lyt-activated > .lty-playbtn {
     .content:not(:has(img)) .flow {
         width: 75%;
     }
+
+    .index .content .flow {
+        width: 100%;
+    }
 }
diff --git a/src/collections/pages/en/404.md b/src/collections/pages/en/404.md
@@ -1,6 +1,7 @@
 ---
 title: Page Not Found
 eleventyExcludeFromCollections: true
-permalink: /404.html
+permalink: /en/404.html
+layout: layouts/base
 ---
-The page you were looking for does not exist. Go back to the [home page?](/)
+The page you were looking for does not exist. Go back to the [home page?](/en/)
diff --git a/src/collections/pages/en/index.md b/src/collections/pages/en/index.md
@@ -1,5 +1,5 @@
 ---
 title: Conference Submissions
 excerpt: Welcome to Accessible Canada — Accessible World, a conference that aims to advance accessibility and inclusive design in various domains.
-permalink: /
+permalink: /en/
 ---
diff --git a/src/collections/pages/fr/404.md b/src/collections/pages/fr/404.md
@@ -3,5 +3,6 @@ title: Page non trouvée
 locale: fr
 eleventyExcludeFromCollections: true
 permalink: /fr/404.html
+layout: layouts/base
 ---
 La page que vous recherchez n'existe pas. Retournez à la [page d'accueil?](/fr/)
diff --git a/src/collections/themes/fr/who-and-what-are-we-missing.md b/src/collections/themes/fr/who-and-what-are-we-missing.md
@@ -1,4 +1,4 @@
 ---
-title: Qui et qu'est-ce qui nous manque ?
+title: Qui et quoi nous manque-t-il ?
 uuid: b70c8f53-7613-434c-9b2e-f76da3cc57f3
 ---
diff --git a/src/index.md b/src/index.md
@@ -0,0 +1,19 @@
+---
+title: Accessible Canada, Accessible World / Un Canada accessible, Un monde accessible
+permalink: /index.html
+layout: layouts/index
+bodyClass: index
+---
+
+<div class="flow">
+<div lang="en-CA">
+
+[English](/en/)
+
+</div>
+<div lang="fr-CA">
+
+[Français](/fr/)
+
+</div>
+</div>
diff --git a/src/sw.njk b/src/sw.njk
@@ -4,7 +4,8 @@ permalink: /sw.js
 const cacheName = "cache-v1";
 
 const precacheResources = [
-    "/",
+    "/index.html",
+    "/en/index.html",
     "/fr/index.html",
     "/manifest.webmanifest",
     "/favicon.ico",