jaron/folio
1
0
Fork 0
mirror of https://github.com/jaronpate/folio.git synced 2026-10-18 17:06:56 +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
+63 -23
View File
@@ -12,44 +12,76 @@ 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: [
script: page.value
? [
{
key: 'json-ld-article',
type: 'application/ld+json',
@@ -86,8 +118,12 @@ useHead({
url: articleUrl,
headline: articleTitle,
description: articleDescription,
datePublished: new Date(page.value.date).toISOString(),
dateModified: new Date(page.value.date).toISOString(),
datePublished: new Date(
page.value.date,
).toISOString(),
dateModified: new Date(
page.value.date,
).toISOString(),
image: {
'@type': 'ImageObject',
'@id': `${articleUrl}#article-image`,
@@ -135,7 +171,8 @@ useHead({
],
}),
},
],
]
: [],
});
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>
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({
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>
content/writing/frontend_developers_are_underpaid.md → content/writing/2026/frontend_developers_are_underpaid.md
View File