| | |
|---|
| | | import { pathToRoot, slugTag } from "../util/path" |
|---|
| | | import { QuartzComponentConstructor, QuartzComponentProps } from "./types" |
|---|
| | | import { FullSlug, resolveRelative } from "../util/path" |
|---|
| | | import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" |
|---|
| | | import { classNames } from "../util/lang" |
|---|
| | | |
|---|
| | | function TagList({ fileData, displayClass }: QuartzComponentProps) { |
|---|
| | | const TagList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => { |
|---|
| | | const tags = fileData.frontmatter?.tags |
|---|
| | | const baseDir = pathToRoot(fileData.slug!) |
|---|
| | | if (tags && tags.length > 0) { |
|---|
| | | return ( |
|---|
| | | <ul class={`tags ${displayClass ?? ""}`}> |
|---|
| | | <ul class={classNames(displayClass, "tags")}> |
|---|
| | | {tags.map((tag) => { |
|---|
| | | const display = `#${tag}` |
|---|
| | | const linkDest = baseDir + `/tags/${slugTag(tag)}` |
|---|
| | | const linkDest = resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug) |
|---|
| | | return ( |
|---|
| | | <li> |
|---|
| | | <a href={linkDest} class="internal tag-link"> |
|---|
| | | {display} |
|---|
| | | {tag} |
|---|
| | | </a> |
|---|
| | | </li> |
|---|
| | | ) |
|---|
| | |
|---|
| | | gap: 0.4rem; |
|---|
| | | margin: 1rem 0; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .section-li > .section > .tags { |
|---|
| | | justify-content: flex-end; |
|---|
| | | justify-self: end; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tags > li { |
|---|
