52 lines
1.5 KiB
Vue
52 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { PublicProject } from '@/content/types';
|
|
import ProjectMedia from './ProjectMedia.vue';
|
|
|
|
withDefaults(defineProps<{
|
|
project: Readonly<PublicProject>;
|
|
priority?: 'primary' | 'supporting';
|
|
allowAutomaticVideo?: boolean;
|
|
}>(), {
|
|
priority: 'supporting',
|
|
allowAutomaticVideo: false,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<article class="project-case-study" :data-project-id="project.id" :data-project-priority="priority">
|
|
<header class="project-case-study__header">
|
|
<h3>{{ project.title }}</h3>
|
|
<p>{{ project.summary }}</p>
|
|
</header>
|
|
<ProjectMedia
|
|
v-for="media in project.media ?? []"
|
|
:key="`${media.kind}-${media.assetId}`"
|
|
:presentation="media"
|
|
:allow-automatic-video="allowAutomaticVideo"
|
|
/>
|
|
<dl class="project-evidence">
|
|
<div>
|
|
<dt>Problem</dt>
|
|
<dd>{{ project.problem }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Contribution</dt>
|
|
<dd>{{ project.contribution }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Technical decisions</dt>
|
|
<dd>
|
|
<ul>
|
|
<li v-for="decision in project.technicalDecisions" :key="decision">{{ decision }}</li>
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Outcome</dt>
|
|
<dd>{{ project.outcome }}</dd>
|
|
</div>
|
|
</dl>
|
|
<a v-if="project.visibility === 'public' && project.url" class="project-link" :href="project.url" target="_blank" rel="noopener noreferrer">{{ project.title }}</a>
|
|
</article>
|
|
</template>
|