A frontmatter that finally supports links ! (Lila's frontmatter 🌸)

LilaRest · February 6, 2023, 10:44pm

Tags are properly clickable in this frontmatter : a click on a tag will initiate a search from this one.
This frontmatter relies on Dataview plugin, which is external to the Obsidian core, and so should therefore be able to adapt seamlessly to changes made by the Obsidian team regarding metadata. In case this is not possible, a simple script like the one written above by @acbrown will by sufficient to convert that frontmatter into any other format.

panomitrius · March 7, 2023, 8:59pm

Is it possible to have the class:meta to be default to all files? I’m wondering if I can configure it so I don’t need to add anything to the actual markdown-files to get the effects?

den · March 10, 2023, 8:57am

Sometimes simple solution are the best solutions then over-engineering. If you add just this plugin: GitHub - msrch/obsidian-double-colon-conceal: Obsidian plugin to display double colon (i.e. Dataview inline fields) as a single colon for more natural reading experience.

Your solutions is far the simplest and future proof as Admonitions are now native in Obsidian as Callouts - Obsidian Help. So if you don’t mind to see :: then there is no need for extra plugins.

LilaRest · March 10, 2023, 9:31am

You could achieve this by using templates ?

LilaRest · March 10, 2023, 9:55am

I agree that using callout is by far the most future-proof solution due to their nativeness and by the way, I plan to release a version of this frontmatter based solely on callouts.

However, using callouts also implies a bit heavier syntax in Edit mode, which is why at the moment I do prefer using the custom class trick :

Using callouts-only :

> [!meta] Metadata
> - creation:: 2023-01-21T18:55:12
> - author:: [[John Doe]]
> - parents:: [[Note]], [[Another note]]
> - status:: #MayBePartial

Using Custom Classes plugin :

`.meta`
- creation:: 2023-01-21T18:55:12
- author:: [[John Doe]]
- parents:: [[Note]], [[Another note]]
- status:: #MayBePartial

den · March 10, 2023, 10:07am

I’m using it in this way:

[!meta] Metadata
creation:: 2023-01-21T18:55:12
author:: [[John Doe]]
parents:: [[Note]], [[Another note]]
status:: #MayBePartial

But I’m looking forward to see your new solution!

LilaRest · March 10, 2023, 10:30am

Your > characters have been stripped, isn’t it ?
I definitely prefer using a list, it appears clearer to me.

After some tests I’ve managed to get a lighter syntax using a callout :

> [!meta]-  
>- creation:: 2023-01-21T18:55:12  
>- author:: [[John Doe]]  
>- parents:: [[Note]], [[Another note]]  
>- status:: #MayBePartial

(the callout title will automatically became “Meta” if not given)

Glad to hear that ! Since it seems that we can select the metadata callout from CSS using div[data-callout="meta"], I’ll simply try to make it look like the metadata blocks in my original post.

holroy · April 8, 2023, 12:44pm

Is there any need for the list anymore? Can’t you just do:

> [!meta]-
> creation:: 2023-01-21T18:55:12  
> author:: [[John Doe]]  
> parents:: [[Note]], [[Another note]]  
> status:: #MayBePartial

Or is there some other bits and pieces which then would not work? Would there be a need to query for any particular line in this metadata block (thusly requiring a list scope), or would it be OK that they all reside within the page scope?

LilaRest · April 8, 2023, 2:27pm

No it’s just a matter of preference. By the way, I’ve myself removed those list dots
I’ll publish soon, a new CSS file for this front matter based on native callouts.

rialistic · June 12, 2023, 5:46pm

Oh wow this is great, thanks!

I just decided to move some of my personal notes to Obsidian, and the first thing I got stuck with were the frontmatters. I’ve tried to use some editors with YAML frontmatters before, but I just could not get over the fact that you could not click the stuff in the metadata

LilaRest · June 13, 2023, 1:18pm

Welcome! Glad it helps!
I understand, I’ve been through the same process and that’s why after few years of using ugly frontmatters I took time to find a solution ^^

Note that I do not recommend anymore using the Custom Classes plugin but instead to use native callouts as mentioned above.

Here is the current snippet I use to style callout as frontmatter revealed on hover:

[data-callout="meta"] {
  width: fit-content;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 2px solid var(--background-secondary);
  border-radius: 15px;
}



[data-callout="meta"]::before {
  content: "Metadata";
  display: block;
  padding: 15px 19px 15px 19px;
  background-color: var(--background-secondary);
  opacity: 0.5;
  font-size: 17px;
  font-family: monospace;
  font-weight: 900;
  letter-spacing: 0.05em;
  max-height: 100vh;
  max-width: 100vw;
  transition: max-height 100ms ease-out,
            max-width 400ms ease-out,
            padding 300ms ease-out,
            opacity 400ms ease-out;
  overflow: hidden;
  width: fit-content;
  border-bottom-right-radius: 15px;
  white-space: nowrap;
}

[data-callout="meta"]:hover::before {
  max-height: 0px;
  max-width: 0px;
  padding: 0;
  opacity: 0;
}

[data-callout="meta"] .callout-title {
  display: none;
}

[data-callout="meta"] .callout-content > p {
  margin: 0;
}

[data-callout="meta"] .callout-content {
  display: block !important;
  max-width: 0;
  max-height: 0;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.8em;
  opacity: 0;
  transition: max-height 200ms ease-out,
              max-width 400ms ease-out,
              padding 200ms ease-out,
              opacity 400ms ease-out;
}

[data-callout="meta"]:hover .callout-content {
  padding: 21px 25px 23px 25px;
  max-width: 100vw;
  max-height: 100vh;
  opacity: 1;
}

Note that it may be specific to the theme I use (Minimal) and may need few adjustment to work properly with other themes.

This CSS file will style every callouts called meta, e.g.,

> [!meta]-
> creation:: 2023-01-21T18:55:12  
> author:: [[John Doe]]  
> parents:: [[Note]], [[Another note]]  
> status:: #MayBePartial

rialistic · June 13, 2023, 4:02pm

Thanks a lot! These look great out-of-the-box, I just have tweak my theme’s contrast and paddings a bit.

I am still trying to wrap my head around how Obsidian handles the actual metadata currently. Interestingly, when I just paste the callout block before the H1 title, Obsidian seems to accept the properties as the “real YAML”: even the tags. At least the behave like it.

I can for example add the current date in the callout with Natural language dates -plugin, type @today, and the link to the today’s daily note pops up in the YAML properties.

So far I only spotted that I’ve not been able to update the Boolean parameters in the frontmatter via the callout, but that’s not a problem. I just wanted to have the clickable links in the frontmatter

LilaRest · June 14, 2023, 5:46am

Great!

This frontmatter uses Dataview inline fields (the :: syntax). So yeah, if you have Dataview plugin installed it is very likely that most fields in this frontmatter will behave like the native ones

rialistic · June 14, 2023, 1:32pm

Great! Yes, I’m using Dataview

So, now I have a neat frontmatter-plate which expands by hovering the title to a block with the clickable internal links and tags, which work also as Dataview properties. And which I can edit with Markdown.

Thanks a lot for these @LilaRest!

So here’s my current set-up: I have a few internal-link-properties I want to have in all my the notes. I have a template which pushes this block in each new note before the first H1-heading. Then I can manually enter the internal links in the callout.

Some other stuff pops up in the new note metadata via dynamic front-matter of the template.

I have admit had to reduce your cool-looking CSS snippet to a more simple one, since I did not manage to make the transitions to work in some of my views. I don’t know anything about CSS best-practises, but I share it anyway, since at least for me this has been working so far Please welcome, the first CSS-snippet by me:

Blockquote
.callout[data-callout=“meta”] {
–callout-color: #fcf8f2;
–callout-icon: lucide-folder-heart;
}

[data-callout=“meta”]:hover::before.callout-title {
display: none;
callout-icon: lucide-folder-heart;
margin-top: -5px;
}

[data-callout=“meta”] {
display: block;
padding: 20px 20px 20px 20px;
background-color: var(–background-secondary);
box-shadow: -2px -2px 8px var(–color-base-30);
border-radius: 10px;
opacity: 0.85;
callout-color: #fcf8f2;
font-size: 16px;
font-family: system-ui;
font-weight: 50;
letter-spacing: 0.01em;
max-height: 100vh;
max-width: 100vw;
}

[data-callout=“meta”]:hover .callout-content {
max-width: 100vw;
max-height: 100vh;
opacity: 1;
}

[data-callout=“meta”] .callout-content {
display: block !important;
max-width: 0;
max-height: 0;
font-family: monospace;
font-size: 13px;
font-weight: 100;
white-space: nowrap;
overflow: hidden;
line-height: 1.5em;
opacity: 50;
transition: max-height 200ms ease-out,
max-width 400ms ease-out,
padding 200ms ease-out,
opacity 400ms ease-out;
}

nhanjkl · June 20, 2023, 8:45am

Do you mind checking the code again. It’s not working for me. Thanks!

nhanjkl · June 20, 2023, 8:49am

Is it accurate to say that the original post is outdated and this is your most current setup which just includes the CSS code and using [!meta] in the callout syntax?
Sorry I’m still new to this metadata thing and everything is just very confusing.

rialistic · June 20, 2023, 12:07pm

Sorry, I was using not-valid method for posting code-snippets to this forum, and apparently I am not allowed to edit my previous reply!

I am also new here, just decided 10 days ago to migrate to Obsidian from Notion… So I hope you bear with me

But, anyways, I am using Minimal theme (solarized), and for me the following CSS snippet is working.

I guess there is no need to have these fancy-pancy clickable links in the metadata anyway if there is no need to use the Dataview-plugin. And per my understanding, the Dataview is up to some major changes any day soon. So, maybe it’s better to just wait and see

But it was a nice exercise anywaay, and the click-box does look cool

.callout[data-callout="meta"] {
    --callout-color: #fcf8f2;
    --callout-icon: lucide-folder-heart;
}

[data-callout="meta"]:hover::before.callout-title {
    display: none;
    callout-icon: lucide-folder-heart;
    margin-top: -5px;
}

[data-callout="meta"] {
    display: block;
    padding: 20px 20px 20px 20px;
    background-color: var(--background-secondary);
    box-shadow: -2px -2px 8px var(--color-base-30);
    border-radius: 10px;
    opacity: 0.85;
    callout-color: #fcf8f2;
    font-size: 16px;
    font-family: system-ui;
    font-weight: 50;
    letter-spacing: 0.01em;
    max-height: 100vh;
    max-width: 100vw;
}

[data-callout="meta"]:hover .callout-content {
    max-width: 100vw;
    max-height: 100vh;
    opacity: 1;
}

[data-callout="meta"] .callout-content {
    display: block !important;
    max-width: 0;
    max-height: 0;
    font-family: monospace;
    font-size: 13px;
    font-weight: 100;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.5em;
    opacity: 50;
    transition: max-height 200ms ease-out,
        max-width 400ms ease-out,
        padding 200ms ease-out,
        opacity 400ms ease-out;
}

rialistic · June 20, 2023, 12:40pm

I am also pretty perplexed by how Obsidian and Dataview currently handle the metadata. I would really want to love this tool and give credits and stars for all the people who volunteer in the developing the ecosystem, and even pay for working solutions.

I guess I’ll check this tool and forum again after some months, to see if I can figure this stuff out

miguelmarcos · June 20, 2023, 4:31pm

Thanks for bringing this topic up and the work you put into it. Frontmatter done this way is so much better.

LilaRest · June 23, 2023, 9:28am

Yeah indeed, the original post can be considered as outdated as it relies on the “Custom Classes” plugin which I don’t maintain anymore.

The callout solution (using [!meta]) only relies on native features of the Obsidian editor, which makes it much more sustainable and easier to integrate.