From fb8bc6b1a964c3ef673276e9ed4c1a6ee34f103d Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 14 Feb 2022 18:10:33 +0100
Subject: chore: add a banner for users with JS disabled

---
 src/components/Layouts/Layout.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

(limited to 'src/components/Layouts/Layout.tsx')

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>
     </>
   );
 };
-- 
cgit v1.2.3