37 lines
1.3 KiB
Vue
37 lines
1.3 KiB
Vue
<script setup>
|
|
const { path } = useRoute()
|
|
|
|
// https://content.nuxtjs.org/guide/displaying/querying#with-useasyncdata
|
|
const { data, error } = await useAsyncData(`content-${path}`, () => {
|
|
return queryContent().where({ _path: path, public: true }).findOne()
|
|
})
|
|
|
|
// https://nuxt.com/docs/api/utils/create-error#createerror
|
|
if (error.value) {
|
|
showError(
|
|
createError({
|
|
statusCode: 404,
|
|
statusMessage: 'Not Found',
|
|
})
|
|
)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="project" :id="data.slug">
|
|
<div :class="'head ' + data.slug" :style="'background: ' + data.gradient">
|
|
<div class="concept">
|
|
<img class="logo unselectable" :src="'/img/products/' + data.slug + '/logo.png'" :alt="data.project + ' logo'" />
|
|
<h1 v-html="data.concept"></h1>
|
|
<div class="meta">
|
|
<NuxtLink v-if="data.live" :to="data.url" target="_BLANK" >See live version <span class="icon-arrow-right"></span></NuxtLink>
|
|
<label class="unselectable" >Stack: </label>
|
|
<p class="stack">{{ data.stack }}</p>
|
|
</div>
|
|
</div>
|
|
<img class="showcase" :src="'/img/products/' + data.slug + '/showcase.png'" :alt="data.project + ' showcase'" />
|
|
</div>
|
|
|
|
<ContentDoc class="content center" />
|
|
</div>
|
|
</template> |