jaron/folio
1
0
Fork 0
mirror of https://github.com/jaronpate/folio.git synced 2026-10-19 01:07:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

writing folders working

Browse Source
This commit is contained in:
Jaron
2026-08-22 12:43:00 -05:00
parent b0cd2a38b3
commit 80e7f567af
4 changed files with 240 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/WritingList.vue
+93
View File
@@ -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>
app/pages/writing/[...slug].vue
+146 -106
View File
@@ -12,130 +12,167 @@ const articleUrl = `${SITE_URL}${route.path}`;
const webpageId = `${articleUrl}#webpage`; const webpageId = `${articleUrl}#webpage`;
const articleId = `${articleUrl}#article`; const articleId = `${articleUrl}#article`;
const blogId = `${SITE_URL}/writing#blog`; const blogId = `${SITE_URL}/writing#blog`;
const contentPath = const slug = computed(() =>
'/' + Array.isArray(route.params.slug)
(Array.isArray(route.params.slug)
? route.params.slug.join('/') ? 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, () => { const { data } = await useAsyncData(
return queryCollection('writing').path(contentPath).first(); () => `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' }); throw createError({ statusCode: 404, statusMessage: 'Page Not Found' });
} }
const articleTitle = page.value.title; const page = computed(() => data.value?.article ?? null);
const articleDescription = page.value.description; const isFolder = computed(() => data.value?.kind === 'folder');
const articleTitle = page.value?.title ?? folderName.value;
const articleDescription = page.value?.description ?? '';
useSeoMeta({ useSeoMeta({
title: articleTitle, title: articleTitle,
ogTitle: articleTitle, ogTitle: articleTitle,
description: articleDescription, description: articleDescription || articleTitle,
ogDescription: articleDescription, ogDescription: articleDescription || articleTitle,
ogUrl: articleUrl, ogUrl: articleUrl,
ogType: 'article', ogType: isFolder.value ? 'website' : 'article',
ogImage: DEFAULT_IMAGE, ogImage: DEFAULT_IMAGE,
ogImageAlt: articleTitle, ogImageAlt: articleTitle,
twitterCard: 'summary', twitterCard: 'summary',
twitterTitle: articleTitle, twitterTitle: articleTitle,
twitterDescription: articleDescription, twitterDescription: articleDescription || articleTitle,
twitterImage: DEFAULT_IMAGE, twitterImage: DEFAULT_IMAGE,
articlePublishedTime: new Date(page.value.date).toISOString(), articlePublishedTime: page.value
articleModifiedTime: new Date(page.value.date).toISOString(), ? new Date(page.value.date).toISOString()
articleAuthor: [SITE_NAME], : undefined,
articleModifiedTime: page.value
? new Date(page.value.date).toISOString()
: undefined,
articleAuthor: page.value ? [SITE_NAME] : undefined,
}); });
useHead({ useHead({
link: [{ rel: 'canonical', href: articleUrl }], link: [{ rel: 'canonical', href: articleUrl }],
script: [ script: page.value
{ ? [
key: 'json-ld-article', {
type: 'application/ld+json', key: 'json-ld-article',
innerHTML: JSON.stringify({ type: 'application/ld+json',
'@context': 'https://schema.org', innerHTML: JSON.stringify({
'@graph': [ '@context': 'https://schema.org',
{ '@graph': [
'@type': 'WebPage', {
'@id': webpageId, '@type': 'WebPage',
url: articleUrl, '@id': webpageId,
name: articleTitle, url: articleUrl,
description: articleDescription, name: articleTitle,
inLanguage: 'en-US', description: articleDescription,
isPartOf: { '@id': websiteId }, inLanguage: 'en-US',
breadcrumb: { '@id': `${articleUrl}#breadcrumb` }, isPartOf: { '@id': websiteId },
mainEntity: { '@id': articleId }, breadcrumb: { '@id': `${articleUrl}#breadcrumb` },
}, mainEntity: { '@id': articleId },
{ },
'@type': 'Blog', {
'@id': blogId, '@type': 'Blog',
url: `${SITE_URL}/writing`, '@id': blogId,
name: 'Jaron Pate Writing', url: `${SITE_URL}/writing`,
inLanguage: 'en-US', name: 'Jaron Pate Writing',
isPartOf: { '@id': websiteId }, inLanguage: 'en-US',
publisher: { isPartOf: { '@id': websiteId },
'@type': 'Person', publisher: {
'@id': personId, '@type': 'Person',
name: SITE_NAME, '@id': personId,
}, name: SITE_NAME,
}, },
{ },
'@type': 'BlogPosting', {
'@id': articleId, '@type': 'BlogPosting',
url: articleUrl, '@id': articleId,
headline: articleTitle, url: articleUrl,
description: articleDescription, headline: articleTitle,
datePublished: new Date(page.value.date).toISOString(), description: articleDescription,
dateModified: new Date(page.value.date).toISOString(), datePublished: new Date(
image: { page.value.date,
'@type': 'ImageObject', ).toISOString(),
'@id': `${articleUrl}#article-image`, dateModified: new Date(
url: DEFAULT_IMAGE, page.value.date,
}, ).toISOString(),
inLanguage: 'en-US', image: {
isPartOf: { '@id': blogId }, '@type': 'ImageObject',
mainEntityOfPage: { '@id': webpageId }, '@id': `${articleUrl}#article-image`,
author: { url: DEFAULT_IMAGE,
'@type': 'Person', },
'@id': personId, inLanguage: 'en-US',
name: SITE_NAME, isPartOf: { '@id': blogId },
url: SITE_URL, mainEntityOfPage: { '@id': webpageId },
}, author: {
publisher: { '@type': 'Person',
'@type': 'Person', '@id': personId,
'@id': personId, name: SITE_NAME,
name: SITE_NAME, url: SITE_URL,
}, },
}, publisher: {
{ '@type': 'Person',
'@type': 'BreadcrumbList', '@id': personId,
'@id': `${articleUrl}#breadcrumb`, name: SITE_NAME,
itemListElement: [ },
{ },
'@type': 'ListItem', {
position: 1, '@type': 'BreadcrumbList',
name: 'Home', '@id': `${articleUrl}#breadcrumb`,
item: SITE_URL, itemListElement: [
}, {
{ '@type': 'ListItem',
'@type': 'ListItem', position: 1,
position: 2, name: 'Home',
name: 'Writing', item: SITE_URL,
item: `${SITE_URL}/writing`, },
}, {
{ '@type': 'ListItem',
'@type': 'ListItem', position: 2,
position: 3, name: 'Writing',
name: articleTitle, item: `${SITE_URL}/writing`,
item: articleUrl, },
}, {
], '@type': 'ListItem',
}, position: 3,
], name: articleTitle,
}), item: articleUrl,
}, },
], ],
},
],
}),
},
]
: [],
}); });
const formatDate = (date: Date | string) => { const formatDate = (date: Date | string) => {
@@ -155,8 +192,8 @@ definePageMeta({
<template> <template>
<NuxtLayout <NuxtLayout
name="main" name="main"
:title="page.title" :title="page ? page.title : folderName"
:description="formatDate(page.date)" :description="page ? formatDate(page.date) : `Writing from ${folderName}`"
> >
<article v-if="page"> <article v-if="page">
<div class="article-body"> <div class="article-body">
@@ -166,5 +203,8 @@ definePageMeta({
<ContentRenderer :value="page" /> <ContentRenderer :value="page" />
</div> </div>
</article> </article>
<article v-else>
<WritingList :pages="data?.pages ?? []" />
</article>
</NuxtLayout> </NuxtLayout>
</template> </template>
app/pages/writing/index.vue
+1 -73
View File
@@ -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({ definePageMeta({
layout: false, layout: false,
}); });
@@ -134,70 +125,7 @@ definePageMeta({
description="Thoughts I've had here and there. Maybe you'll find something helpful or interesting here." description="Thoughts I've had here and there. Maybe you'll find something helpful or interesting here."
> >
<article> <article>
<template v-if="pages?.length"> <WritingList :pages="pages ?? []" />
<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>
</article> </article>
</NuxtLayout> </NuxtLayout>
</template> </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>
content/writing/frontend_developers_are_underpaid.md → content/writing/2026/frontend_developers_are_underpaid.md
View File