Merge pull request #30 from thegetty/second-pages-greg

Second pages greg

README.md

@@ -2,7 +2,30 @@
 
 The [Quire Eleventy package](https://github.com/thegetty/quire/tree/main/packages/11ty) contains configuration and modules for the [Eleventy static site generator](https://11ty.dev). This package is published to npm as [`@thegetty/quire-11ty`](https://www.npmjs.com/package/@thegetty/quire-11ty) and installed by the [`@thegetty/quire-cli`](https://www.npmjs.com/package/@thegetty/quire-cli) to build [Quire](https://quire.getty.edu) projects.
 
-### New and Customized Template Files
+## Creating a PDF Version
+
+1. Run `quire build`
+
+2. In `_site/pdf.html`, find and replace the ones instance of `<a href="#contents">` with `<a href="#things">` to ensure page numbering for "Thing" section page is correct.
+
+2. If the PDF will be sent to digital printer, run the following command to ensure color profiles are correct:
+
+    ```
+    magick mogrify -profile bin/adobe-rgb-1998.icm _site/iiif/**/print-image.jpg
+    ```
+
+3. With PrinceXML 14.2 installed, run `quire pdf --lib prince`
+
+Note: We were originally planning on using Paged.js to output this project, however, it is outputting rich black text, which increases print cost and lowers print quality. Also, this important bit of CSS, which adds commas to the things in the List of Owners, wasn't working in Paged.js whereas it does in Prince. And Prince offers some other layout benefits we'll be able to take advantage of.
+
+```css
+#owners-list li .quire-citation + .quire-citation::before { content: ", "; }
+```
+
+## New and Customized Template Files
+
+**_includes/components/copyright/licensing.js**
+Updated licensing language
 
 **_includes/components/icons.js**
 Added custom search icon
@@ -22,7 +45,7 @@ Added three dropdown selects for the thing grid
 Altered to show current page title instead of homepage link, as well as a link to the contents ("Things") page
 
 **_includes/components/page-header.js**
-Added a list of 'owners'
+Added a list of 'owners' and an html element for the PDF footers
 
 **_includes/components/table-of-contents/item/list.js**
 Output the list item for 'thing' pages with an image
@@ -33,16 +56,12 @@ Altered getCurrentFigureId() to work with .q-figure__modal-link class anywhere
 **_layouts/cover.liquid**
 Accepts an array of images stacked on top of one another, and add adds visually-hidden class to the main title texts
 
+**_layouts/splash.liquid**
+Added an html element for the PDF footers
+
 **_layouts/thing.liquid**
 Copied essay.liquid, except that it adds owners to the pageHeader and a `.thing-info` grid to display type, theme, and material.
 
-**_plugins/filters/lowerCase.js**
-**_plugins/filters/index.js**
-Added new filter to convert string to lower case, for use in Liquid tempates
-
-**_plugins/shortcodes/figureGroup.js**
-Added optional group figure caption, and optional class, and simplify output to remove rows
-
 **_plugins/shortcodes/index.js**
 Registered the new `abbr` and `thing` shortcodes
 
@@ -57,7 +76,3 @@ Refactored logic to handle oxford commas correctly; and added handling to displa
 
 **_plugins/shortcodes/figureRef.js**
 Refactored to accept comma-separated array, and to output with .q-figure__modal-link class
-
-**_plugins/transforms/outputs/pdf/layout.html**
-**_plugins/transforms/outputs/pdf/write.js**
-Added wrapping elements with classes necessary for styling

_includes/components/copyright/licensing.js

@@ -1,3 +1,8 @@
+//
+// CUSTOMIZED FILE
+// Updated the image exclusions language, line 27
+// Moved print/pdf statement to new location
+//
 const { oneLine } = require('~lib/common-tags')
 
 module.exports = function(eleventyConfig) {
@@ -11,26 +16,24 @@ module.exports = function(eleventyConfig) {
     const licenseName = license.url
       ? `<a rel="license" href="${license.url}" target="_blank">${license.name}</a>`
       : license.name
+    const licensePrintStatement = `<span class="is-print-only">To view a copy of this license, visit ${license.url}. </span>`
 
     if (license.scope == 'some-exceptions') {
       licenseText += `
         Unless otherwise indicated, this work is licensed under a ${licenseName}.
       `
     } else if (license.scope === 'text-only') {
       licenseText += `
-        The text of this work is licensed under a ${licenseName}. Unless otherwise indicated, all illustrations are excluded from the ${licenseAbbreviation} license.
+        The text of this work is licensed under a ${licenseName}. ${licensePrintStatement}All images are reproduced with the permission of the rights holders acknowledged in captions and are expressly excluded from the ${licenseAbbreviation} license covering the rest of this publication. These images may not be reproduced, copied, transmitted, or manipulated without consent from the owners, who reserve all rights.
       `
     } else {
       licenseText += `
-        This work is licensed under a ${licenseName}.
+        This work is licensed under a ${licenseName}. ${licensePrintStatement}
       `
     }
 
     return oneLine`
       ${licenseText}
-      <span class="is-print-only">
-        To view a copy of this license visit ${license.url}.
-      </span>
     `
   }
 }

_includes/components/page-header.js

@@ -68,10 +68,10 @@ module.exports = function(eleventyConfig) {
           : owner.first_name + ' ' + owner.last_name
 
         const years = owner.years 
-          ? owner.years
+          ? ` (${owner.years})`
           : ''
 
-        ownersList.push(html`<li>${name} (${years})</li>`) 
+        ownersList.push(html`<li>${name}${years}</li>`) 
       }
       ownersElement = html`<ul class="quire-page__header__owner">${ownersList}</ul>`
     }
@@ -83,6 +83,7 @@ module.exports = function(eleventyConfig) {
             ${pageLabel}
             ${pageTitle({ title, subtitle })}
           </h1>
+          <span class="pdf-footers__title">${markdownify(title)}</span>
           ${ownersElement}
           ${contributorsElement}
         </div>

_layouts/splash.liquid

@@ -1,4 +1,7 @@
 ---
+## CUSTOMIZED FILE
+## Adds .pdf-footers__title for PDF, line 20
+##
 class: quire-splash
 layout: base
 description: splash page layout
@@ -14,6 +17,7 @@ description: splash page layout
       {% if label %}<span class="label">{{ label }}<span class="visually-hidden">{{ labelDivider }}</span></span>{% endif %}
       {%- pageTitle title=title, subtitle=subtitle -%}
     </h1>
+    <span class="pdf-footers__title">{{ title | markdownify }}</span>
     {% if pageContributors %}
       <div class="quire-page__header__contributor">
         {% contributors context=pageContributors, format=byline_format %}

_plugins/filters/index.js

@@ -1,7 +1,3 @@
-//
-// CUSTOMIZED FILE
-// added lowerCase filter, lines 19 and 46
-///
 // Quire data filters
 const fullname = require('./fullname')
 const getAnnotation = require('./getAnnotation')
@@ -16,7 +12,6 @@ const sortReferences = require('./sortReferences')
 // string filters
 const capitalize = require('./capitalize')
 const json = require('./json')
-const lowerCase = require('./lowerCase')
 const removeHTML = require('./removeHTML')
 const slugifyIds = require('./slugifyIds')
 const titleCase = require('./titleCase')
@@ -43,7 +38,6 @@ module.exports = function(eleventyConfig, options) {
    */
   eleventyConfig.addFilter('capitalize', (string) => capitalize(string))
   eleventyConfig.addFilter('json', (string) => json(string))
-  eleventyConfig.addFilter('lowerCase', (string) => lowerCase(string))
   eleventyConfig.addFilter('removeHTML', (string) => removeHTML(string))
   eleventyConfig.addFilter('slugifyIds', (string) => slugifyIds(string, eleventyConfig))
   eleventyConfig.addFilter('titleCase', (string) => titleCase(string))

_plugins/shortcodes/figureGroup.js

@@ -1,7 +1,3 @@
-//
-// CUSTOMIZED FILE
-// Added optional group figure caption, and optional class, and simplify output to remove rows
-//
 const { html } = require('~lib/common-tags')
 const chalkFactory = require('~lib/chalk')
 const figure = require('./figure')
@@ -16,9 +12,8 @@ const logger = chalkFactory('shortcodes:figureGroup')
  * @return     {String}  An HTML string of the elements to render
  */
 module.exports = function (eleventyConfig, { page }) {
-  const figureCaption = eleventyConfig.getFilter('figureCaption')
 
-  return async function (columns, ids=[], caption, classes) {
+  return async function (columns, ids=[]) {
     columns = parseInt(columns)
 
     /**
@@ -31,22 +26,28 @@ module.exports = function (eleventyConfig, { page }) {
     ids = Array.isArray(ids) ? ids : ids.split(',').map((id) => id.trim())
 
     if (!ids.length) {
-      logger.warn(`NoId: the figuregroup shortcode must include one or more 'id' values that correspond to an 'id' in the 'figures.yaml' file. @example {% qfiguregroup columns=2, ids='3.1, 3.2, 3.3' %}`)
+      logger.warn(`NoId: the q-figures shortcode must include one or more 'id' values that correspond to an 'id' in the 'figures.yaml' file. @example {% qfiguregroup columns=2, ids='3.1, 3.2, 3.3' %}`)
     }
 
-    const figureClasses = classes ? classes : ''
-
-    let figures = '';
-    for (let i=0; i < ids.length; i++) {
-      figures += await figure(eleventyConfig, { page })(ids[i]);
+    // if (ErrorNoMediaType) {
+    //   logger.warn(`NoMediaType: One of the figures passed to the q-figures shortcode is missing the 'media_type' attribute. Figures in 'figures.yaml' must be have a 'media_type' attribute with a value of either  "vimeo" or "youtube"`)
+    // }
+
+    const classes = ['column', 'q-figure--group__item', `quire-grid--${columns}`]
+    const rows = Math.ceil(ids.length / columns)
+    let figureTags = []
+    for (let i=0; i < rows; ++i) {
+      const startIndex = i * columns
+      let row = ''
+      for (let id of ids.slice(startIndex, columns + startIndex)) {
+        row += await figure(eleventyConfig, { page })(id, classes)
+      }
+      figureTags.push(`<div class="q-figure--group__row columns">${row}</div>`)
     }
 
-    const captionElement = caption ? figureCaption({ caption }) : ''
-
     return html`
-      <figure class="q-figure q-figure--group q-figure--group--${columns} ${figureClasses}">
-        ${figures}
-        ${captionElement}
+      <figure class="q-figure q-figure--group">
+        ${figureTags.join('\n')}
       </figure>
     `
   }

_plugins/transforms/outputs/pdf/layout.html

@@ -1,9 +1,3 @@
-<!--
-// CUSTOMIZED FILE
-// added new divs to mirror existing scss, Lines 21–24
-// see also _plugins/transforms/outputs/pdf/write.js
-//
--->
 <!doctype html>
 <html>
   <head>
@@ -18,9 +12,5 @@
     <link rel="stylesheet" href="pdf.css" />
   </head>
   <body>
-    <div id="container" class="quire">
-    <div class="quire__primary" id="quire-primary">
-    </div>
-    </div>
   </body>
 </html>

_plugins/transforms/outputs/pdf/transform.js

@@ -65,6 +65,7 @@ module.exports = function(eleventyConfig, collections, content) {
   if (pdfPages.includes(this.outputPath)) {
     const { document } = new JSDOM(content).window
     const mainElement = document.querySelector('main[data-output-path]')
+    const svgSymbolElements = document.querySelectorAll('body > svg')
     const pageIndex = pdfPages.findIndex((path) => path === this.outputPath)
 
     if (mainElement) {
@@ -88,6 +89,7 @@ module.exports = function(eleventyConfig, collections, content) {
 
         // remove non-pdf content
         filterOutputs(sectionElement, 'pdf')
+        collections.pdf[pageIndex].svgSymbolElements = Array.from(svgSymbolElements)
         collections.pdf[pageIndex].sectionElement = sectionElement
       }
 

_plugins/transforms/outputs/pdf/write.js

@@ -1,8 +1,3 @@
-//
-// CUSTOMIZED FILE
-// changed element for appendChild(sectionElement), Line 44
-// see also _plugins/transforms/outputs/pdf/layout.html
-//
 const chalkFactory = require('~lib/chalk')
 const fs = require('fs-extra')
 const jsdom = require('jsdom')
@@ -32,16 +27,23 @@ module.exports = (eleventyConfig) => {
   fs.ensureDirSync(path.parse(outputPath).dir)
 
   /**
-   * Write each page section in the PDF collection to a single HTML file
+   * Write each page section in the PDF collection to a single HTML file,
+   * as well as one instance of SVG symbol definitions
    * @param  {Object} collection collections.pdf with `sectionElement` property
    */
   return async (collection) => {
     const dom = await JSDOM.fromFile(layoutPath)
     const { document } = dom.window
 
-    collection.forEach(({ outputPath, sectionElement }) => {
+    collection.forEach(({ outputPath, sectionElement, svgSymbolElements }, index) => {
       try {
-        document.getElementById('quire-primary').appendChild(sectionElement)
+        // only write SVG symbol definitions one time
+        if (index === 0) {
+          svgSymbolElements.forEach((svgSymbolElement) => {
+            document.body.appendChild(svgSymbolElement)
+          })
+        }
+        document.body.appendChild(sectionElement)
       } catch (error) {
         logger.error(`Eleventy transform for PDF error appending content for ${outputPath} to combined output. ${error}`)
       }
@@ -77,11 +79,13 @@ module.exports = (eleventyConfig) => {
     }
 
     try {
+      const fontsDir = path.join(inputDir, '_assets', 'fonts')
+      const fonts = sass.compile(path.resolve(fontsDir, 'index.scss'), sassOptions)
+      fonts.css = fonts.css.replaceAll('/_assets', '_assets')
       const stylesDir = path.join(inputDir, '_assets', 'styles')
       const application = sass.compile(path.resolve(stylesDir, 'application.scss'), sassOptions)
-      const print = sass.compile(path.resolve(stylesDir, 'print.scss'), sassOptions)
       const custom = sass.compile(path.resolve(stylesDir, 'custom.css'), sassOptions)
-      fs.writeFileSync(path.join(outputDir, 'pdf.css'), application.css + print.css + custom.css)
+      fs.writeFileSync(path.join(outputDir, 'pdf.css'), fonts.css + application.css + custom.css)
     } catch (error) {
       logger.error(`Eleventy transform for PDF error compiling SASS. Error message: ${error}`)
     }

bin/README.md

@@ -0,0 +1,5 @@
+The color profile in this directory is for use with Imagemagick. The following command is run after running `quire build` and before `quire pdf --lib prince` when generating a PDF file destined for professional printing. This ensures the images have a proper color profile.
+
+```
+magick mogrify -profile bin/adobe-rgb-1998.icm _site/iiif/**/print-image.jpg
+```

content/_assets/javascript/application/index.js

@@ -8,6 +8,7 @@
  */
 
 // Stylesheets
+import '../../fonts/index.scss'
 import '../../styles/application.scss'
 import '../../styles/custom.css'
 

content/_assets/styles/application.scss

@@ -2,7 +2,6 @@
 // Application.scss
 // -----------------------------------------------------------------------------
 @import "bulma/sass/utilities/initial-variables.sass";
-@import "fonts";
 @import "colors";
 @import "variables";
 

content/_assets/styles/components/_all.scss

@@ -1,3 +1,4 @@
+@import "./accordion";
 @import "./canvas-panel";
 @import "./quire-navbar";
 @import "./quire-menu";