Move into app/

2025-10-07 13:52:57 +07:00
parent 6dd7d33661
commit 36f5508d48
95 changed files with 28 additions and 19 deletions
@@ -0,0 +1,61 @@
+<template>
+    <main>
+        <article class="article">
+            <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
+                <section class="max-w-6xl mx-auto z-[1]">
+                  <h1 id="hero" class="font-hero">{{ post?.title }}</h1>
+                  <div class="post-cover">
+                    <section class="w-full">
+                      <p id="hero-desc" class="font-hero-desc">{{ post?.description }}</p>
+                    </section>
+                    <img :width="512" class="img-cover" :src="post?.coverImage" />
+                  </div>
+                </section>
+            </section>
+            <section class="web-section web-section" aria-labelledby="post-content" aria-describedby="post-content-desc">
+                <div class="prose">
+                    <ContentRenderer v-if="post" :value="post"/>
+                </div>
+            </section>
+        </article>
+    </main>
+</template>
+  
+<script lang="ts" setup>
+const config = useRuntimeConfig();
+const baseUrl = config.public.baseUrl
+const route = useRoute()
+
+// const { data: post } = await useAsyncData(route.path, () => {
+//   return queryCollection('posts').path(route.path).first()
+// })
+
+const { data: post } = await useAsyncData(() => queryCollection('posts').path(route.path).first())
+
+const ogUrl = config.public.baseUrl + route.path
+useSeoMeta({
+  title: post.value?.title,
+  description: post.value?.description || 'Content from our blog',
+  keywords: post.value?.tags?.join(', ') || 'blog, article, post',
+  ogTitle: post.value?.title + ' / thawia.ng',
+  ogDescription: post.value?.description,
+  ogType: 'article',
+  ogUrl: ogUrl,
+  ogImage: post.value?.coverImage ? baseUrl + '/portal/f/assets/' + post.value?.coverImage : undefined,
+  ogSiteName: config.public.siteName,
+  twitterCard: 'summary_large_image',
+  twitterTitle: post.value?.title + ' / thawia.ng',
+  twitterDescription: post.value?.description,
+  twitterImage: post.value?.coverImage ? `${baseUrl}/portal/f/assets/${post.value?.coverImage}` : undefined,
+  twitterSite: '@' + config.public.twitterUsername
+})
+</script>
+
+<style>
+.katex-html {
+  display: none;
+}
+.katex-mathml {
+  font-size: 1.2em;
+}
+</style>
@@ -0,0 +1,29 @@
+<template>
+    <main>
+        <article class="article">
+            <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
+                <h1 id="hero" class="font-hero">Posts</h1>
+                <p id="hero-desc" class="font-hero-desc">This is where I post my thoughts, articles, and updates.</p>
+            </section>
+            <section class="web-section" aria-labelledby="latest-posts" aria-describedby="latest-posts-paragraph-1">
+                <h2 class="web-title" id="latest-posts">All Posts</h2>
+                <PostsArticleList />
+            </section>
+        </article>
+    </main>
+</template>
+
+<script setup>
+const TITLE = "Posts"
+const DESC = "Techit's posts and writings."
+
+useHead({
+  title: TITLE,
+  meta: [
+    { name: 'description', content: DESC },
+    { property: 'og:title', content: TITLE },
+    { property: 'og:description', content: DESC },
+    { property: 'og:type', content: 'website' }
+  ]
+})
+</script>