From cbf7dcdd491f034b3acd27929de0277d3e73c57d Mon Sep 17 00:00:00 2001
From: Amir Pourmand <pourmand1376@gmail.com>
Date: Thu, 4 Sep 2025 19:09:12 +0330
Subject: [PATCH] feat: add AliasList component to display file aliases

This commit introduces a new component, AliasList, which renders a list of aliases from the file data's frontmatter. The component includes basic styling for better presentation. Additionally, the AliasList component is exported from the index file for use in other parts of the application.
---
 quartz/components/AliasList.tsx | 65 +++++++++++++++++++++++++++++++++
 quartz/components/index.ts      |  2 +
 2 files changed, 67 insertions(+)
 create mode 100644 quartz/components/AliasList.tsx

diff --git a/quartz/components/AliasList.tsx b/quartz/components/AliasList.tsx
new file mode 100644
index 000000000..ccf19bcfa
--- /dev/null
+++ b/quartz/components/AliasList.tsx
@@ -0,0 +1,65 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+
+const AliasList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
+  const aliases = fileData.frontmatter?.aliases
+  if (aliases && aliases.length > 0) {
+    return (
+      <div class={classNames(displayClass, "aliases")}>
+        <h4>Aliases</h4>
+        <ul class="aliases-list">
+          {aliases.map((alias: string) => (
+            <li>
+              <span class="alias-item">
+                {alias}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+  } else {
+    return null
+  }
+}
+
+AliasList.css = `
+.aliases {
+  margin: 1rem 0;
+}
+
+.aliases h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.9rem;
+  color: var(--gray);
+  font-weight: 600;
+}
+
+.aliases-list {
+  list-style: none;
+  display: flex;
+  padding-left: 0;
+  gap: 0.4rem;
+  margin: 0;
+  flex-wrap: wrap;
+}
+
+.aliases-list > li {
+  display: inline-block;
+  white-space: nowrap;
+  margin: 0;
+  overflow-wrap: normal;
+}
+
+.alias-item {
+  border-radius: 6px;
+  background-color: var(--lightgray);
+  color: var(--dark);
+  padding: 0.2rem 0.4rem;
+  margin: 0 0.1rem;
+  font-size: 0.8rem;
+  border: 1px solid var(--border);
+}
+`
+
+export default (() => AliasList) satisfies QuartzComponentConstructor
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index cece8e614..f2c9eea38 100644
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -23,6 +23,7 @@ import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
 import Flex from "./Flex"
 import ConditionalRender from "./ConditionalRender"
+import AliasList from "./AliasList"
 
 export {
   ArticleTitle,
@@ -50,4 +51,5 @@ export {
   Comments,
   Flex,
   ConditionalRender,
+  AliasList,
 }