feat: DocsPrevNext rewrite

components/docs/DocsPageLayout.vue

@@ -74,8 +74,10 @@ onBeforeUnmount(() => {
         Start writing in <ProseCodeInline>content/{{ page._file }}</ProseCodeInline> to see this page taking shape.
       </Alert>
       <template v-if="hasBody && page && bottom">
-        <DocsPageBottom />
-        <DocsPrevNext />
+        <div class="page-body-bottom">
+          <DocsPageBottom />
+          <DocsPrevNext />
+        </div>
       </template>
     </article>
 
@@ -150,17 +152,23 @@ css({
     width: '100%',
     maxWidth: '{docus.readableLine}',
     mx: 'auto',
-    '.has-toc &&': {
-      paddingTop: '{space.12}',
-      '@lg': {
-        paddingTop: '{space.6}',
-      },
-      '@xl': {
-        paddingTop: '{space.8}',
-      }
+    '.page-body-bottom': {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '{space.8}',
     },
+    // '.has-toc &&': {
+    //   paddingTop: '{space.12}',
+    //   '@lg': {
+    //     paddingTop: '{space.8}',
+    //   },
+    //   '@xl': {
+    //     paddingTop: '{space.12}',
+    //   }
+    // },
     '@lg': {
       marginTop: 0,
+      py: '{space.12}',
       // gridColumnStart: 2,
     },
     // `.not-prose` can be useful if creating <h1> with a component (404 page is an example)

components/docs/DocsPrevNext.vue

@@ -1,20 +1,50 @@
 <script setup lang="ts">
-import { upperFirst } from 'scule'
-
 const { prev, next, navigation } = useContent()
-const { navDirFromPath } = useContentHelpers()
 
-const directory = (link: any) => {
-  const nav = navDirFromPath(link._path, navigation.value || [])
+function findNavItem (children: any, path: string, parent: any) {
+  for (const child of children) {
+    if (child._path === path) {
+      return {
+        directoryTitle: parent.title,
+        directoryIcon: parent.icon
+      }
+    }
+    if (child.children) {
+      const result: any = findNavItem(child.children, path, child)
+      if (result) {
+        return result
+      }
+    }
+  }
+  return undefined
+}
 
-  if (nav && nav[0]) {
-    return nav[0]?._path ?? ''
-  } else {
-    const dirs = link.split('/')
-    const directory = dirs.length > 1 ? dirs[dirs.length - 2] : ''
-    return directory.split('-').map(upperFirst).join(' ')
+function getNavItemMeta (path: string) {
+  let result
+  for (const item of navigation.value) {
+    if (item.children) {
+      const found = findNavItem(item.children, path, item)
+      if (found) {
+        result = found
+      }
+    }
   }
+  return result
 }
+
+const prevMeta = computed(() => {
+  if (prev.value?._path) {
+    return getNavItemMeta(prev.value._path)
+  }
+  return undefined
+})
+
+const nextMeta = computed(() => {
+  if (next.value?._path) {
+    return getNavItemMeta(next.value._path)
+  }
+  return undefined
+})
 </script>
 
 <template>
@@ -24,115 +54,83 @@ const directory = (link: any) => {
       :to="prev._path"
       class="prev"
     >
-      <Icon name="heroicons-outline:arrow-sm-left" class="icon" />
-      <div class="wrapper">
-        <span v-if="directory(prev._path)" class="directory">
-          {{ directory(prev._path) }}
-        </span>
-        <span class="title">{{ prev.title }}</span>
-      </div>
+      <Icon v-if="prev.icon !== false" :name="prev.icon || prevMeta?.directoryIcon" />
+      <span v-if="prevMeta" class="directory">
+        {{ prevMeta?.directoryTitle }}
+      </span>
+      <span class="title">{{ prev.title }}</span>
     </NuxtLink>
 
-    <span v-else />
-
     <NuxtLink
       v-if="next && next._path"
       :to="next._path"
       class="next"
     >
-      <div class="wrapper">
-        <span v-if="directory(next._path)" class="directory">
-          {{ directory(next._path) }}
-        </span>
-        <span class="title">{{ next.title }}</span>
-      </div>
-      <Icon name="heroicons-outline:arrow-sm-right" class="icon" />
+      <Icon v-if="next.icon !== false" :name="next.icon || nextMeta?.directoryIcon" />
+      <span v-if="nextMeta" class="directory">
+        {{ nextMeta?.directoryTitle }}
+      </span>
+      <span class="title">{{ next.title }}</span>
+      <span class="description">{{ next.description }}</span>
     </NuxtLink>
   </div>
 </template>
 
 <style scoped lang="ts">
 css({
   '.docs-prev-next': {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    gap: '{space.3}',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(1, minmax(0, 1fr))',
+    gap: '{docus.docs.prevNext.gap}',
     '@sm': {
-      flexDirection: 'row',
-      alignItems: 'center'
+      gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
     },
     a: {
       position: 'relative',
-      minWidth: '0px',
-      padding: '{space.3}',
-      border: '1px solid {elements.border.primary.static}',
-      borderRadius: '{radii.md}',
+      padding: '{docus.docs.prevNext.padding}',
+      border: '{docus.docs.prevNext.border}',
+      borderRadius: '{docus.docs.prevNext.borderRadius}',
+      backgroundColor: '{docus.docs.prevNext.backgroundColor}',
+      boxShadow: '{docus.docs.prevNext.boxShadow.static}',
       '&:hover': {
-        backgroundColor: '{color.gray.50}',
-        borderColor: '{color.gray.50}',
-        color: '{color.primary.500}',
+        boxShadow: '{docus.docs.prevNext.boxShadow.hover}',
       },
-      '@dark': {
-        '&:hover': {
-          backgroundColor: '{color.gray.900}',
-          borderColor: '{color.gray.900}',
-        }
+      '&:hover .title': {
+        color: '{docus.docs.prevNext.title.color.hover}',
       },
       '&.prev': {
-        textAlign: 'end',
         display: 'flex',
-        gap: '{space.3}',
-        '.directory': {
-          display: 'block',
-          marginBottom: '{space.1}',
-          fontSize: '{text.xs.fontSize}',
-          lineHeight: '{text.xs.lineHeight}',
-          fontWeight: '{fontWeight.medium}',
-          color: '{color.gray.500}',
-          truncate: true
-        },
-        '@sm': {
-          '.wrapper': {
-            alignItems: 'flex-end'
-          }
-        }
+        flexDirection: 'column',
       },
       '&.next': {
-        textAlign: 'start',
         display: 'flex',
-        justifyContent: 'flex-end',
-        gap: '{space.3}',
-        '.directory': {
-          display: 'block',
-          marginBottom: '{space.1}',
-          fontSize: '{text.xs.fontSize}',
-          lineHeight: '{text.xs.lineHeight}',
-          fontWeight: '{fontWeight.medium}',
-          color: '{color.gray.500}',
-          truncate: true
-        },
+        flexDirection: 'column',
         '@sm': {
-          '.wrapper': {
-            alignItems: 'flex-start'
-          }
-        }
+          gridColumnStart: '2',
+        },
       },
-      '.wrapper': {
-        display: 'flex',
-        flexDirection: 'column',
+      '.directory': {
+        display: 'block',
+        marginBottom: '{docus.docs.prevNext.directory.marginBottom}',
+        fontSize: '{docus.docs.prevNext.directory.fontSize}',
+        lineHeight: '{docus.docs.prevNext.directory.lineHeight}',
+        fontWeight: '{docus.docs.prevNext.directory.fontWeight}',
+        color: '{docus.docs.prevNext.directory.color}',
       },
       '.icon': {
-        alignSelf: 'flex-end',
-        flexShrink: 0,
-        width: '{space.5}',
-        height: '{space.5}'
+        width: '{docus.docs.prevNext.icon.size}',
+        height: '{docus.docs.prevNext.icon.size}',
+        marginBottom: '{docus.docs.prevNext.icon.marginBottom}',
       },
       '.title': {
-        flex: '1 1 0%',
-        fontWeight: '{fontWeight.medium}',
-        lineHeight: '{lead.5}',
-        truncate: true
+        fontWeight: '{docus.docs.prevNext.title.fontWeight}',
+        marginBottom: '{docus.docs.prevNext.title.marginBottom}',
+      },
+      '.description': {
+        fontSize: '{docus.docs.prevNext.description.fontSize}',
+        lineHeight: '{docus.docs.prevNext.description.lineHeight}',
+        color: '{docus.docs.prevNext.description.color}',
+        lineClamp: 3
       }
     }
   }

tokens.config.ts

@@ -21,7 +21,11 @@ export default defineTheme({
     }
   },
   color: {
-    primary: theme.color.lightblue
+    primary: theme.color.lightblue,
+    shadow: {
+      initial: '{color.gray.300}',
+      dark: 'black'
+    }
     // black: '14, 13, 13',
     // gray: {
     //   50: '251, 251, 251',
@@ -100,6 +104,52 @@ export default defineTheme({
             xl: '{space.8}'
           }
         }
+      },
+      prevNext: {
+        gap: '{space.8}',
+        padding: '{space.6}',
+        backgroundColor: {
+          initial: '{color.gray.100}',
+          dark: '{color.gray.900}'
+        },
+        borderRadius: '{radii.2xs}',
+        border: {
+          initial: '1px solid {color.gray.200}',
+          dark: 'none'
+        },
+        boxShadow: {
+          static: {
+            initial: 'none',
+            dark: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1), {shadow.xs}'
+          },
+          hover: {
+            initial: 'none',
+            dark: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1), {shadow.lg}'
+          }
+        },
+        title: {
+          color: {
+            hover: '{color.primary.500}'
+          },
+          fontWeight: '{fontWeight.medium}',
+          marginBottom: '{space.2}'
+        },
+        directory: {
+          marginBottom: '{space.3}',
+          fontSize: '{text.xs.fontSize}',
+          lineHeight: '{text.xs.lineHeight}',
+          fontWeight: '{fontWeight.medium}',
+          color: '{color.gray.500}'
+        },
+        icon: {
+          size: '{space.8}',
+          marginBottom: '{space.4}'
+        },
+        description: {
+          fontSize: '{text.sm.fontSize}',
+          lineHeight: '{text.sm.lineHeight}',
+          color: '{color.gray.500}'
+        }
       }
     }
   },