exploratory: sidebar scroll persistance

gatsby-config.js

@@ -13,6 +13,12 @@ module.exports = {
   plugins: [
     `gatsby-plugin-emotion`,
     `gatsby-plugin-react-helmet`,
+    {
+      resolve: `gatsby-plugin-layout`,
+      options: {
+        component: require.resolve(`./src/layouts/content-layout/index.ts`),
+      },
+    },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     {

package.json

@@ -15,6 +15,7 @@
     "facepaint": "^1.2.1",
     "gatsby": "^2.24.8",
     "gatsby-plugin-emotion": "^4.3.10",
+    "gatsby-plugin-layout": "^1.3.10",
     "gatsby-plugin-mdx": "^1.2.28",
     "gatsby-plugin-react-helmet": "^3.3.10",
     "gatsby-plugin-sharp": "^2.6.21",

src/hooks/use-active-hash/index.ts

@@ -1,9 +1,9 @@
-import { useEffect, useState } from "react";
+import React from "react";
 
 export const useActiveHash = (itemIds, rootMargin = undefined) => {
-  const [activeHash, setActiveHash] = useState(``);
+  const [activeHash, setActiveHash] = React.useState(``);
 
-  useEffect(() => {
+  React.useLayoutEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
@@ -16,12 +16,16 @@ export const useActiveHash = (itemIds, rootMargin = undefined) => {
     );
 
     itemIds.forEach((id) => {
-      observer.observe(document.getElementById(id));
+      if (document.getElementById(id)) {
+        observer.observe(document.getElementById(id));
+      }
     });
 
     return () => {
       itemIds.forEach((id) => {
-        observer.unobserve(document.getElementById(id));
+        if (document.getElementById(id)) {
+          observer.unobserve(document.getElementById(id));
+        }
       });
     };
   }, [itemIds, rootMargin]);

src/layouts/content-layout/ContentLayout.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { MDXProvider } from "@mdx-js/react";
 import { useGlobalTheme } from "@saruni-ui/theme";
+import { graphql } from "gatsby";
 
 import {
   AsideContainer,
@@ -17,32 +18,48 @@ import { components } from "../../components/mdx";
 
 interface ContentLayoutProps {
   children: React.ReactNode;
-  disableTableOfContents: boolean;
-  isTOCDisabled?: boolean;
-  location: Location;
-  section?: string;
-  tableOfContents: {
-    items: ITOCItem[];
-  };
-  tableOfContentsDepth: number;
+  // disableTableOfContents: boolean;
+  // isTOCDisabled?: boolean;
+  // location: Location;
+  // section?: string;
+  // tableOfContents: {
+  //   items: ITOCItem[];
+  // };
+  // tableOfContentsDepth: number;
 }
 
 export const ContentLayout: React.FC<ContentLayoutProps> = ({
   children,
-  disableTableOfContents,
+  // data: { mdx },
+  pageContext: { next, prev, section },
   location,
-  tableOfContents,
-  tableOfContentsDepth,
-  section,
+  // disableTableOfContents,
+  // location,
+  // tableOfContents,
+  // tableOfContentsDepth,
+  // section,
 }) => {
   const {
     tokens: { mode },
   } = useGlobalTheme({});
 
-  const isTOCDisabled =
-    disableTableOfContents === true ||
-    !tableOfContents.hasOwnProperty("items") ||
-    tableOfContents?.items.length === 0;
+  // const {
+  //   title,
+  //   description,
+  //   image,
+  //   disableTableOfContents,
+  //   tableOfContentsDepth,
+  // } = mdx.frontmatter;
+  // const { headings, body, tableOfContents } = mdx;
+
+  // const isTOCDisabled = true;
+
+  // console.log(tableOfContents);
+
+  // const isTOCDisabled =
+  //   disableTableOfContents === true ||
+  //   !tableOfContents.hasOwnProperty("items") ||
+  //   tableOfContents?.items.length === 0;
 
   return (
     <React.Fragment>
@@ -58,16 +75,29 @@ export const ContentLayout: React.FC<ContentLayoutProps> = ({
             <ContentWrapper>{children}</ContentWrapper>
           </MDXProvider>
           <AsideContainer>
-            {!isTOCDisabled && (
+            {/* {!isTOCDisabled && (
               <TOC
                 location={location}
                 tableOfContents={tableOfContents}
                 tableOfContentsDepth={tableOfContentsDepth}
               />
-            )}
+            )} */}
           </AsideContainer>
         </ContentContainer>
       </LayoutContainer>
     </React.Fragment>
   );
 };
+
+// export const query = graphql`
+//   query ContentLayoutQuery($slug: String!) {
+//     mdx(fields: { slug: { eq: $slug } }) {
+//       id
+//       frontmatter {
+//         disableTableOfContents
+//         tableOfContentsDepth
+//       }
+//       tableOfContents
+//     }
+//   }
+// `;

src/layouts/content-layout/index.ts

@@ -0,0 +1,2 @@
+import { ContentLayout } from "./ContentLayout";
+export default ContentLayout;

src/templates/content-template/ContentTemplate.tsx

@@ -2,28 +2,12 @@ import React from "react";
 import { MDXRenderer } from "gatsby-plugin-mdx";
 import { graphql } from "gatsby";
 
-import { ContentLayout } from "../../layouts/content-layout/ContentLayout";
 import { SEO } from "../../components/seo";
 
-interface ContentTemplateProps {}
-
-const ContentTemplate: React.FC<ContentTemplateProps> = ({
-  data: { mdx },
-  location,
-  pageContext,
-}) => {
-  const { prev, next, githubEditUrl } = pageContext;
-
-  const {
-    title,
-    description,
-    image,
-    disableTableOfContents,
-    tableOfContentsDepth,
-  } = mdx.frontmatter;
-  const { headings, body, tableOfContents } = mdx;
+const ContentTemplate: React.FC = ({ data: { mdx } }) => {
+  const { title, description, image } = mdx.frontmatter;
+  const { body } = mdx;
   const { slug } = mdx.fields;
-  const { section } = pageContext;
 
   return (
     <React.Fragment>
@@ -33,23 +17,15 @@ const ContentTemplate: React.FC<ContentTemplateProps> = ({
         slug={slug}
         imageUrl={image}
       />
-      <ContentLayout
-        disableTableOfContents={disableTableOfContents}
-        location={location}
-        section={section}
-        tableOfContents={tableOfContents}
-        tableOfContentsDepth={tableOfContentsDepth}
-      >
-        <MDXRenderer>{body}</MDXRenderer>
-      </ContentLayout>
+      <MDXRenderer>{body}</MDXRenderer>
     </React.Fragment>
   );
 };
 
 export default ContentTemplate;
 
 export const query = graphql`
-  query($slug: String!) {
+  query ContentTemplateQuery($slug: String!) {
     mdx(fields: { slug: { eq: $slug } }) {
       id
       excerpt(pruneLength: 160)
@@ -60,15 +36,8 @@ export const query = graphql`
         title
         description
         image
-        disableTableOfContents
-        tableOfContentsDepth
       }
       body
-      headings {
-        depth
-        value
-      }
-      tableOfContents
     }
   }
 `;

yarn.lock

@@ -6341,6 +6341,13 @@ gatsby-plugin-emotion@^4.3.10:
     "@babel/runtime" "^7.10.3"
     "@emotion/babel-preset-css-prop" "^10.0.27"
 
+gatsby-plugin-layout@^1.3.10:
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-layout/-/gatsby-plugin-layout-1.3.10.tgz#701312dc462da9b15c9abe6748d141a44cd26f73"
+  integrity sha512-iO+aDef4hzJVrIa+LrO3r2FzcM4OdMePb/sDKgmknAeN+sJKH735DdRbk/H/41UREM9rTdwdq+/oFxxlAo3Lmw==
+  dependencies:
+    "@babel/runtime" "^7.10.3"
+
 gatsby-plugin-mdx@^1.2.28:
   version "1.2.28"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx/-/gatsby-plugin-mdx-1.2.28.tgz#ceadd5fb6fb4388a048ddfd74cff0df70b67bcad"