37 lines
1.1 KiB
Vue
37 lines
1.1 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">
|
||
|
|
<img class="hero" :src="'/img/project/' + data.slug + '/' + data.thumbnail" alt >
|
||
|
|
<h1>{{ data.project }}</h1>
|
||
|
|
<h2>{{ data.concept}}</h2>
|
||
|
|
<hr />
|
||
|
|
<label ><span className="icon-calendar"></span>Year of Completion</label>
|
||
|
|
<p>{{ data.completed}}</p>
|
||
|
|
<label ><span className="icon-layers"></span>Technology Stack</label>
|
||
|
|
<p>{{ data.stack}}</p>
|
||
|
|
<div v-if="data.live">
|
||
|
|
<label ><span className="icon-link"></span>Live Site</label>
|
||
|
|
<NuxtLink :to="data.url" target="_BLANK" >Check out the live product</NuxtLink>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
<ContentDoc class="content" />
|
||
|
|
</template>
|