Display Breadcrumb in Presentation

[3von]

I am making a presentation and I would like to display a breadcrumb with each block so that my audience can visually see what section we are discussing. I thought that maybe there was a way to use a query in the child block to display its parent block in smaller text above or under the content as that will have the name of the section that is being discussed. For example:

-Parent Block With Title of Section
   -Child block with information
     {{query that shows the breadcrumb to the parent block formatted to smaller 
     text}}

[mentaloid]

Here is one way:

• Add a macro like the following one in file config.edn , inside macros { } :

  :path "<span data-view='breadcrumb' />
    #+BEGIN_QUERY
    {
     :inputs [:current-block]
     :query [:find ?current (pull ?current [*])
       :in $ ?current
       :keys id b
     ]
     :result-transform (fn [result] (map :b result))
    }
    #+END_QUERY
    "
  

• Add the following CSS rules inside file custom.css :

  .block-content:has(span[data-view="breadcrumb"]) {
    .block-children,
    .block-control,
    .block-main-container,
    .foldable-title,
    .macro .is-paragraph,
    .th
    {
      display: none;
    }
  
    .breadcrumb {
      font-size: 10px;
      margin: 0;
      line-height: 12px;
      & svg {
        height: 12px;
      }
    }
  
    .color-level {
      background: inherit;
    }
  
    .custom-query-page-result {
      margin: 0;
      padding: 0;
    }
  
    .ls-block {
      min-height: unset;
      padding: 0;
    }
  }
  

• Then to display the breadcrumb use the defined macro, e.g. {{path}}
• Demo:
  
  

[3von]

Thanks for this. When I put {{path}} it just disappears and when I go into presentation mode, the breadcrumb does it show at all.

[mentaloid]

• Double-check your configuration. Mind that:
  • any mistake in file config.edn aborts the whole thing
  • any mistake in file custom.css may result in hiding the breadcrumb
• Try also in a new graph.
• Beyond that point, need to check the DOM (with Ctrl + Shift + i) to see if the macro’s query (and thus also its breadcrumb) is indeed present in the block. Per the above pair of mistakes:
  • If the query is not present, something is wrong with the macro.
  • If the query is present (but hidden), something is wrong with the CSS.

[3von]

@mentaloid

:path "
#+BEGIN_QUERY
{
:inputs [:current-block]
:query [:find ?current (pull ?current [*])
:in $ ?current
:keys id b
]
:result-transform (fn [result] (map :b result))
}
#+END_QUERY
"

Is this the correct place to check if the macro is querying? Sorry for being such a newb about this.

[mentaloid]

• Should check the inspector only after exiting the block-editing, to allow the macro to render itself.
• Then check for a structure like this one:

  ...
    div ls-block
    ...
      div raw_html
      ...
      div custom-query
        ...
          div breadcrumb
  

[3von]

Thanks for the clarity. I am assuming that because the breadcrumb is present, that the problem is with the css?

[mentaloid]

Your screenshot shows a <span data-view="breadcrumb (which is from the macro), not a <div class="breadcrumb (which should be from the query). Keep looking for the latter one, right inside the next div (i.e. the <div class="lazy-visibility), first for custom-query and then for breadcrumb. They should be several levels deeper. Here is how it may look:

If you find it inside there, click on it to check its actual styles in the bottom pane of the inspector. In the whole hierarchy, none of the elements should have display: none, e.g.:

Should instead have display: block

[3von]

@mentaloid

It this what I am looking for?

[mentaloid]

Yes, this is the element. Which means that the macro produces the query and the breadcrumb. Now need to use the other panel of the inspector to investigate why this element (or one of its ancestor elements) is hidden by CSS. And even after finding the reason, should come with a CSS rule that reveals the breadcrumb, but without revealing the rest of the query. Unfortunately, such a task is impractical to do in a forum. On the other hand, a new graph without special themes or other customizations should not have this problem, as indicated by my own screenshots.

[3von]

@mentaloid
So this is before

This is after I disable display: none;

So I looked for that in my CSS and took the line out to fix it. Thanks for your patience with me over the weeks. I appreciate you.