PageRankPage

---
import type { PageRankListItem } from "../../lib/internal-links/pagerank";
import Base from "./Base.astro";
import Heading from "../0_atoms/Heading.astro";
import MarkdownBlock from "../2_organisms/MarkdownBlock.astro";

interface Props {
  items: PageRankListItem[];
  /** Pass from page: `Astro.site ? new URL(Astro.url.pathname, Astro.site).href : undefined` */
  canonicalHref?: string;
}

const { items, canonicalHref } = Astro.props;
---

<Base title="PageRank" canonicalHref={canonicalHref}>
  <div class="mb-5">
    <Heading class="mt-0 mb-6 text-xl font-medium text-ink">PageRank</Heading>
    <MarkdownBlock>
      Public notes, links, gists, guide roots, and guide chapters ranked by
      <a href="https://en.wikipedia.org/wiki/PageRank" target="_blank"
        >PageRank</a
      >
      on the internal id-link graph (damping 0.85). Unlisted posts are omitted. A
      link from a page that itself receives many strong incoming links counts for
      more than a link from a peripheral page. The score is relative to a uniform
      baseline of 1.0 (higher means more central). For raw inbound counts without
      PageRank, see
      <a href="/backlinks" class="underline-offset-4 hover:underline"
        >most linked</a
      >.
    </MarkdownBlock>
  </div>

  {
    items.length === 0 ? (
      <p class="text-sm meta text-ink-faint">Nothing to rank.</p>
    ) : (
      <ul class="list-none p-0 m-0 flex flex-col gap-2">
        {items.map(({ title, collection, slug, relativeToUniform }) => (
          <li class="flex justify-between items-baseline gap-4">
            <a
              href={`/${collection}/${slug}`}
              class="text-sm meta text-ink underline-offset-4 transition-colors hover:underline"
            >
              {title}
            </a>
            <span
              class="text-xs meta shrink-0 text-ink tabular-nums"
              title="PageRank relative to uniform"
            >
              {relativeToUniform.toFixed(2)}
            </span>
          </li>
        ))}
      </ul>
    )
  }
</Base>