doc-readme — MarkeUP

Versión: 2.2 — Sincronización Android → Cloudflare Última revisión: 2026-06-15 Stack: Astro 4 · TailwindCSS · DaisyUI · Pagefind · Syncthing · watchexec · launchd · GitHub Actions · Cloudflare Pages Site: https://mybrain-limpio.pages.dev

1. ¿Qué es MarkeUP?

MarkeUP es un sistema de blog multitemático que permite publicar artículos desde un móvil Android sin necesidad de ordenador. El flujo completo es:

Escribes en Obsidian (Android) → Sincronización automática → Build → Publicación en Cloudflare Pages

Principio fundamental

“El móvil solo escribe, la nube construye.”

No necesitas hacer build, commit, push ni ninguna acción técnica. Solo escribes y guardas. Todo lo demás ocurre automáticamente. Esto es posible gracias a una cadena de automatización que conecta:

1. Obsidian en Android (editor de notas)
2. Syncthing (sincronización peer-to-peer Android ↔ Mac)
3. watchexec + launchd (detector de cambios + servicio persistente)
4. auto-commit.sh (script que hace commit y push a GitHub)
5. GitHub Actions (build automático del sitio)
6. Cloudflare Pages (hosting global con CDN)

Cada pieza de esta cadena está explicada en detalle en los demás documentos de esta serie.

2. Stack tecnológico

Dependencias npm (producción)

{
  "astro": "^4.0.0",
  "@astrojs/rss": "^4.0.0",
  "@astrojs/sitemap": "^3.0.0",
  "@astrojs/tailwind": "^5.0.0",
  "@tailwindcss/typography": "^0.5.20",
  "daisyui": "^4.0.0",
  "3d-force-graph": "^1.80.0",
  "three": "^0.184.0",
  "three-spritetext": "^1.10.0",
  "pagefind": "^1.5.2",
  "@pagefind/default-ui": "^1.5.2",
  "sharp": "^0.33.5",
  "gray-matter": "^4.0.3",
  "unist-util-visit": "^5.1.0",
  "zod": "^4.4.3",
  "gsap": "^3.15.0"
}

Nota: Algunas dependencias como d3, gsap y chokidar son huérfanas (no se usan activamente). Ver auditoria.md para más detalles.

Dependencias npm (desarrollo)

{
  "typescript": "^5.0.0",
  "vitest": "^4.1.8",
  "@vitest/ui": "^4.1.8",
  "@types/node": "^20.0.0",
  "chokidar": "^3.5.3"
}

Versiones del sistema

3. Flujo de alto nivel

graph TD
    A[Android: Obsidian] -->|Editar/crear nota| B
    B[Syncthing Android] -->|Sincronización ~1-5s| C[Syncthing Mac]
    C -->|Detecta cambio en src/content/| D[watchexec → launchd]
    D -->|Ejecuta| E[auto-commit.sh]
    E -->|git add + commit + push| F[GitHub main]
    F -->|Trigger| G[GitHub Actions]
    G -->|npm run build| H[Build Astro + Pagefind]
    H -->|Deploy| I[Cloudflare Pages]
    I -->|Sitio actualizado| J[mybrain-limpio.pages.dev]

    style A fill:#6C5CE7,color:#fff
    style J fill:#00B894,color:#fff
    style D fill:#FDCB6E,color:#000
    style E fill:#E17055,color:#fff

Tiempo total estimado: 2–5 minutos desde que guardas en Android hasta que el cambio se publica.

Explicación del flujo paso a paso

1. Android — Obsidian: El usuario escribe o edita una nota usando Obsidian. La plantilla Templater genera automáticamente el slug, el frontmatter y mueve el archivo a la carpeta correcta.
2. Syncthing: Detecta el cambio en Android y transfiere el archivo al Mac en 1-5 segundos (misma red local).
3. watchexec + launchd: En el Mac, watchexec (gestionado por launchd como servicio persistente) detecta el cambio en src/content/ y ejecuta auto-commit.sh.
4. auto-commit.sh: Hace git add src/content/, git commit y git push a GitHub automáticamente.
5. GitHub Actions: Se dispara el workflow deploy.yml, ejecuta npm run build.
6. Build: Astro genera ~150 páginas HTML estáticas, Pagefind indexa la búsqueda.
7. Cloudflare Pages: Recibe el build y lo despliega en la CDN global.

4. Estructura del proyecto (resumida)

markeup/
├── src/
│   ├── components/        ← Componentes Astro (blog, common, graph)
│   ├── content/
│   │   └── posts/         ← ✅ Colección de posts (markdown)
│   ├── layouts/           ← BaseLayout.astro
│   ├── lib/               ← Lógica: posts, tags, graph, wikilinks
│   ├── pages/             ← 15 rutas Astro
│   ├── styles/            ← global.css
│   └── content.config.ts  ← Schema Zod
├── scripts/               ← sync-obsidian, export-blog, optimize-images
├── public/img/            ← 40 imágenes WebP
├── auto-commit.sh         ← Script de auto-commit (watchexec)
└── .github/workflows/     ← deploy.yml + lighthouse.yml

Cada directorio tiene una función específica:

• src/components/: Componentes reutilizables de Astro (tarjetas de posts, héroe, paginación, header, footer, selector de tema, grafo 3D).
• src/content/posts/: Aquí viven todos los artículos del blog en formato Markdown. Es la única carpeta que se sincroniza con Android.
• src/layouts/: Layout base que envuelve todas las páginas con Header, Footer y View Transitions.
• src/lib/: Lógica del negocio: obtener posts, filtrar por categoría/tag, generar datos para el grafo, procesar wikilinks.
• src/pages/: 15 rutas que definen la URL structure del sitio.
• scripts/: Scripts auxiliares para optimización de imágenes, exportación offline, etc.

Para la estructura completa detallada (con cada archivo), ver doc-arquitectura.

5. Documentación relacionada

Se recomienda leer en este orden: doc-readme → doc-guia → doc-arquitectura → doc-operacion → doc-auditoria.