From dd70d3b5b16af6d3f27ec5fe6747e80c33b0a897 Mon Sep 17 00:00:00 2001 From: Miriam Suzanne Date: Mon, 12 Dec 2016 16:46:24 -0700 Subject: [PATCH 1/2] Add font-variant override "show" argument --- scss/config/_fonts.scss | 2 +- templates/item/preview.macros.j2 | 88 ++++++++++++++++++++------------ 2 files changed, 57 insertions(+), 33 deletions(-) diff --git a/scss/config/_fonts.scss b/scss/config/_fonts.scss index 2e163c2d..6154f701 100644 --- a/scss/config/_fonts.scss +++ b/scss/config/_fonts.scss @@ -63,7 +63,7 @@ $sans-font: ( // Code Font // --------- /// A readable monospace font for code previews. -/// @preview font-specimen; key: code +/// @preview font-specimen; key: code; show: regular, bold, bold italic /// @group webfonts /// @link http://oddbird.net/accoutrement-type/sassdoc/ /// Accoutrement Type diff --git a/templates/item/preview.macros.j2 b/templates/item/preview.macros.j2 index 5af2c06c..f887e3a3 100644 --- a/templates/item/preview.macros.j2 +++ b/templates/item/preview.macros.j2 @@ -1,6 +1,15 @@ {% import 'utility.macros.j2' as utility %} +{% set weight_options = [ + '100', '200', '300', '400', '500', '600', '700', '800', '900', 'bold' +] %} + +{% set style_options = [ + 'italic', 'oblique' +] %} + + {% macro show_previews(data, name, args) %} {% if args %} {% set type = args.type %} @@ -9,7 +18,7 @@ {% if type == 'color-palette' %} {{ color_palette(data[key]) }} {% elif type == 'font-specimen' %} - {{ font_specimen(key, data[key]) }} + {{ font_specimen(key, data[key], args) }} {% elif type == 'ratios' %} {{ ratios(data[key], args) }} {% elif type == 'sizes' %} @@ -42,7 +51,7 @@ {% endmacro %} -{% macro font_specimen(name, data) %} +{% macro font_specimen(name, data, args=none) %}

{{ utility.link_if( @@ -61,40 +70,55 @@ {% endfor %}

- {% set weight_options = [ - '100', '200', '300', '400', '500', '600', '700', '800', '900', 'bold' - ] %} - {% set style_options = [ - 'italic', 'oblique' - ] %} - - {% for options, value in data %} - {% set options = options|split(' ') %} - {% set variant = options[0] %} - {% set file = value if (variant in weight_options or variant in style_options or variant == 'regular') else none %} - {% set weight = 'normal' %} - {% set style = 'normal' %} - - {% for value in options %} - {% set weight = value if (value in weight_options) else weight %} - {% set style = value if (value in style_options) else style %} + {% set family = [data.name, data.stack]|join(', ') %} + + {% if args.show %} + {% for options in args.show|split(', ') %} + {{ specimen_variant( + family=family, + options=options|split(' ') + ) }} {% endfor %} + {% else %} + {% for options, value in data %} + {% set options = options|split(' ') %} + {% set variant = options[0] %} + {% set file = value if (variant in weight_options or variant in style_options or variant == 'regular') else none %} + {% if file %} + {{ specimen_variant( + family=family, + options=options, + file=file + ) }} + {% endif %} + {% endfor %} + {% endif %} + +{% endmacro %} + +{% macro specimen_variant(family, options, file=none) %} + {% set weight = 'normal' %} + {% set style = 'normal' %} + + {% for value in options %} + {% set weight = value if (value in weight_options) else weight %} + {% set style = value if (value in style_options) else style %} + {% endfor %} + +
+

+ {% for option in options %} + {{ option }} + {% endfor %} {% if file %} -
-

- {% for option in options %} - {{ option }} - {% endfor %} - ({{ file }}) -

-
-
Aa
-
{{ lorem('alpha') }}
-
-
+ ({{ file }}) {% endif %} - {% endfor %} +

+
+
Aa
+
{{ lorem('alpha') }}
+
{% endmacro %} From e55166a40deafdf75f90d8834d4a5c2afa2f3a52 Mon Sep 17 00:00:00 2001 From: Miriam Suzanne Date: Tue, 13 Dec 2016 14:39:12 -0700 Subject: [PATCH 2/2] Document font-specimen macros and update changelog --- README.md | 8 ++ templates/item/preview.macros.j2 | 148 +++++++++++++++++++++++-------- 2 files changed, 117 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index 477576f1..207c4a0d 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,14 @@ for more info. Releases -------- +### 0.5.1: UNRELEASED + +- Add optional `show` argument for font-specimen previews — + `@preview font-specimen; show: regular, bold, bold italic` — + allowing you to override what variants are displayed + in the specimen. + + ### 0.5.0: 2016-12-09 - Add table output for `@property` annotation, diff --git a/templates/item/preview.macros.j2 b/templates/item/preview.macros.j2 index f887e3a3..5b28b441 100644 --- a/templates/item/preview.macros.j2 +++ b/templates/item/preview.macros.j2 @@ -1,15 +1,11 @@ {% import 'utility.macros.j2' as utility %} -{% set weight_options = [ - '100', '200', '300', '400', '500', '600', '700', '800', '900', 'bold' -] %} - -{% set style_options = [ - 'italic', 'oblique' -] %} - - +{# + Show Previews + ------------- + Call the requested previews with the appropriate JSON data. +#} {% macro show_previews(data, name, args) %} {% if args %} {% set type = args.type %} @@ -29,6 +25,11 @@ {% endmacro %} +{# + Color Palette + ------------- + Display color palettes based on JSON map output. +#} {% macro color_palette(data) %}
{% for name, value in data %} @@ -51,6 +52,24 @@ {% endmacro %} +{# + Font Specimen + ------------- + Display all font-family specimens, + including multiple variants. + + @group font-specimen + + @prop {String} name - + Title for the font-family being displayed. + @prop {Dict} data - + All the available data on a given font, + derived from the Sass JSON export. + @prop {Dict} args - + Arbitrary arguments passes along + in the font-specimen call + (currently only `show` and `key` are supported). +#} {% macro font_specimen(name, data, args=none) %}

@@ -73,56 +92,107 @@ {% set family = [data.name, data.stack]|join(', ') %} {% if args.show %} - {% for options in args.show|split(', ') %} + {% for option in args.show|split(', ') %} {{ specimen_variant( family=family, - options=options|split(' ') + option=option, + data=data ) }} {% endfor %} {% else %} - {% for options, value in data %} - {% set options = options|split(' ') %} - {% set variant = options[0] %} - {% set file = value if (variant in weight_options or variant in style_options or variant == 'regular') else none %} - {% if file %} - {{ specimen_variant( - family=family, - options=options, - file=file - ) }} - {% endif %} + {% for option, path in data %} + {{ specimen_variant( + family=family, + option=option, + path=path + ) }} {% endfor %} {% endif %}

{% endmacro %} -{% macro specimen_variant(family, options, file=none) %} +{# + Specimen Variant + ---------------- + Display a single specimen variant. + + @group font-specimen + + @prop {String} family - + A CSS-ready value for font-family, + combining both the font name, and fallback font-stack. + @prop {String} option - + The name of a font variant, + e.g. `bold` or `italic` or `700 italic`. + @prop {Dict} data [none] - + Optional font-data for file-path lookup. + @prop {String} path [none] - + Optional file-path data, + if it is already attached to the option. +#} +{% macro specimen_variant(family, option, data=none, path=none) %} + {# Local variables for parsing variants in the data #} + {% set weight_options = [ + '100', '200', '300', '400', '500', '600', '700', '800', '900', 'bold' + ] %} + + {% set style_options = [ + 'italic', 'oblique' + ] %} + + {% set other_options = [ + 'normal', 'regular' + ] %} + + {# Initialize variants #} {% set weight = 'normal' %} {% set style = 'normal' %} - {% for value in options %} - {% set weight = value if (value in weight_options) else weight %} - {% set style = value if (value in style_options) else style %} - {% endfor %} + {# Split the option into variants, and find files where available #} + {% set split_option = option|split(' ') %} + {% set variant_check = split_option[0] %} + {% set is_variant = true if (variant_check in weight_options or variant_check in style_options or variant_check in other_options) else false %} -
-

- {% for option in options %} + {# If we have an actual variant, display specimen #} + {% if is_variant %} + {% set path = data.option if data.option else path %} + + {% for value in split_option %} + {% set weight = value if (value in weight_options) else weight %} + {% set style = value if (value in style_options) else style %} + {% endfor %} + +
+

{{ option }} - {% endfor %} - {% if file %} - ({{ file }}) - {% endif %} -

-
-
Aa
-
{{ lorem('alpha') }}
+ + {% if path %} + ({{ path }}) + {% endif %} +

+
+
Aa
+
{{ lorem('alpha') }}
+
-
+ {% endif %} {% endmacro %} +{# + Lorem + ----- + Display Lorem Ipsum text for font specimens. + + @group font-specimen + + @prop {'title' | 'body' | 'alpha'} length - + They type of Lorem Ipsum to display: + either title-length, paragraph-length, + or a list of standard characters + (uppercase, lowercase, numbers, and punctuation). +#} {% macro lorem(length) %} {% if length == 'title' %}