feat(blog): add toc

Only for large screens for now. This also refactors the useStickyHeaderHeight hook.
mdn · Sep 21, 2023 · 93f9250 · 93f9250
1 parent d60e844
commit 93f9250
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 140 deletions.
diff --git a/client/src/blog/index.scss b/client/src/blog/index.scss
@@ -9,6 +9,8 @@
 }
 
 .blog-container {
+  --author-gap: 1rem;
+  --avatar-size: 3rem;
   margin: 0 auto;
   max-width: min(calc(80vw + 4rem), var(--max-width));
   padding: 2rem 1rem;
@@ -30,6 +32,56 @@
     }
   }
 
+  .date-author,
+  .author {
+    align-content: flex-start;
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .date-author {
+    column-gap: 1.5rem;
+    padding-left: calc(var(--avatar-size) + var(--author-gap));
+  }
+
+  .author {
+    font-weight: var(--font-body-strong-weight);
+    gap: var(--author-gap);
+    margin-left: calc((var(--avatar-size) + var(--author-gap)) * -1);
+
+    &::after {
+      margin-left: calc(4px - var(--author-gap));
+    }
+
+    img {
+      border: none !important;
+      border-radius: 3rem;
+      height: var(--avatar-size);
+      margin: 0;
+      object-fit: cover;
+      width: var(--avatar-size);
+    }
+  }
+
+  figure.blog-image {
+    margin: 0 auto 2rem;
+    width: fit-content;
+
+    img {
+      background: transparent;
+      border: none !important;
+      margin: 0 0 0.125rem;
+      width: 100%;
+    }
+
+    figcaption {
+      font-size: smaller;
+      margin-left: auto;
+      width: fit-content;
+    }
+  }
+
   h1 {
     margin-top: 1rem;
   }

diff --git a/client/src/blog/index.tsx b/client/src/blog/index.tsx
@@ -9,7 +9,6 @@ import { BlogPost, AuthorDateReadTime } from "./post";
 import { BlogImage, BlogPostMetadata } from "../../../libs/types/blog.js";
 
 import "./index.scss";
-import "./post.scss";
 import { Button } from "../ui/atoms/button";
 import { SignUpSection as NewsletterSignUp } from "../newsletter";
 

diff --git a/client/src/blog/post.scss b/client/src/blog/post.scss
@@ -1,135 +1,128 @@
 @use "../ui/vars" as *;
 
-.blog-container.post {
-  max-width: calc(48rem + 4rem);
-
-  + .section-newsletter h2 {
-    font: var(--type-heading-h3);
-    margin: 0;
-  }
-}
-
-.blog-container {
-  --author-gap: 1rem;
-  --avatar-size: 3rem;
-
-  .date-author,
-  .author {
-    align-content: flex-start;
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
+.blog-post-container {
+  display: grid;
+  gap: 3rem;
+  grid-template-areas:
+    "post"
+    "newsletter";
+  width: 100%;
+  @media screen and (min-width: $screen-lg) {
+    display: grid;
+    gap: 3rem;
+    grid-template-areas:
+      "post toc"
+      "newsletter toc";
+    grid-template-columns: minmax(auto, 100%) minmax(0, 12rem);
   }
-
-  .date-author {
-    column-gap: 1.5rem;
-    padding-left: calc(var(--avatar-size) + var(--author-gap));
+  @media screen and (min-width: $screen-xl) {
+    display: grid;
+    gap: 3rem;
+    grid-template-areas:
+      "nothing post toc"
+      "nothing newsletter toc";
+    grid-template-columns: minmax(auto, 1fr) minmax(0, 52rem) minmax(15rem, 1fr);
   }
 
-  .author {
-    font-weight: var(--font-body-strong-weight);
-    gap: var(--author-gap);
-    margin-left: calc((var(--avatar-size) + var(--author-gap)) * -1);
+  > .sidebar-container {
+    --offset: var(--top-nav-height);
+    display: none;
 
-    &::after {
-      margin-left: calc(4px - var(--author-gap));
+    .toc-container {
+      position: unset;
+      top: auto;
     }
+    @media screen and (min-width: $screen-lg) {
+      display: flex;
+      grid-area: toc;
 
-    img {
-      border: none !important;
-      border-radius: 3rem;
-      height: var(--avatar-size);
-      margin: 0;
-      object-fit: cover;
-      width: var(--avatar-size);
+      .toc > nav {
+        margin-top: 2rem;
+      }
     }
   }
 
-  figure.blog-image {
-    margin: 0 auto 2rem;
-    width: fit-content;
-
-    img {
-      background: transparent;
-      border: none !important;
-      margin: 0 0 0.125rem;
-      width: 100%;
-    }
-
-    figcaption {
-      font-size: smaller;
-      margin-left: auto;
-      width: fit-content;
-    }
+  > .section-newsletter {
+    grid-area: newsletter;
   }
 
-  .previous-next {
-    display: flex;
-    gap: 1rem;
+  > .blog-post {
+    grid-area: post;
+    max-width: 52rem;
 
-    @media screen and (max-width: $screen-md) {
-      flex-direction: column-reverse;
+    + .section-newsletter h2 {
+      font: var(--type-heading-h3);
+      margin: 0;
     }
 
-    a {
-      color: var(--text-primary);
+    .previous-next {
       display: flex;
       gap: 1rem;
-      text-decoration: none;
-      width: 100%;
 
-      &:hover h2 {
-        text-decoration: underline;
+      @media screen and (max-width: $screen-md) {
+        flex-direction: column-reverse;
       }
 
-      &:active {
-        background: none;
-      }
+      a {
+        color: var(--text-primary);
+        display: flex;
+        gap: 1rem;
+        text-decoration: none;
+        width: 100%;
 
-      @media screen and (min-width: $screen-md) {
-        &.previous,
-        &.next {
-          &::before,
-          &::after {
-            align-self: center;
-            background-color: var(--text-primary);
-            flex-shrink: 0;
-            height: 1rem;
-            mask-position: center;
-            mask-repeat: no-repeat;
-            vertical-align: middle;
-            width: 1rem;
-          }
+        &:hover h2 {
+          text-decoration: underline;
         }
 
-        &.previous::before {
-          content: "";
-          mask-image: url("../assets/icons/previous.svg");
+        &:active {
+          background: none;
         }
 
-        &.next::after {
-          content: "";
-          mask-image: url("../assets/icons/next.svg");
+        @media screen and (min-width: $screen-md) {
+          &.previous,
+          &.next {
+            &::before,
+            &::after {
+              align-self: center;
+              background-color: var(--text-primary);
+              flex-shrink: 0;
+              height: 1rem;
+              mask-position: center;
+              mask-repeat: no-repeat;
+              vertical-align: middle;
+              width: 1rem;
+            }
+          }
+
+          &.previous::before {
+            content: "";
+            mask-image: url("../assets/icons/previous.svg");
+          }
+
+          &.next::after {
+            content: "";
+            mask-image: url("../assets/icons/next.svg");
+          }
         }
       }
-    }
-
-    article {
-      margin: 0 auto;
-    }
 
-    h2:first-of-type {
-      color: var(--text-link);
-      font-size: 1rem;
-      margin: 0;
-      text-align: center;
+      article {
+        margin: 0 auto;
+      }
 
-      strong {
-        color: var(--text-primary);
-        display: block;
-        font-size: 0.8em;
-        font-weight: normal;
-        line-height: 1.2rem;
+      h2:first-of-type {
+        color: var(--text-link);
+        font-size: 1rem;
+        margin: 0;
+        text-align: center;
+
+        strong {
+          color: var(--text-primary);
+          display: block;
+          font-size: 0.8em;
+          font-weight: normal;
+          line-height: 1.2rem;
+        }
       }
     }
   }

diff --git a/client/src/blog/post.tsx b/client/src/blog/post.tsx
@@ -2,7 +2,7 @@ import useSWR from "swr";
 
 import { HydrationData } from "../../../libs/types/hydration";
 import { HTTPError, RenderDocumentBody } from "../document";
-import { WRITER_MODE } from "../env";
+import { PLACEMENT_ENABLED, WRITER_MODE } from "../env";
 
 import "./index.scss";
 import "./post.scss";
@@ -20,6 +20,8 @@ import {
 } from "../document/hooks";
 import { DEFAULT_LOCALE } from "../../../libs/constants";
 import { SignUpSection as NewsletterSignUp } from "../newsletter";
+import { TOC } from "../document/organisms/toc";
+import { SidePlacement } from "../ui/organisms/placement";
 
 function MaybeLink({ className = "", link, children }) {
   return link ? (
@@ -191,11 +193,18 @@ export function BlogPost(props: HydrationData) {
   return (
     <>
       {doc && blogMeta && (
-        <>
-          <article
-            className="blog-container post container main-page-content"
-            lang={doc?.locale}
-          >
+        <main className="blog-post-container container main-page-content">
+          <div className="sidebar-container">
+            <div className="toc-container">
+              <aside className="toc">
+                <nav>
+                  {doc.toc && !!doc.toc.length && <TOC toc={doc.toc} />}
+                </nav>
+              </aside>
+              {PLACEMENT_ENABLED && <SidePlacement />}
+            </div>
+          </div>
+          <article className="blog-post blog-container" lang={doc?.locale}>
             <BlogImageFigure image={blogMeta?.image} width={800} height={420} />
             {blogMeta?.sponsored && (
               <span className="sponsored">Sponsored</span>
@@ -206,7 +215,7 @@ export function BlogPost(props: HydrationData) {
             {blogMeta.links && <PreviousNext links={blogMeta.links} />}
           </article>
           <NewsletterSignUp />
-        </>
+        </main>
       )}
     </>
   );

diff --git a/client/src/document/hooks.ts b/client/src/document/hooks.ts
@@ -108,35 +108,10 @@ export function useStickyHeaderHeight() {
       // SSR.
       return 0;
     }
-    const sidebar = document.querySelector(".sidebar-container");
-
-    if (sidebar) {
-      return parseFloat(getComputedStyle(sidebar).top);
-    }
-
-    const styles = getComputedStyle(document.documentElement);
-    const stickyHeaderHeight = styles
-      .getPropertyValue("--sticky-header-height")
-      .trim();
-
-    if (stickyHeaderHeight.endsWith("rem")) {
-      const fontSize = styles.fontSize.trim();
-      if (fontSize.endsWith("px")) {
-        return parseFloat(stickyHeaderHeight) * parseFloat(fontSize);
-      } else {
-        console.warn(
-          `[useStickyHeaderHeight] fontSize has unexpected unit: ${fontSize}`
-        );
-        return 0;
-      }
-    } else if (stickyHeaderHeight.endsWith("px")) {
-      return parseFloat(stickyHeaderHeight);
-    } else {
-      console.warn(
-        `[useStickyHeaderHeight] --sticky-header-height has unexpected unit: ${stickyHeaderHeight}`
-      );
-      return 0;
-    }
+    return (
+      document.querySelector<HTMLElement>(".main-document-header-container")
+        ?.offsetHeight || 0
+    );
   }
 
   const [height, setHeight] = useState<number>(determineStickyHeaderHeight());