feat: markdown suport

src/components/Footer.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="text-xl mt-6">
+    <router-link class="icon-btn mx-2" to="/">
+      <Icon icon="carbon:campsite" class="inline-block" />
+    </router-link>
+
     <div class="icon-btn mx-2" @click="isDark = !isDark">
       <Icon :icon="isDark ? 'carbon:moon' : 'carbon:sun'" class="inline-block" />
     </div>
@@ -8,8 +12,12 @@
       <Icon icon="carbon:language" class="inline-block" />
     </div>
 
+    <router-link class="icon-btn mx-2" to="/about">
+      <Icon icon="carbon:dicom-overlay" class="inline-block" />
+    </router-link>
+
     <a class="icon-btn mx-2" href="https://github.com/antfu/vitesse" target="_blank">
-      <Icon icon="carbon:code" class="inline-block" />
+      <Icon icon="carbon:logo-github" class="inline-block" />
     </a>
   </div>
 </template>

src/components/README.md

@@ -1,6 +1,6 @@
 ## Components
 
-Components in this dir will be auto registered on-demand, powered by [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components).
+Components in this dir will be auto-registered and on-demand, powered by [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components).
 
 
 ### `Icon.vue`

src/main.postcss

@@ -15,6 +15,23 @@ html.dark {
   background: #222;
 }
 
+.markdown-body {
+  max-width: 300px;
+  @apply m-auto text-left;
+
+  h3 {
+    @apply text-center;
+  }
+
+  a {
+    @apply opacity-50 hover:opacity-100 hover:text-teal-600;
+  }
+
+  p {
+    @apply my-4;
+  }
+}
+
 .btn {
   @apply
     px-4 py-1 rounded inline-block
@@ -27,5 +44,5 @@ html.dark {
   @apply
     inline-block cursor-pointer select-none
     opacity-75 transition duration-200 ease-in-out
-    hover:opacity-100;
+    hover:opacity-100 hover:text-teal-600;
 }

src/pages/README.md

@@ -1,6 +1,6 @@
-## File Based Routing
+## File-based Routing
 
-Routes will auto generated for Vue files in this dir with the same file structure. 
+Routes will auto-generated for Vue files in this dir with the same file structure.
 Check out [`vite-plugin-voie`](https://github.com/vamplate/vite-plugin-voie) for more details.
 
 ### Path Aliasing

src/pages/about.md

@@ -0,0 +1,11 @@
+<div class="text-4xl text-center">
+  <!-- You can use Vue components inside markdown -->
+  <Icon class="iconify inline-block" icon="carbon:dicom-overlay" />
+</div>
+
+### About
+
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. It has file-based routing, components auto importing, markdown support, i18n, PWA and uses Tailwind v2 for UI.
+
+
+Check out the [GitHub repo](https://github.com/antfu/vitesse) for more details.