feat(frontmatter): outline, sidebar

wevm · Nov 25, 2023 · c6be4fd · c6be4fd
1 parent 7340493
commit c6be4fd
Show file tree

Hide file tree

Showing 11 changed files with 208 additions and 69 deletions.
diff --git a/site/pages/blank.mdx b/site/pages/blank.mdx
@@ -0,0 +1,8 @@
+---
+outline: false
+# sidebar: false
+---
+
+# Blank page
+
+This is a blank page.
diff --git a/src/app/components/DesktopTopNav.css.ts b/src/app/components/DesktopTopNav.css.ts
@@ -1,7 +1,9 @@
 import { style } from '@vanilla-extract/css'
+import { leftGutterWidthVar } from '../layouts/DocsLayout.css.js'
 import {
   borderRadiusVars,
   primitiveColorVars,
+  sidebarVars,
   spaceVars,
   topNavVars,
   viewportVars,
@@ -69,6 +71,27 @@ export const icon = style(
 
 export const item = style({ alignItems: 'center', display: 'flex', height: '100%' }, 'item')
 
+export const logo = style(
+  {
+    paddingLeft: sidebarVars.horizontalPadding,
+    paddingRight: sidebarVars.horizontalPadding,
+    width: sidebarVars.width,
+  },
+  'logo',
+)
+
+export const logoWrapper = style(
+  {
+    display: 'flex',
+    height: '100%',
+    justifyContent: 'flex-end',
+    left: 0,
+    position: 'absolute',
+    width: leftGutterWidthVar,
+  },
+  'logoWrapper',
+)
+
 export const section = style(
   { alignItems: 'center', display: 'flex', height: '100%', gap: spaceVars[16] },
   'section',

diff --git a/src/app/components/DesktopTopNav.tsx b/src/app/components/DesktopTopNav.tsx
@@ -6,6 +6,7 @@ import { useTheme } from '../hooks/useTheme.js'
 import { visibleDark, visibleLight } from '../styles/utils.css.js'
 import * as styles from './DesktopTopNav.css.js'
 import { Icon } from './Icon.js'
+import { Logo } from './Logo.js'
 import { Discord } from './icons/Discord.js'
 import { GitHub } from './icons/GitHub.js'
 import { Moon } from './icons/Moon.js'
@@ -18,6 +19,11 @@ export function DesktopTopNav() {
   const config = useConfig()
   return (
     <div className={styles.root}>
+      <div className={styles.logoWrapper}>
+        <div className={styles.logo}>
+          <Logo />
+        </div>
+      </div>
       <div className={styles.section} />
       <div className={styles.section}>
         {config.socials && (

diff --git a/src/app/components/Logo.css.ts b/src/app/components/Logo.css.ts
@@ -0,0 +1,29 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { fontSizeVars, fontWeightVars, lineHeightVars } from '../styles/vars.css.js'
+
+export const logoImage = style(
+  {
+    height: '30%',
+    width: 'max-content',
+  },
+  'logoImage',
+)
+
+export const logoDark = style({}, 'logoDark')
+globalStyle(`:root:not(.dark) ${logoDark}`, {
+  display: 'none',
+})
+
+export const logoLight = style({}, 'logoLight')
+globalStyle(`:root.dark ${logoLight}`, {
+  display: 'none',
+})
+
+export const title = style(
+  {
+    fontSize: fontSizeVars['18'],
+    fontWeight: fontWeightVars.semibold,
+    lineHeight: lineHeightVars.heading,
+  },
+  'title',
+)
diff --git a/src/app/components/Logo.tsx b/src/app/components/Logo.tsx
@@ -0,0 +1,35 @@
+import clsx from 'clsx'
+import { Link } from 'react-router-dom'
+
+import { useConfig } from '../hooks/useConfig.js'
+import * as styles from './Logo.css.js'
+
+export function Logo() {
+  const config = useConfig()
+  return (
+    <Link to="/" style={{ alignItems: 'center', display: 'flex', height: '100%' }}>
+      {config.logoUrl ? (
+        <>
+          {typeof config.logoUrl === 'string' ? (
+            <img alt="Logo" className={styles.logoImage} src={config.logoUrl} />
+          ) : (
+            <>
+              <img
+                alt="Logo"
+                className={clsx(styles.logoImage, styles.logoDark)}
+                src={config.logoUrl.dark}
+              />
+              <img
+                alt="Logo"
+                className={clsx(styles.logoImage, styles.logoLight)}
+                src={config.logoUrl.light}
+              />
+            </>
+          )}
+        </>
+      ) : (
+        <div className={styles.title}>{config.title}</div>
+      )}
+    </Link>
+  )
+}
diff --git a/src/app/components/Sidebar.css.ts b/src/app/components/Sidebar.css.ts
@@ -22,6 +22,15 @@ export const root = style({
   },
 })
 
+export const divider = style(
+  {
+    backgroundColor: primitiveColorVars.border,
+    width: '100%',
+    height: '1px',
+  },
+  'divider',
+)
+
 export const item = style(
   {
     color: primitiveColorVars.text3,
@@ -52,36 +61,23 @@ export const items = style(
 export const logo = style(
   {
     alignItems: 'center',
-    borderBottom: `1px solid ${primitiveColorVars.border}`,
     display: 'flex',
     height: topNavVars.height,
-    '@media': {
-      'screen and (max-width: 1080px)': {
-        display: 'none',
-      },
-    },
   },
   'logo',
 )
 
-export const logoImage = style(
+export const logoWrapper = style(
   {
-    height: '30%',
-    width: 'max-content',
+    '@media': {
+      'screen and (max-width: 1080px)': {
+        display: 'none',
+      },
+    },
   },
-  'logoImage',
+  'logoWrapper',
 )
 
-export const logoDark = style({}, 'logoDark')
-globalStyle(`:root:not(.dark) ${logoDark}`, {
-  display: 'none',
-})
-
-export const logoLight = style({}, 'logoLight')
-globalStyle(`:root.dark ${logoLight}`, {
-  display: 'none',
-})
-
 export const navigation = style(
   {
     selectors: {
@@ -151,12 +147,3 @@ export const socials = style(
   },
   'socials',
 )
-
-export const title = style(
-  {
-    fontSize: fontSizeVars['18'],
-    fontWeight: fontWeightVars.semibold,
-    lineHeight: lineHeightVars.heading,
-  },
-  'title',
-)
diff --git a/src/app/components/Sidebar.tsx b/src/app/components/Sidebar.tsx
@@ -5,6 +5,7 @@ import { Link, useMatch } from 'react-router-dom'
 import type { ParsedSocialItem } from '../../config.js'
 import { useConfig } from '../hooks/useConfig.js'
 import { Icon } from './Icon.js'
+import { Logo } from './Logo.js'
 import * as styles from './Sidebar.css.js'
 import { Discord } from './icons/Discord.js'
 import { GitHub } from './icons/GitHub.js'
@@ -20,31 +21,13 @@ export function Sidebar({
   if (!sidebar) return null
   return (
     <aside className={clsx(styles.root, className)}>
-      <div className={styles.logo}>
-        <Link to="/" style={{ alignItems: 'center', display: 'flex', height: '100%' }}>
-          {config.logoUrl ? (
-            <>
-              {typeof config.logoUrl === 'string' ? (
-                <img alt="Logo" className={styles.logoImage} src={config.logoUrl} />
-              ) : (
-                <>
-                  <img
-                    alt="Logo"
-                    className={clsx(styles.logoImage, styles.logoDark)}
-                    src={config.logoUrl.dark}
-                  />
-                  <img
-                    alt="Logo"
-                    className={clsx(styles.logoImage, styles.logoLight)}
-                    src={config.logoUrl.light}
-                  />
-                </>
-              )}
-            </>
-          ) : (
-            <div className={styles.title}>{config.title}</div>
-          )}
-        </Link>
+      <div className={styles.logoWrapper}>
+        <div className={styles.logo}>
+          <Link to="/" style={{ alignItems: 'center', display: 'flex', height: '100%' }}>
+            <Logo />
+          </Link>
+        </div>
+        <div className={styles.divider} />
       </div>
       <nav className={styles.navigation}>
         <section className={styles.section}>

diff --git a/src/app/hooks/usePageData.ts b/src/app/hooks/usePageData.ts
@@ -1,4 +1,4 @@
-import { useContext, createContext } from 'react'
+import { createContext, useContext } from 'react'
 
 import { type Module } from '../types.js'
 

diff --git a/src/app/layouts/DocsLayout.css.ts b/src/app/layouts/DocsLayout.css.ts
@@ -9,7 +9,7 @@ import {
   zIndexVars,
 } from '../styles/vars.css.js'
 
-const leftGutterWidthVar = createVar('leftGutterWidth')
+export const leftGutterWidthVar = createVar('leftGutterWidth')
 
 export const root = style({
   vars: {
@@ -19,7 +19,8 @@ export const root = style({
 
 export const content = style(
   {
-    marginLeft: leftGutterWidthVar,
+    marginLeft: 'auto',
+    marginRight: 'auto',
     maxWidth: contentVars.width,
     minHeight: `calc(100vh - (${topNavVars.height} + ${topNavVars.curtainHeight}))`,
     '@media': {
@@ -35,6 +36,14 @@ export const content = style(
   'content',
 )
 
+export const content_withSidebar = style(
+  {
+    marginLeft: leftGutterWidthVar,
+    marginRight: 'unset',
+  },
+  'content_withSidebar',
+)
+
 export const gutterLeft = style(
   {
     backgroundColor: primitiveColorVars.backgroundDark,
@@ -61,7 +70,7 @@ export const gutterTop = style(
     zIndex: zIndexVars.gutterTop,
     '@media': {
       [viewportVars['min-1080px']]: {
-        paddingLeft: leftGutterWidthVar,
+        paddingLeft: `calc(${leftGutterWidthVar} - ${sidebarVars.width})`,
         paddingRight: `calc(${leftGutterWidthVar} - ${sidebarVars.width})`,
         position: 'fixed',
         top: 0,
@@ -74,6 +83,17 @@ export const gutterTop = style(
   'gutterTop',
 )
 
+export const gutterTop_withSidebar = style(
+  {
+    '@media': {
+      [viewportVars['min-1080px']]: {
+        paddingLeft: leftGutterWidthVar,
+      },
+    },
+  },
+  'gutterTop_withSidebar',
+)
+
 export const gutterTopCurtain = style(
   {
     display: 'flex',
@@ -82,7 +102,6 @@ export const gutterTopCurtain = style(
     zIndex: zIndexVars.gutterTop,
     '@media': {
       [viewportVars['min-1080px']]: {
-        marginLeft: leftGutterWidthVar,
         position: 'fixed',
         top: topNavVars.height,
       },
@@ -95,6 +114,17 @@ export const gutterTopCurtain = style(
   'gutterTopCurtain',
 )
 
+export const gutterTopCurtain_withSidebar = style(
+  {
+    '@media': {
+      [viewportVars['min-1080px']]: {
+        marginLeft: leftGutterWidthVar,
+      },
+    },
+  },
+  'gutterTopCurtain_withSidebar',
+)
+
 export const gutterRight = style(
   {
     display: 'flex',
@@ -104,7 +134,7 @@ export const gutterRight = style(
     position: 'fixed',
     top: '0',
     right: '0',
-    width: `calc(100vw - ${contentVars.width} - ${leftGutterWidthVar})`,
+    width: `calc((100vw - ${contentVars.width}) / 2)`,
     zIndex: zIndexVars.gutterRight,
     '@media': {
       [viewportVars['max-1280px']]: {
@@ -115,6 +145,13 @@ export const gutterRight = style(
   'gutterRight',
 )
 
+export const gutterRight_withSidebar = style(
+  {
+    width: `calc(100vw - ${contentVars.width} - ${leftGutterWidthVar})`,
+  },
+  'gutterRight_withSidebar',
+)
+
 export const outlinePopover = style(
   {
     display: 'none',