mirror of
https://github.com/jaronpate/folio.git
synced 2026-10-18 17:06:56 +00:00
writing folders working
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
pages: Array<{
|
||||
path: string;
|
||||
title: string;
|
||||
date: string | Date;
|
||||
}>;
|
||||
}>();
|
||||
|
||||
const formatDate = (dateString: string | Date) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
timeZone: 'UTC',
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="pages.length">
|
||||
<NuxtLink
|
||||
v-for="page in pages"
|
||||
:key="page.path"
|
||||
:to="'/writing' + page.path"
|
||||
class="listing"
|
||||
>
|
||||
<span class="listing__title">{{ page.title }}</span>
|
||||
<span class="listing__rule" aria-hidden="true"></span>
|
||||
<time :datetime="new Date(page.date).toISOString()">{{
|
||||
formatDate(page.date)
|
||||
}}</time>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<p v-else class="empty-state">No thoughts...head empty</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.listing {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
margin: 0 0 0.65rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.listing:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.listing:hover .listing__title {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.listing__title {
|
||||
flex-shrink: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.listing__rule {
|
||||
flex: 1 1 auto;
|
||||
min-width: 1.25rem;
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
transform: translateY(-0.35em);
|
||||
}
|
||||
|
||||
.listing time {
|
||||
flex-shrink: 0;
|
||||
font-family: var(--font-plain);
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.listing {
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.listing__rule {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+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>
|
||||
|
||||
@@ -113,15 +113,6 @@ useHead({
|
||||
],
|
||||
});
|
||||
|
||||
const formatDate = (dateString: string | Date) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
timeZone: 'UTC',
|
||||
});
|
||||
};
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
});
|
||||
@@ -134,70 +125,7 @@ definePageMeta({
|
||||
description="Thoughts I've had here and there. Maybe you'll find something helpful or interesting here."
|
||||
>
|
||||
<article>
|
||||
<template v-if="pages?.length">
|
||||
<NuxtLink
|
||||
v-for="page in pages"
|
||||
:key="page.path"
|
||||
:to="'/writing' + page.path"
|
||||
class="listing"
|
||||
>
|
||||
<span class="listing__title">{{ page.title }}</span>
|
||||
<time :datetime="new Date(page.date).toISOString()">{{
|
||||
formatDate(page.date)
|
||||
}}</time>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<p v-else class="empty-state">No thoughts...head empty</p>
|
||||
<WritingList :pages="pages ?? []" />
|
||||
</article>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.listing {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 1rem;
|
||||
margin: 0 0 0.65rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.listing:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.listing:hover .listing__title {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.listing__title {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.listing time {
|
||||
margin-left: auto;
|
||||
font-family: var(--font-plain);
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.listing {
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.listing time {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user