Emoji Legend

.vitepress/theme/components/InputField.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  id: string;
+}>();
+</script>
+
+<template>
+  <div class="input-field">
+    <div class="input-label" v-if="label">
+      <label :for="id" class="pane-label">
+        {{ label }}
+      </label>
+      <div class="display-value">
+        <slot name="display" />
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.pane-label {
+  line-height: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vt-c-text-1);
+  display: block;
+}
+
+.input-field:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+.display-value {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.input-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  gap: 12px;
+}
+</style>

.vitepress/theme/components/PaneFields.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string;
+}>();
+</script>
+
+<template>
+  <div class="field-body">
+    <div class="field-icon" :class="icon" />
+    <div class="value">
+      •
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.field-body {
+  color: var(--vt-c-text-1);
+  display: block;
+}
+
+.value {
+  color: var(--vp-c-text-2);
+}
+
+.field-body {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  gap: 12px;
+}
+</style>

.vitepress/theme/components/SidebarPane.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Field from "./PaneFields.vue";
+</script>
+
+<template>
+  <div class="sidebar-pane">
+    <div class="pane-header">
+      <div class="pane-title">Emoji Legend</div>
+    </div>
+    <Field icon="i-twemoji-star">Community Recommendations</Field>
+    <Field icon="i-twemoji-globe-with-meridians">3rd Party Indexes</Field>
+    <Field icon="i-twemoji-repeat-button">Storage Page Links</Field>
+  </div>
+</template>
+
+<style scoped>
+.pane-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.pane-title {
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  line-height: 32px;
+  font-size: 16px;
+}
+
+.sidebar-pane {
+  background: var(--vp-c-bg);
+  padding: 12px 24px 24px;
+  border-radius: 12px;
+  margin-bottom: 24px;
+  position: relative;
+  z-index: 0;
+  border: 1px solid transparent;
+  transition: border-color 0.4s ease-in-out;
+}
+
+.sidebar-pane:hover {
+  border-color: var(--vp-c-brand-1);
+}
+</style>

.vitepress/theme/index.ts

@@ -1,18 +1,17 @@
 import { h } from "vue";
-import  {type Theme, inBrowser } from "vitepress";
+import { type Theme, inBrowser } from "vitepress";
 import DefaultTheme from "vitepress/theme";
+import Sidebar from "./layouts/Sidebar.vue";
 import "./style.css";
 import "uno.css";
 
-if (inBrowser)
-  import('./pwa')
-
+if (inBrowser) import("./pwa");
 
 export default {
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
+      "sidebar-nav-after": () => h(Sidebar),
     });
   },
-  enhanceApp({ app, router, siteData }) {
-  },
+  enhanceApp({ app, router, siteData }) { },
 } satisfies Theme;

.vitepress/theme/layouts/Sidebar.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import SidebarPane from "../components/SidebarPane.vue"
+</script>
+
+<template>
+  <div>
+    <SidebarPane/>
+  </div>
+</template>

.vitepress/vue-shim.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}

package.json

@@ -8,6 +8,7 @@
     "format": "prettier -w ."
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.16",
     "fast-glob": "^3.3.1",
     "pathe": "^1.1.1",
     "unocss": "^0.57.1",

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@headlessui/vue':
+    specifier: ^1.7.16
+    version: 1.7.16(vue@3.3.7)
   fast-glob:
     specifier: ^3.3.1
     version: 3.3.1
@@ -1576,6 +1579,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@headlessui/vue@1.7.16(vue@3.3.7):
+    resolution: {integrity: sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.3.7
+    dev: false
+
   /@iconify-json/carbon@1.1.21:
     resolution: {integrity: sha512-bK2cMVM4noBU+FGlay433flpXLRzQu0ED095iAnoO6ka3yb4uz0lvb8acpN5gthyGLJ89C4HpfIbQZLQnMKQww==}
     dependencies:

tsconfig.json

@@ -15,6 +15,6 @@
     "forceConsistentCasingInFileNames": true,
     "types": ["vite/client", "vite-plugin-pwa/vanillajs", "vitepress"]
   },
-  "include": ["./*.ts", "./.vitepress/**/*.ts"],
+  "include": ["./*.ts", "./.vitepress/**/*.ts", "./.vitepress/vue-shim.d.ts"],
   "exclude": ["dist", "node_modules"]
 }