init Docs docs

.starters/default/content/3.components/3.app/text-direction.md → .starters/default/content/3.components/3.app/_text-direction.md

@@ -5,5 +5,5 @@ Docus and Elements is build using logical properties and values, which means it'
 ::callout{icon}
 This component still WIP 🚧
 
-It's not clear if it's useful to have for English based documentation, it needs an option of setting default text direction with `app.config`, and also saving user choice feature.
+It's not clear if it's useful to have for English-based documentation, it needs an option of setting default text direction with `app.config`, and also saving user choice feature.
 ::

.starters/default/content/3.components/4.docs/1.navigation.md

@@ -0,0 +1,9 @@
+# Navigation
+
+Component for rendering `Docs` tree navigation, from `content` folder structure. Could be nested and collapsible, depending on configuration.
+
+## Design Tokens
+
+::callout{icon=🚧}
+Tokenization is WIP
+::

.starters/default/content/3.components/4.docs/2.toc.md

@@ -0,0 +1,9 @@
+# Table of Contents
+
+A component for `Docs` article Table of Contents.
+
+## Design Tokens
+
+::callout{icon=🚧}
+Tokenization is WIP
+::

.starters/default/content/3.components/4.docs/3.toc-links.md

@@ -0,0 +1,9 @@
+# Table of Contents Links
+
+Renders `DocsToc` links tree.
+
+## Design Tokens
+
+::callout{icon=🚧}
+Tokenization is WIP
+::

.starters/default/content/3.components/4.docs/content-bottom.md

@@ -0,0 +1,3 @@
+# Content Bottom
+
+Component for rendering content bottom section.

.starters/default/content/3.components/4.docs/edit-on.md

@@ -0,0 +1,3 @@
+# Edit On
+
+Component for rendering `EditOn` GitHub link.

.starters/default/content/3.components/4.docs/prev-next.md

@@ -0,0 +1,64 @@
+# Prev Next
+
+Component for rendering `PrevNext` navigation links.
+
+## Design Tokens
+
+```ts [tokens.config.ts]
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+  docus: {
+    docs: {
+      prevNext: {
+        gap: '{space.8}',
+        padding: '{space.6}',
+        backgroundColor: {
+          initial: '{color.gray.50}',
+          dark: '{color.gray.900}'
+        },
+        borderRadius: '{radii.2xs}',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: {
+          initial: '{color.gray.200}',
+          dark: '{color.gray.800}'
+        },
+        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}'
+        }
+      }
+    },
+  }
+})
+```

components/docs/DocsContentBottom.vue

@@ -13,7 +13,10 @@ const { config } = useDocus()
       class="edit-link"
     >
       <Icon name="uil:edit" />
-      <DocsEditOn v-slot="{ url }" :page="page">
+      <DocsEditOn
+        v-slot="{ url }"
+        :page="page"
+      >
         <ProseA :to="url">
           <span>
             Edit this page on GitHub

components/layout/DocsLayout.vue

@@ -63,15 +63,28 @@ onBeforeUnmount(() => {
     }"
   >
     <!-- Aside -->
-    <aside v-if="hasAside" ref="asideNav" class="aside-nav">
-      <AppNavigation v-if="config.aside?.navigation" vertical />
-      <DocsAside class="app-aside" />
+    <aside
+      v-if="hasAside"
+      ref="asideNav"
+      class="aside-nav"
+    >
+      <AppNavigation
+        v-if="config.aside?.navigation"
+        vertical
+      />
+      <DocsNavigation
+        v-if="tree?.length > 0"
+        :links="tree"
+      />
     </aside>
 
     <!-- Page Content -->
     <article class="page-content">
       <slot v-if="hasContent" />
-      <Alert v-else type="info">
+      <Alert
+        v-else
+        type="info"
+      >
         Start writing in <ProseCodeInline>content/{{ page._file }}</ProseCodeInline> to see this page taking shape.
       </Alert>
       <template v-if="hasContent && page && bottom">
@@ -83,7 +96,10 @@ onBeforeUnmount(() => {
     </article>
 
     <!-- ToC -->
-    <div v-if="hasToc" class="toc">
+    <div
+      v-if="hasToc"
+      class="toc"
+    >
       <div class="toc-wrapper">
         <button @click="isOpen = !isOpen">
           <span class="title">Table of Contents</span>