diff --git a/scripts/assets/index.css b/scripts/assets/index.css
index 0316a7a..b2365ee 100644
--- a/scripts/assets/index.css
+++ b/scripts/assets/index.css
@@ -284,6 +284,23 @@ main {
color: var(--muted);
}
+.featured {
+ align-self: center;
+ display: inline-flex;
+ flex: none;
+ align-items: center;
+ justify-content: center;
+ width: 16px;
+ height: 16px;
+ color: var(--muted);
+ cursor: default;
+}
+
+.featured svg {
+ display: block;
+ fill: currentColor;
+}
+
.permalink {
color: inherit;
text-decoration: none;
diff --git a/scripts/lib/gallery.mjs b/scripts/lib/gallery.mjs
index 175d186..86ed0f9 100644
--- a/scripts/lib/gallery.mjs
+++ b/scripts/lib/gallery.mjs
@@ -70,6 +70,14 @@ function renderScheme(extension) {
return label === undefined ? '' : `${escapeHTML(label)}`;
}
+function renderFeatured(extension) {
+ if (extension.featured !== true) {
+ return '';
+ }
+
+ return '';
+}
+
// Themes that support both schemes get a Light/Dark tab switcher (CSS-only, no scroll);
// single-scheme themes show one frame. Extensions have no preview.
//
@@ -165,6 +173,7 @@ function renderCard(extension) {
ICON: ``,
NAME: escapeHTML(extension.name),
VERSION: escapeHTML(extension.latest.version),
+ FEATURED: renderFeatured(extension),
SCHEME: renderScheme(extension),
PREVIEW: renderPreview(extension),
DESCRIPTION: escapeHTML(extension.description),
diff --git a/scripts/templates/card.html b/scripts/templates/card.html
index 00539bf..14cab26 100644
--- a/scripts/templates/card.html
+++ b/scripts/templates/card.html
@@ -1,5 +1,5 @@
- {{ICON}}{{NAME}} v{{VERSION}}{{SCHEME}}
+ {{ICON}}{{NAME}} v{{VERSION}}{{FEATURED}}{{SCHEME}}
{{PREVIEW}}
{{DESCRIPTION}}
by {{AUTHOR}} · {{ID}}