⚗ thealchemistcode.org

The open-source website of The Alchemist Code, a software, app and AI studio in Puebla, Mexico.

A bilingual WordPress block theme with dark mode, a CSS-only 3D foldable phone, service pages generated from JSON, structured data for search, and the QA scripts we use before every release.

thealchemistcode.org · Español · GPL-2.0-or-later

What's inside

• Bilingual by design. Spanish lives at the root and English under /en/. Each page picks its view and language from two meta fields (tac_view, tac_lang), and the theme writes hreflang, lang and the language switcher for you.
• Dark mode without the flash. Dark is the default, the choice is remembered, and a tiny inline script sets the theme before the first paint.
• A foldable phone in pure CSS. One custom property (--f, 0 = closed, 1 = open) drives the whole 3D fold. It opens with scroll on the home page and by itself on the PeakPlay and Flutter pages, and it’s tested in Chrome and WebKit.
• Phone mockups without the clutter. qa/phones.py crops the status bar (time, signal, battery) from real screenshots and exports 1x and 2x WebP.
• Service pages from data. inc/data/servicios.json holds every text in both languages. The shared template inc/views/_service.php renders proof figures with their source, a visual block, FAQs and Service + FAQPage schema.
• Search-ready. Organization schema (ProfessionalService with an OfferCatalog), breadcrumbs, noindex on thin archives and per-page social images. The All in One SEO integration lives in inc/seo.php.
• Motion that respects people. Lenis smooth scroll, reveal-on-scroll, a live network topology, magnetic buttons and live clocks. Everything turns off with "reduce motion", and cursor effects are skipped on touch screens.
• Honest numbers. Every figure on the site comes with its source and date. That rule also applies to contributions.

Repository layout

tac-theme/alchemist-lab-next/   The theme (deployed to the server as themes/alchemist-lab)
  inc/core.php                  Language, links between pages, phones, foldable, icons, [tac_page]
  inc/chrome.php                Top bar with live clocks, header and footer (dynamic blocks)
  inc/seo.php                   hreflang, redirects, All in One SEO filters, schema
  inc/contact.php               Contact form (stored as private posts, emailed to the studio)
  inc/views/*.php               One file per page; files starting with _ are partials
  inc/data/*.json               Service pages, organization schema, app copy, proof
  templates/, parts/            Block templates for the blog and the page shell
tac-uploads/tac-site/           Images the theme expects in wp-content/uploads/tac-site
qa/                             Playwright checks, image builders and WP-CLI scripts
deploy-tac-preview.sh           Upload to an inactive theme for preview
deploy-tac-produccion.sh        Upload to the live theme, lint PHP and clear the cache

Run it locally

Requirements: WordPress 6.6+, PHP 8.0+ and WP-CLI. All in One SEO is optional; without it, the SEO filters simply don't run.

1. Copy tac-theme/alchemist-lab-next to wp-content/themes/alchemist-lab and activate Alchemist Lab.
2. Copy tac-uploads/tac-site to wp-content/uploads/tac-site.
3. Create the pages. Each brand page has [tac_page] as its content, plus the tac_view and tac_lang meta fields. These scripts create them for you:

   wp eval-file qa/crear-local.php --user=<admin>
   wp eval-file qa/crear-servicios.php --user=<admin>

4. The app catalog (wp-content/uploads/alchemist-apps/apps.json) is generated by a separate, private tool. Without it, the app marquee and the /apps page come up empty, and the rest of the site works.

Quality checks

The browser checks use playwright-core (loaded from ~/node_modules) with Chrome, plus WebKit for the foldable:

node qa/servicios.js <url> <name> [width] [height] [dark|light]   # full-page shot + SEO audit (h1, title, schema, hreflang, broken images)
node qa/fold-engines.js <url>                                     # foldable in Chrome and WebKit
node qa/perf.js <url> [movil]                                     # LCP, CLS and page weight
node qa/reduced.js <url> <name>                                   # with "reduce motion" on
php -l <file>                                                     # before every commit

The image builders (qa/phones.py, qa/og.py) need Python with Pillow and NumPy.

Deploy

Copy .env.deploy.example to .env.deploy and fill in your server. That file is git-ignored, so server details never reach the repository. Then:

./deploy-tac-preview.sh       # inactive theme alchemist-lab-next + new images (never overwrites)
./deploy-tac-produccion.sh    # live theme alchemist-lab, PHP lint, LiteSpeed cache cleared

Contributing

Issues and pull requests are welcome, in English or Spanish. Please read CONTRIBUTING.md first, and report security problems privately as described in SECURITY.md. This project follows the Contributor Covenant.

License

The code is licensed under the GNU General Public License v2.0 or later (LICENSE), the same license as WordPress.

Not covered by that license:

• The name and logo of The Alchemist Code, our app names and icons, and the screenshots and images in tac-uploads/. You're welcome to learn from them, but please don't use them to present another business.
• Third-party components keep their own licenses: Plus Jakarta Sans and IBM Plex Mono (SIL Open Font License 1.1) and Lenis (MIT). See NOTICE.md.

---

Español

El sitio de The Alchemist Code, estudio de software, apps e IA en Puebla, México, ahora en código abierto.

Es un tema de WordPress por bloques, bilingüe, con modo oscuro, un teléfono plegable en 3D hecho solo con CSS y páginas de servicio que se generan desde JSON. Incluye datos estructurados para Google y los scripts de QA que corremos antes de cada versión.

• Bilingüe: español en la raíz e inglés en /en/. Cada página elige su vista e idioma con los metadatos tac_view y tac_lang.
• Modo oscuro por defecto, sin destello al cargar.
• Plegable en CSS: una sola variable (--f) mueve todo el pliegue en 3D. Lo probamos en Chrome y en WebKit.
• Páginas de servicio a partir de inc/data/servicios.json, con cifras con fuente, preguntas frecuentes y schema Service + FAQPage.
• Movimiento que respeta a las personas: todo se apaga con "reducir movimiento".
• Cifras honestas: cada número del sitio lleva su fuente y su fecha. Pedimos lo mismo en cada contribución.

Para instalarlo, revisarlo y desplegarlo, sigue los pasos de arriba. Los comandos son los mismos.

Contribuir: abre un issue o un pull request, en español o en inglés. Lee primero CONTRIBUTING.md. Los problemas de seguridad se reportan en privado (SECURITY.md).

Licencia: el código es GPL-2.0 o posterior, la misma licencia de WordPress. El nombre, el logo, los íconos de nuestras apps y las imágenes de tac-uploads/ no entran en esa licencia. Las fuentes (OFL 1.1) y Lenis (MIT) conservan la suya.