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
2026-01-01 23:01:44 +08:00
parent 1d888e9af0
commit 5fb144ea64
41 changed files with 163 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/archive/card.vue
View File

@@ -27,11 +27,11 @@ withDefaults(defineProps<Props>(), {
</h2>
<div class="text-black dark:text-zinc-300 text-sm mt-2 mb-1 md:flex md:space-x-6">
<div class="flex items-center">
<LogoDate class="-translate-y-[10%]" />
<Icon name="mdi:calendar" class="mr-1 w-4 h-4" />
<p>{{ date }}</p>
</div>
<div class="flex items-center gap-1 flex-wrap">
<LogoTag />
<Icon name="mdi:tag" class="w-4 h-4" />
<p
v-for="tag in tags"
:key="tag"
@@ -42,7 +42,7 @@ withDefaults(defineProps<Props>(), {
</div>
<div class="flex group-hover:underline text-sky-700 dark:text-sky-400 items-center pt-2">
<p>Read More</p>
<LogoArrow />
<Icon name="mdi:arrow-right" class="ml-1 w-4 h-4" />
</div>
</div>
</NuxtLink>

22
app/components/archive/hero.vue
View File

@@ -1,22 +0,0 @@
<script setup lang="ts">
import siteConfig from "~/config";
</script>
<template>
<div class="container mx-auto mb-5">
<div class="grid grid-cols-1 sm:grid-cols-2 items-center">
<div class="px-6">
<h1
class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
{{ siteConfig.siteMeta.title }}
</h1>
<p class="dark:text-zinc-300">
{{ siteConfig.siteMeta.description }}
</p>
</div>
<div class="px-6 justify-self-center">
<LogoDogpow />
</div>
</div>
</div>
</template>

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

@@ -24,7 +24,7 @@ withDefaults(defineProps<Props>(), {
<div class="flex items-center justify-center gap-3 mb-6">
<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" />
<Icon name="mdi:calendar" class="mr-2 w-4 h-4" />
{{ date }}
</div>
<div class="flex items-center gap-2 flex-wrap">

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

@@ -37,7 +37,7 @@ withDefaults(defineProps<Props>(), {
<div class="px-5 py-5">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center text-xs font-medium text-zinc-500 dark:text-zinc-400">
<LogoDate class="mr-1.5 opacity-70" />
<Icon name="mdi:calendar" class="mr-1.5 opacity-70 w-4 h-4" />
{{ date }}
</div>
<div class="flex items-center gap-1.5 flex-wrap">
@@ -59,7 +59,7 @@ withDefaults(defineProps<Props>(), {
<div
class="flex items-center gap-1 text-sm font-bold text-violet-600 dark:text-violet-400 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0">
<span>Read More</span>
<LogoArrow class="w-4 h-4" />
<Icon name="mdi:arrow-right" class="w-4 h-4" />
</div>
</div>
</NuxtLink>

16
app/components/blog/empty.vue
View File

@@ -1,19 +1,23 @@
<template>
<article class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700">
<article
class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700 bg-white/40 dark:bg-slate-900/40 backdrop-blur-md">
<NuxtLink to="/">
<div class="lg:h-48 md:h-36 w-full object-cover object-center group-hover:scale-[1.05] transition-all duration-500">
<LogoConfused />
<div
class="lg:h-48 md:h-36 w-full bg-linear-to-br from-slate-200 to-slate-300 dark:from-slate-700 dark:to-slate-800 group-hover:scale-[1.05] transition-all duration-500 flex items-center justify-center">
<Icon name="mdi:folder-open" size="80" class="text-slate-400 dark:text-slate-500" />
</div>
<div class="p-5">
<h2 class="text-3xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400">
<h2
class="text-3xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400">
No Post Available
</h2>
<div class="flex group-hover:underline text-sky-700 dark:text-sky-400 items-center pt-2">
<p>Back To Home</p>
<LogoArrow />
<Icon name="mdi:arrow-right" class="ml-1 w-4 h-4" />
</div>
</div>
</NuxtLink>
</article>
</template>;
</template>
;

49
app/components/category/card.vue
View File

@@ -1,49 +0,0 @@
<script setup lang="ts">
interface Props {
title: string;
count: number;
}
withDefaults(defineProps<Props>(), {
title: "No title available",
count: 0,
});
// some random color for tags
const color = [
"#dc2626",
"#d97706",
"#65a30d",
"#059669",
"#0891b2",
"#0284c7",
"#4f46e5",
"#7c3aed",
"#c026d3",
"#db2777",
];
// get a random number
function getRandomInt(min: number, max: number) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const picAColor = ref(`${color.at(getRandomInt(0, 8))}`);
</script>
<template>
<div
class="text-[#F1F2F4] px-5 py-3 rounded hover:underline rand-bg-color hover:scale-[1.05] transition-all duration-500">
<NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
<h1>#{{ title }}({{ count }})</h1>
</NuxtLink>
</div>
</template>
<style scoped>
.rand-bg-color {
background-color: v-bind(picAColor);
}
</style>

22
app/components/category/hero.vue
View File

@@ -1,22 +0,0 @@
<script setup lang="ts">
import { categoryPage } from "~/data";
</script>
<template>
<div class="container mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 items-center">
<div class="px-6">
<h1
class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
{{ categoryPage.title }}
</h1>
<p class="dark:text-zinc-300">
{{ categoryPage.description }}
</p>
</div>
<div class="px-6 justify-self-center">
<LogoDogs />
</div>
</div>
</div>
</template>

23
app/components/category/topic.vue
View File

@@ -1,23 +0,0 @@
<script setup lang="ts">
const route = useRoute();
// take category from route params & make first char upper
const category = computed(() => {
const name = route.params.category || "";
let strName = "";
if (Array.isArray(name)) strName = name.at(0) || "";
else strName = name;
return strName;
});
</script>
<template>
<div class="container mx-auto">
<div class="p-6 my-4 mx-2 rounded-md bg-gray-200 dark:bg-slate-900">
<h1 class="text-black dark:text-white font-semibold leading-tight text-xl md:text-2xl">
#{{ category }}
</h1>
</div>
</div>
</template>