Improved usage examples

bedrock.config.js

@@ -35,6 +35,7 @@ module.exports = {
     componentCategories: {
       aov: 'Overviews',
       c: 'Components',
+      cc: 'Custom components category',
     }
   },
   /**

content/docs/patterns/doc-example-2.pug

@@ -10,9 +10,9 @@ p This one should be first.
 
 p This is just an example of how you can make static docs.
 
-p You could include real code examples here. Notice how we are referencing c-example here.
+p You could include real code examples here. Notice how we are referencing <code>c-example-manual-docs</code> here.
 
 .br-sample
     .br-sample-content(style="height: 200px; overflow: scroll")
-        include /templates/_components/c-example/01-example
+        include /templates/_components/c-example-manual-docs/01-example
 

content/docs/patterns/doc-example.pug

@@ -8,9 +8,20 @@ h2 This is a docs page
 
 p This is just an example of how you can make static docs.
 
-p You could include real code examples here. Notice how we are referencing c-example here.
+p This page should be second. Page order is influenced by the <code>order</code> number in the front matter.
+
+pre
+    code.
+        ---
+        title: Doc page example
+        category: Design patterns
+        order: 2
+        ---
+
+
+p You could include real code examples here. Notice how we are referencing <code>c-example-manual-docs</code> here.
 
 .br-sample
     .br-sample-content(style="height: 200px; overflow: scroll")
-        include /templates/_components/c-example/01-example
+        include /templates/_components/c-example-manual-docs/01-example
 

content/templates/_components/c-example-custom-marker/_docs.md

@@ -0,0 +1,6 @@
+---
+title: Custom example
+containsCustom: true
+---
+
+Example that is marked as “custom”. Useful to denote a component as custom when documenting changes to a standard framework (e.g. Bootstrap).

content/templates/_components/c-example-footer-docs/_docs-footer.md

@@ -0,0 +1,23 @@
+---
+title: Footer Content
+---
+
+This example has docs the footer. Useful to maybe put a table here with props.
+
+<table>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Description</th>
+    </tr>
+    <tr>
+        <td>Prop</td>
+        <td>Boolean</td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</td>
+    </tr>
+    <tr>
+        <td>Prop</td>
+        <td>Boolean</td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</td>
+    </tr>
+</table>

content/templates/_components/c-example-humanized-names/_docs.md

@@ -0,0 +1,5 @@
+---
+title: Example with automatic humanized names
+---
+
+Example where we only have pug files, no markdown files. The names of the docs are automatically “humanized”.

content/templates/_components/c-example-manual-docs/01-example.pug

@@ -0,0 +1,2 @@
+.example
+    p This is an example component.

content/templates/_components/c-example-manual-docs/02-example-2.pug

@@ -0,0 +1,2 @@
+.example
+    p This is an example component.

content/templates/_components/c-example-named-source/03-with-source.pug

@@ -0,0 +1,2 @@
+.example
+    p This is an example component with a named source. In this case “unofficial”.

content/templates/_components/c-example-named-source/_docs.md

@@ -0,0 +1,5 @@
+---
+title: Example with named source
+---
+
+Example with a named source.

content/templates/_components/cc-example/01-my-component.pug

@@ -0,0 +1,2 @@
+.example
+    p This is an example component.

content/templates/_components/cc-example/_docs.md

@@ -0,0 +1,5 @@
+---
+title: Custom category
+---
+
+This example occurs in a custom category. You can define categories in `bedrock.config.js`.