@data-visuals/create 7.1.0 → 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/package.json +1 -1
- package/templates/__common__/config/tasks/graphics-meta.js +1 -1
- package/templates/feature/app/templates/base-graphic.html +67 -0
- package/templates/feature/app/templates/graphic.html +47 -0
- package/templates/feature/project.config.js +23 -0
- package/templates/graphic/graphics-meta.md +1 -0
- package/templates/graphic/project.config.js +6 -2
package/package.json
CHANGED
|
@@ -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
|
};
|
|
@@ -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
|
|
@@ -109,11 +109,15 @@ module.exports = {
|
|
|
109
109
|
/**
|
|
110
110
|
* Where custom settings for parsing graphics can be added.
|
|
111
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
|
+
*
|
|
112
116
|
* appleNewsIgnore
|
|
113
117
|
* Some graphics are too dynamic to be accurately captured in a screenshot.
|
|
114
118
|
* Those graphics shouldn't be considered for platforms like Apple News.
|
|
115
|
-
* Paths are relative to the build folders.
|
|
116
119
|
*
|
|
120
|
+
* Paths for metadataIgnore and appleNewsIgnore are relative to the build folders.
|
|
117
121
|
* Example:
|
|
118
122
|
* appleNewsIgnore: [
|
|
119
123
|
* 'complex-graphic-folder/index.html',
|
|
@@ -122,7 +126,7 @@ module.exports = {
|
|
|
122
126
|
*
|
|
123
127
|
*/
|
|
124
128
|
parserOptions: {
|
|
125
|
-
|
|
129
|
+
metadataIgnore: [],
|
|
126
130
|
appleNewsIgnore: [],
|
|
127
131
|
},
|
|
128
132
|
};
|