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-27 19:35:39 +08:00
parent 8121b74649
commit e2b1e21153
18 changed files with 470 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/app.vue
View File

@@ -26,9 +26,9 @@ const bgStyle = computed(() =>
</script>
<template>
<link
<!-- <link
rel="stylesheet"
href="https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Regular/result.css" />
href="https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Regular/result.css" /> -->
<div class="relative">
<div
v-if="currentBg"

20
app/assets/css/main.css Normal file
View File

@@ -0,0 +1,20 @@
@import "tailwindcss";
/* @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;
--font-display--font-feature-settings: "zero", "cv03", "ss03", "ss05", "cv97", "cv98";
} */

15
app/assets/css/tailwind.css
View File

@@ -1,15 +0,0 @@
@import url("https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Regular/result.css");
@tailwind base;
@tailwind components;
@tailwind utilities;
@theme {
--font-roboto: "Maple Mono CN", sans-serif;
--font-display--font-feature-settings: "zero", "cv03", "ss03", "ss05", "cv97", "cv98";
}
/* @import url("https://fontsapi.zeoseven.com/292/main/result.css"); */
/* @theme {
--font-roboto: "LXGW WenKai", sans-serif;
} */

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

@@ -13,7 +13,7 @@ const techStack = computed(() => {
};
return [
{ label: "构建平台", value: platform.name, icon: platform.icon },
{ label: "图片存储", value: "去图图床", icon: "heroicons:photo" },
{ label: "图片存储", value: "Cloudflare R2", icon: "heroicons:photo" },
{ label: "软件协议", value: "MIT", icon: "heroicons:document-text" },
{ label: "文章许可", value: "CC BY-NC-SA 4.0", icon: "fa-brands:creative-commons" },
{
@@ -74,19 +74,8 @@ const versions = computed(() => {
</div>
</div>
<!-- 展开/收起按钮 -->
<button
class="w-full mt-8 py-2 flex items-center justify-center gap-2 text-xs font-bold text-zinc-400 hover:text-violet-500 transition-colors border-t border-white/10 dark:border-white/5 pt-6"
@click="showMore = !showMore">
<Icon
:name="showMore ? 'heroicons:chevron-double-up' : 'heroicons:chevron-double-down'"
class="w-3 h-3" />
{{ showMore ? "收起构建信息" : "展开构建信息" }}
</button>
<!-- 详细版本信息网格 -->
<div
v-show="showMore"
class="grid grid-cols-2 sm:grid-cols-4 gap-6 mt-6 animate-in fade-in slide-in-from-top-2 duration-500">
<div v-for="v in versions" :key="v.label" class="text-center">
<div

33
app/pages/about.vue
View File

@@ -1,24 +1,25 @@
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import TechInfo from "~/components/main/TechInfo.vue";
const content = ref(null);
onMounted(async () => {
const route = useRoute();
const { data: pageData } = await useAsyncData(route.path, () =>
queryCollection("content").path(route.path).first(),
);
if (pageData.value) {
content.value = pageData.value;
}
});
const route = useRoute();
const { data: content } = await useAsyncData(route.path, () => queryCollection("about").first());
</script>
<template>
<div class="prose prose-lg dark:prose-invert mx-auto px-6 max-w-4xl mt-0 text-left">
<ContentRenderer v-if="content" :value="content" />
<div class="container mx-auto mt-10 px-6 max-w-6xl">
<div class="flex gap-8">
<!-- Main content -->
<main class="prose prose-zinc dark:prose-invert mx-auto mt-10 px-6 w-half h-full text-left">
<ContentRenderer v-if="content" :value="content" />
</main>
<!-- Sidebar tech/build info -->
<aside class="w-1/3 hidden lg:block">
<div class="sticky top-24">
<TechInfo />
</div>
</aside>
</div>
</div>
</template>

44
app/pages/archive/index.vue
View File

@@ -1,28 +1,26 @@
<script lang="ts" setup>
import type { BlogPost } from "~/types/blog";
import { formatDate } from "~/utils/helper";
const { data } = await useAsyncData("all-archive-post", () => queryCollection("content").all());
const { data } = await useAsyncData("all-archive-post", () =>
queryCollection("content").order("date", "DESC").all(),
);
const sortedData = computed(() => {
return (
data.value
?.map((articles) => {
const meta = articles.meta as unknown as BlogPost;
return {
path: articles.path,
title: articles.title || "no-title available",
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,
};
})
.filter((post) => post.published) // Filter out unpublished posts
.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()) || [] // Reverse the order
);
// const sortedData = computed(() => {
const posts = computed(() => {
return data.value?.map((articles) => {
const meta = articles.meta as unknown as BlogPost;
return {
path: articles.path,
title: articles.title || "no-title available",
description: articles.description || "no-description available",
image: meta.image || "/not-found.jpg",
alt: meta.alt || "no alter data available",
date: formatDate(articles.date) || "not-date-available",
tags: meta.tags || [],
published: meta.published || false,
};
});
});
</script>
@@ -31,7 +29,7 @@ const sortedData = computed(() => {
<h1 class="text-3xl font-bold my-6">Archive</h1>
<div v-auto-animate class="space-y-5 my-5 px-4">
<template v-for="post in sortedData" :key="post.title">
<template v-for="post in posts" :key="post.title">
<ArchiveCard
:path="post.path"
:title="post.title"
@@ -41,8 +39,6 @@ const sortedData = computed(() => {
:tags="post.tags"
:published="post.published" />
</template>
<ArchiveCard v-if="sortedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
</div>
</main>
</template>

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

@@ -17,7 +17,6 @@ const data = computed<BlogPost>(() => {
description: articles.value?.description || "no-description available",
image: meta?.image || "/not-found.jpg",
alt: meta?.alt || "no alter data available",
ogImage: (articles?.value?.ogImage as unknown as string) || "/not-found.jpg",
date: meta?.date || "not-date-available",
tags: meta?.tags || [],
published: meta?.published || false,

11
app/types/blog.ts
View File

@@ -4,10 +4,17 @@ export interface BlogPost {
description: string;
image: string;
alt: string;
ogImage: string;
tags: string[];
categories: string[];
published: boolean;
meta: Record<string, unknown>; // 添加 meta 属性
meta: BlogPostMeta; // 添加 meta 属性
path: string; // 添加 path 属性
}
interface BlogPostMeta {
image?: string;
alt?: string;
date?: string;
tags?: string[];
// 根据实际情况添加其他可能的属性
}

13
app/utils/helper.ts
View File

@@ -9,3 +9,16 @@ export function makeFirstCharUpper(str: string): string {
if (!str) return "";
return str.charAt(0).toUpperCase() + str.slice(1);
}
/**
* Formats a date string into a more readable format.
* @param dateString - The date string to format.
* @returns The formatted date string.
*/
export function formatDate(dateString: string): string {
const date = new Date(dateString);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return `${year}年${month}月${day}日`;
}