51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { marked } from 'marked'
|
|
|
|
import { getFormattedPeriod } from 'src/utilities/dom'
|
|
import type { ProjectListingInfo } from './project'
|
|
import { getCurrentRoute } from 'src/utilities/vuetils'
|
|
|
|
const props = defineProps<{
|
|
id: string
|
|
info: ProjectListingInfo
|
|
}>()
|
|
|
|
const currentRoute = getCurrentRoute()
|
|
|
|
const { thumbnailBackground, thumbnailBackgroundSize } = props.info
|
|
const period = computed(() => (!!props.info.period
|
|
? getFormattedPeriod(props.info.period)
|
|
: undefined
|
|
))
|
|
const caption = computed(() => marked.parse(props.info.caption || ''))
|
|
const summary = computed(() => marked.parse(props.info.summary || ''))
|
|
const title = computed(() => marked.parse(props.info.title || ''))
|
|
</script>
|
|
|
|
<template lang="pug">
|
|
.project-embed
|
|
router-link.link(
|
|
:to='{ name: `${currentRoute.name}: View Project`, query: { id: id } }'
|
|
:href='`./view?id=${id}`'
|
|
:style='{ background: thumbnailBackground, backgroundSize: thumbnailBackgroundSize }'
|
|
)
|
|
.text
|
|
.title(
|
|
v-html='title'
|
|
)
|
|
p.period(
|
|
v-if='period'
|
|
) {{ period }}
|
|
.caption(
|
|
v-html='caption'
|
|
)
|
|
.summary(
|
|
v-html='summary'
|
|
)
|
|
</template>
|
|
|
|
<style scoped lang="sass">
|
|
|
|
</style>
|
|
|