DEV-7190: Object Filters Feature

[anderspollack]

Object filters

This branch includes work in progress on the Quire Object Filters feature. This adds new webc components, and a webc layout to packages/11ty.

See demo Netlify publication: https://quire-object-filters-demo.netlify.app/catalogue/alt/

New Components

This PR adds the following new webc components:

• _layouts/objects-catalog.webc
• _includes/components/objects-catalog.webc
• _includes/components/objects-data.webc
• _includes/components/object-cards.webc
• _includes/components/object-card.webc
• _includes/components/object-filters.webc

Instructions

Add another page to a catalogue directory:

# content/catalogue/gradoo.md
---
epub: false
title: Objects Catalogue
layout: objects-catalog.webc
order: 110
# why does 'classes' need to be set?
classes:
  - objects-catalogue
---

This is the content for the objects catalogue layout.

To Do

• ordering of object card data: specifying with object_card field in objects.yaml:

  # objects.yaml 
  object_card:
  - title
  - artist
  - image

• [x] position and styles for layouts/object-catalog content
• [x] error handling for field names If a filters parameter value does not match any object properties an error should be displayed in the console.
• [ ] render thumbnail images for catalog objects
  • [x] thumbnails should be the first figure with media type: image for an object
  • [ ] when the figure has choice layers, (no src), use the base layer
  • [ ] add thumbnail to the figure adapter() payload to provide a URL for the thumbnail image
• [x] interactive filter functionality Reference getty.edu filters components for an event model
  • [x] apply filters (update DOM to display only matching object cards)
  • [x] reset filters function (redisplay all object cards)
• [ ] Refactor styles;
  • [ ] review class names for BEM conventions
  • [x] make base.11ty.js support WebC bundles https://www.11ty.dev/docs/languages/webc/#css-and-js-(bundler-mode) (getBundle('css') and getBundle('js')) -- adding bundled styles to _layouts/objects-catalog.webc for now
  • [ ] webc:scoped styles (can we pass typography and color tokens through to scoped styles?)

Questions

• Why does property classes need to be set in the content file front matter? (errors if not set)

  
  ---
  epub: false
  title: Objects Catalogue
  layout: objects-catalog.webc
  order: 110
  # why does 'classes' need to be set?
  classes:
  - objects-catalogue
  ---

This is the objects catalogue

## WebC Notes

We have access to collections and navigations data when our component is used inside a layout
**`layout.webc`**
```html
<my-component gradoo="Gradoo" />

We have access to property data (like gradoo) inside a <script webc:type="js"> block. Note: with webc:type="js", the final line gets rendered to the DOM. my-component.webc

<script webc:type="js">
console.warn(gradoo) // > 'Gradoo' in build console
`<div class="my-component">${gradoo}</div>`
</script>

Properties can also be passed and accessed in markup

<!-- LAYOUT -->
<parent-component items="1,2,56" />

<!-- PARENT COMPONENT -->
<div class="parent-component">
  <child-component :items="items"></child-component>
</div>

Data handling

When we need to pass server-side data (11ty context) to the client, we do so by embedding it as JSON in a <script type="application/json"> tag:

component-data.webc

<script data-component webc:keep type="application/json" @raw="JSON.stringify(data)">
</script>

Then we can have access to it via querySelector:

my-component.webc

<template webc:nokeep>
  <component-data :data="data"></component-data>
  <button data-button>Show me the data</button>
</template>
<script webc:setup>
const data = {} // something from the 11ty context
</script>
<script webc:keep type="text/javascript">
// Use component data in client-side logic
window.customElements.define('my-component', class extends HTMLElement {
  connectedCallback() {
    const button = this.querySelector('[data-button]');
    button.addEventListener('click', () => {
      console.log('DATA', this.data);
    });
  }

  // get the data from the `<script type="application/json">` block
  get data() {
    const componentDataElement = this.querySelector('[data-component]');
    return JSON.parse(componentDataElement.textContent);
  }
});
</script>

UX Presentation

Responsive prototype for object filters UI on Quire catalog pages. To test, create a new publication with your local quire-11ty package: ``` quire new object-filters-demo --quire-path ~/full/path/to/local/quire/packages/11ty/ ``` **Default display** The default display mode of object filters will be visible on `/catalogue/`: ``` # /catalogue/index.md: # object-filter-display: default ```  **Collapsible display** When there are many (more than 8 or so) options, `collapsible` might be a better choice for `object-filter-display`: ``` # /catalogue/index.md: object-filter-display: collapsible ```  **Sticky display** When there are few (no more than 3 or 4) options, `sticky` might be a desirable option for `object-filter-display`: ``` # /catalogue/index.md: object-filter-display: sticky ``` 

[mphstudios]

Anders, your efforts sticking with the challenges of using WebC are producing some good patterns and this implementation is coming together. Writing the data as JSON to a script tag is likely a useful pattern for other client side data interaction.

[mphstudios]

Anders, packages/11ty/_includes/components/catalog-content.webc could be moved into either layouts/objects-catalog.webc or components/objects-catalog.webc