@data-visuals/create 7.1.1 → 7.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-visuals/create",
-  "version": "7.1.1",
+  "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__/config/tasks/graphics-meta.js

@@ -138,30 +138,32 @@ const parseGraphic = async (
       : `${localURL}/${parentDir}/${name}.html`;
   await page.goto(url, { waitUntil: 'load' });
   const label = path.join(parentDir, `${name}.html`);
-  const graphicPath = path.join(folder, parentDir);
-  const graphicURL = ensureSlash(`https://${bucket}/${folder}/${parentDir}`);
+  const projectPath = path.join(folder, parentDir);
+  const projectURL = ensureSlash(`https://${bucket}/${folder}/${parentDir}`);
 
-  // only consider HTML with data-graphic attribute present
+  // only consider HTML with data-graphic or data-feature attribute present
   try {
-    await page.waitForSelector('[data-graphic]', {
+    await page.waitForSelector('[data-graphic], [data-feature]', {
       timeout: 5000,
     });
   } catch (e) {
     return false;
   }
 
-  // get text from page
+  // get metadata
   const title = await getText({ key: 'title', page });
-  const caption = await getText({ key: 'caption', page });
-  const altText = await getText({ key: 'alt-text', page });
-  const note = await getText({ key: 'note', page });
-  const source = await getText({ key: 'source', page });
   const tags = await (await getText({ key: 'tags', page })).split(',');
   let credits = await getText({ key: 'credit', page });
 
-  // ignore graphics with no title
+  // determine type of metadata
+  // assume the type is graphic unless data-feature is present
+  const type = (await page.$('[data-feature]')) ? 'feature' : 'graphic';
+
+  // ignore projects with no title
   if (title.length === 0) {
-    logMessage(`${label} was skipped because no graphic was title set.`);
+    logMessage(
+      `${label} was skipped because no graphic or feature was title set.`
+    );
     return false;
   }
 
@@ -174,63 +176,89 @@ const parseGraphic = async (
   }
 
   // find all links
-  const links = await page.$$eval('a', links =>
-    links.map(link => {
-      return {
-        url: link.getAttribute('href'),
-        text: link.textContent,
-        isCTA:
-          link.classList.contains('button') ||
-          link.classList.contains('.c-button'),
-      };
-    })
-  );
+  if (type == 'graphic') {
+    const caption = await getText({ key: 'caption', page });
+    const altText = await getText({ key: 'alt-text', page });
+    const note = await getText({ key: 'note', page });
+    const source = await getText({ key: 'source', page });
+
+    const links = await page.$$eval('a', links =>
+      links.map(link => {
+        return {
+          url: link.getAttribute('href'),
+          text: link.textContent,
+          isCTA:
+            link.classList.contains('button') ||
+            link.classList.contains('.c-button'),
+        };
+      })
+    );
 
-  // take screenshots of page
-  const { small, large } = await createPreviews({
-    page,
-    outputPath,
-  });
+    // take screenshots of page
+    const { small, large } = await createPreviews({
+      page,
+      outputPath,
+    });
 
-  //  check if appleNewsIgnore is specified
-  let showInAppleNews = true;
-  if (parserOptions) {
-    const { appleNewsIgnore } = parserOptions;
-    showInAppleNews =
-      !appleNewsIgnore.includes(parentDir) && !appleNewsIgnore.includes(label);
+    //  check if appleNewsIgnore is specified
+    let showInAppleNews = true;
+    if (parserOptions) {
+      const { appleNewsIgnore } = parserOptions;
+      showInAppleNews =
+        !appleNewsIgnore.includes(parentDir) &&
+        !appleNewsIgnore.includes(label);
+    }
+
+    // all graphic data
+    return {
+      type,
+      title,
+      altText,
+      bucket,
+      projectPath,
+      projectURL,
+      caption,
+      createMonth,
+      createYear,
+      credits,
+      folder,
+      id,
+      lastBuildTime,
+      label,
+      links,
+      note,
+      previews: {
+        large: projectURL + large,
+        small: projectURL + small,
+      },
+      showInAppleNews,
+      source,
+      tags,
+    };
   }
 
-  // all graphic data
-  return {
-    title,
-    altText,
-    bucket,
-    graphicPath,
-    graphicURL,
-    caption,
-    createMonth,
-    createYear,
-    credits,
-    folder,
-    id,
-    lastBuildTime,
-    label,
-    links,
-    note,
-    previews: {
-      large: graphicURL + large,
-      small: graphicURL + small,
-    },
-    showInAppleNews,
-    source,
-    tags,
-  };
+  if (type == 'feature') {
+    // all feature data
+    return {
+      type,
+      title,
+      bucket,
+      projectPath,
+      projectURL,
+      createMonth,
+      createYear,
+      credits,
+      folder,
+      id,
+      lastBuildTime,
+      label,
+      tags,
+    };
+  }
 };
 
 module.exports = async localURL => {
-  const {
-    parserOptions,
-  } = config;
+  const { parserOptions } = config;
 
   // find all html pages in project
   const pages = await glob('**/*.html', {
@@ -277,7 +305,7 @@ module.exports = async localURL => {
   // output path
   const manifest = `${paths.appDist}/manifest.json`;
 
-  // output JSON of all graphic data
+  // output JSON of all metadata
   try {
     await fs.outputJson(manifest, filtered);
   } catch (err) {
@@ -286,11 +314,11 @@ module.exports = async localURL => {
 
   // print output info in terminal
   if (filtered.length > 0) {
-    logMessage(`Generated metadata for ${filtered.length} graphic(s)`, 'green');
+    logMessage(`Generated metadata for ${filtered.length} item(s)`, 'green');
     console.log(`✔ ${manifest}`);
   } else {
     logMessage(
-      `No metadata generated. Could not find the data-graphic attribute in any HTML files.`,
+      `No metadata generated. Could not find the data-graphic or data-feature attribute in any HTML files.`,
       'red'
     );
   }

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/__common__/utils/deployment/update-log-sheet.js

@@ -23,17 +23,17 @@ function getFileLink(files, type) {
 async function writeToSheet(
   sheets,
   spreadsheetId,
-  projectType,
   projectID,
   projectURL,
+  metadataType,
   metadataInput
 ) {
   // get corresponding sheet
   let sheetName;
-  if (projectType === 'graphic') {
+  if (metadataType === 'graphic') {
     sheetName = 'Embedded';
   }
-  if (projectType === 'feature') {
+  if (metadataType === 'feature') {
     sheetName = 'Feature';
   }
 
@@ -96,6 +96,7 @@ let updateLogSheet = async (mainPath, config) => {
     const spreadsheetId = '1hCP5zGx8dNxk59gI9wBSFY2juJVM8OFCDY45VnNb2nI';
 
     // loop through metadata JSON
+    // if there is no metadata
     if (manifestJSON.length == 0) {
       let metadataInput = [
         [
@@ -119,42 +120,76 @@ let updateLogSheet = async (mainPath, config) => {
       await writeToSheet(
         sheets,
         spreadsheetId,
-        config.projectType,
         config.id,
         mainPath,
+        config.projectType,
         metadataInput
       );
     } else {
       for (const metadata of manifestJSON) {
-        let metadataInput = [
-          [
+        let metadataInput;
+        if (metadata.type == 'graphic') {
+          metadataInput = [
+            [
+              metadata.id,
+              metadata.projectURL,
+              metadata.projectPath,
+              metadata.title,
+              metadata.caption,
+              metadata.altText,
+              `${metadata.createYear}-${metadata.createMonth}`,
+              metadata.lastBuildTime,
+              metadata.note,
+              metadata.source,
+              metadata.credits.join(', '),
+              metadata.tags.join(', '),
+              getFileLink(config.files, 'sheet'),
+              getFileLink(config.files, 'doc'),
+              metadata.previews.large,
+              metadata.previews.small,
+            ],
+          ];
+        }
+        if (metadata.type == 'feature') {
+          metadataInput = [
+            [
+              metadata.id,
+              metadata.projectURL,
+              metadata.projectPath,
+              metadata.title,
+              '',
+              '',
+              `${metadata.createYear}-${metadata.createMonth}`,
+              metadata.lastBuildTime,
+              '',
+              '',
+              metadata.credits.join(', '),
+              metadata.tags.join(', '),
+              getFileLink(config.files, 'sheet'),
+              getFileLink(config.files, 'doc'),
+              '',
+              '',
+            ],
+          ];
+        }
+
+        // find hostname
+        let urlObj = new URL(metadata.projectURL);
+
+        // do not write when capybara-test is the hostname
+        if (
+          urlObj.hostname == 'graphics.texastribune.org' ||
+          urlObj.hostname == 'apps.texastribune.org'
+        ) {
+          await writeToSheet(
+            sheets,
+            spreadsheetId,
             metadata.id,
-            metadata.graphicURL,
-            metadata.graphicPath,
-            metadata.title,
-            metadata.caption,
-            metadata.altText,
-            `${metadata.createYear}-${metadata.createMonth}`,
-            metadata.lastBuildTime,
-            metadata.note,
-            metadata.source,
-            metadata.credits.join(', '),
-            metadata.tags.join(', '),
-            getFileLink(config.files, 'sheet'),
-            getFileLink(config.files, 'doc'),
-            metadata.previews.large,
-            metadata.previews.small,
-          ],
-        ];
-
-        await writeToSheet(
-          sheets,
-          spreadsheetId,
-          config.projectType,
-          metadata.id,
-          metadata.graphicURL,
-          metadataInput
-        );
+            metadata.projectURL,
+            metadata.type,
+            metadataInput
+          );
+        }
       }
     }
   }

package/templates/feature/app/index.html

@@ -1,77 +1,86 @@
 {% extends 'base.html' %}
-{% from 'macros/prose.html' import prose %}
-{% from 'macros/processors.html' import ad %}
+{% from 'macros/prose-queso.html' import prose %}
+{% from 'macros/processors-queso.html' import ad %}
 
 {% set jsPackName = 'main' %}
-
-{# data.text --> data/text.json #}
 {% set context = data.text %}
-
-{# data.data --> data/data.json #}
-{% set featureData = data.data %}
-
+{% set graphicTags = context.guten_tags %}
 {% set authorComma = joiner() %}
 
-{% block content %}
-<div class="container">
-  <header class="article-header text-center">
-    <h1 class="article-title">{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}</h1>
-    <p class="article-byline">
-      <span class="article-author">By {%- for author in context.authors or ['Super Cool Corgi', 'Friends'] -%}
-      {% if not loop.last %}{{ authorComma() }}{% elif not loop.first %} and{% endif %} {{ author }}
-      {%- endfor -%}
-      </span>
-      {% if context.update_date %}
-      <span class="article-pub-update-date">
-        <time datetime="{{ context.pub_date }}">Published: {{ apFormatDate(context.pub_date) }}</time>
-        <time datetime="{{ context.update_date }}">Updated: {{ apFormatDate(context.update_date) | widont}} </time>
-      </span>
-      {% else %}
-      <span class="article-pub-date">
-        <time datetime="{{ context.pub_date }}">{{ apFormatDate(context.pub_date) }}</time>
-      </span>
-      {% endif %}
-    </p>
-  </header>
-
-  {% include 'includes/shares.html' %}
-</div>
-
-<div class="container">
-  <div class="intro-prose">
-    {{ prose(context.prose, context, featureData) }}
-    <p class="copy">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.</p>
-
-    <h2 class="article-subheader copy">{{ 'A cool subhead here' | widont }}</h2>
-
-    <p class="copy">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.</p>
-
-    <p class="copy">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.</p>
-  </div>
-</div>
-
-{# 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 #}
-<div class="container">
-  <p class="copy">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.</p>
-
-  <p class="copy">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.</p>
-</div>
-
-{{ ad('gray', 'footer') }}
-
-<div class="related-content" id="related-content-container"></div>
-
-<div id="ribbon-container"></div>
-{% endblock content %}
+{% block google_fonts %}{# queso fonts found in CSS #}{% endblock google_fonts %}
+{% block css_file %}
+  <link rel="stylesheet" href="{{ static('styles/min/main-queso.css') }}">
+{% endblock css_file %}
+
+{% block nav %}{% include 'components/navbar.html' %}{% endblock %}
+
+{% block content_wrap %}
+  <main data-feature>
+    <article class="has-giant-btm-marg">
+      {% block content %}
+        <div class="has-page-padding has-giant-btm-marg">
+          <header class="t-align-center">
+            <h1 class="l-container l-container--m t-headline t-serif t-lh-s has-s-btm-marg" data-title>{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}</h1>
+            <p class="t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark has-b-btm-marg">
+              <span class="t-byline__item">By <span data-credit>{%- for author in context.authors or ['Texas Tribune Staff'] -%}
+              {% if not loop.last %}{{ authorComma() }}{% elif not loop.first %} and{% endif %} <span class="l-display-ib">{{ author }}</span>
+              {%- endfor -%}</span>
+              </span>
+
+              {% if context.update_date %}
+              <span class="l-display-block">
+                <span class="t-byline__item">Published: <time datetime="{{ context.pub_date }}">{{ apFormatDate(context.pub_date) }}</time></span>
+                <span class="t-byline__item">Updated: <time datetime="{{ context.update_date }}">{{ apFormatDate(context.update_date) }}</time></span>
+              </span>
+              {% else %}
+              <span class="t-byline__item"><time datetime="{{ context.pub_date }}">{{ apFormatDate(context.pub_date) }}</time></span>
+              {% endif %}
+            </p>
+          </header>
+
+          {% include 'components/share.html' %}
+        </div>
+
+        <div class="t-serif t-links-underlined has-page-padding">
+          {{ prose(context.prose, context, data) }}
+
+          {# graphics are attached to this container #}
+          <div id="graphic"></div>
+
+          <p class="t-copy">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.</p>
+
+          <h2 class="t-copy t-copy--subheader">{{ 'A cool subhead here' | widont }}</h2>
+
+          <p class="t-copy">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.</p>
+
+          <p class="t-copy">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.</p>
+        </div>
+
+        {# use 'none' as the value if the ad should 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 #}
+        <div class="t-serif t-links-underlined has-page-padding">
+          <p class="t-copy">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.</p>
+
+          <p class="t-copy">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.</p>
+        </div>
+
+        {{ ad('gray', 'footer') }}
+      {% endblock content %}
+    </article>
+  </main>
+  <aside>
+    <div class="related-content l-container has-page-padding" id="related-content-container"></div>
+    <div id="ribbon-container"></div>
+  </aside>
+{% endblock content_wrap %}
 
 {% block inline_data %}
 <script>
   window.ttData = {
-    gutenTag: '{{ context.guten_tag or "subject-politics" }}'
+    gutenTag: '{{ context.related_tag or "subject-politics" }}'
   };
 </script>
 {% endblock inline_data %}

package/templates/feature/app/scripts/components/Story.js

@@ -22,8 +22,12 @@ const Story = ({ headline, url, pub_date, sitewide_image }) => {
           </div>
           <div class="story-text c-story-block__text">
             <header class="story-header">
-              <h4 class="story-headline t-serif t-size-b t-lh-s has-xxxs-btm-marg">{headline}</h4>
-              <p class="story-byline t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark">{apdate(new Date(pub_date))}</p>
+              <h4 class="story-headline t-serif t-size-b t-lh-s has-xxxs-btm-marg">
+                {headline}
+              </h4>
+              <p class="story-byline t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark">
+                {apdate(new Date(pub_date))}
+              </p>
             </header>
           </div>
         </div>

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}

@@ -25,9 +25,7 @@
   {% if graphicCredit %}
     <meta name="tt-graphic-credit" content="{{ graphicCredit }}" />
   {% endif %}
-  {% if graphicTags %}
-    <meta name="tt-graphic-tags" content="{{ graphicTags or 'subject-politics' }}" />
-  {% endif %}
+  <meta name="tt-graphic-tags" content="{{ graphicTags or ['subject-politics'] }}" />
 
   <link rel="dns-prefetch" href="https://www.google-analytics.com">
   <link rel="dns-prefetch" href="https://fonts.googleapis.com">

package/templates/feature/app/templates/base.html

@@ -4,6 +4,8 @@
   <title>{% if context.seo_headline %}{{ context.seo_headline + ' | ' }}{% elif context.headline %}{{ context.headline + ' | ' }}{% endif %}The Texas Tribune</title>
   {% include 'includes/metas.html' %}
 
+  <meta name="tt-graphic-tags" content="{{ graphicTags or ['subject-politics'] }}" />
+
   <link rel="dns-prefetch" href="https://www.google-analytics.com">
   <link rel="dns-prefetch" href="https://www.googletagmanager.com">
   {% block google_fonts %}

package/templates/feature/app/templates/components/footer.html

@@ -7,9 +7,9 @@
       <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/about/">About Us</a></li>
       <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/contact/">Contact Us</a></li>
       <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/support-us/donors-and-members/">Who Funds Us?</a></li>
-      <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/terms-of-service/">Terms of Service</a></li>
-      <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/ethics/">Code of Ethics</a></li>
-      <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/privacy/">Privacy Policy</a></li>
+      <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/about/terms-of-service/">Terms of Service</a></li>
+      <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/about/ethics/">Code of Ethics</a></li>
+      <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/about/privacy-policy/">Privacy Policy</a></li>
       <li class="footer-nav-item"><a class="footer-link footer-link-donate" href="https://support.texastribune.org/">Donate</a></li>
     </ul>
   </div>

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/index-old.html

@@ -0,0 +1,76 @@
+{% extends 'base.html' %}
+{% from 'macros/prose.html' import prose %}
+{% from 'macros/processors.html' import ad %}
+
+{% set jsPackName = 'main' %}
+{# data.text --> data/text.json #}
+{% set context = data.text %}
+{# data.data --> data/data.json #}
+{% set featureData = data.data %}
+{% set graphicTags = context.guten_tags %}
+{% set authorComma = joiner() %}
+
+{% block content %}
+<div class="container" data-feature>
+  <header class="article-header text-center">
+    <h1 class="article-title" data-title>{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}</h1>
+    <p class="article-byline">
+      <span class="article-author">By {%- for author in context.authors or ['Super Cool Corgi', 'Friends'] -%}
+      {% if not loop.last %}{{ authorComma() }}{% elif not loop.first %} and{% endif %} {{ author }}
+      {%- endfor -%}
+      </span>
+      {% if context.update_date %}
+      <span class="article-pub-update-date">
+        <time datetime="{{ context.pub_date }}">Published: {{ apFormatDate(context.pub_date) }}</time>
+        <time datetime="{{ context.update_date }}">Updated: {{ apFormatDate(context.update_date) | widont}} </time>
+      </span>
+      {% else %}
+      <span class="article-pub-date">
+        <time datetime="{{ context.pub_date }}">{{ apFormatDate(context.pub_date) }}</time>
+      </span>
+      {% endif %}
+    </p>
+  </header>
+
+  {% include 'includes/shares.html' %}
+</div>
+
+<div class="container">
+  <div class="intro-prose">
+    {{ prose(context.prose, context, featureData) }}
+
+    <p class="copy">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.</p>
+
+    <h2 class="article-subheader copy">{{ 'A cool subhead here' | widont }}</h2>
+
+    <p class="copy">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.</p>
+
+    <p class="copy">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.</p>
+  </div>
+</div>
+
+{# 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 #}
+<div class="container">
+  <p class="copy">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.</p>
+
+  <p class="copy">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.</p>
+</div>
+
+{{ ad('gray', 'footer') }}
+
+<div class="related-content" id="related-content-container"></div>
+
+<div id="ribbon-container"></div>
+{% endblock content %}
+
+{% block inline_data %}
+<script>
+  window.ttData = {
+    gutenTag: '{{ context.related_tag or "subject-politics" }}'
+  };
+</script>
+{% endblock inline_data %}

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

@@ -9,7 +9,7 @@
 {% endmacro %}
 
 {% macro list(value) %}
-<ul>
+<ul class="t-copy c-list">
   {% for item in value %}
   <li>{{ item }}</li>
   {% endfor %}
@@ -17,7 +17,7 @@
 {% endmacro %}
 
 {% macro subhead(value) %}
-<h2 class="t-subheader">{{ value | widont }}</h2>
+<h2 class="t-copy t-copy--subheader">{{ value | widont }}</h2>
 {% endmacro %}
 
 {# set type to roof for roof ads, footer for footer ads #}

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

@@ -4,12 +4,16 @@
 {{ 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) %}
-<ul>
+<ul class="copy">
   {% for item in value %}
   <li>{{ item }}</li>
   {% endfor %}

package/templates/feature/project.config.js

@@ -34,7 +34,8 @@ module.exports = {
   projectName: '<<name>>',
   /**
    * The destination S3 bucket for a deploy.
-   * YOU CAN CHANGE THIS.
+   * `capybara-test` is the test bucket.
+   * YOU CAN CHANGE THIS. Change to `apps.texastribune.org` when publishing.
    */
   bucket: 'capybara-test.texastribune.org',
   /**

package/templates/graphic/app/index.html

@@ -2,21 +2,6 @@
 {% extends 'base.html' %}
 {% from 'macros/prose.html' import prose %}
 
-{# set pack that provides JS #}
-{% set jsPackName = 'main' %}
-
-{# data.text --> data/text.json #}
-{% set context = data.text %}
-
-{# data.data --> data/data.json #}
-{% set graphicData = data.data %}
-
-{# graphicAltText is used by the CMS for accessibility #}
-{% set graphicAltText = context.alttext %}
-
-{# graphics will be surfaced in the graphics plugin under these tags #}
-{% set graphicTags = context.guten_tags %}
-
 {% block content %}
 <div class="app">
   <h1 class="article-subheader">Welcome to The Texas Tribune's data visuals graphics kit!</h1>

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

@@ -25,9 +25,7 @@
   {% if graphicCredit %}
     <meta name="tt-graphic-credit" content="{{ graphicCredit }}" />
   {% endif %}
-  {% if graphicTags %}
-    <meta name="tt-graphic-tags" content="{{ graphicTags or 'subject-politics' }}" />
-  {% endif %}
+  <meta name="tt-graphic-tags" content="{{ graphicTags or ['subject-politics'] }}" />
 
   <link rel="dns-prefetch" href="https://www.google-analytics.com">
   <link rel="dns-prefetch" href="https://fonts.googleapis.com">

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

@@ -14,6 +14,9 @@
 {# graphicAltText is used by the CMS for accessibility #}
 {% set graphicAltText = context.alttext %}
 
+{# graphics will be surfaced in the graphics plugin under these tags #}
+{% set graphicTags = context.guten_tags %}
+
 {% block content %}
 {# data-graphic signifies that this can be embedded in the CMS #}
 <div class="app" data-graphic>

package/templates/graphic/project.config.js

@@ -34,9 +34,10 @@ module.exports = {
   projectName: '<<name>>',
   /**
    * The destination S3 bucket for a deploy.
-   * YOU CAN CHANGE THIS.
+   * `capybara-test` is the test bucket.
+   * YOU CAN CHANGE THIS. Change to `graphics.texastribune.org` when publishing.
    */
-  bucket: 'graphics.texastribune.org',
+  bucket: 'capybara-test.texastribune.org',
   /**
    * The folder (or "Key" in S3 lingo) to deploy the project into.
    * This is the slug in the project URL.

package/templates/feature/app/index-queso.html

@@ -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 %}
-  <link rel="stylesheet" href="{{ static('styles/min/main-queso.css') }}">
-{% endblock css_file %}
-
-{% block nav %}{% include 'components/navbar.html' %}{% endblock %}
-
-{% block content_wrap %}
-  <main>
-    <article class="has-giant-btm-marg">
-      {% block content %}
-        <div class="has-page-padding has-giant-btm-marg">
-          <header class="t-align-center">
-            <h1 class="l-container l-container--m t-headline t-serif t-lh-s has-s-btm-marg">{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}</h1>
-            <p class="t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark has-b-btm-marg">
-              <span class="t-byline__item">By {%- for author in context.authors or ['Super Cool Corgi', 'Friends'] -%}
-              {% if not loop.last %}{{ authorComma() }}{% elif not loop.first %} and{% endif %} <span class="l-display-ib">{{ author }}</span>
-              {% endfor %}
-              </span>
-
-              {% if context.update_date %}
-              <span class="l-display-block">
-                <span class="t-byline__item">Published: <time datetime="{{ context.pub_date }}">{{ apFormatDate(context.pub_date) }}</time></span>
-                <span class="t-byline__item">Updated: <time datetime="{{ context.update_date }}">{{ apFormatDate(context.update_date) }}</time></span>
-              </span>
-              {% else %}
-              <span class="t-byline__item"><time datetime="{{ context.pub_date }}">{{ apFormatDate(context.pub_date) }}</time></span>
-              {% endif %}
-            </p>
-          </header>
-
-          {% include 'components/share.html' %}
-        </div>
-
-        <div class="t-serif t-links-underlined has-page-padding">
-          {{ prose(context.prose, context, data) }}
-          <p class="t-copy">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.</p>
-
-          <h2 class="t-copy t-copy--subheader">{{ 'A cool subhead here' | widont }}</h2>
-
-          <p class="t-copy">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.</p>
-
-          <p class="t-copy">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.</p>
-        </div>
-
-        {# 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 #}
-        <div class="t-serif t-links-underlined has-page-padding">
-          <p class="t-copy">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.</p>
-
-          <p class="t-copy">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.</p>
-        </div>
-
-        {{ ad('gray', 'footer') }}
-      {% endblock content %}
-    </article>
-  </main>
-  <aside>
-    <div class="related-content l-container has-page-padding" id="related-content-container"></div>
-    <div id="ribbon-container"></div>
-  </aside>
-{% endblock content_wrap %}
-
-{% block inline_data %}
-<script>
-  window.ttData = {
-    gutenTag: '{{ context.guten_tag or "subject-politics" }}'
-  };
-</script>
-{% endblock inline_data %}