How to add custom page status?

[TJohnson93]

Requesting the ability to add custom statuses applied in a similar fashion to tags.

Example of usage

.md frontmatter

---
icon: material/microsoft-azure
status: draft
subtitle: Platform
tags:
  - Azure
---

mkdocs.yml

extra:
  status:
    draft: Draft
  tags:
    Azure: azure

theme:
  icon:
    tag:
      azure: material/microsoft-azure
    status:
      draft: material/file-edit

Currently, the result of such a configuration (which is expected based on docs) is a null icon essentially.

[TJohnson93]

Ok, so I got a custom override working for this functionality.

1. add the status to mkdocs.yml as per normal:

extra:
  status:
    draft: Draft

2. Add the custom status to frontmatter as per normal:

---
icon: material/microsoft-azure
status: draft
subtitle: Platform
tags:
  - Azure
---

This then adds a class to the status of md-status--NEWSTATUS. The default icon is set through the --md-status variable. We can update the svg within the new class in extra.css file.

/* ******************************************************** */
/* Customise Nav Status */
/* ******************************************************** */
.md-status--draft {
  --md-status: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v-1.9l10-10V8l-6-6H6m7 1.5L18.5 9H13V3.5m7.1 9.5c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-2 1.8L12 20.9V23h2.1l6.1-6.1-2.1-2.1Z"/></svg>');
}

You can see in the below screenshot that this only updates the one in draft (Azure Platform) and the default icon remains (Azure AD).

Leaving Idea open as it would be awesome feature to be native without including this 'hack' (albiet a similar implementation to the admonitions custom feature)

[alexvoss]

Thanks for sharing this. I think this is an omission in the documentation. There is an example linked from it but I do wonder if people will find it when it is not mentioned in the text? It seems you figured out yourself what to do?

[squidfunk]

It's not a hack – customization is the way to implement this! We also have a downloadable example for this. Please keep in mind, that we cannot make everything configurable via mkdocs.yml, but we always keep a great focus on extensibility.

[squidfunk]

We might dumb the current example down, and add a new section in the customization subsection of the reference page called "Custom statuses" that links to the current original example. That might make it easier to discover.

[TJohnson93]

I'll be damned, did not stumble across that example 😅 thanks for sharing. That example also gave me inspiration of the edit this page button, will look further in how to implement:

Cheers

[alexvoss]

@squidfunk - this got lost in a pile of open tabs. Will see that I create a RP doing what you said.