projects page and unicord post

2026-10-18 17:06:56 +00:00 · 2026-08-23 22:03:49 -05:00
parent 8322e0275b
commit 30d33077ec
18 changed files with 795 additions and 106 deletions
@@ -370,6 +370,12 @@ code {
    background: var(--code-bg);
    padding: 0.12em 0.35em;
    border-radius: 3px;
+    display: inline-block;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    vertical-align: baseline;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
 }

 pre {
@@ -383,6 +389,8 @@ pre {
 }

 pre code {
+    display: inline;
+    max-width: none;
    padding: 0;
    color: inherit;
    background: none;
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+const props = withDefaults(
+    defineProps<{
+        images?: Array<{ src: string; alt?: string }> | null;
+        decorative?: boolean;
+    }>(),
+    {
+        decorative: false,
+    },
+);
+
+const frames = computed(() => props.images ?? []);
+</script>
+
+<template>
+    <div v-if="frames.length" class="carousel">
+        <figure
+            v-for="image in frames"
+            :key="image.src"
+            class="carousel__frame"
+        >
+            <img :src="image.src" :alt="decorative ? '' : (image.alt ?? '')" />
+        </figure>
+    </div>
+</template>
+
+<style scoped>
+.carousel {
+    --dot-color: #666;
+
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    gap: var(--gap);
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin: 0.85rem 0 0;
+    padding-bottom: 0.35rem;
+    scroll-snap-type: x mandatory;
+}
+
+.carousel__frame {
+    --dot-size: 6%;
+
+    margin: 0;
+    padding: var(--gap);
+    flex-shrink: 0;
+    border-radius: var(--radius);
+    background-color: var(--bg-secondary);
+    background-image: radial-gradient(
+        circle at 4px 4px,
+        var(--dot-color) var(--dot-size),
+        transparent calc(var(--dot-size) + 1%)
+    );
+    background-position: 4px 4px;
+    background-size: 12px 12px;
+    background-repeat: repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    scroll-snap-align: start;
+}
+
+.carousel__frame img {
+    max-width: none;
+    width: auto;
+    height: auto;
+    max-height: 350px;
+    object-fit: cover;
+    border-radius: var(--radius);
+    background: none;
+}
+
+@media screen and (max-width: 750px) {
+    .carousel__frame img {
+        max-height: 300px;
+    }
+}
+</style>
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { isExternalHref, projectEntryHref } from '~/utils/projects';
+
+const props = defineProps<{
+    pages: Array<{
+        path: string;
+        title: string;
+        description: string;
+        href?: string | null;
+        image?: string | null;
+    }>;
+}>();
+
+const entries = computed(() =>
+    props.pages.map((page) => {
+        const to = projectEntryHref(page);
+        const external = isExternalHref(to);
+        return { page, to, external };
+    }),
+);
+
+onMounted(() => {
+    for (const { image } of props.pages) {
+        if (!image) continue;
+        new Image().src = image;
+    }
+});
+
+const preview = ref<string | null>(null);
+const cursor = ref({ x: 0, y: 0 });
+const previewEl = ref<HTMLElement | null>(null);
+
+const previewStyle = computed(() => {
+    const pad = 16;
+    const ox = 20;
+    const oy = 20;
+    const el = previewEl.value;
+    const w = el?.offsetWidth ?? 320;
+    const h = el?.offsetHeight ?? 200;
+    let x = cursor.value.x + ox;
+    let y = cursor.value.y + oy;
+    if (import.meta.client) {
+        if (x + w > window.innerWidth - pad) x = cursor.value.x - w - ox;
+        if (y + h > window.innerHeight - pad) y = cursor.value.y - h - oy;
+    }
+    x = Math.max(pad, x);
+    y = Math.max(pad, y);
+    return {
+        transform: `translate3d(${x}px, ${y}px, 0)`,
+    };
+});
+
+function onMove(event: MouseEvent, image: string) {
+    if (!image) return;
+    preview.value = image;
+    cursor.value = { x: event.clientX, y: event.clientY };
+}
+
+function onLeave() {
+    preview.value = null;
+}
+</script>
+
+<template>
+    <template v-if="entries.length">
+        <NuxtLink
+            v-for="{ page, to, external } in entries"
+            :key="page.path"
+            :to="to"
+            :external="external"
+            :target="external ? '_blank' : undefined"
+            :rel="external ? 'noopener' : undefined"
+            class="project"
+            @mousemove="page.image ? onMove($event, page.image) : undefined"
+            @mouseleave="page.image ? onLeave() : undefined"
+        >
+            <span class="project__title">
+                {{ page.title }}
+                <span v-if="external" class="project__ext" aria-hidden="true"
+                    >↗</span
+                >
+            </span>
+            <span class="project__desc">{{ page.description }}</span>
+        </NuxtLink>
+        <Teleport to="body">
+            <div
+                v-show="preview"
+                ref="previewEl"
+                class="project-preview"
+                aria-hidden="true"
+                :style="previewStyle"
+            >
+                <img v-if="preview" :src="preview" alt="" />
+            </div>
+        </Teleport>
+    </template>
+    <p v-else class="empty-state">Nothing here yet.</p>
+</template>
+
+<style scoped>
+.project {
+    display: block;
+    margin: 0 0 1.15rem;
+    text-decoration: none;
+    color: inherit;
+}
+
+.project:hover {
+    text-decoration: none;
+}
+
+.project:hover .project__title {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+
+.project__title {
+    display: block;
+    color: var(--text);
+    font-size: 1.15rem;
+    line-height: 1.3;
+}
+
+.project__ext {
+    font-size: 0.75em;
+    color: var(--muted);
+}
+
+.project__desc {
+    display: block;
+    margin: 0.35rem 0 0;
+    color: var(--muted);
+}
+
+.empty-state {
+    color: var(--muted);
+    font-style: italic;
+}
+
+.project-preview {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 40;
+    pointer-events: none;
+    will-change: transform;
+}
+
+.project-preview img {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: min(25rem, 80vw);
+    max-height: min(20rem, 50vh);
+    object-fit: cover;
+    border: 1px solid color-mix(in srgb, var(--text) 40%, transparent);
+    border-radius: var(--radius);
+    box-shadow:
+        0 2px 6px rgba(0, 0, 0, 0.28),
+        0 18px 40px rgba(0, 0, 0, 0.42);
+}
+
+@media (hover: none) {
+    .project-preview {
+        display: none;
+    }
+}
+</style>
@@ -1,14 +1,8 @@
 <script setup lang="ts">
-withDefaults(
-    defineProps<{
-        title?: string;
-        description?: string;
-    }>(),
-    {
-        title: "Hey, I'm Jaron.",
-        description: 'Software engineer by trade — builder by nature.',
-    },
-);
+defineProps<{
+    title: string;
+    description: string;
+}>()

 const { id, themes, setTheme } = useBgTheme();
 const { id: fontId, fonts, setFont } = useBodyFont();
@@ -36,40 +30,25 @@ const onFontChange = (event: Event) => {
                    </NuxtLink>
                    <nav class="site-nav">
                        <NuxtLink to="/writing">Writing</NuxtLink>
+                        <NuxtLink to="/projects">Projects</NuxtLink>
                        <a href="https://github.com/jaronpate">GitHub</a>
-                        <label class="theme-picker">
-                            <span class="visually-hidden">Background</span>
-                            <select
-                                class="theme-select"
-                                :value="id"
-                                @change="onThemeChange"
-                            >
-                                <option
-                                    v-for="theme in themes"
-                                    :key="theme.id"
-                                    :value="theme.id"
-                                >
-                                    {{ theme.label }}
-                                </option>
-                            </select>
-                        </label>
-                        <!-- <label class="theme-picker">
-                            <span class="visually-hidden">Font</span>
-                            <select
-                                class="theme-select"
-                                :value="fontId"
-                                @change="onFontChange"
-                            >
-                                <option
-                                    v-for="font in fonts"
-                                    :key="font.id"
-                                    :value="font.id"
-                                >
-                                    {{ font.label }}
-                                </option>
-                            </select>
-                        </label> -->
                    </nav>
+                    <label class="theme-picker">
+                        <span class="visually-hidden">Background</span>
+                        <select
+                            class="theme-select"
+                            :value="id"
+                            @change="onThemeChange"
+                        >
+                            <option
+                                v-for="theme in themes"
+                                :key="theme.id"
+                                :value="theme.id"
+                            >
+                                {{ theme.label }}
+                            </option>
+                        </select>
+                    </label>
                </div>
                <h1 class="hero__title">{{ title }}</h1>
                <p v-if="description" class="hero__sub">{{ description }}</p>
@@ -127,6 +106,7 @@ const onFontChange = (event: Event) => {

 .hero__nav {
    display: flex;
+    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 3.5rem;
@@ -160,6 +140,7 @@ const onFontChange = (event: Event) => {

 .site-nav {
    display: flex;
+    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
@@ -290,10 +271,14 @@ const onFontChange = (event: Event) => {
    }

    .hero__nav {
-        flex-wrap: wrap;
        margin-bottom: 1.75rem;
    }

+    .theme-picker {
+        flex-basis: 100%;
+        justify-content: flex-end;
+    }
+
    .hero__title {
        font-size: 2rem;
    }
@@ -92,7 +92,8 @@ const selectedWorks = [
 const projects = [
    {
        title: 'Unicord',
-        href: 'https://unicord.hat.fish/',
+        // href: 'https://unicord.hat.fish/',
+        href: '/projects/unicord',
        description: 'Discord bot SDK inspired by webserver architecture.',
    },
    {
@@ -102,10 +103,10 @@ const projects = [
            'An AI-driven mystery detective game. Generate, investigate, solve.',
    },
    {
-        title: 'Rune Buddy',
+        title: 'Rift Buddy',
        href: 'https://github.com/jaronpate/rift-buddy',
        description:
-            'League of Legends runepage manager. Save & organise your pages for free.',
+            'Save, edit, and hot-swap rune pages alongside League of Legends.',
    },
 ];

@@ -178,7 +179,9 @@ definePageMeta({
 </script>

 <template>
-    <NuxtLayout name="main">
+    <NuxtLayout name="main"
+    title="Hey, I'm Jaron"
+    description="I build software for a living, but also other things">
        <article>
            <h3>Selected Work</h3>
            <template v-for="work in selectedWorks" :key="work.title">
@@ -188,14 +191,8 @@ definePageMeta({
                    }}</a>:
                    {{ work.description }}
                </p>
-                <div class="work__images">
-                    <figure
-                        v-for="image in work.images"
-                        :key="image.src"
-                        class="work__image"
-                    >
-                        <img :src="image.src" :alt="image.alt" />
-                    </figure>
+                <div class="work-carousel">
+                    <Carousel :images="work.images" />
                </div>
            </template>

@@ -203,7 +200,7 @@ definePageMeta({
            <ul>
                <li v-for="project in projects" :key="project.href">
                    <p>
-                        <a :href="project.href" target="_blank" rel="noopener">{{
+                        <a :href="project.href">{{
                            project.title
                        }}</a>:
                        {{ project.description }}
@@ -240,53 +237,11 @@ definePageMeta({
 </template>

 <style scoped>
-.work__images {
-    --dot-color: #666;
-
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: max-content;
-    gap: var(--gap);
-    overflow-x: auto;
-    overflow-y: hidden;
+.work-carousel {
    margin: 1.25rem 0 1.75rem;
-    padding-bottom: 0.35rem;
 }

-.work__image {
-    --dot-size: 6%;
-
+.work-carousel :deep(.carousel) {
    margin: 0;
-    padding: var(--gap);
-    flex-shrink: 0;
-    border-radius: var(--radius);
-    background-color: var(--bg-secondary);
-    background-image: radial-gradient(
-        circle at 4px 4px,
-        var(--dot-color) var(--dot-size),
-        transparent calc(var(--dot-size) + 1%)
-    );
-    background-position: 4px 4px;
-    background-size: 12px 12px;
-    background-repeat: repeat;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.work__image img {
-    max-width: none;
-    width: auto;
-    height: auto;
-    max-height: 350px;
-    object-fit: cover;
-    border-radius: var(--radius);
-    background: none;
-}
-
-@media screen and (max-width: 750px) {
-    .work__image img {
-        max-height: 300px;
-    }
 }
 </style>
@@ -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>
@@ -0,0 +1,20 @@
+export function projectEntryHref(page: {
+    path: string;
+    href?: string | null;
+}) {
+    return page.href || `/projects${page.path}`;
+}
+
+export function isExternalHref(href: string) {
+    return /^https?:\/\//i.test(href);
+}
+
+export function projectOgImage(
+    src: string | undefined,
+    siteUrl: string,
+    fallback: string,
+) {
+    if (!src) return fallback;
+    if (/^https?:\/\//i.test(src)) return src;
+    return `${siteUrl}${src.startsWith('/') ? src : `/${src}`}`;
+}
@@ -1,15 +1,16 @@
 export const BG_THEMES = [
    { id: 'dusk', label: 'Dusk' },
+    { id: 'paper', label: 'Paper' },
    { id: 'navy', label: 'Navy' },
    { id: 'midnight', label: 'Midnight' },
    { id: 'indigo', label: 'Indigo' },
-    { id: 'storm', label: 'Storm' },
    { id: 'slate', label: 'Slate' },
    { id: 'ink', label: 'Ink' },
-    { id: 'pine', label: 'Pine' },
-    { id: 'wine', label: 'Wine' },
-    { id: 'cocoa', label: 'Cocoa' },
-    { id: 'paper', label: 'Paper' },
+    // Disabled for now, I don't like them as much
+    // { id: 'storm', label: 'Storm' },
+    // { id: 'pine', label: 'Pine' },
+    // { id: 'wine', label: 'Wine' },
+    // { id: 'cocoa', label: 'Cocoa' },
 ] as const;

 export type BgThemeId = (typeof BG_THEMES)[number]['id'];