mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-14 13:54:01 +01:00
Arthur DANJOU
5dadb20607
- Implemented InfiniteCanvas.vue for rendering an infinite canvas with drag and zoom capabilities. - Created useInfiniteCanvas composable for managing canvas state and interactions. - Added useImagePreloader composable for preloading images and videos. - Introduced constants for physics, touch interactions, viewport settings, and zoom defaults. - Developed utility functions for touch handling and media type detection. - Defined TypeScript types for canvas items, grid items, and composables. - Registered components and composables in the Nuxt module. - Added screenshot generation functionality for content files. - Updated package.json to include capture-website dependency.
83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
|
const route = useRoute()
|
|
const { data: writing } = await useAsyncData(`writings/${route.params.slug}`, () =>
|
|
queryCollection('writings').path(`/writings/${route.params.slug}`).first())
|
|
|
|
if (!writing.value) {
|
|
throw createError({
|
|
statusCode: 404,
|
|
statusMessage: `Writing "${route.params.slug}" not found`,
|
|
})
|
|
}
|
|
|
|
useSeoMeta({
|
|
title: writing.value?.title,
|
|
description: writing.value?.description,
|
|
author: 'Arthur Danjou',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UContainer v-if="writing" class="mt-16 md:mt-16 md:mb-36 mb-22">
|
|
<PostAlert class="mb-8" />
|
|
<div>
|
|
<div class="flex items-end justify-between gap-2 flex-wrap">
|
|
<h1
|
|
class="font-bold text-3xl text-black dark:text-white"
|
|
>
|
|
{{ writing.title }}
|
|
</h1>
|
|
<div
|
|
class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
|
|
>
|
|
<UIcon name="ph:calendar-duotone" size="16" />
|
|
<p>{{ useDateFormat(writing.publishedAt, 'DD MMMM YYYY').value }} </p>
|
|
</div>
|
|
</div>
|
|
<p class="mt-2 text-base">
|
|
{{ writing.description }}
|
|
</p>
|
|
</div>
|
|
<div
|
|
v-if="writing.cover"
|
|
class="w-full rounded-md my-8"
|
|
>
|
|
<ProseImg
|
|
:src="`/writings/${writing.cover}`"
|
|
label="Project cover"
|
|
/>
|
|
</div>
|
|
<USeparator
|
|
class="my-4"
|
|
icon="i-ph-pencil-line-duotone"
|
|
/>
|
|
<ClientOnly>
|
|
<ContentRenderer
|
|
:value="writing"
|
|
class="!max-w-none prose dark:prose-invert"
|
|
/>
|
|
</ClientOnly>
|
|
<PostFooter />
|
|
</UContainer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.prose h2 a,
|
|
.prose h3 a,
|
|
.prose h4 a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.prose img {
|
|
margin: 0;
|
|
}
|
|
|
|
.katex-html {
|
|
display: none;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
</style>
|