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

6 files changed, 42 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>
   );