aria/FMHY-Website
1
0
Fork 0
mirror of https://github.com/fmhy/edit.git synced 2025-07-31 08:12:23 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

init

Browse source
This commit is contained in:
taskylizard 2025-06-25 21:55:54 +00:00
parent 24a1fb0c6e
commit 7bd4a70aca
No known key found for this signature in database
GPG key ID: 1820131ED1A24120
7 changed files with 92 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

23
docs/.vitepress/theme/Layout.vue
View file

@ -1,10 +1,28 @@
<script setup lang="ts">
import { BProgress } from '@bprogress/core'
import DefaultTheme from 'vitepress/theme'
import Announcement from './components/Announcement.vue'
import Sidebar from './components/SidebarCard.vue'
import '@bprogress/core/css'
const { isDark } = useData()
const router = useRouter()
BProgress.configure({
showSpinner: false,
easing: 'ease'
})
router.onBeforeRouteChange = () => {
BProgress.start()
}
router.onAfterRouteChange = () => {
BProgress.done()
}
const enableTransitions = () =>
'startViewTransition' in document &&
window.matchMedia('(prefers-reduced-motion: no-preference)').matches
@ -23,7 +41,6 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
)}px at ${x}px ${y}px)`
]
// @ts-expect-error
await document.startViewTransition(async () => {
isDark.value = !isDark.value
await nextTick()
@ -61,6 +78,10 @@ const { Layout } = DefaultTheme
</template>
<style>
:root {
--bprogress-color: var(--vp-c-brand);
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;

68
docs/.vitepress/theme/components/ColorPicker.vue
View file

@ -1,6 +1,17 @@
<script setup lang="ts">
import { colors } from '@fmhy/colors'
import { useStorage, useStyleTag } from '@vueuse/core'
import {
SelectContent,
SelectItem,
SelectItemIndicator,
SelectItemText,
SelectPortal,
SelectRoot,
SelectTrigger,
SelectValue,
SelectViewport
} from 'reka-ui'
import { watch } from 'vue'
const colorScales = [
@ -22,7 +33,7 @@ const selectedColor = useStorage<ColorNames>('preferred-color', 'swarm')
const colorOptions = Object.keys(colors).filter(
(key) => typeof colors[key as keyof typeof colors] === 'object'
) as Array<ColorNames>
)
const { css } = useStyleTag('', { id: 'brand-color' })
@ -60,29 +71,44 @@ watch(selectedColor, updateThemeColor)
const normalizeColorName = (colorName: string) =>
colorName.replaceAll(/-/g, ' ').charAt(0).toUpperCase() +
colorName.slice(1).replaceAll(/-/g, ' ')
const handleColorChange = (value: string) => {
selectedColor.value = value as ColorNames
}
</script>
<template>
<div>
<div class="flex flex-wrap gap-2">
<div v-for="color in colorOptions" :key="color">
<button
:class="[
'inline-block w-6 h-6 rounded-full transition-all duration-200'
]"
@click="selectedColor = color"
:title="normalizeColorName(color)"
>
<span
class="inline-block w-6 h-6 rounded-full"
:style="{ backgroundColor: colors[color][500] }"
/>
</button>
</div>
</div>
<div class="color-picker">
<SelectRoot :model-value="selectedColor" @update:model-value="handleColorChange">
<SelectTrigger
class="inline-flex items-center justify-between px-3 py-2 text-sm bg-bg-alt border border-div rounded-md hover:bg-bg-elv transition-colors min-w-[180px] mx-auto align-left"
aria-label="Select theme color">
<div class="flex items-center gap-2">
<span class="inline-block w-4 h-4 rounded-full border border-div"
:style="{ backgroundColor: colors[selectedColor][500] }" />
<SelectValue :placeholder="normalizeColorName(selectedColor)" />
</div>
<span class="i-lucide:chevron-down w-4 h-4 text-text-2" />
</SelectTrigger>
<div class="mt-2 text-sm text-$vp-c-text-2">
Selected: {{ normalizeColorName(selectedColor) }}
</div>
<SelectPortal>
<SelectContent class="bg-bg-elv border border-div rounded-md shadow-lg z-50 max-h-60 overflow-hidden z-9999"
:side-offset="4">
<SelectViewport class="p-1">
<SelectItem v-for="color in colorOptions" :key="color" :value="color"
class="relative flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-bg-alt rounded-sm outline-none data-[highlighted]:bg-bg-alt data-[state=checked]:bg-bg-alt data-[state=checked]:text-text">
<span class="inline-block w-4 h-4 rounded-full border border-div"
:style="{ backgroundColor: colors[color][500] }" />
<SelectItemText>
{{ normalizeColorName(color) }}
</SelectItemText>
<SelectItemIndicator class="absolute right-2">
<span class="i-lucide:check w-4 h-4 text-text-2" />
</SelectItemIndicator>
</SelectItem>
</SelectViewport>
</SelectContent>
</SelectPortal>
</SelectRoot>
</div>
</template>

3
docs/.vitepress/theme/components/SidebarCard.vue
View file

@ -7,8 +7,7 @@ import ToggleStarred from './ToggleStarred.vue'
<template>
<div
class="bg-$vp-c-bg hover:bg-$vp-c-bg/40 border-$vp-c-default-soft hover:border-primary transition-border relative z-0 rounded-lg border-2 border-solid p-5 duration-500"
>
class="bg-$vp-c-bg border-$vp-c-default-soft hover:border-primary transition-border relative z-0 rounded-lg border-2 border-solid p-5 duration-500">
<div class="align-center mb-4 flex justify-between">
<div class="text-$vp-c-text-1 lh-relaxed text-sm font-bold">
Emoji Legend

2
docs/.vitepress/theme/index.ts
View file

@ -17,7 +17,6 @@
import type { Theme } from 'vitepress'
import Components from '@fmhy/components'
import DefaultTheme from 'vitepress/theme'
import { loadProgress } from './composables/nprogress'
import Layout from './Layout.vue'
import Post from './PostLayout.vue'
@ -33,6 +32,5 @@ export default {
app.use(Components)
app.component('Post', Post)
app.component('Feedback', Feedback)
loadProgress(router)
}
} satisfies Theme

108
docs/.vitepress/theme/style.scss
View file

@ -20,8 +20,12 @@
--vp-button-alt-hover-bg: #484848;
--vp-button-alt-hover-text: #f0eeee;
--vp-c-bg-elv: rgba(255, 255, 255, 0.7);
--vp-c-bg-mark: rgb(232, 232, 232);
/* Colors: Background */
--vp-c-bg: #ffffff;
--vp-c-bg-alt: #f6f6f7;
--vp-c-bg-elv: #ffffff;
--vp-c-bg-soft: #f6f6f7;
/* Colors: Custom Block */
/** Info */
@ -54,9 +58,10 @@
--vp-c-brand-soft: theme('colors.swarm.300');
/* Colors: Background */
--vp-c-bg: rgb(26, 26, 26);
--vp-c-bg-alt: rgb(23, 23, 23);
--vp-c-bg-elv: rgba(23, 23, 23, 0.8);
--vp-c-bg: #1a1a1a;
--vp-c-bg-alt: #151515;
--vp-c-bg-elv: #1f1f1f;
--vp-c-bg-soft: #1f1f1f;
/* Colors: Custom Block */
/** Info */
@ -103,11 +108,12 @@
text-decoration-style: solid;
}
::selection {
background-color: #5586a6;
background-color: var(--vp-c-brand-400, #5586a6);
.dark & {
background-color: #0f2c47;
background-color: var(--vp-c-brand-800, #0f2c47);
}
}
@ -164,94 +170,6 @@
}
}
.base64 {
min-width: 100%;
width: 0px;
white-space: pre-wrap;
}
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
& .bar {
background: var(--vp-c-brand-1);
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
& .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow:
0 0 10px var(--vp-c-brand-1),
0 0 5px var(--vp-c-brand-1);
opacity: 1;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
& .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
& .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: var(--vp-c-brand);
border-left-color: var(--vp-c-brand);
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#VPContent strong > a {
font-weight: bold;

1
package.json
View file

@ -20,6 +20,7 @@
"og:dev": "x-satori -t ./docs/.vitepress/hooks/Template.vue -c ./.vitepress/hooks/satoriConfig.ts --dev"
},
"dependencies": {
"@bprogress/core": "^1.3.4",
"@fmhy/colors": "^0.0.11",
"@fmhy/components": "^0.0.3",
"@headlessui/vue": "^1.7.23",

8
pnpm-lock.yaml generated
View file

@ -8,6 +8,9 @@ importers:
.:
dependencies:
'@bprogress/core':
specifier: ^1.3.4
version: 1.3.4
'@fmhy/colors':
specifier: ^0.0.11
version: 0.0.11
@ -343,6 +346,9 @@ packages:
resolution: {integrity: sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==}
engines: {node: '>=6.9.0'}
'@bprogress/core@1.3.4':
resolution: {integrity: sha512-q/AqpurI/1uJzOrQROuZWixn/+ARekh+uvJGwLCP6HQ/EqAX4SkvNf618tSBxL4NysC0MwqAppb/mRw6Tzi61w==}
'@cloudflare/kv-asset-handler@0.3.4':
resolution: {integrity: sha512-YLPHc8yASwjNkmcDMQMY35yiWjoKAKnhUbPRszBRS0YgH+IXtsMp61j+yTcnCE3oO2DgP0U3iejLC8FTtKDC8Q==}
engines: {node: '>=16.13'}
@ -4430,6 +4436,8 @@ snapshots:
'@babel/helper-string-parser': 7.25.9
'@babel/helper-validator-identifier': 7.25.9
'@bprogress/core@1.3.4': {}
'@cloudflare/kv-asset-handler@0.3.4':
dependencies:
mime: 3.0.0