Hiding (some) Frontmatter

[urnlahzer]

I added language to hide frontmatter on many pages because I find the frontmatter distracting and unsightly at the top of my pages.
But I have also been using attributes on tasks, specifically appending [DueDate: xxxx-xx-xx] and similarly StartDate to tasks.
I just noticed my task attributes aren’t showing up on the pages where I’ve hidden frontmatter. This makes for a cleaner ui but I need those attributes.

Is there any way to hide the box at the top but not attributes on tasks?

[Mr.Red]

yes it’s technically possible. but what did you used to hide the frontmatter? depending on that space-lua or space-style you need to further specify the css selector.

With frontmatter visible:

With frontmatter hidden:

[bau (Baudo)]

@urnlahzer’s question echoes his comment on Persistent folding: how to use space-style to hide a particular attribute? - #16 by urnlahzer.

He wants to hide the frontmatter without the attributes (on a page, a task or an item) being impacted. Indeed, these attributes all have an sb-frontmatter class like the frontmatter itself. So the hide-frontmatter-css class via the space-lua from @Inos Github hides the whole thing.

This do the job:

.sb-frontmatter.cm-line {
  display: none;
}

@Mr.Red : is that what you are using?

[Mr.Red]

no need to modify the css of the page, you have everything to “talk” only to the “real” frontmatter selector.

i’m using the code from @inos-github with a tiny modification

instead of hiding all the .sb-frontmatter selector, i hide the combination of .sb-frontmatter.cm-line

replace these two:

with:
sb-frontmatter.cm-line

as visible in the Browser Web-Tools the two different elements have also different combo of selectors:

and here is the same code from @inos-github , sprinkled with a little css-magic-dust to hide only the “real frontmatter”:

-- Toggle frontmatter visibility with auto-hide support
-- Auto-hides if page has hide-frontmatter: true in frontmatter

local styleId = 'hide-frontmatter-css'
local style = '.sb-frontmatter.cm-line, .sb-line-frontmatter-outside, .sb-frontmatter-marker { display: none !important; }'

local function scrollToFrontmatter()
  local fm = js.window.document.querySelector('.sb-frontmatter.cm-line, .sb-line-frontmatter-outside')
  if fm then
    fm.scrollIntoView({ behavior = 'smooth', block = 'start' })
  end
end

local function setVisibility(hidden)
  local el = js.window.document.getElementById(styleId)
  if hidden and not el then
    js.window.document.head.insertAdjacentHTML('beforeend', '<style id="' .. styleId .. '">' .. style .. '</style>')
  elseif not hidden and el then
    el.remove()
    js.window.setTimeout(scrollToFrontmatter, 50)
  end
end

local function pageHasHideFrontmatter()
  local pageName = editor.getCurrentPage()
  if not pageName then return false end
  
  local success, pageText = pcall(function() return space.readPage(pageName) end)
  if not success or not pageText then return false end
  
  -- Find frontmatter block boundaries
  local startPos = string.find(pageText, "^%-%-%-")
  if not startPos then return false end
  
  -- Find the end of frontmatter (second ---)
  local endPos = string.find(pageText, "[\r\n]+%-%-%-", startPos + 3)
  if not endPos then return false end
  
  -- Extract frontmatter content (between first --- and second ---)
  local fm = string.sub(pageText, startPos + 3, endPos - 1)
  fm = string.gsub(fm, "^%s*[\r\n]+", "")  -- Remove leading whitespace/newlines
  fm = string.gsub(fm, "[\r\n]+%s*$", "")  -- Remove trailing whitespace/newlines
  
  -- Check for hide-frontmatter: true (case-insensitive)
  return string.match(string.lower(fm), "hide%-frontmatter%s*:%s*true") ~= nil
end

function toggleFrontmatterVisibility()
  local isHidden = js.window.document.getElementById(styleId) ~= nil
  setVisibility(not isHidden)
  js.window.localStorage.setItem('frontmatterHidden', tostring(not isHidden))
end

local function updateVisibility()
  local shouldHide = pageHasHideFrontmatter() or 
                     js.window.localStorage.getItem('frontmatterHidden') == 'true'
  setVisibility(shouldHide)
end

command.define {
  name = "Toggle Frontmatter Visibility",
  key = "Ctrl-Alt-.",
  mac = "Cmd-Alt-.",
  run = toggleFrontmatterVisibility
}

local function delayedUpdate(delay)
  js.window.setTimeout(updateVisibility, delay or 100)
end

event.listen { name = 'editor:pageLoaded', run = function() delayedUpdate(100) end }
event.listen { name = 'editor:pageSaved', run = function() delayedUpdate(100) end }
event.listen { name = 'system:ready', run = function() delayedUpdate(200) end }

[urnlahzer]

Thanks for your code! To answer your question, I’m hiding on pages using:

pageDecoration:
cssClasses:
- no-frontmatter