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:
+12
-57
@@ -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>
|
||||
Reference in New Issue
Block a user