@thegetty/quire-cli 0.20.4 → 1.0.0-pre-release.0

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/shortcodes/contributors.js

@@ -0,0 +1,128 @@
+const chalkFactory = require('~lib/chalk')
+const { html } = require('~lib/common-tags')
+
+const { error } = chalkFactory('shortcodes:contributors')
+
+/**
+ * Contributor shortcode
+ * Renders a list of contributors
+ *
+ * @param  {Array|String} context Array of contributor objects OR string override
+ * @param  {String} align How to align the text (name-title-block and bio only) Values: 'left' (default), 'center', 'right'
+ * @param  {String} type The contributor type to render. Values: 'all' (default), 'primary', 'secondary'
+ * @param  {String} format How to display the contributors. Values: 'string', 'bio', 'name', 'name-title', 'name-title-block'. Default set in config.bylineFormat
+ *
+ * @return {String} Markup for contributors
+ */
+module.exports = function (eleventyConfig) {
+  const contributorBio = eleventyConfig.getFilter('contributorBio')
+  const fullname = eleventyConfig.getFilter('fullname')
+  const getContributor = eleventyConfig.getFilter('getContributor')
+  const initials = eleventyConfig.getFilter('initials')
+  const markdownify = eleventyConfig.getFilter('markdownify')
+  const slugify = eleventyConfig.getFilter('slugify')
+  const sortContributors = eleventyConfig.getFilter('sortContributors')
+
+  const { bylineFormat } = eleventyConfig.globalData.config
+
+  return function (params) {
+    const {
+      align='left',
+      context: contributors,
+      format=bylineFormat,
+      role,
+      type='all'
+    } = params
+
+    const formats = ['bio', 'initials', 'name', 'name-title', 'name-title-block', 'string']
+
+    if (!formats.includes(format)) {
+      error(
+        `Unrecognized contributors shortcode format "${format}". Supported format values are: ${formats.join(', ')}`
+      )
+      return ''
+    }
+
+    if (!contributors) return ''
+
+    if (typeof contributors === 'string') return markdownify(contributors)
+
+    let contributorList = contributors
+      .flatMap(getContributor)
+      .filter((item) => (type || role) && type !== 'all'
+        ? (type && item.type === type) || (role && item.role === role)
+        : item
+      )
+    contributorList = sortContributors(contributorList)
+
+    const contributorNames = contributorList
+      .map(fullname)
+      .filter((name) => name)
+    if (!contributorList.length) return ''
+
+    let contributorsElement
+
+    switch (format) {
+      case 'bio':
+        contributorsElement = `
+          <ul class='quire-contributors-list ${format} align-${align}'>
+            ${contributorList.map((contributor) => contributorBio(contributor)).join('')}
+          </ul>
+        `
+        break
+      case 'initials': {
+        const contributorInitials = contributorList.map(initials)
+        const last = contributorInitials.pop()
+        const nameString =
+          contributorInitials.length >= 1
+            ? contributorInitials.join(', ') + ', and ' + last
+            : last
+        contributorsElement = `<span class="quire-contributor">${nameString}</span>`
+        break
+      }
+      case 'name':
+      case 'name-title':
+      case 'name-title-block': {
+        const separator = (format === 'name-title') ? ', ' : ''
+        const listItems = contributorList.map((contributor) => {
+          const contributorParts = [
+            `<span class="quire-contributor__name">${fullname(contributor)}</span>`
+          ]
+          contributor.title && format !== 'name'
+            ? contributorParts.push(
+              `<span class="quire-contributor__title">${ contributor.title }</span>`
+            )
+            : null
+          contributor.affiliation && format !== 'name'
+            ? contributorParts.push(
+              `<span class="quire-contributor__affiliation">${ contributor.affiliation }</span>`
+            )
+            : null
+          return `
+            <li class="quire-contributor" id="${slugify(contributor.id)}">${contributorParts.join(separator)}</li>
+          `
+        })
+        contributorsElement = `
+          <ul class="quire-contributors-list ${format} align-${align}">
+            ${listItems.join('')}
+          </ul>
+        `
+        break
+      }
+      case 'string': {
+        const last = contributorNames.pop()
+        const namesString =
+          contributorNames.length >= 1
+            ? contributorNames.join(', ') + ', and ' + last
+            : last
+        contributorsElement = `<span class='quire-contributor'>${namesString}</span>`
+        break
+      }
+      default:
+        contributorsElement = ''
+        break
+    }
+
+    return html`${contributorsElement}`
+  }
+}

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/shortcodes/figure.js

@@ -0,0 +1,70 @@
+const chalkFactory = require('~lib/chalk')
+const { oneLine } = require('~lib/common-tags')
+
+const { warn } = chalkFactory('shortcodes:figure')
+
+/**
+ * Render an HTML <figure> element
+ *
+ * @param      {string}   alt
+ * @param      {string}   aspectRatio
+ * @param      {string}   caption
+ * @param      {string}   credit
+ * @param      {string}   download
+ * @param      {string}   id
+ * @param      {string}   label
+ * @param      {string}   mediaId
+ * @param      {string}   mediaType
+ * @param      {string}   src
+ *
+ * @return     {boolean}  An HTML <figure> element
+ */
+module.exports = function (eleventyConfig, { page }) {
+  const figureAudio = eleventyConfig.getFilter('figureAudio')
+  const figureImage = eleventyConfig.getFilter('figureImage')
+  const figureLabel = eleventyConfig.getFilter('figureLabel')
+  const figureModalLink = eleventyConfig.getFilter('figureModalLink')
+  const figureTable = eleventyConfig.getFilter('figureTable')
+  const figureVideo = eleventyConfig.getFilter('figureVideo')
+  const getFigure = eleventyConfig.getFilter('getFigure')
+  const slugify = eleventyConfig.getFilter('slugify')
+
+  return async function (id, classes=[]) {
+    classes = typeof classes === 'string' ? [classes] : classes
+
+    /**
+     * Merge figures.yaml data and additional params
+     */
+    let figure = getFigure(id)
+    if (!figure) {
+      warn(`The figure id "${id}" was found in the template "${page.inputPath}", but is not defined in "figures.yaml"`)
+      return ''
+    }
+    figure = { ...figure, ...arguments }
+    if (!page.figures) page.figures = []
+    page.figures.push(figure)
+
+    const { mediaType } = figure
+
+    const component = async (figure) => {
+      switch (true) {
+        case mediaType === 'soundcloud':
+          return figureAudio(figure)
+        case mediaType === 'table':
+          return await figureTable(figure)
+        case mediaType === 'video':
+        case mediaType === 'vimeo':
+        case mediaType === 'youtube':
+          return figureVideo(figure)
+        default:
+          return await figureImage(figure)
+      }
+    }
+
+    return oneLine`
+      <figure id="${slugify(id)}" class="${['q-figure', 'q-figure--' + mediaType, ...classes].join(' ')}">
+        ${await component(figure)}
+      </figure>
+    `
+  }
+}

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/shortcodes/figureGroup.js

@@ -0,0 +1,54 @@
+const { html } = require('~lib/common-tags')
+const chalkFactory = require('~lib/chalk')
+const figure = require('./figure')
+
+const { warn } = chalkFactory('shortcodes:figureGroup')
+
+/**
+ * Render multiple <figure> elements in a group
+ *
+ * @param      {Object}  eleventyConfig  eleventy configuration
+ * @param      {Array<id>}  ids          An array or list of figure identifiers
+ * @return     {String}  An HTML string of the elements to render
+ */
+module.exports = function (eleventyConfig, { page }) {
+
+  return async function (columns, ids=[]) {
+    columns = parseInt(columns)
+
+    /**
+     * Parse the ids arg for figure identifiers
+     * The ids arg can be either a string of comma separated figure ids,
+     * @example 'fig-1, fig-2, fig-3'
+     * or an array of identifier strings
+     * @example ['fig-1', 'fig-2', 'fig-3']
+     */
+    ids = Array.isArray(ids) ? ids : ids.split(',').map((id) => id.trim())
+
+    if (!ids.length) {
+      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' %}`)
+    }
+
+    // if (ErrorNoMediaType) {
+    //   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>`)
+    }
+
+    return html`
+      <figure class="q-figure q-figure--group">
+        ${figureTags.join('\n')}
+      </figure>
+    `
+  }
+}

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/shortcodes/figureRef.js

@@ -0,0 +1,42 @@
+const { oneLineCommaListsAnd } = require('~lib/common-tags')
+const chalkFactory = require('~lib/chalk')
+
+const { warn } = chalkFactory('shortcodes:figureRef')
+
+/**
+ * Generate markdown for an inline list of links to figures on the page.
+ *
+ * @example reference a single figure
+ *   {% ref 'fig-4' %}
+ *  renders the following markdown string
+ *   [fig. 4](#fig-4)
+ *
+ * @example reference two figures
+ *   {% ref 'fig-4', 'fig-5' %}
+ *  renders the following markdown string
+ *   [figs. 4](#fig-4) and [5](#fig-5)
+ *
+ * @example reference three or more figures
+ *   {% ref 'fig-4', 'fig-5', 'fig-6', 'fig-7' %}
+ *  renders the following markdown string
+ *   [figs. 4](#fig-4), [5](#fig-5), [6](#fig-6), and [7](#fig-7)
+ */
+module.exports = function(eleventyConfig) {
+  return function (ids) {
+    if (!ids.length) {
+      warn(`NoId: Figure 'ref' shortcode must include one or more values corresponding to the 'id' of a figure on the page. @example {% ref 'fig-1', 'fig-7', 'fig-11' %}`)
+    }
+
+    const label = ids.length > 1 ? 'figs.' : 'fig.'
+
+    // transform the array of figure ids into and array of markdown links
+    const links = ids.split(',').map((id, index) => {
+      id = id.trim()
+      let text = id.replace(/^fig-/i, '')
+      if (index === 0) text = `${label} ${text}`
+      return `[${text}](#${id})`
+    })
+
+    return oneLineCommaListsAnd`${links}`
+  }
+}

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/shortcodes/index.js

@@ -0,0 +1,29 @@
+const addComponentTag = require('../../_plugins/components/addComponentTag')
+const annoref = require('./annoref')
+const backmatter = require('./backmatter')
+const bibliography = require('./bibliography')
+const cite = require('./cite')
+const contributors = require('./contributors')
+const figure = require('./figure')
+const figureGroup = require('./figureGroup')
+const ref = require('./figureRef')
+const shortcodeFactory = require('../../_plugins/components/addShortcode')
+const title = require('./title')
+const tombstone = require('./tombstone')
+
+module.exports = function(eleventyConfig, collections, options) {
+  const addShortcode = shortcodeFactory(eleventyConfig, collections)
+
+  addComponentTag(eleventyConfig, 'annoref', annoref)
+  eleventyConfig.addPairedShortcode('backmatter', function(content, ...args) {
+    return backmatter(eleventyConfig)(content, ...args)
+  })
+  addShortcode('bibliography', bibliography)
+  addShortcode('cite', cite)
+  addComponentTag(eleventyConfig, 'contributors', contributors)
+  addShortcode('figure', figure)
+  addShortcode('figuregroup', figureGroup)
+  addShortcode('ref', ref)
+  addShortcode('title', title)
+  addShortcode('tombstone', tombstone)
+}

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/shortcodes/title.js

@@ -0,0 +1,24 @@
+const { oneLine } = require('~lib/common-tags')
+
+/**
+ * A shortcode for the Quire project or publication title,
+ * currently used for the Quire cover template.
+ */
+module.exports = function(eleventyConfig) {
+  const markdownify = eleventyConfig.getFilter('markdownify')
+  const { subtitle, title } = eleventyConfig.globalData.publication
+
+  return function(params) {
+    const separator = title.slice(-1).match(/[a-zA-Z]/)
+      ? `<span class="visually-hidden">:</span>`
+      : ''
+
+    const subtitleElement = subtitle
+      ? `<span class="subtitle">${markdownify(subtitle)}</span>`
+      : ''
+
+    const titleElement = `<span class="title">${markdownify(title)}</span>`
+
+    return oneLine`${titleElement}${separator}&#32;${subtitleElement}`
+  }
+}

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/shortcodes/tombstone.js

@@ -0,0 +1,49 @@
+const { html, oneLine } = require('~lib/common-tags')
+const path = require('path')
+
+/**
+ * A shortcode for tombstone display of object data on an entry page
+ */
+module.exports = function(eleventyConfig, { page }) {
+  const { config, objects } = eleventyConfig.globalData
+  const { objectLinkText } = config.entryPage
+
+  return function (pageObjects = []) {
+    const titleCase = eleventyConfig.getFilter('titleCase')
+    const icon = eleventyConfig.getFilter('icon')
+    const markdownify = eleventyConfig.getFilter('markdownify')
+    const properties = objects.object_display_order
+
+    const tableRow = (object, property) => {
+      if (!object || !property || !object[property]) return ''
+
+      return html`
+        <tr>
+          <td>${titleCase(property)}</td>
+          <td>${markdownify(object[property].toString())}</td>
+        </tr>
+      `
+    }
+
+    const objectLink = (object) => object.link
+      ? oneLine`
+        <a class="button" href="${object.link}" target="_blank">
+          ${objectLinkText} ${icon({ type: 'link', description: '' })}
+        </a>`
+      : ''
+
+    const table = (object) => html`
+      <section class="quire-entry__tombstone">
+        <div class="container">
+          <table class="table is-fullwidth">
+            <tbody>
+              ${properties.map((property) => tableRow(object, property)).join('')}
+            </tbody>
+          </table>
+          ${objectLink(object)}
+        </div>
+      </section>
+    `
+    return pageObjects.map((object) => table(object)).join('')
+  }
+}

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/transforms/README.md

@@ -0,0 +1,3 @@
+## Eleventy Transforms
+
+[Eleventy Transforms](https://www.11ty.dev/docs/config/#transforms) are functions that modify template output. A transform function must return the original *or* transformed content.

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/transforms/format/index.js

@@ -0,0 +1,22 @@
+const chalkFactory = require('~lib/chalk')
+const path = require('path')
+const prettier = require('prettier')
+
+const { error } = chalkFactory('transforms:format')
+
+/**
+ * An Eleventy transform function to format ouput HTML using Prettier
+ * @see https://prettier.io/docs/en/api.html
+ *
+ * @param      {String}  content
+ * @return     {String}  transformed content
+ */
+module.exports = async function (content) {
+  let result
+  try {
+    result = await prettier.format(content, { filepath: this.outputPath })
+  } catch (errorMessage) {
+    error(`Eleventy transform error formatting output for ${this.outputPath}.\n${errorMessage}`)
+  }
+  return result || content
+}

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/transforms/index.js

@@ -0,0 +1,24 @@
+const chalk = require('chalk')
+const fs = require('fs-extra')
+const path = require('path')
+
+const formatOutput = require('./format')
+const outputs = require('./outputs')
+
+/**
+ * An Eleventy plugin to configure output transforms
+ *
+ * @param      {Object}  eleventyConfig  Eleventy configuration
+ * @param      {Object}  collections  Eleventy collections
+ */
+module.exports = function(eleventyConfig, collections) {
+  /**
+   * Registers a transform to format output using Prettier
+   */
+  eleventyConfig.addTransform('format', formatOutput)
+
+  /**
+   * Register plugin to generate output for epub, html, and pdf using `transforms`
+   */
+  eleventyConfig.addPlugin(outputs, { eleventyConfig, collections })
+}

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/transforms/outputs/README.md

@@ -0,0 +1,54 @@
+## Outputs
+Quire's multiple publication formats HTML, EPUB and PDF are managed by the `outputs` plugin, allowing separate publication outputs to be generated during a single build process.
+
+During the `transform` the parsed content for each page is intercepted, copied, and modified before being written to the `public` directory for PDF and EPUB outputs and then returned by the `transform` function for the site HTML output. This allows the three separate publication output types to be created during one build process.
+
+### Filters
+Elements in the markup can be included or excluded using the data properties `data-include-in-output` and `data-exclude-from-output` respectively, with a value of the output types. Elements without either of these tags will be included in all outputs.
+
+#### Examples
+An image that will be included in `html` and `pdf` output, but excluded from `epub`:
+```html
+<img src="image.jpg" data-outputs-include="html,pdf" />
+```
+
+An image that will be included in `pdf` and `epub`, but excluded from `html`:
+```html
+<img src="image.jpg" data-outputs-exclude="html" />
+```
+
+### Conditional Rendering
+For components that should render different markup for different output formats, a shortcode directory can include modules for each output format: `html.js`, `epub.js`, `pdf.js`. If the output for `epub` and `pdf` are the same, you can create a `print.js` module, which will be used to generate the markup for both `epub` and `pdf`. The shortcode should then also include an `index.js` that calls the `renderOutputs` function (see example below).
+
+Example directory structures for a `video` shortcode with conditional rendering:
+
+```
+- video/
+  - index.js
+  - pdf.js
+  - epub.js
+  - html.js
+```
+
+or
+
+```
+- video/
+  - index.js
+  - print.js
+  - html.js
+```
+
+```javascript
+// shortcode/video/index.js
+
+/**
+ * Render all `video` outputs
+ */
+module.exports = function(eleventyConfig) {
+  const renderOutputs = eleventyConfig.getFilter('renderOutputs')
+  return function(params) {
+    return renderOutputs(__dirname, params)
+  }
+}
+````

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/transforms/outputs/epub/README.md

@@ -0,0 +1,8 @@
+# EPUB Transform
+
+The `epub` transform prepares the Eleventy build output for conversion to an EPUB by a separate library.
+
+This transform is run at the end of the Eleventy build before individual page HTML files are written. For each template the [`epub/tranform`](transform.js) function is called with the HTML output from the build and the file output path.
+
+The transform intercepts the HTML content and creates a `JSDOM` instance to replace the [`base` layout](_layouts/base.11ty.js) with the [`epub/layout`](transforms/outputs/epub/layout.js) and remove `html-only` or `pdf-only` elements before writing each file to the output directory with a sequence indentifier pattern: `_site/epub/<sequence>_<filename>`.
+

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/transforms/outputs/epub/index.js

@@ -0,0 +1,64 @@
+const fs = require('fs-extra')
+const manifestFactory = require('./manifest.js')
+const path = require('path')
+const sass = require('sass')
+const transform = require('./transform.js')
+const writer = require('./writer.js')
+
+module.exports = (eleventyConfig, collections) => {
+  const { outputDir } = eleventyConfig.globalData.config.epub
+  const write = writer(outputDir)
+
+  const assetsDir = '_assets'
+
+  /**
+   * Create "epub" global data property
+   */
+  eleventyConfig.addGlobalData('epub', { assets: [], readingOrder: [] })
+  /**
+   * Write sequenced files to `epub` directory during transform
+   */
+  eleventyConfig.addTransform('epub', function (content) {
+    return transform.call(this, eleventyConfig, collections, content)
+  })
+  /**
+   * Write publication JSON and copy assets
+   */
+  eleventyConfig.on('eleventy.after', () => {
+    const manifest = manifestFactory(eleventyConfig)
+    write('manifest.json', JSON.stringify(manifest))
+
+    /**
+     * Copy font and icon directories
+     */
+    const assetDirsToCopy = ['fonts', 'material-icons']
+
+    assetDirsToCopy.forEach((name) => {
+      const source = path.join(eleventyConfig.dir.input, assetsDir, name)
+      const dest = path.join(outputDir, assetsDir, name)
+      fs.copySync(source, dest)
+    })
+
+    /**
+     * Copy styles
+     */
+    const sassOptions = {
+      loadPaths: [
+        path.resolve('node_modules')
+      ]
+    }
+    const styles = sass.compile(path.resolve('content', assetsDir, 'styles', 'epub.scss'), sassOptions)
+    write(path.join(assetsDir, 'epub.css'), styles.css)
+
+    /**
+     * Copy assets
+     */
+    const { assets } = eleventyConfig.globalData.epub
+    for (const asset of assets) {
+      fs.copySync(
+        path.join(eleventyConfig.dir.output, asset),
+        path.join(outputDir, asset)
+      )
+    }
+  })
+}

package/src/lib/quire/versions/1.0.0-pre-release.2/_plugins/transforms/outputs/epub/layout.js

@@ -0,0 +1,17 @@
+const { html } = require('~lib/common-tags')
+module.exports = ({ body, language, title }) => {
+  const stylesheets = ''
+  return html`
+    <?xml version="1.0" encoding="UTF-8"?>
+    <!DOCTYPE html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="${language}">
+      <head>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" type="text/css" href="/_assets/epub.css" />
+        <title>${title}</title>
+        ${stylesheets}
+      </head>
+      ${body}
+    </html>
+  `
+}