docs: customize VitePress theme with unique branding

README.md

@@ -1,17 +1,32 @@
 <div align="center">
-<h1><a href="https://mise.jdx.dev">
-  <img src="https://github.com/jdx/mise/assets/216188/27a8ea18-9383-4d86-a445-305b9a6248c1" alt="mise-logo" width="400" /><br />
-  mise-en-place
-</a></h1>
-<!-- <a href="https://mise.jdx.dev"><picture> -->
-<!--   <source media="(prefers-color-scheme: dark)" width="617" srcset="./docs/logo-dark@2x.png"> -->
-<!--   <img alt="mise logo" width="617" src="./docs/logo-light@2x.png"> -->
-<!-- </picture></a> -->
-<a href="https://crates.io/crates/mise"><img alt="Crates.io" src="https://img.shields.io/crates/v/mise?style=for-the-badge"></a>
-<a href="https://github.com/jdx/mise/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/jdx/mise?color=%2344CC11&style=for-the-badge"></a>
-<a href="https://github.com/jdx/mise/actions/workflows/test.yml"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/jdx/mise/test.yml?style=for-the-badge"></a>
-<a href="https://discord.gg/mABnUDvP57"><img alt="Discord" src="https://img.shields.io/discord/1066429325269794907?color=%23738ADB&style=for-the-badge"></a>
-<p><em>The front-end to your dev env.</em></p>
+
+<h1 align="center">
+  <a href="https://mise.jdx.dev">
+    <img src="docs/public/logo.svg" alt="mise" width="256" height="256" />
+    <br>
+    mise-en-place
+  </a>
+</h1>
+
+<p>
+  <a href="https://crates.io/crates/mise"><img alt="Crates.io" src="https://img.shields.io/crates/v/mise?style=for-the-badge&color=00d9ff"></a>
+  <a href="https://github.com/jdx/mise/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/jdx/mise?style=for-the-badge&color=52e892"></a>
+  <a href="https://github.com/jdx/mise/actions/workflows/test.yml"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/jdx/mise/test.yml?style=for-the-badge&color=ff9100"></a>
+  <a href="https://discord.gg/mABnUDvP57"><img alt="Discord" src="https://img.shields.io/discord/1066429325269794907?style=for-the-badge&color=00d9ff"></a>
+</p>
+
+<p><b>The front-end to your dev env</b></p>
+
+<p align="center">
+  <a href="https://mise.jdx.dev/getting-started.html">Getting Started</a> •
+  <a href="https://mise.jdx.dev">Documentation</a> •
+  <a href="https://mise.jdx.dev/dev-tools/">Dev Tools</a> •
+  <a href="https://mise.jdx.dev/environments/">Environments</a> •
+  <a href="https://mise.jdx.dev/tasks/">Tasks</a>
+</p>
+
+<hr />
+
 </div>
 
 ## What is it?

docs/.vitepress/config.ts

@@ -21,6 +21,7 @@ export default withMermaid(
     },
     themeConfig: {
       // https://vitepress.dev/reference/default-theme-config
+      logo: "/logo.svg",
       outline: "deep",
       nav: [
         { text: "Dev Tools", link: "/dev-tools/" },
@@ -245,6 +246,33 @@ export default withMermaid(
       ],
     },
     head: [
+      // Favicon
+      ["link", { rel: "icon", href: "/logo.svg", type: "image/svg+xml" }],
+      ["link", { rel: "apple-touch-icon", href: "/logo.svg" }],
+      // Google Fonts
+      [
+        "link",
+        {
+          rel: "preconnect",
+          href: "https://fonts.googleapis.com",
+        },
+      ],
+      [
+        "link",
+        {
+          rel: "preconnect",
+          href: "https://fonts.gstatic.com",
+          crossorigin: "",
+        },
+      ],
+      [
+        "link",
+        {
+          href: "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap",
+          rel: "stylesheet",
+        },
+      ],
+      // Analytics
       [
         "script",
         {