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 1/4] 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,
 }

From 754fecdd8a3aea9ceac2f5c7a1921c2171c3e81d Mon Sep 17 00:00:00 2001
From: Amir Pourmand <pourmand1376@gmail.com>
Date: Thu, 4 Sep 2025 19:13:27 +0330
Subject: [PATCH 2/4] refactor(AliasList): streamline alias rendering by
 removing unnecessary line breaks

---
 quartz/components/AliasList.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/quartz/components/AliasList.tsx b/quartz/components/AliasList.tsx
index ccf19bcfa..c7a64b522 100644
--- a/quartz/components/AliasList.tsx
+++ b/quartz/components/AliasList.tsx
@@ -10,9 +10,7 @@ const AliasList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentP
         <ul class="aliases-list">
           {aliases.map((alias: string) => (
             <li>
-              <span class="alias-item">
-                {alias}
-              </span>
+              <span class="alias-item">{alias}</span>
             </li>
           ))}
         </ul>

From 434f094f3573d2b6172f23fd211e7c308e4dca12 Mon Sep 17 00:00:00 2001
From: Amir Pourmand <pourmand1376@gmail.com>
Date: Thu, 4 Sep 2025 19:23:15 +0330
Subject: [PATCH 3/4] refactor(AliasList): migrate styles to SCSS file and
 update CSS import

---
 quartz/components/AliasList.tsx         | 39 +------------------------
 quartz/components/styles/aliaslist.scss | 36 +++++++++++++++++++++++
 2 files changed, 37 insertions(+), 38 deletions(-)
 create mode 100644 quartz/components/styles/aliaslist.scss

diff --git a/quartz/components/AliasList.tsx b/quartz/components/AliasList.tsx
index c7a64b522..3253f8c03 100644
--- a/quartz/components/AliasList.tsx
+++ b/quartz/components/AliasList.tsx
@@ -21,43 +21,6 @@ const AliasList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentP
   }
 }
 
-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);
-}
-`
+AliasList.css = "./styles/aliaslist.scss"
 
 export default (() => AliasList) satisfies QuartzComponentConstructor
diff --git a/quartz/components/styles/aliaslist.scss b/quartz/components/styles/aliaslist.scss
new file mode 100644
index 000000000..f5fa2a431
--- /dev/null
+++ b/quartz/components/styles/aliaslist.scss
@@ -0,0 +1,36 @@
+.aliases {
+  margin: 1rem 0;
+
+  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;
+
+  > 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);
+}

From a3900f37eb855d24bd2c8ae97318e600495406cc Mon Sep 17 00:00:00 2001
From: Amir Pourmand <pourmand1376@gmail.com>
Date: Thu, 4 Sep 2025 21:12:09 +0330
Subject: [PATCH 4/4] Revert "refactor(AliasList): migrate styles to SCSS file
 and update CSS import"

This reverts commit 434f094f3573d2b6172f23fd211e7c308e4dca12.
---
 quartz/components/AliasList.tsx         | 39 ++++++++++++++++++++++++-
 quartz/components/styles/aliaslist.scss | 36 -----------------------
 2 files changed, 38 insertions(+), 37 deletions(-)
 delete mode 100644 quartz/components/styles/aliaslist.scss

diff --git a/quartz/components/AliasList.tsx b/quartz/components/AliasList.tsx
index 3253f8c03..c7a64b522 100644
--- a/quartz/components/AliasList.tsx
+++ b/quartz/components/AliasList.tsx
@@ -21,6 +21,43 @@ const AliasList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentP
   }
 }
 
-AliasList.css = "./styles/aliaslist.scss"
+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/styles/aliaslist.scss b/quartz/components/styles/aliaslist.scss
deleted file mode 100644
index f5fa2a431..000000000
--- a/quartz/components/styles/aliaslist.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.aliases {
-  margin: 1rem 0;
-
-  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;
-
-  > 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);
-}