Added markdown files, main doc dynamic routing page, and typography

Author: armgitaar

components/DocsContents.vue

@@ -5,7 +5,7 @@
         Section Header
       </h3>
 
-      <nuxt-link to="#" class="flex items-center pb-3 pr-5 text-gray-600 hover:text-gray-700">
+      <nuxt-link to="doc-example" class="flex items-center pb-3 pr-5 text-gray-600 hover:text-gray-700">
         Link 1
       </nuxt-link>
 

components/MainHeader.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="fixed flex flex-shrink-0 h-16 w-full max-w-6xl bg-white border-b-2 border-gray-100">
+  <div class="fixed z-10 flex flex-shrink-0 h-16 w-full max-w-6xl bg-white border-b-2 border-gray-100">
     <!-- TODO Add mobile friendly header -->
-    <button class="md:hidden p-6" @click="showMobileMenu">
+    <button class="md:hidden items-center px-6" @click="showMobileMenu">
       <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
       </svg>
@@ -17,9 +17,9 @@
       </div>
 
       <!-- icons -->
-      <div>
+      <a href="/">
         <GlobeIcon class="mr-1 h-5 w-5 text-gray-700 hover:text-gray-800"  />
-      </div>
+      </a>
 
 
     </div>

content/documentation/doc-example.md

@@ -0,0 +1,26 @@
+---
+title: 'Doc Example 1'
+description: 'Documentation Example one'
+image: ''
+video: ''
+---
+
+## Header 2
+
+### Header 3
+
+[Google](https://google.com)
+
+![this is an image](/images/cleavr_logo.png)
+
+1. This 
+2. is
+3. an 
+4. ordered
+5. list
+
+- this 
+- is 
+- an 
+- unordered
+- list

layouts/default.vue

@@ -13,13 +13,22 @@
     <MainHeader @showMobileMenu="showMobileMenu = true" v-show="!showMobileMenu" />
     <div class="h-screen flex">
       <DesktopSidebar class="hidden md:flex" />
-      <Nuxt />
+      <Nuxt class="mt-24 px-6" />
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  transition: {
+    name: 'page',
+    mode: 'out-in'
+  },
+  watch: {
+    '$route' () {
+      this.showMobileMenu = false
+    }
+  },
   data () {
     return {
       showMobileMenu: false
@@ -29,5 +38,16 @@ export default {
 </script>
 
 <style>
+  .prose code {
+    color: orange;
+  }
+  .prose a {
+    color: #2563EB;
+    text-decoration: none;
+  }
 
+  .prose a:hover {
+    color: #3B82F6;
+    text-decoration: none;
+  }
 </style>

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "@nuxt/content": "^1.11.1",
     "core-js": "^3.6.5",
-    "nuxt": "^2.14.6"
+    "nuxt": "^2.14.6",
+    "@tailwindcss/typography": "^0.2.0"
   },
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^3.1.0"

pages/_doc.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h1 class="text-3xl font-semibold text-gray-9000 pb-8">
+      {{ doc.title }}
+    </h1>
+    <NuxtContent :document="doc" class="prose" />
+  </div>
+</template>
+
+<script>
+
+export default {
+  transition: {
+    name: 'page',
+    mode: 'out-in'
+  },
+  async asyncData( { $content, params } ) {
+    const doc = await $content('documentation', params.doc ).fetch()
+    return { doc }
+  }
+
+}
+</script>

static/images/cleavr_logo.png

@@ -0,0 +1,25 @@
+module.exports = {
+  purge: [],
+  darkMode: false,
+  theme: {
+    typography: {
+      default: {
+        css: {
+          'code::before': {
+            content: '""',
+          },
+          'code::after': {
+            content: '""',
+          },
+        },
+      },
+    },
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [
+    require(`@tailwindcss/typography`)
+  ]
+}

tailwind.config.js

@@ -1308,6 +1308,11 @@
     mustache "^2.3.0"
     stack-trace "0.0.10"
 
+"@tailwindcss/typography@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.2.0.tgz#b597c83502e3c3c6641a8aaabda223cd494ab349"
+  integrity sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg==
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"