SantaClaas/yak

claas.dev

How it works

1. Dev Container VS Code extension starts up docker and creates images with Dockerfile and docker compose
2. Docker mounts secret files containing secrets as decribed in docker compose
3. Workspace directory is mounted
4. Dev container runs post create command and copies wordpress config to wordpress directory
   • wordpress config refers to environment variables to find secrets mounted by docker
5. Wordpress config is run and reads secrets from mounted docker secrets files and connects to PlanetScale database

A custom theme based on _tw

TODO

• 5 sub-pages ✅
  • Contact ✅
  • Impressum ✅
  • About ✅
  • CV ✅
  • Blogs ✅
• 2 external plugins or 1 developed plugin ✅
  • Classic Editor ✅
    • As I am developing a classic theme, the classic editor makes editing it easier
  • External Markdown ✅
    • I prefer git as version control system to manage my plain text content
  • Menu icons (not working)
    • Tried it, didn't work because upload of SVGs bugs out so I just injected the SVG markup in the label
• 2 Social Media integrations ✅
  • Mastodon ✅
  • Reddit ✅
• 2 Languages ✅
  • English ✅
  • German ✅
  • used TranslatePress ✅
• Theme based on free template ✅
  • Used _tw
  • With at least 3 changes ✅
    • A Picture or background pattern ✅
    • Color of an element (e.g. clicked links) ✅
    • Font size or type ✅

Quickstart

Installation

1. Move this folder to wp-content/themes in your local development environment
2. Run npm install && npm run dev in this folder
3. Activate this theme in WordPress

Development

4. Run npm run watch
5. Add Tailwind utility classes with abandon

Deployment

6. Run npm run bundle
7. Upload the resulting zip file to your site using the “Upload Theme” button on the “Add Themes” administration page

Or deploy with the tool of your choice!

Full Documentation

Fundamentals

• Installation Generate your custom theme, install it in WordPress and run your first Tailwind builds
• Development Watch for changes, build for production and learn more about how _tw, WordPress and Tailwind work together
• Deployment Share your new WordPress theme with the world
• Troubleshooting Find solutions to potential issues and answers to frequently asked questions

In Depth

• Using Tailwind Typography Customize front-end and back-end typographic styles
• JavaScript Bundling with esbuild Install and bundle JavaScript libraries (very quickly)
• Linting and Code Formatting Catch bugs and stop thinking about formatting

Extras

• On Tailwind and WordPress Understand how WordPress and Tailwind work together
• Managing Styles for Custom Blocks Learn strategies for using Tailwind in theme-specific custom blocks
• Setting Up Browsersync Add live reloads and synchronized cross-device testing to your workflow