mirror of
https://github.com/jaronpate/folio.git
synced 2026-10-19 01:07:39 +00:00
writing folders working
This commit is contained in:
+146
-106
@@ -12,130 +12,167 @@ const articleUrl = `${SITE_URL}${route.path}`;
|
||||
const webpageId = `${articleUrl}#webpage`;
|
||||
const articleId = `${articleUrl}#article`;
|
||||
const blogId = `${SITE_URL}/writing#blog`;
|
||||
const contentPath =
|
||||
'/' +
|
||||
(Array.isArray(route.params.slug)
|
||||
const slug = computed(() =>
|
||||
Array.isArray(route.params.slug)
|
||||
? route.params.slug.join('/')
|
||||
: String(route.params.slug ?? ''));
|
||||
: String(route.params.slug ?? ''),
|
||||
);
|
||||
const contentPath = computed(() => '/' + slug.value);
|
||||
const folderName = computed(
|
||||
() => slug.value.split('/').filter(Boolean).at(-1) ?? slug.value,
|
||||
);
|
||||
|
||||
const { data: page } = await useAsyncData(route.path, () => {
|
||||
return queryCollection('writing').path(contentPath).first();
|
||||
});
|
||||
const { data } = await useAsyncData(
|
||||
() => `writing:${route.path}`,
|
||||
async () => {
|
||||
const all = await queryCollection('writing').order('date', 'DESC').all();
|
||||
const visible = all.filter((page) => import.meta.dev || !page.demo);
|
||||
const article = visible.find(
|
||||
(page) =>
|
||||
page.path === contentPath.value || page.stem === slug.value,
|
||||
);
|
||||
|
||||
if (!page.value) {
|
||||
if (article) {
|
||||
return { kind: 'article' as const, article, pages: [] };
|
||||
}
|
||||
|
||||
const prefix = contentPath.value.endsWith('/')
|
||||
? contentPath.value
|
||||
: `${contentPath.value}/`;
|
||||
const pages = visible.filter((page) => page.path.startsWith(prefix));
|
||||
|
||||
if (!pages.length) return null;
|
||||
return { kind: 'folder' as const, article: null, pages };
|
||||
},
|
||||
{ watch: [() => route.path] },
|
||||
);
|
||||
|
||||
if (!data.value) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'Page Not Found' });
|
||||
}
|
||||
|
||||
const articleTitle = page.value.title;
|
||||
const articleDescription = page.value.description;
|
||||
const page = computed(() => data.value?.article ?? null);
|
||||
const isFolder = computed(() => data.value?.kind === 'folder');
|
||||
const articleTitle = page.value?.title ?? folderName.value;
|
||||
const articleDescription = page.value?.description ?? '';
|
||||
|
||||
useSeoMeta({
|
||||
title: articleTitle,
|
||||
ogTitle: articleTitle,
|
||||
description: articleDescription,
|
||||
ogDescription: articleDescription,
|
||||
description: articleDescription || articleTitle,
|
||||
ogDescription: articleDescription || articleTitle,
|
||||
ogUrl: articleUrl,
|
||||
ogType: 'article',
|
||||
ogType: isFolder.value ? 'website' : 'article',
|
||||
ogImage: DEFAULT_IMAGE,
|
||||
ogImageAlt: articleTitle,
|
||||
twitterCard: 'summary',
|
||||
twitterTitle: articleTitle,
|
||||
twitterDescription: articleDescription,
|
||||
twitterDescription: articleDescription || articleTitle,
|
||||
twitterImage: DEFAULT_IMAGE,
|
||||
articlePublishedTime: new Date(page.value.date).toISOString(),
|
||||
articleModifiedTime: new Date(page.value.date).toISOString(),
|
||||
articleAuthor: [SITE_NAME],
|
||||
articlePublishedTime: page.value
|
||||
? new Date(page.value.date).toISOString()
|
||||
: undefined,
|
||||
articleModifiedTime: page.value
|
||||
? new Date(page.value.date).toISOString()
|
||||
: undefined,
|
||||
articleAuthor: page.value ? [SITE_NAME] : undefined,
|
||||
});
|
||||
|
||||
useHead({
|
||||
link: [{ rel: 'canonical', href: articleUrl }],
|
||||
script: [
|
||||
{
|
||||
key: 'json-ld-article',
|
||||
type: 'application/ld+json',
|
||||
innerHTML: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@graph': [
|
||||
{
|
||||
'@type': 'WebPage',
|
||||
'@id': webpageId,
|
||||
url: articleUrl,
|
||||
name: articleTitle,
|
||||
description: articleDescription,
|
||||
inLanguage: 'en-US',
|
||||
isPartOf: { '@id': websiteId },
|
||||
breadcrumb: { '@id': `${articleUrl}#breadcrumb` },
|
||||
mainEntity: { '@id': articleId },
|
||||
},
|
||||
{
|
||||
'@type': 'Blog',
|
||||
'@id': blogId,
|
||||
url: `${SITE_URL}/writing`,
|
||||
name: 'Jaron Pate Writing',
|
||||
inLanguage: 'en-US',
|
||||
isPartOf: { '@id': websiteId },
|
||||
publisher: {
|
||||
'@type': 'Person',
|
||||
'@id': personId,
|
||||
name: SITE_NAME,
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'BlogPosting',
|
||||
'@id': articleId,
|
||||
url: articleUrl,
|
||||
headline: articleTitle,
|
||||
description: articleDescription,
|
||||
datePublished: new Date(page.value.date).toISOString(),
|
||||
dateModified: new Date(page.value.date).toISOString(),
|
||||
image: {
|
||||
'@type': 'ImageObject',
|
||||
'@id': `${articleUrl}#article-image`,
|
||||
url: DEFAULT_IMAGE,
|
||||
},
|
||||
inLanguage: 'en-US',
|
||||
isPartOf: { '@id': blogId },
|
||||
mainEntityOfPage: { '@id': webpageId },
|
||||
author: {
|
||||
'@type': 'Person',
|
||||
'@id': personId,
|
||||
name: SITE_NAME,
|
||||
url: SITE_URL,
|
||||
},
|
||||
publisher: {
|
||||
'@type': 'Person',
|
||||
'@id': personId,
|
||||
name: SITE_NAME,
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'BreadcrumbList',
|
||||
'@id': `${articleUrl}#breadcrumb`,
|
||||
itemListElement: [
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 1,
|
||||
name: 'Home',
|
||||
item: SITE_URL,
|
||||
},
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 2,
|
||||
name: 'Writing',
|
||||
item: `${SITE_URL}/writing`,
|
||||
},
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 3,
|
||||
name: articleTitle,
|
||||
item: articleUrl,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
],
|
||||
script: page.value
|
||||
? [
|
||||
{
|
||||
key: 'json-ld-article',
|
||||
type: 'application/ld+json',
|
||||
innerHTML: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@graph': [
|
||||
{
|
||||
'@type': 'WebPage',
|
||||
'@id': webpageId,
|
||||
url: articleUrl,
|
||||
name: articleTitle,
|
||||
description: articleDescription,
|
||||
inLanguage: 'en-US',
|
||||
isPartOf: { '@id': websiteId },
|
||||
breadcrumb: { '@id': `${articleUrl}#breadcrumb` },
|
||||
mainEntity: { '@id': articleId },
|
||||
},
|
||||
{
|
||||
'@type': 'Blog',
|
||||
'@id': blogId,
|
||||
url: `${SITE_URL}/writing`,
|
||||
name: 'Jaron Pate Writing',
|
||||
inLanguage: 'en-US',
|
||||
isPartOf: { '@id': websiteId },
|
||||
publisher: {
|
||||
'@type': 'Person',
|
||||
'@id': personId,
|
||||
name: SITE_NAME,
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'BlogPosting',
|
||||
'@id': articleId,
|
||||
url: articleUrl,
|
||||
headline: articleTitle,
|
||||
description: articleDescription,
|
||||
datePublished: new Date(
|
||||
page.value.date,
|
||||
).toISOString(),
|
||||
dateModified: new Date(
|
||||
page.value.date,
|
||||
).toISOString(),
|
||||
image: {
|
||||
'@type': 'ImageObject',
|
||||
'@id': `${articleUrl}#article-image`,
|
||||
url: DEFAULT_IMAGE,
|
||||
},
|
||||
inLanguage: 'en-US',
|
||||
isPartOf: { '@id': blogId },
|
||||
mainEntityOfPage: { '@id': webpageId },
|
||||
author: {
|
||||
'@type': 'Person',
|
||||
'@id': personId,
|
||||
name: SITE_NAME,
|
||||
url: SITE_URL,
|
||||
},
|
||||
publisher: {
|
||||
'@type': 'Person',
|
||||
'@id': personId,
|
||||
name: SITE_NAME,
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'BreadcrumbList',
|
||||
'@id': `${articleUrl}#breadcrumb`,
|
||||
itemListElement: [
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 1,
|
||||
name: 'Home',
|
||||
item: SITE_URL,
|
||||
},
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 2,
|
||||
name: 'Writing',
|
||||
item: `${SITE_URL}/writing`,
|
||||
},
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 3,
|
||||
name: articleTitle,
|
||||
item: articleUrl,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
]
|
||||
: [],
|
||||
});
|
||||
|
||||
const formatDate = (date: Date | string) => {
|
||||
@@ -155,8 +192,8 @@ definePageMeta({
|
||||
<template>
|
||||
<NuxtLayout
|
||||
name="main"
|
||||
:title="page.title"
|
||||
:description="formatDate(page.date)"
|
||||
:title="page ? page.title : folderName"
|
||||
:description="page ? formatDate(page.date) : `Writing from ${folderName}`"
|
||||
>
|
||||
<article v-if="page">
|
||||
<div class="article-body">
|
||||
@@ -166,5 +203,8 @@ definePageMeta({
|
||||
<ContentRenderer :value="page" />
|
||||
</div>
|
||||
</article>
|
||||
<article v-else>
|
||||
<WritingList :pages="data?.pages ?? []" />
|
||||
</article>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user