Redesign home page
Signed-off-by: Al Asad Nur Riyad <asadnurriyad@gmail.com>
This commit is contained in:
Al Asad Nur Riyad
@@ -31,14 +31,14 @@ withDefaults(defineProps<Props>(), {
|
||||
<NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1">
|
||||
<div class="sm:col-span-3">
|
||||
<NuxtImg
|
||||
class="h-full w-full object-cover object-center rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none shadow-lg group-hover:scale-[1.05] transition-all duration-500"
|
||||
class="h-full w-full object-cover object-center rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none shadow-lg group-hover:scale-[1.02] transition-all duration-500"
|
||||
:provider="provider"
|
||||
:src="image"
|
||||
:alt="alt"
|
||||
/>
|
||||
</div>
|
||||
<div class="sm:col-span-7 p-5">
|
||||
<h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-700">
|
||||
<h2 class="text-xl font-semibold text-black pb-1 group-hover:text-sky-700">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<p class="text-ellipsis line-clamp-2">
|
||||
|
||||
@@ -27,16 +27,16 @@ withDefaults(defineProps<Props>(), {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="group border m-2 overflow-hidden rounded-2xl shadow-lg text-zinc-700">
|
||||
<article class="group border m-2 overflow-hidden rounded-2xl shadow-md text-zinc-700">
|
||||
<NuxtLink :to="path">
|
||||
<NuxtImg
|
||||
:provider="provider"
|
||||
class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
|
||||
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"
|
||||
:src="image"
|
||||
:alt="alt"
|
||||
/>
|
||||
<div class="p-5">
|
||||
<div class="text-black text-sm pt-4 pb-2">
|
||||
<div class="px-3 pb-4">
|
||||
<div class="text-black pt-3 pb-2">
|
||||
<div class="flex items-center">
|
||||
<LogoDate />
|
||||
{{ date }}
|
||||
@@ -48,13 +48,13 @@ withDefaults(defineProps<Props>(), {
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-700">
|
||||
<h2 class="text-xl font-semibold text-black pb-1 group-hover:text-sky-700">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<p class="text-ellipsis line-clamp-3">
|
||||
<p class="text-ellipsis line-clamp-2 text-base">
|
||||
{{ description }}
|
||||
</p>
|
||||
<div class="flex group-hover:underline text-sky-700 items-center pt-2">
|
||||
<div class="flex group-hover:underline text-sky-700 items-center py-2">
|
||||
<p>Read More</p>
|
||||
<LogoArrow />
|
||||
</div>
|
||||
|
||||
67
components/main/recent.vue
Normal file
67
components/main/recent.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script lang="ts" setup>
|
||||
// Get Last 6 Publish Post from the content/blog directory
|
||||
const { data } = await useAsyncData('recent-post', () =>
|
||||
queryContent('/blogs').limit(3).sort({ _id: -1 }).find(),
|
||||
)
|
||||
|
||||
const formatedData = computed(() => {
|
||||
return data.value?.map((articles) => {
|
||||
return {
|
||||
path: articles._path,
|
||||
title: articles.title || 'no-title available',
|
||||
description: articles.description || 'no-descriptoin available',
|
||||
image: articles.image || '/nuxt-blog/no-image_cyyits.png',
|
||||
alt: articles.alt || 'no alter data available',
|
||||
ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
|
||||
provider: articles.provider,
|
||||
date: articles.date || 'not-date-available',
|
||||
tags: articles.tags || [],
|
||||
published: articles.published || false,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Home',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
|
||||
},
|
||||
],
|
||||
titleTemplate: 'Riyad\'s Blog - %s',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pb-10">
|
||||
<div class="px-6">
|
||||
<div class="flex flex-row items-center space-x-3 pt-5 pb-3">
|
||||
<Icon name="mdi:star-three-points-outline" size="2em" class="text-black" />
|
||||
<h3 class="text-4xl font-semibold text-black ">
|
||||
Recent Post
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||
<template v-for="post in formatedData" :key="post.title">
|
||||
<BlogCard
|
||||
:path="post.path"
|
||||
:title="post.title"
|
||||
:date="post.date"
|
||||
:description="post.description"
|
||||
:image="post.image"
|
||||
:alt="post.alt"
|
||||
:og-image="post.ogImage"
|
||||
:provider="post.provider"
|
||||
:tags="post.tags"
|
||||
:published="post.published"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="data?.length === 0">
|
||||
<BlogEmpty />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
67
components/main/trending.vue
Normal file
67
components/main/trending.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script lang="ts" setup>
|
||||
// Get Last 6 Publish Post from the content/blog directory
|
||||
const { data } = await useAsyncData('trending-post', () =>
|
||||
queryContent('/blogs').limit(3).sort({ _id: -1 }).find(),
|
||||
)
|
||||
|
||||
const formatedData = computed(() => {
|
||||
return data.value?.map((articles) => {
|
||||
return {
|
||||
path: articles._path,
|
||||
title: articles.title || 'no-title available',
|
||||
description: articles.description || 'no-descriptoin available',
|
||||
image: articles.image || '/nuxt-blog/no-image_cyyits.png',
|
||||
alt: articles.alt || 'no alter data available',
|
||||
ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
|
||||
provider: articles.provider,
|
||||
date: articles.date || 'not-date-available',
|
||||
tags: articles.tags || [],
|
||||
published: articles.published || false,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Home',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
|
||||
},
|
||||
],
|
||||
titleTemplate: 'Riyad\'s Blog - %s',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="px-6">
|
||||
<div class="flex flex-row items-center space-x-3 pt-5 pb-3">
|
||||
<Icon name="mdi:star-three-points-outline" size="2em" class="text-black" />
|
||||
<h3 class="text-4xl font-semibold text-black ">
|
||||
Trending Post
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 ">
|
||||
<template v-for="post in formatedData" :key="post.title">
|
||||
<ArchiveCard
|
||||
:path="post.path"
|
||||
:title="post.title"
|
||||
:date="post.date"
|
||||
:description="post.description"
|
||||
:image="post.image"
|
||||
:alt="post.alt"
|
||||
:og-image="post.ogImage"
|
||||
:provider="post.provider"
|
||||
:tags="post.tags"
|
||||
:published="post.published"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="data?.length === 0">
|
||||
<BlogEmpty />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user