xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: bind section labels by canonical id

Browse Source
This commit is contained in:
LucaP
2026-09-02 01:23:07 +03:00
parent b12de35f0c
commit f3ca9d4ade
2 changed files with 61 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/AppShell.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { computed } from 'vue';
import ContactDestination from './ContactDestination.vue';
import ExperienceTimeline from './ExperienceTimeline.vue';
import InfrastructureDiagram from './InfrastructureDiagram.vue';
@@ -7,9 +8,25 @@ import ProjectCard from './ProjectCard.vue';
import ProjectCaseStudy from './ProjectCaseStudy.vue';
import SiteNavigation from './SiteNavigation.vue';
import ToolkitGrid from './ToolkitGrid.vue';
import type { PortfolioContent } from '@/content/types';
import type { PortfolioContent, SectionId } from '@/content/types';
defineProps<{ content: Readonly<PortfolioContent> }>();
const props = defineProps<{ content: Readonly<PortfolioContent> }>();
const canonicalSectionIds = [
'start', 'profile', 'experience', 'infrastructure', 'selected-builds', 'additional-work', 'toolkit', 'contact',
] as const satisfies readonly SectionId[];
const navigationById = computed(() => new Map(props.content.navigation.map((item) => [item.id, item])));
const sectionLabel = (id: SectionId): string => {
const item = navigationById.value.get(id);
if (item === undefined) {
throw new Error(`Missing canonical navigation label: ${id}`);
}
return item.label;
};
const canonicalNavigation = computed(() => canonicalSectionIds.map((id) => ({ id, label: sectionLabel(id) })));
</script>
<template>
@@ -17,15 +34,15 @@ defineProps<{ content: Readonly<PortfolioContent> }>();
<header>
<h1>{{ content.identity.name }}</h1>
<p>{{ content.identity.role }}</p>
<SiteNavigation :items="content.navigation" />
<SiteNavigation :items="canonicalNavigation" />
</header>
<main id="portfolio-content">
<PortfolioSection id="start" :index="1" :eyebrow="content.navigation[0]!.label.toUpperCase()" :heading="content.navigation[0]!.label.toUpperCase()">
<PortfolioSection id="start" :index="1" :eyebrow="sectionLabel('start').toUpperCase()" :heading="sectionLabel('start').toUpperCase()">
<p>{{ content.identity.valueProposition }}</p>
</PortfolioSection>
<PortfolioSection id="profile" :index="2" :eyebrow="content.navigation[1]!.label.toUpperCase()" :heading="content.navigation[1]!.label.toUpperCase()">
<PortfolioSection id="profile" :index="2" :eyebrow="sectionLabel('profile').toUpperCase()" :heading="sectionLabel('profile').toUpperCase()">
<p>{{ content.profile.introduction }}</p>
<dl>
<template v-for="fact in content.profile.screeningFacts" :key="fact.label">
@@ -35,27 +52,27 @@ defineProps<{ content: Readonly<PortfolioContent> }>();
</dl>
</PortfolioSection>
<PortfolioSection id="experience" :index="3" :eyebrow="content.navigation[2]!.label.toUpperCase()" :heading="content.navigation[2]!.label.toUpperCase()">
<PortfolioSection id="experience" :index="3" :eyebrow="sectionLabel('experience').toUpperCase()" :heading="sectionLabel('experience').toUpperCase()">
<ExperienceTimeline :experience="content.experience" :systems-operations="content.systemsOperations" />
</PortfolioSection>
<PortfolioSection id="infrastructure" :index="4" :eyebrow="content.navigation[3]!.label.toUpperCase()" :heading="content.navigation[3]!.label.toUpperCase()">
<PortfolioSection id="infrastructure" :index="4" :eyebrow="sectionLabel('infrastructure').toUpperCase()" :heading="sectionLabel('infrastructure').toUpperCase()">
<InfrastructureDiagram :infrastructure="content.infrastructure" />
</PortfolioSection>
<PortfolioSection id="selected-builds" :index="5" :eyebrow="content.navigation[4]!.label.toUpperCase()" :heading="content.navigation[4]!.label.toUpperCase()">
<PortfolioSection id="selected-builds" :index="5" :eyebrow="sectionLabel('selected-builds').toUpperCase()" :heading="sectionLabel('selected-builds').toUpperCase()">
<ProjectCaseStudy v-for="project in content.projects.selected" :key="project.id" :project="project" />
</PortfolioSection>
<PortfolioSection id="additional-work" :index="6" :eyebrow="content.navigation[5]!.label.toUpperCase()" :heading="content.navigation[5]!.label.toUpperCase()">
<PortfolioSection id="additional-work" :index="6" :eyebrow="sectionLabel('additional-work').toUpperCase()" :heading="sectionLabel('additional-work').toUpperCase()">
<ProjectCard v-for="project in content.projects.additional" :key="project.id" :project="project" />
</PortfolioSection>
<PortfolioSection id="toolkit" :index="7" :eyebrow="content.navigation[6]!.label.toUpperCase()" :heading="content.navigation[6]!.label.toUpperCase()">
<PortfolioSection id="toolkit" :index="7" :eyebrow="sectionLabel('toolkit').toUpperCase()" :heading="sectionLabel('toolkit').toUpperCase()">
<ToolkitGrid :groups="content.toolkit" />
</PortfolioSection>
<PortfolioSection id="contact" :index="8" :eyebrow="content.navigation[7]!.label.toUpperCase()" :heading="content.navigation[7]!.label.toUpperCase()">
<PortfolioSection id="contact" :index="8" :eyebrow="sectionLabel('contact').toUpperCase()" :heading="sectionLabel('contact').toUpperCase()">
<footer>
<ContactDestination :contact="content.contact" :identity="content.identity" />
</footer>