DEV-16146: Render all attributes in object cards; specify order of attributes in `objects.yaml`

[anderspollack]

This update allows an objects-page layout to render object cards with all object attributes. By default, an object card displays every attribute. Field order can be specified in objects.yaml: object_card property:

object_card:
  - thumbnail
  - name

This also refactors our components to use <script webc:setup> block for more consistency

[geealbers]

@anderspollack I'm seeing three things, listed below. And I just submitted a PR to quire-starter-objects-test with the additional data I created in order to test these.

1.

If one of the objects is missing any of the keys listed under object_card, this error is thrown and preview stops:

[11ty] 1. Having trouble writing to "_site/things/index.html" from "./content/things/index.md" (via EleventyTemplateError)
[11ty] 2. Check the webc:type="js" element in ./_layouts/objects-page.webc.
[11ty] Original error message: Cannot read properties of undefined (reading 'split') (via Error)
[11ty] 
[11ty] Original error stack trace: Error: Check the webc:type="js" element in ./_layouts/objects-page.webc.
[11ty] Original error message: Cannot read properties of undefined (reading 'split')
[11ty]     at ModuleScript.evaluateScript (/Users/galbers/test-object-filters/node_modules/@11ty/webc/src/moduleScript.cjs:71:10)
[11ty]     at Object.<anonymous> (file:///Users/galbers/test-object-filters/node_modules/@11ty/webc/src/ast.js:81:41)
[11ty]     at AstSerializer.transformContent (file:///Users/galbers/test-object-filters/node_modules/@11ty/webc/src/ast.js:515:42)
[11ty]     at AstSerializer.compileNode (file:///Users/galbers/test-object-filters/node_modules/@11ty/webc/src/ast.js:1044:20)
[11ty]     at AstSerializer.getChildContent (file:///Users/galbers/test-object-filters/node_modules/@11ty/webc/src/ast.js:349:67)
[11ty]     at AstSerializer.compileNode (file:///Users/galbers/test-object-filters/node_modules/@11ty/webc/src/ast.js:1221:46)
[11ty]     at async AstSerializer.getChildContent (file:///Users/galbers/test-object-filters/node_modules/@11ty/webc/src/ast.js:349:56)
[11ty]     at async AstSerializer.compileNode (file:///Users/galbers/test-object-filters/node_modules/@11ty/webc/src/ast.js:1226:36)
[11ty]     at async AstSerializer.getChildContent (file:///Users/galbers/test-object-filters/node_modules/@11ty/webc/src/ast.js:349:56)
[11ty]     at async AstSerializer.compileNode (file:///Users/galbers/test-object-filters/node_modules/@11ty/webc/src/ast.js:1226:36)
[11ty] Benchmark    544ms  32%   124× (Configuration) "citation" JavaScript Function
[11ty] Benchmark    589ms  34%    62× (Configuration) "menu" JavaScript Function
[11ty] Benchmark    542ms  31%   124× (Configuration) "formatCitation" JavaScript Function

2.

It looks like the key that highest up in the source object data is the one that's ending up with the class="object-card__title"> and so is bold and red. Instead, it should be the key that is highest up (first) in the object_card list that should get this class.

3.

What do you think about including the names of the keys from the object_card list on the html elements in someway, in order to facilitate style customization down the road? My first thought was to add them as class names, but I wondered if someone might inadvertently use a key that happens to already have styles associated with it. So, then thought maybe a data attribute? Not sure what the best way to do this would be.

And no worries if this is difficult somehow, or if you just don't think it's a good idea. Folks could also just use an nth-child selector to style these individually.

<div class="object-card__content">
  <span class="object-card__field" data-object-attr="letter"></span>
  <figure class="object-card__image" data-object-attr="thumbnail"></figure>
  <span class="object-card__field" data-object-attr="name"></span>
  <span class="object-card__field" data-object-attr="artist"></span>
  <span class="object-card__field" data-object-attr="time_span"></span>
</div>

[anderspollack]

@geealbers all of your issues / requests should be addressed

1. fields in objects.yaml > object_card that are not defined on an object will be ignored
2. order of objects.yaml > object_card should be respected at the moment, the first text(non-thumbnail) element should be receiving the bold/arrow icon treatment
3. I added the attribute field names to a data-field-name attribute on each field element in the object card

see https://quire-object-filters-demo.netlify.app/things/ for demo

[geealbers]

@anderspollack In my test, it's showing the first item defined under object_card and the thumbnail if it's defined there as well, but nothing else.

And just to confirm, I am seeing the data-field-name so I have the latest commit.

[anderspollack]

@geealbers ah this should be fixed now, I hadn't tried it with the updated starter yet but it should be rendering all fields specified after the thumbnail

[geealbers]

@anderspollack, the fields are rendering but the object-card links are all href="this.webc.attributes.url".

Also, the thumbnails are getting alt="alt(this.webc.attributes)" added to them. And since we can't add alt text to the thumbnails through yaml, we should actually leave these explicitly blank (alt="") so that screen readers ignore them altogether. And we can document that for users.

Finally, wanted to point out that the HTML elements (<figure class="object-card__image"> and <span class="object-card__field">) are being created on the card even they are empty of content. Was that the intention? Fine if so, just wanted to make sure.