diff --git a/quartz/components/AliasList.tsx b/quartz/components/AliasList.tsx new file mode 100644 index 000000000..c7a64b522 --- /dev/null +++ b/quartz/components/AliasList.tsx @@ -0,0 +1,63 @@ +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 ( +
+

Aliases

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