🔖 v1.2.3

osmium-blog · May 3, 2023 · f182b89 · f182b89 · vercel · May 3, 2023
2 parents 34c547d + c9d47d1
commit f182b89
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 49 deletions.
diff --git a/layouts/blog/post.tsx b/layouts/blog/post.tsx
@@ -38,7 +38,7 @@ export default function PostLayout ({ post, recordMap }: Props) {
               <span className="hidden sm:block ml-2">/</span>
             </div>
             <FormattedDate date={date}/>
-            {tags.length && (
+            {tags.length > 0 && (
               <div className="flex flex-nowrap max-w-full overflow-x-auto article-tags">
                 {tags.map(tag => (
                   <TagItem key={tag} tag={tag}/>

diff --git a/layouts/blog/styles.module.scss b/layouts/blog/styles.module.scss
@@ -64,11 +64,11 @@
 .post_layout {
   @apply grid;
   grid-template:
-    ' title   ' auto
-    ' info    ' auto
-    ' toc     ' auto
-    ' content ' auto
-    / 1fr;
+    ' title         ' auto
+    ' info          ' auto
+    ' toc           ' auto
+    ' content       ' auto
+    / minmax(0, 1fr);
   @media (min-width: theme('screens.lg')) {
     grid-template:
       ' .   title   .   ' auto

diff --git a/layouts/docs/nav.tsx b/layouts/docs/nav.tsx
@@ -1,10 +1,12 @@
+import { useEffect, useMemo } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import cn from 'classnames'
 
 import css from './styles.module.scss'
 import type { PageMeta } from '@/lib/server/page'
 import { useData } from '@/contexts/data'
+import { useLayoutState } from '@/layouts/docs/root'
 
 const INDENT = 24
 
@@ -41,17 +43,29 @@ export default function LayoutNav () {
     return data
   }, { nodeMap: {}, roots: [] })
 
-  let currentRoot: PageMeta
-  const navNodes: Node[] = current && (currentRoot = getRoot(current, pageMap))
-    ? roots.find(n => n.hash === currentRoot.hash)?.children ?? []
-    : roots.filter(n => ['Post', 'Doc'].includes(n.type!))
+  const navNodes = useMemo(() => {
+    let currentRoot: PageMeta
+    return current && (currentRoot = getRoot(current, pageMap))
+      ? roots.find(n => n.hash === currentRoot.hash)?.children ?? []
+      : roots.filter(n => ['Post', 'Doc'].includes(n.type!))
+  }, [current, pageMap, roots])
+
+  const { hasNav } = useLayoutState()
+
+  useEffect(() => {
+    hasNav(navNodes.length > 0)
+  }, [hasNav, navNodes])
 
   if (!navNodes.length) return null
 
   return (
     <ul className={css.nav_root}>
       {navNodes.map(node => (
-        <li key={node.id} className={cn(css.nav_item, { [css.nav_group]: node.children?.length })}>
+        <li
+          key={node.id}
+          data-is-group={node.children?.length ? 'true' : null}
+          className={css.nav_item}
+        >
           <NavItem node={node}/>
         </li>
       ))}
@@ -92,10 +106,14 @@ function NavItem ({ node, level = 0 }: NavItemProps) {
   })
   const indentStyle = { paddingLeft: INDENT * level }
 
-  const children = node.children?.length && (
+  const children = node.children?.length! > 0 && (
     <ul>
-      {node.children.map(child => (
-        <li key={child.id} className={css.nav_item}>
+      {node.children!.map(child => (
+        <li
+          key={child.id}
+          data-is-group={child.children?.length ? 'true' : null}
+          className={css.nav_item}
+        >
           <NavItem node={child} level={level + 1}/>
         </li>
       ))}

diff --git a/layouts/docs/root.tsx b/layouts/docs/root.tsx
@@ -1,3 +1,4 @@
+import { createContext, useContext, useState } from 'react'
 import type { ReactNode } from 'react'
 import { useRouter } from 'next/router'
 
@@ -8,23 +9,41 @@ import LayoutHead from '@/layouts/blog/head'
 import LayoutNav from './nav'
 import LayoutFooter from './footer'
 
+const LayoutStateContext = createContext(undefined as any)
+
+export function useLayoutState () {
+  return useContext(LayoutStateContext)
+}
+
 export default function DocsLayout ({ children }: { children: ReactNode }) {
   const router = useRouter()
   const { current: post } = useData()
 
-  return <>
-    <LayoutHead post={post}/>
-    <div data-layout-root={true} data-page={router.pathname} className={css.layout}>
-      <Header className={css.layout_header}/>
-      <main className={css.layout_main}>
-        <nav className={css.layout_nav}>
-          <LayoutNav/>
-        </nav>
-        <div className={css.layout_page}>
-          {children}
-          <LayoutFooter/>
-        </div>
-      </main>
-    </div>
-  </>
+  const [hasNav, setHasNav] = useState(false)
+  const layoutState = {
+    hasNav: setHasNav,
+  }
+
+  return (
+    <LayoutStateContext.Provider value={layoutState}>
+      <LayoutHead post={post}/>
+      <div
+        data-layout-root={true}
+        data-page={router.pathname}
+        data-no-nav={hasNav ? null : 'true'}
+        className={css.layout}
+      >
+        <Header className={css.layout_header}/>
+        <main className={css.layout_main}>
+          <nav className={css.layout_nav}>
+            <LayoutNav/>
+          </nav>
+          <div className={css.layout_page}>
+            {children}
+            <LayoutFooter/>
+          </div>
+        </main>
+      </div>
+    </LayoutStateContext.Provider>
+  )
 }
diff --git a/layouts/docs/styles.module.scss b/layouts/docs/styles.module.scss
@@ -30,16 +30,15 @@
 }
 
 .layout_header_burger {
-  @apply w-6 h-6 mr-4 justify-center items-center;
-  @apply hidden;
+  @apply w-6 h-6 mr-4 flex justify-center items-center;
 
   i {
     @apply inline-block w-5 h-5 bg-contain;
     @include icons.menu-2(black, white);
   }
 
-  @at-root .layout_header:has(+ .layout_main .layout_nav ul) & {
-    @apply flex;
+  @at-root .layout[data-no-nav] & {
+    @apply hidden;
   }
 
   @media (min-width: theme('screens.lg')) {
@@ -57,25 +56,21 @@
   @at-root {
     .layout_nav {
       @apply hidden;
-    }
 
-    .layout_page {
-      @apply flex-1;
+      @at-root .layout[data-layout-menu-open] & {
+        @apply block;
+      }
 
       @media (min-width: theme('screens.lg')) {
-        padding-left: var(--nav-width);
+        @apply block;
       }
     }
-  }
 
-  &:has(.nav_root) {
-    .layout_nav {
-      @at-root .layout[data-layout-menu-open] & {
-        @apply block;
-      }
+    .layout_page {
+      @apply flex-1;
 
       @media (min-width: theme('screens.lg')) {
-        @apply block;
+        padding-left: var(--nav-width);
       }
     }
   }
@@ -85,7 +80,11 @@
   @apply fixed inset-0 top-[64px] z-10 overflow-y-auto bg-day dark:bg-night border-r border-neutral-200 dark:border-neutral-700;
   width: var(--nav-width);
   max-width: 100vw;
-  height: calc(100vh - 65px);
+  height: calc(100% - 65px);
+
+  @at-root .layout[data-no-nav] & {
+    @apply hidden #{!important};
+  }
 }
 
 .layout_page {
@@ -137,14 +136,14 @@
     @apply block;
   }
 
-  &:has(+ ul) {
+  [data-is-group] > & {
     @apply font-bold;
   }
 
   @at-root span#{&} {
     @apply text-neutral-500 dark:text-neutral-400;
 
-    &:has(+ ul) {
+    [data-is-group] > & {
       @apply uppercase;
     }
   }
@@ -167,7 +166,7 @@
   }
 }
 
-.nav_group {
+.nav_root > [data-is-group] {
   @apply my-4;
 
   ul {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@osmium-blog/osmium",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "homepage": "https://github.com/osmium-blog/osmium",
   "license": "MIT",
   "author": {