update
This commit is contained in:
@@ -1,57 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string
|
||||
image: string
|
||||
alt: string
|
||||
description: string
|
||||
date: string
|
||||
tags: Array<string>
|
||||
title: string;
|
||||
image: string;
|
||||
alt: string;
|
||||
description: string;
|
||||
date: string;
|
||||
tags: Array<string>;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
title: 'no-title',
|
||||
image: '#',
|
||||
alt: 'no-img',
|
||||
description: 'no description',
|
||||
date: 'no-date',
|
||||
title: "no-title",
|
||||
image: "#",
|
||||
alt: "no-img",
|
||||
description: "no description",
|
||||
date: "no-date",
|
||||
tags: () => [],
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<h1 class="text-xl dark:text-zinc-300 md:text-3xl lg:text-4xl m-7 font-bold text-center">
|
||||
{{ title || '' }}
|
||||
</h1>
|
||||
<NuxtImg
|
||||
:src="image || ''"
|
||||
:alt="alt || ''"
|
||||
width="600"
|
||||
class="m-auto rounded-2xl shadow-lg h-32 md:h-72 w-4/6 md:w-4/5 content-center object-cover"
|
||||
/>
|
||||
<p
|
||||
class="text-xs sm:text-sm my-3 max-w-xl mx-auto text-center text-zinc-600 dark:text-zinc-400"
|
||||
>
|
||||
{{ description }}
|
||||
</p>
|
||||
<div class="flex w-full justify-center text-xs md:text-base my-8">
|
||||
<div class="md:flex text-black dark:text-zinc-300 content-center gap-8 text-xs sm:text-sm">
|
||||
<div class="flex items-center font-semibold">
|
||||
<LogoDate />
|
||||
<p>{{ date || '' }}</p>
|
||||
<header class="py-12">
|
||||
<div class="text-center mb-8">
|
||||
<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" />
|
||||
{{ date }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-wrap my-5">
|
||||
<LogoTag />
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<template v-for="tag in tags" :key="tag">
|
||||
<NuxtLink :to="`/categories/${tag.toLocaleLowerCase()}`">
|
||||
<NuxtLink :to="`/tags/${tag.toLocaleLowerCase()}`">
|
||||
<span
|
||||
class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold hover:bg-gray-300 dark:hover:bg-slate-800 transition-colors duration-200"
|
||||
>{{ tag }}</span
|
||||
class="bg-white/40 dark:bg-slate-800/40 backdrop-blur-md border border-white/20 dark:border-white/5 rounded-full px-3 py-1 text-xs font-bold text-zinc-600 dark:text-zinc-300 hover:bg-violet-500/10 hover:text-violet-600 dark:hover:text-violet-400 transition-all duration-300"
|
||||
>#{{ tag }}</span
|
||||
>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1
|
||||
class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-zinc-800 dark:text-zinc-100 mb-6 tracking-tight leading-tight">
|
||||
{{ title }}
|
||||
</h1>
|
||||
|
||||
<p class="text-lg text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto leading-relaxed italic">
|
||||
"{{ description }}"
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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]" />
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
@@ -1,22 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
const { path } = useRoute()
|
||||
const articles = await queryCollection('content').path(path).first()
|
||||
const { path } = useRoute();
|
||||
const articles = await queryCollection("content").path(path).first();
|
||||
|
||||
const links = articles?.body?.toc?.links || []
|
||||
const links = articles?.body?.toc?.links || [];
|
||||
|
||||
const activeId = ref("");
|
||||
|
||||
onMounted(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
activeId.value = entry.target.id;
|
||||
}
|
||||
});
|
||||
},
|
||||
{ rootMargin: "-100px 0% -80% 0%" },
|
||||
);
|
||||
|
||||
links.forEach((link) => {
|
||||
const el = document.getElementById(link.id);
|
||||
if (el) observer.observe(el);
|
||||
});
|
||||
|
||||
onUnmounted(() => observer.disconnect());
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="lg:col-span-3 sticky top-28 h-96 hidden lg:block justify-self-end">
|
||||
<div class="border dark:border-gray-800 p-3 rounded-md min-w-[200px] dark:bg-slate-900">
|
||||
<h1 class="text-sm font-bold mb-3 border-b dark:border-gray-800 pb-2">Table Of Content</h1>
|
||||
<NuxtLink
|
||||
v-for="link in links"
|
||||
:key="link.id"
|
||||
:to="`#${link.id}`"
|
||||
class="block text-xs mb-3 hover:underline"
|
||||
>
|
||||
{{ link.text }}
|
||||
</NuxtLink>
|
||||
<div class="lg:col-span-4 sticky top-28 h-fit hidden lg:block">
|
||||
<div
|
||||
class="bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 p-6 rounded-3xl shadow-sm">
|
||||
<h3
|
||||
class="text-xs font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mb-4 flex items-center gap-2">
|
||||
<Icon name="heroicons:list-bullet" class="w-4 h-4" />
|
||||
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>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,66 +1,66 @@
|
||||
<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;
|
||||
ogImage: string;
|
||||
tags: Array<string>;
|
||||
published: boolean;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
path: '/',
|
||||
title: 'no-title',
|
||||
date: 'no-date',
|
||||
description: 'no-description',
|
||||
image: '/blogs-img/blog.jpg',
|
||||
alt: 'no-alt',
|
||||
ogImage: '/blogs-img/blog.jpg',
|
||||
path: "/",
|
||||
title: "no-title",
|
||||
date: "no-date",
|
||||
description: "no-description",
|
||||
image: "/blogs-img/blog.jpg",
|
||||
alt: "no-alt",
|
||||
ogImage: "/blogs-img/blog.jpg",
|
||||
tags: () => [],
|
||||
published: false,
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="group border dark:border-gray-800 m-2 overflow-hidden rounded-2xl shadow-sm text-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
class="group bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 m-2 overflow-hidden rounded-2xl shadow-sm hover:shadow-xl transition-all duration-500 text-zinc-700 dark:text-zinc-300">
|
||||
<NuxtLink :to="path">
|
||||
<NuxtImg
|
||||
class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.02] transition-all duration-500"
|
||||
width="300"
|
||||
:src="image"
|
||||
:alt="alt"
|
||||
/>
|
||||
<div class="px-3 pb-4">
|
||||
<div class="text-black dark:text-zinc-300 pt-3 pb-2">
|
||||
<div class="flex items-center">
|
||||
<LogoDate class="-translate-y-[10%]" />
|
||||
<div class="overflow-hidden">
|
||||
<NuxtImg
|
||||
class="lg:h-48 md:h-36 w-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
|
||||
width="300"
|
||||
:src="image"
|
||||
:alt="alt" />
|
||||
</div>
|
||||
<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" />
|
||||
{{ date }}
|
||||
</div>
|
||||
<div class="flex items-center gap-1 flex-wrap">
|
||||
<LogoTag />
|
||||
<template v-for="tag in tags" :key="tag">
|
||||
<span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">{{
|
||||
tag
|
||||
}}</span>
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<template v-for="tag in tags.slice(0, 2)" :key="tag">
|
||||
<span
|
||||
class="bg-violet-500/10 text-violet-600 dark:text-violet-400 rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider border border-violet-500/20">
|
||||
{{ tag }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<h2
|
||||
class="text-xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400"
|
||||
>
|
||||
class="text-xl font-bold text-zinc-800 dark:text-zinc-100 mb-2 group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors line-clamp-1">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<p class="text-ellipsis line-clamp-2 text-base">
|
||||
<p class="text-zinc-600 dark:text-zinc-400 text-sm line-clamp-2 leading-relaxed mb-4">
|
||||
{{ description }}
|
||||
</p>
|
||||
<div class="flex group-hover:underline text-sky-700 dark:text-sky-400 items-center py-2">
|
||||
<p>Read More</p>
|
||||
<LogoArrow />
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
@@ -1,17 +1,14 @@
|
||||
<template>
|
||||
<article
|
||||
class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700"
|
||||
>
|
||||
class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700">
|
||||
<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"
|
||||
>
|
||||
class="lg:h-48 md:h-36 w-full object-cover object-center group-hover:scale-[1.05] transition-all duration-500">
|
||||
<LogoConfused />
|
||||
</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"
|
||||
>
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user