feat: basic cards with covers

.gitignore

@@ -1,5 +1,7 @@
 .vitepress/cache
 
+public/cover
+
 database
 # Logs
 logs

.vitepress/downloadCovers.js

@@ -0,0 +1,40 @@
+import download from 'image-downloader'
+
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import fs from 'node:fs'
+
+
+export async function downloadCovers(records = [], {
+  field = 'cover',
+  folder = 'cover',
+  query = 'quality=70&width=800&height=800&format=webp'
+} = options) {
+
+  const dirname = path.dirname(fileURLToPath(import.meta.url));
+  let dest = path.resolve(dirname, '../public/', folder)
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+  const urls = []
+
+  for (let r of records) {
+    if (!r?.[field]) continue
+    let filePath = path.resolve(dest, `${r.slug}.webp`)
+    if (fs.existsSync(filePath)) continue
+    console.log(r, r[field])
+    let url = `https://db.chromatone.center/assets/${r[field]?.id}?${query}&download`
+    urls.push({ url, slug: r.slug, dest: filePath })
+  }
+
+
+  const chunkSize = 5;
+  for (let i = 0; i < urls.length; i += chunkSize) {
+    const chunk = urls.slice(i, i + chunkSize);
+    await Promise.all(chunk.map(rec => {
+      console.log('downloading file:', rec.slug + '.webp')
+      return download.image(rec)
+    }));
+  }
+
+}

Layout.vue

@@ -3,20 +3,14 @@ import { useData } from 'vitepress'
 
 import { ref } from 'vue';
 
-
 const { frontmatter: f } = useData()
-
-
-
 </script>
 
 
 <template lang="pug">
-.flex.flex-wrap.items-stretch.w-full.justify-stretch.relative HELLO
-
-  content.prose.max-w-unset.content.bg-light-300.z-10(style="flex: 1 1 100%")
+.flex.flex-wrap.items-stretch.w-full.justify-stretch.relative
+  content(:class="{ prose: f?.dynamic }")
 
-
 </template>
 
 <style lang="postcss">
@@ -25,8 +19,10 @@ const { frontmatter: f } = useData()
 .prose h2,
 .prose h3 {
   @apply m-4;
-  max-width: 55ch;
+}
 
+@view-transition {
+  navigation: auto;
 }
 
 .custom-block-title {

ProjectPage.vue

@@ -0,0 +1,22 @@
+<script setup>
+import {onMounted} from 'vue'
+import { useData } from 'vitepress'
+
+const { params } = useData()
+
+onMounted(()=>{
+  console.log('mounted')
+})
+
+</script>
+
+<template lang='pug'>
+.flex.flex-col.rounded-lg.overflow-hidden.shadow.bg-light-700.mx-2.max-w-45ch
+  .flex.flex-col.p-2(:style="{ backgroundColor: $params?.color }")
+    img(:src="`/cover/${$params?.slug}.webp`")
+  .p-4.text-lg.bg-light-200.flex.flex-col.gap-2
+    .text-4xl {{ $params?.title }}
+    .p-0 {{ $params?.description }}
+
+
+</template>

ProjectsList.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { data } from './projects.data'
+
+</script>
+
+<template lang='pug'>
+.text-2xl.flex.p-2.mt-8(style="flex: 1 0 100%")
+  h1.font-bold Projects
+  .flex-1 
+  .op-80 {{ data.length }}
+slot 
+.flex.flex-wrap.gap-4.p-4
+  a.items-stretch.bg-light-800.text-xl.no-underline.rounded.overflow-hidden.shadow.hover-brightness-110.flex.flex-wrap(
+    style="flex: 1 1 400px"
+    :href="`/${project?.slug}/`"
+    v-for="project in data" :key="project"
+    ) 
+    .p-0(style="flex: 1 1 180px")
+      img( :src="`/cover/${project?.slug}.webp`")
+    .flex.flex-col.gap-2(style="flex: 1 1 250px")
+      .p-2.flex.flex-col.gap-2
+        .text-sm.flex.flex-wrap.gap-1
+          .op-60 {{ project?.start_date }} − {{ project?.end_date || 'Present' }}
+          .flex-1
+
+        .text-2xl.font-bold {{ project?.title }}
+
+        .text-sm.op-80 {{ project?.description }}
+      .flex-1
+      .text-md.op-40.bg-dark-300.bg-op-40.flex.items-center(v-if="project?.events.length") Events: {{ project?.events.length }}
+
+
+</template>

[slug]/index.md

@@ -0,0 +1,14 @@
+---
+dynamic: true
+title: Projects
+---
+
+<script setup>
+import ProjectPage from '../ProjectPage.vue'
+</script>
+
+<ProjectPage >
+
+</ProjectPage>
+
+<!-- @content -->

[slug]/index.paths.js

@@ -0,0 +1,26 @@
+import { createDirectus, rest, readItems, staticToken } from '@directus/sdk'
+
+export default {
+  async paths() {
+    let projects = []
+
+    try {
+      projects = await createDirectus('https://db.chromatone.center/').with(staticToken('HDqt6uvSbGyYnL4tdi3jntEHOj7i_aYp')).with(rest()).request(readItems('projects', {
+        fields: ['*', 'cover.id', 'program.title']
+      }))
+    } catch (e) {
+      console.log('Projects paths not loaded', e)
+    }
+
+    return projects.map(project => {
+      let content = project.content
+      delete project.content
+      return {
+        params: {
+          ...project
+        },
+        content
+      }
+    })
+  }
+}

index.md

@@ -4,11 +4,11 @@ home: true
 
 <script setup>
 
-import YoutubeEmbed from './.vitepress/YoutubeEmbed.vue'
+import ProjectsList from './ProjectsList.vue'
 
 import { defineClientComponent } from 'vitepress'
 // const CourseList = defineClientComponent(() => import('./courses/CourseList.vue'))
 
 </script>
 
-Welcome to Chromatone Projects
+<ProjectsList />

package.json

@@ -20,6 +20,7 @@
 		"@iconify-json/la": "^1.2.1",
 		"@unocss/extractor-pug": "^65.4.3",
 		"@vue/language-plugin-pug": "^2.2.0",
+		"image-downloader": "^4.3.0",
 		"pug": "^3.0.3",
 		"unocss": "^65.4.3",
 		"vitepress": "^1.6.3"

projects.data.js

@@ -0,0 +1,25 @@
+import { createDirectus, rest, readItems, staticToken } from '@directus/sdk'
+import { downloadCovers } from './.vitepress/downloadCovers'
+
+export default {
+  async load() {
+    let projects = []
+    try {
+      projects = await createDirectus('https://db.chromatone.center/')
+        .with(staticToken('HDqt6uvSbGyYnL4tdi3jntEHOj7i_aYp'))
+        .with(rest())
+        .request(readItems('projects', {
+          sort: '-start_date',
+          fields: ['*', 'title', 'description', 'start_date', 'end_date', 'field', 'program.title', 'cover.id']
+        }))
+    } catch (e) {
+      console.log('Projects fetch failed')
+    }
+
+    await downloadCovers(projects, {
+      folder: 'cover'
+    })
+
+    return projects
+  }
+}