basic tutorial layout using tailwind

docs/.vitepress/config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
           }
         ],
       },
-      { text: 'Tutorial', link: '/tutorial' },
+      { text: 'Tutorial', link: '/tutorial/start' },
     ],
 
     sidebar: {
@@ -74,6 +74,10 @@ export default defineConfig({
             { text: '@aldea/sdk', link: '/api/sdk/modules' },
           ]
         }
+      ],
+      '/tutorial': [
+        { text: 'Start', link: '/tutorial/start' },
+        { text: 'Next', link: '/tutorial/next' },
       ]
     },
 

docs/.vitepress/theme/custom.css

@@ -173,4 +173,16 @@
 
 .VPMenu .link:hover {
   background-color: transparent;
-}
+}
+
+/**
+ * Tutorial
+ */
+
+.xLayout.tutorial {
+  --vp-layout-max-width: auto;
+}
+
+.Layout.tutorial .VPNav {
+  position: relative;
+}

docs/.vitepress/theme/index.ts

@@ -1,16 +1,26 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from 'vue'
+import { useRoute } from 'vitepress'
 import Theme from 'vitepress/theme'
+import TutorialLayout from './tutorial/Layout.vue'
 import './custom.css'
+import './tutorial.css'
 
 export default {
   extends: Theme,
   Layout: () => {
-    return h(Theme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    })
+    const route = useRoute()
+    if (/^\/tutorial\//.test(route.path)) {
+      return h(TutorialLayout)
+    } else {
+      return h(Theme.Layout, null, {
+        // https://vitepress.dev/guide/extending-default-theme#layout-slots
+      })
+    }
+
   },
   enhanceApp({ app, router, siteData }) {
+    //app.component('tutorial', TutorialLayout)
     // ...
   }
 }

docs/.vitepress/theme/tutorial.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

docs/.vitepress/theme/tutorial/Editor.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>EDITOR</div>
+</template>

docs/.vitepress/theme/tutorial/FileDrawer.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    FILES
+  </div>
+</template>

docs/.vitepress/theme/tutorial/Layout.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="Layout tutorial">
+    <VPNav :inert="false" />
+
+    <main class="flex flex-auto">
+      <article class="flex flex-col w-2/5">
+        <NavSelect />
+        <div class="flex-auto px-9 py-6 overflow-y-auto">
+          <Content class="w-full max-w-2xl mx-auto | vp-doc" />
+        </div>
+        <Pager />
+      </article>
+      <div class="flex flex-auto flex-col bg-neutral-800">
+        <div class="flex flex-auto border-b border-neutral-700">
+          <FileDrawer class="w-52 border-r border-neutral-700" />
+          <Editor class="flex-auto" />
+        </div>
+        <div class="flex flex-col h-2/5">
+          <Terminal class="flex-auto" />
+          <StatusBar />
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VPNav from 'vitepress/dist/client/theme-default/components/VPNav.vue'
+import Editor from './Editor.vue'
+import FileDrawer from './FileDrawer.vue'
+import NavSelect from './NavSelect.vue'
+import Pager from './Pager.vue'
+import StatusBar from './StatusBar.vue'
+import Terminal from './Terminal.vue'
+</script>
+
+<style scoped>
+.Layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+
+.code-wrap .editor {
+  flex: auto;
+}
+
+.terminal-wrap {
+  display: flex;
+  flex-direction: column;
+  height: 38.2%;
+}
+</style>

docs/.vitepress/theme/tutorial/NavSelect.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex items-center h-12 px-4 py-3 bg-neutral-900">
+    Nav Select
+  </div>
+</template>

docs/.vitepress/theme/tutorial/Pager.vue

@@ -0,0 +1,17 @@
+<template>
+  <footer class="flex items-center h-12 text-14 bg-neutral-800">
+    <PagerLink :link="control.prev?.link">&laquo; Prev</PagerLink>
+    <div class="flex-auto px-4 text-neutral-200 text-center">
+      Page x / y
+    </div>
+    <PagerLink :link="control.next?.link" class="text-right">Next &raquo;</PagerLink>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { usePrevNext } from 'vitepress/dist/client/theme-default/composables/prev-next'
+import PagerLink from './PagerLink.vue'
+
+const control = usePrevNext()
+
+</script>

docs/.vitepress/theme/tutorial/PagerLink.vue

@@ -0,0 +1,21 @@
+<template>
+  <component
+    :is="linkComponent"
+    :href="link"
+    class="w-40 px-4 py-3"
+    :class="!!link ? 'text-neutral-100 bg-neutral-700 hover:bg-neutral-600 transition-colors' : 'text-neutral-400'">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  link?: string
+}>()
+
+const linkComponent = computed(() => {
+  return !!props.link ? 'a' : 'div'
+})
+</script>

docs/.vitepress/theme/tutorial/StatusBar.vue

@@ -0,0 +1,7 @@
+<template>
+  <footer class="flex items-center justify-end h-12 text-14 bg-neutral-800">
+    <div class="w-40 px-4 py-3 text-neutral-100 bg-sky-600 hover:bg-sky-500 transition-colors cursor-pointer">
+      Solve
+    </div>
+  </footer>
+</template>

docs/.vitepress/theme/tutorial/Terminal.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    TERMINAL
+  </div>
+</template>

docs/index.md

@@ -12,7 +12,7 @@ hero:
       link: /examples/markdown
     - theme: alt
       text: Tutorial
-      link: /tutorial
+      link: /tutorial/start
 
 features:
   - title: Feature A

docs/package.json

@@ -14,8 +14,11 @@
   },
   "packageManager": "[email protected]",
   "devDependencies": {
+    "autoprefixer": "^10.4.15",
     "markdown-it": "^13.0.1",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.29",
+    "tailwindcss": "^3.3.3",
     "typedoc": "^0.25.0",
     "typedoc-json-parser": "^8.2.0",
     "typedoc-plugin-markdown": "^3.16.0",

docs/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

docs/tailwind.config.js

@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./**/*/index.md",
+    "./.vitepress/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    fontSize: {
+      '12': '0.75rem',
+      '14': '0.875rem',
+      '16': '1rem',
+      '18': '1.125rem',
+      '20': '1.25rem',
+      '24': '1.5rem',
+      '28': '1.75rem',
+      '32': '2rem',
+      '36': '2.25rem',
+      '42': '2.625rem',
+      '48': '3rem',
+    },
+
+    extend: {},
+  },
+  plugins: [],
+}
+

docs/tutorial/next.md

@@ -0,0 +1,7 @@
+---
+layout: tutorial
+---
+
+# Next
+
+Moving on

docs/tutorial/start.md

@@ -0,0 +1,7 @@
+---
+sidebar: false
+---
+
+# Tutorial
+
+Starting here