projects page and unicord post

2026-10-19 01:07:39 +00:00 · 2026-08-23 22:03:49 -05:00
parent 8322e0275b
commit 30d33077ec
18 changed files with 795 additions and 106 deletions
@@ -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>