wim-tilburgs-publisher

name: wim-tilburgs-publisher description: Schrijf en publiceer artikelen voor wimtilburgs.nl met afbeeldingen en social media optimalisatie. Drie secties: leefstijl, smarthealth, soefisme. Inclusief per-artikel OG images voor social sharing.

Wim Tilburgs Publisher

Schrijf en publiceer artikelen voor wimtilburgs.nl (Astro Starlight) met afbeeldingen en social media optimalisatie.

Wanneer te gebruiken

• Nieuw artikel schrijven voor wimtilburgs.nl
• Afbeelding toevoegen aan bestaand artikel
• Social card/OG image maken voor artikel
• Content in een van de drie secties publiceren

Quick Reference

Deployment: Push naar main → Cloudflare Pages (automatisch)

Workflow

1. Sectie kiezen (leefstijl/smarthealth/soefisme)
2. Onderwerp bepalen
3. Research (bronnen of WebSearch)
4. Artikel schrijven
5. Afbeeldingen genereren (hero + optioneel inline)
6. Bestand aanmaken met OG tags
7. Toevoegen aan blog index
8. Vertalingen maken (en, es, fr, de, no)
9. Review + publiceren

Stap 1-4: Onderwerp en Schrijven

Sectie Kiezen

Vraag voor welke blog het artikel is:

• leefstijl - Persoonlijke transformatie, JLAM, diabetes reversie
• smarthealth - Digitale gezondheid, AI, e-health, 25+ jaar ICT
• soefisme - Universeel Soefisme, contemplatie, ISM

Research

Optie A: Gebruiker levert bronnen Optie B: WebSearch voor context

Schrijfstijl

Per sectie:

• Leefstijl: "In 2015 woog ik 125 kg..." - persoonlijke transformatie
• SmartHealth: Technisch toegankelijk, AI/data context
• Soefisme: Contemplatief, reflectief, niet dogmatisch

Stap 5: Afbeeldingen Genereren

Na het artikel schrijven, genereer afbeeldingen voor social sharing.

5a. Hero Image (verplicht voor OG/social)

1. Analyseer het artikel voor visuele suggesties
2. Stel 2-3 prompt opties voor:

🖼️ Hero image opties:

A) "Professional photograph of [scene], golden hour lighting,
    warm inviting atmosphere, editorial magazine aesthetic,
    no text anywhere in image, shallow depth of field"

B) "Artistic photograph of [alternatieve scene],
    natural daylight, contemplative mood"

C) [Eigen idee...]

Welke spreekt je aan, of wil je aanpassen?

3. Na keuze, genereer via /image-gen:

   • Backend: Imagen 4 Ultra (default voor fotorealisme)
   • Aspect ratio: 16:9 (1200x630) voor OG compatibility
   • Prompt tips: "Professional photography", "zero text in image"

4. Sla op met beschrijvende bestandsnamen:

   • Google Drive (master/archief): ~/Library/CloudStorage/GoogleDrive-wim@jlam.nl/Mijn Drive/image-gen/{datum}-{slug}/
   • Website: public/images/{slug}/hero.jpg (1200x630, web-optimized)
   • Download: public/images/{slug}/hero-original.png (originele resolutie)

5b. Inline Afbeelding (optioneel)

Voor extra visuals bij specifieke secties:

• Canvas Generator voor tekst/diagrammen
• Imagen voor extra sfeerbeelden

Sla op als: public/images/{slug}/[beschrijvende-naam].png

Prompt Templates per Sectie

Leefstijl:

Warm lifestyle photograph of [scene related to health transformation],
golden hour lighting, hopeful atmosphere, personal journey aesthetic,
no text anywhere in image, magazine editorial style

SmartHealth:

Modern technology photograph of [AI/health tech scene],
clean minimal aesthetic, blue-tinted lighting, professional,
no text or logos, futuristic but human-centered

Soefisme:

Contemplative photograph of [spiritual/meditative scene],
soft natural light, peaceful serene atmosphere,
no text anywhere, timeless mystical quality

Stap 6: Bestand Aanmaken met OG Tags

Bestandslocatie

src/content/docs/{sectie}/blog/{slug}.md

Slug = kebab-case van titel (bijv. soefi-perspectief-positieve-psychologie.md)

Frontmatter met Per-Artikel OG Image

---
title: "Artikel Titel"
description: "Korte beschrijving van ~150 tekens voor SEO"
head:
  - tag: meta
    attrs:
      property: og:image
      content: https://wimtilburgs.nl/images/{slug}/hero.jpg
  - tag: meta
    attrs:
      property: og:image:width
      content: "1200"
  - tag: meta
    attrs:
      property: og:image:height
      content: "630"
  - tag: meta
    attrs:
      name: twitter:image
      content: https://wimtilburgs.nl/images/{slug}/hero.jpg
---

Let op: De head frontmatter overschrijft de site-wide OG image voor dit specifieke artikel.

Artikel met ArticleImage Component

---
title: "Artikel Titel"
description: "Beschrijving..."
head:
  - tag: meta
    attrs:
      property: og:image
      content: https://wimtilburgs.nl/images/{slug}/hero.jpg
---

import ArticleImage from '../../../../components/ArticleImage.astro';

{/* Hero image bovenaan */}
<ArticleImage
  src="/images/{slug}/hero.jpg"
  alt="Beschrijvende alt tekst"
  caption="Optionele caption"
  downloadSrc="/images/{slug}/hero-original.png"
/>

## Eerste sectie

Inhoud van het artikel...

{/* Optioneel: inline afbeelding bij relevante sectie */}
<ArticleImage
  src="/images/{slug}/inline-naam.png"
  alt="Alt tekst"
  caption="Caption"
/>

Stap 7: Toevoegen aan Blog Index

BELANGRIJK: Elk artikel moet handmatig worden toegevoegd aan de blog index!

De blog index pagina's zijn:

• src/content/docs/leefstijl/blog/index.md
• src/content/docs/smarthealth/blog/index.md
• src/content/docs/soefisme/blog/index.md

Voeg het nieuwe artikel bovenaan de lijst toe:

## Artikelen

### [Artikel Titel](/sectie/blog/slug/)

Korte beschrijving van het artikel (1-2 zinnen).

### [Bestaand artikel]...

Stap 8: Vertalingen Maken

De site ondersteunt 6 talen. Maak vertalingen voor alle locales:

Vertaalrichtlijnen

1. Bestandsnaam: Zelfde slug als origineel (bijv. soefi-perspectief-positieve-psychologie.mdx)
2. Frontmatter: Vertaal title en description
3. OG image: Zelfde afbeelding, URL blijft gelijk
4. Content: Vertaal volledig, behoud structuur en citaten
5. Citaten: Originele Engelse citaten van Hazrat Inayat Khan NIET vertalen
6. Blog index: Update ook index.md in elke locale

Voorbeeld Engels

---
title: "The Inner Alchemy of Happiness"
description: "A Sufi perspective on positive psychology..."
head:
  - tag: meta
    attrs:
      property: og:image
      content: https://wimtilburgs.nl/images/soefi-perspectief-positieve-psychologie/hero.jpg
---

Tip: Genereer alle 5 vertalingen parallel voor efficientie.

Stap 9: Review en Publiceren

BELANGRIJK: Vraag ALTIJD toestemming voordat je pusht!

git add src/content/docs/{sectie}/blog/{slug}.mdx \
        src/content/docs/{sectie}/blog/index.md \
        public/images/{slug}/
git commit -m "📝 Nieuw artikel: {titel}"
# WACHT op toestemming, dan: git push origin main

Bestandsstructuur

wim-tilburgs/
├── public/
│   └── images/
│       └── {artikel-slug}/
│           ├── hero.jpg           (1200x630, web-optimized)
│           ├── hero-original.png  (originele resolutie)
│           └── [andere].png       (inline afbeeldingen)
├── src/
│   ├── components/
│   │   └── ArticleImage.astro     (herbruikbaar component)
│   └── content/
│       └── docs/
│           ├── leefstijl/blog/    (leefstijl artikelen)
│           ├── smarthealth/blog/  (smarthealth artikelen)
│           └── soefisme/blog/     (soefisme artikelen)

Markdown Richtlijnen

• # NOOIT gebruiken (Starlight genereert H1 uit frontmatter title)
• ## voor hoofdsecties, ### voor subsecties
• Lege regel voor/na koppen
• **vetgedrukt** voor nadruk
• *cursief* voor andere talen/titels
• Citaten: > "Tekst" — Bron

Checklist

• Frontmatter compleet (title, description)
• Per-artikel OG image in head frontmatter
• Hero image gegenereerd en opgeslagen
• ArticleImage component gebruikt
• Slug is kebab-case
• Juiste sectie directory
• Google Drive backup van originele afbeelding
• Artikel toegevoegd aan blog index (nl)
• Vertalingen gemaakt (en, es, fr, de, no)
• Blog index updated in alle locales
• Toestemming gevraagd voor push

Bestaande Artikelen Upgraden

Wanneer gebruiker vraagt om afbeelding bij bestaand artikel:

1. Lees het artikel en identificeer:

   • Hoofdthema en kernboodschap
   • Emotionele toon (persoonlijk, technisch, contemplatief)
   • Concrete scenes die visueel sterk zijn

2. Genereer visuele suggesties:

   • 2-3 opties voor hero image
   • Passend bij de sectie (leefstijl/smarthealth/soefisme)

3. Volg dezelfde workflow:

   • Prompt samen kiezen
   • Imagen 4 Ultra genereren
   • Toevoegen aan frontmatter (head voor OG)
   • ArticleImage component in body

Triggers:

• "Voeg afbeelding toe aan [artikel]"
• "Maak social card voor [artikel]"
• "Dit artikel heeft een hero nodig"