Synth pages

[slug]/index.md

@@ -5,13 +5,10 @@ page_type: projects
 
 <script setup>
 import { useData } from 'vitepress'
-import { computed } from 'vue'
 const { params: p, frontmatter: f } = useData()
 
 </script>
 
-# {{ p.title }}
+<SynthPage v-bind="p" />
 
 <!-- @content -->
-
-<pre class="text-xs">{{ p }}</pre>

components/SynthCard.vue

@@ -77,7 +77,7 @@ button.w-full.flex.flex-wrap.items-stretch.text-left.relative.bg-light-300.shado
     .flex-1
     .flex-1.flex.items-end.flex.flex-wrap.gap-2(v-if="tags?.length>0")
       .px-2.py-1.text-sm.bg-light-800.dark-bg-dark-500.rounded-lg(v-for="tag in tags" :key="tag") {{ tag }}
-      
+    a.p-1.bg-dark-300.absolute.bottom-2.right-2.rounded-full.opacity-10.hover-opacity-80.transition(@click.stop :href="`/${slug}/`")
 </template>
 
 <style scoped lang="postcss">

components/SynthPage.vue

@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  author: { type: String, default: '' },
+  author_link: { type: String, default: '' },
+  cover: { type: String, default: '' },
+  slug: { type: String, default: '' },
+  url: { type: String, default: '' },
+})
+</script>
+
+<template lang='pug'>
+.flex.flex-col.gap-4
+  .p-0
+    img(:src="`/cover/${slug}.webp`")
+  .flex.flex-col
+    .text-4xl.font-bold {{ title }}
+    component.text-xl(
+      v-if="author"
+      :is="author_link ? 'a' : 'div'"
+        :href="author_link") by {{ author }}
+    a(:href="url" target="_blank") {{ url }}
+  .p-0(v-if="description") {{ description }}
+  .p-0
+    slot
+</template>