clarity-theme 0.1.0 → 0.1.1

package/app/components/blog/BlogPanel.vue

@@ -1,45 +1,45 @@
-<script setup lang="ts">
-defineProps<{
-	hasAside?: boolean
-}>()
-
-const layoutStore = useLayoutStore()
-const { avoidTargets } = storeToRefs(layoutStore)
-
-const panelRef = useTemplateRef('blog-panel')
-const { transform } = useAvoidTransform(panelRef, avoidTargets)
-</script>
-
-<template>
-<div
-	id="blog-panel"
-	ref="blog-panel"
-	:class="{ 'has-active': layoutStore.state !== 'none' }"
-	:style="{ transform }"
->
-	<button
-		v-if="hasAside"
-		class="toggle-aside widescreen-only"
-		:class="{ active: layoutStore.state === 'aside' }"
-		aria-label="切换侧边栏"
-		@click="layoutStore.toggle('aside')"
-	>
-		<Icon class="rtl-flip" name="tabler:align-right" />
-	</button>
-
-	<Icon v-show="false" name="tabler:layout-sidebar-filled" />
-	<button
-		class="toggle-sidebar mobile-only"
-		:class="{ active: layoutStore.state === 'sidebar' }"
-		aria-label="切换菜单"
-		@click="layoutStore.toggle('sidebar')"
-	>
-		<Icon class="rtl-flip" :name="layoutStore.state === 'sidebar' ? 'tabler:layout-sidebar-filled' : 'tabler:layout-sidebar'" />
-	</button>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	hasAside?: boolean
+}>()
+
+const layoutStore = useLayoutStore()
+const { avoidTargets } = storeToRefs(layoutStore)
+
+const panelRef = useTemplateRef('blog-panel')
+const { transform } = useAvoidTransform(panelRef, avoidTargets)
+</script>
+
+<template>
+<div
+	id="blog-panel"
+	ref="blog-panel"
+	:class="{ 'has-active': layoutStore.state !== 'none' }"
+	:style="{ transform }"
+>
+	<button
+		v-if="hasAside"
+		class="toggle-aside widescreen-only"
+		:class="{ active: layoutStore.state === 'aside' }"
+		aria-label="切换侧边栏"
+		@click="layoutStore.toggle('aside')"
+	>
+		<Icon class="rtl-flip" name="tabler:align-right" />
+	</button>
+
+	<Icon v-show="false" name="tabler:layout-sidebar-filled" />
+	<button
+		class="toggle-sidebar mobile-only"
+		:class="{ active: layoutStore.state === 'sidebar' }"
+		aria-label="切换菜单"
+		@click="layoutStore.toggle('sidebar')"
+	>
+		<Icon class="rtl-flip" :name="layoutStore.state === 'sidebar' ? 'tabler:layout-sidebar-filled' : 'tabler:layout-sidebar'" />
+	</button>
+</div>
+</template>
+
+<style lang="scss" scoped>
 #blog-panel {
 	contain: paint;
 	position: fixed;
@@ -76,4 +76,4 @@ button {
 		color: var(--c-primary);
 	}
 }
-</style>
+</style>

package/app/components/blog/BlogSidebar.vue

@@ -1,55 +1,55 @@
-<script setup lang="ts">
-const clarity = useClarityConfig()
-const layoutStore = useLayoutStore()
-const searchStore = useSearchStore()
-
-const { text } = useTextSelection()
-const debouncedSelection = refDebounced(text)
-</script>
-
-<template>
-<BlogMask
-	:show="layoutStore.state === 'sidebar'"
-	class="mobile-only"
-	@click="layoutStore.close()"
-/>
-
-<!-- 不能用 Transition 实现弹出收起动画，因为半宽屏状态始终显示 -->
-<aside id="blog-sidebar" :class="{ show: layoutStore.state === 'sidebar' }">
-	<BlogHeader class="sidebar-header" to="/" />
-
-	<nav class="sidebar-nav scrollcheck-y">
-		<div class="search-btn sidebar-nav-item gradient-card" @click="layoutStore.toggle('search')">
-			<Icon name="tabler:search" />
-			<span class="nav-text">{{ debouncedSelection || searchStore.word || '搜索' }}</span>
-			<Key class="keycut" code="K" cmd prevent @press="layoutStore.toggle('search')" />
-		</div>
-
-		<template v-for="(group, groupIndex) in clarity.nav" :key="groupIndex">
-			<h3 v-if="group.title">
-				{{ group.title }}
-			</h3>
-
-			<menu>
-				<li v-for="(item, itemIndex) in group.items" :key="itemIndex">
-					<UtilLink :to="item.url" class="sidebar-nav-item">
-						<Icon :name="item.icon" />
-						<span class="nav-text">{{ item.text }}</span>
-						<Icon v-if="isExtLink(item.url)" class="external-tip" name="tabler:arrow-up-right" />
-					</UtilLink>
-				</li>
-			</menu>
-		</template>
-	</nav>
-
-	<footer class="sidebar-footer">
-		<BlogThemeToggle />
-		<ZIconNavList :list="clarity.footer.iconNav" />
-	</footer>
-</aside>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const clarity = useClarityConfig()
+const layoutStore = useLayoutStore()
+const searchStore = useSearchStore()
+
+const { text } = useTextSelection()
+const debouncedSelection = refDebounced(text)
+</script>
+
+<template>
+<BlogMask
+	:show="layoutStore.state === 'sidebar'"
+	class="mobile-only"
+	@click="layoutStore.close()"
+/>
+
+<!-- 不能用 Transition 实现弹出收起动画，因为半宽屏状态始终显示 -->
+<aside id="blog-sidebar" :class="{ show: layoutStore.state === 'sidebar' }">
+	<BlogHeader class="sidebar-header" to="/" />
+
+	<nav class="sidebar-nav scrollcheck-y">
+		<div class="search-btn sidebar-nav-item gradient-card" @click="layoutStore.toggle('search')">
+			<Icon name="tabler:search" />
+			<span class="nav-text">{{ debouncedSelection || searchStore.word || '搜索' }}</span>
+			<Key class="keycut" code="K" cmd prevent @press="layoutStore.toggle('search')" />
+		</div>
+
+		<template v-for="(group, groupIndex) in clarity.nav" :key="groupIndex">
+			<h3 v-if="group.title">
+				{{ group.title }}
+			</h3>
+
+			<menu>
+				<li v-for="(item, itemIndex) in group.items" :key="itemIndex">
+					<UtilLink :to="item.url" class="sidebar-nav-item">
+						<Icon :name="item.icon" />
+						<span class="nav-text">{{ item.text }}</span>
+						<Icon v-if="isExtLink(item.url)" class="external-tip" name="tabler:arrow-up-right" />
+					</UtilLink>
+				</li>
+			</menu>
+		</template>
+	</nav>
+
+	<footer class="sidebar-footer">
+		<BlogThemeToggle />
+		<ZIconNavList :list="clarity.footer.iconNav" />
+	</footer>
+</aside>
+</template>
+
+<style lang="scss" scoped>
 #blog-sidebar {
 	display: flex;
 	flex-direction: column;
@@ -157,4 +157,4 @@ const debouncedSelection = refDebounced(text)
 	text-align: center;
 	color: var(--c-text-2);
 }
-</style>
+</style>

package/app/components/blog/BlogWidget.vue

@@ -1,44 +1,44 @@
-<script setup lang="ts">
-defineProps<{
-	title?: string
-	card?: boolean
-	shrink?: boolean
-	grayscale?: boolean
-	dim?: boolean
-	bgImg?: string
-	bgAside?: boolean
-}>()
-
-const body = useTemplateRef('widget-body')
-
-defineExpose({ body })
-</script>
-
-<template>
-<section
-	class="blog-widget"
-	:class="{ shrink, grayscale, dim }"
->
-	<hgroup class="widget-header text-creative">
-		<slot name="title">
-			{{ title }}
-		</slot>
-		<span v-if="$slots.action" class="seperator" />
-		<slot name="action" />
-	</hgroup>
-
-	<div
-		ref="widget-body"
-		class="widget-body"
-		:class="{ 'widget-card': card, 'with-bg': bgImg, 'scrollcheck-y scrollbar-hidden': shrink }"
-	>
-		<NuxtImg v-if="bgImg" class="bg-img" :class="{ 'bg-right': bgAside }" :src="bgImg" alt="" />
-		<slot />
-	</div>
-</section>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	title?: string
+	card?: boolean
+	shrink?: boolean
+	grayscale?: boolean
+	dim?: boolean
+	bgImg?: string
+	bgAside?: boolean
+}>()
+
+const body = useTemplateRef('widget-body')
+
+defineExpose({ body })
+</script>
+
+<template>
+<section
+	class="blog-widget"
+	:class="{ shrink, grayscale, dim }"
+>
+	<hgroup class="widget-header text-creative">
+		<slot name="title">
+			{{ title }}
+		</slot>
+		<span v-if="$slots.action" class="seperator" />
+		<slot name="action" />
+	</hgroup>
+
+	<div
+		ref="widget-body"
+		class="widget-body"
+		:class="{ 'widget-card': card, 'with-bg': bgImg, 'scrollcheck-y scrollbar-hidden': shrink }"
+	>
+		<NuxtImg v-if="bgImg" class="bg-img" :class="{ 'bg-right': bgAside }" :src="bgImg" alt="" />
+		<slot />
+	</div>
+</section>
+</template>
+
+<style lang="scss" scoped>
 .blog-widget {
 	flex-shrink: 1;
 	font-size: 0.9em;
@@ -131,4 +131,4 @@ defineExpose({ body })
 		}
 	}
 }
-</style>
+</style>

package/app/components/blog/Mask.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-defineProps<{
-	blur?: boolean | string
-	zIndex?: number
-}>()
-
-const show = defineModel<boolean>('show')
-</script>
-
-<template>
-<Transition>
-	<div
-		v-if="show"
-		class="bg-mask"
-		:style="{
-			'--z-index-popover': zIndex,
-			'--bdfilter': blur ? `blur(${blur === true ? '4px' : blur})` : 'none',
-		}"
-		@click="show = false"
-	/>
-</Transition>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	blur?: boolean | string
+	zIndex?: number
+}>()
+
+const show = defineModel<boolean>('show')
+</script>
+
+<template>
+<Transition>
+	<div
+		v-if="show"
+		class="bg-mask"
+		:style="{
+			'--z-index-popover': zIndex,
+			'--bdfilter': blur ? `blur(${blur === true ? '4px' : blur})` : 'none',
+		}"
+		@click="show = false"
+	/>
+</Transition>
+</template>
+
+<style lang="scss" scoped>
 .bg-mask {
 	position: fixed;
 	inset: 0;
@@ -39,4 +39,4 @@ const show = defineModel<boolean>('show')
 .v-leave-active {
 	transition: all var(--delay);
 }
-</style>
+</style>

package/app/components/blog/SkipToContent.vue

@@ -1,11 +1,11 @@
-<template>
-<!-- 若使用 NuxtLink 则键盘焦点不会切换 -->
-<a href="#main-content" class="skip-link gradient-card active">
-	跳转到主要内容 / Skip to content
-</a>
-</template>
-
-<style lang="scss" scoped>
+<template>
+<!-- 若使用 NuxtLink 则键盘焦点不会切换 -->
+<a href="#main-content" class="skip-link gradient-card active">
+	跳转到主要内容 / Skip to content
+</a>
+</template>
+
+<style lang="scss" scoped>
 .skip-link {
 	position: fixed;
 	top: -100%;
@@ -19,4 +19,4 @@
 .skip-link:focus {
 	top: auto;
 }
-</style>
+</style>

package/app/components/blog/ThemeToggle.vue

@@ -1,24 +1,24 @@
-<script setup lang="ts">
-const clarity = useClarityConfig()
-const colorMode = useColorMode()
-</script>
-
-<template>
-<div class="theme-toggle">
-	<button
-		v-for="(themeData, themeName) in clarity.themes"
-		:key="themeName"
-		v-tip="themeData.tip"
-		:aria-label="themeData.tip"
-		:class="{ active: colorMode.preference === themeName }"
-		@click="colorMode.preference = themeName"
-	>
-		<Icon :name="themeData.icon" />
-	</button>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const clarity = useClarityConfig()
+const colorMode = useColorMode()
+</script>
+
+<template>
+<div class="theme-toggle">
+	<button
+		v-for="(themeData, themeName) in clarity.themes"
+		:key="themeName"
+		v-tip="themeData.tip"
+		:aria-label="themeData.tip"
+		:class="{ active: colorMode.preference === themeName }"
+		@click="colorMode.preference = themeName"
+	>
+		<Icon :name="themeData.icon" />
+	</button>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .theme-toggle {
 	display: flex;
 	gap: 3px;
@@ -47,4 +47,4 @@ const colorMode = useColorMode()
 		}
 	}
 }
-</style>
+</style>

package/app/components/content/Badge.vue

@@ -1,47 +1,47 @@
-<script setup lang="ts">
-// 即使 boolean 可选，其值也不会是 undefined
-const props = defineProps<{
-	img?: string
-	text?: string
-	link?: string
-	round?: boolean
-	square?: boolean
-}>()
-
-const img = computed(() => {
-	if (props.img)
-		return props.img
-	const ghUsername = getGithubUsername(props.link)
-	if (ghUsername)
-		return getGithubAvatar(ghUsername)
-	if (props.link && isExtLink(props.link))
-		return getFavicon(getDomain(props.link))
-	return ''
-})
-
-// 有图时默认为圆形样式，除非指定为方形
-// 无图时默认为方形样式，除非指定为圆形
-const round = computed(() => img.value ? !props.square : props.round)
-
-const tip = computed(() => {
-	if (!props.link)
-		return ''
-	if (isExtLink(props.link))
-		return getDomain(props.link)
-	return safelyDecodeUriComponent(props.link)
-})
-</script>
-
-<template>
-<UtilLink v-tip="tip" class="badge" :class="{ round }" :to="link">
-	<NuxtImg v-if="img" class="badge-icon" :src="img" alt="" densities="1x" />
-	<span class="badge-text">
-		<slot>{{ text }}</slot>
-	</span>
-</UtilLink>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+// 即使 boolean 可选，其值也不会是 undefined
+const props = defineProps<{
+	img?: string
+	text?: string
+	link?: string
+	round?: boolean
+	square?: boolean
+}>()
+
+const img = computed(() => {
+	if (props.img)
+		return props.img
+	const ghUsername = getGithubUsername(props.link)
+	if (ghUsername)
+		return getGithubAvatar(ghUsername)
+	if (props.link && isExtLink(props.link))
+		return getFavicon(getDomain(props.link))
+	return ''
+})
+
+// 有图时默认为圆形样式，除非指定为方形
+// 无图时默认为方形样式，除非指定为圆形
+const round = computed(() => img.value ? !props.square : props.round)
+
+const tip = computed(() => {
+	if (!props.link)
+		return ''
+	if (isExtLink(props.link))
+		return getDomain(props.link)
+	return safelyDecodeUriComponent(props.link)
+})
+</script>
+
+<template>
+<UtilLink v-tip="tip" class="badge" :class="{ round }" :to="link">
+	<NuxtImg v-if="img" class="badge-icon" :src="img" alt="" densities="1x" />
+	<span class="badge-text">
+		<slot>{{ text }}</slot>
+	</span>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
 // 对齐到基线，同时保持图片垂直居中
 .badge {
 	display: inline-flex;
@@ -87,4 +87,4 @@ const tip = computed(() => {
 		display: none;
 	}
 }
-</style>
+</style>

package/app/components/content/Blur.vue

@@ -1,16 +1,16 @@
-<script setup lang="ts">
-defineProps<{
-	text?: string
-}>()
-</script>
-
-<template>
-<span class="blur">
-	<slot>{{ text }}</slot>
-</span>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	text?: string
+}>()
+</script>
+
+<template>
+<span class="blur">
+	<slot>{{ text }}</slot>
+</span>
+</template>
+
+<style lang="scss" scoped>
 .blur {
 	transition: filter 0.2s;
 	filter: blur(4px);
@@ -19,4 +19,4 @@ defineProps<{
 		filter: blur(0);
 	}
 }
-</style>
+</style>

package/app/components/content/CardList.vue

@@ -1,10 +1,10 @@
-<template>
-<div class="card-list">
-	<slot />
-</div>
-</template>
-
-<style lang="scss" scoped>
+<template>
+<div class="card-list">
+	<slot />
+</div>
+</template>
+
+<style lang="scss" scoped>
 :deep() {
 	:where(ol, ul):not([class]) {
 		margin: 0;
@@ -29,4 +29,4 @@
 		}
 	}
 }
-</style>
+</style>