fix/refactor(website): only adjust layout to sidebar or toc when they actually exist

duanwilliam · duanwilliam · commit 046f208775d2 · 2022-04-23T00:34:54.000-07:00
diff --git a/website/src/layout/components/ContentContainer/index.tsx b/website/src/layout/components/ContentContainer/index.tsx
@@ -1,3 +1,7 @@
+import c from "clsx";
+
+import { usePageContext } from "@/layout/context/Page";
+
 import s from "./styles.module.scss";
 
 import type { ReactNode } from "react";
@@ -7,8 +11,10 @@ interface ContentContainerProps {
 }
 
 export default function ContentContainer ({ children }: ContentContainerProps) {
+  const { toc } = usePageContext()
+
   return (
-    <div className={s.contentContainer}>
+    <div className={c(s.contentContainer, !!toc && s.tocExists)}>
       {children}
     </div>
   )
diff --git a/website/src/layout/components/ContentContainer/styles.module.scss b/website/src/layout/components/ContentContainer/styles.module.scss
@@ -14,6 +14,8 @@ $toc-width: toc.$desktop-toc-width;
   max-width: 1200px; // TODO: pick less arbitrary value
 
   @include mixins.desktop {
-    width: calc(100% - #{$toc-width});
+    &.tocExists {
+      width: calc(100% - #{$toc-width});
+    }
   }
 }
diff --git a/website/src/layout/components/ContentContainer/styles.module.scss.d.ts b/website/src/layout/components/ContentContainer/styles.module.scss.d.ts
@@ -2,6 +2,7 @@
 declare namespace StylesModuleScssNamespace {
   export interface IStylesModuleScss {
     contentContainer: string;
+    tocExists: string;
   }
 }
 
diff --git a/website/src/layout/components/ContentWrapper/index.tsx b/website/src/layout/components/ContentWrapper/index.tsx
@@ -1,3 +1,7 @@
+import c from "clsx";
+
+import { usePageContext } from "@/layout/context/Page";
+
 import s from "./styles.module.scss";
 
 import type { ReactNode } from "react";
@@ -7,8 +11,10 @@ interface ContentWrapperProps {
 }
 
 export default function ContentWrapper ({ children }: ContentWrapperProps) {
+  const { sidebar } = usePageContext();
+
   return (
-    <div className={s.contentWrapper}>
+    <div className={c(s.contentWrapper, !!sidebar && s.hasSidebar)}>
       {children}
     </div>
   )
diff --git a/website/src/layout/components/ContentWrapper/styles.module.scss b/website/src/layout/components/ContentWrapper/styles.module.scss
@@ -10,7 +10,11 @@ $toc-width: toc.$desktop-toc-width;
   display: flex;
 
   @include mixins.desktop() {
-    flex-grow: 1;
-    max-width: calc(100% - #{$sidebar-width});
+    flex-grow: 1;    
+    max-width: 100%;
+
+    &.hasSidebar {
+      max-width: calc(100% - #{$sidebar-width});
+    }
   }
 }
diff --git a/website/src/layout/components/ContentWrapper/styles.module.scss.d.ts b/website/src/layout/components/ContentWrapper/styles.module.scss.d.ts
@@ -2,6 +2,7 @@
 declare namespace StylesModuleScssNamespace {
   export interface IStylesModuleScss {
     contentWrapper: string;
+    hasSidebar: string;
   }
 }
 
diff --git a/website/src/layout/context/Page/index.tsx b/website/src/layout/context/Page/index.tsx
@@ -0,0 +1,34 @@
+import { createContext, useContext } from "react";
+
+import type { ReactNode } from "react";
+import type { TocItem } from "@/lib/unified/toc/types";
+import { SidebarItem as SidebarItemType } from "@/lib/helpers/sidebar";
+
+type PageData = {
+  sidebar?: SidebarItemType[]
+  toc?: TocItem[]
+}
+
+const PageContext = createContext<PageData | undefined>(undefined);
+
+export const usePageContext = () => {
+  const context = useContext(PageContext)
+  if (context === undefined) {
+    throw new Error('usePageContext must be used in a PageProvider')
+  }
+  return context
+}
+
+interface PageProviderProps {
+  toc?: TocItem[]
+  sidebar?: SidebarItemType[]
+  children: ReactNode
+}
+
+export default function PageProvider ({ sidebar, toc, children }: PageProviderProps) {
+  return (
+    <PageContext.Provider value={{ sidebar, toc }}>
+      {children}
+    </PageContext.Provider>
+  )
+}
diff --git a/website/src/layout/pages/CategoryPage/index.tsx b/website/src/layout/pages/CategoryPage/index.tsx
@@ -1,20 +1,21 @@
 import { useRouter } from "next/router";
 
 import Navbar from "@/components/Navbar";
-import MainWrapper from "@/layout/components/MainWrapper";
 import Sidebar from "@/components/Sidebar";
-
-import type { CategoryPageProps } from "@/layout/pages/types";
+import MainWrapper from "@/layout/components/MainWrapper";
 import SidebarContainer from "@/layout/components/SidebarContainer";
 import ContentWrapper from "@/layout/components/ContentWrapper";
 import ContentContainer from "@/layout/components/ContentContainer";
 import CategoryItemsGrid from "@/layout/components/CategoryItemsGrid";
+import PageProvider from "@/layout/context/Page";
+
+import type { CategoryPageProps } from "@/layout/pages/types";
 
 export default function CategoryPage ({ slug, sidebar, items }: CategoryPageProps) {
   const { asPath } = useRouter()
 
   return (
-    <>
+    <PageProvider sidebar={sidebar}>
       <Navbar sidebar={sidebar} path={asPath} />
       <MainWrapper>
         <SidebarContainer><Sidebar items={sidebar} activePath={asPath} /></SidebarContainer>
@@ -24,6 +25,6 @@ export default function CategoryPage ({ slug, sidebar, items }: CategoryPageProp
           </ContentContainer>
         </ContentWrapper>
       </MainWrapper>
-    </>
+    </PageProvider>
   )
 }
diff --git a/website/src/layout/pages/DocPage/index.tsx b/website/src/layout/pages/DocPage/index.tsx
@@ -2,6 +2,9 @@ import { useMemo, useCallback } from "react";
 import { useRouter } from "next/router";
 import { getMDXExport } from "mdx-bundler/client"
 
+import Navbar from "@/components/Navbar";
+import Sidebar from "@/components/Sidebar";
+import TocDesktop from "@/components/Toc/Desktop";
 import MainWrapper from "@/layout/components/MainWrapper";
 import SidebarContainer from "@/layout/components/SidebarContainer";
 import ContentWrapper from "@/layout/components/ContentWrapper";
@@ -10,9 +13,7 @@ import TocContainer from "@/layout/components/TocContainer";
 import BeforeMarkdown from "@/layout/components/BeforeMarkdown";
 import OpenInColab from "@/layout/components/OpenInColab";
 import MarkdownWrapper from "@/layout/components/MarkdownWrapper";
-import Navbar from "@/components/Navbar";
-import Sidebar from "@/components/Sidebar";
-import TocDesktop from "@/components/Toc/Desktop";
+import PageProvider from "@/layout/context/Page";
 import components from "@/mdx/components";
 
 import type { DocPageProps } from "@/layout/pages/types";
@@ -26,10 +27,12 @@ export default function DocPage ({ slug, fsPath, sidebar, code }: DocPageProps)
   ), [Component])
 
   return (
-    <>
+    <PageProvider sidebar={sidebar} toc={toc}>
       <Navbar sidebar={sidebar} path={asPath} />
       <MainWrapper>
-        <SidebarContainer><Sidebar items={sidebar} activePath={asPath} /></SidebarContainer>
+        <SidebarContainer>
+          <Sidebar items={sidebar} activePath={asPath} />
+        </SidebarContainer>
         <ContentWrapper>
           <ContentContainer>
             <BeforeMarkdown>
@@ -44,6 +47,6 @@ export default function DocPage ({ slug, fsPath, sidebar, code }: DocPageProps)
           </TocContainer>
         </ContentWrapper>
       </MainWrapper>
-    </>
+    </PageProvider>
   )
 }
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -2,12 +2,13 @@ import { getSidebar } from '@/lib/helpers/sidebar'
 import { workshopsConfig } from '@/lib/pipeline/workshops'
 import type { SidebarItem as SidebarItemType } from '@/lib/helpers/sidebar'
 
+import Navbar from '@/components/Navbar'
+import Sidebar from '@/components/Sidebar'
 import MainWrapper from '@/layout/components/MainWrapper'
 import SidebarContainer from '@/layout/components/SidebarContainer'
 import ContentWrapper from '@/layout/components/ContentWrapper'
 import ContentContainer from '@/layout/components/ContentContainer'
-import Navbar from '@/components/Navbar'
-import Sidebar from '@/components/Sidebar'
+import PageProvider from '@/layout/context/Page'
 
 import s from '@/sections/index/styles.module.scss'
 
@@ -19,7 +20,7 @@ interface HomePageProps extends WithSidebar {}
 const Home: NextPage<HomePageProps> = ({ sidebar }) => {
 
   return (
-    <>
+    <PageProvider sidebar={sidebar}>
       <Navbar sidebar={sidebar} path="" />
       <MainWrapper>
         {/* use dummy path of empty string, so nothing is the active path */}
@@ -32,7 +33,7 @@ const Home: NextPage<HomePageProps> = ({ sidebar }) => {
           </ContentContainer>
         </ContentWrapper>
       </MainWrapper>
-    </>
+    </PageProvider>
   )
 }
 
diff --git a/website/src/pages/workshops.tsx b/website/src/pages/workshops.tsx
@@ -12,6 +12,7 @@ import ContentContainer from "@/layout/components/ContentContainer";
 import ContentWrapper from "@/layout/components/ContentWrapper";
 import MainWrapper from "@/layout/components/MainWrapper";
 import SidebarContainer from "@/layout/components/SidebarContainer";
+import PageProvider from "@/layout/context/Page";
 
 import s from "@/sections/workshops/styles.module.scss"
 
@@ -22,7 +23,7 @@ const WorkshopsRootPage: NextPage<Exclude<CategoryPageProps, 'path'>> = ({ sideb
   const router = useRouter();
 
   return (
-    <>
+    <PageProvider sidebar={sidebar}>
       <Navbar sidebar={sidebar} path={router.asPath} />
       <MainWrapper>
         <SidebarContainer><Sidebar items={sidebar} activePath={router.asPath} /></SidebarContainer>
@@ -33,7 +34,7 @@ const WorkshopsRootPage: NextPage<Exclude<CategoryPageProps, 'path'>> = ({ sideb
           </ContentContainer>
         </ContentWrapper>
       </MainWrapper>
-    </>
+    </PageProvider>
   );
 };
 
diff --git a/website/src/sections/index/styles.module.scss b/website/src/sections/index/styles.module.scss
@@ -0,0 +1,3 @@
+.contentContainer {
+  --toc-width: 0;
+}
diff --git a/website/src/sections/index/styles.module.scss.d.ts b/website/src/sections/index/styles.module.scss.d.ts
@@ -0,0 +1,10 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
+    contentContainer: string;
+  }
+}
+
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss;
+
+export = StylesModuleScssModule;

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,8 @@ $toc-width: toc.$desktop-toc-width;`
`14`	`14`	`max-width: 1200px; // TODO: pick less arbitrary value`
`15`	`15`
`16`	`16`	`@include mixins.desktop {`
`17`		`- width: calc(100% - #{$toc-width});`
	`17`	`+ &.tocExists {`
	`18`	`+ width: calc(100% - #{$toc-width});`
	`19`	`+ }`
`18`	`20`	`}`
`19`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`	`declare namespace StylesModuleScssNamespace {`
`3`	`3`	`export interface IStylesModuleScss {`
`4`	`4`	`contentContainer: string;`
	`5`	`+ tocExists: string;`
`5`	`6`	`}`
`6`	`7`	`}`
`7`	`8`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,11 @@ $toc-width: toc.$desktop-toc-width;`
`10`	`10`	`display: flex;`
`11`	`11`
`12`	`12`	`@include mixins.desktop() {`
`13`		`- flex-grow: 1;`
`14`		`- max-width: calc(100% - #{$sidebar-width});`
	`13`	`+ flex-grow: 1;`
	`14`	`+ max-width: 100%;`
	`15`	`+`
	`16`	`+ &.hasSidebar {`
	`17`	`+ max-width: calc(100% - #{$sidebar-width});`
	`18`	`+ }`
`15`	`19`	`}`
`16`	`20`	`}`