DDEV Website for Contributors

August 15, 2023 3 min read

Edit this page
Deploying to ddev.com

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.

Welcome!

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.”

Background

Old Things

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.

New Thing

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.

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.

Local Setup

Clone https://github.com/ddev/ddev.com-front-end.

Add a GitHub key to .env.

Where Content Lives

💡 Consider reading the readme and especially the Astro docs.

Markdown, component markup, TypeScript constants, and a JSON blob.

  1. Astro components in the src/pages/ directory.
  2. Content collections in src/content/.
  3. Constants in src/const.ts.
  4. Custom sponsor blob in src/featured-sponsors.json.

How Content is Presented

The content attempts to follow Astro conventions, follow DRY principle, and be sparing with additional complexity.

  1. Astro config.
  2. PostCSS + Tailwind + Tailwind Typography
  3. src/lib/api.ts.
    • Bonus: the cache/ directory.
  4. 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).

Automatic PR comment with Cloudflare Pages build status and link

Submitting Changes

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.
  • Textlint.

Credit to Kristin and Bernardo for adapting the original outline for the DDEV blog.

Posted In