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;
+}