diff --git a/CHANGELOG.md b/CHANGELOG.md index 5edde0b6..4bd1da99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Removed ### Fixed +## [4.0.0] - 2021-03-16 +### Changed +- `templates/__common__/_package.json` - bump version of `queso-ui` +- `templates/feature/app/index.html` - changed ad inputs, added comments, set variable for feature data +- `templates/feature/app/templates/macros/processors.html` - added CSS classes to list component, fixed ad component inputs (to allow us to process ads fetched in the ArchieML text) + +### Removed +- Old common `typography.scss` and `prose.html`, feature `index.html`, `main.scss` and `processors.html` files were replaced by the `queso-ui` versions. + ## [3.7.0] - 2021-03-16 ### Changed - `templates/graphic/project.config.js` - Adds new key for adding customization to the parsing step. For now the only one there is one to ignore Apple News for specified files. Adds some placeholder tags to tag our graphics also. (Tags will be included in the graphic metadata.) diff --git a/package-lock.json b/package-lock.json index dc3c6b54..12a72171 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@data-visuals/create", - "version": "3.7.0", + "version": "4.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 8ff58f01..cc6d266b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@data-visuals/create", - "version": "3.7.0", + "version": "4.0.0", "description": "Create graphics and features the Data Visuals way.", "scripts": { "build:docs": "doctoc README.md --github", diff --git a/templates/__common__/_package.json b/templates/__common__/_package.json index 975eddfe..5d963301 100644 --- a/templates/__common__/_package.json +++ b/templates/__common__/_package.json @@ -79,7 +79,7 @@ "dependencies": { "@babel/runtime": "^7.0.0", "@newswire/frames": "^0.3.1", - "@texastribune/queso-ui": "^9.4.2", + "@texastribune/queso-ui": "^10.0.0", "classnames": "^2.2.5", "core-js": "^2.5.7", "d3": "^5.0.0", diff --git a/templates/__common__/app/styles/_typography-queso.scss b/templates/__common__/app/styles/_typography-queso.scss deleted file mode 100644 index fde98380..00000000 --- a/templates/__common__/app/styles/_typography-queso.scss +++ /dev/null @@ -1,75 +0,0 @@ -// Overrides of some queso helpers -// and additional data visuals helpers -.t-headline { - font-size: to-rem(24); - margin-top: 1em; - @include mq($from: s) { - font-size: to-rem(28); - } - @include mq($from: m) { - font-size: to-rem(32); - } -} - -.t-subheader { - font-weight: $font-weight-bold; - font-size: 1.4rem; - line-height: $line-height-subtitle; - margin-top: 1em; - margin-bottom: 1em; - margin: auto; - max-width: 24em; - - @include mq($from: m) { - font-size: 1.6rem; - line-height: 2.2rem; - } -} - -.t-byline { - &__item { - display: block; - margin-bottom: $size-tiny; - line-height: 1.3; - &:last-child { - margin-right: 0; - } - } - @include mq($until: bp-s) { - &__item { - margin-right: 0; - } - } - @include mq($from: bp-s) { - &__item { - display: inline-block; - } - } -} - -// Mirrored from old styles and adapted for queso -// For most forms of body copy. Takes most of its notes from the main site's -// body copy. Typically you'll be applying this to each

tag directly, NOT -// to the body copy's container. This makes it easier to float things around -// individual paragraphs. -.t-copy { - font-size: 1.125rem; - line-height: $line-height-body; - margin-bottom: 1em; // Ensures spacing below the

syncs up with font-size - margin-left: auto; // Centers

tag within max-width - margin-right: auto; // Centers

tag within max-width - margin-top: 1em; // Ensures spacing above the

syncs up with font-size - max-width: 34em; // Controls the measure - - &--subheader { - font-size: 1.4rem; - line-height: $line-height-subtitle; - max-width: 27em; - - @include mq($from: m) { - font-size: 1.6rem; - line-height: 2.2rem; - max-width: 24em; - } - } -} diff --git a/templates/__common__/app/styles/_typography.scss b/templates/__common__/app/styles/_typography.scss index 82d1f1d8..5938da3d 100644 --- a/templates/__common__/app/styles/_typography.scss +++ b/templates/__common__/app/styles/_typography.scss @@ -1,118 +1,58 @@ -.article-header { - margin-bottom: $gutter; -} - -// The article's title. -.article-title { - font-family: $font-serif; +// Overrides of some queso helpers +// and additional data visuals helpers +.t-headline { font-size: to-rem(24); - font-weight: $font-weight-bold; - line-height: $line-height-title; - margin-bottom: 0.625em; - margin-left: auto; - margin-right: auto; margin-top: 1em; - max-width: 20em; - @include mq($from: s) { font-size: to-rem(28); - margin-bottom: 0.25rem; } - @include mq($from: m) { font-size: to-rem(32); } } -.article-byline { - color: $color-grey; - font-family: $font-sans-serif; - font-size: to-rem(14); - letter-spacing: 0.04em; - margin-bottom: 1em; - margin-top: 1em; - text-transform: uppercase; - - a { - @include default-uppercase-link; - } -} - -.article-author { - display: block; +.t-subheader { + font-weight: $font-weight-bold; + font-size: 1.4rem; line-height: $line-height-subtitle; - margin-bottom: $gutter-quarter; - - @include mq($from: s) { - display: inline; - margin-bottom: 0; - margin-right: $gutter; - } -} - -.article-pub-date { - display: block; + max-width: 24em; + margin: auto; + margin-top: 1em; + margin-bottom: 1em; - @include mq($from: s) { - display: inline; + @include mq($from: m) { + font-size: 1.6rem; + line-height: 2.2rem; } } -.article-pub-update-date { - display: block; - margin-top: $gutter-quarter; - - time { - @include mq($until: s) { - display: block; - margin-top: $gutter-quarter; +.t-byline { + &__item { + display: block; + margin-bottom: $size-tiny; + line-height: 1.3; + &:last-child { + margin-right: 0; } - - &:not(:first-child) { - margin-left: .625rem; - - @include mq($until: s) { - margin-left: 0; - } + } + @include mq($until: bp-s) { + &__item { + margin-right: 0; } } -} - -.article-shares { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - margin-bottom: $gutter; - margin-top: $gutter; - margin-left: auto; - margin-right: auto; - max-width: to-rem(300); -} - -.article-shares-button { - display: block; - flex-basis: 0; - flex-grow: 1; - font-size: 1rem; - max-width: 100%; - text-align: center; - - > svg { - vertical-align: bottom; + @include mq($from: bp-s) { + &__item { + display: inline-block; + } } } -.article-shares-button + .article-shares-button { - margin-left: $gutter-half; -} - +// Mirrored from old styles and adapted for queso // For most forms of body copy. Takes most of its notes from the main site's // body copy. Typically you'll be applying this to each

tag directly, NOT // to the body copy's container. This makes it easier to float things around // individual paragraphs. -.copy { - font-family: $font-serif; +.t-copy { font-size: 1.125rem; line-height: $line-height-body; margin-bottom: 1em; // Ensures spacing below the

syncs up with font-size @@ -121,22 +61,15 @@ margin-top: 1em; // Ensures spacing above the

syncs up with font-size max-width: 34em; // Controls the measure - > a { - @include default-link; - } -} - -.article-subheader { - font-weight: $font-weight-bold; - font-size: 1.4rem; - line-height: $line-height-subtitle; - margin-top: 1em; - margin-bottom: 1em; - max-width: 27em; + &--subheader { + font-size: 1.4rem; + line-height: $line-height-subtitle; + max-width: 27em; - @include mq($from: m) { - font-size: 1.6rem; - line-height: 2.2rem; - max-width: 24em; + @include mq($from: m) { + font-size: 1.6rem; + line-height: 2.2rem; + max-width: 24em; + } } } diff --git a/templates/__common__/app/templates/macros/prose-queso.html b/templates/__common__/app/templates/macros/prose-queso.html deleted file mode 100644 index b852b40c..00000000 --- a/templates/__common__/app/templates/macros/prose-queso.html +++ /dev/null @@ -1,11 +0,0 @@ -{% import 'macros/processors-queso.html' as processors %} - -{% macro prose(content, context, data) %} -{% for item in content %} - {% if processors[item.type] %} - {{ processors[item.type](item.value, context, data) }} - {% else %} - {{ processors['raw'](item.value, context, data) }} - {% endif %} -{% endfor %} -{% endmacro %} diff --git a/templates/__common__/config/scripts/parse.js b/templates/__common__/config/scripts/parse.js index f1ba6bb4..c3097f11 100644 --- a/templates/__common__/config/scripts/parse.js +++ b/templates/__common__/config/scripts/parse.js @@ -13,6 +13,7 @@ const paths = require('../paths'); const api = require('../tasks/api'); const images = require('../tasks/images'); const styles = require('../tasks/styles'); +const unusedCSS = require('../tasks/unused-css'); const templates = require('../tasks/templates'); const graphicsMeta = require('../tasks/graphics-meta'); @@ -21,7 +22,11 @@ const cleanTemp = async () => { }; async function runParser() { - const runner = series([parallel([api, images, styles]), templates]); + const runner = series([ + parallel([api, images, styles]), + templates, + unusedCSS, + ]); await runner(); const bs = browserSync.create(); diff --git a/templates/feature/app/index-queso.html b/templates/feature/app/index-queso.html deleted file mode 100644 index bf17c55f..00000000 --- a/templates/feature/app/index-queso.html +++ /dev/null @@ -1,81 +0,0 @@ -{% extends 'base.html' %} -{% from 'macros/prose-queso.html' import prose %} -{% from 'macros/processors-queso.html' import ad %} - -{% set jsPackName = 'main' %} -{% set context = data.text %} -{% set authorComma = joiner() %} - -{% block google_fonts %}{# queso fonts found in CSS #}{% endblock google_fonts %} -{% block css_file %} - -{% endblock css_file %} - -{% block nav %}{% include 'components/navbar.html' %}{% endblock %} - -{% block content_wrap %} -

-
- {% block content %} -
-
-

{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}

- -
- - {% include 'components/share.html' %} -
- - - - {# use 'none' as the value if the ad shoud not have a gray background #} - {# do not put ads inside a container div #} - {{ ad('gray') }} - - {# create another container for more prose if the text needs to be split by an ad #} - - - {{ ad('gray', 'footer') }} - {% endblock content %} -
-
- -{% endblock content_wrap %} - -{% block inline_data %} - -{% endblock inline_data %} diff --git a/templates/feature/app/index.html b/templates/feature/app/index.html index 2f8a277c..f38ab575 100644 --- a/templates/feature/app/index.html +++ b/templates/feature/app/index.html @@ -2,6 +2,7 @@ {% from 'macros/prose.html' import prose %} {% from 'macros/processors.html' import ad %} +{# set pack that provides JS #} {% set jsPackName = 'main' %} {# data.text --> data/text.json #} @@ -12,61 +13,70 @@ {% set authorComma = joiner() %} -{% block content %} -
-
-

{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}

- -
- - {% include 'includes/shares.html' %} -
- -
-
- {{ prose(context.prose, context, featureData) }} -

Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a condimentum nibh. Integer eget feugiat turpis, at vehicula metus. Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est. Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra tincidunt felis.

- -

{{ 'A cool subhead here' | widont }}

- -

Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.

- -

Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.

-
-
- -{# use 'none' as the value if the ad shoud not have a gray background #} -{# do not put ads inside a container div #} -{{ ad('gray') }} - -{# create another container for more prose if the text needs to be split by an ad #} -
-

Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.

- -

Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.

-
- -{{ ad('gray', 'footer') }} - - - -
-{% endblock content %} +{% block google_fonts %}{# queso fonts found in CSS #}{% endblock google_fonts %} +{% block css_file %} + +{% endblock css_file %} + +{% block nav %}{% include 'components/navbar.html' %}{% endblock %} + +{% block content_wrap %} +
+
+ {% block content %} +
+
+

{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}

+ +
+ + {% include 'components/share.html' %} +
+ + + + {# use 'none' as the background if the ad shoud not have a gray background #} + {# use 'header', 'footer' or '' as the type, depending on where the ad is placed #} + {{ ad({background: 'gray', type: ''}) }} + + + + {{ ad({background: 'gray', type: 'footer'}) }} + {% endblock content %} +
+
+ +{% endblock content_wrap %} {% block inline_data %} - - - + + {% block google_fonts %} + + + + + + + + {% endblock google_fonts %} + + {% block css_file %}{% endblock css_file %} {% block head_scripts %} {{ javascriptPack(jsPackName, { mjs: true }) }} {% endblock head_scripts %} diff --git a/templates/graphic/app/templates/macros/processors.html b/templates/graphic/app/templates/macros/processors.html index 5a33ec6b..dcfbe221 100644 --- a/templates/graphic/app/templates/macros/processors.html +++ b/templates/graphic/app/templates/macros/processors.html @@ -5,11 +5,11 @@ {% endmacro %} {% macro text(value, context, data) %} -

{{ value | renderStringWithNunjucks(data) }}

+

{{ value | renderStringWithNunjucks(data) }}

{% endmacro %} {% macro list(value) %} -