diff --git a/AGENTS.md b/AGENTS.md index 7d5c626..2afda7f 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -24,7 +24,9 @@ Single-page static landing page for an NGO ERP product. index.html ← only HTML file — layout + all inline JS + i18n src/input.css ← Tailwind source (edit here, then rebuild) assets/site.css ← compiled output — DO NOT edit by hand -blog.json ← blog post data array +blog.json ← English blog posts (canonical + fallback) +blog.es.json ← Spanish blog posts +blog.de.json ← German blog posts tailwind.config.js ← design tokens (colors, fonts, shadows) ``` @@ -106,7 +108,21 @@ jq empty blog.json && echo "JSON valid" ## Blog Post Schema -`blog.json` is a root-level JSON array. Every post object contains **exactly these five fields**: +### Language-to-file mapping + +| Language | File loaded | Fallback | +|---|---|---| +| English (`en`) | `blog.json` | — | +| Spanish (`es`) | `blog.es.json` | `blog.json` | +| German (`de`) | `blog.de.json` | `blog.json` | + +The loader in `index.html` fetches the language-specific file automatically when the visitor switches language. If a language file is missing or returns an error, it falls back to `blog.json` silently. + +`blog.json` is always the **English source and fallback**. Keep all three files structurally identical — same number of posts, same order, translated content only. + +--- + +`blog.json` (and every language variant) is a root-level JSON array. Every post object contains **exactly these five fields**: ```json [ @@ -132,21 +148,31 @@ NEVER add extra fields (`slug`, `author`, `tags`, `excerpt`, `hero_image`, etc.) ### Adding a new blog post (jq method) +> Add to **all three files** in the same session. A post that exists in English but not in Spanish/German will silently fall back to the English version for those visitors — which is acceptable temporarily but should be resolved promptly. + ```bash # 1. Pull latest git pull origin main -# 2. Backup (once per session) -mkdir -p /backup && cp blog.json /backup/blog.json.$(date +%Y%m%d%H%M%S) +# 2. Backup all blog files once per session +mkdir -p /backup +for f in blog.json blog.es.json blog.de.json; do + cp $f /backup/$f.$(date +%Y%m%d%H%M%S) +done -# 3. Prepend new post — $NEW_JSON must be a valid single post object -jq --argjson new "$NEW_JSON" '. = [$new] + .' blog.json > tmp.json && mv tmp.json blog.json +# 3. Prepend new post to each language file +# $NEW_EN, $NEW_ES, $NEW_DE must each be a valid single post object +jq --argjson new "$NEW_EN" '. = [$new] + .' blog.json > tmp.json && mv tmp.json blog.json +jq --argjson new "$NEW_ES" '. = [$new] + .' blog.es.json > tmp.json && mv tmp.json blog.es.json +jq --argjson new "$NEW_DE" '. = [$new] + .' blog.de.json > tmp.json && mv tmp.json blog.de.json -# 4. Validate -jq empty blog.json && echo "JSON valid" +# 4. Validate all three +jq empty blog.json && echo "blog.json OK" +jq empty blog.es.json && echo "blog.es.json OK" +jq empty blog.de.json && echo "blog.de.json OK" # 5. Commit and push -git add blog.json +git add blog.json blog.es.json blog.de.json git commit -m "blog: add post – " git push origin main ``` diff --git a/blog.de.json b/blog.de.json new file mode 100644 index 0000000..6e821c1 --- /dev/null +++ b/blog.de.json @@ -0,0 +1,16 @@ +[ + { + "area": "Automatisierung", + "date": "2026-03-25", + "title": "NGO-Verwaltung um 20–40 % reduzieren: 7 Workflows, die du diesen Monat automatisieren kannst", + "teaser": "<p>Maria verbrachte ihre Abende mit Papierkram statt mit den Familien, denen sie helfen wollte. Mit Odoo und n8n reduzierte ihr Team den Verwaltungsaufwand in unter vier Wochen um ein Drittel.</p>", + "content": "<h3>Die Admin-Falle, die jede NGO kennt</h3><p>Verstreute Spenderdaten, wiederholte Kopier-Einfüge-Schritte und langsame Bestätigungen untergraben das Vertrauen und kosten wertvolle Energie. Ein ERP bündelt Kontakte, Spenden, Rechnungen und Projektaufgaben an einem zentralen Ort — niemand muss dieselben Daten mehr in fünf verschiedene Tools eintippen.</p><h3>Odoo als Kern, n8n als Verbindung</h3><p>Nutze Odoo für Kontakte, Spenden, Projekte und Dokumente. Erstelle dann n8n-Workflows, um automatische Spendenquittungen zu versenden, Kontaktdatensätze bei Formulareinreichungen zu aktualisieren, Folgeaufgaben zu terminieren und Zusammenfassungsberichte per Slack oder E-Mail zu verteilen.</p><h3>7 Workflows für diesen Monat</h3><ul><li>Sofortige Dankesnachricht an Spender bei jeder Zuwendung</li><li>Fördermittel-Compliance-Erinnerungen im 30-Tage-Rhythmus</li><li>Onboarding-Checkliste für Freiwillige automatisch bei der Anmeldung</li><li>Monatlicher Impact-Bericht automatisch erstellt und versendet</li><li>Dubletten-Erkennung bei jedem Datenimport</li><li>Rechnungsgenehmigung nach Projekt und Budgetposition geroutet</li><li>Ausgabenerfassung aus dem Feld mit Foto-Belegerfassung</li></ul><h3>Was du erwarten kannst</h3><p>Typische NGO-Implementierungen zeigen innerhalb weniger Wochen 20–40 % weniger Verwaltungsstunden. Marias Team hörte mit den nächtlichen Admin-Sprints auf und begann jeden Morgen mit einem einzigen Dashboard — mehr Zeit für Lehrercoaching, Gemeindebesuche und die Planung wirkungsvoller Programme.</p>" + }, + { + "area": "Spenderkommunikation", + "date": "2026-03-18", + "title": "Wie Maya das Spender-Chaos in klare Verbindungen verwandelte", + "teaser": "<p>Maya verwandelte verstreute Spendernachrichten in einen reibungslosen, vertrauenswürdigen Ablauf, der die Unterstützung wachsen lässt und das gesamte Team auf Kurs hält.</p>", + "content": "<h3>Von verstreuten E-Mails zur einheitlichen Ansicht</h3><p>Maya jonglierte früher mit Tabellen, E-Mail-Threads und Haftnotizen, um Spenderinteraktionen zu verfolgen. Nachrichten gingen verloren, Dankesworte kamen verspätet an und das Vertrauen bröckelte. Sie wusste, dass sich etwas ändern musste.</p><h3>Den Spender-Journey strukturieren</h3><p>Sie kartierte jeden Kontaktpunkt: Erstkontakt, Spende, Nachfassaktionen, Erneuerungen und Sonderkampagnen. Jede Interaktion erhielt eine Karte in Odoo mit Spendername, Datum, bevorzugtem Kanal und Teamnotizen — für alle auf einen Blick sichtbar.</p><h3>Automatisierte Berührungspunkte</h3><p>n8n übernimmt die Routine: Spender werden innerhalb von Minuten nach einer Zuwendung gedankt, Zusagen werden bestätigt und das Team wird vor fälligen Erneuerungen benachrichtigt. Nichts fällt durchs Raster, und der persönliche Ton bleibt erhalten — dank Vorlagen, die auf jedes Spendersegment zugeschnitten sind.</p><h3>Transparenz auf allen Ebenen</h3><p>Spender können Updates zu den Projekten sehen, die sie unterstützt haben. Status-Labels in Kampagnen zeigen zugewiesene Mittel, Impact-Geschichten und bevorstehende Veranstaltungen. Mitarbeiter hinterlassen für Kollegen sichtbare Notizen — doppelte Kontaktaufnahmen und unangenehme Überschneidungen gehören der Vergangenheit an.</p><h3>Visuelle Echtzeit-Dashboards</h3><p>Ein Live-Dashboard zeigt Spenderaktivitäten, bevorstehende Erneuerungen und die Kampagnengesundheit auf einen Blick. Farbcodes setzen Prioritäten: Grün für bestätigte Gaben, Gelb für ausstehende Zusagen, Rot für dringende Nachfassaktionen, die menschliche Aufmerksamkeit erfordern.</p><h3>Kommunikationsrhythmus</h3><p>Wöchentliche Spender-Check-ins halten das Team auf Kurs. Monatliche Newsletter heben Erfolge, Spender-Impact und kommende Möglichkeiten hervor. Sonderkampagnen lösen personalisierte Micro-E-Mails aus, die auf Spenderlevel und Verlauf jeder Person abgestimmt sind.</p><ul><li>Montag: neue Spender und ausstehende Nachfassaktionen prüfen.</li><li>Mittwoch: Kampagnenfortschritt bestätigen und Spendernotizen aktualisieren.</li><li>Freitag: Dankesmails und Impact-Updates versenden.</li></ul><h3>Kennzahlen & Wirkung</h3><p>Die Spenderbindung verbesserte sich um 25 %. Reaktionszeiten sanken von Tagen auf Stunden. Mitarbeiter berichten von weniger Stress, weil Kommunikation berechenbar, sichtbar und nicht mehr vom Gedächtnis einer einzelnen Person abhängig ist.</p><h3>Dein Rollout-Plan</h3><ul><li>Alle Spenderdaten in Odoo-Karten importieren und Verantwortliche zuweisen.</li><li>n8n-Alerts für Gaben, Nachfassaktionen und bevorstehende Erneuerungen einrichten.</li><li>Dashboards mit aktiven Spendern, Zusagen und Kampagnenstatus erstellen.</li><li>Dankesmails und vierteljährliche Impact-Updates automatisieren.</li></ul><p>Vier Schritte ersetzen wochenlange verstreute E-Mails und verpasste Möglichkeiten — und jeder Spender beginnt sich wirklich wahrgenommen zu fühlen.</p>" + } +] diff --git a/blog.es.json b/blog.es.json new file mode 100644 index 0000000..e78745e --- /dev/null +++ b/blog.es.json @@ -0,0 +1,16 @@ +[ + { + "area": "Automatización", + "date": "2026-03-25", + "title": "Reduce el trabajo administrativo de tu ONG un 20–40 %: 7 flujos que puedes automatizar este mes", + "teaser": "<p>María pasaba sus noches sepultada en papeleo en lugar de ayudar a las familias que había venido a servir. Con Odoo y n8n, su equipo redujo el tiempo administrativo en un tercio en menos de cuatro semanas.</p>", + "content": "<h3>La trampa administrativa que toda ONG conoce</h3><p>Datos dispersos de donantes, pasos repetitivos de copiar y pegar y acuses de recibo lentos erosionan la confianza y agotan la energía del equipo. Un ERP centraliza contactos, donaciones, facturas y tareas de proyecto en un único lugar, de modo que nadie tenga que reintroducir los mismos datos en cinco herramientas distintas.</p><h3>Odoo como núcleo, n8n como conector</h3><p>Usa Odoo para Contactos, Donaciones, Proyectos y Documentos. Después crea flujos en n8n para enviar recibos automáticos a donantes, actualizar registros cuando se envían formularios, programar tareas de seguimiento y distribuir informes de resumen por Slack o correo electrónico.</p><h3>7 flujos para automatizar este mes</h3><ul><li>Correo de agradecimiento instantáneo al donante en cada aportación</li><li>Recordatorios de cumplimiento de subvenciones cada 30 días</li><li>Lista de incorporación de voluntarios activada al registrarse</li><li>Informe de impacto mensual generado y enviado automáticamente</li><li>Detección de contactos duplicados en cada importación</li><li>Enrutamiento de aprobaciones de facturas por proyecto y línea presupuestaria</li><li>Envío de gastos desde campo con captura de recibo fotográfico</li></ul><h3>Resultados esperados</h3><p>Las implementaciones habituales en ONG muestran un 20–40 % menos de horas administrativas en pocas semanas. El equipo de María dejó de hacer maratones nocturnos de administración y empezó cada mañana con un solo panel de control, liberando tiempo para capacitar a docentes, visitar comunidades y planificar programas de impacto.</p>" + }, + { + "area": "Comunicación con Donantes", + "date": "2026-03-18", + "title": "Cómo Maya convirtió el caos de donantes en conexiones claras", + "teaser": "<p>Maya transformó los mensajes dispersos de donantes en un flujo fluido y confiable que hace crecer el apoyo y mantiene a todo el equipo alineado.</p>", + "content": "<h3>De correos dispersos a una visión única</h3><p>Maya solía manejar hojas de cálculo, hilos de correo y notas adhesivas para rastrear las interacciones con donantes. Se perdían mensajes, los agradecimientos llegaban tarde y la confianza comenzaba a tambalearse. Sabía que algo tenía que cambiar.</p><h3>Organizando el recorrido del donante</h3><p>Mapeó cada punto de contacto: contacto inicial, donación, seguimientos, renovaciones y campañas especiales. Cada interacción tuvo su tarjeta en Odoo con el nombre del donante, la fecha, el canal preferido y las notas del equipo, visible para todos de un vistazo.</p><h3>Puntos de contacto automatizados</h3><p>n8n automatiza la rutina: agradece a los donantes a los pocos minutos de recibir una aportación, confirma los compromisos y avisa al equipo antes de que venzan las renovaciones. Nadie se queda sin respuesta y el tono personal se mantiene intacto gracias a plantillas diseñadas para cada segmento de donantes.</p><h3>Transparencia en todos los niveles</h3><p>Los donantes pueden ver actualizaciones de los proyectos que apoyaron. Las etiquetas de estado en las campañas muestran los fondos asignados, historias de impacto y próximos eventos. El personal deja notas visibles para sus colegas, eliminando contactos duplicados y superposiciones incómodas.</p><h3>Paneles visuales en tiempo real</h3><p>Un panel en vivo muestra la actividad de donantes, las próximas renovaciones y la salud de la campaña de un solo vistazo. Los códigos de color marcan la prioridad: verde para donaciones confirmadas, amarillo para compromisos pendientes, rojo para seguimientos urgentes que requieren atención humana.</p><h3>Ritmo de comunicación</h3><p>Las revisiones semanales de donantes mantienen al equipo alineado. Los boletines mensuales destacan logros, impacto de los donantes y próximas oportunidades. Las campañas especiales activan microemails personalizados según el nivel de donación y el historial de cada persona.</p><ul><li>Lunes: revisar nuevos donantes y seguimientos pendientes.</li><li>Miércoles: confirmar el avance de las campañas y actualizar las notas de donantes.</li><li>Viernes: enviar correos de agradecimiento y actualizaciones de impacto.</li></ul><h3>Métricas e impacto</h3><p>La retención de donantes mejoró un 25 %. Los tiempos de respuesta bajaron de días a horas. El personal reporta menos estrés porque la comunicación es predecible, visible y ya no depende de la memoria de una sola persona.</p><h3>Tu plan de implementación</h3><ul><li>Importar todos los registros de donantes a Odoo y asignar responsables.</li><li>Configurar alertas en n8n para donaciones, seguimientos y renovaciones.</li><li>Crear paneles con donantes activos, compromisos y estado de campaña.</li><li>Automatizar correos de agradecimiento y actualizaciones de impacto trimestrales.</li></ul><p>Cuatro pasos reemplazan semanas de correos dispersos y oportunidades perdidas — y cada donante empieza a sentirse genuinamente valorado.</p>" + } +] diff --git a/blog.json b/blog.json index 82fc89f..79fb9bb 100644 --- a/blog.json +++ b/blog.json @@ -1,9 +1,16 @@ [ + { + "area": "Automation", + "date": "2026-03-25", + "title": "Reduce NGO Admin by 20–40%: 7 Workflows You Can Automate This Month", + "teaser": "<p>Maria spent her evenings buried in paperwork instead of serving the families she came to help. With Odoo and n8n, her team cut admin time by a third in under four weeks.</p>", + "content": "<h3>The admin trap every NGO knows</h3><p>Scattered donor data, repeated copy-paste steps, and slow acknowledgements erode trust and drain energy. An ERP gives you one central place for contacts, donations, invoices, and project tasks — so people stop re-entering the same data into five different tools.</p><h3>Odoo as the hub, n8n as the glue</h3><p>Use Odoo for Contacts, Donations, Projects, and Documents. Then build n8n workflows to trigger automatic donor receipts, update contact records when forms are submitted, schedule follow-up tasks, and push summary reports to Slack or email.</p><h3>7 workflows to automate this month</h3><ul><li>Instant donor thank-you email on every gift</li><li>Grant compliance reminders on a rolling 30-day schedule</li><li>Volunteer onboarding checklist triggered on sign-up</li><li>Monthly impact report compiled and sent automatically</li><li>Duplicate-contact detection on every import</li><li>Invoice approval routing by project and budget line</li><li>Field-office expense submission with photo receipt capture</li></ul><h3>What to expect</h3><p>Common NGO implementations show 20–40% fewer administrative hours within weeks. Maria's team stopped doing nightly admin sprints and started each morning with a single dashboard — freeing her to coach teachers, visit communities, and plan programmes.</p>" + }, { "area": "Donor Communication", + "date": "2026-03-18", "title": "How Maya Turned Donor Chaos into Clear Connections", - "teaser": "<p>Maya transformed scattered donor messages into a smooth, trustworthy flow that grows support.</p>", - "content": "<h3>From scattered emails to a single view</h3>\n<p>Maya used to juggle spreadsheets, inbox threads, and sticky notes, trying to track donor interactions. Messages were missed, thank-yous delayed, and trust wavered.</p>\n<h3>Organizing the donor journey</h3>\n<p>She mapped every donor touchpoint: initial contact, donation, follow-ups, renewals, and special campaigns.</p>\n<p>Each interaction got a card in Odoo showing donor, date, preferred channel, and notes.</p>\n<h3>Automated touchpoints</h3>\n<p>n8n automates reminders: thank donors, confirm gifts, and ping staff before renewals. No one misses a beat, and personalization stays intact.</p>\n<h3>Transparency everywhere</h3>\n<p>Donors can see updates on projects they supported. Status labels on campaigns show funds allocated, impact stories, and upcoming events.</p>\n<p>Staff leave notes visible to colleagues, so no duplicate outreach or awkward overlaps happen.</p>\n<h3>Visual dashboards</h3>\n<p>A live dashboard shows donor activity, upcoming renewals, and campaign health. Color codes indicate priority: green for confirmed gifts, yellow for pending pledges, red for urgent follow-ups.</p>\n<h3>Communication rhythm</h3>\n<p>Weekly donor check-ins keep the team aligned. Monthly newsletters highlight wins, donor impact, and upcoming opportunities. Special campaigns trigger micro-emails personalized by giving level.</p>\n<ul>\n <li>Monday: review new donors and pending follow-ups.</li>\n <li>Wednesday: confirm campaign progress and donor notes.</li>\n <li>Friday: send thank-you emails and impact updates.</li>\n</ul>\n<h3>Metrics & impact</h3>\n<p>Donor retention improved by 25%.</p>\n<p>Response times dropped from days to hours.</p>\n<p>Staff report feeling less stressed because communication is predictable and visible.</p>\n<h3>Rollout plan</h3>\n<ul>\n <li>Import all donor records into Odoo cards and tag owners.</li>\n <li>Set n8n alerts for gifts, follow-ups, and renewals.</li>\n <li>Create dashboards showing active donors, pledges, and campaign status.</li>\n <li>Automate thank-you emails and impact updates.</li>\n</ul>\n<p>This replaces weeks of scattered emails and missed opportunities.</p>\n<p><strong>Micro-CTA:</strong> Want Maya’s donor management template? Reply “connect” and we’ll send the setup guide.</p>\n<h3>Story beats returned</h3>\n<p>The organization still hustles, but now each donor feels seen, valued, and in the loop. Maya smiles at every timely thank-you that lands without chasing anyone.</p>\n<h3>Your invitation</h3>\n<p>Subscribe to the NGO ops newsletter or book a donor communication clinic. We’ll map your donor flow, load it into Odoo, wire n8n alerts, and leave you with clear, trustworthy connections you can maintain effortlessly.</p>", - "date": "2026-03-25" + "teaser": "<p>Maya transformed scattered donor messages into a smooth, trustworthy flow that grows support and keeps every team member aligned.</p>", + "content": "<h3>From scattered emails to a single view</h3><p>Maya used to juggle spreadsheets, inbox threads, and sticky notes trying to track donor interactions. Messages were missed, thank-yous arrived late, and trust wavered. She knew something had to change.</p><h3>Organizing the donor journey</h3><p>She mapped every donor touchpoint: initial contact, donation, follow-ups, renewals, and special campaigns. Each interaction got a card in Odoo showing the donor name, date, preferred channel, and notes — visible to the whole team at a glance.</p><h3>Automated touchpoints</h3><p>n8n automates the routine: thank donors within minutes of a gift, confirm pledges, and ping staff before renewals fall due. No one misses a beat, and the personal tone stays intact because templates are built around each donor segment.</p><h3>Transparency everywhere</h3><p>Donors can see updates on the projects they supported. Status labels on campaigns show funds allocated, impact stories, and upcoming events. Staff leave notes visible to colleagues so duplicate outreach and awkward overlaps never happen.</p><h3>Visual dashboards</h3><p>A live dashboard shows donor activity, upcoming renewals, and campaign health at a glance. Colour codes set the priority: green for confirmed gifts, yellow for pending pledges, red for urgent follow-ups that need a human touch.</p><h3>Communication rhythm</h3><p>Weekly donor check-ins keep the team aligned. Monthly newsletters highlight wins, donor impact, and upcoming opportunities. Special campaigns trigger personalised micro-emails based on giving level and history.</p><ul><li>Monday: review new donors and pending follow-ups.</li><li>Wednesday: confirm campaign progress and update donor notes.</li><li>Friday: send thank-you emails and impact updates.</li></ul><h3>Metrics & impact</h3><p>Donor retention improved by 25%. Response times dropped from days to hours. Staff report feeling less stressed because communication is predictable, visible, and no longer dependent on any one person's memory.</p><h3>Your rollout plan</h3><ul><li>Import all donor records into Odoo cards and assign owners.</li><li>Set n8n alerts for gifts, follow-ups, and upcoming renewals.</li><li>Build dashboards showing active donors, pledges, and campaign status.</li><li>Automate thank-you emails and quarterly impact updates.</li></ul><p>Four steps replace weeks of scattered emails and missed opportunities — and every donor starts to feel genuinely seen.</p>" } ] diff --git a/index.html b/index.html index 5112796..ed15850 100644 --- a/index.html +++ b/index.html @@ -388,19 +388,34 @@ let blogPosts = []; let blogExpanded = false; - if (blogGrid) { - fetch('blog.json') - .then(response => response.json()) - .then(data => { - blogPosts = Array.isArray(data) ? data : []; - renderBlogCards(); - }) - .catch(error => { - if (blogError) { - blogError.classList.remove('hidden'); - blogError.textContent = getTranslation(document.documentElement.lang, 'blog-error', 'Unable to load articles right now.'); - } - console.error('blog.json load failed', error); + function loadBlogPosts(lang) { + if (!blogGrid) return; + blogPosts = []; + blogExpanded = false; + if (blogError) blogError.classList.add('hidden'); + + function onData(data) { + blogPosts = Array.isArray(data) ? data : []; + renderBlogCards(); + } + + function showError() { + if (blogError) { + blogError.classList.remove('hidden'); + blogError.textContent = getTranslation(document.documentElement.lang, 'blog-error', 'Unable to load articles right now.'); + } + } + + var file = lang === 'en' ? 'blog.json' : 'blog.' + lang + '.json'; + fetch(file) + .then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); }) + .then(onData) + .catch(function () { + if (lang === 'en') { showError(); return; } + fetch('blog.json') + .then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); }) + .then(onData) + .catch(showError); }); } @@ -539,8 +554,7 @@ const value = translations[locale][key] ?? translations.en[key] ?? ''; if (value !== undefined) el.setAttribute('aria-label', value); }); - renderBlogCards(); - updateBlogToggleLabel(); + loadBlogPosts(locale); } document.getElementById('lang-selector').addEventListener('change', (event) => {