Feature/update about

[interim17]

Problem

UX approved removing the Youtube/learn button from the normal catalog and updated the styling.

There are two sets of changes worth mentioning in this PR.

1. .yml doesn't support variables per se, but you can use an anchor alias pattern like this:

someFields: &someFields
  - &f_text       { label: "Text", name: "text", widget: "string" }
  - &f_link
    label: "URL"
    name: "link"
    widget: "list"
    required: false
    fields:
      - { label: "Text", name: "text", widget: "string" }
      - { label: "URL",  name: "url",  widget: "string" }

Then reference that anchor like this: fields: *someFields

This makes our config more DRY and more reliable to edit if you ever want to make a change to a data structure that is shared by more than one part of the config.

If we like this pattern I have another branch ready that refactors the config to use anchors/aliases in a number of other places, we can take hundreds of lines out of the config. We could go further and use a library like js-yaml to build the config but that would be a bigger lift.
feature/update-about...feature/anchor-alias
Takes about 300 lines out of the config.

2. In anticipation of removing the gatsby-transformer-remark-frontmatter at some point I reworked the way we put data into markdown when text needs to be styled, or have links in it. Currently we use html to put links in markdown in some places, and in other places we have separate query fields for text to style/emphasize or for links.

RichText refers to queried fields that have a main text field, an optional emphasis field, and an option link field with text and url subfields.

The util renderRichTextFields will match the emphasis text in the main text body and italicize it, returning a span, and will return an anchor tag matching the text from a link field to the text in the main body.

This seems more straightforward than the way I was doing it before. The data for a given block of text is not spread out between multiple query fields, and the formatting utils are a bit more complicatd, but generalized and not in the component like they were before.

Getting the necessary data before required querying

- primary
- emphasis
- newsletter
- disease
- links
-- newsletter
--- url
--- text
-- disease
--- url
--- text

And then composing the primary and disease sections with the appropriate emphasis and links, which was not a relationship captured by the data.

Now we query:

primary
- text
- emphasis
-- text
- link
-- text
-- url

The whole block is typed as RichText (good name? idk) and passed into renderRichTextFields, with a styling arg in the case of emphasis

• New feature (non-breaking change which adds functionality)

[netlify]

✅ Deploy Preview for cell-catalog ready!

Name	Link
🔨 Latest commit	03b3631
🔍 Latest deploy log	https://app.netlify.com/projects/cell-catalog/deploys/68a3a44f2553ff0008190bf1
😎 Deploy Preview	https://deploy-preview-292--cell-catalog.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.