Simple custom title tag (in 5 minutes)

[A3Bagged]

Hello, i wanted something custom for our documentation so i've come up with a tag that shows beta after the page title.
This is done using YAML frontmatter.

your .md file:

---
beta: true
---

create a file in overrides/partials/content.html and change:

{#-
  This file was automatically generated - do not edit
-#}
{% if "material/tags" in config.plugins and tags %}
  {% include "partials/tags.html" %}
{% endif %}
{% include "partials/actions.html" %}
{% if "\x3ch1" not in page.content %}
  <h1>{{ page.title | d(config.site_name, true)}}</h1>
{% include "partials/source-file.html" %}
{% include "partials/feedback.html" %}
{% include "partials/comments.html" %}

to:

{#-
  This file was automatically generated - do not edit
-#}
{% if "material/tags" in config.plugins and tags %}
  {% include "partials/tags.html" %}
{% endif %}
{% include "partials/actions.html" %}
{% if "\x3ch1" not in page.content %}
  <h1>{{ page.title | d(config.site_name, true)}}</h1>
{% endif %}
{% if page.meta.beta %}<span class="md-beta">beta</span>{% endif %}
{{ page.content }}
{% include "partials/source-file.html" %}
{% include "partials/feedback.html" %}
{% include "partials/comments.html" %}

here {% if page.meta.beta %} checks if beta is set to true, it's false by default.

Add some CSS styling:

.md-beta {
    position: absolute;
    position-anchor: --betaAnchor;
    right: anchor(right);
    top: anchor(top);
    transform: translateX(3rem) translateY(calc(var(--fs-display-m) * 0.5));


    color: rgb(33, 112, 5);
    background-color: rgb(209, 250, 179);
    border: 1px solid rgb(168, 241, 112);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 16px;
}

.md-content__inner h1 {
    anchor-name: --betaAnchor;
    width: fit-content;
}

This part of css could possibly be improved but it works for me & since how the theme is compiled with scss
sometimes you need some frankenstein css shenanigans to make things work.

The 'magic' in getting the tag to stick to the h1 tag is in anchor positioning

fundamental part:
width: fit-content; this makes the H1 tag no longer full width of page, which is helpful for positioning the tag after the h1 element.

some custom specifics:
transform: translateX(3rem) translateY(calc(var(--fs-display-m) * 0.5));

here --fs-display-m is a custom variable set in a different part that controls my h1 font-size:
Basically what this part does is it calculates the middle of the H1 text by:
translateX(3rem) used to move the text 3rem to the right
translateY() used to move vertically
calc(); calculates the H1 font-size multiplied by 0.5 (half)

in my case its:
translateY(calc(39.2786px * 0.5)); (moves down by 19.6393px which is half the font-size)

The default theme the h1 font-size is set to 2em which outputs as 32px
(em is different than rem where em calculates from it's parent element)
in this case if you don't plan on changing the h1 font-size you can use:
transform: translateX(3rem) translateY(calc(2em * 0.5);

Ofcourse you can change 'beta' to 'new' or anything else, or even use multiple variants.
I'm sure you can even customize this to set a custom name or even from within the YAML frontmatter to output the html like:

<span class="md-beta">{{ texthere }}</span>

but that wasn't needed in my case and this goes beyond my jekyll/yaml knowledge.
I think you could even make color presets that can be defined like:

---
beta: true
color: green
---

Hope this helps 😄