Messages : types, réponses, sauts de ligne, data volume

- HomeMessages : type pill (Réaction/Question/Suggestion/Retour) + sélecteur dans le formulaire (sans Réaction) - HomeMessages : white-space: pre-line sur les messages - Page /messages : type pill + white-space: pre-line (idem home) - Admin : badge type coloré + sélecteur d'édition + formulaire réponse - API : type et reply dans PUT ; readDataYaml/writeDataYaml (data/ volume Docker) - main.css : overrides light mode text-white/55, /75, /90 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-19 05:56:11 +01:00
parent c52fa6007d
commit b9e6b4a96c
10 changed files with 314 additions and 48 deletions
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -106,8 +106,11 @@ a {
 .palette-light .text-white\/60 { color: hsl(var(--color-text) / 0.68) !important; }
 .palette-light .text-white\/65 { color: hsl(var(--color-text) / 0.73) !important; }
 .palette-light .text-white\/70 { color: hsl(var(--color-text) / 0.78) !important; }
+.palette-light .text-white\/55 { color: hsl(var(--color-text) / 0.63) !important; }
+.palette-light .text-white\/75 { color: hsl(var(--color-text) / 0.83) !important; }
 .palette-light .text-white\/80 { color: hsl(var(--color-text) / 0.88) !important; }
 .palette-light .text-white\/85 { color: hsl(var(--color-text) / 0.92) !important; }
+.palette-light .text-white\/90 { color: hsl(var(--color-text) / 0.95) !important; }

 /* white backgrounds → surface tones with more contrast */
 .palette-light .bg-white\/5 { background-color: hsl(var(--color-primary) / 0.05) !important; }
--- a/app/components/home/HomeMessages.vue
+++ b/app/components/home/HomeMessages.vue
@@ -1,10 +1,11 @@
 <template>
  <section class="section-padding">
    <div class="container-content mx-auto max-w-3xl">
+
    <!-- Formulaire -->
    <UiScrollReveal>
      <div class="message-form-card">
-        <h3 class="font-display text-lg font-bold text-white mb-4">Laisser un message</h3>
+        <h3 class="font-display text-lg font-bold form-title mb-4">Laisser un message</h3>

        <form v-if="!submitted" class="space-y-3" @submit.prevent="send">
          <input
@@ -13,7 +14,12 @@
            placeholder="Votre nom"
            class="msg-input"
          />
-          <p class="text-white/30 text-xs -mt-1 px-1">Pour recevoir une réponse, laissez votre e-mail dans le message.</p>
+          <p class="hint-text text-xs -mt-1 px-1">Pour recevoir une réponse, laissez votre e-mail dans le message.</p>
+          <select v-model="form.type" class="msg-input msg-input--select">
+            <option value="question">Question</option>
+            <option value="suggestion">Suggestion</option>
+            <option value="retour">Retour d'expérience</option>
+          </select>
          <textarea
            v-model="form.text"
            placeholder="Votre message"
@@ -30,11 +36,11 @@

        <div v-else class="text-center py-6">
          <div class="i-lucide-heart-handshake h-10 w-10 text-primary mx-auto mb-3" />
-          <p class="text-white/90 font-display text-lg font-semibold">Merci pour votre message !</p>
-          <p class="text-white/55 text-sm mt-2 max-w-md mx-auto leading-relaxed">
+          <p class="msg-confirm-title font-display text-lg font-semibold">Merci pour votre message !</p>
+          <p class="msg-confirm-sub text-sm mt-2 max-w-md mx-auto leading-relaxed">
            Il sera lu et traité dans un délai... humainement raisonnable.
          </p>
-          <p class="text-primary/60 text-xs mt-4 italic">
+          <p class="msg-confirm-note text-xs mt-4 italic">
            Chaque message est un premier pas dans l'aventure.
          </p>
        </div>
@@ -44,13 +50,26 @@
    <!-- 2 derniers messages publiés -->
    <UiScrollReveal v-if="messages?.length" :delay="100">
      <div class="mt-8 space-y-4">
-        <h3 class="font-display text-lg font-bold text-white/80 text-center">Derniers messages</h3>
+        <h3 class="font-display text-lg font-bold section-title text-center">Derniers messages</h3>
        <div v-for="msg in messages.slice(0, 2)" :key="msg.id" class="message-card">
-          <p class="text-white/80 text-sm leading-relaxed">{{ msg.text }}</p>
-          <div class="mt-2 flex items-center gap-2 text-xs text-white/40">
-            <span class="font-semibold text-white/60">{{ msg.author }}</span>
-            <span>&middot;</span>
-            <span>{{ formatDate(msg.createdAt) }}</span>
+          <!-- En-tête auteur -->
+          <div class="flex items-center gap-2 mb-2">
+            <span class="msg-author font-semibold text-sm">{{ msg.author }}</span>
+            <span class="type-pill">{{ typeLabel(msg.type) }}</span>
+            <span class="msg-date text-xs ml-auto">{{ formatDate(msg.createdAt) }}</span>
+          </div>
+          <!-- Texte du message -->
+          <p class="msg-text text-sm leading-relaxed">{{ msg.text }}</p>
+          <!-- Réponse -->
+          <div v-if="msg.reply?.text" class="reply-thread">
+            <div class="reply-connector" aria-hidden="true" />
+            <div class="reply-block">
+              <div class="flex items-center gap-1.5 mb-1">
+                <div class="i-lucide-corner-down-right h-3 w-3 reply-icon" />
+                <span class="reply-author text-xs font-semibold">Le Librodrome</span>
+              </div>
+              <p class="reply-text text-sm leading-relaxed italic">{{ msg.reply.text }}</p>
+            </div>
          </div>
        </div>
        <div class="text-center">
@@ -68,12 +87,23 @@
 <script setup lang="ts">
 const { data: messages } = await useFetch('/api/messages')

-const form = reactive({ author: '', text: '' })
+const form = reactive({ author: '', text: '', type: 'question' })
 const sending = ref(false)
 const submitted = ref(false)

 const canSend = computed(() => form.text.trim().length > 0)

+const TYPE_LABELS: Record<string, string> = {
+  reaction: 'Réaction',
+  question: 'Question',
+  suggestion: 'Suggestion',
+  retour: 'Retour',
+}
+
+function typeLabel(type: string) {
+  return TYPE_LABELS[type] ?? type
+}
+
 async function send() {
  if (!canSend.value) return
  sending.value = true
@@ -106,6 +136,21 @@ function formatDate(iso: string) {
 </script>

 <style scoped>
+/* ── Couleurs adaptatives (dark + light) ── */
+.form-title       { color: hsl(var(--color-text)); }
+.hint-text        { color: hsl(var(--color-text) / 0.35); }
+.section-title    { color: hsl(var(--color-text) / 0.85); }
+.msg-author       { color: hsl(var(--color-text) / 0.75); }
+.msg-date         { color: hsl(var(--color-text) / 0.38); }
+.msg-text         { color: hsl(var(--color-text) / 0.78); white-space: pre-line; }
+.msg-confirm-title { color: hsl(var(--color-text) / 0.95); }
+.msg-confirm-sub  { color: hsl(var(--color-text) / 0.6); }
+.msg-confirm-note { color: hsl(var(--color-primary) / 0.65); }
+.reply-icon       { color: hsl(var(--color-primary) / 0.5); }
+.reply-author     { color: hsl(var(--color-primary) / 0.8); }
+.reply-text       { color: hsl(var(--color-text) / 0.62); }
+
+/* ── Carte formulaire ── */
 .message-form-card {
  background: hsl(var(--color-surface));
  border: 1px solid hsl(var(--color-text) / 0.1);
@@ -121,9 +166,15 @@ function formatDate(iso: string) {
  background: hsl(var(--color-bg));
  color: hsl(var(--color-text));
  font-size: 0.875rem;
+  font-family: inherit;
  transition: border-color 0.2s;
 }

+.msg-input--select {
+  width: auto;
+  cursor: pointer;
+}
+
 .msg-input::placeholder {
  color: hsl(var(--color-text) / 0.35);
 }
@@ -133,10 +184,53 @@ function formatDate(iso: string) {
  border-color: hsl(var(--color-primary) / 0.5);
 }

+/* ── Carte message ── */
 .message-card {
  background: hsl(var(--color-surface));
  border: 1px solid hsl(var(--color-text) / 0.1);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
 }
+
+.type-pill {
+  font-size: 0.6rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.45rem;
+  border-radius: 9999px;
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary) / 0.7);
+}
+
+/* ── Réponse avec liaison graphique ── */
+.reply-thread {
+  position: relative;
+  display: flex;
+  gap: 0;
+  margin-top: 0.75rem;
+  padding-left: 1.25rem;
+}
+
+.reply-connector {
+  position: absolute;
+  left: 0.5rem;
+  top: -0.5rem;
+  bottom: 0.5rem;
+  width: 2px;
+  background: linear-gradient(
+    to bottom,
+    hsl(var(--color-primary) / 0.35),
+    hsl(var(--color-primary) / 0.15)
+  );
+  border-radius: 2px;
+}
+
+.reply-block {
+  flex: 1;
+  background: hsl(var(--color-primary) / 0.05);
+  border-left: 2px solid hsl(var(--color-primary) / 0.25);
+  border-radius: 0 0.5rem 0.5rem 0;
+  padding: 0.6rem 0.875rem;
+}
 </style>
--- a/app/pages/admin/messages.vue
+++ b/app/pages/admin/messages.vue
@@ -5,7 +5,7 @@
      <span class="text-sm text-white/40">{{ messages?.length || 0 }} message(s)</span>
    </div>

-    <div v-if="messages?.length" class="space-y-3">
+    <div v-if="messages?.length" class="space-y-4">
      <div
        v-for="msg in messages"
        :key="msg.id"
@@ -17,6 +17,9 @@
          <div class="flex items-center gap-2 min-w-0">
            <span class="font-semibold text-white text-sm truncate">{{ msg.author }}</span>
            <span v-if="msg.email" class="text-white/30 text-xs truncate">{{ msg.email }}</span>
+            <span class="type-badge" :class="`type-badge--${msg.type || 'reaction'}`">
+              {{ typeLabel(msg.type) }}
+            </span>
          </div>
          <div class="flex items-center gap-2 shrink-0">
            <span class="text-xs text-white/30">{{ formatDate(msg.createdAt) }}</span>
@@ -29,23 +32,54 @@
          </div>
        </div>

-        <!-- Texte éditable -->
-        <div v-if="editing === msg.id" class="mb-3">
-          <input
-            v-model="editForm.author"
-            class="admin-input mb-2 w-full"
-            placeholder="Auteur"
-          />
-          <textarea
-            v-model="editForm.text"
-            class="admin-input w-full"
-            rows="3"
-          />
+        <!-- Texte du message -->
+        <div v-if="editing === msg.id" class="mb-3 space-y-2">
+          <input v-model="editForm.author" class="admin-input w-full" placeholder="Auteur" />
+          <select v-model="editForm.type" class="admin-input w-full">
+            <option value="question">Question</option>
+            <option value="suggestion">Suggestion</option>
+            <option value="retour">Retour d'expérience</option>
+          </select>
+          <textarea v-model="editForm.text" class="admin-input w-full" rows="3" />
+        </div>
+        <p v-else class="msg-text text-sm leading-relaxed mb-3">{{ msg.text }}</p>
+
+        <!-- Réponse existante -->
+        <div v-if="msg.reply && replyEditing !== msg.id" class="reply-block mb-3">
+          <div class="flex items-center justify-between mb-1">
+            <span class="text-xs font-semibold text-primary/80">Réponse publiée</span>
+            <span class="text-xs text-white/30">{{ formatDate(msg.reply.publishedAt) }}</span>
+          </div>
+          <p class="text-white/60 text-sm leading-relaxed">{{ msg.reply.text }}</p>
+          <button class="action-btn mt-2 text-xs" @click="startReply(msg)">
+            <div class="i-lucide-pencil h-3 w-3" />
+            Modifier la réponse
+          </button>
+        </div>
+
+        <!-- Formulaire réponse -->
+        <div v-if="replyEditing === msg.id" class="reply-form mb-3">
+          <textarea
+            v-model="replyText"
+            class="admin-input w-full text-sm"
+            rows="3"
+            placeholder="Votre réponse..."
+          />
+          <div class="flex gap-2 mt-2">
+            <button class="action-btn action-btn--save" @click="saveReply(msg)">
+              <div class="i-lucide-check h-3.5 w-3.5" />
+              Publier la réponse
+            </button>
+            <button v-if="msg.reply" class="action-btn action-btn--danger" @click="removeReply(msg)">
+              <div class="i-lucide-x h-3.5 w-3.5" />
+              Supprimer la réponse
+            </button>
+            <button class="action-btn" @click="replyEditing = null">Annuler</button>
+          </div>
        </div>
-        <p v-else class="text-white/70 text-sm leading-relaxed mb-3">{{ msg.text }}</p>

        <!-- Actions -->
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 flex-wrap">
          <button class="action-btn" @click="togglePublished(msg)">
            <div :class="msg.published ? 'i-lucide-eye-off' : 'i-lucide-eye'" class="h-3.5 w-3.5" />
            {{ msg.published ? 'Dépublier' : 'Publier' }}
@@ -56,15 +90,18 @@
              <div class="i-lucide-check h-3.5 w-3.5" />
              Valider
            </button>
-            <button class="action-btn" @click="editing = null">
-              Annuler
-            </button>
+            <button class="action-btn" @click="editing = null">Annuler</button>
          </template>
          <button v-else class="action-btn" @click="startEdit(msg)">
            <div class="i-lucide-pencil h-3.5 w-3.5" />
            Modifier
          </button>

+          <button v-if="replyEditing !== msg.id && !msg.reply" class="action-btn action-btn--reply" @click="startReply(msg)">
+            <div class="i-lucide-reply h-3.5 w-3.5" />
+            Répondre
+          </button>
+
          <button class="action-btn action-btn--danger ml-auto" @click="remove(msg)">
            <div class="i-lucide-trash-2 h-3.5 w-3.5" />
            Supprimer
@@ -86,18 +123,33 @@ definePageMeta({
 const { data: messages, refresh } = await useFetch<any[]>('/api/admin/messages')

 const editing = ref<number | null>(null)
-const editForm = reactive({ author: '', text: '' })
+const editForm = reactive({ author: '', text: '', type: 'question' })
+
+const replyEditing = ref<number | null>(null)
+const replyText = ref('')
+
+const TYPE_LABELS: Record<string, string> = {
+  reaction: 'Réaction',
+  question: 'Question',
+  suggestion: 'Suggestion',
+  retour: 'Retour',
+}
+
+function typeLabel(type: string) {
+  return TYPE_LABELS[type] ?? type
+}

 function startEdit(msg: any) {
  editing.value = msg.id
  editForm.author = msg.author
  editForm.text = msg.text
+  editForm.type = TYPE_LABELS[msg.type] ? msg.type : 'question'
 }

 async function saveEdit(msg: any) {
  await $fetch(`/api/admin/messages/${msg.id}`, {
    method: 'PUT',
-    body: { author: editForm.author, text: editForm.text },
+    body: { author: editForm.author, text: editForm.text, type: editForm.type },
  })
  editing.value = null
  await refresh()
@@ -111,6 +163,29 @@ async function togglePublished(msg: any) {
  await refresh()
 }

+function startReply(msg: any) {
+  replyEditing.value = msg.id
+  replyText.value = msg.reply?.text ?? ''
+}
+
+async function saveReply(msg: any) {
+  await $fetch(`/api/admin/messages/${msg.id}`, {
+    method: 'PUT',
+    body: { reply: replyText.value.trim() || null },
+  })
+  replyEditing.value = null
+  await refresh()
+}
+
+async function removeReply(msg: any) {
+  await $fetch(`/api/admin/messages/${msg.id}`, {
+    method: 'PUT',
+    body: { reply: null },
+  })
+  replyEditing.value = null
+  await refresh()
+}
+
 async function remove(msg: any) {
  if (!confirm(`Supprimer le message de "${msg.author}" ?`)) return
  await $fetch(`/api/admin/messages/${msg.id}`, { method: 'DELETE' })
@@ -159,6 +234,45 @@ function formatDate(iso: string) {
  color: hsl(var(--color-accent));
 }

+.type-badge {
+  font-size: 0.6rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.45rem;
+  border-radius: 9999px;
+  background: hsl(var(--color-primary) / 0.12);
+  color: hsl(var(--color-primary) / 0.7);
+}
+
+.type-badge--question {
+  background: hsl(220 70% 50% / 0.12);
+  color: hsl(220 70% 65%);
+}
+
+.type-badge--suggestion {
+  background: hsl(280 60% 55% / 0.12);
+  color: hsl(280 60% 70%);
+}
+
+.type-badge--retour {
+  background: hsl(35 70% 50% / 0.12);
+  color: hsl(35 70% 65%);
+}
+
+.reply-block {
+  background: hsl(var(--color-primary) / 0.06);
+  border-left: 2px solid hsl(var(--color-primary) / 0.3);
+  border-radius: 0 0.5rem 0.5rem 0;
+  padding: 0.75rem 1rem;
+}
+
+.reply-form {
+  background: hsl(var(--color-surface) / 0.5);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+}
+
 .admin-input {
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
@@ -201,6 +315,20 @@ function formatDate(iso: string) {
  background: hsl(142 70% 40% / 0.1);
 }

+.action-btn--reply {
+  border-color: hsl(var(--color-primary) / 0.3);
+  color: hsl(var(--color-primary) / 0.8);
+}
+
+.action-btn--reply:hover {
+  background: hsl(var(--color-primary) / 0.08);
+}
+
+.msg-text {
+  color: hsl(var(--color-text) / 0.72);
+  white-space: pre-line;
+}
+
 .action-btn--danger:hover {
  background: hsl(0 70% 40% / 0.1);
  border-color: hsl(0 70% 40% / 0.3);
--- a/app/pages/messages.vue
+++ b/app/pages/messages.vue
@@ -48,6 +48,7 @@ useHead({
 const { data: messages } = await useFetch('/api/messages')

 const TYPE_LABELS: Record<string, string> = {
+  reaction: 'Réaction',
  question: 'Question',
  suggestion: 'Suggestion',
  retour: 'Retour',
--- a/server/api/admin/messages/[id].delete.ts
+++ b/server/api/admin/messages/[id].delete.ts
@@ -1,3 +1,5 @@
+const EMPTY = { messages: [] as any[] }
+
 export default defineEventHandler(async (event) => {
  const id = Number(getRouterParam(event, 'id'))

@@ -5,7 +7,7 @@ export default defineEventHandler(async (event) => {
    throw createError({ statusCode: 400, statusMessage: 'ID invalide' })
  }

-  const data = await readYaml<{ messages: any[] }>('messages.yml')
+  const data = await readDataYaml<{ messages: any[] }>('messages.yml', EMPTY)

  const index = data.messages.findIndex(m => m.id === id)
  if (index === -1) {
@@ -13,8 +15,7 @@ export default defineEventHandler(async (event) => {
  }

  data.messages.splice(index, 1)
-  await writeYaml('messages.yml', data)
-  gitSyncContent(`Suppression message #${id}`, ['site/messages.yml'])
+  await writeDataYaml('messages.yml', data)

  return { ok: true }
 })
--- a/server/api/admin/messages/[id].put.ts
+++ b/server/api/admin/messages/[id].put.ts
@@ -1,3 +1,5 @@
+const EMPTY = { messages: [] as any[] }
+
 export default defineEventHandler(async (event) => {
  const id = Number(getRouterParam(event, 'id'))

@@ -5,8 +7,15 @@ export default defineEventHandler(async (event) => {
    throw createError({ statusCode: 400, statusMessage: 'ID invalide' })
  }

-  const body = await readBody<{ text?: string; published?: boolean; author?: string }>(event)
-  const data = await readYaml<{ messages: any[] }>('messages.yml')
+  const body = await readBody<{
+    text?: string
+    published?: boolean
+    author?: string
+    type?: string
+    reply?: string | null
+  }>(event)
+
+  const data = await readDataYaml<{ messages: any[] }>('messages.yml', EMPTY)

  const message = data.messages.find(m => m.id === id)
  if (!message) {
@@ -16,9 +25,14 @@ export default defineEventHandler(async (event) => {
  if (body.text !== undefined) message.text = body.text
  if (body.published !== undefined) message.published = body.published
  if (body.author !== undefined) message.author = body.author
+  if (body.type !== undefined) message.type = body.type
+  if ('reply' in body) {
+    message.reply = body.reply
+      ? { text: body.reply, publishedAt: new Date().toISOString() }
+      : null
+  }

-  await writeYaml('messages.yml', data)
-  gitSyncContent(`Mise à jour message #${id}`, ['site/messages.yml'])
+  await writeDataYaml('messages.yml', data)

  return { ok: true }
 })
--- a/server/api/admin/messages/index.get.ts
+++ b/server/api/admin/messages/index.get.ts
@@ -1,4 +1,6 @@
+const EMPTY = { messages: [] as any[] }
+
 export default defineEventHandler(async () => {
-  const data = await readYaml<{ messages: any[] }>('messages.yml')
+  const data = await readDataYaml<{ messages: any[] }>('messages.yml', EMPTY)
  return data.messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
 })
--- a/server/api/messages/index.get.ts
+++ b/server/api/messages/index.get.ts
@@ -1,7 +1,8 @@
+const EMPTY = { messages: [] as any[] }
+
 export default defineEventHandler(async () => {
-  const data = await readYaml<{ messages: any[] }>('messages.yml')
-  const published = data.messages
+  const data = await readDataYaml<{ messages: any[] }>('messages.yml', EMPTY)
+  return data.messages
    .filter(m => m.published)
    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-  return published
 })
--- a/server/api/messages/index.post.ts
+++ b/server/api/messages/index.post.ts
@@ -1,24 +1,28 @@
+const EMPTY = { messages: [] as any[] }
+
 export default defineEventHandler(async (event) => {
-  const body = await readBody<{ author: string; email?: string; text: string }>(event)
+  const body = await readBody<{ author: string; email?: string; text: string; type?: string }>(event)

  if (!body.text?.trim()) {
    throw createError({ statusCode: 400, statusMessage: 'Message requis' })
  }

-  const data = await readYaml<{ messages: any[] }>('messages.yml')
+  const data = await readDataYaml<{ messages: any[] }>('messages.yml', EMPTY)

  const maxId = data.messages.reduce((max, m) => Math.max(max, m.id || 0), 0)

  data.messages.push({
    id: maxId + 1,
-    author: body.author.trim(),
+    author: body.author?.trim() || 'Anonyme',
    email: body.email?.trim() || '',
    text: body.text.trim(),
+    type: body.type || 'reaction',
    published: false,
    createdAt: new Date().toISOString(),
+    reply: null,
  })

-  await writeYaml('messages.yml', data)
+  await writeDataYaml('messages.yml', data)

  return { ok: true }
 })
--- a/server/utils/content.ts
+++ b/server/utils/content.ts
@@ -1,8 +1,10 @@
-import { readFile, writeFile } from 'node:fs/promises'
+import { readFile, writeFile, mkdir } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
 import { join } from 'node:path'
 import yaml from 'yaml'

 const dataDir = join(process.cwd(), 'site')
+const runtimeDataDir = join(process.cwd(), 'data')

 const cache = new Map<string, { data: unknown; mtime: number }>()

@@ -35,3 +37,19 @@ export function invalidateCache(relativePath?: string): void {
    cache.clear()
  }
 }
+
+// Runtime data — stored in data/ (Docker volume, never overwritten by deploys)
+
+export async function readDataYaml<T = unknown>(relativePath: string, defaultValue: T): Promise<T> {
+  const filePath = join(runtimeDataDir, relativePath)
+  if (!existsSync(filePath)) return defaultValue
+  const raw = await readFile(filePath, 'utf-8')
+  return yaml.parse(raw) as T
+}
+
+export async function writeDataYaml(relativePath: string, data: unknown): Promise<void> {
+  await mkdir(runtimeDataDir, { recursive: true })
+  const filePath = join(runtimeDataDir, relativePath)
+  const raw = yaml.stringify(data, { lineWidth: 120 })
+  await writeFile(filePath, raw, 'utf-8')
+}