content-strategy-forum / csf-glossary

A collaborative content glossary for the UX professions.
https://content-strategy-forum.github.io/csf-glossary/
3 stars 0 forks source link

[dev] authors/affiliations front matter via Liquid include #68

Closed wion closed 7 years ago

wion commented 7 years ago

Anyone who can shed some light, please speak up, because YAML and Liquid are not my strengths.

Some context... While we can add author and affiliation directly to files as regular HTML lists, they will be complex lists and could be hard for authors to edit without mistakes. To get around this, I'm attempting to serialize the author data as YAML front matter, put the associated markup lists in an include file, and call the include file using Liquid. But it's proving to be difficult to figure out.

The associated front matter has this pattern:

contributors:
  -
    who: “First Last”
    affiliation: “Entity Name”
    affiliation_url: “url”
  -
    who: “First Last”
    affiliation: “Entity Name”
    affiliation_url: “url”
  - 
    # etc

Contributors copy the four lines denoting an individual's data, pastes them under what exists and adds their own values where indicated, for example:

contributors:
  -
    who: “Destry Wion”
    affiliation: “CSF”
    affiliation_url: “https://csf.community”
  - 
    # etc

The markup for the associated output it is in an include file called writers.html and looks like this when no Liquid is added:

<section class="contributors">
    <ul class="authors nomark">
            <li>First Last<sup>1</sup></li>
        </ul>
    <ol class="affiliations nomark">
            <li><sup>1</sup><a href="url/for/affiliation">Entity Name</a></li>
        </ol>
</section>

In actuality, there would not be the values in there, just Liquid tags to dynamically pluck them from the front matter and output them when the file is inserted in the main definition file.

(For those wondering, Liquid is a markup language for working with YAML front matter in HTML.)

And the include tag is a Liquid tag and is supposed to be something like this:

{% include writers.html [important stuff missing here] %}

The concept is described here for anyone who can understand it... http://hamishwillee.github.io/2014/11/13/jekyll-includes-are-functions/

It's all way over my head, unfortunately, so until it's figured out by someone smarter than me, we'll have to work with HTML in a more old-fashioned manner.

wion commented 7 years ago

This one has been figured out. 👍

The relevant YAML:

collaborators:
  - 
    who: 
    affiliation: 
    affiliation_url: 
  - 
    who: 
    affiliation: 
    affiliation_url:
  - 
    etc:

The related include markup:

<section class="contributors">
    <ul class="authors nomark">
      {% for collaborator in page.collaborators %}
        <li>{{ collaborator.who }}<sup>{{ forloop.index }}</sup></li>
      {% endfor %}
    </ul>
    <ol class="affiliations nomark">
      {% for collaborator in page.collaborators %}
        <li><sup>{{ forloop.index }}</sup><a href="{{ collaborator.affiliation_url }}">{{ collaborator.affiliation }}</a></li>
      {% endfor %}
    </ol>
</section>

And the include tag to call the markup:

{% include authors.html %} 

It's been suggested to me that it would be better to handle author data from a central YAML file, then call the data via the new local front matter variable.

So first we create a new YAML file in the location Jekyll expects: /_data/collaborators.yml, and add a new object for each collaborator:

person_one:
  who:
  affiliation:
  affiliation_url:

person_two:
  who:
  affiliation:
  affiliation_url:

etc:

Each new collaborator would need to add their own lines to the file, for example:

destry_wion:
  who: "Destry Wion"
  affiliation: "Wion Media"
  affiliation_url: "https://wion.media"

jane_doe:
  who: "Jane Doe"
  affiliation: "etc"
  affiliation_url: "etc"

john_smith:
  etc

Then in the YAML front matter of the definition file an author works in, the collaborators variable becomes an array like this for each collaborator that contributes to the respective file:

---
collaborators: [destry_wion, ...]

The markup in the include file (authors.html) is the same except we replace page.collaborators with site.data.collaborators to account for the new .yml data file location.

And that (fingers crossed) should do it.

wion commented 7 years ago

I'm attempting to go with the new method. It's not quite working yet.

wion commented 7 years ago

For the time being we're running both methods, and it works pretty good. The main .yml file feeds the index list of contributors, and writers will still add their names in the front matter of definition files.