RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update @nuxt/content to version 3.3.0 and refactor content queries

Browse Source
This commit is contained in:
nurRiyad
2025-03-12 03:43:14 +06:00
parent 1aba5e18cc
commit beb5305d65
15 changed files with 2607 additions and 6080 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/blog/Toc.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
const { path } = useRoute() const { path } = useRoute()
const articles = await queryContent(path).findOne() const articles = await queryCollection('content').path(path).first()
const links = articles?.body?.toc?.links || [] const links = articles?.body?.toc?.links || []
</script> </script>

37
components/main/recent.vue
View File

@@ -1,21 +1,42 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { BlogPost } from '~/types/blog'
// Function to parse dates in the format "1st Mar 2023"
function parseCustomDate(dateStr: string): Date {
// Remove ordinal indicators (st, nd, rd, th)
const cleanDateStr = dateStr.replace(/(\d+)(st|nd|rd|th)/, '$1')
// Parse the date
return new Date(cleanDateStr)
}
// Get Last 6 Publish Post from the content/blog directory // Get Last 6 Publish Post from the content/blog directory
const { data } = await useAsyncData('recent-post', () => const { data } = await useAsyncData('recent-post', () =>
queryContent('/blogs').limit(3).sort({ _id: -1 }).find(), queryCollection('content')
.all()
.then((data) => {
return data
.sort((a, b) => {
const aDate = parseCustomDate(a.meta.date as string)
const bDate = parseCustomDate(b.meta.date as string)
return bDate.getTime() - aDate.getTime()
})
.slice(0, 3)
}),
) )
const formattedData = computed(() => { const formattedData = computed(() => {
return data.value?.map((articles) => { return data.value?.map((articles) => {
const meta = articles.meta as unknown as BlogPost
return { return {
path: articles._path, path: articles.path,
title: articles.title || 'no-title available', title: articles.title || 'no-title available',
description: articles.description || 'no-description available', description: articles.description || 'no-description available',
image: articles.image || '/not-found.jpg', image: meta.image || '/not-found.jpg',
alt: articles.alt || 'no alter data available', alt: meta.alt || 'no alter data available',
ogImage: articles.ogImage || '/not-found.jpg', ogImage: meta.ogImage || '/not-found.jpg',
date: articles.date || 'not-date-available', date: meta.date || 'not-date-available',
tags: articles.tags || [], tags: meta.tags || [],
published: articles.published || false, published: meta.published || false,
} }
}) })
}) })

20
components/main/trending.vue
View File

@@ -1,21 +1,23 @@
<script lang="ts" setup> <script lang="ts" setup>
// Get Last 6 Publish Post from the content/blog directory import type { BlogPost } from '~/types/blog'
const { data } = await useAsyncData('trending-post', () => const { data } = await useAsyncData('trending-post', () =>
queryContent('/blogs').limit(3).sort({ _id: 1 }).find(), queryCollection('content').limit(3).all(),
) )
const formattedData = computed(() => { const formattedData = computed(() => {
return data.value?.map((articles) => { return data.value?.map((articles) => {
const meta = articles.meta as unknown as BlogPost
return { return {
path: articles._path, path: articles.path,
title: articles.title || 'no-title available', title: articles.title || 'no-title available',
description: articles.description || 'no-description available', description: articles.description || 'no-description available',
image: articles.image || '/not-found.jpg', image: meta.image || '/not-found.jpg',
alt: articles.alt || 'no alter data available', alt: meta.alt || 'no alter data available',
ogImage: articles.ogImage || '/not-found.jpg', ogImage: meta.ogImage || '/not-found.jpg',
date: articles.date || 'not-date-available', date: meta.date || 'not-date-available',
tags: articles.tags || [], tags: meta.tags || [],
published: articles.published || false, published: meta.published || false,
} }
}) })
}) })

10
content.config.ts Normal file
View File

@@ -0,0 +1,10 @@
import { defineContentConfig, defineCollection } from '@nuxt/content'
export default defineContentConfig({
collections: {
content: defineCollection({
type: 'page',
source: '**/*.md'
})
}
})

19
nuxt.config.ts
View File

@@ -11,9 +11,9 @@ export default defineNuxtConfig({
'@nuxt/eslint', '@nuxt/eslint',
'@vueuse/nuxt', '@vueuse/nuxt',
'@nuxt/content', '@nuxt/content',
'nuxt-og-image', // 'nuxt-og-image',
'@nuxtjs/robots', // '@nuxtjs/robots',
'@nuxtjs/sitemap', // '@nuxtjs/sitemap',
'@nuxtjs/color-mode', '@nuxtjs/color-mode',
'@nuxtjs/tailwindcss', '@nuxtjs/tailwindcss',
'@formkit/auto-animate', '@formkit/auto-animate',
@@ -31,9 +31,9 @@ export default defineNuxtConfig({
layoutTransition: { name: 'layout', mode: 'out-in' }, layoutTransition: { name: 'layout', mode: 'out-in' },
}, },
sitemap: { // sitemap: {
strictNuxtContentPaths: true, // strictNuxtContentPaths: true,
}, // },
site: { site: {
url: seoData.mySite, url: seoData.mySite,
@@ -61,8 +61,13 @@ export default defineNuxtConfig({
}, },
content: { content: {
build: {
markdown: {
highlight: { highlight: {
theme: 'dracula', // Theme used in all color schemes.
theme: 'github-light',
},
},
}, },
}, },
}) })

2
package.json
View File

@@ -16,7 +16,7 @@
}, },
"devDependencies": { "devDependencies": {
"@formkit/auto-animate": "^0.8.2", "@formkit/auto-animate": "^0.8.2",
"@nuxt/content": "^2.13.4", "@nuxt/content": "^3.3.0",
"@nuxt/eslint": "^0.6.1", "@nuxt/eslint": "^0.6.1",
"@nuxt/fonts": "^0.10.2", "@nuxt/fonts": "^0.10.2",
"@nuxt/image": "^1.8.0", "@nuxt/image": "^1.8.0",

10
pages/[...slug].vue
View File

@@ -9,11 +9,11 @@ useHead({
], ],
}) })
defineOgImageComponent('About', { // defineOgImageComponent('About', {
headline: 'Wrong Path', // headline: 'Wrong Path',
title: '404', // title: '404',
description: 'Page Not Found', // description: 'Page Not Found',
}) // })
</script> </script>
<template> <template>

12
pages/about.vue
View File

@@ -11,12 +11,12 @@ useHead({
], ],
}) })
defineOgImageComponent('About', { // defineOgImageComponent('About', {
headline: 'Greetings 👋', // headline: 'Greetings 👋',
title: navbarData.homeTitle, // title: navbarData.homeTitle,
description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s', // description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
link: '/riyad.jpg', // link: '/riyad.jpg',
}) // })
</script> </script>
<template> <template>

29
pages/blogs/[blog].vue
View File

@@ -5,21 +5,22 @@ import { navbarData, seoData } from '~/data'
const { path } = useRoute() const { path } = useRoute()
const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () => const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
queryContent(path).findOne(), queryCollection('content').path(path).first(),
) )
if (error.value) navigateTo('/404') if (error.value) navigateTo('/404')
const data = computed<BlogPost>(() => { const data = computed<BlogPost>(() => {
const meta = articles?.value?.meta as unknown as BlogPost
return { return {
title: articles.value?.title || 'no-title available', title: articles.value?.title || 'no-title available',
description: articles.value?.description || 'no-description available', description: articles.value?.description || 'no-description available',
image: articles.value?.image || '/not-found.jpg', image: meta?.image || '/not-found.jpg',
alt: articles.value?.alt || 'no alter data available', alt: meta?.alt || 'no alter data available',
ogImage: articles.value?.ogImage || '/not-found.jpg', ogImage: meta?.ogImage || '/not-found.jpg',
date: articles.value?.date || 'not-date-available', date: meta?.date || 'not-date-available',
tags: articles.value?.tags || [], tags: meta?.tags || [],
published: articles.value?.published || false, published: meta?.published || false,
} }
}) })
@@ -33,7 +34,7 @@ useHead({
}, },
// Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/ // Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
{ property: 'og:site_name', content: navbarData.homeTitle }, { property: 'og:site_name', content: navbarData.homeTitle },
{ hid: 'og:type', property: 'og:type', content: 'website' }, { 'http-equiv': 'og:type', property: 'og:type', content: 'website' },
{ {
property: 'og:url', property: 'og:url',
content: `${seoData.mySite}/${path}`, content: `${seoData.mySite}/${path}`,
@@ -79,12 +80,12 @@ useHead({
}) })
// Generate OG Image // Generate OG Image
defineOgImageComponent('Test', { // defineOgImageComponent('Test', {
headline: 'Greetings 👋', // headline: 'Greetings 👋',
title: data.value.title || '', // title: data.value.title || '',
description: data.value.description || '', // description: data.value.description || '',
link: data.value.ogImage, // link: data.value.ogImage,
}) // })
</script> </script>
<template> <template>

34
pages/blogs/index.vue
View File

@@ -1,7 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
import type { BlogPost } from '~/types/blog'
const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({ _id: -1 }).find()) const { data } = await useAsyncData('all-blog-post', () => queryCollection('content').all())
const elementPerPage = ref(5) const elementPerPage = ref(5)
const pageNumber = ref(1) const pageNumber = ref(1)
@@ -10,16 +11,17 @@ const searchTest = ref('')
const formattedData = computed(() => { const formattedData = computed(() => {
return ( return (
data.value?.map((articles) => { data.value?.map((articles) => {
const meta = articles.meta as unknown as BlogPost
return { return {
path: articles._path, path: articles.path,
title: articles.title || 'no-title available', title: articles.title || 'no-title available',
description: articles.description || 'no-description available', description: articles.description || 'no-description available',
image: articles.image || '/not-found.jpg', image: meta.image || '/not-found.jpg',
alt: articles.alt || 'no alter data available', alt: meta.alt || 'no alter data available',
ogImage: articles.ogImage || '/not-found.jpg', ogImage: meta.ogImage || '/not-found.jpg',
date: articles.date || 'not-date-available', date: meta.date || 'not-date-available',
tags: articles.tags || [], tags: meta.tags || [],
published: articles.published || false, published: meta.published || false,
} }
}) || [] }) || []
) )
@@ -73,14 +75,14 @@ useHead({
}) })
// Generate OG Image // Generate OG Image
const siteData = useSiteConfig() // const siteData = useSiteConfig()
defineOgImage({ // defineOgImage({
props: { // props: {
title: 'Archive', // title: 'Archive',
description: 'Here you will find all the blog posts I have written & published on this site.', // description: 'Here you will find all the blog posts I have written & published on this site.',
siteName: siteData.url, // siteName: siteData.url,
}, // },
}) // })
</script> </script>
<template> <template>

43
pages/categories/[category].vue
View File

@@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { BlogPost } from '@/types/blog'
const route = useRoute() const route = useRoute()
// take category from route params & make first char upper // take category from route params & make first char upper
@@ -12,23 +13,29 @@ const category = computed(() => {
}) })
const { data } = await useAsyncData(`category-data-${category.value}`, () => const { data } = await useAsyncData(`category-data-${category.value}`, () =>
queryContent('/blogs') queryCollection('content')
.where({ tags: { $contains: category.value } }) .all()
.find(), .then((articles) =>
articles.filter((article) => {
const meta = article.meta as unknown as BlogPost
return meta.tags.includes(category.value)
}),
),
) )
const formattedData = computed(() => { const formattedData = computed(() => {
return data.value?.map((articles) => { return data.value?.map((articles) => {
const meta = articles.meta as unknown as BlogPost
return { return {
path: articles._path, path: articles.path,
title: articles.title || 'no-title available', title: articles.title || 'no-title available',
description: articles.description || 'no-description available', description: articles.description || 'no-description available',
image: articles.image || '/blogs-img/blog.jpg', image: meta.image || '/blogs-img/blog.jpg',
alt: articles.alt || 'no alter data available', alt: meta.alt || 'no alter data available',
ogImage: articles.ogImage || '/blogs-img/blog.jpg', ogImage: meta.ogImage || '/blogs-img/blog.jpg',
date: articles.date || 'not-date-available', date: meta.date || 'not-date-available',
tags: articles.tags || [], tags: meta.tags || [],
published: articles.published || false, published: meta.published || false,
} }
}) })
}) })
@@ -44,14 +51,14 @@ useHead({
}) })
// Generate OG Image // Generate OG Image
const siteData = useSiteConfig() // const siteData = useSiteConfig()
defineOgImage({ // defineOgImage({
props: { // props: {
title: category.value?.toUpperCase(), // title: category.value?.toUpperCase(),
description: `You will find all the ${category.value} related post here`, // description: `You will find all the ${category.value} related post here`,
siteName: siteData.url, // siteName: siteData.url,
}, // },
}) // })
</script> </script>
<template> <template>

24
pages/categories/index.vue
View File

@@ -1,14 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { makeFirstCharUpper } from '@/utils/helper' import { makeFirstCharUpper } from '@/utils/helper'
const { data } = await useAsyncData('all-blog-post-for-category', () => const { data } = await useAsyncData('all-blog-post-by-category', () =>
queryContent('/blogs').sort({ _id: -1 }).find(), queryCollection('content').all(),
) )
const allTags = new Map() const allTags = new Map()
data.value?.forEach((blog) => { data.value?.forEach((blog) => {
const tags: Array<string> = blog.tags || [] const tags: Array<string> = (blog.meta.tags as string[]) || []
tags.forEach((tag) => { tags.forEach((tag) => {
if (allTags.has(tag)) { if (allTags.has(tag)) {
const cnt = allTags.get(tag) const cnt = allTags.get(tag)
@@ -31,15 +31,15 @@ useHead({
}) })
// Generate OG Image // Generate OG Image
const siteData = useSiteConfig() // const siteData = useSiteConfig()
defineOgImage({ // defineOgImage({
props: { // props: {
title: 'Categories', // title: 'Categories',
description: // description:
'Below All the topics are listed on which either I have written a blog or will write a blog in near future.', // 'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
siteName: siteData.url, // siteName: siteData.url,
}, // },
}) // })
</script> </script>
<template> <template>

14
pages/index.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { navbarData } from '~/data' // import { navbarData } from '~/data'
useHead({ useHead({
title: 'Home', title: 'Home',
@@ -13,12 +13,12 @@ useHead({
}) })
// Generate OG Image // Generate OG Image
defineOgImageComponent('About', { // defineOgImageComponent('About', {
headline: 'Greetings 👋', // headline: 'Greetings 👋',
title: navbarData.homeTitle, // title: navbarData.homeTitle,
description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s', // description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
link: '/riyad.jpg', // link: '/riyad.jpg',
}) // })
</script> </script>
<template> <template>

7034
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

37
server/routes/rss.xml.ts
View File

@@ -1,37 +0,0 @@
import { Feed } from 'feed'
import { serverQueryContent } from '#content/server'
const basePath = 'https://nurriyad.com'
export default defineEventHandler(async (event) => {
setHeader(event, 'content-type', 'text/xml')
const docs = await serverQueryContent(event).sort({ date: -1 }).find()
const feed = new Feed({
title: "Riyad's personal blog site",
description: "Riyad's personal blog site",
id: basePath,
link: basePath,
language: 'en',
favicon: `${basePath}/favicon.ico`,
copyright: 'MIT',
author: {
name: 'Al Asad Nur Riyad',
email: 'asadnurriyad@gmail.com',
link: basePath,
},
})
// Add the feed items
docs.forEach((doc) => {
feed.addItem({
title: doc.title || '',
id: basePath + doc._path,
link: basePath + doc._path,
description: doc.description,
content: doc.description,
date: new Date(doc.date),
})
})
return feed.rss2()
})