Aaron Pham
2023-08-23 d2f52549955ff7600cc5897e67806df4ebf85f91
quartz/components/PageList.tsx
@@ -1,9 +1,9 @@
import { CanonicalSlug, canonicalizeServer, resolveRelative } from "../path"
import { FullSlug, resolveRelative } from "../util/path"
import { QuartzPluginData } from "../plugins/vfile"
import { Date } from "./Date"
import { QuartzComponentProps } from "./types"
function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): number {
export function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): number {
  if (f1.dates && f2.dates) {
    // sort descending by last modified
    return f2.dates.modified.getTime() - f1.dates.modified.getTime()
@@ -20,13 +20,20 @@
  return f1Title.localeCompare(f2Title)
}
export function PageList({ fileData, allFiles }: QuartzComponentProps) {
  const slug = canonicalizeServer(fileData.slug!)
type Props = {
  limit?: number
} & QuartzComponentProps
export function PageList({ fileData, allFiles, limit }: Props) {
  let list = allFiles.sort(byDateAndAlphabetical)
  if (limit) {
    list = list.slice(0, limit)
  }
  return (
    <ul class="section-ul">
      {allFiles.sort(byDateAndAlphabetical).map((page) => {
      {list.map((page) => {
        const title = page.frontmatter?.title
        const pageSlug = canonicalizeServer(page.slug!)
        const tags = page.frontmatter?.tags ?? []
        return (
@@ -39,7 +46,7 @@
              )}
              <div class="desc">
                <h3>
                  <a href={resolveRelative(slug, pageSlug)} class="internal">
                  <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">
                    {title}
                  </a>
                </h3>
@@ -48,8 +55,8 @@
                {tags.map((tag) => (
                  <li>
                    <a
                      class="internal"
                      href={resolveRelative(slug, `tags/${tag}` as CanonicalSlug)}
                      class="internal tag-link"
                      href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
                    >
                      #{tag}
                    </a>
@@ -68,4 +75,8 @@
.section h3 {
  margin: 0;
}
.section > .tags {
  margin: 0;
}
`