base path refactor to better support subpath hosting

Jacky Zhao

2023-08-19 c874e7e9378a5ba895870e9680484fb4af5c6e93

 quartz/components/PageList.tsx

@@ -1,7 +1,6 @@
import { relativeToRoot } from "../path"
import { FullSlug, resolveRelative } from "../util/path"
import { QuartzPluginData } from "../plugins/vfile"
import { Date } from "./Date"
import { stripIndex } from "./scripts/util"
import { QuartzComponentProps } from "./types"

function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): number {
@@ -18,35 +17,66 @@
  // otherwise, sort lexographically by title
  const f1Title = f1.frontmatter?.title.toLowerCase() ?? ""
  const f2Title = f2.frontmatter?.title.toLowerCase() ?? ""
  return f1Title.localeCompare(f2Title) 
  return f1Title.localeCompare(f2Title)
}

export function PageList({ fileData, allFiles }: QuartzComponentProps) {
  const slug = fileData.slug!
  return <ul class="section-ul">
    {allFiles.sort(byDateAndAlphabetical).map(page => {
      const title = page.frontmatter?.title
      const pageSlug = page.slug!
      const tags = page.frontmatter?.tags ?? []
      return <li class="section-li">
        <div class="section">
          {page.dates && <p class="meta">
            <Date date={page.dates.modified} />
          </p>}
          <div class="desc">
            <h3><a href={stripIndex(relativeToRoot(slug, pageSlug))} class="internal">{title}</a></h3>
          </div>
          <ul class="tags">
            {tags.map(tag => <li><a class="internal" href={relativeToRoot(slug, `tags/${tag}`)}>#{tag}</a></li>)}
          </ul>
        </div>
      </li>
    })}
  </ul>
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">
      {list.map((page) => {
        const title = page.frontmatter?.title
        const tags = page.frontmatter?.tags ?? []

        return (
          <li class="section-li">
            <div class="section">
              {page.dates && (
                <p class="meta">
                  <Date date={page.dates.modified} />
                </p>
              )}
              <div class="desc">
                <h3>
                  <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">
                    {title}
                  </a>
                </h3>
              </div>
              <ul class="tags">
                {tags.map((tag) => (
                  <li>
                    <a
                      class="internal tag-link"
                      href={resolveRelative(fileData.slug!, `tags/${tag}/index` as FullSlug)}
                    >
                      #{tag}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </li>
        )
      })}
    </ul>
  )
}

PageList.css = `
.section h3 {
  margin: 0;
}

.section > .tags {
  margin: 0;
}
`