chore: add a banner for users with JS disabled

5 files changed, 47 insertions, 0 deletions

diff --git a/src/components/Layouts/Layout.module.scss b/src/components/Layouts/Layout.module.scss
new file mode 100644
index 0000000..33339d4
--- /dev/null
+++ b/src/components/Layouts/Layout.module.scss
@@ -0,0 +1,20 @@
+@use "@styles/abstracts/functions" as fun;
+
+.noscript {
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  background: var(--color-bg);
+  border-bottom: fun.convert-px(3) solid var(--color-border);
+  color: var(--color-primary-darker);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  text-align: center;
+}
+
+.noscript-spacing {
+  width: 100%;
+  height: fun.convert-px(80);
+}
diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 420b37a..eb725d2 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -8,6 +8,7 @@ import { useRouter } from 'next/router';
 import { ReactElement, ReactNode, useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { WebSite, WithContext } from 'schema-dts';
+import styles from './Layout.module.scss';
 
 const Layout = ({
   children,
@@ -94,6 +95,9 @@ const Layout = ({
           dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
         ></script>
       </Head>
+      <noscript>
+        <div className={styles['noscript-spacing']}></div>
+      </noscript>
       <span ref={ref} tabIndex={-1} />
       <a href="#main" className="screen-reader-text">
         {intl.formatMessage({
@@ -104,6 +108,15 @@ const Layout = ({
       <Header isHome={isHome} />
       <Main>{children}</Main>
       <Footer />
+      <noscript>
+        <div className={styles.noscript}>
+          {intl.formatMessage({
+            defaultMessage:
+              'Without Javascript, some features may not work like loading more posts or use search. If you want to benefit from these features, please activate Javascript.',
+            description: 'Layout: noscript banner',
+          })}
+        </div>
+      </noscript>
     </>
   );
 };
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 77d4d7a..7bab2f1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -219,6 +219,10 @@
     "defaultMessage": "Load more?",
     "description": "BlogPage: load more text"
   },
+  "LR70nt": {
+    "defaultMessage": "Without Javascript, some features may not work like loading more posts or use search. If you want to benefit from these features, please activate Javascript.",
+    "description": "Layout: noscript banner"
+  },
   "Mj2BQf": {
     "defaultMessage": "{name}'s CV",
     "description": "CVPage: page title"
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index 1f4928c..475630c 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -219,6 +219,10 @@
     "defaultMessage": "En afficher plus ?",
     "description": "BlogPage: load more text"
   },
+  "LR70nt": {
+    "defaultMessage": "Sans Javascript, certaines fonctionnalités peuvent ne pas marcher comme charger plus d'articles ou utiliser la recherche. Si vous souhaitez bénéficier de ces fonctionnalités, veuillez activer Javascript.",
+    "description": "Layout: noscript banner"
+  },
   "Mj2BQf": {
     "defaultMessage": "CV d'{name}",
     "description": "CVPage: page title"
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index 69a1526..6aadff6 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -20,6 +20,12 @@
   }
 }
 
+.body noscript {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
 .list {
   @extend %reset-ordered-list;
 }