From 67d94ce796e425f1a87806b848f58328ea7adde7 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 11 Jan 2022 12:56:59 +0100
Subject: chore: add meta, toc and widgets on thematic pages

---
 src/pages/thematique/[slug].tsx   | 50 ++++++++++++++++++++++++++++++++-------
 src/styles/pages/Page.module.scss | 20 ++++++++++++++++
 2 files changed, 61 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index 72e469c..4921806 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -2,29 +2,57 @@ import { getLayout } from '@components/Layouts/Layout';
 import PostPreview from '@components/PostPreview/PostPreview';
 import { t } from '@lingui/macro';
 import { NextPageWithLayout } from '@ts/types/app';
-import { ThematicProps } from '@ts/types/taxonomies';
+import { SubjectPreview, ThematicProps } from '@ts/types/taxonomies';
 import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import { ParsedUrlQuery } from 'querystring';
-import styles from '@styles/pages/Listing.module.scss';
+import styles from '@styles/pages/Page.module.scss';
 import {
   getAllThematicsSlug,
   getThematicBySlug,
 } from '@services/graphql/queries';
 import PostHeader from '@components/PostHeader/PostHeader';
+import ToC from '@components/ToC/ToC';
+import { RelatedTopics, ThematicsList } from '@components/Widget';
+import { useRef } from 'react';
+import { ArticleMeta } from '@ts/types/articles';
 
 const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
+  const relatedSubjects = useRef<SubjectPreview[]>([]);
+
+  const updateRelatedSubjects = (newSubjects: SubjectPreview[]) => {
+    newSubjects.forEach((subject) => {
+      const subjectIndex = relatedSubjects.current.findIndex(
+        (relatedSubject) => relatedSubject.id === subject.id
+      );
+      const hasSubject = subjectIndex === -1 ? false : true;
+
+      if (!hasSubject) relatedSubjects.current.push(subject);
+    });
+  };
+
   const getPostsList = () => {
-    return [...thematic.posts].reverse().map((post) => (
-      <li key={post.id} className={styles.item}>
-        <PostPreview post={post} titleLevel={3} />
-      </li>
-    ));
+    return [...thematic.posts].reverse().map((post) => {
+      updateRelatedSubjects(post.subjects);
+
+      return (
+        <li key={post.id} className={styles.item}>
+          <PostPreview post={post} titleLevel={3} />
+        </li>
+      );
+    });
+  };
+
+  const meta: ArticleMeta = {
+    dates: thematic.dates,
   };
 
   return (
-    <article className={styles.wrapper}>
-      <PostHeader intro={thematic.intro} title={thematic.title} />
+    <article className={`${styles.article} ${styles['article--no-comments']}`}>
+      <PostHeader intro={thematic.intro} meta={meta} title={thematic.title} />
+      <aside className={styles.toc}>
+        <ToC />
+      </aside>
       <div className={styles.body}>
         <div dangerouslySetInnerHTML={{ __html: thematic.content }}></div>
         {thematic.posts.length > 0 && (
@@ -34,6 +62,10 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
           </section>
         )}
       </div>
+      <aside className={`${styles.aside} ${styles['aside--overflow']}`}>
+        <RelatedTopics topics={relatedSubjects.current} />
+        <ThematicsList title={t`Other thematics`} />
+      </aside>
     </article>
   );
 };
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index fb19906..3ce46d0 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -1,5 +1,6 @@
 @use "@styles/abstracts/functions" as fun;
 @use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
 
 .article {
   composes: grid from "@styles/layout/_grid.scss";
@@ -37,6 +38,14 @@
   }
 }
 
+.list {
+  @extend %reset-ordered-list;
+}
+
+li.item {
+  margin: 0 0 var(--spacing-md) 0;
+}
+
 .comments {
   grid-column: 1 / -1;
   composes: grid from "@styles/layout/_grid.scss";
@@ -49,3 +58,14 @@
     grid-column: 2;
   }
 }
+
+.aside {
+  align-self: start;
+  max-height: 100vh;
+  position: sticky;
+  top: 0;
+
+  &--overflow {
+    overflow: auto;
+  }
+}
-- 
cgit v1.2.3