style: format with new style

This commit is contained in:
taskylizard
2024-01-25 16:32:45 +00:00
parent bc3bbaafeb
commit ef422dcda8
43 changed files with 686 additions and 583 deletions

View File

@@ -1,47 +1,47 @@
<script setup lang="ts">
import DefaultTheme from "vitepress/theme";
import { useData } from "vitepress";
import { nextTick, provide } from "vue";
import Sidebar from "./components/SidebarCard.vue";
import Announcement from "./components/Announcement.vue";
import DefaultTheme from 'vitepress/theme'
import { useData } from 'vitepress'
import { nextTick, provide } from 'vue'
import Sidebar from './components/SidebarCard.vue'
import Announcement from './components/Announcement.vue'
const { isDark } = useData();
const { isDark } = useData()
const enableTransitions = () =>
"startViewTransition" in document &&
window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
'startViewTransition' in document &&
window.matchMedia('(prefers-reduced-motion: no-preference)').matches
provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
if (!enableTransitions()) {
isDark.value = !isDark.value;
return;
isDark.value = !isDark.value
return
}
const clipPath = [
`circle(0px at ${x}px ${y}px)`,
`circle(${Math.hypot(
Math.max(x, innerWidth - x),
Math.max(y, innerHeight - y),
)}px at ${x}px ${y}px)`,
];
Math.max(y, innerHeight - y)
)}px at ${x}px ${y}px)`
]
// @ts-expect-error
await document.startViewTransition(async () => {
isDark.value = !isDark.value;
await nextTick();
}).ready;
isDark.value = !isDark.value
await nextTick()
}).ready
document.documentElement.animate(
{ clipPath: isDark.value ? clipPath.reverse() : clipPath },
{
duration: 300,
easing: "ease-in",
pseudoElement: `::view-transition-${isDark.value ? "old" : "new"}(root)`,
},
);
});
easing: 'ease-in',
pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
}
)
})
const { Layout } = DefaultTheme;
const { Layout } = DefaultTheme
</script>
<template>