mirror of
https://github.com/fmhy/edit.git
synced 2025-08-01 00:32:30 +10:00
init
This commit is contained in:
taskylizard
parent
24a1fb0c6e
commit
7bd4a70aca
7 changed files with 92 additions and 121 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue