Adds ordering and updated docs

Author: mtrythall

README.md

@@ -42,7 +42,7 @@ Dates are formatted with [date-fns](https://date-fns.org/), due to some wonkines
 {{ post.data.published_datetime | formatDateTime: "MMMM d, yyyy" }}
 ```
 
-# Social Media Images
+## Social Media Images
 
 1. Presenter images are created at `/presenters/{{ slug }}/`
 2. Session images are created at `/{{ talks,tutorials }}/{{ slug }}/social/`
@@ -52,3 +52,14 @@ Dates are formatted with [date-fns](https://date-fns.org/), due to some wonkines
 1. When adding images, if they are below the "fold", consider adding a `loading="lazy"` attribute to the image tag.
 2. When adding images, consider adding an `alt` attribute to the image tag.
 3. Keep copy short and to the point. The site is most likely scanned, not read.
+4. Make sure to keep the styleguide up-to-date with any new components or styles.
+
+## Styleguide
+
+The styleguide lives at `/styleguide/` (respectively `styleguide.html`). The guide is built from content within `src/_content/styleguide/`. Each HTML page represents a section. Sections can be ordered with `order`. Each section can have a `description`.
+
+When using code samples, be sure to use `{% capture code %}` to capture sample and pass it to the `code-snippet.html` include like so:
+
+```liquid
+{% include "code-snippet.html", code:code, lang:'html' %}
+```

lib/collections.js

@@ -36,7 +36,7 @@ module.exports = function(config) {
   });
 
   config.addCollection("guides", function(collectionApi) {
-    return collectionApi.getFilteredByGlob("src/_content/styleguide/*.html");
+    return collectionApi.getFilteredByGlob("src/_content/styleguide/*.html").sort((a, b) => a.data.order - b.data.order);
   });
 
   config.addCollection("sponsorsByLevel", function(collectionApi) {

src/_content/styleguide/alerts.html

@@ -1,5 +1,7 @@
 ---
 title: Alerts
+
+order: 60
 ---
 {%- capture code -%}<section class="p-4 bg-orange-100 rounded">
   <h3 class="mb-4 text-lg font-bold font-heading lg:text-2xl">Attention!</h3>

src/_content/styleguide/badges.html

@@ -1,5 +1,8 @@
 ---
 title: Badges
+
+order: 50
+
 description: |
   Badges are used to indicate status, denote a count, or to draw attention to an element. Badges are created by applying `.badge` to an element. Colors may be changed by applying a background color utility class, e.g. `bg-blue` to create a blue badge.
 ---

src/_content/styleguide/blocks-grids.html

@@ -1,6 +1,8 @@
 ---
 title: "Blocks & Grids"
 
+order: 80
+
 description: |
   Blocks and grids are the building blocks of the website. They help to organize content and create a visual hierarchy.
 

src/_content/styleguide/buttons.html

@@ -1,5 +1,8 @@
 ---
 title: Buttons
+
+order: 40
+
 description: |
   Buttons are created by applying `.button` to an element. The button class is a utility class that applies padding, border, and background color.
 

src/_content/styleguide/cards.html

@@ -1,5 +1,8 @@
 ---
 title: Colors
+
+order: 20
+
 description: |
   The full color palette is configured in `tailwind.config.js`. The following is a full list of all defined colors and their shades. Note that Tailwind does not provide all of these classes unless used in _source_ files (not compiled output).
 ---

src/_content/styleguide/colors.html

@@ -1,5 +1,7 @@
 ---
 title: Forms
+
+order: 70
 ---
 
 {%- capture code -%}<form class="max-w-2xl p-4 mx-auto bg-white rounded lg:p-12" method="POST">

src/_content/styleguide/forms.html

@@ -1,6 +1,8 @@
 ---
 title: Icons
 
+order: 30
+
 description: |
   Icons are used to visually communicate an action or idea. The `.icon` class can be applied to give them a consistent width and height. Additional height and width classes can be applied to change their sizing, e.g. `w-12 h-12`.