@data-visuals/create 7.2.0 → 7.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-visuals/create",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "Create graphics and features the Data Visuals way.",
   "scripts": {
     "build:docs": "doctoc README.md --github",

package/templates/__common__/_package.json

@@ -17,7 +17,7 @@
     "workspace:push": "node ./utils/deployment/push-workspace.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.17.8",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-react-jsx": "^7.0.0",
@@ -28,7 +28,7 @@
     "ansi-colors": "^3.2.3",
     "archieml": "^0.4.1",
     "assets-webpack-plugin": "^6.1.2",
-    "autoprefixer": "^9.0.2",
+    "autoprefixer": "^10.4.2",
     "aws-sdk": "^2.372.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.0",
@@ -50,7 +50,7 @@
     "fast-glob": "^2.2.2",
     "fs-extra": "^7.0.0",
     "glob-watcher": "^5.0.3",
-    "googleapis": "^83.0.0",
+    "googleapis": "^99.0.0",
     "html-minifier": "^3.5.21",
     "imagemin": "^7.0.0",
     "imagemin-gifsicle": "^7.0.0",
@@ -60,7 +60,7 @@
     "journalize": "^2.1.0",
     "mime-types": "^2.1.17",
     "nunjucks": "^3.0.1",
-    "postcss": "^7.0.2",
+    "postcss": "^8.4.12",
     "postcss-flexbugs-fixes": "^4.1.0",
     "prettier": "^1.12.1",
     "puppeteer": "^5.5.0",

package/templates/__common__/app/templates/macros/prose.html

@@ -1,9 +1,9 @@
 {% import 'macros/processors.html' as processors %}
 
-{% macro prose(content, context, data) %}
+{% macro prose(content, context, data, type) %}
 {% for item in content %}
   {% if processors[item.type] %}
-    {{ processors[item.type](item.value, context, data) }}
+    {{ processors[item.type](item.value, context, data, type) }}
   {% else %}
     {{ processors['raw'](item.value, context, data) }}
   {% endif %}

package/templates/__common__/utils/deployment/deploy.js

@@ -35,31 +35,4 @@ ${colors.blue.underline(mainPath)} (This has been copied to your clipboard.)
 Did you run ${colors.yellow(
     `npm run data:fetch`
   )} before deploying to get the latest data?`);
-
-  if (projectType === 'feature') {
-    console.log(`
-If you are deploying a feature, check Facebook/Twitter/other social platforms to make sure the 
-share image shows up.`);
-  }
-
-  if (projectType === 'graphic') {
-    console.log(`
-If you are deploying a graphic in a CMS story, there are a few steps. First,
-add this in the Content section of the Raw Plugin:
-${colors.yellow(
-  `<div class="dv201808-graphic dv201808-graphic--centered dv201808-graphic--centered-narrow" data-frame-src="${mainPath}" data-frame-sandbox="allow-scripts allow-same-origin allow-top-navigation-by-user-activation allow-top-navigation"></div>`
-)}`);
-
-    console.log(`
-Next, add the style code snippet found in ${colors.yellow(
-      'app/styles/raw-plugin-styles.html'
-    )} to the CSS content section of the Raw Plugin`);
-
-    console.log(`
-Then, add this line to the JavaScript content section of the Raw Plugin:
-${colors.yellow(
-  '<script src="https://cdn.texastribune.org/lib/@newswire/frames@0.3.1/index.umd.js"></script>'
-)}
-${colors.yellow('<script>newswireFrames.autoInitFrames();</script>')}`);
-  }
 });

package/templates/feature/app/scripts/packs/graphic-embed.js

@@ -0,0 +1,31 @@
+/* eslint-disable no-unused-vars */
+import * as d3 from 'd3';
+import createBase from '../utils/d3-base';
+
+// a reference to the default graphic container, change if needed
+const container = d3.select('#graphic');
+
+// a helper function to clear the container of its contents
+const clearContainer = () => container.html('');
+
+// a helper function to grab the container's width
+const getFrameWidth = () => container.node().offsetWidth;
+
+// import data by getting the window variable, OR by importing the filepath
+// let data = window.DATA;
+// import data from '../../../data/data.json';
+// import data from 'Data/data.json';
+
+/**
+ * This function is called to render a graphic, using d3 or a library of your choice.
+ *
+ * @return {void}
+ */
+export default function renderGraphic() {
+  // pass the recalculated frameWidth to parts of your chart (like an axis) that change with resize!
+  clearContainer();
+  const frameWidth = getFrameWidth();
+  //
+  // rest of your code goes here
+  // use createBase() to create the base of an d3 chart
+}

package/templates/feature/app/scripts/packs/main-embed.js

@@ -0,0 +1,7 @@
+import { frameLoader } from '../embeds/frames';
+import renderGraphic from './graphic-embed';
+
+// included in index.html by default
+// initiates frame so your graphic is wrapped in an AMP-compatible iframe
+// renderGraphic() renders a coded graphic on load and on resize
+frameLoader(renderGraphic);

package/templates/feature/app/templates/{base-graphic.html → base-embed.html}

@@ -22,8 +22,9 @@
   {% if graphicSource %}
     <meta name="tt-graphic-source" content="{{ graphicSource }}" />
   {% endif %}
-
-  <meta name="tt-graphic-credit" content="{{ graphicCredit or 'Texas Tribune Staff'}}" />
+  {% if graphicCredit %}
+    <meta name="tt-graphic-credit" content="{{ graphicCredit }}" />
+  {% endif %}
   <meta name="tt-graphic-tags" content="{{ graphicTags or ['subject-politics'] }}" />
 
   <link rel="dns-prefetch" href="https://www.google-analytics.com">

package/templates/feature/app/templates/{graphic.html → embed.html}

@@ -1,9 +1,9 @@
 {# Template for any scripted graphics, i.e. D3 charts #}
-{% extends 'base-graphic.html' %}
+{% extends 'base-embed.html' %}
 {% from 'macros/prose.html' import prose %}
 
 {# set pack that provides JS #}
-{% set jsPackName = 'main' %}
+{% set jsPackName = 'main-embed' %}
 
 {# data.text --> data/text.json #}
 {% set context = data.text %}
@@ -23,16 +23,16 @@
   {# data-title is used to grab the title in the CMS #}
   <h1 class="graphic-title" data-title>{{ context.headline | widont }}</h1>
   {# data-caption is used to grab the caption in the CMS #}
-  <span data-caption>{{ prose(context.graphic_prose, context, graphicData) }}</span>
+  <span data-caption>{{ prose(context.embed_prose, context, graphicData, 'embed') }}</span>
 
   {# container that JS is attached to #}
   <div id="graphic" class="graphic"></div>
 
   {# data-source, data-credit, and data-note are also used in the CMS #}
   <ul class="graphic-footer">
-    {% if context.note %}<li data-note>Note: {{ context.note }}</li>{% endif %}
-    {% if context.source %}<li data-source>Source: {{ context.source }}</li>{% endif %}
-    {% if context.credit %}<li data-credit>Credit: {{ context.credit }}</li>{% endif %}
+    {% if context.embed_note %}<li data-note>Note: {{ context.embed_note }}</li>{% endif %}
+    {% if context.embed_source %}<li data-source>Source: {{ context.embed_source }}</li>{% endif %}
+    {% if context.embed_credit %}<li data-credit>Credit: {{ context.embed_credit }}</li>{% endif %}
   </ul>
 </div>
 {% endblock content %}

package/templates/feature/app/templates/macros/processors.html

@@ -4,8 +4,12 @@
 {{ value | renderStringWithNunjucks(data) }}
 {% endmacro %}
 
-{% macro text(value, context, data) %}
-<p class="copy">{{ value | renderStringWithNunjucks(data) }}</p>
+{% macro text(value, context, data, type) %}
+  {% if type == 'embed' %}
+    <p class="graphic-prose">{{ value | renderStringWithNunjucks(data) }}</p>
+  {% else %}
+    <p class="copy">{{ value | renderStringWithNunjucks(data) }}</p>
+  {% endif %}
 {% endmacro %}
 
 {% macro list(value) %}

package/templates/graphic/app/templates/base.html

@@ -22,8 +22,9 @@
   {% if graphicSource %}
     <meta name="tt-graphic-source" content="{{ graphicSource }}" />
   {% endif %}
-
-  <meta name="tt-graphic-credit" content="{{ graphicCredit or 'Texas Tribune Staff'}}" />
+  {% if graphicCredit %}
+    <meta name="tt-graphic-credit" content="{{ graphicCredit }}" />
+  {% endif %}
   <meta name="tt-graphic-tags" content="{{ graphicTags or ['subject-politics'] }}" />
 
   <link rel="dns-prefetch" href="https://www.google-analytics.com">