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

@@ -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

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,
 }