feat: Loads markdown on project detail page

Uses Nuxt Content to load markdown using MDC syntax on project detail page.

components/Masonry/detail.vue

@@ -20,10 +20,14 @@ const item = props.data
         <span></span>
       </h3>
     </div>
-    <img v-if="item.isThumb" loading="lazy" class="w-full" :src="item.src" />
-    <div class="p-2.5 pb-1">
-      <img class="w-1/2 mt-0 mr-2.5 mb-2.5 ml-0 float-left" v-if="item.src && !item.isThumb" :src="item.src">
-      <p class="pb-2.5">{{ item.description }}</p>
-    </div>
+    <ContentDoc class="p-3" :path="'/data/projects/' + item.slug">
+      <template #not-found>
+        <img v-if="item.isThumb" loading="lazy" class="w-full" :src="item.src" />
+        <div class="p-2.5 pb-1">
+          <img class="w-1/2 mt-0 mr-2.5 mb-2.5 ml-0 float-left" v-if="item.src && !item.isThumb" :src="item.src">
+          <p class="pb-2.5">{{ item.description }}</p>
+        </div>
+      </template>
+    </ContentDoc>
   </div>
 </template>

components/Masonry/types.ts

@@ -1,5 +1,6 @@
 export type MasonryItem = {
   title: string,
+  slug: string,
   src: string,
   duration: string,
   isThumb: boolean,

content/data/projects/triptantra.md

@@ -0,0 +1,13 @@
+---
+title: 'Project: TripTantra'
+description: 'Some description'
+---
+
+# This is an example MDC rendered text and a list.
+
+- [ ] This
+- [x] is
+- [x] a
+- [x] checklist
+- [ ] that
+- [ ] works.