Merge pull request #22 from wicogohome/blog/refactor

Blog/refactor

docs/.vitepress/config.ts

@@ -2,12 +2,13 @@ import { defineConfig } from "vitepress";
 import { fileURLToPath, URL } from "url";
 
 import _ from "lodash";
-import eslint from "@yf-ui/vite-plugin-eslint";
+import eslint from "vite-plugin-eslint";
 import { withMermaid } from "vitepress-plugin-mermaid";
 import markdownItCheckbox from "markdown-it-task-checkbox";
 import useGithubArticles from "./utils/useGithubArticles.ts";
 import useViteEnv from "./utils/useViteEnv.ts";
-
+import useDateTime from "./utils/useDateTime.ts";
+import { DateTime } from "luxon";
 import type { PageData, SiteConfig, MarkdownRenderer } from "vitepress";
 
 const srcDir: string = "posts/";
@@ -43,8 +44,8 @@ PAGINATION_PREFIXES.forEach(({ name, param, withIndex = false }) => {
 });
 
 // add articles
-const { getMatteredArticles } = useGithubArticles();
-const pages = await getMatteredArticles();
+const { getArticles } = useGithubArticles();
+const pages = await getArticles();
 
 pages.forEach(({ filepath, filename, frontmatter: { url, date } }) => {
 	const formattedDate = new Date(date);
@@ -53,8 +54,13 @@ pages.forEach(({ filepath, filename, frontmatter: { url, date } }) => {
 });
 
 const { getEnvBy } = useViteEnv();
-const hostname = getEnvBy("VITE_HOSTNAME");
+const hostname = getEnvBy("VITE_HOSTNAME") as string;
 
+const { parseFromTZ } = useDateTime();
+const links: {
+	url: string;
+	lastmod?: string | number | Date;
+}[] = [];
 // https://vitepress.dev/reference/site-config
 export default defineConfig(
 	withMermaid({
@@ -74,7 +80,11 @@ export default defineConfig(
 			],
 		],
 		sitemap: {
-			hostname: "https://blog.wicotang.com/",
+			hostname,
+			transformItems: (items) => {
+				const mergedItems = links.concat(items);
+				return _.unionBy(mergedItems, "url");
+			},
 		},
 		outDir: "../dist/blog/",
 		srcDir,
@@ -108,6 +118,17 @@ export default defineConfig(
 			},
 		},
 		rewrites,
+		transformHtml: (_, id, { pageData }) => {
+			if (!/[\\/]404\.html$/.test(id)) {
+				links.push({
+					url: pageData.relativePath?.replace("index.md", ""),
+					lastmod: (pageData.frontmatter?.lastUpdated
+						? parseFromTZ(pageData.frontmatter.lastUpdated)
+						: DateTime.now()
+					).toISODate() as string,
+				});
+			}
+		},
 		async transformPageData(pageData: PageData, { siteConfig: { site } }: { siteConfig: SiteConfig }) {
 			if (
 				pageData.title.length === 0 &&

docs/.vitepress/data/routes.data.ts

@@ -17,9 +17,9 @@ export { data };
 export default defineLoader(
 	createContentLoader("**/*.md", {
 		transform: async (): Promise<Data[]> => {
-			const { getMatteredArticles } = useGithubArticles();
+			const { getArticles } = useGithubArticles();
 
-			const articleRoutes = await getMatteredArticles();
+			const articleRoutes = await getArticles();
 
 			const { parseFromTZ } = useDataTime();
 			const { formatUrlByRewrites } = useArticleUrl();

docs/.vitepress/theme/Layout/Article.vue

@@ -20,7 +20,19 @@ export default defineComponent({
 			return "";
 		});
 
-		return { withBase, articleFrontmatter, createdAt };
+		const lastUpdated = computed(() => {
+			if (
+				articleFrontmatter.value.lastUpdated &&
+				articleFrontmatter.value.date &&
+				!articleFrontmatter.value.lastUpdated.hasSame(articleFrontmatter.value.date, "day")
+			) {
+				return toDateString(articleFrontmatter.value.lastUpdated);
+			}
+
+			return "";
+		});
+
+		return { withBase, articleFrontmatter, createdAt, lastUpdated };
 	},
 });
 </script>
@@ -52,7 +64,14 @@ export default defineComponent({
 			<hr />
 		</template>
 		<Content class="article-content mb-16" />
+
 		<div class="grid md:grid-cols-5 m-4 gap-4">
+			<div
+				v-if="lastUpdated.length > 0"
+				class="text-right w-full md:col-span-5"
+			>
+				最後更新：{{ lastUpdated }}
+			</div>
 			<PrevButton
 				v-if="articleFrontmatter.prev"
 				:url="articleFrontmatter.prev.url"

docs/.vitepress/theme/Layout/Categories.vue

@@ -22,7 +22,7 @@ export default defineComponent({
 
 <template>
 	<div>
-		<ol class="flex justify-start min-w-96 gap-1 flex-wrap">
+		<ol class="flex justify-start md:min-w-96 gap-1 flex-wrap">
 			<li
 				v-for="(posts, category) in categories"
 				:key="category"
@@ -35,7 +35,7 @@ export default defineComponent({
 				{{ posts.length }}
 			</li>
 		</ol>
-		<div class="outline outline-1 min-h-52 min-w-80 rounded p-2">
+		<div class="outline outline-1 min-h-52 rounded p-2">
 			<hr />
 			<hr class="my-1" />
 			<PostItemsGroup

docs/.vitepress/theme/Layout/List.vue

@@ -53,28 +53,26 @@ export default defineComponent({
 				:key="key"
 				class="bg-yellow-light/20 rounded p-4"
 			>
-				<div class="flex justify-between">
-					<span class="text-white-default/70">
-						{{ toDateString(date) }}
-					</span>
-
-					<div class="flex gap-1 flex-wrap">
-						<span
-							v-for="tag in tags"
-							:key="tag"
-							class="text-base text-yellow-dark"
+				<div class="flex justify-between flex-wrap">
+					<p class="basis-1/3 text-sm">{{ toDateString(date) }}</p>
+					<div
+						v-if="tags.length > 0"
+						class="text-yellow-dark font-semibold md:text-right md:basis-2/3 basis-full order-first md:order-none"
+					>
+						<a
+							v-for="(tag, index) in tags"
+							:key="title + index"
+							:href="withBase('/tags/' + tag + '/')"
 						>
 							#{{ tag }}
-						</span>
+						</a>
 					</div>
+					<a
+						:href="withBase(url)"
+						class="basis-full"
+						><span class="title font-medium">{{ title ?? url }} | </span> <span>{{ category }}</span></a
+					>
 				</div>
-
-				<a
-					:href="withBase(url)"
-					class="text-xl"
-				>
-					{{ title }}<span class="text-base"> | {{ category }}</span>
-				</a>
 			</li>
 		</ul>
 		<BlogPagination

docs/.vitepress/theme/Layout/components/Header.vue

@@ -19,12 +19,12 @@ export default defineComponent({
 	</header>
 	<nav class="sticky top-0 z-40">
 		<ul class="p-2 grid grid-flow-col justify-end grid-cols-6 backdrop-blur-sm shadow-sm shadow-yellow-light/20">
-			<li class="col-span-3"></li>
+			<li class="col-span-2 sm:col-span-3"></li>
 			<li class="col-span-1">
 				<a :href="withBase('/')">首頁</a>
 			</li>
 			<li class="col-span-1"><a :href="withBase('/about/')">關於</a></li>
-			<li class="col-span-1"><a :href="withBase('/list/')">所有文章 ></a></li>
+			<li class="col-span-2 sm:col-span-1"><a :href="withBase('/list/')">所有文章 ></a></li>
 		</ul>
 	</nav>
 </template>

docs/.vitepress/theme/Layout/components/PostItem.vue

@@ -27,13 +27,14 @@ export default defineComponent({
 	>
 		<div class="cursor-pointer md:h-60 h-40 overflow-hidden relative">
 			<img
-				alt="post-cover"
+				alt="post-cover-bg"
 				:src="ogUrl"
 				class="absolute blur-lg"
 			/>
 			<a :href="withBase(url)">
 				<div class="absolute w-full h-full">
 					<img
+						alt="post-cover"
 						:src="ogUrl"
 						class="max-h-full m-auto"
 					/>
@@ -42,16 +43,16 @@ export default defineComponent({
 		</div>
 
 		<div class="p-4">
-			{{ toDateString(date) }}
-			<div class="flex justify-between">
+			<div class="flex justify-between flex-wrap">
+				<p class="basis-full text-sm">{{ toDateString(date) }}</p>
 				<a
 					:href="withBase(url)"
-					class="title"
+					class="title md:basis-3/4 basis-full md:order-none font-medium"
 					>{{ title ?? url }}</a
 				>
 				<div
 					v-if="tags.length > 0"
-					class="text-yellow-dark font-semibold text-right"
+					class="text-yellow-dark font-semibold md:text-right md:basis-1/4 basis-full order-first md:order-none"
 				>
 					<a
 						v-for="(tag, index) in tags"
@@ -63,7 +64,7 @@ export default defineComponent({
 				</div>
 			</div>
 
-			<p class="text-sm line-clamp-3">
+			<p class="text-sm line-clamp-3 text-white-default/80">
 				{{ description }}
 			</p>
 		</div>

docs/.vitepress/theme/Layout/components/SidebarItem.vue

@@ -22,7 +22,7 @@ export default defineComponent({
 		>
 			<a
 				:href="link"
-				class="hover:text-yellow-default whitespace-nowrap"
+				class="hover:text-yellow-default break-keep whitespace-break-spaces text-sm"
 				>{{ title }}</a
 			>
 			<SidebarItem

docs/.vitepress/theme/Layout/index.vue

@@ -43,7 +43,10 @@ export default {
 		function backToTop() {
 			window.scrollTo({ top: 0, behavior: "smooth" });
 		}
-		return { withBase, mainFrontmatter, currentContent, isArticle, backToTop };
+		const categoryTitle = computed(
+			() => mainFrontmatter.value?.title ?? mainFrontmatter.value?.category ?? mainFrontmatter.value?.layout
+		);
+		return { withBase, mainFrontmatter, currentContent, isArticle, categoryTitle, backToTop };
 	},
 };
 </script>
@@ -59,8 +62,11 @@ export default {
 						class="group cursor-pointer category-title sticky top-11 z-40 max-h-[85vh] h-fit text-white-default/80 flex gap-2"
 						@click="backToTop"
 					>
-						<span class="vertical-rl">
-							{{ mainFrontmatter?.title ?? mainFrontmatter?.category ?? mainFrontmatter?.layout }}
+						<span
+							class="vertical-rl"
+							:class="{ 'text-2xl lg:text-4xl': categoryTitle.length > 25 }"
+						>
+							{{ categoryTitle }}
 						</span>
 						<div class="group-hover:-rotate-90 transition-transform align-bottom h-fit">></div>
 					</div>

docs/.vitepress/theme/styles/main.scss

@@ -14,7 +14,7 @@
 
 @layer utilities {
 	.title {
-		@apply text-2xl ;
+		@apply md:text-2xl text-lg;
 	}
 	.website-title {
 		@apply md:text-8xl text-2xl font-zilla text-yellow-dark ;
@@ -73,14 +73,11 @@
 			a {
 				@apply text-yellow-dark underline-offset-4  underline;
 			}
-
+			
 			blockquote {
-				@apply border-l-4 pl-4 border-gray-400;
-				p {
-					@apply text-gray-400;
-				}
+				@apply border-l-4 pl-4 border-gray-400 md:text-sm text-base ;
 			}
-			
+
 			hr {
 				@apply text-white-light/20 ;
 			}
@@ -138,6 +135,9 @@
 			[class*=language-] {
 				@apply bg-codeblock rounded p-4 relative overflow-x-auto ;
 
+				button.copy{
+					@apply hidden;
+				}
 				.lang {
 					@apply absolute right-2 top-1 font-light opacity-40 text-base ;
 

docs/.vitepress/utils/useFrontmatter.ts

@@ -48,16 +48,16 @@ export default function useFrontmatter() {
 			({ frontmatter: { title, url } }) =>
 				title === formattedFrontmatter.title && url === formattedFrontmatter.url
 		);
-		const next = currentIndex > -1 ? posts[currentIndex - 1] ?? null : null;
-		const prev = currentIndex > -1 ? posts[currentIndex + 1] ?? null : null;
+		const next = currentIndex > -1 ? (posts[currentIndex - 1] ?? null) : null;
+		const prev = currentIndex > -1 ? (posts[currentIndex + 1] ?? null) : null;
 
 		let date = null;
 		if ("date" in frontmatter.value) {
 			date = parseFromTZ(formattedFrontmatter.date);
 		}
 
 		let lastUpdated = null;
-		if ("last_updated" in frontmatter.value) {
+		if ("lastUpdated" in frontmatter.value) {
 			lastUpdated = parseFromTZ(formattedFrontmatter.lastUpdated);
 		}