Update nuxt to version 4 (#92)
* Nuxt 3.17.4 and other dependencies updated * Temporary fix (maybe) of the Inline Code * Update nuxt to version 4
This commit is contained in:
Nicolhetti
128
app/pages/blogs/[blog].vue
Normal file
128
app/pages/blogs/[blog].vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<script setup lang="ts">
|
||||
import type { BlogPost } from '@/types/blog'
|
||||
import { navbarData, seoData } from '~/data'
|
||||
|
||||
const { path } = useRoute()
|
||||
|
||||
const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
|
||||
queryCollection('content').path(path).first(),
|
||||
)
|
||||
|
||||
if (error.value) navigateTo('/404')
|
||||
|
||||
const data = computed<BlogPost>(() => {
|
||||
const meta = articles?.value?.meta as unknown as BlogPost
|
||||
return {
|
||||
title: articles.value?.title || 'no-title available',
|
||||
description: articles.value?.description || 'no-description available',
|
||||
image: meta?.image || '/not-found.jpg',
|
||||
alt: meta?.alt || 'no alter data available',
|
||||
ogImage: (articles?.value?.ogImage as unknown as string) || '/not-found.jpg',
|
||||
date: meta?.date || 'not-date-available',
|
||||
tags: meta?.tags || [],
|
||||
published: meta?.published || false,
|
||||
}
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: data.value.title || '',
|
||||
meta: [
|
||||
{ name: 'description', content: data.value.description },
|
||||
{
|
||||
name: 'description',
|
||||
content: data.value.description,
|
||||
},
|
||||
// Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
|
||||
{ property: 'og:site_name', content: navbarData.homeTitle },
|
||||
{ property: 'og:type', content: 'website' },
|
||||
{
|
||||
property: 'og:url',
|
||||
content: `${seoData.mySite}/${path}`,
|
||||
},
|
||||
{
|
||||
property: 'og:title',
|
||||
content: data.value.title,
|
||||
},
|
||||
{
|
||||
property: 'og:description',
|
||||
content: data.value.description,
|
||||
},
|
||||
{
|
||||
property: 'og:image',
|
||||
content: data.value.ogImage || data.value.image,
|
||||
},
|
||||
// Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/
|
||||
{ name: 'twitter:site', content: '@qdnvubp' },
|
||||
{ name: 'twitter:card', content: 'summary_large_image' },
|
||||
{
|
||||
name: 'twitter:url',
|
||||
content: `${seoData.mySite}/${path}`,
|
||||
},
|
||||
{
|
||||
name: 'twitter:title',
|
||||
content: data.value.title,
|
||||
},
|
||||
{
|
||||
name: 'twitter:description',
|
||||
content: data.value.description,
|
||||
},
|
||||
{
|
||||
name: 'twitter:image',
|
||||
content: data.value.ogImage || data.value.image,
|
||||
},
|
||||
],
|
||||
link: [
|
||||
{
|
||||
rel: 'canonical',
|
||||
href: `${seoData.mySite}/${path}`,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// console.log(articles.value)
|
||||
|
||||
// Generate OG Image
|
||||
defineOgImageComponent('Test', {
|
||||
headline: 'Riyads Blog 👋',
|
||||
title: articles.value?.seo.title || '',
|
||||
description: articles.value?.seo.description || '',
|
||||
link: data.value.ogImage,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-6 container max-w-5xl mx-auto sm:grid grid-cols-12 gap-x-12">
|
||||
<div class="col-span-12 lg:col-span-9">
|
||||
<BlogHeader
|
||||
:title="data.title"
|
||||
:image="data.image"
|
||||
:alt="data.alt"
|
||||
:date="data.date"
|
||||
:description="data.description"
|
||||
:tags="data.tags"
|
||||
/>
|
||||
<div
|
||||
class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc dark:prose-invert prose-img:rounded-lg"
|
||||
>
|
||||
<ContentRenderer v-if="articles" :value="articles">
|
||||
<template #empty>
|
||||
<p>No content found.</p>
|
||||
</template>
|
||||
</ContentRenderer>
|
||||
</div>
|
||||
</div>
|
||||
<BlogToc />
|
||||
|
||||
<div class="flex flex-row flex-wrap md:flex-nowrap mt-10 gap-2">
|
||||
<SocialShare
|
||||
v-for="network in ['facebook', 'twitter', 'linkedin', 'email']"
|
||||
:key="network"
|
||||
:network="network"
|
||||
:styled="true"
|
||||
:label="true"
|
||||
class="p-1"
|
||||
aria-label="Share with {network}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
137
app/pages/blogs/index.vue
Normal file
137
app/pages/blogs/index.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<script lang="ts" setup>
|
||||
import Fuse from 'fuse.js'
|
||||
import type { BlogPost } from '~/types/blog'
|
||||
|
||||
const { data } = await useAsyncData('all-blog-post', () => queryCollection('content').all())
|
||||
|
||||
const elementPerPage = ref(5)
|
||||
const pageNumber = ref(1)
|
||||
const searchTest = ref('')
|
||||
|
||||
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 || '/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,
|
||||
}
|
||||
}) || []
|
||||
)
|
||||
})
|
||||
|
||||
const fuse = computed(() => {
|
||||
return new Fuse(formattedData.value, {
|
||||
keys: ['title', 'description'],
|
||||
threshold: 0.4,
|
||||
includeScore: false,
|
||||
})
|
||||
})
|
||||
|
||||
const searchData = computed(() => {
|
||||
if (!searchTest.value.trim()) {
|
||||
return formattedData.value
|
||||
}
|
||||
|
||||
const results = fuse.value.search(searchTest.value)
|
||||
return results.map((result) => result.item)
|
||||
})
|
||||
|
||||
const paginatedData = computed(() => {
|
||||
const startInd = (pageNumber.value - 1) * elementPerPage.value
|
||||
const endInd = pageNumber.value * elementPerPage.value
|
||||
|
||||
return searchData.value.slice(startInd, endInd)
|
||||
})
|
||||
|
||||
function onPreviousPageClick() {
|
||||
if (pageNumber.value > 1) pageNumber.value -= 1
|
||||
}
|
||||
|
||||
const totalPage = computed(() => {
|
||||
const ttlContent = searchData.value.length || 0
|
||||
return Math.ceil(ttlContent / elementPerPage.value)
|
||||
})
|
||||
|
||||
function onNextPageClick() {
|
||||
if (pageNumber.value < totalPage.value) pageNumber.value += 1
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: 'Archive',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: 'Here you will find all the blog posts I have written & published on this site.',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// Generate OG Image
|
||||
const siteData = useSiteConfig()
|
||||
defineOgImage({
|
||||
props: {
|
||||
title: 'Archive',
|
||||
description: 'Here you will find all the blog posts I have written & published on this site.',
|
||||
siteName: siteData.url,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="container max-w-5xl mx-auto text-zinc-600">
|
||||
<ArchiveHero />
|
||||
|
||||
<div class="px-6">
|
||||
<input
|
||||
v-model="searchTest"
|
||||
placeholder="Search"
|
||||
type="text"
|
||||
class="block w-full bg-[#F1F2F4] dark:bg-slate-900 dark:placeholder-zinc-500 text-zinc-300 rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-auto-animate class="space-y-5 my-5 px-4">
|
||||
<template v-for="post in paginatedData" :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"
|
||||
:tags="post.tags"
|
||||
:published="post.published"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<ArchiveCard v-if="paginatedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center items-center space-x-6">
|
||||
<button :disabled="pageNumber <= 1" @click="onPreviousPageClick">
|
||||
<Icon
|
||||
name="mdi:code-less-than"
|
||||
size="30"
|
||||
:class="{ 'text-sky-700 dark:text-sky-400': pageNumber > 1 }"
|
||||
/>
|
||||
</button>
|
||||
<p>{{ pageNumber }} / {{ totalPage }}</p>
|
||||
<button :disabled="pageNumber >= totalPage" @click="onNextPageClick">
|
||||
<Icon
|
||||
name="mdi:code-greater-than"
|
||||
size="30"
|
||||
:class="{ 'text-sky-700 dark:text-sky-400': pageNumber < totalPage }"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
Reference in New Issue
Block a user