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">
const { path } = useRoute()
const articles = await queryContent(path).findOne()
const articles = await queryCollection('content').path(path).first()
const links = articles?.body?.toc?.links || []
</script>

37
components/main/recent.vue
View File

@@ -1,21 +1,42 @@
<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
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(() => {
return data.value?.map((articles) => {
const meta = articles.meta as unknown as BlogPost
return {
path: articles._path,
path: articles.path,
title: articles.title || 'no-title available',
description: articles.description || 'no-description available',
image: articles.image || '/not-found.jpg',
alt: articles.alt || 'no alter data available',
ogImage: articles.ogImage || '/not-found.jpg',
date: articles.date || 'not-date-available',
tags: articles.tags || [],
published: articles.published || false,
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,
}
})
})

20
components/main/trending.vue
View File

@@ -1,21 +1,23 @@
<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', () =>
queryContent('/blogs').limit(3).sort({ _id: 1 }).find(),
queryCollection('content').limit(3).all(),
)
const formattedData = computed(() => {
return data.value?.map((articles) => {
const meta = articles.meta as unknown as BlogPost
return {
path: articles._path,
path: articles.path,
title: articles.title || 'no-title available',
description: articles.description || 'no-description available',
image: articles.image || '/not-found.jpg',
alt: articles.alt || 'no alter data available',
ogImage: articles.ogImage || '/not-found.jpg',
date: articles.date || 'not-date-available',
tags: articles.tags || [],
published: articles.published || false,
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,
}
})
})

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

2
package.json
View File

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

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

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

12
pages/about.vue
View File

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

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

@@ -5,21 +5,22 @@ import { navbarData, seoData } from '~/data'
const { path } = useRoute()
const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
queryContent(path).findOne(),
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: articles.value?.image || '/not-found.jpg',
alt: articles.value?.alt || 'no alter data available',
ogImage: articles.value?.ogImage || '/not-found.jpg',
date: articles.value?.date || 'not-date-available',
tags: articles.value?.tags || [],
published: articles.value?.published || false,
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,
}
})
@@ -33,7 +34,7 @@ useHead({
},
// Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
{ 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',
content: `${seoData.mySite}/${path}`,
@@ -79,12 +80,12 @@ useHead({
})
// Generate OG Image
defineOgImageComponent('Test', {
headline: 'Greetings 👋',
title: data.value.title || '',
description: data.value.description || '',
link: data.value.ogImage,
})
// defineOgImageComponent('Test', {
// headline: 'Greetings 👋',
// title: data.value.title || '',
// description: data.value.description || '',
// link: data.value.ogImage,
// })
</script>
<template>

34
pages/blogs/index.vue
View File

@@ -1,7 +1,8 @@
<script lang="ts" setup>
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 pageNumber = ref(1)
@@ -10,16 +11,17 @@ const searchTest = ref('')
const formattedData = computed(() => {
return (
data.value?.map((articles) => {
const meta = articles.meta as unknown as BlogPost
return {
path: articles._path,
path: articles.path,
title: articles.title || 'no-title available',
description: articles.description || 'no-description available',
image: articles.image || '/not-found.jpg',
alt: articles.alt || 'no alter data available',
ogImage: articles.ogImage || '/not-found.jpg',
date: articles.date || 'not-date-available',
tags: articles.tags || [],
published: articles.published || false,
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,
}
}) || []
)
@@ -73,14 +75,14 @@ useHead({
})
// 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,
},
})
// 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>

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

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

24
pages/categories/index.vue
View File

@@ -1,14 +1,14 @@
<script lang="ts" setup>
import { makeFirstCharUpper } from '@/utils/helper'
const { data } = await useAsyncData('all-blog-post-for-category', () =>
queryContent('/blogs').sort({ _id: -1 }).find(),
const { data } = await useAsyncData('all-blog-post-by-category', () =>
queryCollection('content').all(),
)
const allTags = new Map()
data.value?.forEach((blog) => {
const tags: Array<string> = blog.tags || []
const tags: Array<string> = (blog.meta.tags as string[]) || []
tags.forEach((tag) => {
if (allTags.has(tag)) {
const cnt = allTags.get(tag)
@@ -31,15 +31,15 @@ useHead({
})
// Generate OG Image
const siteData = useSiteConfig()
defineOgImage({
props: {
title: 'Categories',
description:
'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,
},
})
// const siteData = useSiteConfig()
// defineOgImage({
// props: {
// title: 'Categories',
// description:
// '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,
// },
// })
</script>
<template>

14
pages/index.vue
View File

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