@data-visuals/create 7.1.0 → 7.2.0

package/package.json

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

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,70 +176,96 @@ 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', {
     absolute: true,
     cwd: './.tmp',
     recursive: true,
-    ignore: parserOptions.graphicsIgnore,
+    ignore: parserOptions.metadataIgnore,
   });
 
   // spin up headless browser using local chrome
@@ -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/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/templates/base-graphic.html

@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>The Texas Tribune</title>
+  <base target='_parent'>
+
+  {% if graphicTitle %}
+    <meta name="tt-graphic-title" content="{{ graphicTitle }}" />
+  {% endif %}
+  {% if graphicAltText %}
+    <meta name="tt-graphic-alt-text" content="{{ graphicAltText }}" />
+  {% endif %}
+  {% if graphicCaption %}
+    <meta name="tt-graphic-caption" content="{{ graphicCaption }}" />
+  {% endif %}
+  {% if graphicNote %}
+    <meta name="tt-graphic-note" content="{{ graphicNote }}" />
+  {% endif %}
+  {% if graphicSource %}
+    <meta name="tt-graphic-source" content="{{ graphicSource }}" />
+  {% endif %}
+
+  <meta name="tt-graphic-credit" content="{{ graphicCredit or 'Texas Tribune Staff'}}" />
+  <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">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+  <!-- Start fonts -->
+  <script>
+  window.WebFontConfig = {
+  google: { families: ['Open Sans:300,400,700'] },
+  timeout: 10000,
+};
+</script>
+  <script async src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
+  <!-- End fonts -->
+  <link rel="stylesheet" href="{{ static('styles/main.css') }}">
+
+  {% if jsPackName %}
+    {% block head_scripts %}
+    {{ javascriptPack(jsPackName, { mjs: true }) }}
+    {% endblock head_scripts %}
+  {% endif %}
+</head>
+<body>
+
+{% block content %}{% endblock content %}
+
+{% block inline_data %}{% endblock inline_data %}
+
+{% include 'includes/nomodule-shim.html' %}
+
+{% if jsPackName %}
+  {% block scripts %}
+  {{ javascriptPack(jsPackName) }}
+  {% endblock scripts %}
+{% endif %}
+</body>
+</html>

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

@@ -0,0 +1,47 @@
+{# Template for any scripted graphics, i.e. D3 charts #}
+{% extends 'base-graphic.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 %}
+{# data-graphic signifies that this can be embedded in the CMS #}
+<div class="app" data-graphic>
+  {# 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>
+
+  {# 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 %}
+  </ul>
+</div>
+{% endblock content %}
+
+{# set data/data.json as a window variable #}
+{% block inline_data %}
+{% if data.data %}
+<script>
+  window.DATA = {{ data.data|dump }};
+</script>
+{% endif %}
+{% endblock inline_data %}

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

@@ -9,7 +9,7 @@
 {% 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',
   /**
@@ -106,4 +107,27 @@ module.exports = {
    *
    */
   customFilters: {},
+  /**
+   * Where custom settings for parsing graphics can be added.
+   *
+   * metadataIgnore
+   * Add paths here that you do not want parsed for metadata and shown
+   * in the graphics plugin in the CMS.
+   *
+   * appleNewsIgnore
+   * Some graphics are too dynamic to be accurately captured in a screenshot.
+   * Those graphics shouldn't be considered for platforms like Apple News.
+   *
+   * Paths for metadataIgnore and appleNewsIgnore are relative to the build folders.
+   * Example:
+   * appleNewsIgnore: [
+   *  'complex-graphic-folder/index.html',
+   *  'some-other-folder',
+   * ],
+   *
+   */
+  parserOptions: {
+    metadataIgnore: [],
+    appleNewsIgnore: [],
+  },
 };

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

@@ -22,12 +22,9 @@
   {% if graphicSource %}
     <meta name="tt-graphic-source" content="{{ graphicSource }}" />
   {% endif %}
-  {% 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-credit" content="{{ graphicCredit or 'Texas Tribune Staff'}}" />
+  <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/graphics-meta.md

@@ -72,6 +72,7 @@ Project config keys output in `manifest.json`
 - `id`
 - `tags`
 - `parserOptions`
+  - `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.
 	- `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.
 
 ### Sample `manifest.json` output

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.
@@ -109,11 +110,15 @@ module.exports = {
   /**
    * Where custom settings for parsing graphics can be added.
    *
+   * metadataIgnore
+   * Add paths here that you do not want parsed for metadata and shown
+   * in the graphics plugin in the CMS.
+   *
    * appleNewsIgnore
    * Some graphics are too dynamic to be accurately captured in a screenshot.
    * Those graphics shouldn't be considered for platforms like Apple News.
-   * Paths are relative to the build folders.
    *
+   * Paths for metadataIgnore and appleNewsIgnore are relative to the build folders.
    * Example:
    * appleNewsIgnore: [
    *  'complex-graphic-folder/index.html',
@@ -122,7 +127,7 @@ module.exports = {
    *
    */
   parserOptions: {
-    graphicsIgnore: [],
+    metadataIgnore: [],
     appleNewsIgnore: [],
   },
 };

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 %}