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,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>