zoeissleeping/juls07.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix stale data fetching

Browse Source
This commit is contained in:
Zoe
2024-04-23 20:14:40 -05:00
parent 8edfd63628
commit 523238ca99
3 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/MiniBlogCard.vue
View File

@@ -9,7 +9,7 @@ const props = defineProps({
<template> <template>
<NuxtLink :to="props.to" <NuxtLink :to="props.to"
class="py-8 px-6 border-[#ECE6E7] dark:border-[#232326] border rounded-lg hover:dark:bg-obsidian-night hover:bg-[hsl(270,68%,95.71%)] hover:transition-colors select-none" class="py-8 px-6 border-[#ECE6E7] dark:border-[#232326] border rounded-lg hover:dark:bg-obsidian-night hover:bg-[hsl(270,68%,95.71%)] hover:transition-colors select-none block"
:class="props.rightAlign ? 'text-right' : ''"> :class="props.rightAlign ? 'text-right' : ''">
<div <div
class="p-1.5 inline-flex bg-[#ECE6E7] dark:bg-[#1A1A1D] rounded-full mb-4 border border-gray-300/80 dark:border-neutral-800/70"> class="p-1.5 inline-flex bg-[#ECE6E7] dark:bg-[#1A1A1D] rounded-full mb-4 border border-gray-300/80 dark:border-neutral-800/70">

10
nuxt.config.ts
View File

@@ -69,4 +69,14 @@ export default defineNuxtConfig({
autoprefixer: {}, autoprefixer: {},
}, },
}, },
router: {
options: {
strict: false
}
},
sourcemap: false,
ssr: true
}) })

22
pages/blog/[...slug].vue
View File

@@ -7,8 +7,9 @@ const location = useBrowserLocation()
let year = new Date().getFullYear(); let year = new Date().getFullYear();
let route = useRoute(); let route = useRoute();
const { data: doc } = await useAsyncData('blog', () => queryContent(route.path).findOne()) // cant use "useAsyncData" here for some reason because it leads to the posts not rendering correctly
if (!doc.value) { const doc = await queryContent(route.path).findOne()
if (!doc) {
throw createError({ statusCode: 404, statusMessage: 'Article not found', fatal: true }) throw createError({ statusCode: 404, statusMessage: 'Article not found', fatal: true })
} }
@@ -96,7 +97,8 @@ useHead({
<Nav /> <Nav />
<div class="grid grid-cols-12 gap-x-5 justify-center pt-6 mb-4 relative"> <div class="grid grid-cols-12 gap-x-5 justify-center pt-6 mb-4 relative">
<div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-1"> <div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-1">
<NuxtImg :src="doc.image.src" class="mb-2 rounded-md drop-shadow w-full" quality="80" /> <NuxtImg v-if="doc.image" :src="doc.image.src" class="mb-2 rounded-md drop-shadow w-full"
quality="80" />
<h1 class="text-3xl dark:text-gray-100 md:text-4xl font-semibold mb-2">{{ doc.title }}</h1> <h1 class="text-3xl dark:text-gray-100 md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
<p class="mb-1 dark:text-zinc-400 text-zinc-600"> <p class="mb-1 dark:text-zinc-400 text-zinc-600">
{{ doc.description }} {{ doc.description }}
@@ -130,14 +132,12 @@ useHead({
Copy Link Copy Link
</button> </button>
</div> </div>
<div v-if="surround"> <hr class="my-6 border-[#ECE6E7] dark:border-[#232326] border-t" />
<hr class="my-6 border-[#ECE6E7] dark:border-[#232326] border-t" /> <div v-if="surround" class="sm:grid gap-8 sm:grid-cols-2">
<div class="grid gap-8 grid-cols-1 sm:grid-cols-2"> <MiniBlogCard v-if="surround[0]" :to="surround[0]._path" :title="surround[0].title"
<MiniBlogCard v-if="surround[0]" :to="surround[0]._path" :title="surround[0].title" :description="surround[0].description" />
:description="surround[0].description" /> <MiniBlogCard class="col-start-2" v-if="surround[1]" :to="surround[1]._path"
<MiniBlogCard class="col-start-2" v-if="surround[1]" :to="surround[1]._path" :title="surround[1].title" :right-align="true" :description="surround[1].description" />
:title="surround[1].title" :right-align="true" :description="surround[1].description" />
</div>
</div> </div>
</div> </div>
</div> </div>