chore: improve docs

docs/.vitepress/config.ts

@@ -3,9 +3,27 @@ import { defineConfig } from 'vitepress'
 export default defineConfig({
   title: 'Local Tunnels',
   description: 'A better developer environment.',
+
+  lastUpdated: true,
   cleanUrls: true,
+  metaChunk: true,
+
+  head: [
+    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo-mini.svg' }],
+    ['link', { rel: 'icon', type: 'image/png', href: '/logo-mini.png' }],
+    ['meta', { name: 'theme-color', content: '#5f67ee' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:locale', content: 'en' }],
+    ['meta', { property: 'og:title', content: 'Local Tunnels | Vite & Vue Powered Static Site Generator' }],
+    ['meta', { property: 'og:site_name', content: 'Stacks' }],
+    ['meta', { property: 'og:image', content: 'https://vitepress.dev/vitepress-og.jpg' }],
+    ['meta', { property: 'og:url', content: 'https://vitepress.dev/' }],
+    // ['script', { 'src': 'https://cdn.usefathom.com/script.js', 'data-site': '', 'data-spa': 'auto', 'defer': '' }],
+  ],
+
   themeConfig: {
-    // https://vitepress.dev/reference/default-theme-config
+    logo: { src: '/logo-mini.svg', width: 24, height: 24 },
+
     nav: [
       { text: 'Docs', link: '/intro' },
       { text: 'Install', link: '/install' },

docs/.vitepress/theme/index.ts

@@ -2,7 +2,6 @@ import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 // https://vitepress.dev/guide/custom-theme
 import { h } from 'vue'
-import './docs.css'
 
 // import TwoSlashFloatingVue from 'vitepress-plugin-twoslash/client'
 

docs/index.md

@@ -6,6 +6,9 @@ hero:
   name: "localtunnels"
   text: "For a better local environment."
   tagline: "Easily expose your local server to the world."
+  image:
+    src: /logo.png
+    alt: Stacks Local Tunnels
   actions:
     - theme: brand
       text: Documentation
@@ -28,3 +31,28 @@ features:
     icon: "🛠"
     details: "Use the CLI or the library in your own project."
 ---
+
+<style>
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #0a0abc,
+    #24a0ff
+  );
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #0a0abc 50%, #24a0ff 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+</style>