`pages tagged with` : add relevant page-tags to the results

cannibalox · April 19, 2021, 12:18pm

in the section page tagged with , it would be nice to display the other related page-tags along with the results like this (all the green #tags near the page results) :

(erratum: in my mockup, the #software tag should not appear near the 3d page)

stdword · May 7, 2023, 9:59pm

Hi, @cannibalox! We can improve this view to achieve an idea.

Do you still interested in it?

Related discussion: «Pages tagged with …» improved analogue for any property

cannibalox · May 11, 2023, 3:26pm

yes, I’m still interested in seeing all page-tags listed in tags::
your new :template-view looks great ! I will dig into it, thanks for the heads-up.

stdword · May 11, 2023, 9:29pm

Nice! I tried to build a datalog query for this scenario, but failed =( It is not that easy for me

Darwis · May 15, 2023, 9:35am

I managed to do this with custom.js mutation observer.

observePageTagged = pipePageTagged(mutationObs).subscribe((tagsDom) => {
    const pageNames = tagsDom.map((t) => ({
      el: t,
      tag: decodeURIComponent(t.querySelector('a').getAttribute('href')).split(
        '/page/'
      )[1],
    }));
    const relatedPage = logseq.api
      .datascript_query(
        `[:find (pull ?b [:db/id :block/uuid :block/name {:block/tags [:block/name :db/id]}])
         :in $ ?names
         :where
         [?b :block/name ?name]
         [(contains? ?names ?name)]
       ]`,
        `#{${pageNames.map((s) => `"${s.tag}"`).join(' ')}}`
      )
      .flat() as LogseqPage[];
    pageNames.forEach((pageName) => {
      const page = relatedPage.filter((p) => p.name === pageName.tag)[0];
      if (page.tags) {
        const spanDom = document.createElement('span');
        spanDom.classList.add('ml-4');
        page.tags
          .filter((t) => t.name !== currentPage)
          .forEach((tag) => {
            const tagDom = document.createElement('a');
            tagDom.setAttribute(
              'href',
              `#/page/${encodeURIComponent(tag.name)}`
            );
            tagDom.textContent = `#${tag.name}`;
            tagDom.classList.add('px-1', 'text-green-300');
            spanDom.appendChild(tagDom);
          });
        pageName.el.appendChild(spanDom);
      }
    });
  });

cannibalox · May 15, 2023, 1:01pm

@Darwis thanks ! do you mind sharing the whole custom.js with the mutationObs ?

Darwis · May 16, 2023, 12:22am

gist.github.com

https://gist.github.com/darwis059/7ddfad95d702fa731272ce65291e4595

observer.ts

import {
  Observable,
  Subscription,
  debounceTime,
  filter,
  mergeAll,
} from 'rxjs';
import { getParentUuid } from './utils';
import { blockUpdated, currentPage, pageUpdateObs } from './subject';
import {

This file has been truncated. show original

rxJsPipe.ts

export const checkNodes = (
  node: NodeList,
  checkFn: (el: HTMLElement) => Boolean
) =>
  Array.from(node)
    .filter((n) => n.nodeType !== Node.TEXT_NODE)
    .some(
      (n) => {
        // const nEl = n as HTMLElement;
        const nEl = 'querySelector' in n ? <HTMLElement>n : n.parentElement;

This file has been truncated. show original

subject.ts

import { Subject, filter, pairwise, tap } from 'rxjs';

let currentPage = '';

const blockUpdated = new Subject<{
  type: 'finished' | 'editing';
  uuids: string[];
  page: string;
}>();
const pageUpdated = new Subject<string>(); //.pipe(pairwise(),tap(console.log));

This file has been truncated. show original

There are more than three files. show original

Darwis · May 16, 2023, 2:09am

I build with vitejs and deploy it to my server then add custom js url to logseq

cannibalox · May 16, 2023, 9:27pm

thank you for the share, now I need to wrap my head around that haha.
your setup seems super advanced, by any chance, did you ever made a demo/quick intro about how you use logseq ? Really curious about your workflow given all the custom queries and scripts you use.

Darwis · May 17, 2023, 4:07am

Actually i use logseq for basic thing like store code snippet, track work task. nothing advance.
some use case that i need to use custom js with svelte are monthly expense/bill tracking (https://bit.ly/3BybP8Y). I can toggle status and update bill amount from table view. for expense tracking: https://bit.ly/3My1Zdf

I also create a marketplace bookmark in logseq, by input the product url. my custom js will fetch and scrape product description include with image url and store it in logseq block (https://bit.ly/3o7ShFi)

cannibalox · May 17, 2023, 9:19pm

mindblowing thanks for sharing the demos, it’s great to see how you tweaked logseq.
I remember you posted some snippets for generating galleries from a website (on discord), but your marketplace demo is even crazier. Do you have any resource or link I could check for inspiration ?