Server sided block handling

[trieloff]

Overview

In Word and Google Docs, tables are easier to create and manage than lists and are therefore used for scenarios where other constructs in Markdown would look less weird and feel more natural. As outlined in #143, we currenly achieve the correct styling on the client by interpreting the table DOM and transforming it into something more useful.

This discussion proposes a "don't let markdown get weird" approach to these use cases.

Details

1. Top-Level Tables become sections, table headings become metadata

The table heading will become metadata, treating the table heading either as a class attribute or as straight yaml.

The table above would become:

---
class: Special Highlight
---

…

---

If there are multiple columns, the headings will be concatenated to consolidate metadata.

2. Tables within tables are tables

There is no arbitrary depth nesting of sections, instead a table nested within a table will be represented as a table within a section.

Rows and columns become segments in a segmented list

Consider the table below:

We want to present repeated tuples of video and text, where each element can be any series of block elements.

The DocBook format has the concept of a segmentedlist which has the notion of titled tuples. Some Markdown extensions have the concept of Definition Lists which has the notion of key-value-pairs:

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.

This even renders reasonably well in GitHub, which has no support for this syntax extension:

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.

To support block elements, the Markdown blockquote syntax can be borrowed to create something like this:

---
class: video text
---

video
: https://www.youtube.com/watch?v=kwLTe-ueHA8
text
: ##### Tues, April 21st
: Tips for Faster Editing with co-host Ryan Connolly
: [https://documentcloud.adobe.com/link/track?uri=urn%3Aaaid%3Ascds%3AUS%3A8b451283-daa7-4bbe-8bad-55460af8caf8](Download PDF)

video
: https://www.youtube.com/watch?v=818roIRrZm0
text
: ###### Tues, April 28th
: Vlogging Made Easy with co-host Shameless Maya
: [https://documentcloud.adobe.com/link/track?uri=urn%3Aaaid%3Ascds%3AUS%3A9f660f99-2e3e-400e-ae71-6d8410b95b8c](Download PDF)

---

The resultant MDAST would look like this:

If the columns have no title, then column-<n> will be used.

The empty line between each table row is mandatory, multiple empty lines are permissible.

The generated HTML should be div and class based rather than using dl, dt, and dd, so that no CSS reset is needed. Each seg in the MDAST should create one div

Proposed Actions

1. get agreement that tables become segmented lists in Markdown and divs in HTML
2. upgrade pipeline, word2md, gdocs2md to remark@v9
3. implement a parser for segmented lists
4. implement a to-markdown conversion for segmented lists
5. implement a to-html conversion for segmented lists
6. use it in pipeline
7. and word2md
8. and gdocs2md

[tripodsan]

1. get agreement

so you want to convert the tables already in word2md and gdocs2md ? instead of doing it client side?

2. upgrade pipeline, word2md, gdocs2md to remark@v9

this is unrelated, but already in progress (and it a big mess):

• migrate remark to v9 helix-pipeline#873
• https://github.com/adobe/helix-word2md/issues/453
• https://github.com/adobe/helix-documents-support/issues/83
• https://github.com/adobe/helix-gdocs2md/issues/360

3. implement a parser

I assume for the segmented lists.

4. implement a to-text conversion

I assume to-markdown of the segmented lists

5. implement a to-html conversion

of the segmented lists...

6. use it in pipeline

ok.

7. and word2md
8. and gdocs2md

so for that we need a general mdast-util-table-to-seglists util.
this is better hosted in helix-document-support.

[tripodsan]

On big problem I see is, that the definition list in mdast is not a block container, i.e. it doesn't have a PhrasingContext:
https://github.com/syntax-tree/mdast#definition

[trieloff]

Yes to all questions raised in #159 (comment)

I'll clarify

[tripodsan]

@trieloff I think it would be helpful to have a POC for 4. and 5. so see if we can express what's needed in segmented lists:

a. create some examples in code, using mdast-builder to create the mdast with segmeted lists.
b. create a to-html version
c. create a to-markdown version

[davidnuescheler]

this looks great.

i think for the sake of authoring i started using human readable block names like "Special Highlight", but i would expect them to be translated to "special-highlight" as a classname, this way we get something that's intuitive for the author and intuitive css developer.

in a similar way this would be true for the definition list that is turned into <div>s with classes, however, i think the transformation from eg. First Term to first-term should only happen at the time when it becomes related to an html (class) attribute. Maybe that's too confusing as it would yield something like:

---
class: first-term second-term
---

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.

and

<div class="first-term second-term">
    <div>
       <div class="first-term">
        This is the definition of the first term.
       </div>
       <div class="second-term">
        This is one definition of the second term.
       </div>
  </div>
</div>

also i think it would be advisable for styling purposes if the class of the outermost div would be first-term-second-term rather than first-term second-term

[trieloff]

i think for the sake of authoring i started using human readable block names like "Special Highlight", but i would expect them to be translated to special-highlight as a classname, this way we get something that's intuitive for the author and intuitive css developer

OK

also i think it would be advisable for styling purposes if the class of the outermost div would be first-term-second-term rather than first-term second-term

Isn't .first-term.second-term just as easy to select?

[kptdobe]

Dumb question: how would you then create... a table ?

[trieloff]

Tables within tables are tables

Put a table inside a table.

[davidnuescheler]

as a quick follow up on this:
in the meantime i found that the more intuitive layout for blocks, looks more like this...

while this may be an extreme case due to the merged cells, i think it is more intuitive for the author to have a merged table header identifying the block.

which in turn would leave us with a different representation in markdown from the definition list. it turns out that while the columns are practical from an DOM output perspective to add them as classes it is not intuitive for the author and somewhat redundant as every type of a block has a setup of columns or rows that it expects.

not sure where this leaves us but maybe @trieloff @tripodsan have ideas.

[davidnuescheler]

one the simple block (with just one table cell of actual content) see the "Special Highlight" at the beginning of this post. it turns out that we need to be able to group multiple blocks and content into a section, so i think the front matter and thematic break approach is probably not going to work either.

[tripodsan]

one the simple block (with just one table cell of actual content) see the "Special Highlight" at the beginning of this post. it turns out that we need to be able to group multiple blocks and content into a section, so i think the front matter and thematic break approach is probably not going to work either.

so if you have

┌──────────┐
│Special   │
├──────────┤
│foo       │
│          │
│          │
└──────────┘
┌──────────┐
│Animation │
├──────────┤
│bar       │
│          │
│          │
└──────────┘

how would that be in html ?

<section>
   <div class='special'>foo</div>
   <div class='animation'>boo</div>
</section>

• how do you detect that both tables are "glued" together?

maybe just 1 table with a considerably smaller row / 1-liner:

┌──────────┐
│Special   │
├──────────┤
│foo       │
│          │
│          │
├──────────┤
│Animation │
├──────────┤
│bar       │
│          │
│          │
└──────────┘

maybe with this markdown:

---
class: Special, Animation
---

Special
: foo

Animation
: bar

I can imagine, to have something like the css-grid style in the front matter that then addresses the different definition lists.

[tripodsan]

┌──────────┐
│Special   │
├──────────┤
│foo       │
│          │
│          │
├──────────┤
│Animation │
├────┬─────┤
│bar │img  │
│    │     │
│    │     │
└────┴─────┘

---
class-special: special
class-animation: animation, image
---

special
: foo

animation
: bar

animation
: img

[tripodsan]

maybe this is a combination of the 2. having a section generated, since it has only 1 table header:

---
class: Columns
---

first
: The way we move ....

second
: ![image](....)

…

---
class: Columns
---

first
: ![image](....)

…

---
class: Columns
---

first
: ![image](....)

second
: Joyful Rythm ...
…

---

[trieloff]

Looks reasonable, but I'm not sure I've understood the semantics of @davidnuescheler's latest example.

[trieloff]

See https://github.com/trieloff/directivetest for an example of using directives (https://talk.commonmark.org/t/generic-directives-plugins-syntax/444) - powered by https://github.com/remarkjs/remark-directive

We'd just have to decide what the name of the block directive should be and how to represent columns.

[tripodsan]

wow... super ugly :-)

i'd prefer the segmented lists

[trieloff]

The segmented lists definitely look better, but:

• directives are somewhat standard
• directives are @wooorm's recommendation
• the implementation is free
• we can easily put things like colspan into the metadata

The segmented lists assume at least some kind of uniformity.

[tripodsan]

hmm, ok, then maybe we can simplify it a bit

# hero title
with a white background

---
## some section header
highlighted by using a light grey background

┌──────────┐
│SPECIAL   │
├──────────┤
│foo       │
│          │
│          │
└──────────┘

and watch the video

┌──────────┐
│ANIMATION │
├────┬─────┤
│bar │img  │
├────┼─────┤
│bar │img  │
│    │     │
│    │     │
├────┴─────┤
│footer    │
└──────────┘

---
more content

would become:

# hero title
with a white background

---
## some section header
highlighted by using a light grey background

:::block{.special}

foo

:::

and watch the video

:::block{.animation}

bar

::next

img

::break

bar

::next

img

::break{.footer}

footer

:::

---
more content

would result in:

<div class="section">
    <h1>hero title</h1>
    <p>with a white background</p>
</div>
<div class="section">
    <h2>some section header</h2>
    <p>highlighted by using a light grey background</p>
    <div>
        <div class="special">
            <div>foo</div>
        </div>
    </div>
    <p>and watch the video</p>
    <div class="animation">
        <div>
            <div>bar</div>
            <div>img</div>
        </div>
        <div>
            <div>bar</div>
            <div>img</div>
        </div>
        <div class="footer">
            <div>footer</div>
        </div>
    </div>
    </div>
</div>
<div class="section">
    <p>more content</p>
</div>

Not sure what the expected HTML should be. @davidnuescheler ?

block
: starts a new block

break
: starts a new "row"

next
: starts next "column"

[davidnuescheler]

i am adding a couple of real-world examples for blocks in wild...

https://blog.adobe.com/en/2021/01/14/adobe-stock-motion-audio-creative-trends-2021.html

https://pages.adobe.com/character/en/puppets.html

https://pages.adobe.com/stock/en/advocates/identity-and-gender

the requests to the respective .md (or a look at sharepoint / gdrive respectively) will reveal how they are authored.
as for the expected output DOM, i think the decorateTables function is a great starting point:

https://github.com/adobe/pages/blob/master/templates/default/default.js#L165-L190

[trieloff]

Another round, based on @davidnuescheler's examples.

I've created three variants of each of the three examples:

1. tables with HTML: as a comparison, I've included the status quo, Markdown tables with HTML
2. nested directives as suggested by @tripodsan in Server sided block handling #159 (reply in thread) – I've simplified a bit more after discussions with David. Colspans and even column names do not contain meaningful information in the meta model, so I'm leaving them out.
3. directives and blockquotes: directives indicate start and end of a table, and row breaks, but the individual cells use blockquotes (we can discuss replacing the > with :). We can further simplify the ::break marker to :: if we value terseness
4. grid table: I've used pandoc to generate grid tables from our HTML.

# Tables

Cards from Character Animator

|Callout three||
|-|-|
|![](https://hlx.blob.core.windows.net/external/dda817bda66620bdc8e63904251583be1294a234#image.jpeg)|<h3>Bluster</h3><p>Vector snowman with head parallax, dangling scarf, and snowy background. Featured in <a href="https://youtu.be/0Va3_e-4bKE">Creating an Animated Livestream</a>.</p><p><a href="https://adobe.ly/2SNco6q">Download</a></p>|
|![](https://hlx.blob.core.windows.net/external/2bc7fa6accf17a3096f0a97a138e52f5c629c79b#image.jpeg)|<h3>Brooklyn Buddies</h3><p>Low-poly fox, bunny, and pug characters with cycle-based head turns, walking, and background. Featured in <a href="https://youtu.be/w2Hcw3mb6zw">New Puppets January 2019</a>. Created by <a href="https://youtube.com/theweathergirls">Emily Watts</a>.</p><p><a href="https://adobe.ly/2NAuGqe">Download</a></p>|
|![](https://hlx.blob.core.windows.net/external/4c1479f00910aded125bc16ee83ac7761ca0a883#image.png)|<h3>Barbarasaurus</h3><p>Clay sculpted dinosaur newscaster with triggered graphics and news crawls. Featured in <a href="https://youtu.be/IIsxwN9J4Ww">Make a Clay Puppet</a>. Created by <a href="https://www.shmideo.com/">Dovid Taub</a>.</p><p><a href="https://adobe.ly/2HjCnyt">Download</a></p>|
|![](https://hlx.blob.core.windows.net/external/6c17267c5da4ae56efeb97f68c4e4e946c11ca62#image.jpeg)|<h3>Red Monster 3D</h3><p>Updated 3D version of the Character Animator mascot, as seen in the <a href="https://youtu.be/dq02549_ycg">The Story Behind Red Monster</a>. Created by <a href="https://davidarbor.com/">David Arbor</a>.</p><p><a href="https://adobe.ly/2S2CCUN">Download</a></p>|

Columns from Adobe Stock Advocates

|Columns||
|-|-|
|<h4>The concept of the gender binary is being increasingly questioned and scrutinized — and rightly so.</h4><p>In recent years, people have only become more vocal about our need to reassess how we think about gender, and brands have begun to place a high priority on truly inclusive visuals.<br> We need authentic, empowering, everyday narratives that represent people across the gender spectrum. With this topic, we explore the true lived experiences of individuals and communities through the lens of gender, and we celebrate the LGBTQ+ community. Together, we can use the power of inclusivity to highlight stories about living life on your own terms.</p><p><a href="https://contributor.stock.adobe.com/?as_channel=microsite&#x26;as_campclass=brand&#x26;as_audience=contributors&#x26;as_campaign=advocates&#x26;as_source=lp&#x26;as_camptype=awareness&#x26;as_content=identityandgender">Submit your work to Adobe Stock</a></p><p></p>|<p><img src="https://hlx.blob.core.windows.net/external/7a3ef836cca9d8c4ce2d6871033f27f00dd12741#image.jpeg"></p><p>Adobe Artist: Leandro Crespi - Stocksy</p>|
|<p><img src="https://hlx.blob.core.windows.net/external/c461432d7b8a392d8a899020f5a12710f9b74792#image.png"></p><p>Adobe Artist: Stocksy</p>||
|<p><img src="https://hlx.blob.core.windows.net/external/b5ae0673812957ebaf8152a75708ef9cad4e0413#image.png"></p><p>Adobe Artists: Fancy Bethany, Lucas Ottone - Stocksy, Jennifer Brister - Stocksy &#x26; Hilde Atalanta</p>|<h3><strong>Identity &#x26; Gender:</strong>Inspiration</h3><p></p><p>Looking for inspiration? Here are some angles to consider. Pick one and run with it or explore your own unique take on how individuals are expressing their authentic selves through and beyond gender.</p><p></p>|
|<h2>Every woman honored</h2><p>Women moving through everyday work and home life with power and purpose. Cis women and transwomen playing with, reversing, subverting, or all-out shattering preconceived ideas about gender and how we express it.</p><p></p>|<p><img src="https://hlx.blob.core.windows.net/external/11c115a543a672269350e4c88d17c9432f742ce8#image.jpeg"></p><p>Adobe Artist: Zinkevych</p>|

Blocks from Adobe Blog


| Block Embed                                                    |
| -------------------------------------------------------------- |
| <https://www.youtube.com/watch?v=AgR7BVpxwhw&feature=youtu.be> |

This past summer, we launched [Adobe Stock Audio](https://stock.adobe.com/audio), featuring a curated collection of royalty-free music and audio tracks from two powerhouse agencies, Epidemic Sound and Jamendo. Audio drives multimedia like nothing else, and 2020 saw a dramatic rise in content creation, with no signs of slowing down. In other words, it is the perfect time for us to roll out our first-ever Audio Trends forecast for 2021.



| Animation                                                                                       |
| ----------------------------------------------------------------------------------------------- |
| <https://hlx.blob.core.windows.net/external/45b8d3f95c5003a81426fa76e977de8937dd0254#image.mp4> |

# Directives

Cards from Character Animator

::::Callout three
:::
![](https://hlx.blob.core.windows.net/external/dda817bda66620bdc8e63904251583be1294a234#image.jpeg)
:::

:::
### Bluster

Vector snowman with head parallax, dangling scarf, and snowy background. Featured in [Creating an Animated Livestream](https://youtu.be/0Va3\_e-4bKE).

[Download](https://adobe.ly/2SNco6q)
:::

::break

:::
![](https://hlx.blob.core.windows.net/external/2bc7fa6accf17a3096f0a97a138e52f5c629c79b#image.jpeg)
:::

:::
### Brooklyn Buddies

Low-poly fox, bunny, and pug characters with cycle-based head turns, walking, and background. Featured in [New Puppets January 2019](https://youtu.be/w2Hcw3mb6zw). Created by [Emily Watts](https://youtube.com/theweathergirls).

[Download](https://adobe.ly/2NAuGqe)
:::

::break

:::
![](https://hlx.blob.core.windows.net/external/4c1479f00910aded125bc16ee83ac7761ca0a883#image.png)
:::

:::
### Barbarasaurus

Clay sculpted dinosaur newscaster with triggered graphics and news crawls. Featured in [Make a Clay Puppet](https://youtu.be/IIsxwN9J4Ww). Created by [Dovid Taub](https://www.shmideo.com/).

[Download](https://adobe.ly/2HjCnyt)
:::

::break

:::
![](https://hlx.blob.core.windows.net/external/6c17267c5da4ae56efeb97f68c4e4e946c11ca62#image.jpeg)
:::

:::
### Red Monster 3D

Updated 3D version of the Character Animator mascot, as seen in the [The Story Behind Red Monster](https://youtu.be/dq02549\_ycg). Created by [David Arbor](https://davidarbor.com/).

[Download](https://adobe.ly/2S2CCUN)
:::
::::

Columns from Adobe Stock Advocates

::::Callout three
:::
#### The concept of the gender binary is being increasingly questioned and scrutinized — and rightly so.

In recent years, people have only become more vocal about our need to reassess how we think about gender, and brands have begun to place a high priority on truly inclusive visuals.\
We need authentic, empowering, everyday narratives that represent people across the gender spectrum. With this topic, we explore the true lived experiences of individuals and communities through the lens of gender, and we celebrate the LGBTQ+ community. Together, we can use the power of inclusivity to highlight stories about living life on your own terms.

[Submit your work to Adobe Stock](https://contributor.stock.adobe.com/?as_channel=microsite\&as_campclass=brand\&as_audience=contributors\&as_campaign=advocates\&as_source=lp\&as_camptype=awareness\&as_content=identityandgender)


:::

:::
![](https://hlx.blob.core.windows.net/external/7a3ef836cca9d8c4ce2d6871033f27f00dd12741#image.jpeg)

Adobe Artist: Leandro Crespi - Stocksy
:::

::break

:::
![](https://hlx.blob.core.windows.net/external/c461432d7b8a392d8a899020f5a12710f9b74792#image.png)

Adobe Artist: Stocksy
:::

::break

:::
![](https://hlx.blob.core.windows.net/external/b5ae0673812957ebaf8152a75708ef9cad4e0413#image.png)

Adobe Artists: Fancy Bethany, Lucas Ottone - Stocksy, Jennifer Brister - Stocksy & Hilde Atalanta
:::

:::
### **Identity & Gender:**Inspiration



Looking for inspiration? Here are some angles to consider. Pick one and run with it or explore your own unique take on how individuals are expressing their authentic selves through and beyond gender.


:::

::break

:::
## Every woman honored

Women moving through everyday work and home life with power and purpose. Cis women and transwomen playing with, reversing, subverting, or all-out shattering preconceived ideas about gender and how we express it.


:::

:::
![](https://hlx.blob.core.windows.net/external/11c115a543a672269350e4c88d17c9432f742ce8#image.jpeg)

Adobe Artist: Zinkevych
:::
::::

Blocks from Adobe Blog

::::Block Embed
:::
<https://www.youtube.com/watch?v=AgR7BVpxwhw&feature=youtu.be>
:::
::::

This past summer, we launched [Adobe Stock Audio](https://stock.adobe.com/audio), featuring a curated collection of royalty-free music and audio tracks from two powerhouse agencies, Epidemic Sound and Jamendo. Audio drives multimedia like nothing else, and 2020 saw a dramatic rise in content creation, with no signs of slowing down. In other words, it is the perfect time for us to roll out our first-ever Audio Trends forecast for 2021.

::::Animation
:::
<https://hlx.blob.core.windows.net/external/45b8d3f95c5003a81426fa76e977de8937dd0254#image.mp4>
:::
::::

# Directives and Blockquotes

Cards from Character Animator

:::Callout three
> ![](https://hlx.blob.core.windows.net/external/dda817bda66620bdc8e63904251583be1294a234#image.jpeg)

> ### Bluster
>
> Vector snowman with head parallax, dangling scarf, and snowy background. Featured in [Creating an Animated Livestream](https://youtu.be/0Va3\_e-4bKE).
>
> [Download](https://adobe.ly/2SNco6q)

::break

> ![](https://hlx.blob.core.windows.net/external/2bc7fa6accf17a3096f0a97a138e52f5c629c79b#image.jpeg)

> ### Brooklyn Buddies
>
> Low-poly fox, bunny, and pug characters with cycle-based head turns, walking, and background. Featured in [New Puppets January 2019](https://youtu.be/w2Hcw3mb6zw). Created by [Emily Watts](https://youtube.com/theweathergirls).
>
> [Download](https://adobe.ly/2NAuGqe)

::break

> ![](https://hlx.blob.core.windows.net/external/4c1479f00910aded125bc16ee83ac7761ca0a883#image.png)

> ### Barbarasaurus
>
> Clay sculpted dinosaur newscaster with triggered graphics and news crawls. Featured in [Make a Clay Puppet](https://youtu.be/IIsxwN9J4Ww). Created by [Dovid Taub](https://www.shmideo.com/).
>
> [Download](https://adobe.ly/2HjCnyt)

::break

> ![](https://hlx.blob.core.windows.net/external/6c17267c5da4ae56efeb97f68c4e4e946c11ca62#image.jpeg)

> ### Red Monster 3D
>
> Updated 3D version of the Character Animator mascot, as seen in the [The Story Behind Red Monster](https://youtu.be/dq02549\_ycg). Created by [David Arbor](https://davidarbor.com/).
>
> [Download](https://adobe.ly/2S2CCUN)
:::

Columns from Adobe Stock Advocates

:::Callout three
> #### The concept of the gender binary is being increasingly questioned and scrutinized — and rightly so.
>
> In recent years, people have only become more vocal about our need to reassess how we think about gender, and brands have begun to place a high priority on truly inclusive visuals.\
> We need authentic, empowering, everyday narratives that represent people across the gender spectrum. With this topic, we explore the true lived experiences of individuals and communities through the lens of gender, and we celebrate the LGBTQ+ community. Together, we can use the power of inclusivity to highlight stories about living life on your own terms.
>
> [Submit your work to Adobe Stock](https://contributor.stock.adobe.com/?as_channel=microsite\&as_campclass=brand\&as_audience=contributors\&as_campaign=advocates\&as_source=lp\&as_camptype=awareness\&as_content=identityandgender)
>
>

> ![](https://hlx.blob.core.windows.net/external/7a3ef836cca9d8c4ce2d6871033f27f00dd12741#image.jpeg)
>
> Adobe Artist: Leandro Crespi - Stocksy

::break

> ![](https://hlx.blob.core.windows.net/external/c461432d7b8a392d8a899020f5a12710f9b74792#image.png)
>
> Adobe Artist: Stocksy

::break

> ![](https://hlx.blob.core.windows.net/external/b5ae0673812957ebaf8152a75708ef9cad4e0413#image.png)
>
> Adobe Artists: Fancy Bethany, Lucas Ottone - Stocksy, Jennifer Brister - Stocksy & Hilde Atalanta

> ### **Identity & Gender:**Inspiration
>
>
>
> Looking for inspiration? Here are some angles to consider. Pick one and run with it or explore your own unique take on how individuals are expressing their authentic selves through and beyond gender.
>
>

::break

> ## Every woman honored
>
> Women moving through everyday work and home life with power and purpose. Cis women and transwomen playing with, reversing, subverting, or all-out shattering preconceived ideas about gender and how we express it.
>
>

> ![](https://hlx.blob.core.windows.net/external/11c115a543a672269350e4c88d17c9432f742ce8#image.jpeg)
>
> Adobe Artist: Zinkevych
:::

Blocks from Adobe Blog

:::Block Embed
> <https://www.youtube.com/watch?v=AgR7BVpxwhw&feature=youtu.be>
:::

This past summer, we launched [Adobe Stock Audio](https://stock.adobe.com/audio), featuring a curated collection of royalty-free music and audio tracks from two powerhouse agencies, Epidemic Sound and Jamendo. Audio drives multimedia like nothing else, and 2020 saw a dramatic rise in content creation, with no signs of slowing down. In other words, it is the perfect time for us to roll out our first-ever Audio Trends forecast for 2021.

:::Animation
> <https://hlx.blob.core.windows.net/external/45b8d3f95c5003a81426fa76e977de8937dd0254#image.mp4>
:::


Cards from Character Animator

+-----------------------------------+-----------------------------------+
| Callout three                     |                                   |
+===================================+===================================+
| ![](/hlx_dda817bda6662            | ### Bluster                       |
| 0bdc8e63904251583be1294a234.jpeg) |                                   |
|                                   | Vector snowman with head          |
|                                   | parallax, dangling scarf, and     |
|                                   | snowy background. Featured in     |
|                                   | [Creating an Animated             |
|                                   | Livestrea                         |
|                                   | m](https://youtu.be/0Va3_e-4bKE). |
|                                   |                                   |
|                                   | [Do                               |
|                                   | wnload](https://adobe.ly/2SNco6q) |
+-----------------------------------+-----------------------------------+
| ![](/hlx_2bc7fa6accf17            | ### Brooklyn Buddies              |
| a3096f0a97a138e52f5c629c79b.jpeg) |                                   |
|                                   | Low-poly fox, bunny, and pug      |
|                                   | characters with cycle-based head  |
|                                   | turns, walking, and background.   |
|                                   | Featured in [New Puppets January  |
|                                   | 201                               |
|                                   | 9](https://youtu.be/w2Hcw3mb6zw). |
|                                   | Created by [Emily                 |
|                                   | Watts](http                       |
|                                   | s://youtube.com/theweathergirls). |
|                                   |                                   |
|                                   | [Do                               |
|                                   | wnload](https://adobe.ly/2NAuGqe) |
+-----------------------------------+-----------------------------------+
| ![](/hlx_4c1479f00910             | ### Barbarasaurus                 |
| aded125bc16ee83ac7761ca0a883.png) |                                   |
|                                   | Clay sculpted dinosaur newscaster |
|                                   | with triggered graphics and news  |
|                                   | crawls. Featured in [Make a Clay  |
|                                   | Puppe                             |
|                                   | t](https://youtu.be/IIsxwN9J4Ww). |
|                                   | Created by [Dovid                 |
|                                   | Taub](https://www.shmideo.com/).  |
|                                   |                                   |
|                                   | [Do                               |
|                                   | wnload](https://adobe.ly/2HjCnyt) |
+-----------------------------------+-----------------------------------+
| ![](/hlx_6c17267c5da4a            | ### Red Monster 3D                |
| e56efeb97f68c4e4e946c11ca62.jpeg) |                                   |
|                                   | Updated 3D version of the         |
|                                   | Character Animator mascot, as     |
|                                   | seen in the [The Story Behind Red |
|                                   | Monste                            |
|                                   | r](https://youtu.be/dq02549_ycg). |
|                                   | Created by [David                 |
|                                   | Arbor](https://davidarbor.com/).  |
|                                   |                                   |
|                                   | [Do                               |
|                                   | wnload](https://adobe.ly/2S2CCUN) |
+-----------------------------------+-----------------------------------+


Columns from Adobe Stock Advocates

+-----------------------------------+-----------------------------------+
| Columns                           |                                   |
+===================================+===================================+
| #### Th                           | ![](https://hlx.blob.core.windows |
| e concept of the gender binary is | .net/external/7a3ef836cca9d8c4ce2 |
|  being increasingly questioned an | d6871033f27f00dd12741#image.jpeg) |
| d scrutinized --- and rightly so. |                                   |
|                                   | Adobe Artist: Leandro Crespi -    |
| In recent years, people have only | Stocksy                           |
| become more vocal about our need  |                                   |
| to reassess how we think about    |                                   |
| gender, and brands have begun to  |                                   |
| place a high priority on truly    |                                   |
| inclusive visuals.               |                                   |
| We need authentic, empowering,    |                                   |
| everyday narratives that          |                                   |
| represent people across the       |                                   |
| gender spectrum. With this topic, |                                   |
| we explore the true lived         |                                   |
| experiences of individuals and    |                                   |
| communities through the lens of   |                                   |
| gender, and we celebrate the      |                                   |
| LGBTQ+ community. Together, we    |                                   |
| can use the power of inclusivity  |                                   |
| to highlight stories about living |                                   |
| life on your own terms.           |                                   |
|                                   |                                   |
| [Submit your work to Adobe        |                                   |
| Stock](https://contributor.sto    |                                   |
| ck.adobe.com/?as_channel=microsit |                                   |
| e&as_campclass=brand&as_audience= |                                   |
| contributors&as_campaign=advocate |                                   |
| s&as_source=lp&as_camptype=awaren |                                   |
| ess&as_content=identityandgender) |                                   |
+-----------------------------------+-----------------------------------+
| ![](https://hlx.blob.core.window  |                                   |
| s.net/external/c461432d7b8a392d8a |                                   |
| 899020f5a12710f9b74792#image.png) |                                   |
|                                   |                                   |
| Adobe Artist: Stocksy             |                                   |
+-----------------------------------+-----------------------------------+
| ![](https://hlx.blob.core.window  | ###                               |
| s.net/external/b5ae0673812957ebaf | **Identity & Gender:**Inspiration |
| 8152a75708ef9cad4e0413#image.png) |                                   |
|                                   | Looking for inspiration? Here are |
| Adobe Artists: Fancy Bethany,     | some angles to consider. Pick one |
| Lucas Ottone - Stocksy, Jennifer  | and run with it or explore your   |
| Brister - Stocksy & Hilde         | own unique take on how            |
| Atalanta                          | individuals are expressing their  |
|                                   | authentic selves through and      |
|                                   | beyond gender.                    |
+-----------------------------------+-----------------------------------+
| ## Every woman honored            | ![](https://hlx.blob.core.windows |
|                                   | .net/external/11c115a543a67226935 |
| Women moving through everyday     | 0e4c88d17c9432f742ce8#image.jpeg) |
| work and home life with power and |                                   |
| purpose. Cis women and transwomen | Adobe Artist: Zinkevych           |
| playing with, reversing,          |                                   |
| subverting, or all-out shattering |                                   |
| preconceived ideas about gender   |                                   |
| and how we express it.            |                                   |
+-----------------------------------+-----------------------------------+


Blocks from Adobe Blog


Block Embed
----------------------------------------------------------------
<https://www.youtube.com/watch?v=AgR7BVpxwhw&feature=youtu.be>

This past summer, we launched [Adobe Stock
Audio](https://stock.adobe.com/audio), featuring a curated collection of
royalty-free music and audio tracks from two powerhouse agencies,
Epidemic Sound and Jamendo. Audio drives multimedia like nothing else,
and 2020 saw a dramatic rise in content creation, with no signs of
slowing down. In other words, it is the perfect time for us to roll out
our first-ever Audio Trends forecast for 2021.

Animation
-------------------------------------------------------------------------------------------------
<https://hlx.blob.core.windows.net/external/45b8d3f95c5003a81426fa76e977de8937dd0254#image.mp4>

[trieloff]

My preference would be (3): directives + blockquotes as it still looks like Markdown (unlike 1 and 4), but eliminates a lot of the nesting we have in (3). Given the existing infrastructure it is also easy to implement, reasonably interoperable and does not look too bad as when formatted by GitHub

[tripodsan]

:::Callout three
this basically claims all potential directives for our use case, no?

I think using the grid tables is the most honest transformation, as it just enables using contains in table cells.
i.e. the semantic transformation will not happen in word2md or gdocs2md, but in the pipeline.

If the transformation should already happen in word2md/gdocs2md, then I agree that the block quotes looks nice.

[trieloff]

Semantically, what we see in the docs are not tables, but blocks. That's why I think grid tables are not honest, but (semantically) lazy.

[tripodsan]

there is no way of indicating that a table is a block in word. we can do the heuristics in word2md and gdocs2md, or in the pipeline. if one would use word2md for other purposes than helix, generating blocks in word2md would be surprising.

[trieloff]

Not too many people are going to use these services outside the Helix context, so I can live with the surprise. Especially since these people can use pandoc directly if they like the grid tables.

[tripodsan]

FWIW, after talking with @davidnuescheler, we thought that the easiest to implement, is (1) - since it's already there :-)
converting the table to divs should be done in the helix-pages project - as extra pipeline step or in the pre.js

[trieloff]

It's definitely the easiest, but I'd still like to produce pretty markup eventually, even if it is just to make visual debugging easier.