mirror of
https://github.com/jaronpate/folio.git
synced 2026-10-19 01:07:39 +00:00
projects page and unicord post
This commit is contained in:
@@ -0,0 +1,197 @@
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
DEFAULT_IMAGE,
|
||||
SITE_NAME,
|
||||
SITE_URL,
|
||||
personId,
|
||||
websiteId,
|
||||
} from '~/utils/site';
|
||||
import {
|
||||
isExternalHref,
|
||||
projectEntryHref,
|
||||
projectOgImage,
|
||||
} from '~/utils/projects';
|
||||
|
||||
const route = useRoute();
|
||||
const pageUrl = `${SITE_URL}${route.path}`;
|
||||
const webpageId = `${pageUrl}#webpage`;
|
||||
const workId = `${pageUrl}#work`;
|
||||
const slug = computed(() => {
|
||||
const raw = Array.isArray(route.params.slug)
|
||||
? route.params.slug.join('/')
|
||||
: String(route.params.slug ?? '');
|
||||
return raw.replace(/\/+$/, '');
|
||||
});
|
||||
const contentPath = computed(() => '/' + slug.value);
|
||||
const folderName = computed(
|
||||
() => slug.value.split('/').filter(Boolean).at(-1) ?? slug.value,
|
||||
);
|
||||
|
||||
const { data } = await useAsyncData(
|
||||
() => `projects:${route.path}`,
|
||||
async () => {
|
||||
const all = await queryCollection('projects').order('title', 'ASC').all();
|
||||
const visible = all.filter((page) => import.meta.dev || !page.hidden);
|
||||
const project = visible.find(
|
||||
(page) =>
|
||||
page.path === contentPath.value || page.stem === slug.value,
|
||||
);
|
||||
|
||||
if (project) {
|
||||
return { kind: 'project' as const, project, 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, project: null, pages };
|
||||
},
|
||||
{ watch: [() => route.path] },
|
||||
);
|
||||
|
||||
if (!data.value) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'Page Not Found' });
|
||||
}
|
||||
|
||||
const page = computed(() => data.value?.project ?? null);
|
||||
const isFolder = computed(() => data.value?.kind === 'folder');
|
||||
const projectTitle = page.value?.title ?? folderName.value;
|
||||
const projectDescription = page.value?.description ?? '';
|
||||
const liveHref = computed(() => page.value?.href ?? '');
|
||||
const ogImage = projectOgImage(
|
||||
page.value?.image,
|
||||
SITE_URL,
|
||||
DEFAULT_IMAGE,
|
||||
);
|
||||
|
||||
useSeoMeta({
|
||||
title: projectTitle,
|
||||
ogTitle: projectTitle,
|
||||
description: projectDescription || projectTitle,
|
||||
ogDescription: projectDescription || projectTitle,
|
||||
ogUrl: pageUrl,
|
||||
ogType: isFolder.value ? 'website' : 'article',
|
||||
ogImage,
|
||||
ogImageAlt: projectTitle,
|
||||
twitterCard: 'summary',
|
||||
twitterTitle: projectTitle,
|
||||
twitterDescription: projectDescription || projectTitle,
|
||||
twitterImage: ogImage,
|
||||
});
|
||||
|
||||
useHead({
|
||||
link: [{ rel: 'canonical', href: pageUrl }],
|
||||
script: page.value
|
||||
? [
|
||||
{
|
||||
key: 'json-ld-project',
|
||||
type: 'application/ld+json',
|
||||
innerHTML: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@graph': [
|
||||
{
|
||||
'@type': 'WebPage',
|
||||
'@id': webpageId,
|
||||
url: pageUrl,
|
||||
name: projectTitle,
|
||||
description: projectDescription,
|
||||
inLanguage: 'en-US',
|
||||
isPartOf: { '@id': websiteId },
|
||||
breadcrumb: { '@id': `${pageUrl}#breadcrumb` },
|
||||
mainEntity: { '@id': workId },
|
||||
},
|
||||
{
|
||||
'@type': 'CreativeWork',
|
||||
'@id': workId,
|
||||
url: isExternalHref(projectEntryHref(page.value))
|
||||
? projectEntryHref(page.value)
|
||||
: pageUrl,
|
||||
name: projectTitle,
|
||||
description: projectDescription,
|
||||
image: {
|
||||
'@type': 'ImageObject',
|
||||
'@id': `${pageUrl}#work-image`,
|
||||
url: ogImage,
|
||||
},
|
||||
inLanguage: 'en-US',
|
||||
mainEntityOfPage: { '@id': webpageId },
|
||||
author: {
|
||||
'@type': 'Person',
|
||||
'@id': personId,
|
||||
name: SITE_NAME,
|
||||
url: SITE_URL,
|
||||
},
|
||||
creator: {
|
||||
'@type': 'Person',
|
||||
'@id': personId,
|
||||
name: SITE_NAME,
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'BreadcrumbList',
|
||||
'@id': `${pageUrl}#breadcrumb`,
|
||||
itemListElement: [
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 1,
|
||||
name: 'Home',
|
||||
item: SITE_URL,
|
||||
},
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 2,
|
||||
name: 'Projects',
|
||||
item: `${SITE_URL}/projects`,
|
||||
},
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 3,
|
||||
name: projectTitle,
|
||||
item: pageUrl,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
]
|
||||
: [],
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLayout
|
||||
name="main"
|
||||
:title="page ? page.title : folderName"
|
||||
:description="
|
||||
page ? page.description : `Projects from ${folderName}`
|
||||
"
|
||||
>
|
||||
<article v-if="page">
|
||||
<div class="article-body">
|
||||
<p v-if="page.description">
|
||||
<strong>{{ page.description }}</strong>
|
||||
</p>
|
||||
<ContentRenderer :value="page" />
|
||||
<p v-if="liveHref">
|
||||
<a
|
||||
:href="liveHref"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>See it live ↗</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article v-else>
|
||||
<ProjectList :pages="data?.pages ?? []" />
|
||||
</article>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,121 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
DEFAULT_IMAGE,
|
||||
SITE_NAME,
|
||||
SITE_URL,
|
||||
personId,
|
||||
websiteId,
|
||||
} from '~/utils/site';
|
||||
import { isExternalHref, projectEntryHref } from '~/utils/projects';
|
||||
|
||||
const { data: pages } = await useAsyncData('project-pages', async () => {
|
||||
const all = await queryCollection('projects').order('title', 'ASC').all();
|
||||
return import.meta.dev ? all : all.filter((page) => !page.hidden);
|
||||
});
|
||||
|
||||
const projectsUrl = `${SITE_URL}/projects`;
|
||||
const collectionId = `${projectsUrl}#collection`;
|
||||
const listId = `${projectsUrl}#list`;
|
||||
const projectsTitle = 'Projects';
|
||||
const projectsDescription =
|
||||
"Things I've made. Some for work, some because I wanted them to exist.";
|
||||
|
||||
useSeoMeta({
|
||||
title: projectsTitle,
|
||||
ogTitle: projectsTitle,
|
||||
description: projectsDescription,
|
||||
ogDescription: projectsDescription,
|
||||
ogUrl: projectsUrl,
|
||||
ogType: 'website',
|
||||
ogImage: DEFAULT_IMAGE,
|
||||
ogImageAlt: projectsTitle,
|
||||
twitterCard: 'summary',
|
||||
twitterTitle: projectsTitle,
|
||||
twitterDescription: projectsDescription,
|
||||
twitterImage: DEFAULT_IMAGE,
|
||||
});
|
||||
|
||||
useHead({
|
||||
link: [{ rel: 'canonical', href: projectsUrl }],
|
||||
script: [
|
||||
{
|
||||
key: 'json-ld-projects',
|
||||
type: 'application/ld+json',
|
||||
innerHTML: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@graph': [
|
||||
{
|
||||
'@type': 'CollectionPage',
|
||||
'@id': collectionId,
|
||||
url: projectsUrl,
|
||||
name: projectsTitle,
|
||||
description: projectsDescription,
|
||||
inLanguage: 'en-US',
|
||||
isPartOf: { '@id': websiteId },
|
||||
author: {
|
||||
'@type': 'Person',
|
||||
'@id': personId,
|
||||
name: SITE_NAME,
|
||||
},
|
||||
mainEntity: { '@id': listId },
|
||||
breadcrumb: { '@id': `${collectionId}#breadcrumb` },
|
||||
},
|
||||
{
|
||||
'@type': 'ItemList',
|
||||
'@id': listId,
|
||||
name: 'Projects by Jaron Pate',
|
||||
itemListElement: (pages.value ?? []).map(
|
||||
(page, index) => {
|
||||
const href = projectEntryHref(page);
|
||||
const url = isExternalHref(href)
|
||||
? href
|
||||
: `${SITE_URL}${href}`;
|
||||
return {
|
||||
'@type': 'ListItem',
|
||||
position: index + 1,
|
||||
url,
|
||||
name: page.title,
|
||||
};
|
||||
},
|
||||
),
|
||||
},
|
||||
{
|
||||
'@type': 'BreadcrumbList',
|
||||
'@id': `${collectionId}#breadcrumb`,
|
||||
itemListElement: [
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 1,
|
||||
name: 'Home',
|
||||
item: SITE_URL,
|
||||
},
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 2,
|
||||
name: projectsTitle,
|
||||
item: projectsUrl,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLayout
|
||||
name="main"
|
||||
title="Projects"
|
||||
description="Software engineer by trade — builder by nature."
|
||||
>
|
||||
<article>
|
||||
<ProjectList :pages="pages ?? []" />
|
||||
</article>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user