chore: add some noscript tags to explain why the data are not loaded

9 files changed, 104 insertions, 1 deletions

diff --git a/src/components/Widgets/RecentPosts/RecentPosts.tsx b/src/components/Widgets/RecentPosts/RecentPosts.tsx
index 1507edf..b7957b7 100644
--- a/src/components/Widgets/RecentPosts/RecentPosts.tsx
+++ b/src/components/Widgets/RecentPosts/RecentPosts.tsx
@@ -67,7 +67,17 @@ const RecentPosts = () => {
     return data.posts.map((post) => getPost(post));
   };
 
-  return <ul className={styles.list}>{getPostsItems()}</ul>;
+  return (
+    <ul className={styles.list}>
+      <noscript>
+        {intl.formatMessage({
+          defaultMessage: 'Javascript is required to load the latest posts.',
+          description: 'RecentPosts: noscript tag',
+        })}
+      </noscript>
+      {getPostsItems()}
+    </ul>
+  );
 };
 
 export default RecentPosts;
diff --git a/src/components/Widgets/RelatedThematics/RelatedThematics.tsx b/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
index c6be3ca..e89d887 100644
--- a/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
+++ b/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
@@ -31,6 +31,12 @@ const RelatedThematics = ({ thematics }: { thematics: ThematicPreview[] }) => {
       )}
       withBorders={true}
     >
+      <noscript>
+        {intl.formatMessage({
+          defaultMessage: 'Javascript is required to load the thematics.',
+          description: 'RelatedThematics: noscript tag',
+        })}
+      </noscript>
       <List items={thematicsList} />
     </ExpandableWidget>
   );
diff --git a/src/components/Widgets/RelatedTopics/RelatedTopics.tsx b/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
index b9699e2..e225608 100644
--- a/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
+++ b/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
@@ -31,6 +31,12 @@ const RelatedTopics = ({ topics }: { topics: TopicPreview[] }) => {
       )}
       withBorders={true}
     >
+      <noscript>
+        {intl.formatMessage({
+          defaultMessage: 'Javascript is required to load the topics.',
+          description: 'RelatedTopics: noscript tag',
+        })}
+      </noscript>
       <List items={topicsList} />
     </ExpandableWidget>
   );
diff --git a/src/components/Widgets/ThematicsList/ThematicsList.tsx b/src/components/Widgets/ThematicsList/ThematicsList.tsx
index e59050d..f175e80 100644
--- a/src/components/Widgets/ThematicsList/ThematicsList.tsx
+++ b/src/components/Widgets/ThematicsList/ThematicsList.tsx
@@ -62,6 +62,12 @@ const ThematicsList = ({
       withBorders={true}
       expand={true}
     >
+      <noscript>
+        {intl.formatMessage({
+          defaultMessage: 'Javascript is required to load the thematics.',
+          description: 'ThematicsList: noscript tag',
+        })}
+      </noscript>
       {getList()}
     </ExpandableWidget>
   );
diff --git a/src/components/Widgets/ToC/ToC.tsx b/src/components/Widgets/ToC/ToC.tsx
index f3f783c..89ca8d4 100644
--- a/src/components/Widgets/ToC/ToC.tsx
+++ b/src/components/Widgets/ToC/ToC.tsx
@@ -37,6 +37,13 @@ const ToC = () => {
 
   return (
     <ExpandableWidget title={title} kind="toc" expand={true} withBorders={true}>
+      <noscript>
+        {intl.formatMessage({
+          defaultMessage:
+            'Javascript is required to use the table of contents.',
+          description: 'ToC: noscript tag',
+        })}
+      </noscript>
       <OrderedList items={getItems(headingsTree)} />
     </ExpandableWidget>
   );
diff --git a/src/components/Widgets/TopicsList/TopicsList.tsx b/src/components/Widgets/TopicsList/TopicsList.tsx
index 109b212..e79d1a8 100644
--- a/src/components/Widgets/TopicsList/TopicsList.tsx
+++ b/src/components/Widgets/TopicsList/TopicsList.tsx
@@ -62,6 +62,12 @@ const TopicsList = ({
       withBorders={true}
       expand={true}
     >
+      <noscript>
+        {intl.formatMessage({
+          defaultMessage: 'Javascript is required to load the topics.',
+          description: 'TopicsList: noscript tag',
+        })}
+      </noscript>
       {getList()}
     </ExpandableWidget>
   );
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 248318a..e6e7647 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -119,6 +119,10 @@
     "defaultMessage": "Contact",
     "description": "ContactPage: breadcrumb item"
   },
+  "DXxn3X": {
+    "defaultMessage": "Javascript is required to load the posts.",
+    "description": "BlogPage: noscript tag"
+  },
   "Dhow1m": {
     "defaultMessage": "Diaspora",
     "description": "Sharing: Diaspora"
@@ -207,6 +211,10 @@
     "defaultMessage": "Load more?",
     "description": "BlogPage: load more text"
   },
+  "Mg1owa": {
+    "defaultMessage": "Javascript is required to load the latest posts.",
+    "description": "RecentPosts: noscript tag"
+  },
   "Mj2BQf": {
     "defaultMessage": "{name}'s CV",
     "description": "CVPage: page title"
@@ -279,6 +287,10 @@
     "defaultMessage": "Sidebar",
     "description": "CVPage: right sidebar aria-label"
   },
+  "QYxJrm": {
+    "defaultMessage": "Javascript is required to load the thematics.",
+    "description": "RelatedThematics: noscript tag"
+  },
   "Qh2CwH": {
     "defaultMessage": "Find me elsewhere",
     "description": "ContactPage: social media widget title"
@@ -287,6 +299,10 @@
     "defaultMessage": "Blog",
     "description": "BlogPage: breadcrumb item"
   },
+  "RZzx/4": {
+    "defaultMessage": "Javascript is required to use the table of contents.",
+    "description": "ToC: noscript tag"
+  },
   "SWjj4l": {
     "defaultMessage": "Github",
     "description": "SocialMedia: Github"
@@ -343,6 +359,10 @@
     "defaultMessage": "Send",
     "description": "CommentForm: Send button"
   },
+  "WJHwIR": {
+    "defaultMessage": "Javascript is required to load the topics.",
+    "description": "RelatedTopics: noscript tag"
+  },
   "WRkY1/": {
     "defaultMessage": "Collapse",
     "description": "ExpandableWidget: collapse text"
@@ -483,6 +503,10 @@
     "defaultMessage": "Table of Contents",
     "description": "CVPage: ToC sidebar aria-label"
   },
+  "g5aEea": {
+    "defaultMessage": "Javascript is required to load the topics.",
+    "description": "TopicsList: noscript tag"
+  },
   "gQKeF+": {
     "defaultMessage": "Thanks. Your message was successfully sent. I will answer it as soon as possible.",
     "description": "ContactForm: success message"
@@ -651,6 +675,10 @@
     "defaultMessage": "Web development",
     "description": "HomePage: link to web development thematic"
   },
+  "w+LN1W": {
+    "defaultMessage": "Javascript is required to load the thematics.",
+    "description": "ThematicsList: noscript tag"
+  },
   "w/lPUh": {
     "defaultMessage": "{topicsCount, plural, =0 {Related topics} one {Related topic} other {Related topics}}",
     "description": "RelatedTopics: widget title"
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index 2a74cd4..d59b6e5 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -119,6 +119,10 @@
     "defaultMessage": "Contact",
     "description": "ContactPage: breadcrumb item"
   },
+  "DXxn3X": {
+    "defaultMessage": "Javascript est nécessaire pour chargé les articles.",
+    "description": "BlogPage: noscript tag"
+  },
   "Dhow1m": {
     "defaultMessage": "Diaspora",
     "description": "Sharing: Diaspora"
@@ -207,6 +211,10 @@
     "defaultMessage": "En afficher plus ?",
     "description": "BlogPage: load more text"
   },
+  "Mg1owa": {
+    "defaultMessage": "Javascript est nécessaire pour charger les derniers articles.",
+    "description": "RecentPosts: noscript tag"
+  },
   "Mj2BQf": {
     "defaultMessage": "CV d'{name}",
     "description": "CVPage: page title"
@@ -279,6 +287,10 @@
     "defaultMessage": "Barre latérale",
     "description": "CVPage: right sidebar aria-label"
   },
+  "QYxJrm": {
+    "defaultMessage": "Javascript est nécessaire pour charger les thématiques.",
+    "description": "RelatedThematics: noscript tag"
+  },
   "Qh2CwH": {
     "defaultMessage": "Retrouvez-moi ailleurs",
     "description": "ContactPage: social media widget title"
@@ -287,6 +299,10 @@
     "defaultMessage": "Blog",
     "description": "BlogPage: breadcrumb item"
   },
+  "RZzx/4": {
+    "defaultMessage": "Javascript est nécessaire pour utiliser la table des matières.",
+    "description": "ToC: noscript tag"
+  },
   "SWjj4l": {
     "defaultMessage": "Github",
     "description": "SocialMedia: Github"
@@ -343,6 +359,10 @@
     "defaultMessage": "Envoyer",
     "description": "CommentForm: Send button"
   },
+  "WJHwIR": {
+    "defaultMessage": "Javascript est nécessaire pour charger les sujets.",
+    "description": "RelatedTopics: noscript tag"
+  },
   "WRkY1/": {
     "defaultMessage": "Replier",
     "description": "ExpandableWidget: collapse text"
@@ -483,6 +503,10 @@
     "defaultMessage": "Table des matières",
     "description": "CVPage: ToC sidebar aria-label"
   },
+  "g5aEea": {
+    "defaultMessage": "Javascript est nécessaire pour charger les sujets.",
+    "description": "TopicsList: noscript tag"
+  },
   "gQKeF+": {
     "defaultMessage": "Merci. Votre message a bien été envoyé. J'y répondrai dès que possible.",
     "description": "ContactForm: success message"
@@ -651,6 +675,10 @@
     "defaultMessage": "Développement web",
     "description": "HomePage: link to web development thematic"
   },
+  "w+LN1W": {
+    "defaultMessage": "Javascript est nécessaire pour charger les thématiques.",
+    "description": "ThematicsList: noscript tag"
+  },
   "w/lPUh": {
     "defaultMessage": "{topicsCount, plural, =0 {Sujets liés} one {Sujet lié} other {Sujets liés}}",
     "description": "RelatedTopics: widget title"
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index cea5688..51db760 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -158,6 +158,12 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
       >
         <PostHeader title={title} meta={{ results: totalPostsCount }} />
         <div className={styles.body}>
+          <noscript>
+            {intl.formatMessage({
+              defaultMessage: 'Javascript is required to load the posts.',
+              description: 'BlogPage: noscript tag',
+            })}
+          </noscript>
           {getPostsList()}
           {hasNextPage && (
             <>