feat(docs): guided start pages and landing UX for Drupal workspaces

README.md

@@ -2,9 +2,14 @@
 
 Coder workspace template for DDEV-based development with Docker-in-Docker support, Node.js, and Git.
 
-**Get started with Drupal core development:**
+**Get started (recommended paths):**
 
-[![Open in Coder](https://coder.ddev.com/open-in-coder.svg)](https://coder.ddev.com/templates/coder/drupal-core/workspace?mode=manual)
+- **Drupal.org issue or project** → [Drupal Issue Picker](https://start.coder.ddev.com/drupal-issue) (auto-detects core vs contrib and prefills sensible defaults)
+- **Multiple DDEV projects in one workspace** → [DDEV Freeform](https://coder.ddev.com/templates/coder/freeform/workspace?mode=manual)
+- **Clean Drupal core without an issue fork** → [Guided Drupal core](https://start.coder.ddev.com/drupal-core) (short context page, then the same manual template)
+- **Browse all templates** → [coder.ddev.com/templates](https://coder.ddev.com/templates)
+
+**Advanced:** open the [manual Drupal core template](https://coder.ddev.com/templates/coder/drupal-core/workspace?mode=manual) directly if you already know every parameter you need.
 
 ## Features
 

docs/_layouts/default.html

@@ -4,143 +4,19 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ page.title }} — DDEV Coder Workspaces</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #0e0e10;
-      color: #e0e0e0;
-      line-height: 1.7;
-    }
-
-    nav {
-      padding: 1rem 2rem;
-      border-bottom: 1px solid #1c1c1e;
-    }
-
-    nav a {
-      color: #a78bfa;
-      text-decoration: none;
-      font-size: 0.9rem;
-    }
-
-    nav a:hover { text-decoration: underline; }
-
-    main {
-      max-width: 720px;
-      margin: 0 auto;
-      padding: 3rem 2rem 6rem;
-    }
-
-    h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; }
-    h2 { font-size: 1.35rem; font-weight: 600; margin: 2.5rem 0 0.75rem; color: #e8e8e8; }
-    h3 { font-size: 1.1rem; font-weight: 600; margin: 1.75rem 0 0.5rem; color: #ddd; }
-
-    p { margin-bottom: 1rem; color: #ccc; }
-
-    a { color: #a78bfa; text-decoration: none; }
-    a:hover { text-decoration: underline; }
-
-    ul, ol { margin: 0 0 1rem 1.5rem; color: #ccc; }
-    li { margin-bottom: 0.35rem; }
-
-    code {
-      background: #1a1a1f;
-      border: 1px solid #2a2a30;
-      padding: 0.15em 0.45em;
-      border-radius: 4px;
-      font-family: 'SF Mono', Consolas, 'Courier New', monospace;
-      font-size: 0.87em;
-      color: #c4b5fd;
-    }
-
-    pre {
-      background: #111115;
-      border: 1px solid #2a2a30;
-      border-radius: 8px;
-      padding: 1.25rem 1.5rem;
-      overflow-x: auto;
-      margin-bottom: 1.25rem;
-    }
-
-    pre code {
-      background: none;
-      border: none;
-      padding: 0;
-      font-size: 0.9rem;
-      color: #c9d1d9;
-    }
-
-    hr {
-      border: none;
-      border-top: 1px solid #1c1c1e;
-      margin: 2rem 0;
-    }
-
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      margin-bottom: 1.25rem;
-      font-size: 0.95rem;
-    }
-
-    th {
-      text-align: left;
-      padding: 0.6rem 0.75rem;
-      border-bottom: 2px solid #2a2a30;
-      color: #999;
-      font-weight: 600;
-      font-size: 0.85rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-
-    td {
-      padding: 0.6rem 0.75rem;
-      border-bottom: 1px solid #1c1c1e;
-      color: #ccc;
-    }
-
-    strong { color: #e8e8e8; }
-
-    blockquote {
-      border-left: 3px solid #3b2f6e;
-      padding-left: 1rem;
-      color: #999;
-      margin-bottom: 1rem;
-    }
-
-    img { max-width: 100%; }
-
-    /* Skip link — visually hidden until focused; lets keyboard users bypass the site nav.
-       WCAG 2.4.1 Bypass Blocks (Level A) */
-    .skip-link {
-      position: absolute;
-      top: -100%;
-      left: 1rem;
-      background: #7c5af0;
-      color: #fff;
-      padding: 0.5rem 1rem;
-      border-radius: 0 0 6px 6px;
-      font-size: 0.9rem;
-      font-weight: 600;
-      text-decoration: none;
-      z-index: 999;
-    }
-    .skip-link:focus { top: 0; }
-  </style>
+  <link rel="icon" type="image/svg+xml" href="{{ '/favicon.svg' | relative_url }}">
+  <link rel="stylesheet" href="{{ '/coder-ddev-start.css' | relative_url }}">
 </head>
-<body>
+<body class="cds-body">
   <!-- WCAG 2.4.1 Bypass Blocks (Level A): skip link lets keyboard users jump past the site nav -->
-  <a class="skip-link" href="#main-content">Skip to main content</a>
+  <a class="cds-skip-link" href="#main-content">Skip to main content</a>
   <!-- aria-label distinguishes this nav landmark when multiple <nav> elements exist on a page.
        WCAG 2.4.6 Headings and Labels (Level AA) -->
-  <nav aria-label="Site">
-    <a href="/">← DDEV Coder Workspaces</a>
+  <nav class="cds-doc-nav" aria-label="Site">
+    <a class="cds-link" href="{{ '/' | relative_url }}">← DDEV Coder Workspaces</a>
   </nav>
   <!-- id="main-content" is the skip link target (WCAG 2.4.1) -->
-  <main id="main-content">
+  <main id="main-content" class="cds-doc-main">
     {{ content }}
   </main>
 </body>

docs/access-denied.html

@@ -4,168 +4,34 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Access Required — DDEV Coder Workspaces</title>
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #0e0e10;
-      color: #e8e8e8;
-      line-height: 1.6;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-      padding: 2rem;
-    }
-
-    .card {
-      background: #161619;
-      border: 1px solid #30303a;
-      border-radius: 14px;
-      padding: 2.5rem 2.5rem;
-      max-width: 520px;
-      width: 100%;
-    }
-
-    .icon {
-      font-size: 2.5rem;
-      margin-bottom: 1.25rem;
-    }
-
-    h1 {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: #e8e8e8;
-      margin-bottom: 0.75rem;
-    }
-
-    .subtitle {
-      font-size: 1rem;
-      color: #999;
-      margin-bottom: 2rem;
-      line-height: 1.7;
-    }
-
-    .who-qualifies {
-      background: #0e0e10;
-      border: 1px solid #2a2a32;
-      border-radius: 10px;
-      padding: 1.25rem 1.5rem;
-      margin-bottom: 2rem;
-      text-align: left;
-    }
-
-    .who-qualifies h2 {
-      font-size: 0.85rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.07em;
-      color: #666;
-      margin-bottom: 0.85rem;
-    }
-
-    .who-qualifies ul {
-      list-style: none;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    .who-qualifies li {
-      display: flex;
-      align-items: flex-start;
-      gap: 0.6rem;
-      color: #ccc;
-      font-size: 0.95rem;
-    }
-
-    .who-qualifies li::before {
-      content: '✓';
-      color: #7c5af0;
-      font-weight: 700;
-      flex-shrink: 0;
-      margin-top: 0.05rem;
-    }
-
-    .who-qualifies a {
-      color: #a78bfa;
-      text-decoration: none;
-    }
-
-    .who-qualifies a:hover { text-decoration: underline; }
-
-    .actions {
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-    }
-
-    .btn-primary {
-      background: #7c5af0;
-      color: #fff;
-      border: none;
-      border-radius: 8px;
-      padding: 0.75rem 1.5rem;
-      font-size: 1rem;
-      font-weight: 600;
-      text-decoration: none;
-      cursor: pointer;
-      transition: background 0.15s;
-    }
-
-    .btn-primary:hover { background: #6d4de0; }
-
-    .btn-secondary {
-      color: #a78bfa;
-      font-size: 0.9rem;
-      text-decoration: none;
-    }
-
-    .btn-secondary:hover { text-decoration: underline; }
-
-    .footer-links {
-      margin-top: 2rem;
-      font-size: 0.85rem;
-      color: #555;
-    }
-
-    .footer-links a {
-      color: #666;
-      text-decoration: none;
-    }
-
-    .footer-links a:hover { color: #a78bfa; }
-  </style>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="stylesheet" href="coder-ddev-start.css">
 </head>
-<body>
-  <div class="card">
-    <div class="icon">🔒</div>
+<body class="cds-body cds-access-denied">
+  <div class="cds-gate-card">
+    <div class="cds-emoji-hero" aria-hidden="true">🔒</div>
     <h1>Access Required</h1>
-    <p class="subtitle">
+    <p class="cds-gate-subtitle">
       Your GitHub account doesn't currently have access to coder.ddev.com.
       Access is restricted to members of specific GitHub organizations.
     </p>
 
-    <div class="who-qualifies">
-      <h2>Who qualifies</h2>
-      <ul>
-        <li>Members of the <a href="https://github.com/ddev">ddev</a> GitHub org</li>
-        <li>Members of a <a href="https://ddev.com/support-ddev/">$100+/month DDEV sponsor org</a></li>
-        <li>Individuals approved via the <a href="https://github.com/coder-ddev-com/access-requests">access requests</a> repo</li>
+    <div class="cds-callout">
+      <div class="cds-callout__title">Who qualifies</div>
+      <ul class="cds-checklist">
+        <li><p>Members of the <a href="https://github.com/ddev">ddev</a> GitHub org</p></li>
+        <li><p>Members of a <a href="https://ddev.com/support-ddev/">$100+/month DDEV sponsor org</a></p></li>
+        <li><p>Individuals approved via the <a href="https://github.com/coder-ddev-com/access-requests">access requests</a> repo</p></li>
       </ul>
     </div>
 
-    <div class="actions">
-      <a class="btn-primary" href="https://github.com/coder-ddev-com/access-requests/issues/new?template=access-request.yml">Request Access on GitHub</a>
-      <a class="btn-secondary" href="https://coder.ddev.com/login">Try signing in again</a>
+    <div class="cds-stack">
+      <a class="cds-btn cds-btn--primary cds-btn--block" href="https://github.com/coder-ddev-com/access-requests/issues/new?template=access-request.yml">Request Access on GitHub</a>
+      <a class="cds-link" href="https://coder.ddev.com/login">Try signing in again</a>
     </div>
   </div>
 
-  <div class="footer-links">
+  <div class="cds-access-footer">
     <a href="https://start.coder.ddev.com">← Back to start.coder.ddev.com</a>
     &nbsp;·&nbsp;
     <a href="https://ddev.com/s/discord">DDEV Discord</a>