Merge branch 'master' of github.com:bradfrost/pl-website-eleventy

Author: bradfrost

packages/docs/.eleventy.js

@@ -44,6 +44,12 @@ module.exports = function(config) {
     ].reverse();
   });
 
+  config.addCollection('demos', collection => {
+    return [
+      ...collection.getFilteredByGlob('./src/demos/*.md')
+    ].reverse();
+  });
+
   config.addCollection('postFeed', collection => {
     return [...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)]
       .reverse()

packages/docs/.prettierrc

@@ -1,6 +1,6 @@
 {
-  "printWidth": 90,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "bracketSpacing": false
+    "printWidth": 90,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "bracketSpacing": false
 }

packages/docs/.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}/index.js"
+        }
+    ]
+}

packages/docs/README.md

@@ -1,60 +1,15 @@
-# This site was built with a Hylia starter kit
+# Pattern Lab Website
 
-# A simple starter kit for Eleventy
-
-Hylia is a lightweight [Eleventy](https://11ty.io) starter kit with [Netlify CMS](https://www.netlifycms.org/) pre-configured, so that you can one-click install a progressive, accessible blog in minutes. It also gives you a well organised starting point to extend it for yourself.
-
-Get started now by **[deploying Hylia to Netlify.][deploy-to-netlify]**
-
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)][deploy-to-netlify]
-
-
-
-## Features
-
-Hylia version 0.5.1 features:
-
-✍️ A pre-configured [Netlify CMS](https://www.netlifycms.org/) setup  
-🎨 Customisable design tokens to make it your own  
-🌍 Customisable global data and navigation  
-📂 Tags and tag archives  
-✅ Progressively enhanced, semantic and accessible  
-🎈 _Super_ lightweight front-end  
-🚰 Sass powered CSS system with utility class generator  
-⚙️ Service worker that caches pages so people can read your articles offline  
-🚀 An RSS feed for your posts
-
-## Roadmap
-
-💬 [Netlify Forms](https://www.netlify.com/docs/form-handling/) powered comments  
-💡 ~~Dark/Light mode toggle~~ [Added in 0.4.0](https://github.com/hankchizljaw/hylia/releases/tag/0.4.0)  
-🗣 Webmentions  
-📖 Pagination  
-🐦 Web sharing API integration  
-🗒 Offline mode with links to cached pages  
-📄 Documentation site  
-💅 Proper Sass documentation  
-✍️ Proper CMS documentation  
-🖼 A facility for you to be able to add your logo / branding  
+This is the website for patternlab.io. This site was build using the [Hylia starter kit](https://hylia.website/), which is a lightweight [Eleventy](https://11ty.io) starter kit.
 
 ---
 
-## Getting started
+## How to work with this project
 
-### Method one: One-Click Deploy to Netlify
-
-You can [deploy Hylia to Netlify with one click][deploy-to-netlify] and you’ll be up and running in minutes!
-
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)][deploy-to-netlify]
-
-I recorded a quick start video of me deploying Hylia to Netlify and getting the CMS set up. [Check it out here](https://youtu.be/0hM_0BH-Y_A).
-
-### Method two: Clone / Fork
-
-1. Clone or fork this repo: `git clone https://github.com/hankchizljaw/hylia`
+1. Clone this repository
 2. `cd` into the project directory and run `npm install`
 3. Once all the dependencies are installed run `npm start`
-4. Open your browser at `http://localhost:8080` and away you go!
+4. Open your browser at `http://localhost:8080`
 
 ## Terminal commands
 
@@ -75,135 +30,3 @@ npm run production
 ```bash
 npm run sass:process
 ```
-
-### Re-generate design tokens for Sass
-
-```bash
-npm run sass:tokens
-```
-
-## Getting started with the CMS
-
-Before you can use the CMS, you need to do some config in Netlify. Luckily they provide a [very handy guide to get started](https://www.netlify.com/docs/identity/).
-
-In short, though:
-
-- Once you’ve set up the site on Netlify, go to “Settings” > “Identity” and enable Identity
-- Scroll down to the “Git Gateway” area, click “Enable Git Gateway” and follow the steps
-- Click the “Identity” tab at the top
-- Once you’ve enabled identity, click “Invite Users”
-- Check the invite link in your inbox and click the link in the email that’s sent to you
-- Set a password in the popup box
-- Go to `/admin` on your site and login
-- You’re in and ready to edit your content!
-
-## Design Tokens and Styleguide
-
-### Design Tokens
-
-Although Hylia has a pretty simple design, you can configure the core design tokens that control the colours, size ratio and fonts.
-
----
-
-**Note**: _Credit must be given to the hard work [Jina Anne](https://twitter.com/jina) did in order for the concept of design tokens to even exist. You should watch [this video](https://www.youtube.com/watch?v=wDBEc3dJJV8), then [read this article](https://the-pastry-box-project.net/jina-bolton/2015-march-28) and then sign up for [this course](https://aycl.uie.com/virtual_seminars/design_tokens_scaling_design_with_a_single_source_of_truth) to expand your knowledge._
-
----
-
-To change the design tokens in the CMS, find the “Globals” in the sidebar then in the presented options, select “Theme Settings”.
-
-To change the design tokens directly, edit [`_src/data/tokens.json`](https://github.com/hankchizljaw/hylia/blob/master/src/_data/tokens.json).
-
-The tokens are converted into maps that the Sass uses to compile the front-end CSS, so make sure that you maintain the correct structure of `tokens.json`.
-
-### Styleguide
-
-Your version of Hylia ships with a Styleguide by default. You can see a demo of the Styleguide at <https://hylia.website/styleguide/>.
-
-You can edit the Styleguide by opening [`src/styleguide.njk`](https://github.com/hankchizljaw/hylia/blob/master/src/styleguide.njk). If you don’t want the Styleguide, delete that file and the page will vanish.
-
-## Sass
-
-Hylia is based on the [WIP v2 version of Stalfos](https://github.com/hankchizljaw/stalfos/tree/feature/v2), which currently has no documentation (I know, I’m bad). Here is some very basic documentation for elements of the new framework that you will encounter on this project.
-
-### Configuration
-
-The whole Sass system is powered by central config file, which lives here: [`_src/scss/_config.scss`](https://github.com/hankchizljaw/hylia/blob/master/src/scss/_config.scss).
-
-Before Sass is compiled, a `_tokens.scss` file is generated from the [design tokens config](https://github.com/hankchizljaw/hylia/blob/master/src/_data/tokens.json) which is required.
-
-Key elements:
-
-- `$stalfos-size-scale`: A token driven size scale which by default, is a “Major Third” scale
-- `$stalfos-colors`: A token driven map of colours
-- `$stalfos-util-prefix`: All pre-built, framework utilities will have this prefix. Example: the wrapper utility is '.sf-wrapper' because the default prefix is 'sf-'
-- `$metrics`: Various misc metrics to use around the site
-- `$stalfos-config`: This powers everything from utility class generation to breakpoints to enabling/disabling pre-built components/utilities
-
-### How to create a new utility class with the generator
-
-The utility class generator lets you generate whatever you want, with no opinions on class name or properties affected.
-
-To add a new class, add another item to the exists `$stalfos-config` map. This example adds a utility for floating elements.
-
-```scss
-'float':('items':('left':'left','right': 'right'
-  ),
-  'output': 'responsive',
-  'property': 'float'
-);
-```
-
-The `output` is set to `responsive` which means every breakpoint will generate a prefixed class for itself. If you only wanted elements to float left in the `md` breakpoint, you’d now be able to add a class of `md:float-left` to your HTML elements.
-
-If you only want standard utility classes generating, set the `output` to `standard`.
-
-### Functions
-
-#### `get-color($key)`
-
-Function tries to match the passed `$key` with the `$stalfos-colors` map. Returns null if it can’t find a match.
-
-#### `get-config-value($key, $group)`
-
-Returns back a 1 dimensional (key value pair) config value if available.
-
-#### `get-size($ratio-key)`
-
-Function tries to match the passed `$ratio-key` with the `$stalfos-size-scale`. Returns null if it can’t find a match.
-
-### Mixins
-
-#### `apply-utility($key, $value-key)`
-
-Grabs the property and value of one of the `$stalfos-config utilities` that the generator will generate a class for.
-
-#### `media-query($key)`
-
-Pass in the key of one of your breakpoints set in `$stalfos-config['breakpoints']` and this mixin will generate the `@media` query with your configured value.
-
-## CMS
-
-Hylia has [Netlify CMS](https://www.netlifycms.org/) pre-configured as standard. You can customise the configuration by editing [`src/admin/config.yml`](https://github.com/hankchizljaw/hylia/blob/master/src/admin/config.yml).
-
-### Content that you can edit
-
-The basic CMS setup allows you to edit the following:
-
-- **Home page**: Edit the content on your homepage
-- **Posts**: Create and edit blog posts
-- **Generic pages**: Create generic pages that use a similar layout to posts
-- **Global site data**: Various bits of global site data such as your url, title, posts per page and author details
-- **Navigation**: Edit your primary navigation items
-- **Theme**: Edit the design tokens that power the site’s theme
-
-## Get involved
-
-This project is _super_ early and feedback is very much welcome. In order to keep things running smooth, please consult the [contribution guide and code of conduct](https://github.com/hankchizljaw/hylia/blob/master/contributing.md).
-
-The stuff that I need the most help with is:
-
-- Documentation
-- [Webmentions](https://www.w3.org/TR/webmention/)
-- Performance
-
-[deploy-to-netlify]: https://app.netlify.com/start/deploy?repository=https://github.com/hankchizljaw/hylia&stack=cms

packages/docs/package.json

@@ -1,7 +1,8 @@
+
 {
   "name": "patternlab-website",
-  "version": "0.5.1",
-  "description": "A simple Eleventy starter kit to help you have a blog of your own",
+  "version": "0.1.0",
+  "description": "The website for patternlab.io",
   "main": "index.js",
   "dependencies": {
     "@11ty/eleventy": "^0.8.3",
@@ -39,13 +40,13 @@
   },
   "repository": {
     "type": "git",
-    "url": ""
+    "url": "git+https://github.com/bradfrost/pl-website-eleventy.git"
   },
   "keywords": [],
   "author": "",
-  "license": "",
+  "license": "MIT",
   "bugs": {
-    "url": ""
+    "url": "https://github.com/bradfrost/pl-website-eleventy/issues"
   },
-  "homepage": ""
+  "homepage": "https://github.com/bradfrost/pl-website-eleventy/#readme"
 }

packages/docs/src/_data/site.json

@@ -1,7 +1,7 @@
 {
   "showThemeCredit": true,
   "name": "Pattern Lab",
-  "shortDesc": "Pattern Lab is a lightweight Eleventy starter kit to help you to create your own blog or personal website.",
+  "shortDesc": "Pattern Lab is a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components.",
   "url": "https://patternlab.io/",
   "authorEmail": "[email protected]",
   "authorHandle": "@bradfrost",

packages/docs/src/_includes/layouts/demos.njk

@@ -0,0 +1,25 @@
+{% extends 'layouts/base.njk' %}
+{% set pageType = 'Post Archive' %} 
+
+{# Intro content #}
+{% set introHeading = title %}
+{% set introSummary %}{{ content | safe }}{% endset %}
+
+{# Post list content #}
+{% set demoListItems = collections.demos %}
+
+{% block content %}
+  <main id="main-content">
+    <div class="l-container">
+      {% include "components/page-header.njk" %}
+      
+        <h2 class="c-section-header">In the wild</h2>
+          {% set demoListCategory = 'example' %}
+          {% include "partials/components/demo-list.njk" %}
+
+        <h2 class="c-section-header">Starterkits</h2>
+          {% set demoListCategory = 'starterkit' %}
+          {% include "partials/components/demo-list.njk" %}
+    </div>
+  </main>
+{% endblock %} 

packages/docs/src/_includes/partials/components/demo-list.njk

@@ -0,0 +1,25 @@
+{% if demoListItems.length %}
+
+  <ol class="c-demo-list">
+    {% for item in demoListItems %}
+
+        {% if item.data.category == demoListCategory %}
+        <li class="c-demo-list__item">
+            
+            <a href="{{ item.data.url }}" target="_blank" class="c-stacked-block">
+              <img src="{{item.data.image}}" alt="{{item.data.title}}" class="c-stacked-block__image">
+              <h3 class="c-stacked-block__title">
+              {{ item.data.title }} 
+              </h3>
+              <p class="c-stacked-block__description">
+              {{ item.data.description}} 
+              </p>
+            </a>
+    
+        </li>
+        {% endif %}
+
+    {% endfor %}
+  </ol>
+
+{% endif %}