From 9c2396c6696b202f628c9d6526813d20a7d9ed18 Mon Sep 17 00:00:00 2001
From: Freeze455 <baptiste.parmantier.pro@gmail.com>
Date: Tue, 17 Aug 2021 15:03:36 +0200
Subject: [PATCH] :construction: Work in progress

---
 src/components/CodeHighlight.vue              | 14 +++++++----
 src/components/Divider.vue                    | 23 +++++++++++++++++++
 src/components/LinkExternal.vue               | 19 +++++++++++++++
 src/templates/modules/documentation/Routes.ts |  4 +++-
 src/utils/Navigation.ts                       |  3 ++-
 5 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Divider.vue
 create mode 100644 src/components/LinkExternal.vue

diff --git a/src/components/CodeHighlight.vue b/src/components/CodeHighlight.vue
index e170987..74287a9 100644
--- a/src/components/CodeHighlight.vue
+++ b/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;
 }
 
diff --git a/src/components/Divider.vue b/src/components/Divider.vue
new file mode 100644
index 0000000..7dbe845
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/LinkExternal.vue b/src/components/LinkExternal.vue
new file mode 100644
index 0000000..4819091
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/templates/modules/documentation/Routes.ts b/src/templates/modules/documentation/Routes.ts
index 9ae0c48..266c7f4 100644
--- a/src/templates/modules/documentation/Routes.ts
+++ b/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
\ No newline at end of file
diff --git a/src/utils/Navigation.ts b/src/utils/Navigation.ts
index 4a35795..2fc7d5d 100644
--- a/src/utils/Navigation.ts
+++ b/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 },
     ]
   },
 ]