«Pages tagged with …» improved analogue for any property

[stdword]

inspired by discussion

test data for demo

Steps to setup

1. Create pages-tagged-with 🏛view (use copy button in the top right corner):

code

- template:: pages-tagged-withd
  template-version:: 3
  plugin-version:: 3.2.0
  link:: [«Pages tagged with …» improved analogue for any property](https://github.com/stdword/logseq13-full-house-plugin/discussions/21)
  template-list-as:: view
  template-usage:: `:prop {|}tags{|}, :display-as list-item`
    - ```typescript
      ``{
        const property = c.args.prop || 'tags'
        const relation = c.page.name
        const displayAs = c.args['display-as'] || 'list-item'
      
        const noPagesTitle = `There are no pages with property <b><i>${property}</i></b> and relation [[${relation}]]`
        const withPagesTitle = `Pages with <b><i>${property}</i></b> containing [[${relation}]]`
      
        function getRelatedPages(relationName, relationValue) {
          const query = `[:find ?name
           :where
              [?p :block/original-name ?name]
              [?p :block/properties ?ps]
              [(get ?ps :${relationName}) ?pv]
              [(contains? ?pv "${relationValue}")]
          ]`
          const result = top.logseq.api.datascript_query(query)
          if (!result || result.length === 0)
              return null
          return result.flat().sort((n, m) => n.toLowerCase().localeCompare(m.toLowerCase()))
        }
      
        const pages = getRelatedPages(property, relation)
        if (!pages)
          return noPagesTitle
      _}``
      
      <style>
        #``c.identity.slot`` ul {
          border-collapse: separate;
          border-spacing: 20px 0px;
        }
        #``c.identity.slot`` ul > li {
          display: ``displayAs``;
        max-width: ``displayAs === 'table-cell' ? '13em' : 'fit-content'``;
          margin-right: 5px;
          margin-left: ``displayAs === 'list-item' ? '20px' : 'initial'``;
          text-align: center;
          line-height: ``displayAs === 'inline' ? '1.8em' : 'initial'``;
        }
      </style>
      
      ``_ withPagesTitle``
      ``'<ul>' + pages.map((p) => `<li>${dev.toHTML(ref(p))}</li>`).join('') + '</ul>'``
    ```

2. Use command :template-view to list related pages:

   {{renderer :template-view, pages-tagged-with}}  ;; looking for property «tags» and current page by default
   {{renderer :template-view, pages-tagged-with, :prop topic}}  ;; specify any property you want
   {{renderer :template-view, pages-tagged-with, :page Electromagnetism}}  ;; and any page you need
   {{renderer :template-view, pages-tagged-with, :display-as inline}}  ;; and layout style

3. Tune pages layout with :display-as argument. Possible values: list-item (default), table, inline, inline-block, table-cell
   

4. ⚠️ The only thing: you cannot collapse the view. So if you need it — wrap it under some parent block which can be collapsed

Additional info

• Logseq v0.9.20
• ☕️ BuJo Theme
• Plugins: Banners & Awesome Links
• → discuss.logseq.com

[stdword]

Just updated to support horizontal style layout with argument :display-as