diff --git a/.changeset/honest-masks-poke.md b/.changeset/honest-masks-poke.md
new file mode 100644
index 0000000000..fa66abfb01
--- /dev/null
+++ b/.changeset/honest-masks-poke.md
@@ -0,0 +1,11 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Added support for setting page status with 'new' and 'deprecated' values, allowing visual indication of page status in TechDocs. To use include the following at the top of your markdown file:
+
+```markdown
+---
+status: new
+---
+```
diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts
index 78b73cb52a..35dac279ca 100644
--- a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts
+++ b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts
@@ -34,11 +34,14 @@ export default ({ theme, sidebar }: RuleOptions) => `
.md-nav {
font-size: calc(var(--md-typeset-font-size) * 0.9);
}
-.md-nav__link {
+.md-nav__link:not(:has(svg)) {
display: flex;
align-items: center;
justify-content: space-between;
}
+.md-nav__link:has(svg) > .md-ellipsis {
+ flex-grow: 1;
+}
.md-nav__icon {
height: 20px !important;
width: 20px !important;
@@ -53,11 +56,21 @@ export default ({ theme, sidebar }: RuleOptions) => `
width: 20px !important;
height: 20px !important;
}
+.md-status--updated::after {
+ -webkit-mask-image: var(--md-status--updated);
+ mask-image: var(--md-status--updated);
+}
.md-nav__item--active > .md-nav__link, a.md-nav__link--active {
text-decoration: underline;
color: var(--md-typeset-a-color);
}
+.md-nav__link--active > .md-status:after {
+ background-color: var(--md-typeset-a-color);
+}
+.md-nav__link[href]:hover > .md-status:after {
+ background-color: var(--md-accent-fg-color);
+}
.md-main__inner {
margin-top: 0;
diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts
index 7ffe76c5fb..e7e47c6fc7 100644
--- a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts
+++ b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts
@@ -97,6 +97,12 @@ export default ({ theme }: RuleOptions) => `
--md-source-stars-icon: url('data:image/svg+xml;charset=utf-8,');
--md-source-version-icon: url('data:image/svg+xml;charset=utf-8,');
--md-version-icon: url('data:image/svg+xml;charset=utf-8,');
+
+ --md-status--updated: url('data:image/svg+xml;charset=utf-8,');
+ --md-status: url('data:image/svg+xml;charset=utf-8,');
+ --md-status--new: url('data:image/svg+xml;charset=utf-8,');
+ --md-status--deprecated: url('data:image/svg+xml;charset=utf-8,');
+ --md-status--encrypted: url('data:image/svg+xml;charset=utf-8,');
}
:host > * {