@data-visuals/create 6.2.1 → 7.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -20,12 +20,12 @@ A tool for generating the scaffolding needed to create a graphic or feature the
20
20
  ## Getting started
21
21
 
22
22
  ```sh
23
- npx @data-visuals/create feature my-great-project # the project name should be passed in as a slug
23
+ npx @data-visuals/create@latest feature my-great-project # the project name should be passed in as a slug
24
24
  cd feature-my-great-project-YYYY-MM # the four digit year and two digit month
25
25
  npm start
26
26
  ```
27
27
 
28
- > While you can install `@data-visuals/create` globally and use the `data-visuals-create` command, we recommend using the `npx` method instead to ensure you are always using the latest version.
28
+ > While you can install `@data-visuals/create` globally and use the `data-visuals-create` command, we recommend using the `npx` method instead to ensure you are always using the latest version. On `npm` and `npx` versions >= 7.0.0, `@latest` is required to fetch the latest version.
29
29
 
30
30
  ## Table of contents
31
31
 
@@ -75,7 +75,7 @@ npm start
75
75
 
76
76
  ## Installation
77
77
 
78
- While we recommend using the `npx` method, you can also install the tool globally. If you do, replace all instances of `npx @data-visuals/create` you see with `data-visuals-create`.
78
+ While we recommend using the `npx` method, you can also install the tool globally. If you do, replace all instances of `npx @data-visuals/create@latest` you see with `data-visuals-create` after running the global install below.
79
79
 
80
80
  ```sh
81
81
  npm install -g @data-visuals/create
@@ -84,13 +84,13 @@ npm install -g @data-visuals/create
84
84
  ## Usage
85
85
 
86
86
  ```sh
87
- npx @data-visuals/create <project-type> <project-name>
87
+ npx @data-visuals/create@latest <project-type> <project-name>
88
88
  ```
89
89
 
90
90
  Currently there are two project types available — `graphic` and `feature`. The project name should be passed in as a slug, i.e. `my-beautiful-project`.
91
91
 
92
92
  ```sh
93
- npx @data-visuals/create graphic school-funding
93
+ npx @data-visuals/create@latest graphic school-funding
94
94
  ```
95
95
 
96
96
  This will create a directory for you, copy in the files, install the dependencies, and do your first `git commit`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@data-visuals/create",
3
- "version": "6.2.1",
3
+ "version": "7.1.1",
4
4
  "description": "Create graphics and features the Data Visuals way.",
5
5
  "scripts": {
6
6
  "build:docs": "doctoc README.md --github",
@@ -130,8 +130,10 @@
130
130
  font-weight: $font-weight-bold;
131
131
  font-size: 1.4rem;
132
132
  line-height: $line-height-subtitle;
133
- margin-top: 1em;
134
- margin-bottom: 1em;
133
+ margin-bottom: 1em; // Ensures spacing below the <p> syncs up with font-size
134
+ margin-left: auto; // Centers <p> tag within max-width
135
+ margin-right: auto; // Centers <p> tag within max-width
136
+ margin-top: 1em; // Ensures spacing above the <p> syncs up with font-size
135
137
  max-width: 27em;
136
138
 
137
139
  @include mq($from: m) {
@@ -122,7 +122,6 @@ const parseGraphic = async (
122
122
  lastBuildTime,
123
123
  folder,
124
124
  id,
125
- tags,
126
125
  parserOptions,
127
126
  } = config;
128
127
 
@@ -157,6 +156,7 @@ const parseGraphic = async (
157
156
  const altText = await getText({ key: 'alt-text', page });
158
157
  const note = await getText({ key: 'note', page });
159
158
  const source = await getText({ key: 'source', page });
159
+ const tags = await (await getText({ key: 'tags', page })).split(',');
160
160
  let credits = await getText({ key: 'credit', page });
161
161
 
162
162
  // ignore graphics with no title
@@ -228,11 +228,16 @@ const parseGraphic = async (
228
228
  };
229
229
 
230
230
  module.exports = async localURL => {
231
+ const {
232
+ parserOptions,
233
+ } = config;
234
+
231
235
  // find all html pages in project
232
236
  const pages = await glob('**/*.html', {
233
237
  absolute: true,
234
238
  cwd: './.tmp',
235
239
  recursive: true,
240
+ ignore: parserOptions.metadataIgnore,
236
241
  });
237
242
 
238
243
  // spin up headless browser using local chrome
@@ -0,0 +1,67 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
+ <title>The Texas Tribune</title>
8
+ <base target='_parent'>
9
+
10
+ {% if graphicTitle %}
11
+ <meta name="tt-graphic-title" content="{{ graphicTitle }}" />
12
+ {% endif %}
13
+ {% if graphicAltText %}
14
+ <meta name="tt-graphic-alt-text" content="{{ graphicAltText }}" />
15
+ {% endif %}
16
+ {% if graphicCaption %}
17
+ <meta name="tt-graphic-caption" content="{{ graphicCaption }}" />
18
+ {% endif %}
19
+ {% if graphicNote %}
20
+ <meta name="tt-graphic-note" content="{{ graphicNote }}" />
21
+ {% endif %}
22
+ {% if graphicSource %}
23
+ <meta name="tt-graphic-source" content="{{ graphicSource }}" />
24
+ {% endif %}
25
+ {% if graphicCredit %}
26
+ <meta name="tt-graphic-credit" content="{{ graphicCredit }}" />
27
+ {% endif %}
28
+ {% if graphicTags %}
29
+ <meta name="tt-graphic-tags" content="{{ graphicTags or 'subject-politics' }}" />
30
+ {% endif %}
31
+
32
+ <link rel="dns-prefetch" href="https://www.google-analytics.com">
33
+ <link rel="dns-prefetch" href="https://fonts.googleapis.com">
34
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
35
+
36
+ <!-- Start fonts -->
37
+ <script>
38
+ window.WebFontConfig = {
39
+ google: { families: ['Open Sans:300,400,700'] },
40
+ timeout: 10000,
41
+ };
42
+ </script>
43
+ <script async src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
44
+ <!-- End fonts -->
45
+ <link rel="stylesheet" href="{{ static('styles/main.css') }}">
46
+
47
+ {% if jsPackName %}
48
+ {% block head_scripts %}
49
+ {{ javascriptPack(jsPackName, { mjs: true }) }}
50
+ {% endblock head_scripts %}
51
+ {% endif %}
52
+ </head>
53
+ <body>
54
+
55
+ {% block content %}{% endblock content %}
56
+
57
+ {% block inline_data %}{% endblock inline_data %}
58
+
59
+ {% include 'includes/nomodule-shim.html' %}
60
+
61
+ {% if jsPackName %}
62
+ {% block scripts %}
63
+ {{ javascriptPack(jsPackName) }}
64
+ {% endblock scripts %}
65
+ {% endif %}
66
+ </body>
67
+ </html>
@@ -0,0 +1,47 @@
1
+ {# Template for any scripted graphics, i.e. D3 charts #}
2
+ {% extends 'base-graphic.html' %}
3
+ {% from 'macros/prose.html' import prose %}
4
+
5
+ {# set pack that provides JS #}
6
+ {% set jsPackName = 'main' %}
7
+
8
+ {# data.text --> data/text.json #}
9
+ {% set context = data.text %}
10
+
11
+ {# data.data --> data/data.json #}
12
+ {% set graphicData = data.data %}
13
+
14
+ {# graphicAltText is used by the CMS for accessibility #}
15
+ {% set graphicAltText = context.alttext %}
16
+
17
+ {# graphics will be surfaced in the graphics plugin under these tags #}
18
+ {% set graphicTags = context.guten_tags %}
19
+
20
+ {% block content %}
21
+ {# data-graphic signifies that this can be embedded in the CMS #}
22
+ <div class="app" data-graphic>
23
+ {# data-title is used to grab the title in the CMS #}
24
+ <h1 class="graphic-title" data-title>{{ context.headline | widont }}</h1>
25
+ {# data-caption is used to grab the caption in the CMS #}
26
+ <span data-caption>{{ prose(context.graphic_prose, context, graphicData) }}</span>
27
+
28
+ {# container that JS is attached to #}
29
+ <div id="graphic" class="graphic"></div>
30
+
31
+ {# data-source, data-credit, and data-note are also used in the CMS #}
32
+ <ul class="graphic-footer">
33
+ {% if context.note %}<li data-note>Note: {{ context.note }}</li>{% endif %}
34
+ {% if context.source %}<li data-source>Source: {{ context.source }}</li>{% endif %}
35
+ {% if context.credit %}<li data-credit>Credit: {{ context.credit }}</li>{% endif %}
36
+ </ul>
37
+ </div>
38
+ {% endblock content %}
39
+
40
+ {# set data/data.json as a window variable #}
41
+ {% block inline_data %}
42
+ {% if data.data %}
43
+ <script>
44
+ window.DATA = {{ data.data|dump }};
45
+ </script>
46
+ {% endif %}
47
+ {% endblock inline_data %}
@@ -106,4 +106,27 @@ module.exports = {
106
106
  *
107
107
  */
108
108
  customFilters: {},
109
+ /**
110
+ * Where custom settings for parsing graphics can be added.
111
+ *
112
+ * metadataIgnore
113
+ * Add paths here that you do not want parsed for metadata and shown
114
+ * in the graphics plugin in the CMS.
115
+ *
116
+ * appleNewsIgnore
117
+ * Some graphics are too dynamic to be accurately captured in a screenshot.
118
+ * Those graphics shouldn't be considered for platforms like Apple News.
119
+ *
120
+ * Paths for metadataIgnore and appleNewsIgnore are relative to the build folders.
121
+ * Example:
122
+ * appleNewsIgnore: [
123
+ * 'complex-graphic-folder/index.html',
124
+ * 'some-other-folder',
125
+ * ],
126
+ *
127
+ */
128
+ parserOptions: {
129
+ metadataIgnore: [],
130
+ appleNewsIgnore: [],
131
+ },
109
132
  };
@@ -14,31 +14,25 @@
14
14
  {# graphicAltText is used by the CMS for accessibility #}
15
15
  {% set graphicAltText = context.alttext %}
16
16
 
17
- {% block content %}
18
- {# data-graphic signifies that this can be embedded in the CMS #}
19
- <div class="app" data-graphic>
20
- {# data-title is used to grab the title in the CMS #}
21
- <h1 class="graphic-title" data-title>{{ context.headline | widont }}</h1>
22
- {# data-caption is used to grab the caption in the CMS #}
23
- <span data-caption>{{ prose(context.prose, context, graphicData) }}</span>
24
-
25
- {# container that JS is attached to #}
26
- <div id="graphic" class="graphic"></div>
17
+ {# graphics will be surfaced in the graphics plugin under these tags #}
18
+ {% set graphicTags = context.guten_tags %}
27
19
 
28
- {# data-source, data-credit, and data-note are also used in the CMS #}
29
- <ul class="graphic-footer">
30
- {% if context.note %}<li data-note>Note: {{ context.note }}</li>{% endif %}
31
- {% if context.source %}<li data-source>Source: {{ context.source }}</li>{% endif %}
32
- {% if context.credit %}<li data-credit>Credit: {{ context.credit }}</li>{% endif %}
33
- </ul>
20
+ {% block content %}
21
+ <div class="app">
22
+ <h1 class="article-subheader">Welcome to The Texas Tribune's data visuals graphics kit!</h1>
23
+ <p class="copy">
24
+ Start creating graphics by copying <span class="font-weight-bold">graphic.html</span> and/or
25
+ <span class="font-weight-bold">graphic-static.html</span>, both located in the <span class="font-weight-bold">templates/</span>
26
+ folder, and pasting it in the <span class="font-weight-bold">app/</span> folder at the top level. You can make as many graphics as you need.
27
+ Feel free to rename the files!
28
+ </p>
29
+ <p class="copy"><span class="font-weight-bold">graphic.html</span> is set up for graphics involving JavaScript</p>
30
+ <p class="copy"><span class="font-weight-bold">graphic-static.html</span> is set up for static graphics (HTML tables, Adobe Illustrator graphics)</p>
31
+ <p class="copy">All of our graphics are set up to fetch text and other attributes from a Google Doc.
32
+ <a href="https://docs.google.com/document/d/1BKQy7bsteC7Od5Jgzt_PX8KRe0pD2Ba1LXEj02uWf4I/edit">Here's the template for that</a>.
33
+ You'll need to make a copy of this template and swap out the template's file ID with your copy's file ID in <span class="font-weight-bold">project.config.js</span>,
34
+ in the <span class="font-weight-bold">files</span> property. Then, run <span class="font-weight-bold">npm run data:fetch</span> and you'll see your text in the templates.</p>
35
+ <p class="copy">For more documentation on the kit, check out the <a href="https://github.com/texastribune/data-visuals-create">README</a> and our
36
+ <a href="https://github.com/texastribune/data-visuals-guides/blob/master/kit-setup.md#creating-a-feature-story">kit setup guide</a>.</p>
34
37
  </div>
35
38
  {% endblock content %}
36
-
37
- {# set data/data.json as a window variable #}
38
- {% block inline_data %}
39
- {% if data.data %}
40
- <script>
41
- window.DATA = {{ data.data|dump }};
42
- </script>
43
- {% endif %}
44
- {% endblock inline_data %}
@@ -25,6 +25,9 @@
25
25
  {% if graphicCredit %}
26
26
  <meta name="tt-graphic-credit" content="{{ graphicCredit }}" />
27
27
  {% endif %}
28
+ {% if graphicTags %}
29
+ <meta name="tt-graphic-tags" content="{{ graphicTags or 'subject-politics' }}" />
30
+ {% endif %}
28
31
 
29
32
  <link rel="dns-prefetch" href="https://www.google-analytics.com">
30
33
  <link rel="dns-prefetch" href="https://fonts.googleapis.com">
@@ -40,9 +43,12 @@
40
43
  <script async src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
41
44
  <!-- End fonts -->
42
45
  <link rel="stylesheet" href="{{ static('styles/main.css') }}">
43
- {% block head_scripts %}
44
- {{ javascriptPack(jsPackName, { mjs: true }) }}
45
- {% endblock head_scripts %}
46
+
47
+ {% if jsPackName %}
48
+ {% block head_scripts %}
49
+ {{ javascriptPack(jsPackName, { mjs: true }) }}
50
+ {% endblock head_scripts %}
51
+ {% endif %}
46
52
  </head>
47
53
  <body>
48
54
 
@@ -52,8 +58,10 @@
52
58
 
53
59
  {% include 'includes/nomodule-shim.html' %}
54
60
 
55
- {% block scripts %}
56
- {{ javascriptPack(jsPackName) }}
57
- {% endblock scripts %}
61
+ {% if jsPackName %}
62
+ {% block scripts %}
63
+ {{ javascriptPack(jsPackName) }}
64
+ {% endblock scripts %}
65
+ {% endif %}
58
66
  </body>
59
67
  </html>
@@ -20,6 +20,8 @@
20
20
  {% set graphicNote = context.note %}
21
21
  {% set graphicSource = context.source %}
22
22
  {% set graphicCredit = context.credit %}
23
+ {# graphics will be surfaced in the graphics plugin under these tags #}
24
+ {% set graphicTags = context.guten_tags %}
23
25
 
24
26
  {% block content %}
25
27
  {# data-graphic signifies that this can be embedded in the CMS #}
@@ -0,0 +1,44 @@
1
+ {# Template for any scripted graphics, i.e. D3 charts #}
2
+ {% extends 'base.html' %}
3
+ {% from 'macros/prose.html' import prose %}
4
+
5
+ {# set pack that provides JS #}
6
+ {% set jsPackName = 'main' %}
7
+
8
+ {# data.text --> data/text.json #}
9
+ {% set context = data.text %}
10
+
11
+ {# data.data --> data/data.json #}
12
+ {% set graphicData = data.data %}
13
+
14
+ {# graphicAltText is used by the CMS for accessibility #}
15
+ {% set graphicAltText = context.alttext %}
16
+
17
+ {% block content %}
18
+ {# data-graphic signifies that this can be embedded in the CMS #}
19
+ <div class="app" data-graphic>
20
+ {# data-title is used to grab the title in the CMS #}
21
+ <h1 class="graphic-title" data-title>{{ context.headline | widont }}</h1>
22
+ {# data-caption is used to grab the caption in the CMS #}
23
+ <span data-caption>{{ prose(context.prose, context, graphicData) }}</span>
24
+
25
+ {# container that JS is attached to #}
26
+ <div id="graphic" class="graphic"></div>
27
+
28
+ {# data-source, data-credit, and data-note are also used in the CMS #}
29
+ <ul class="graphic-footer">
30
+ {% if context.note %}<li data-note>Note: {{ context.note }}</li>{% endif %}
31
+ {% if context.source %}<li data-source>Source: {{ context.source }}</li>{% endif %}
32
+ {% if context.credit %}<li data-credit>Credit: {{ context.credit }}</li>{% endif %}
33
+ </ul>
34
+ </div>
35
+ {% endblock content %}
36
+
37
+ {# set data/data.json as a window variable #}
38
+ {% block inline_data %}
39
+ {% if data.data %}
40
+ <script>
41
+ window.DATA = {{ data.data|dump }};
42
+ </script>
43
+ {% endif %}
44
+ {% endblock inline_data %}
@@ -72,6 +72,7 @@ Project config keys output in `manifest.json`
72
72
  - `id`
73
73
  - `tags`
74
74
  - `parserOptions`
75
+ - `metadataIgnore` - This is an array of files or folders that should not be parsed for metadata and displayed in the CMS graphics plugin. For example, any graphics or features created for testing but are not publishable should be added here.
75
76
  - `appleNewsIgnore` - This is an array of files or folders that should be flagged in the CMS as not compatible with Apple News. Use this for graphics that are too dynamic to be accurately captured in a screenshot.
76
77
 
77
78
  ### Sample `manifest.json` output
@@ -64,13 +64,6 @@ module.exports = {
64
64
  name: 'data',
65
65
  },
66
66
  ],
67
- /**
68
- * Tags that will be plugged in via the graphics plugin.
69
- * This an array of each tag's slug, not the tag names.
70
- * Refer to https://www.texastribune.org/admin/guten_tags/tag/ for our guten tag slugs.
71
- * YOU CAN CHANGE THESE.
72
- */
73
- tags: ['subject-politics'],
74
67
  /**
75
68
  * The dataMutators option makes it possible to modify what's returned by
76
69
  * the data fetchers. This is a good place to restructure the raw data, or
@@ -116,11 +109,15 @@ module.exports = {
116
109
  /**
117
110
  * Where custom settings for parsing graphics can be added.
118
111
  *
112
+ * metadataIgnore
113
+ * Add paths here that you do not want parsed for metadata and shown
114
+ * in the graphics plugin in the CMS.
115
+ *
119
116
  * appleNewsIgnore
120
117
  * Some graphics are too dynamic to be accurately captured in a screenshot.
121
118
  * Those graphics shouldn't be considered for platforms like Apple News.
122
- * Paths are relative to the build folders.
123
119
  *
120
+ * Paths for metadataIgnore and appleNewsIgnore are relative to the build folders.
124
121
  * Example:
125
122
  * appleNewsIgnore: [
126
123
  * 'complex-graphic-folder/index.html',
@@ -129,6 +126,7 @@ module.exports = {
129
126
  *
130
127
  */
131
128
  parserOptions: {
129
+ metadataIgnore: [],
132
130
  appleNewsIgnore: [],
133
131
  },
134
132
  };