🚧 Work in progress

src/components/CodeHighlight.vue

@@ -1,5 +1,5 @@
 <template>
-  <Prism language="typescript">{{ code }}</Prism>
+  <Prism :language="language">{{ code.trim() }}</Prism>
 </template>
 
 <script setup lang='ts'>
@@ -8,9 +8,15 @@ import 'prismjs/components/prism-typescript'
 // @ts-ignore
 import Prism from 'vue-prism-component'
 
-defineProps<{
+type Props = {
+  language?: string
   code: string
-}>()
+}
+
+withDefaults(defineProps<Props>(), {
+  language: 'typescript',
+  code: ''
+})
 </script>
 
 <style lang="scss">
@@ -59,7 +65,7 @@ pre[class*="language-"] ::selection {
 pre[class*="language-"] {
   overflow: auto;
   position: relative;
-  padding: 0 1em 1.8rem;
+  padding: .5rem 1em .5rem;
   margin: 0;
 }
 

src/components/Divider.vue

@@ -0,0 +1,23 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+  <div class="relative">
+    <div class="absolute inset-0 flex items-center" aria-hidden="true">
+      <div class="w-full border-t border-gray-300" />
+    </div>
+    <div class="relative flex justify-center">
+      <span class="px-2 text-sm text-gray-500">
+        {{ text }}
+      </span>
+    </div>
+  </div>
+</template>
+
+
+<script setup lang='ts'>
+import { defineProps } from 'vue'
+
+type Props = {
+  text: string
+}
+defineProps<Props>()
+</script>

src/components/LinkExternal.vue

@@ -0,0 +1,19 @@
+<template>
+  <a
+    :href="url"
+    rel="nofollow noreferrer noopener"
+    target="_blank"
+    class="text-blue-600">
+    <slot />
+  </a>
+</template>
+
+<script setup lang='ts'>
+import { NavbarLink } from '../types'
+
+type Link = {
+  url: string
+}
+
+defineProps<Link>()
+</script>

src/templates/modules/documentation/Routes.ts

@@ -1,8 +1,10 @@
 import { RouteRecordRaw } from 'vue-router'
 import GettingStarted from './Getting-started.vue'
+import Starting from './Starting.vue'
 
 const routes: RouteRecordRaw[] = [
-  { path: '/documentation/Getting-started', component: GettingStarted },
+  { path: '/documentation/getting-started', component: GettingStarted },
+  { path: '/documentation/starting', component: Starting },
 ]
 
 export default routes

src/utils/Navigation.ts

@@ -18,7 +18,8 @@ export const documentation = [
     label: 'Basic',
     isMenu: true,
     child: [
-      { label: 'Getting starting', href: '/documentation/getting-started', isMenu: true },
+      { label: 'Getting starting', href: '/documentation/getting-started', isMenu: false },
+      { label: 'Starting', href: '/documentation/starting', isMenu: false },
     ]
   },
 ]