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:
RhenCloud
2025-12-26 21:56:11 +08:00
parent e857204140
commit 1688124e8e
31 changed files with 256 additions and 736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
app/pages/about.vue
View File

@@ -1,75 +1,24 @@
<template>
<h1>Hello</h1>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
<!-- <script setup lang="ts">
import { aboutPage, footerData } from "~/data";
const content = ref(null);
useHead({
title: "About",
meta: [
{
name: "description",
content: footerData.aboutAuthor,
},
],
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;
}
});
</script>
<template>
<div class="py-5">
<div class="sm:grid grid-cols-8 px-6 py-5 sm:py-9 gap-5 container max-w-5xl mx-auto">
<div class="col-span-5 max-w-md">
<div class="flex justify-between">
<div>
<h1 class="text-xl sm:text-4xl pb-2 font-bold">
{{ aboutPage.title }}
</h1>
<div class="my-3 space-x-2 md:space-x-3 pb-10">
<NuxtLink
:to="socialLinks.githubLink"
target="_blank"
class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
aria-label="Github">
<Icon name="fa:github" size="1em" class="-translate-y-[-10%]" />
</NuxtLink>
<NuxtLink
:to="socialLinks.linkedinLink"
target="_blank"
class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
aria-label="LinkedIn">
<Icon name="fa:linkedin-square" size="1em" class="-translate-y-[-10%]" />
</NuxtLink>
<NuxtLink
:to="socialLinks.twitterLink"
target="_blank"
class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
aria-label="Twitter">
<Icon name="fa:twitter-square" size="1em" class="-translate-y-[-10%]" />
</NuxtLink>
<NuxtLink
:to="socialLinks.stackoverflowLink"
target="_blank"
class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
aria-label="StackOverflow">
<Icon name="fa:stack-overflow" size="1em" class="-translate-y-[-10%]" />
</NuxtLink>
</div>
</div>
<div class="sm:hidden block col-span-3 pb-5 dark:text-[#F1F2F4]">
<NuxtImg src="/riyad.jpg" width="125" height="115" quality="50" class="rounded-md" />
</div>
</div>
<h3 class="text-base sm:text-3xl font-semibold pb-7 sm:pb-12">
{{ aboutPage.description }}
</h3>
<p>{{ aboutPage.aboutMe }}</p>
</div>
<div class="hidden sm:block col-span-3">
<NuxtImg src="/riyad.jpg" width="450" height="500" quality="50" class="rounded-md" />
</div>
</div>
<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>
</template> -->
</template>

48
app/pages/archive/index.vue Normal file
View File

@@ -0,0 +1,48 @@
<script lang="ts" setup>
import type { BlogPost } from "~/types/blog";
const { data } = await useAsyncData("all-archive-post", () => queryCollection("content").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
);
});
</script>
<template>
<main class="container max-w-5xl mx-auto text-zinc-600">
<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">
<ArchiveCard
:path="post.path"
:title="post.title"
:date="post.date"
:description="post.description"
:alt="post.alt"
:tags="post.tags"
:published="post.published" />
</template>
<ArchiveCard v-if="sortedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
</div>
</main>
</template>

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

@@ -21,6 +21,9 @@ const data = computed<BlogPost>(() => {
date: meta?.date || "not-date-available",
tags: meta?.tags || [],
published: meta?.published || false,
categories: meta?.categories || [],
meta: meta || {},
path: path || "",
};
});

53
app/pages/categories/[category].vue
View File

@@ -2,14 +2,14 @@
import type { BlogPost } from "@/types/blog";
const route = useRoute();
// take category from route params & make first char upper
// Take category from route params & ensure it's a valid string
const category = computed(() => {
const name = route.params.category || "";
let strName = "";
if (Array.isArray(name)) strName = name.at(0) || "";
else strName = name;
return strName;
return strName.trim().toLowerCase(); // Convert to lowercase for case-insensitive matching
});
const { data } = await useAsyncData(`category-data-${category.value}`, () =>
@@ -18,26 +18,33 @@ const { data } = await useAsyncData(`category-data-${category.value}`, () =>
.then((articles) =>
articles.filter((article) => {
const meta = article.meta as unknown as BlogPost;
return meta.tags.includes(category.value);
return (
meta.published &&
meta.categories?.map((cat) => cat.toLowerCase()).includes(category.value)
); // Case-insensitive matching
}),
),
);
const formattedData = 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 || "/blogs-img/blog.jpg",
alt: meta.alt || "no alter data available",
ogImage: meta.ogImage || "/blogs-img/blog.jpg",
date: meta.date || "not-date-available",
tags: meta.tags || [],
published: meta.published || false,
};
});
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 || "/blogs-img/blog.jpg",
alt: meta.alt || "no alter data available",
ogImage: meta.ogImage || "/blogs-img/blog.jpg",
date: meta.date || "not-date-available",
tags: meta.tags || [],
published: meta.published || false,
};
})
.filter((post) => post.published) || [] // Ensure only published posts are shown
);
});
useHead({
@@ -49,16 +56,6 @@ useHead({
},
],
});
// Generate OG Image
const siteData = useSiteConfig();
defineOgImage({
props: {
title: category.value?.toUpperCase(),
description: `You will find all the ${category.value} related post here`,
siteName: siteData.url,
},
});
</script>
<template>
@@ -77,7 +74,7 @@ defineOgImage({
:og-image="post.ogImage"
:tags="post.tags"
:published="post.published" />
<BlogEmpty v-if="data?.length === 0" />
<BlogEmpty v-if="formattedData.length === 0" />
</div>
</main>
</template>

20
app/pages/categories/index.vue
View File

@@ -1,6 +1,4 @@
<script lang="ts" setup>
import { makeFirstCharUpper } from "@/utils/helper";
const { data } = await useAsyncData("all-blog-post-by-category", () =>
queryCollection("content").all(),
);
@@ -8,13 +6,13 @@ const { data } = await useAsyncData("all-blog-post-by-category", () =>
const allTags = new Map();
data.value?.forEach((blog) => {
const tags: Array<string> = (blog.meta.tags as string[]) || [];
tags.forEach((tag) => {
if (allTags.has(tag)) {
const cnt = allTags.get(tag);
allTags.set(tag, cnt + 1);
const categories: Array<string> = (blog.meta.categories as string[]) || [];
categories.forEach((category) => {
if (allTags.has(category)) {
const cnt = allTags.get(category);
allTags.set(category, cnt + 1);
} else {
allTags.set(tag, 1);
allTags.set(category, 1);
}
});
});
@@ -46,11 +44,7 @@ defineOgImage({
<main class="container max-w-5xl mx-auto text-zinc-600">
<CategoryHero />
<div class="flex flex-wrap px-6 mt-12 gap-3">
<CategoryCard
v-for="topic in allTags"
:key="topic[0]"
:title="makeFirstCharUpper(topic[0])"
:count="topic[1]" />
<CategoryCard v-for="topic in allTags" :key="topic[0]" :title="topic[0]" :count="topic[1]" />
</div>
</main>
</template>

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

@@ -1,6 +1,5 @@
<script lang="ts" setup>
import type { BlogPost } from "@/types/blog";
import { makeFirstCharUpper } from "@/utils/helper";
const route = useRoute();
const tag = computed(() => {
@@ -18,7 +17,7 @@ const { data } = await useAsyncData(`tag-data-${tag.value}`, () =>
.then((articles) =>
articles.filter((article) => {
const meta = article.meta as unknown as BlogPost;
return meta.tags.some((t) => t.toLowerCase() === tag.value.toLowerCase());
return meta.published && meta.tags.some((t) => t.toLowerCase() === tag.value.toLowerCase());
}),
),
);
@@ -41,7 +40,7 @@ const formattedData = computed(() => {
});
useHead({
title: `Tag: ${makeFirstCharUpper(tag.value)}`,
title: `Tag: ${tag.value}`,
meta: [
{
name: "description",
@@ -75,10 +74,10 @@ defineOgImage({
</div>
<h1
class="text-4xl md:text-5xl font-bold text-zinc-800 dark:text-zinc-100 mb-4 tracking-tight">
#{{ makeFirstCharUpper(tag) }}
#{{ tag }}
</h1>
<p class="text-zinc-600 dark:text-zinc-400 text-center">
Found {{ data?.length || 0 }} posts with this tag
Found {{ formattedData.length || 0 }} posts with this tag
</p>
</div>
@@ -95,7 +94,7 @@ defineOgImage({
:og-image="post.ogImage"
:tags="post.tags"
:published="post.published" />
<BlogEmpty v-if="data?.length === 0" />
<BlogEmpty v-if="formattedData.length === 0" />
</div>
</main>
</template>

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

@@ -1,6 +1,4 @@
<script lang="ts" setup>
import { makeFirstCharUpper } from "@/utils/helper";
const { data } = await useAsyncData("all-blog-post-by-tags", () =>
queryCollection("content").all(),
);
@@ -63,7 +61,7 @@ defineOgImage({
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">
#{{ makeFirstCharUpper(tag) }}
#{{ 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">