Emoji Legend
This commit is contained in:
parent
7757817636
commit
a1ff4fd79f
47
.vitepress/theme/components/InputField.vue
Normal file
47
.vitepress/theme/components/InputField.vue
Normal file
@ -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>
|
34
.vitepress/theme/components/PaneFields.vue
Normal file
34
.vitepress/theme/components/PaneFields.vue
Normal file
@ -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>
|
45
.vitepress/theme/components/SidebarPane.vue
Normal file
45
.vitepress/theme/components/SidebarPane.vue
Normal file
@ -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>
|
@ -1,18 +1,17 @@
|
|||||||
import { h } from "vue";
|
import { h } from "vue";
|
||||||
import {type Theme, inBrowser } from "vitepress";
|
import { type Theme, inBrowser } from "vitepress";
|
||||||
import DefaultTheme from "vitepress/theme";
|
import DefaultTheme from "vitepress/theme";
|
||||||
|
import Sidebar from "./layouts/Sidebar.vue";
|
||||||
import "./style.css";
|
import "./style.css";
|
||||||
import "uno.css";
|
import "uno.css";
|
||||||
|
|
||||||
if (inBrowser)
|
if (inBrowser) import("./pwa");
|
||||||
import('./pwa')
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
Layout: () => {
|
Layout: () => {
|
||||||
return h(DefaultTheme.Layout, null, {
|
return h(DefaultTheme.Layout, null, {
|
||||||
|
"sidebar-nav-after": () => h(Sidebar),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
enhanceApp({ app, router, siteData }) {
|
enhanceApp({ app, router, siteData }) { },
|
||||||
},
|
|
||||||
} satisfies Theme;
|
} satisfies Theme;
|
||||||
|
9
.vitepress/theme/layouts/Sidebar.vue
Normal file
9
.vitepress/theme/layouts/Sidebar.vue
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import SidebarPane from "../components/SidebarPane.vue"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<SidebarPane/>
|
||||||
|
</div>
|
||||||
|
</template>
|
4
.vitepress/vue-shim.d.ts
vendored
Normal file
4
.vitepress/vue-shim.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
declare module '*.vue' {
|
||||||
|
import Vue from 'vue';
|
||||||
|
export default Vue;
|
||||||
|
}
|
@ -8,6 +8,7 @@
|
|||||||
"format": "prettier -w ."
|
"format": "prettier -w ."
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@headlessui/vue": "^1.7.16",
|
||||||
"fast-glob": "^3.3.1",
|
"fast-glob": "^3.3.1",
|
||||||
"pathe": "^1.1.1",
|
"pathe": "^1.1.1",
|
||||||
"unocss": "^0.57.1",
|
"unocss": "^0.57.1",
|
||||||
|
12
pnpm-lock.yaml
generated
12
pnpm-lock.yaml
generated
@ -5,6 +5,9 @@ settings:
|
|||||||
excludeLinksFromLockfile: false
|
excludeLinksFromLockfile: false
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@headlessui/vue':
|
||||||
|
specifier: ^1.7.16
|
||||||
|
version: 1.7.16(vue@3.3.7)
|
||||||
fast-glob:
|
fast-glob:
|
||||||
specifier: ^3.3.1
|
specifier: ^3.3.1
|
||||||
version: 3.3.1
|
version: 3.3.1
|
||||||
@ -1576,6 +1579,15 @@ packages:
|
|||||||
requiresBuild: true
|
requiresBuild: true
|
||||||
optional: 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:
|
/@iconify-json/carbon@1.1.21:
|
||||||
resolution: {integrity: sha512-bK2cMVM4noBU+FGlay433flpXLRzQu0ED095iAnoO6ka3yb4uz0lvb8acpN5gthyGLJ89C4HpfIbQZLQnMKQww==}
|
resolution: {integrity: sha512-bK2cMVM4noBU+FGlay433flpXLRzQu0ED095iAnoO6ka3yb4uz0lvb8acpN5gthyGLJ89C4HpfIbQZLQnMKQww==}
|
||||||
dependencies:
|
dependencies:
|
||||||
|
@ -15,6 +15,6 @@
|
|||||||
"forceConsistentCasingInFileNames": true,
|
"forceConsistentCasingInFileNames": true,
|
||||||
"types": ["vite/client", "vite-plugin-pwa/vanillajs", "vitepress"]
|
"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"]
|
"exclude": ["dist", "node_modules"]
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user