feat(frontend): mention component

paulrobertlloyd · paulrobertlloyd · commit ee3a9d5d9982 · 2024-12-25T22:42:05.000Z
diff --git a/helpers/frontend/views/frontend-components.njk b/helpers/frontend/views/frontend-components.njk
@@ -336,6 +336,26 @@
   src: "/assets/icon.svg"
 }) }}
 
+<h2><code>mention</code></h2>
+
+{{ mention({
+  user: {
+    avatar: {},
+    name: "Joe Bloggs",
+    url: "#",
+    meta: "bookmarked https://getindiekit.com" | safe | urlize
+  },
+  mention: {
+    title: "Indiekit",
+    icon: "bookmark",
+    description: {
+      text: "Meet the little Node.js server with all the parts needed to publish content to your personal website and share it on social networks."
+    },
+    permalink: "#",
+    published: "2024-12-24T18:15"
+  }
+}) }}
+
 <h2><code>navigation</code></h2>
 
 {{ navigation({
diff --git a/packages/frontend/components/mention/macro.njk b/packages/frontend/components/mention/macro.njk
@@ -0,0 +1,3 @@
+{% macro mention(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/packages/frontend/components/mention/styles.css b/packages/frontend/components/mention/styles.css
@@ -0,0 +1,9 @@
+.mention {
+  display: grid;
+  gap: var(--space-s);
+  max-inline-size: var(--line-measure);
+
+  + .mention {
+    margin-block-start: var(--space-2xl);
+  }
+}
diff --git a/packages/frontend/components/mention/template.njk b/packages/frontend/components/mention/template.njk
@@ -0,0 +1,6 @@
+{% from "../card/macro.njk" import card with context %}
+{% from "../user/macro.njk" import user with context %}
+<div class="{{ classes("mention", opts) }}">
+  {{ user(opts.user) }}
+  {{ card(opts.mention) }}
+</div>
diff --git a/packages/frontend/layouts/default.njk b/packages/frontend/layouts/default.njk
@@ -17,6 +17,7 @@
 {% from "heading/macro.njk" import heading with context %}
 {% from "hint/macro.njk" import hint with context %}
 {% from "input/macro.njk" import input with context %}
+{% from "mention/macro.njk" import mention with context %}
 {% from "notification-banner/macro.njk" import notificationBanner with context %}
 {% from "pagination/macro.njk" import pagination with context %}
 {% from "prose/macro.njk" import prose with context %}
diff --git a/packages/frontend/styles/app.css b/packages/frontend/styles/app.css
@@ -44,6 +44,7 @@
 @import url("../components/label/styles.css");
 @import url("../components/logo/styles.css");
 @import url("../components/main/styles.css");
+@import url("../components/mention/styles.css");
 @import url("../components/navigation/styles.css");
 @import url("../components/notification-banner/styles.css");
 @import url("../components/pagination/styles.css");
diff --git a/packages/frontend/styles/config/custom-properties.css b/packages/frontend/styles/config/custom-properties.css
@@ -140,6 +140,7 @@ html {
   --space-m: clamp(0.75rem, 0.625rem + 0.625vw, 1rem); /* 12 → 16 */
   --space-l: clamp(1rem, 0.75rem + 1.25vw, 1.5rem); /* 16 → 24 */
   --space-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); /* 24 → 32 */
+  --space-2xl: clamp(2rem, 1.5rem + 2vw, 4rem); /* 32 → 64 */
 
   /* Layout */
   --container-padding-inline: var(--space-l);

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{% macro mention(opts) %}`
	`2`	`+ {%- include "./template.njk" -%}`
	`3`	`+{% endmacro %}`