jekyll_patternbot 1.1.2 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8bacb09e49ced1e79a2e942d5e001a4ac14ed26f014f87b8f2f7d7d5a646fb93
-  data.tar.gz: 7bf0a9fe0590abe1f6942a015e668b60f4f0e255868cfea4df84774e8a63abce
+  metadata.gz: 4f68472848b7cf670739fe8f37292241cbac4be69f9d5bd28c6dc8c57120046f
+  data.tar.gz: bff3006c2cdc439afbcad0cdfaa5ecc821e02cd32d061f2d04027d37f93bf27c
 SHA512:
-  metadata.gz: f2ab3f9d9a4522dc9b084db6b9f89bd48d3bc3c5b7046136a5bfdcd41636d6a95f933ca686624494a18b00326f4d08f1cc46009288813c6c76a3455fb626751a
-  data.tar.gz: 66308d09a05a916a719a53cd11a318e0de0dded0b177a351fdef4b1082461604797ebcdf33b83a90d907827f928199f485b72ce390a90bdab9e76a8f5b11c07b
+  metadata.gz: 986326fd6a2bd735143296fce311a1793318fa5a8c1dc57f814855bdbdf62a7ca208353f1f08fdfc9eb2335cb11faf5ca4137ee75e8b7137ffba1ee411a991f9
+  data.tar.gz: 061ebbfbce1f7df69de51cee6f72570223eb92741c50b0947ae757fe7821a31030b982f337404a9c68dcdaa96e11c89106a894da452d6e7e88a4c19c9e9ebf5f

data/CHANGELOG.md

@@ -5,9 +5,35 @@ Jekyll Patternbot adheres to [Semantic Versioning](http://semver.org/).
 
 ---
 
+## [1.2.0] — 2019-01-28
+
+### Added
+
+- Added a comment denoting where user’s pattern code start & ends.
+- Add the ability to label a tertiary colour & typeface.
+
+### Changed
+
+- Removed some CSS injection via JavaScript and just wrote it right into the layouts.
+- The pattern `width` property is now a `max-width` inside the pattern itself: makes for better media query testing.
+- Cleaned up the whitespace in pattern output files.
+- Patterns & sample pages are now listed in alphabetical order in the navigation.
+
+### Fixed
+
+- Fixed a bug where list bullets were being displayed because of user CSS.
+- Fixed a bug where internal patterns relied on specific Modulifier features, but user modules didn’t include the feature.
+- Made the filename output more reliable with different permalink settings.
+
+### Removed
+
+- Removed the “Show all” button. It was useful previously but I found lots of students don’t really use it properly and it’s a poor user experience.
+
+---
+
 ## [1.1.2] — 2019-01-28
 
-## Fixed
+### Fixed
 
 - User JS files were included using a `<link>` tag instead of a script tag.
 

data/_includes/patternbot_patternlib_pattern.html

@@ -160,9 +160,9 @@
 
       <div class="pattern-examples pad-t-1-2 pad-b-1-2">
         <div class="gutter{% if pattern_data._resizable != false %}-2{% endif %} pad-t-1-2 pad-b-1-2">
-          <div class="resizeable-pattern relative" style="{% if pattern_data.width %}width:{{pattern_data.width}}px{% endif %}">
+          <div class="resizeable-pattern relative">
             <i class="icon i-32 patternbot-iframe-loading-gears absolute pin-c"><svg><use xlink:href="#patternbot-iframe-loading-gears"></use></svg></i>
-            <iframe data-src="/{{page._PatternbotConfig.patternbot.destination}}/patterns/{{include.pattern.name}}/{{pattern_name | normalize_filename}}" scrolling="no" data-inject-css="{% if pattern_data.padding %}body { padding:{{pattern_data.padding}}; }{% endif %}" {% if pattern_data.height %}data-min-height="{{pattern_data.height}}"{% endif %}></iframe>
+            <iframe data-src="/{{page._PatternbotConfig.patternbot.destination}}/patterns/{{include.pattern.name}}/{{pattern_name | normalize_filename}}" scrolling="no" {% if pattern_data.height %}data-min-height="{{pattern_data.height}}"{% endif %}></iframe>
             {% if pattern_data._resizable != false %}
               <div class="resizeable-pattern-length">
                 <div class="resize-handle resize-handle-left">

data/_layouts/patternbot_pattern_internal.html

@@ -4,32 +4,32 @@
   <meta charset="utf-8">
   <title>{{page.title}}</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  {% if page._pattern_data.config._user_modulifier %}
+  {%- if page._pattern_data.config._user_modulifier -%}
     <link href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.css.source}}/{{page._PatternbotConfig.patternbot.css.modulifier}}?v={{site.time | date:'%s'}}" rel="stylesheet">
-  {% else %}
+  {%- else -%}
     <link href="{{site.baseurl}}/assets/_patternbot/common/modulifier.min.css?v={{page._PatternbotConfig.patternbot.version}}" rel="stylesheet">
-  {% endif %}
-  {% if page._pattern_data.config._user_gridifier %}
+  {%- endif -%}
+  {%- if page._pattern_data.config._user_gridifier -%}
     <link href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.css.source}}/{{page._PatternbotConfig.patternbot.css.gridifier}}?v={{site.time | date:'%s'}}" rel="stylesheet">
-  {% else %}
+  {%- else -%}
     <link href="{{site.baseurl}}/assets/_patternbot/common/gridifier.min.css?v={{page._PatternbotConfig.patternbot.version}}" rel="stylesheet">
-  {% endif %}
-  {% if page._pattern_data.config._user_typografier %}
+  {%- endif -%}
+  {%- if page._pattern_data.config._user_typografier -%}
     <link href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.css.source}}/{{page._PatternbotConfig.patternbot.css.typografier}}?v={{site.time | date:'%s'}}" rel="stylesheet">
-  {% else %}
+  {%- else -%}
     <link href="{{site.baseurl}}/assets/_patternbot/common/typografier.min.css?v={{page._PatternbotConfig.patternbot.version}}" rel="stylesheet">
-  {% endif %}
-  {% unless page._PatternbotData.css.theme == empty %}
+  {%- endif -%}
+  {%- unless page._PatternbotData.css.theme == empty -%}
     <link href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.css.source}}/{{page._PatternbotConfig.patternbot.css.theme}}?v={{site.time | date:'%s'}}" rel="stylesheet">
-  {% endunless %}
+  {%- endunless -%}
   <link href="{{site.baseurl}}/assets/_patternbot/common/common.min.css?v={{page._PatternbotConfig.patternbot.version}}" rel="stylesheet">
-  {% for css in page._pattern_data.config._extra_css %}
+  {%- for css in page._pattern_data.config._extra_css -%}
     <link href="{{site.baseurl}}/assets/_patternbot/patterns/{{css}}?v={{page._PatternbotConfig.patternbot.version}}" rel="stylesheet">
-  {% endfor %}
+  {%- endfor -%}
   <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" rel="stylesheet">
   <style>
-    {% assign has_bg = page._subpattern | has_pattern_background_color: page._pattern %}
-    {% if has_bg %}
+    {%- assign has_bg = page._subpattern | has_pattern_background_color: page._pattern -%}
+    {%- if has_bg -%}
       :root {
         --color-patternbot-interface: {{page._subpattern | get_pattern_interface_color: page._pattern | as_rgb_digit}};
         --color-patternbot-interface-opposite: {{page._subpattern | get_pattern_interface_color_opposite: page._pattern | as_rgb_digit}};
@@ -39,56 +39,56 @@
       html {
         color: {{page._subpattern | get_pattern_interface_color: page._pattern}};
       }
-    {% else %}
+    {%- else -%}
       :root {
         --color-patternbot-interface: {{page._PatternbotConfig.patternbot.colors.background | get_interface_color | as_rgb_digit}};
         --color-patternbot-interface-opposite: {{page._PatternbotConfig.patternbot.colors.background | get_interface_color_opposite | as_rgb_digit}};
         --color-patternbot-interface-background: {{page._PatternbotConfig.patternbot.colors.background | as_hex}};
-        {% if page._PatternbotConfig.patternbot.colors.accent %}
+        {%- if page._PatternbotConfig.patternbot.colors.accent -%}
           --color-patternbot-interface-accent: {{page._PatternbotConfig.patternbot.colors.accent | as_hex}};
-        {% else %}
-          {% if page._PatternbotData.css.theme.colors.primary %}
+        {%- else -%}
+          {%- if page._PatternbotData.css.theme.colors.primary -%}
             --color-patternbot-interface-accent: {{page._PatternbotData.css.theme.colors.primary[0].hex}};
-          {% else %}
+          {%- else -%}
             --color-patternbot-interface-accent: {{page._PatternbotConfig.patternbot.colors.background | get_interface_color | as_hex}};
-          {% endif %}
-        {% endif %}
+          {%- endif -%}
+        {%- endif -%}
       }
       html {
         color: {{page._PatternbotConfig.patternbot.colors.background | get_interface_color}};
       }
-    {% endif %}
-    {% if page._PatternbotData.css.theme.fonts.primary.css_name %}
+    {%- endif -%}
+    {%- if page._PatternbotData.css.theme.fonts.primary.css_name -%}
       :root {
         --font-patternbot-primary: {{page._PatternbotData.css.theme.fonts.primary.css_name}}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
       }
       html {
         font-family: {{page._PatternbotData.css.theme.fonts.primary.css_name}}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
       }
-    {% endif %}
-    {% if page._PatternbotData.css.theme.fonts.secondary.css_name %}
+    {%- endif -%}
+    {%- if page._PatternbotData.css.theme.fonts.secondary.css_name -%}
       :root {
         --font-patternbot-secondary: {{page._PatternbotData.css.theme.fonts.secondary.css_name}}, var(--font-patternbot-primary), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
       }
-    {% endif %}
+    {%- endif -%}
   </style>
 
 
-  {% if page._PatternbotConfig.patternbot.font_url %}
+  {%- if page._PatternbotConfig.patternbot.font_url -%}
     <link href="{{page._PatternbotConfig.patternbot.font_url}}" rel="stylesheet">
-  {% endif %}
+  {%- endif -%}
 </head>
-<body>
+<body{% if page._subpattern_data.padding %} style="padding: {{page._subpattern_data.padding}};"{% endif %}>
 
-  {% include patternbot_icons.html %}
+  {%- include patternbot_icons.html -%}
 
-  <div id="patternbot-pattern-include">
+  <div id="patternbot-pattern-include"{% if page._subpattern_data.width %} style="max-width: {{page._subpattern_data.width}}; margin: 0 auto;"{% endif %}>
     {{content}}
   </div>
 
   <script src="{{site.baseurl}}/assets/_patternbot/vendor/iframe-resizer-content-window.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
   <script src="{{site.baseurl}}/assets/_patternbot/vendor/clipboard.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
-  {% include patternbot_pattern_copy_script.html %}
+  {%- include patternbot_pattern_copy_script.html -%}
 
 </body>
 </html>

data/_layouts/patternbot_pattern_lib.html

@@ -168,26 +168,19 @@
               </a>
             </li>
           {% endunless %}
-          {% for pattern in page._PatternbotData.patterns.user %}
-            {% assign pattern_data = pattern[1] %}
-            {% unless pattern.config.hide_nav %}
-              <li role="presentation">
-                <a class="gutter pad-t-1-4 pad-b-1-4 block" role="tab" aria-controls="{{pattern_data.name}}" href="#{{pattern_data.name}}">
-                  <div class="relative">
-                    <span>{% if pattern_data.config.title %}{{pattern_data.config.title}}{% else %}{{pattern[0] | as_title}}{% endif %}</span>
-                    <i class="icon i-18 absolute pin-cr">
-                      <svg><use xlink:href="#icon-active"></use></svg>
-                    </i>
-                  </div>
-                </a>
-              </li>
-            {% endunless %}
+          {% for pattern_name in page._PatternbotData.patterns_order %}
+            {% assign pattern_data = page._PatternbotData.patterns.user[pattern_name] %}
+            <li role="presentation">
+              <a class="gutter pad-t-1-4 pad-b-1-4 block" role="tab" aria-controls="{{pattern_data.name}}" href="#{{pattern_data.name}}">
+                <div class="relative">
+                  <span>{% if pattern_data.config.title %}{{pattern_data.config.title}}{% else %}{{pattern_name | as_title}}{% endif %}</span>
+                  <i class="icon i-18 absolute pin-cr">
+                    <svg><use xlink:href="#icon-active"></use></svg>
+                  </i>
+                </div>
+              </a>
+            </li>
           {% endfor %}
-          <li class="pad-t-1-2" role="presentation">
-            <button class="nav-show-all gutter pad-t-1-4 pad-b-1-4 block kilo" id="patternbot-nav-show-all" aria-pressed="false" title="Show all patterns" aria-label="Show all patterns">
-              <span class="nav-show-all-wrap relative block">Show all</span>
-            </button>
-          </li>
         </ul>
       </nav>
       {% if page._PatternbotData.pages %}

data/_layouts/patternbot_pattern_user.html

@@ -1,36 +1,44 @@
 <!DOCTYPE html>
 <html lang="en-ca">
 <head>
-  <meta charset="utf-8">
-  <title>{{page.title}}</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  {% if page._PatternbotData.css.main %}
-    <link href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.css.source}}/{{page._PatternbotConfig.patternbot.css.main}}?v={{site.time | date:'%s'}}" rel="stylesheet">
-  {% endif %}
-  {% if page._PatternbotConfig.patternbot.font_url %}
-    <link href="{{page._PatternbotConfig.patternbot.font_url}}" rel="stylesheet">
-  {% endif %}
-  {% if page._subpattern_data.background %}
-    <style>
-      html {
-        background-color: {{page._subpattern_data.background | as_hex}};
-      }
-    </style>
-  {% endif %}
+<meta charset="utf-8">
+<title>{{page.title}}</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+{%- if page._PatternbotData.css.main -%}
+<link href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.css.source}}/{{page._PatternbotConfig.patternbot.css.main}}?v={{site.time | date:'%s'}}" rel="stylesheet">
+{% endif %}
+{%- if page._PatternbotConfig.patternbot.font_url -%}
+<link href="{{page._PatternbotConfig.patternbot.font_url}}" rel="stylesheet">
+{% endif %}
+{%- if page._subpattern_data.background -%}
+<style>
+  html {
+    background-color: {{page._subpattern_data.background | as_hex}};
+  }
+</style>
+{% endif %}
 </head>
-<body>
+<body{% if page._subpattern_data.padding %} style="padding: {{page._subpattern_data.padding}};"{% endif %}>
 
-  <div id="patternbot-pattern-include">
-    {{content}}
-  </div>
+<div id="patternbot-pattern-include"{% if page._subpattern_data.width %} style="max-width: {{page._subpattern_data.width}}; margin: 0 auto;"{% endif %}>
+<!--
+  YOUR CODE STARTS HERE
+  #####################
+-->
 
-  <script src="{{site.baseurl}}/assets/_patternbot/vendor/iframe-resizer-content-window.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
-  <script src="{{site.baseurl}}/assets/_patternbot/vendor/clipboard.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
-  {% include patternbot_pattern_copy_script.html %}
+{{content}}
 
-  {% if page._PatternbotData.js.main %}
-    <script src="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.js.source}}/{{page._PatternbotConfig.patternbot.js.main}}?v={{site.time | date:'%s'}}"></script>
-  {% endif %}
+<!--
+  #####################
+  END OF YOUR CODE
+-->
+</div>
+
+<script src="{{site.baseurl}}/assets/_patternbot/vendor/iframe-resizer-content-window.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
+
+{%- if page._PatternbotData.js.main %}
+<script src="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.js.source}}/{{page._PatternbotConfig.patternbot.js.main}}?v={{site.time | date:'%s'}}"></script>
+{%- endif %}
 
 </body>
 </html>

data/_patterns/brand/colors.html

@@ -11,6 +11,11 @@
     {% include patternbot_pattern_brand_color_swatches.html style="large" title="Secondary" key="secondary" colors=page._PatternbotData.css.theme.colors.secondary extra_class="patternbot-color-swatches-secondary" show_hr=show_hr %}
   {% endunless %}
 
+  {% unless page._PatternbotData.css.theme.colors.tertiary == empty %}
+    {% assign show_hr = true %}
+    {% include patternbot_pattern_brand_color_swatches.html style="small" title="Tertiary" key="tertiary" colors=page._PatternbotData.css.theme.colors.tertiary show_hr=show_hr %}
+  {% endunless %}
+
   {% unless page._PatternbotData.css.theme.colors.accent == empty %}
     {% assign show_hr = true %}
     {% include patternbot_pattern_brand_color_swatches.html style="small" title="Accent" key="accent" colors=page._PatternbotData.css.theme.colors.accent show_hr=show_hr %}

data/_patterns/brand/typefaces.html

@@ -11,6 +11,11 @@
     {% include patternbot_pattern_brand_typeface.html title="Secondary" key="secondary" font=page._PatternbotData.css.theme.fonts.secondary preposition="the" show_hr=show_hr %}
   {% endif %}
 
+  {% if page._PatternbotData.css.theme.fonts.tertiary %}
+    {% assign show_hr = true %}
+    {% include patternbot_pattern_brand_typeface.html title="Tertiary" key="tertiary" font=page._PatternbotData.css.theme.fonts.tertiary preposition="the" show_hr=show_hr %}
+  {% endif %}
+
   {% for font in page._PatternbotData.css.theme.fonts.accent %}
     {% assign show_hr = true %}
     {% include patternbot_pattern_brand_typeface.html title="Accent" key="accent" font=font desc=page._PatternbotConfig.patternbot.fonts.accent preposition="an" show_hr=show_hr %}

data/_patterns/grid/config.yml

@@ -10,10 +10,12 @@ description: |
 
 patterns:
   grid-sizes:
+    title: "Grid sizes"
     _popout_button: false
     _resizable: false
     _code: false
   utility-classes:
+    title: "Utility classes"
     description: |
       Mix & match classes for grids and units to make any responsive layout necessary for templates.
     _popout_button: false

data/_patterns/icons/config.yml

@@ -13,7 +13,7 @@ patterns:
     _code: false
     _resizable: false
   icons-with-labels:
-    title: "Icons with Labels"
+    title: "Icons with labels"
     description: |
       Sample code for using SVG icon spritesheets mixed with a text label, using the below classes.
     width: 320
@@ -25,12 +25,14 @@ patterns:
         <span class="icon-label">Icon label</span>
       </a>
   icon-classes:
+    title: "Icon classes"
     description: |
       Classes that can be used on elements & combined to make nicely aligned icons and labels.
     _popout_button: false
     _resizable: false
     _code: false
   icon-sizes:
+    title: "Icon sizes"
     description: |
       Icons sizes available from [Modulifier](https://modulifier.web-dev.tools) & [Typografier](https://typografier.web-dev.tools).
     _popout_button: false

data/_patterns/modules/config.yml

@@ -1,5 +1,4 @@
 _layout: "patternbot_pattern_internal"
-_user_modulifier: true
 _extra_css:
   - 'modules/modules.min.css'
   - 'utilities/utilities.min.css'
@@ -35,6 +34,7 @@ patterns:
         </div>
       </div>
   skip-links:
+    title: "Skip links"
     description: |
       A helpful accessibility feature that should be included immediately within the `<body>` tag on the top of most pages.
     _popout_button: false
@@ -46,6 +46,7 @@ patterns:
         <li><a href="#pause">Pause all animations</a></li>
       </ul>
   utility-classes:
+    title: "Utility classes"
     description: |
       All the different utility classes available from within [Modulifier](++modulifier-settings-url++).
     _popout_button: false

data/_patterns/typography/config.yml

@@ -55,6 +55,7 @@ patterns:
     title: "Typesetting"
     _code: false
   utility-classes:
+    title: "Utility classes"
     _popout_button: false
     _resizable: false
     _code: false

data/_plugins/jekyll_patternbot.rb

@@ -38,6 +38,7 @@ module JekyllPatternbot
   require 'jekyll_patternbot/finders/patterns'
   require 'jekyll_patternbot/finders/sample_pages'
 
+  require 'jekyll_patternbot/processors/patterns_order'
   require 'jekyll_patternbot/processors/brand'
   require 'jekyll_patternbot/processors/modules'
   require 'jekyll_patternbot/processors/icons'

data/_plugins/jekyll_patternbot/finders/patterns.rb

@@ -33,13 +33,25 @@ module JekyllPatternbot
       files
     end
 
+    def normalize_config(config)
+      if config.key? 'patterns'
+        for key, pattern in config['patterns']
+          # puts pattern.inspect
+          if pattern.is_a? Hash and pattern.key? 'width' and pattern['width'].is_a? Numeric
+            pattern['width'] = pattern['width'].to_s + 'px'
+          end
+        end
+      end
+      config
+    end
+
     def pattern_config(patternpath)
       config_data = user_config(patternpath)
       files_config = {
         'patterns' => html_files(patternpath)
       }
       config_data.deep_merge! files_config
-      config_data
+      normalize_config config_data
     end
 
     def patterns_info(source, patterns_names)

data/_plugins/jekyll_patternbot/helpers/pattern.rb

@@ -7,7 +7,11 @@ module JekyllPatternbot
 
     def self.normalize_filename(filename)
       return filename unless filename
-      if Config['permalink'].match? /pretty/ or not Config['permalink'].match? /\:output_ext/
+      output_ext = false
+      if Config['permalink'].match? /\:output_ext/ or Config['permalink'].match? /^(date|ordinal|none)$/
+        output_ext = true
+      end
+      unless output_ext
         if filename.match? /^index/
           if filename.match? /\.html/
             return filename
@@ -18,7 +22,7 @@ module JekyllPatternbot
           return "#{filename.sub(/\.html/, '')}/index.html"
         end
       end
-      unless filename.match? /\.html/
+      unless filename.match? /\.html$/
         return "#{filename}.html"
       end
       filename