DDEV Website for Contributors
August 15, 2023 3 min read
The following is based on Matt Stein’s presentation outline for the August 15, 2023 DDEV contributor training. Recordings of all past sessions can be found in the blog post DDEV Contributor Live Training. This post was prepared (Thanks!) by Kristin Wiseman.
I’d like to show you how ddev.com is put together so you can swoop in and improve it. There’s a lot that could be improved; The emphasis is on “what it is” rather than “how it should be.”
Matt is a designer that’s been doing CMS-based development for clients using PHP, Twig, and different front-end frameworks; master of none fond of writing, documentation, and content strategy.
ddev.com is a former WordPress site, tricky to share access and not the friendliest public welcome to all things DDEV.
Rebuilt + migrated earlier this year to Astro!
- Hat tip Mayank for sharing Astro with me.
- Fun to build with!
- Static site generator that sits in a nice front-end sweet spot.
- Flat file + fully accessible to front-end developers in a public repository.
- Friendly to Markdown-writers.
- Key feature: Astro components!
.astro, or BYO UI framework (Vue, React, Svelte, etc.).
- Or no UI framework; only ship what’s necessary for the viewer.
- “island architecture”
- HTML and simple components.
- Markdown content collections.
- Tailwind CSS + Tailwind Typography.
- Built and hosted with Cloudflare Pages.
tl;dr if you’re comfortable with Markdown, HTML, CSS, Tailwind, or a modern front-end framework, you can jump right in!
Also TypeScript, kind of.
If you’re comfortable with all of those things, you could make a big dent in ddev.com.
Add a GitHub key to
Where Content Lives
Markdown, component markup, TypeScript constants, and a JSON blob.
- Astro components in the
- Content collections in
- Constants in
- Custom sponsor blob in
- See featured-sponsors.svg in the ddev/ddev readme.
How Content is Presented
The content attempts to follow Astro conventions, follow DRY principle, and be sparing with additional complexity.
- Astro config.
- PostCSS + Tailwind + Tailwind Typography
- Bonus: the
- Bonus: the
- Development server vs. building.
- Cloudflare pages builds static output (no SSR).
- Run locally for previewing and instant feedback, but production and preview branches are built automatically (similar to Netlify and Vercel).
Typo corrections can be done directly from the GitHub UI similarly to fixing the docs.
Otherwise, use a pull request like you would with DDEV or any other project. (Fork, change, submit pull request.)
Extra Topics Covered in the Training
- Astro plugins we’re using.