refactor: docs to guide

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.stylelint": true
+    "source.fixAll.stylelint": "explicit"
   }
 }

src/404.webc

@@ -24,7 +24,7 @@ description: Page not found
           <li class="diamond-spacing-bottom-sm"><strong>Check the ceiling:</strong> Diamonds are often found on the ceiling of caves</li>
         </ul>
         <p>
-          If you're looking for <strong>Diamond UI</strong>, try <a href="/docs/">the docs</a>.
+          If you're looking for <strong>Diamond UI</strong>, try <a href="/guide/">the docs</a>.
         </p>
       </diamond-wrap>
     </article>
@@ -47,7 +47,7 @@ description: Page not found
           </d-nav-card>
         </diamond-grid-item>
         <diamond-grid-item small-mobile="12" small-tablet="6">
-          <d-nav-card icon="document" href="/docs/">
+          <d-nav-card icon="document" href="/guide/">
             <h3>Documentation</h3>
             <p>Guidance on how to get started and use Diamond UI on your next project.</p>
           </d-nav-card>

src/about.webc

@@ -27,8 +27,8 @@ description: The origin story of Diamond UI
           <d-icon icon="chat" slot="icon"></d-icon>
           <p>
             I am re-using it! Interface styles can be grouped into four categories: 
-            <a href="/docs/content">content</a>, <a href="/docs/controls">controls</a>, <a href="/docs/canvas">canvas</a>
-            and <a href="/docs/composition">composition</a>.
+            <a href="/guide/content">content</a>, <a href="/guide/controls">controls</a>, <a href="/guide/canvas">canvas</a>
+            and <a href="/guide/composition">composition</a>.
           </p>
         </d-alert>
         <p>
@@ -56,7 +56,7 @@ description: The origin story of Diamond UI
           </d-nav-card>
         </diamond-grid-item>
         <diamond-grid-item small-mobile="12" small-tablet="6">
-          <d-nav-card icon="document" href="/docs/">
+          <d-nav-card icon="document" href="/guide/">
             <h3>Documentation</h3>
             <p>Guidance on how to get started and use Diamond UI on your next project.</p>
           </d-nav-card>

src/data/siteLinks.json

@@ -4,8 +4,8 @@
     "href": "/"
   },
   {
-    "label": "Docs",
-    "href": "/docs/"
+    "label": "Guide",
+    "href": "/guide/"
   },
   {
     "label": "About",

src/docs/apply-diamond-ui/index.webc → src/guide/apply-diamond-ui/index.webc

@@ -4,18 +4,18 @@ title: Apply Diamond UI
 description: Designs can be broken up using the four Cs to separate component responsibilities.
 tags: ['docs', 'Workflow']
 icon: layers
-previous: /docs/composition/
-next: /docs/storybook-example/
+previous: /guide/composition/
+next: /guide/storybook-example/
 date: 2024-10-01
 ---
 
 <template webc:type="11ty" 11ty:type="md">
 
-Let’s go right back to the start and look at our [page hero component](/docs/) again. Could we have done this differently with Diamond?
+Let’s go right back to the start and look at our [page hero component](/guide/) again. Could we have done this differently with Diamond?
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/apply-diamond-ui/hero.webp"
+  src="./src/guide/apply-diamond-ui/hero.webp"
   alt="The conventional page hero UI"
 />
 
@@ -28,7 +28,7 @@ Dividing this page hero component up into the four Cs we see it’s actually mad
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/apply-diamond-ui/hero-content.webp"
+  src="./src/guide/apply-diamond-ui/hero-content.webp"
   alt="The conventional page hero UI with each part separated by a dashed border"
 />
 
@@ -50,7 +50,7 @@ Initially, this may appear to be quite a lot of components for such a small piec
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/apply-diamond-ui/hero-with-eyebrow.webp"
+  src="./src/guide/apply-diamond-ui/hero-with-eyebrow.webp"
   alt="The conventional page hero UI with the eyebrow and second paragraph separated by a dashed border"
 />
 
@@ -76,7 +76,7 @@ We start to see here how composing individual components broken up by the four C
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/apply-diamond-ui/hero-with-two-controls.webp"
+  src="./src/guide/apply-diamond-ui/hero-with-two-controls.webp"
   alt="The conventional page hero UI with the controls highlighted by a dashed border"
 />
 
@@ -109,7 +109,7 @@ Now when the product team decide they need an email signup in the main hero or t
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/apply-diamond-ui/dark-mode-hero.webp"
+  src="./src/guide/apply-diamond-ui/dark-mode-hero.webp"
   alt="A dark mode version of the conventional page hero UI with an email signup form"
 />
 

src/docs/canvas/index.webc → src/guide/canvas/index.webc

@@ -4,8 +4,8 @@ title: Canvas
 description: A canvas represents a part of the page that content and controls sit within, they can provide padding and backgrounds for their content area.
 tags: ['docs', 'Four Cs']
 icon: canvas
-previous: /docs/controls/
-next: /docs/composition/
+previous: /guide/controls/
+next: /guide/composition/
 date: 2024-10-03
 ---
 
@@ -23,7 +23,7 @@ Typical examples of canvas components are:
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/canvas/canvas.webp"
+  src="./src/guide/canvas/canvas.webp"
   alt="An example of UI with the canvas highlighted"
 />
 

src/docs/comparison/index.webc → src/guide/comparison/index.webc

@@ -4,7 +4,7 @@ title: Comparison
 description: How does Diamond UI compare to some other popular methodologies and frameworks?
 tags: ['docs', 'Workflow']
 icon: connection
-previous: /docs/storybook-example/
+previous: /guide/storybook-example/
 date: 2024-10-03
 ---
 
@@ -23,7 +23,7 @@ The smallest components are atoms. These are things like HTML elements, or other
 <diamond-wrap size="xs" gutter="none">
   <img
     webc:is="eleventy-image"
-    src="./src/docs/comparison/atoms.webp"
+    src="./src/guide/comparison/atoms.webp"
     alt="Some atomic components: title, text, input, button"
   />
 </diamond-wrap>
@@ -33,7 +33,7 @@ Moving up from atoms, molecules are small groups of UI elements that bond togeth
 <diamond-wrap size="xs" gutter="none">
   <img
     webc:is="eleventy-image"
-    src="./src/docs/comparison/input-button-group.webp"
+    src="./src/guide/comparison/input-button-group.webp"
     alt="A grouped input and button"
   />
 </diamond-wrap>
@@ -42,7 +42,7 @@ Following this trend, organisms are larger groups of atoms and molecules. Organi
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/the-problem/hero.webp"
+  src="./src/guide/the-problem/hero.webp"
   alt="A conventional page hero UI"
 />
 

src/docs/composition/index.webc → src/guide/composition/index.webc

@@ -4,8 +4,8 @@ title: Composition
 description: Compositions are an invisible element of the page that provides layout.
 tags: ['docs', 'Four Cs']
 icon: composition
-previous: /docs/canvas/
-next: /docs/apply-diamond-ui/
+previous: /guide/canvas/
+next: /guide/apply-diamond-ui/
 date: 2024-10-04
 ---
 
@@ -21,7 +21,7 @@ Typical examples of a composition component are:
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/composition/composition.webp"
+  src="./src/guide/composition/composition.webp"
   alt="An example of UI with the composition elements highlighted"
 />
 

src/docs/content/index.webc → src/guide/content/index.webc

@@ -4,8 +4,8 @@ title: Content
 description: Content components look after the general styles for text and images, but can extend to data-specific patterns such as user profiles or product information.
 tags: ['docs', 'Four Cs']
 icon: content
-previous: /docs/the-solution/
-next: /docs/controls/
+previous: /guide/the-solution/
+next: /guide/controls/
 date: 2024-10-01
 ---
 
@@ -22,7 +22,7 @@ Typical examples of content components are:
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/content/content.webp"
+  src="./src/guide/content/content.webp"
   alt="An example of UI with content highlighted"
 />
 

src/docs/controls/index.webc → src/guide/controls/index.webc

@@ -4,8 +4,8 @@ title: Controls
 description: Controls are interactive elements of the page.
 tags: ['docs', 'Four Cs']
 icon: controls
-previous: /docs/content/
-next: /docs/canvas/
+previous: /guide/content/
+next: /guide/canvas/
 date: 2024-10-02
 ---
 
@@ -21,7 +21,7 @@ Typical examples of controls are:
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/controls/controls.webp"
+  src="./src/guide/controls/controls.webp"
   alt="An example of UI with controls highlighted"
 />
 

src/docs/storybook-example.webc → src/guide/storybook-example.webc

@@ -4,8 +4,8 @@ title: Storybook example
 description: Diamond components can be organised into the four Cs to make their responsibilities clear.
 tags: ['docs', 'Workflow']
 icon: book
-next: /docs/comparison/
-previous: /docs/apply-diamond-ui/
+next: /guide/comparison/
+previous: /guide/apply-diamond-ui/
 date: 2024-10-02
 ---
 

src/docs/the-problem/index.webc → src/guide/the-problem/index.webc

@@ -4,8 +4,8 @@ tags: ['docs', 'Getting started']
 title: The problem
 description: How do you create and organise components in a way that is scalable and maintainable over time?
 icon: warning
-permalink: /docs/index.html
-next: /docs/the-solution/
+permalink: /guide/index.html
+next: /guide/the-solution/
 ---
 
 <template webc:type="11ty" 11ty:type="md">
@@ -14,7 +14,7 @@ Imagine you’ve been tasked with designing a page hero. Having no other context
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/the-problem/hero.webp"
+  src="./src/guide/the-problem/hero.webp"
   alt="A conventional page hero UI"
 />
 
@@ -42,7 +42,7 @@ A little while later a new request comes in for a slightly different hero &ndash
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/the-problem/yellow-hero.webp"
+  src="./src/guide/the-problem/yellow-hero.webp"
   alt="The page hero with a yellow background"
 />
 
@@ -72,7 +72,7 @@ Over the months, more requirements come in and more props get added. Different t
 
 <img
   webc:is="eleventy-image"
-  src="./src/docs/the-problem/max-hero.webp"
+  src="./src/guide/the-problem/max-hero.webp"
   alt="The hero component with all the possible features"
 />
 

src/docs/the-solution.webc → src/guide/the-solution.webc

@@ -4,8 +4,8 @@ tags: ['docs', 'Getting started']
 title: The solution
 description: Cleanly separate responsibilities to create reusable, future friendly, components.
 icon: tick
-previous: /docs/
-next: /docs/content/
+previous: /guide/
+next: /guide/content/
 ---
 
 <template webc:type="11ty" 11ty:type="md">
@@ -14,7 +14,7 @@ When you think about it, a component is a function that takes some parameters an
 
 When writing code, a generally agreed-on principle is that a function should *do one thing*. This makes functions more readable, modular, and easy to maintain.
 
-Here’s our [page hero component](/docs/) as a function:
+Here’s our [page hero component](/guide/) as a function:
 
 ```js
 function pageHero(

src/index.webc

@@ -349,7 +349,7 @@ description: Diamond UI is a methodology for teams who build software products a
         <diamond-wrap size="lg">
           <diamond-grid wrap="wrap" gap="lg">
             <diamond-grid-item small-mobile="12" small-tablet="6">
-              <d-nav-card icon="document" href="/docs/">
+              <d-nav-card icon="document" href="/guide/">
                 <h3>Documentation</h3>
                 <p>Guidance on how to get started and use Diamond UI on your next project.</p>
               </d-nav-card>