chore: add a banner for users with JS disabled

2 files changed, 33 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>
     </>
   );
 };