Hiding frontmatter

General
1

There are certain pages that I use frontmatter, but I would like to hide it. One example case is custom decorations, I already see them on the page, I don’t want to look as frontmatter definitions.
Is there a way to hide or fold frontmatter?

2 Likes
2

This would be very useful, it would allow you to have a panel with metadata and present only those relevant to the display just below and formatted.

3

You can fold it (Outline: Fold) but this won’t persist. Feel free to create a GitHub issue for it with specifics on how you would like this to work.

4

Added GitHub Issue, more like an (enhancement).

2 Likes
5

As a workaround to fully hide it for some pages you can add the following combination of space-style and pageDecoration frontmatter:

Add style that allows to hide frontmatter on pages with css class no-frontmatter:

```space-style
.no-frontmatter .sb-frontmatter {
    display: none;
}
```

Then add cssClasses decoration to the pages where you want to hide it e.g. using frontmatter:

---
pageDecoration:
    cssClasses:
      - no-frontmatter
---

I use it myself for hiding it on prefixed pages, could probably also be done using object decorations for all pages with prefixes. Changing the frontmatter again requires commenting the style so it is really only a workaround and a proper solution would be preferred.

9 Likes
6

Not a perfect solve, but a great workaround!

7

I was looking for this too, and came up with a solution I thought might be worth sharing. I haven’t tested it across too many browsers yet, but it’s working for me. Uses just one bit of css in the space-style to hide the frontmatter block down to just the first line (showing that there is frontmatter) until you move the cursor into it to make edits.

.sb-frontmatter.sb-line-frontmatter-outside:has(+ .sb-frontmatter) ~ .sb-frontmatter {
    display:none
}
6 Likes
8

Thanks for this, it works great on Edge :slight_smile:

Is it possible with CSS to move the cursor position to below the frontmatter? On page load, the cursor goes to the first line (which contains frontmatter) but given we want it folded it’d be nice to place the cursor below the last line of frontmatter.

Edit: Looks like I might be able to use this solution.

9

I was just about to say, you can do something like this. But if Zef’s example works, then that is much cleaner! It leaves the cursor inside the front matter, but with a single arrow down you can get out of it.

Just because I was working on it anyway, if you still want to move your cursor below the front matter automagically.

event.listen {
  name = "editor:pageLoaded",
  run = function(e)
    local page = editor.getText()
    if not string.startsWith(page, "---") then
      print("🪅 no frontmatter")
      return
    end

    -- find the position of the closing dashes of the frontmatter
    local skipOpening = string.sub(page, 3)
    local posClosing = string.find(skipOpening, "%-%-%-")
    local posAfterFM = posClosing + 3 + 2 -- open (3) + closing (2) matter
    
    local pos = editor.getCursor()
    if (pos >= posAfterFM) then
      print("🪅 cursor is already past frontmatter: ", pos)
      return
    end
    
    print("🪅 moving cursor to:", posAfterFM)
    editor.moveCursor(posAfterFM)
  end
}
1 Like
10

So I’ve also come up with a solution to this that creates a command to hide the frontmatter and tags while using the vertical menu from Mr. Red.

First I should say I organize all of my notes by tags, which I put at the end of paragraphs and pages and everywhere – tags all over the place. So when I view notes, I like to hide the front matter and those tags so it’s visually clean with just the text I want to read. The code below is for both tags and frontmatter, but you can see they’re clearly separated, so if you only want to hide frontmatter, just delete the tags sections.

I’ll admit I’m not a programmer, so I’m not sure how elegant this solution is – it works well, though!

I first created a page in my library to input the space script:

silverbullet.registerCommand({name: "Toggle UI Elements"}, async () => {
  // Get the body element
  const body = document.body;
  
  // Toggle both classes
  body.classList.toggle("hide-tags");
  body.classList.toggle("hide-frontmatter");
  
  // Show notification
  await editor.flashNotification("UI elements visibility toggled");
});

In SETTINGS, add:

/* Styles for hidden elements */
body.hide-tags .sb-hashtag {
  display: none;
}

body.hide-frontmatter .sb-frontmatter {
  display: none;
}

Then in the space-config for the vertical menu settings, I added:

  • icon: eye
    command: “{[Toggle UI Elements]}”
    description: “Toggle UI visibility (tags & frontmatter)”

If you don’t want to add to the menu, you can just run it as a regular command.

1 Like
11

Pretty smart solution. I wonder if there’s going to be a way to still do that in v2, considering space-script will be removed.

@zef will there be a Lua DOM manipulation API? :innocent:

2 Likes