website

website/src/pages/posts/[slug].astro (2511B)

---

---
// One post, shown as an Org buffer: #+ keywords, then the text under starred
// headings that fold, with an *Ilist* window of its headings when the post asks
// for a table of contents, and the giscus comments from the old site below.
// The posts themselves are Markdown in src/content/posts.
import { render } from "astro:content";
import "katex/dist/katex.min.css";
import Base from "../../layouts/Base.astro";
import Buffer from "../../components/frame/Buffer.astro";
import OrgHeader from "../../components/post/OrgHeader.astro";
import OrgBody from "../../components/post/OrgBody.astro";
import Outline from "../../components/post/Outline.astro";
import PostNav from "../../components/post/PostNav.astro";
import Comments from "../../components/post/Comments.astro";
import { publishedPosts, summary, wordCount } from "../../lib/posts.js";

export async function getStaticPaths() {
  const posts = await publishedPosts();
  return posts.map((post, i) => ({
    params: { slug: post.id },
    props: { post, newer: posts[i - 1], older: posts[i + 1] },
  }));
}

const { post, newer, older } = Astro.props;
const { Content, headings } = await render(post);
const { title, date, tags, toc } = post.data;
const file = `${post.id}.org`;
const words = wordCount(post.body ?? "");
const minutes = Math.max(1, Math.round(words / 230));
// (the footnotes' heading is only there for screen readers)
const outline = toc ? headings.filter((h) => (h.depth === 2 || h.depth === 3) && h.slug !== "footnote-label") : [];
---
<Base title={`${title} - Michael Neuper`} description={summary(post.body ?? "")} buf={file} mode="Org" skip="#post">
  <Fragment slot="help">
    <div><dt><kbd>TAB</kbd></dt><dd>fold the heading whose stars you clicked</dd></div>
    <div><dt><kbd>S-TAB</kbd></dt><dd>cycle the whole buffer: overview, contents, show all</dd></div>
    <div><dt><kbd>SPC i</kbd></dt><dd>imenu: jump to a heading</dd></div>
    <div><dt><kbd>SPC n</kbd></dt><dd>back to the list of posts</dd></div>
  </Fragment>

  <main>
    <Buffer id="post" class="post" file={file} mode="Org" meta={`${words.toLocaleString("en")} words, ${minutes} min`} labelledby="post-title">
      <OrgHeader title={title} date={date} tags={tags} />
      <div class:list={["post-cols", { "has-toc": outline.length > 0 }]}>
        {outline.length > 0 && <Outline headings={outline} />}
        <OrgBody><Content /></OrgBody>
      </div>
      <PostNav older={older} newer={newer} />
    </Buffer>
    <Comments />
  </main>
</Base>