RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Rhen Cloud
2025-12-29 00:15:20 +08:00
parent ff9b8d6a87
commit a95f624fa2
24 changed files with 405 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/app.vue
View File

@@ -29,6 +29,7 @@ const bgStyle = computed(() =>
<!-- <link
rel="stylesheet"
href="https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Regular/result.css" /> -->
<meta name="color-scheme" content="light dark" />
<div class="relative">
<div
v-if="currentBg"

108
app/assets/css/main.css
View File

@@ -1,24 +1,114 @@
@import url("https://cdn.jsdelivr.net/npm/@chinese-fonts/maple-mono-cn@2.0.0/dist/MapleMono-CN-Regular/result.css");
@import url("https://fontsapi.zeoseven.com/521/main/result.css");
/* @import url("https://fontsapi.zeoseven.com/292/main/result.css"); */
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
/* @import "@chinese-fonts/maple-mono-cn/dist/MapleMono-CN-Regular/results.css"; */
@custom-variant dark (&:where(.dark, .dark *));
/* @import "tailwindcss/preflight";
@tailwind utilities; */
/* @import url("https://fonts.rhen.cloud/maplemono-cn-regular/result.css"); */
/* @import url("https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Regular/result.css"); */
/* @import "tailwindcss/preflight"; */
/* @imoprt "utilities"; */
/* @import url("https://fontsapi.zeoseven.com/292/main/result.css"); */
/* @theme {
--font-roboto: "LXGW WenKai", sans-serif;
}
body {
font-familt: var(--font-roboto);
} */
/* @theme {
--font-roboto: "Maple Mono CN", sans-serif;
@theme {
--font-roboto: "JetBrains Maple Mono", sans-serif;
--font-display: "JetBrains Maple Mono", sans-serif;
--font-mono: "JetBrains Maple Mono", monospace;
--font-display--font-feature-settings: "zero", "cv03", "ss03", "ss05", "cv97", "cv98";
} */
}
html {
/* font-family: var(--font-roboto); */
font-family: "JetBrains Maple Mono";
font-weight: normal;
}
.text-primary {
color: var(--site-primary) !important;
}
.bg-primary {
background-color: var(--site-primary) !important;
}
.border-primary {
border-color: var(--site-primary) !important;
}
.bg-primary-10 {
/* Use computed RGB to form translucent background when available */
background-color: rgba(var(--site-primary-rgb), 0.08);
/* Fallback for browsers that support color-mix (optional) */
background-color: color-mix(in srgb, var(--site-primary) 8%, transparent);
}
.hover-bg-primary:hover {
background-color: var(--site-primary) !important;
}
.hover-text-primary:hover {
color: var(--site-primary) !important;
}
/* Support group hover coloring: apply to elements with class `group-text-primary` when parent has `group` */
.group:hover .group-text-primary {
color: var(--site-primary) !important;
}
/* Selection helper */
.selection-bg-primary::selection {
background-color: rgba(var(--site-primary-rgb), 0.3);
}
/* Primary gradient utilities */
.bg-primary-gradient {
background-image: linear-gradient(
135deg,
var(--site-primary),
color-mix(in srgb, var(--site-primary) 65%, white 35%)
);
}
.bg-primary-gradient-r {
background-image: linear-gradient(
90deg,
var(--site-primary),
color-mix(in srgb, var(--site-primary) 65%, white 35%)
);
}
/* Prose (content) color overrides to follow site primary */
.prose a {
color: var(--site-primary);
}
.dark .prose a {
color: var(--site-primary);
}
.prose a:hover {
text-decoration: underline;
}
.prose blockquote {
border-left-width: 4px;
border-left-style: solid;
border-left-color: var(--site-primary);
background-color: rgba(var(--site-primary-rgb), 0.05);
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.prose code {
color: var(--site-primary);
background-color: rgba(var(--site-primary-rgb), 0.08);
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
}
.prose pre {
background-color: var(--code-bg, #111827);
}

7
app/components/blog/Header.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import { formatDate } from "~/utils/helper";
interface Props {
title?: string;
image?: string;
@@ -26,7 +25,7 @@ withDefaults(defineProps<Props>(), {
<div
class="flex items-center text-sm font-bold text-violet-600 dark:text-violet-400 bg-violet-500/10 px-3 py-1 rounded-full border border-violet-500/20">
<LogoDate class="mr-2 w-4 h-4" />
{{ formatDate(date) }}
{{ date }}
</div>
<div class="flex items-center gap-2 flex-wrap">
<template v-for="tag in tags" :key="tag">
@@ -52,12 +51,12 @@ withDefaults(defineProps<Props>(), {
<div class="relative group max-w-4xl mx-auto mb-12">
<div
class="absolute inset-0 bg-gradient-to-tr from-violet-500/20 to-fuchsia-500/20 rounded-3xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
class="absolute inset-0 bg-linear-to-tr from-violet-500/20 to-fuchsia-500/20 rounded-3xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
<NuxtImg
:src="image || ''"
:alt="alt || ''"
width="1200"
class="relative rounded-3xl shadow-2xl w-full aspect-[21/9] object-cover border border-white/20 dark:border-white/5 transition-transform duration-700 group-hover:scale-[1.01]" />
class="relative rounded-3xl shadow-2xl w-full aspect-21/9 object-cover border border-white/20 dark:border-white/5 transition-transform duration-700 group-hover:scale-[1.01]" />
</div>
</header>
</template>

75
app/components/blog/Toc.vue
View File

@@ -2,10 +2,27 @@
const { path } = useRoute();
const articles = await queryCollection("content").path(path).first();
const links = articles?.body?.toc?.links || [];
interface TocLink {
id: string;
text: string;
children?: TocLink[];
}
const links = (articles?.body?.toc?.links || []) as TocLink[];
const activeId = ref("");
const flattenLinks = (links: TocLink[]) => {
let flat: TocLink[] = [];
links.forEach((link) => {
flat.push(link);
if (link.children) {
flat = flat.concat(flattenLinks(link.children));
}
});
return flat;
};
onMounted(() => {
const observer = new IntersectionObserver(
(entries) => {
@@ -18,7 +35,7 @@ onMounted(() => {
{ rootMargin: "-100px 0% -80% 0%" },
);
links.forEach((link) => {
flattenLinks(links).forEach((link) => {
const el = document.getElementById(link.id);
if (el) observer.observe(el);
});
@@ -37,18 +54,48 @@ onMounted(() => {
Table Of Content
</h3>
<nav class="space-y-1">
<NuxtLink
v-for="link in links"
:key="link.id"
:to="`#${link.id}`"
class="block text-sm py-1.5 px-3 rounded-xl transition-all duration-200"
:class="[
activeId === link.id
? 'text-violet-600 dark:text-violet-400 bg-violet-500/10 font-bold translate-x-1'
: 'text-zinc-600 dark:text-zinc-400 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-500/5',
]">
{{ link.text }}
</NuxtLink>
<template v-for="link in links" :key="link.id">
<NuxtLink
:to="`#${link.id}`"
class="block text-sm py-1.5 px-3 rounded-xl transition-all duration-200"
:class="[
activeId === link.id
? 'text-violet-600 dark:text-violet-400 bg-violet-500/10 font-bold translate-x-1'
: 'text-zinc-600 dark:text-zinc-400 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-500/5',
]">
{{ link.text }}
</NuxtLink>
<div v-if="link.children" class="ml-3 space-y-1">
<template v-for="child in link.children" :key="child.id">
<NuxtLink
:to="`#${child.id}`"
class="block text-xs py-1.5 px-3 rounded-xl transition-all duration-200"
:class="[
activeId === child.id
? 'text-violet-600 dark:text-violet-400 bg-violet-500/10 font-bold translate-x-1'
: 'text-zinc-500 dark:text-zinc-500 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-500/5',
]">
{{ child.text }}
</NuxtLink>
<div v-if="child.children" class="ml-3 space-y-1">
<NuxtLink
v-for="grandchild in child.children"
:key="grandchild.id"
:to="`#${grandchild.id}`"
class="block text-xs py-1.5 px-3 rounded-xl transition-all duration-200"
:class="[
activeId === grandchild.id
? 'text-violet-600 dark:text-violet-400 bg-violet-500/10 font-bold translate-x-1'
: 'text-zinc-400 dark:text-zinc-600 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-500/5',
]">
{{ grandchild.text }}
</NuxtLink>
</div>
</template>
</div>
</template>
</nav>
</div>
</div>

17
app/components/blog/card.vue
View File

@@ -1,14 +1,13 @@
<script lang="ts" setup>
interface Props {
path: string;
title: string;
date: string;
description: string;
image: string;
alt: string;
ogImage: string;
tags: Array<string>;
published: boolean;
path?: string;
title?: string;
date?: string;
description?: string;
image?: string;
alt?: string;
tags?: Array<string>;
published?: boolean;
}
withDefaults(defineProps<Props>(), {

2
app/components/content/ProseCode.vue
View File

@@ -4,7 +4,7 @@
<template>
<code
class="bg-violet-500/10 text-violet-600 dark:text-violet-400 px-1.5 py-0.5 rounded-md font-mono text-[0.9em]"
class="bg-primary-10 text-primary dark:text-primary px-1.5 py-0.5 rounded-md font-mono text-[0.9em]"
><slot
/></code>
</template>

158
app/components/content/ProsePre.vue
View File

@@ -1,119 +1,159 @@
<script setup lang="ts">
const props = defineProps({
code: {
type: String,
default: "",
},
language: {
type: String,
default: null,
},
filename: {
type: String,
default: null,
},
highlights: {
type: Array as () => number[],
default: () => [],
},
meta: {
type: String,
default: null,
},
/**
* 代码块组件 Props 定义
*/
interface Props {
code?: string; // 代码内容
language?: string; // 编程语言
filename?: string; // 文件名
highlights?: number[]; // 需要高亮的行号
meta?: string; // 元数据
}
const props = withDefaults(defineProps<Props>(), {
code: "",
language: undefined,
filename: undefined,
highlights: () => [],
meta: undefined,
});
// 剪贴板复制功能
const { copy, copied } = useClipboard({ source: props.code });
// macOS 窗口控制按钮颜色配置
const WINDOW_CONTROLS = [
{ color: "#ff5f56", label: "close" },
{ color: "#ffbd2e", label: "minimize" },
{ color: "#27c93f", label: "maximize" },
] as const;
// 是否显示头部（当有文件名或语言信息时显示）
const showHeader = computed(() => props.filename || props.language);
</script>
<template>
<div
class="group relative my-6 overflow-hidden rounded-2xl border border-white/10 bg-[#282a36] shadow-2xl line-numbers">
class="relative my-6 overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50/50 shadow-sm dark:border-white/5 dark:bg-[#282a36] dark:shadow-2xl">
<!-- 代码块头部 -->
<div
v-if="filename || language"
class="flex items-center justify-between px-4 py-2 bg-black/20 border-b border-white/5">
<div class="flex items-center gap-2">
<div class="flex gap-1.5">
<div class="w-3 h-3 rounded-full bg-[#ff5f56] shadow-[0_0_8px_rgba(255,95,86,0.2)]"></div>
<div
class="w-3 h-3 rounded-full bg-[#ffbd2e] shadow-[0_0_8px_rgba(255,189,46,0.2)]"></div>
<div class="w-3 h-3 rounded-full bg-[#27c93f] shadow-[0_0_8px_rgba(39,201,63,0.2)]"></div>
<header
v-if="showHeader"
class="flex items-center justify-between border-b border-zinc-200 bg-zinc-100/60 px-4 py-2.5 dark:border-white/5 dark:bg-white/5">
<!-- 左侧：窗口控制按钮 + 文件名 -->
<div class="flex min-w-0 items-center gap-2">
<!-- macOS 风格的窗口控制按钮 -->
<div class="flex shrink-0 gap-1.5">
<span
v-for="control in WINDOW_CONTROLS"
:key="control.label"
:style="{ backgroundColor: control.color }"
class="h-3 w-3 rounded-full shadow-[0_0_8px_rgba(0,0,0,0.2)]"
:aria-label="control.label" />
</div>
<span v-if="filename" class="ml-2 text-xs font-mono text-zinc-400 truncate max-w-[200px]">{{
filename
}}</span>
<!-- 文件名显示 -->
<span
v-if="filename"
class="ml-2 max-w-50 truncate font-mono text-xs text-zinc-600 dark:text-zinc-400">
{{ filename }}
</span>
</div>
<div class="flex items-center gap-3">
<!-- 右侧：语言标签 + 复制按钮 -->
<div class="flex shrink-0 items-center gap-3">
<!-- 编程语言标签 -->
<span
v-if="language"
class="text-[10px] font-bold uppercase tracking-widest text-zinc-500"
>{{ language }}</span
>
class="text-[0.625rem] font-bold uppercase tracking-widest text-zinc-500 dark:text-zinc-500">
{{ language }}
</span>
<!-- 复制按钮 -->
<button
class="p-1.5 rounded-md hover:bg-white/10 text-zinc-400 hover:text-white transition-all duration-200 active:scale-95"
:class="{ 'text-emerald-400': copied }"
aria-label="复制代码"
class="rounded-md p-1.5 text-zinc-700 transition-all duration-200 hover:bg-gray-200/40 hover:text-zinc-900 active:scale-95 dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-white"
:class="{ 'text-emerald-500 dark:text-emerald-400': copied }"
:title="copied ? '已复制' : '复制代码'"
@click="copy()">
<Icon :name="copied ? 'heroicons:check' : 'heroicons:clipboard'" class="w-3.5 h-3.5" />
<Icon :name="copied ? 'heroicons:check' : 'heroicons:clipboard'" class="h-4 w-4" />
</button>
</div>
</div>
</header>
<!-- 代码内容 -->
<div class="relative group/code">
<!-- 代码内容区域 -->
<div class="relative">
<pre
class="!m-0 !bg-transparent !p-4 overflow-x-auto custom-scrollbar font-mono text-sm leading-relaxed selection:bg-violet-500/30"><slot /></pre>
class="custom-scrollbar m-0! text-zinc-700 dark:text-white! overflow-x-auto bg-transparent! p-4! font-mono text-sm leading-relaxed"><slot /></pre>
</div>
</div>
</template>
<style scoped>
/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.05);
background: rgba(0, 0, 0, 0.08);
border-radius: 10px;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
}
:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.05);
}
:global(.dark) .custom-scrollbar:hover::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
/* 行号实现 */
.line-numbers :deep(code) {
counter-reset: step;
counter-increment: step 0;
/* 行号功能 */
:deep(code) {
counter-reset: line-number;
display: grid;
min-width: 100%;
}
.line-numbers :deep(.line) {
:deep(.line) {
display: inline-flex;
min-height: 1.5rem;
}
.line-numbers :deep(.line::before) {
content: counter(step);
counter-increment: step;
:deep(.line::before) {
content: counter(line-number);
counter-increment: line-number;
width: 2rem;
margin-right: 1.5rem;
display: inline-block;
text-align: right;
color: rgba(255, 255, 255, 0.15);
color: rgba(40, 42, 54, 0.3);
user-select: none;
font-size: 0.75rem;
flex-shrink: 0;
}
/* 高亮行样式 */
.line-numbers :deep(.line.highlight) {
background-color: rgba(139, 92, 246, 0.1);
:global(.dark) :deep(.line::before) {
color: #6272a4 !important;
}
/* 代码行高亮 */
:deep(.line.highlight) {
background-color: rgba(var(--site-primary-rgb), 0.12);
margin: 0 -1rem;
padding: 0 1rem;
border-left: 2px solid #bd93f9;
border-left: 2px solid var(--site-primary);
width: calc(100% + 2rem);
}
:global(.dark) :deep(.line.highlight) {
background-color: rgba(var(--site-primary-rgb), 0.08);
}
</style>

2
app/components/main/SocialLinks.vue
View File

@@ -4,7 +4,7 @@
<template v-for="link in links" :key="link.url">
<NuxtLink
:to="link.url"
class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/40 backdrop-blur-md border border-white/40 text-zinc-700 text-sm font-semibold transition-all duration-300 hover:bg-white/60 hover:border-white/60 hover:text-violet-600 hover:-translate-y-1 hover:shadow-lg dark:bg-slate-800/40 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-slate-800/60 dark:hover:text-white">
class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/40 backdrop-blur-md border border-white/40 text-zinc-700 text-sm font-semibold transition-all duration-300 hover:bg-white/60 hover:border-white/60 hover-text-primary hover:-translate-y-1 hover:shadow-lg dark:bg-slate-800/40 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-slate-800/60 dark:hover:text-white">
<span v-if="iconFor(link)" class="inline-flex items-center justify-center w-5 h-5">
<Icon
v-if="iconFor(link).name"

9
app/components/main/TechInfo.vue
View File

@@ -39,11 +39,8 @@ const versions = computed(() => {
<section class="py-12 px-4">
<div class="max-w-xl mx-auto">
<div class="flex items-center gap-3 mb-6">
<div class="p-2 bg-violet-500/10 rounded-lg">
<Icon
name="heroicons:cpu-chip"
size="1.5em"
class="text-violet-600 dark:text-violet-400" />
<div class="p-2 bg-primary-10 rounded-lg">
<Icon name="heroicons:cpu-chip" size="1.5em" class="text-primary" />
</div>
<h2 class="text-2xl font-bold text-zinc-800 dark:text-zinc-100 tracking-tight">技术信息</h2>
</div>
@@ -63,7 +60,7 @@ const versions = computed(() => {
<Icon
v-if="item.icon"
:name="item.icon"
class="w-4 h-4 text-zinc-400 group-hover:text-violet-500 transition-colors" />
class="w-4 h-4 text-zinc-400 group-text-primary transition-colors" />
<span class="text-zinc-800 dark:text-zinc-200 text-sm font-bold">{{
item.value
}}</span>

1
app/components/main/footer.vue
View File

@@ -88,7 +88,6 @@ const fetchHitokoto = async () => {
try {
const resp = await fetch(buildHitokotoUrl());
const data = await resp.json();
console.log(data);
quote.value = data.hitokoto || "";
from.value = data.from || "";
fromWho.value = data.from_who || "";

40
app/components/main/header.vue
View File

@@ -17,12 +17,23 @@ function isActive(path: string) {
<div class="flex justify-center px-6 container max-w-5xl mx-auto items-center h-full">
<nav class="items-center">
<div
class="inline-flex items-center gap-3 bg-white/50 dark:bg-slate-900/50 backdrop-blur-xl shadow-[0_4px_20px_-2px_rgba(0,0,0,0.1)] border border-white/40 dark:border-white/5 rounded-full px-3 py-2 transition-all duration-300 hover:shadow-xl">
class="inline-flex items-center gap-3 bg-white/70 dark:bg-slate-900/50 backdrop-blur-xl shadow-[0_4px_20px_-2px_rgba(0,0,0,0.1)] border border-zinc-200/50 dark:border-white/5 rounded-full px-3 py-2 transition-all duration-300 hover:shadow-xl">
<div class="hidden sm:flex items-center justify-center h-8 w-8 rounded-full bg-white/0">
<NuxtLink
to="/"
class="relative rounded-full hover:bg-violet-400/40 dark:hover:bg-violet-200/40 p-1">
<Icon name="fa-solid:cat" size="16" class="text-zinc-700 dark:text-zinc-200" />
class="relative rounded-full p-1"
:class="{
'shadow-md dark:shadow-sm dark:shadow-zinc-50 scale-105': isActive('/'),
'hover:bg-violet-400/40 dark:hover:bg-violet/10': !isActive('/'),
}">
<Icon
name="fa-solid:cat"
size="16"
class="text-zinc-700 dark:text-zinc-200"
:class="{
'shadow-sm scale-105 font-bold': isActive('/'),
'hover:bg-violet-400/40 dark:hover:bg-violet/10': !isActive('/'),
}" />
</NuxtLink>
</div>
@@ -30,17 +41,14 @@ function isActive(path: string) {
<li v-for="link in siteConfig.navbar.links" :key="link.path">
<NuxtLink
:to="link.path"
class="relative px-2 py-1 rounded-full transition-all duration-200 flex items-center"
class="relative px-2 py-1 rounded-full transition-all duration-200 flex items-center text-zinc-700 dark:text-zinc-200"
:class="{
'bg-gradient-to-r from-violet-500/80 to-fuchsia-500/80 text-white shadow-md scale-105':
isActive(link.path),
'hover:bg-white/50 dark:hover:bg-white/10': !isActive(link.path),
'shadow-md dark:shadow-sm dark:shadow-zinc-50 scale-105 font-bold': isActive(
link.path,
),
'hover:bg-violet-400/40 dark:hover:bg-violet/10': !isActive(link.path),
}">
<Icon
v-if="link.icon"
:name="link.icon"
size="16"
class="text-zinc-700 dark:text-zinc-200 mr-2" />
<Icon v-if="link.icon" :name="link.icon" size="16" class="mr-2" />
<span class="hidden sm:inline-block px-auto">{{ link.name }}</span>
<span class="sm:hidden">{{ link.name }}</span>
</NuxtLink>
@@ -54,9 +62,9 @@ function isActive(path: string) {
class="relative h-9 w-9 rounded-full bg-white/20 dark:bg-white/5 flex items-center justify-center transition-all duration-300 hover:scale-110 hover:bg-white/40 dark:hover:bg-white/10 focus:outline-none shadow-sm border border-white/20"
@click="onClick(colorMode.value === 'light' ? 'dark' : 'light')">
<Icon
name="fa-regular:sun"
name="fa-regular:moon"
size="18"
class="icon-svg transition-all duration-300 text-yellow-400"
class="icon-svg transition-all duration-300 text-zinc-700 dark:text-white-200"
:class="
colorMode.value === 'light'
? 'opacity-100 scale-100'
@@ -64,9 +72,9 @@ function isActive(path: string) {
" />
<Icon
name="fa-regular:moon"
name="fa-regular:sun"
size="18"
class="icon-svg absolute transition-all duration-300 text-indigo-200"
class="icon-svg absolute transition-all duration-300 text-yellow-400"
:class="
colorMode.value === 'dark'
? 'opacity-100 scale-100'

5
app/components/main/hero.vue
View File

@@ -11,7 +11,7 @@ import SocialLinks from "./SocialLinks.vue";
<div class="mb-8">
<div class="relative h-32 w-32 group">
<div
class="absolute inset-0 bg-gradient-to-tr from-violet-500 to-fuchsia-500 rounded-full blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-500"></div>
class="absolute inset-0 bg-primary-gradient rounded-full blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-500"></div>
<NuxtImg
:src="siteConfig.profile.avatar"
alt="avatar"
@@ -28,8 +28,7 @@ import SocialLinks from "./SocialLinks.vue";
</h1>
<div class="mt-4 flex justify-center">
<div
class="h-1 w-12 bg-gradient-to-r from-violet-500 to-fuchsia-500 rounded-full opacity-60"></div>
<div class="h-1 w-12 bg-primary-gradient-r rounded-full opacity-60"></div>
</div>
<p

11
app/components/main/recent.vue
View File

@@ -33,7 +33,6 @@ const formattedData = computed(() => {
description: articles.description || "no-description available",
image: meta.image || "/not-found.jpg",
alt: meta.alt || "no alter data available",
ogImage: meta.ogImage || "/not-found.jpg",
date: meta.date || "not-date-available",
tags: meta.tags || [],
published: meta.published || false,
@@ -57,11 +56,8 @@ useHead({
<section class="pb-10 px-4">
<div class="flex flex-row items-center justify-between pt-10 pb-6">
<div class="flex items-center space-x-3">
<div class="p-2 bg-violet-500/10 rounded-lg">
<Icon
name="mdi:star-three-points-outline"
size="1.5em"
class="text-violet-600 dark:text-violet-400" />
<div class="p-2 bg-primary-10 rounded-lg">
<Icon name="mdi:star-three-points-outline" size="1.5em" class="text-primary" />
</div>
<h2 class="text-3xl font-bold text-zinc-800 dark:text-zinc-100 tracking-tight">
Recent Posts
@@ -69,7 +65,7 @@ useHead({
</div>
<NuxtLink
to="/blogs"
class="group flex items-center gap-1 text-sm font-semibold text-violet-600 dark:text-violet-400 hover:text-violet-700 transition-colors">
class="group flex items-center gap-1 text-sm font-semibold text-primary hover-text-primary transition-colors">
查看全部文章
<Icon
name="heroicons:arrow-right-20-solid"
@@ -88,7 +84,6 @@ useHead({
:description="post.description"
:image="post.image"
:alt="post.alt"
:og-image="post.ogImage"
:tags="post.tags"
:published="post.published" />
</div>

1
app/config/index.ts
View File

@@ -40,6 +40,7 @@ const siteConfig = {
theme: {
background: "/background.webp",
backgroundMobile: "",
color: "#bd83f3",
},
footer: {

3
app/pages/blogs/[blog].vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import type { BlogPost } from "@/types/blog";
import { seoData } from "~/data";
import { formatDate } from "~/utils/helper";
const { path } = useRoute();
@@ -53,7 +54,7 @@ useHead({
:title="data.title"
:image="data.image"
:alt="data.alt"
:date="data.date"
:date="formatDate(articles.date)"
:description="data.description"
:tags="data.tags" />
<div

1
app/pages/index.vue
View File

@@ -8,7 +8,6 @@
<div class="relative">
<div class="container max-w-5xl mx-auto text-zinc-600 px-4 py-8 relative z-10">
<MainRecent />
<MainTechInfo />
</div>
</div>
</main>

10
app/pages/tags/[tag].vue
View File

@@ -31,8 +31,7 @@ const formattedData = computed(() => {
description: articles.description || "no-description available",
image: meta.image || "/blogs-img/blog.jpg",
alt: meta.alt || "no alter data available",
ogImage: meta.ogImage || "/blogs-img/blog.jpg",
date: meta.date || "not-date-available",
date: formatDate(articles.date) || "not-date-available",
tags: meta.tags || [],
published: meta.published || false,
};
@@ -65,12 +64,12 @@ defineOgImage({
<div class="flex flex-col items-center mb-12">
<NuxtLink
to="/tags"
class="flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-400 hover:underline mb-4">
class="flex items-center gap-2 text-sm font-bold text-primary hover:underline mb-4">
<Icon name="heroicons:arrow-left-20-solid" />
Back to all tags
</NuxtLink>
<div class="p-3 bg-violet-500/10 rounded-2xl mb-4">
<Icon name="fa-solid:tag" size="2.5em" class="text-violet-600 dark:text-violet-400" />
<div class="p-3 bg-primary-10 rounded-2xl mb-4">
<Icon name="fa-solid:tag" size="2.5em" class="text-primary" />
</div>
<h1
class="text-4xl md:text-5xl font-bold text-zinc-800 dark:text-zinc-100 mb-4 tracking-tight">
@@ -91,7 +90,6 @@ defineOgImage({
:description="post.description"
:image="post.image"
:alt="post.alt"
:og-image="post.ogImage"
:tags="post.tags"
:published="post.published" />
<BlogEmpty v-if="formattedData.length === 0" />

8
app/pages/tags/index.vue
View File

@@ -41,8 +41,8 @@ defineOgImage({
<template>
<main class="container max-w-5xl mx-auto text-zinc-600 px-4 py-12">
<div class="flex flex-col items-center mb-12">
<div class="p-3 bg-violet-500/10 rounded-2xl mb-4">
<Icon name="fa-solid:tags" size="2.5em" class="text-violet-600 dark:text-violet-400" />
<div class="p-3 bg-primary-10 rounded-2xl mb-4">
<Icon name="fa-solid:tags" size="2.5em" class="text-primary" />
</div>
<h1
class="text-4xl md:text-5xl font-bold text-zinc-800 dark:text-zinc-100 mb-4 tracking-tight">
@@ -60,11 +60,11 @@ defineOgImage({
:to="`/tags/${tag.toLocaleLowerCase()}`"
class="group relative flex items-center gap-2 px-6 py-3 rounded-2xl bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<span
class="text-lg font-bold text-zinc-700 dark:text-zinc-200 group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
class="text-lg font-bold text-zinc-700 dark:text-zinc-200 group-text-primary transition-colors">
#{{ tag }}
</span>
<span
class="flex items-center justify-center min-w-[24px] h-6 px-1.5 rounded-full bg-violet-500/10 text-violet-600 dark:text-violet-400 text-xs font-bold border border-violet-500/20">
class="flex items-center justify-center min-w-6 h-6 px-1.5 rounded-full bg-primary-10 text-primary dark:text-primary text-xs font-bold border border-primary">
{{ count }}
</span>
</NuxtLink>

8
app/utils/helper.ts
View File

@@ -16,9 +16,11 @@ export function makeFirstCharUpper(str: string): string {
* @returns The formatted date string.
*/
export function formatDate(dateString: string): string {
if (!dateString) return "";
const date = new Date(dateString);
if (Number.isNaN(date.getTime())) return "";
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return `${year}年${month}月${day}日`;
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}