From fbd8b9215ecf4325fd8eb1db9228f796a44ee55a Mon Sep 17 00:00:00 2001 From: Brandon Biggs Date: Sun, 9 Dec 2018 12:10:24 -0800 Subject: [PATCH 1/3] added hugo-cli so Hugo doesn't need to be installed manually --- docs/index.html | 2 +- docs/index.xml | 33 +- docs/patterns/coding/command-line/index.html | 861 ++-- docs/patterns/coding/file-trees/index.html | 4 +- docs/patterns/coding/index.xml | 15 +- .../coding/writing-inline-demos/index.html | 20 +- docs/patterns/index.xml | 10 +- docs/patterns/installation/index.html | 2 +- docs/patterns/media/index.xml | 4 +- docs/patterns/printing/index.html | 4 +- docs/patterns/setup/index.html | 967 ++-- docs/patterns/updating/index.html | 863 ++-- docs/patterns/writing/index.xml | 4 +- docs/print-version/index.html | 3363 ++++++------- docs/service-worker.js | 2 +- package-lock.json | 4364 +++++++++++++++++ package.json | 3 + 17 files changed, 7446 insertions(+), 3075 deletions(-) create mode 100644 package-lock.json diff --git a/docs/index.html b/docs/index.html index 11f3fe31f..81cbb191e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,7 +1,7 @@ - + diff --git a/docs/index.xml b/docs/index.xml index 4aadabe17..08eca6c66 100644 --- a/docs/index.xml +++ b/docs/index.xml @@ -19,7 +19,7 @@ https://thepaciellogroup.github.io/cupper/patterns/coding/code-blocks/ Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Cupper will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block. So, this… -```html <button aria-pressed="false"toggle me</button ``` … will result in this: +```html <button aria-pressed="false"toggle me</button ``` … will result in this: <button aria-pressed="false">toggle me</button> Note that the syntax highlighting uses a greyscale theme. Cupper is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed. @@ -32,7 +32,7 @@ So, this… Cupper is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let’s get everything installed step-by-step. Install Hugo First you need to install Hugo globally. OSX users If you are a Mac user and have Homebrew on your system, installing Hugo is simple: -brew install hugo Alternatively, you can manually install Hugo from a package. You can verify the installation was successful by typing: +brew install hugo Alternatively, you can manually install Hugo from a package. You can verify the installation was successful by typing: @@ -42,7 +42,7 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y https://thepaciellogroup.github.io/cupper/patterns/writing/project-structure/ Before you can set about making documentation, you need to know where everything goes. The simplest folder structure looks like this: - content _index.md print-version.md patterns name-of-my-pattern.md name-of-my-other-pattern.md /content - This is where all of your content lives. You won’t need to visit any other folders very frequently. _index.md — This is the content file for your home page. print-version.md — This is a placeholder for the single-page / print-friendly version of you library. + content _index.md print-version.md patterns name-of-my-pattern.md name-of-my-other-pattern.md /content - This is where all of your content lives. You won’t need to visit any other folders very frequently. _index.md — This is the content file for your home page. print-version.md — This is a placeholder for the single-page / print-friendly version of you library. @@ -53,7 +53,7 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y https://thepaciellogroup.github.io/cupper/patterns/coding/demo-embedding/ Sometimes just pictures of the pattern you’re documenting aren’t enough. Interactive patterns benefit from live demos, so that readers can test their functionality. CodePen Cupper offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen’s ID. -{{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default: +{{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default: @@ -83,7 +83,7 @@ If you’re not familiar with writing markdown, there are a number of tu https://thepaciellogroup.github.io/cupper/patterns/serving/ Serving locally While you’re creating content for your project, you’ll probably want to see what the finished product looks like. Fortunately, Cupper is easy to serve locally using the serve command: -npm run serve This will serve your working project from localhost:1313. Whenever you make changes to your files, the site will automatically rebuild. No need to refresh the web page! +npm run serve This will serve your working project from localhost:1313. Whenever you make changes to your files, the site will automatically rebuild. No need to refresh the web page! Publishing on Github Pages Cupper creates a /docs folder containing the latest version of your site whenever you do an npm run build or a git commit. @@ -104,8 +104,8 @@ Cupper offers another option: a special demo shortcode that allows you to write https://thepaciellogroup.github.io/cupper/patterns/printing/ Cupper’s output site includes a one-page Print version of the generated library, available at /print-version. So, if your library base URL is https://yourName.github.io/your-library, you can print the whole library — to PDF if wanted — from the following address: -https://yourName.github.io/your-library/print-version Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, you can! - +https://yourName.github.io/your-library/print-version Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, you can! + @@ -115,7 +115,7 @@ https://yourName.github.io/your-library/print-version Print styles are also https://thepaciellogroup.github.io/cupper/patterns/updating/ The core of Cupper’s functionality is in its Hugo theme, also called Cupper. This is found in the theme folder. - content docs lib snippets static themes cupper Do not “hack the core”. If you have any issues with Cupper, please report them to the Cupper Github repository and they will be dealt with ASAP. + content docs lib snippets static themes cupper Do not “hack the core”. If you have any issues with Cupper, please report them to the Cupper Github repository and they will be dealt with ASAP. Cupper is undergoing constant development, so keep an eye out for new releases. @@ -146,7 +146,7 @@ The expandable shortcode takes three parameters: https://thepaciellogroup.github.io/cupper/patterns/coding/color-palettes/ There’s no reason why your Cupper-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values. -{{% colors "#111111, #cccccc, #ffffff" %}} The result is a one row strip showing each color supplied in order. The colors for Cupper are greyscale: +{{% colors "#111111, #cccccc, #ffffff" %}} The result is a one row strip showing each color supplied in order. The colors for Cupper are greyscale: @@ -157,9 +157,8 @@ The expandable shortcode takes three parameters: https://thepaciellogroup.github.io/cupper/patterns/coding/command-line/ Your pattern documentation may need to include commands for installing packages or using CLIs. Cupper offers the cmd shortcode for making code blocks look like terminal commands. Here’s how you write it: -{{<cmd}} npm run start {{</cmd}} And here’s how it looks: -npm run start The cmd shortcode currently only supports single commands. If you want to show multiple, successive commands use separate cmd blocks. - +{{<cmd}} npm run start {{</cmd}} And here’s how it looks: + npm run start The cmd shortcode currently only supports single commands. If you want to show multiple, successive commands use separate cmd blocks. @@ -170,7 +169,7 @@ npm run start The cmd shortcode currently only supports single commands. If y https://thepaciellogroup.github.io/cupper/patterns/coding/file-trees/ Representing folder/file structures is simple and accessible in Cupper. Which is just as well, because some components may need to conform to a certain folder structure. The file tree is described using a markdown nested list structure: -{{% fileTree %}} * Level 1 folder * Level 2 file * Level 2 folder * Level 3 file * Level 3 folder * Level 4 file * Level 3 folder * Level 4 file * Level 4 file * Level 3 file * Level 2 folder * Level 3 file * Level 3 file * Level 3 file * Level 2 file * Level 1 file {{% /fileTree %}} This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers: +{{% fileTree %}} * Level 1 folder * Level 2 file * Level 2 folder * Level 3 file * Level 3 folder * Level 4 file * Level 3 folder * Level 4 file * Level 4 file * Level 3 file * Level 2 folder * Level 3 file * Level 3 file * Level 3 file * Level 2 file * Level 1 file {{% /fileTree %}} This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers: @@ -180,7 +179,7 @@ The file tree is described using a markdown nested list structure: https://thepaciellogroup.github.io/cupper/patterns/media/including-images/ From time to time, you’ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you’ll be mostly working in. - content static images logo.png menu-button.gif When you first make a copy of Cupper, Cupper’s own logo will be included. You should replace this with your own company or project logo. + content static images logo.png menu-button.gif When you first make a copy of Cupper, Cupper’s own logo will be included. You should replace this with your own company or project logo. @@ -190,7 +189,7 @@ The file tree is described using a markdown nested list structure: https://thepaciellogroup.github.io/cupper/patterns/media/including-videos/ Cupper has a lot of its own shortcodes, but you can still use Hugo’s built in shortcodes. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video’s id. -{{<youtube w7Ft2ymGmfc}} +{{<youtube w7Ft2ymGmfc}} @@ -210,7 +209,7 @@ Notes You may wish to pick out some content in your pattern’s document https://thepaciellogroup.github.io/cupper/patterns/writing/references/ Cross-references Cupper identifies the main content files in your documentation as patterns, and they’re kept in the content/ patterns folder. It’s easy to cross-reference patterns using the pattern shortcode. For example, I can reference the Notes & warnings pattern. Here’s what the markdown looks like, including the shortcode: -I can reference the {{% pattern "Notes & warnings" %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually. +I can reference the {{% pattern "Notes & warnings" %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually. @@ -241,7 +240,7 @@ The example visually-hidden.md snippet describes the CSS needed to create conten https://thepaciellogroup.github.io/cupper/patterns/coding/tested/ When you’re an inclusive designer, it’s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users. Cupper provided a tested shortcode that lets you show which browsers and assistive technologies you’ve tried your design out in. Here’s an example. Note the commas and “+” signs. -{{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}} This outputs: +{{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}} This outputs: diff --git a/docs/patterns/coding/command-line/index.html b/docs/patterns/coding/command-line/index.html index 5551a6441..5ad465c24 100644 --- a/docs/patterns/coding/command-line/index.html +++ b/docs/patterns/coding/command-line/index.html @@ -1,442 +1,443 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Command line | Cupper - - - - - - - skip to content - - - - - - - - - - W3C - SVG - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- -
-

- - Command line -

- - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Command line | Cupper + + + + + + + skip to content + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+

+ + Command line +

+ + + + + +

Your pattern documentation may need to include commands for installing packages or using CLIs. Cupper offers the cmd shortcode for making code blocks look like terminal commands.

Here’s how you write it:

-

-{{<cmd>}}
-npm run start
-{{</cmd>}}
-
+

+{{<cmd>}}
+npm run start
+{{</cmd>}}
+

And here’s how it looks:

-
npm run start
+

+npm run start
- - - -
- -
-
- -
- Powered by Cupper, a The Paciello Group project.
- For general enquiries, contact us on info@paciellogroup.com. -
-
-
-
- - - - - + +
+ +
+
+ +
+ Powered by Cupper, a The Paciello Group project.
+ For general enquiries, contact us on info@paciellogroup.com. +
+
+
+
+ + + + + diff --git a/docs/patterns/coding/file-trees/index.html b/docs/patterns/coding/file-trees/index.html index f20530221..3708097ee 100644 --- a/docs/patterns/coding/file-trees/index.html +++ b/docs/patterns/coding/file-trees/index.html @@ -421,7 +421,7 @@

This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers:

-

+
  • Level 1 folder @@ -457,7 +457,7 @@

-

+