// About page component — renders stream.cameron.about record.

import { raw } from "hono/html";
import { getProfile } from "../data.ts";
import { getAboutDocument } from "../about-content.ts";
import { renderMarkdown } from "../markdown.ts";
import { PageNav } from "./page-nav.tsx";

export async function About() {
  const [document, profile] = await Promise.all([
    getAboutDocument(),
    getProfile(),
  ]);

  const html = await renderMarkdown(document.body);

  return (
    <div>
      <PageNav profile={profile} active="about" />
      <div class="blog-content about-content">
        {raw(html)}
      </div>
      <footer class="page-footer">
        <a
          href={`https://pdsls.dev/${document.uri}`}
          target="_blank"
          rel="noopener"
        >
          View record on PDS
        </a>
      </footer>
    </div>
  );
}