jekyll_patternbot 0.12.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 3c0b45c452eda84483e76152b084ee030ac2513e02e078d7f376f23713c5ac73
+  data.tar.gz: 1b5d3479640aa7c587194b5f11377297ac936569c5ee3cce4f1c1273fac82baf
+SHA512:
+  metadata.gz: ed3ff96b9e21290d66dbab46ae98a384641faea1512db09490f04040d1247523cb0233f6133b4e4a4c9df77d40f6cb834c1e21cc7adde34fa7eff7a5ba497a36
+  data.tar.gz: 2005b9a8ff0f89286501f1b0bfe180fbf8a457747b83f38c5b9fd2e4c0295e6fbd8294e18062b39a9fec89aeb29a1683108d3945028a4cbad38bc2e6949bb3d4

data/.editorconfig

@@ -0,0 +1,12 @@
+; editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+
+indent_style = space
+indent_size = 2
+
+trim_trailing_whitespace = true
+end_of_line = lf
+insert_final_newline = true

data/.gitattributes

@@ -0,0 +1,13 @@
+# Force Unix LF to make code consistent across platforms
+# Helps Markbot cheat detection to work properly
+
+*.html text eol=lf
+*.css text eol=lf
+*.js text eol=lf
+*.md text eol=lf
+*.yml text eol=lf
+*.txt text eol=lf
+*.svg text eol=lf
+*.lock text eol=lf
+
+.editorconfig text eol=lf

data/.gitignore

@@ -0,0 +1,73 @@
+# Ruby GEM-related files
+/.bundle/
+/.yardoc
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+
+# rspec failure tracking
+.rspec_status
+
+# Vendor files
+node_modules
+npm-debug.log
+vendor
+
+# Jekyll
+_site
+.jekyll-metadata
+
+# Temporary files
+tmp
+
+# Adobe files
+*.pdf
+*.ai
+*.psd
+*.indd
+*.indb
+
+# Compressed files
+*.zip
+*.gz
+*.tar
+*.7z
+
+# Type faces
+*.otf
+*.ttf
+*.woff
+*.eot
+*.ttc
+
+# Video & audio
+*.mov
+*.mp4
+*.m4v
+*.f4v
+*.f4p
+*.ogv
+*.webm
+*.flv
+*.mp3
+*.m4a
+*.f4a
+*.f4b
+*.oga
+*.ogg
+*.opus
+
+# Folder view configuration files
+.DS_Store
+Desktop.ini
+
+# Thumbnail cache files
+._*
+Thumbs.db
+
+# Files that might appear on external disks
+.Spotlight-V100
+.Trashes

data/CHANGELOG.md

@@ -0,0 +1,68 @@
+# Changelog
+
+This file documents all the notable changes for each version of Jekyll Patternbot.
+Jekyll Patternbot adheres to [Semantic Versioning](http://semver.org/).
+
+---
+
+## [0.12.0] — 2019-01-15
+
+### Changed
+
+- Transitioned from nested Gems to a single Gem that includes the theme & plugins.
+
+### Fixed
+
+- Fixed a bunch of bugs when different pattern library elements were missing.
+
+---
+
+## [0.11.0] — 2019-01-15
+
+### Added
+
+- Added support for pretty permalinks.
+- Added internal pattern post processors to remove patterns when they aren’t included in the user’s code.
+- Messages are displayed in console related to remote font URLs: whether a cached or remotely downloaded version was used.
+
+### Changed
+
+- Changed the default folder location for sample pages to have a hyphen instead of underscore.
+- Patterns aren’t required to be listed in `config.patterns` any more, having just the `.html` file is enough.
+- Renamed `FileHelpers` & `JekyllHelpers` to be not plural for consistency.
+- Changed all my very un-Ruby `if not` statements into `unless` statements.
+
+### Fixed
+
+- Errors are now thrown, coloured, when Patternbot can’t find specific files.
+- Fixed some errors when running `jekyll serve`
+
+---
+
+## [0.10.0] — 2019-01-12
+
+### Added
+
+- Added a whole bunch of error checking.
+- Added cache busting to all the assets.
+- Allow pattern field descriptions to show a list of classes.
+- Allow pattern field descriptions to present a datasource for loading a Jekyll object.
+- Added the ability to document utility classes inside `theme.css`
+- Added back the type samples and cleaned up the typography pattern.
+- Added the ability to configure icon colour variables within the SVG spritesheet.
+
+### Changed
+
+- Change all file & folder spelling to American for consistency.
+- Allow the `main.css` `config.yml` filenames to be configurable.
+- Changed “Page” to “Sample Page” for a little more clarity.
+- Rewrote all the colour adjustment code to be much simpler.
+- Now allows the placeholder graphics to be configured.
+
+---
+
+## [0.9.0] — 2019-01-10
+
+### Added
+
+- Initial public release: feature parity with Patternbot.app

data/Gemfile

@@ -0,0 +1,16 @@
+source 'https://rubygems.org'
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+ruby '2.5.3'
+
+gem 'jekyll', '~> 3.8'
+gem 'colorator'
+gem 'babosa'
+gem 'deep_merge'
+gem 'unicode_titlecase'
+gem 'css_parser'
+gem 'color_contrast_calc'
+gem 'indifference'
+
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Thomas J Bradley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,39 @@
+# Jekyll::Patternbot
+
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/jekyll/patternbot`. To experiment with that code, run `bin/console` for an interactive prompt.
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'jekyll_patternbot'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jekyll_patternbot
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/jekyll_patternbot.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/_config.yml

@@ -0,0 +1,54 @@
+patternbot:
+  locale: "en-ca"
+  source: "_patterns"
+  config: "config.yml"
+  destination: "pattern-library"
+  font_url: false
+  css:
+    source: "css"
+    modulifier: "modules.css"
+    gridifier: "grid.css"
+    typografier: "type.css"
+    theme: "theme.css"
+    main: "main.css"
+    utility_tag: "@utility"
+  icons:
+    source: "images"
+    filenames:
+      - "icons"
+    extensions:
+      - ".svg"
+  logos:
+    source: "images"
+    filenames:
+      - "logo"
+      - "logo-256"
+      - "logo-64"
+      - "logo-32"
+      - "logo-16"
+    extensions:
+      - ".svg"
+      - ".png"
+  sample_pages:
+    source: "sample-pages"
+  js:
+    source: "js"
+
+  title: false
+  description: false
+
+  colors:
+    background: '#fff'
+    accent: false
+    patterns:
+      # brand.logos: hotpink
+      # icons.icons.brachiosaurus: orange
+      # icons.icons.velociraptor.--color-stroke:
+
+  rationales:
+    # typefaces.primary: "Blah, blah…"
+    # colors.secondary: "Blerg, blerg…"
+
+  placeholders:
+    square: '/assets/_patternbot/images/placeholder-1by1.svg'
+    wide: '/assets/_patternbot/images/placeholder-16by9.svg'

data/_data/locales/en-ca.yml

@@ -0,0 +1,5 @@
+locale: "en-ca"
+
+patternlib:
+  title: "Pattern Library"
+  description: "This pattern library is the source for all the colours, fonts & styles available for our website."

data/_includes/patternbot_icons.html

@@ -0,0 +1,38 @@
+<svg hidden>
+  <symbol id="nav-icon" viewBox="0 0 256 256">
+    <path d="M8.5 26.9h239v35.8H8.5zm0 83.7h239v35.8H8.5zm0 83.6h239V230H8.5z"/>
+  </symbol>
+  <symbol id="nav-icon-close" viewBox="0 0 256 256">
+    <path d="M199.776 226.088L30.779 57.091l25.385-25.385 168.997 168.997zm25.426-168.767L56.205 226.318 30.82 200.933 199.817 31.936z"/>
+  </symbol>
+  <symbol id="icon-pop-out" viewBox="0 0 256 256">
+    <polyline fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="30" points="87 21 234 21 234 168"/>
+    <line x1="173" x2="173" y1="81" y2="81" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="30"/>
+    <line x1="145.1" x2="47.5" y1="108.9" y2="206.6" fill="none" stroke-dasharray="0 39.46" stroke-linecap="round" stroke-linejoin="round" stroke-width="30"/>
+    <line x1="33.5" x2="33.5" y1="220.5" y2="220.5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="30"/>
+  </symbol>
+  <symbol id="icon-resize-handle" viewBox="0 0 256 256">
+    <line x1="128" x2="128" y1="18.8" y2="237.2" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="30"/>
+    <line x1="66.7" x2="66.7" y1="18.8" y2="237.2" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="30"/>
+    <line x1="189.3" x2="189.3" y1="18.8" y2="237.2" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="30"/>
+  </symbol>
+  <symbol id="icon-code" viewBox="0 0 256 256">
+    <path stroke-width="6" d="M80.6 74.6c-2-1-4.4-1-6.2.4l-63.7 44.5c-1.6 1-2.7 3-2.7 4.8v5.6c0 1.8 1 3.6 2.6 4.7L74 179.2c1 .7 2.3 1 3.5 1 1 0 2 0 3-.6 2-1 3.4-3 3.4-5.2V168c0-1.8-1.3-3.6-2.8-4.7L29.5 127l51.7-36c1.6-1.2 2.7-3 2.7-5V80c0-2.2-1.5-4.2-3.4-5.2zM159.2 52h-6c-2.4 0-4.6 1.3-5.5 3.6L90.5 208c-.7 1.8-.4 4 .7 5.4 1 1.6 3 2.6 4.8 2.6h6c2.5 0 4.6-1.6 5.5-4l57.2-152.5c.7-1.8.4-3.6-.7-5.2-1-1.6-3-2.3-4.8-2.3zM247.4 119.5L183.8 75c-1.8-1.3-4.4-1.4-6.4-.4-2 1-3.4 3-3.4 5.2V86c0 2 1.2 3.8 2.7 5l51.7 36-51.7 36.3c-1.6 1-2.7 3-2.7 4.8v6.4c0 2.2 1.5 4.2 3.4 5.2 1 .4 2 .7 2.8.7 1.2 0 2.4-.4 3.4-1l63.7-44.6c1.6-1 2.7-3 2.7-4.8v-5.7c0-2-1-3.7-2.6-4.8z"/>
+  </symbol>
+  <symbol id="icon-copy" viewBox="0 0 256 256">
+    <rect width="125.7" height="27.83" x="65.2" y="175"/>
+    <rect width="125.7" height="27.83" x="65.2" y="117.8"/>
+    <polygon points="82.9 10 82.9 66.8 107.1 66.8 148.9 66.8 173.1 66.8 173.1 10 82.9 10"/>
+    <rect width="219.8" height="207.33" x="18.1" y="38.7" fill="none" stroke-miterlimit="10" stroke-width="20" rx="18.8" ry="18.8"/>
+  </symbol>
+  <symbol id="icon-active" viewBox="0 0 256 256">
+    <polyline fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="30" points="126 24.1 230 128 126 231.9"/>
+  </symbol>
+  <symbol id="patternbot-iframe-loading-gears-double" viewBox="0 0 256 256">
+    <path class="patternbot-iframe-loading-gears-top" d="M151.3 86.9a51.3 51.3 0 0 0 .2-6.1 51.3 51.3 0 0 0-.2-6.1l-12-.9a57.9 57.9 0 0 0-4.3-15.9l9.9-6.8a59.2 59.2 0 0 0-6.1-10.6l-10.9 5a59.6 59.6 0 0 0-11.6-11.6l5.3-10.9a59.2 59.2 0 0 0-10.6-6.2l-7.1 9.7a60.2 60.2 0 0 0-15.8-4.2l-.9-12a57.5 57.5 0 0 0-6.4-.2 51.3 51.3 0 0 0-6.1.2l-.9 12A57.9 57.9 0 0 0 58 26.5l-7-9.7A59.2 59.2 0 0 0 40.4 23l5 10.9a68.4 68.4 0 0 0-11.8 11.5l-10.6-5A59.2 59.2 0 0 0 16.8 51l9.7 6.8a59.5 59.5 0 0 0-4.2 16l-11.8.9a23 23 0 0 0-.5 5.9 51.3 51.3 0 0 0 .2 6.1l11.8.9a59.5 59.5 0 0 0 4.2 16l-9.7 6.8a59.2 59.2 0 0 0 6.1 10.6l10.6-5A54.8 54.8 0 0 0 45 127.6l-5 10.9a59.2 59.2 0 0 0 10.6 6.1l6.8-9.7a60.2 60.2 0 0 0 15.8 4.2l.9 12h6.4a51.3 51.3 0 0 0 6.1-.2l.9-12a60.2 60.2 0 0 0 15.8-4.2l6.8 9.9a59.2 59.2 0 0 0 10.6-6.1l-5-11.1a53.7 53.7 0 0 0 11.6-11.6l10.9 5.2a59.2 59.2 0 0 0 6.1-10.6l-9.7-6.8a60.2 60.2 0 0 0 4.2-15.8zm-70.5 29.3a35.4 35.4 0 1 1 35.4-35.4 35.3 35.3 0 0 1-35.4 35.4z"/>
+    <path class="patternbot-iframe-loading-gears-bottom" d="M242.8 200.6a51.3 51.3 0 0 0 1.8-5.9 51.3 51.3 0 0 0 1.4-6l-11.4-4a57.9 57.9 0 0 0 0-16.4l11.3-4a59.2 59.2 0 0 0-3.2-11.8l-11.8 2a59.6 59.6 0 0 0-8.1-14.2l7.8-9.1a59.2 59.2 0 0 0-8.7-8.7l-9.4 7.5a60.2 60.2 0 0 0-14.2-8.2l2.2-11.9a57.5 57.5 0 0 0-6.1-1.9 51.3 51.3 0 0 0-6-1.4l-4 11.4a57.9 57.9 0 0 0-16.4 0l-4.1-11.1a59.2 59.2 0 0 0-11.8 3.2l2 11.8a68.4 68.4 0 0 0-14.4 8.1l-9-7.5a59.2 59.2 0 0 0-8.7 8.7l7.6 9.1a59.5 59.5 0 0 0-8.3 14.4l-11.3-2.4a23 23 0 0 0-2 5.6 51.3 51.3 0 0 0-1.4 6l11.1 4a59.5 59.5 0 0 0-.1 16.6l-11.1 4.1a59.2 59.2 0 0 0 3.2 11.8l11.5-2a54.8 54.8 0 0 0 8.4 14.2l-7.6 9.2a59.2 59.2 0 0 0 8.7 8.7l9.1-7.6a60.2 60.2 0 0 0 14.2 8.2l-2.3 11.9 6.1 1.7a51.3 51.3 0 0 0 6 1.4l4-11.4a60.2 60.2 0 0 0 16.4 0l4 11.3a59.2 59.2 0 0 0 11.8-3.2l-1.9-12a53.7 53.7 0 0 0 14.2-8.1l9.1 7.8a59.2 59.2 0 0 0 8.7-8.7l-7.6-9.1a60.2 60.2 0 0 0 8.2-14.2zm-75.7 9.9a35.4 35.4 0 1 1 43.4-24.9 35.3 35.3 0 0 1-43.4 24.9z"/>
+  </symbol>
+  <symbol id="patternbot-iframe-loading-gears" viewBox="0 0 256 256">
+    <path class="patternbot-iframe-loading-gears-single" d="M107.2 11.3a8.6 8.6 0 0 0-7.6 6.4l-4.2 23.2a95.8 95.8 0 0 0-24.8 13.9l-21.9-8.5a8.1 8.1 0 0 0-9.5 3.3L17.6 85a7.9 7.9 0 0 0 1.5 9.8l17.4 15.5a87.9 87.9 0 0 0 0 35.4l-17.4 15.4a8.1 8.1 0 0 0-1.5 9.9l21.6 35.4a8.1 8.1 0 0 0 9.5 3.2l21.9-8.4A95.5 95.5 0 0 0 95.4 215l4.2 23.3a8.2 8.2 0 0 0 7.6 6.4h41.5a8.1 8.1 0 0 0 7.7-6.4l4.2-23.3a93.9 93.9 0 0 0 24.8-13.8l22 8.4a8 8 0 0 0 9.4-3.2l21.6-35.4a8.1 8.1 0 0 0-1.5-9.9l-17.4-15.5a93.8 93.8 0 0 0 1.8-17.6 94.9 94.9 0 0 0-1.8-17.7l17.4-15.5a7.9 7.9 0 0 0 1.5-9.8l-21.6-35.4a8.2 8.2 0 0 0-9.4-3.3l-22 8.5a92.7 92.7 0 0 0-24.8-13.9l-4.2-23.2a8.1 8.1 0 0 0-7.7-6.4zM128 83a45 45 0 1 1-45 45 44.9 44.9 0 0 1 45-45z"/>
+  </symbol>
+</svg>

data/_includes/patternbot_pattern_brand_color_swatches.html

@@ -0,0 +1,48 @@
+<section>
+  {% if include.show_hr %}<hr class="patternbot-hr">{% endif %}
+
+  <h2 class="patternbot-color-body giga {% if page._PatternbotConfig.patternbot.colors.primary %}push-1-4{% endif %}">{{include.title}} colours</h2>
+  {% assign pattern_has_rationale = include.key | has_pattern_rationale:'colors' %}
+  {% if pattern_has_rationale %}
+    <div class="patternbot-max-length italic max-length">
+      {{include.key | get_pattern_rationale:'colors' | markdownify}}
+    </div>
+  {% endif %}
+
+  {% if include.style == "large" %}
+    <div class="patternbot-color-swatches {{include.extra_class}} grid grid-stretch">
+      <div class="unit xs-1-2" style="background-color:var({{include.colors[0].name}})">&nbsp;</div>
+      <div class="patternbot-color-swatches-fill unit xs-1-2" style="background-color:var({{include.colors[0].name}})">
+        {% for color in include.colors %}
+          <div style="background-color:var({{color.name}});">&nbsp;</div>
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
+
+  <ul class="patternbot-color-swatch-labels patternbot-color-body patternbot-list-group list-group-inline milli push-0 {% if include.style == 'large' %}pad-t-1-2{% endif %}">
+    {% for color in include.colors %}
+      <li class="push">
+        {% if include.style == "small" %}
+          <div class="patternbot-color-swatches patternbot-color-swatches-accent push-1-2" style="background-color:var({{color.name}});">&nbsp;</div>
+        {% endif %}
+        <div class="push-1-2">
+          <i class="patternbot-color-swatches icon i-24" style="background-color:var({{color.name}});">&nbsp;</i>
+          <span class="icon-label">{{color.name_pretty}}</span>
+        </div>
+        <ul class="patternbot-code-details patternbot-code-details-under patternbot-list-group list-group micro push-0">
+          <li class="push-1-8 relative">
+            <code>var({{color.name}})</code>
+            <button class="center-contents-vertical patternbot-tool-btn pattern-copy-btn" title="Copy color: {{color.name_pretty}}" aria-label="Copy color: {{color.name_pretty}}" data-clipboard-text="var({{color.name}})" hidden>
+              <i class="icon i-18">
+                <svg><use xlink:href="#icon-copy"></use></svg>
+              </i>
+            </button>
+          </li>
+          <li class="patternbot-color-swatch-labels-hex push-1-8"><code>{{color.hex}}</code></li>
+          <li class="patternbot-color-swatch-labels-rgba"><code>{{color.rgba}}</code></li>
+        </ul>
+      </li>
+    {% endfor %}
+  </ul>
+</section>

data/_includes/patternbot_pattern_brand_typeface.html

@@ -0,0 +1,32 @@
+<section style="font-family:var({{include.font.var}});">
+  {% if include.show_hr %}<hr class="patternbot-hr">{% endif %}
+
+  <ul class="patternbot-code-details patternbot-list-group list-group-inline micro push-1-2 pad-t">
+    <li class="relative">
+      <code>var({{include.font.var}})</code>
+      <button class="center-contents-vertical patternbot-tool-btn pattern-copy-btn" title="Copy font: {{include.title}}: {{include.font.name_pretty}}" aria-label="Copy font: {{include.title}}: {{include.font.name_pretty}}" data-clipboard-text="var({{include.font.var}})" hidden>
+        <i class="icon i-18">
+          <svg><use xlink:href="#icon-copy"></use></svg>
+        </i>
+      </button>
+    </li>
+  </ul>
+
+  <h2 class="patternbot-color-body yotta"><span class="patternbot-type-sample-large">{{include.font.name_pretty}}</span> is {{include.preposition}} {{include.title | downcase}} typeface</h2>
+  {% assign pattern_has_rationale = include.key | has_pattern_rationale:'typefaces' %}
+  {% if pattern_has_rationale %}
+    <div class="patternbot-max-length tera max-length">
+      {{include.key | get_pattern_rationale:'typefaces' | markdownify}}
+    </div>
+  {% endif %}
+
+  {% for weight in include.font.weights %}
+    {% assign weight_data = weight[1] %}
+    {% if weight_data.has_normal %}
+      {% include patternbot_pattern_brand_typeface_weight.html weight=weight_data style="normal" font_var=include.font.var %}
+    {% endif %}
+    {% if weight_data.has_italic %}
+      {% include patternbot_pattern_brand_typeface_weight.html weight=weight_data style="italic" font_var=include.font.var %}
+    {% endif %}
+  {% endfor %}
+</section>