---
import { Image } from "astro:assets";
import { getCollection, render } from "astro:content";
import WebMentions from "@/components/WebMentions.astro";
import BaseLayout from "@/layouts/BaseLayout.astro";
export async function getStaticPaths() {
  const notes = await getCollection("notes", ({ data }) => !data.draft);
  return notes.map((note) => ({
    params: { slug: note.id },
    props: { note },
  }));
}

const { note } = Astro.props;
const { Content } = await render(note);
const noteUrl = new URL(`/notes/${note.id}/`, Astro.site).toString();
const ogImageUrl = new URL(`/og/notes/${note.id}.png`, Astro.site).toString();

function capitalize(s: string) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

function formatDate(date: Date) {
  return date.toLocaleDateString("de-DE", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
}
---

<BaseLayout
  title={note.data.title}
  description={note.data.description ?? note.data.title}
  image={{ src: ogImageUrl, alt: note.data.title }}
>
  <div class="page">
    <main class="main">
      <a href="/notes" class="back">← Notes</a>
      <article class="h-entry">
        <a href={noteUrl} class="u-url" aria-hidden="true" tabindex="-1" style="display:none">Permalink</a>
        <span class="p-author h-card" style="display:none"><img class="u-photo" src="https://adrian-altner.com/avatar.jpg" alt="Adrian Altner" /><span class="p-name">Adrian Altner</span><a class="u-url" href="https://adrian-altner.com">adrian-altner.com</a></span>
        <header class="note-header">
          <h1 class="note-title p-name">{note.data.title}</h1>
          <time
            class="note-date dt-published"
            datetime={note.data.publishDate.toISOString()}
          >
            {formatDate(note.data.publishDate)}
          </time>
          {
            note.data.tags.length > 0 && (
              <div class="note-tags">
                {note.data.tags.map((tag) => (
                  <a href={`/tags/${tag}`} class="tag">
                    {capitalize(tag)}
                  </a>
                ))}
              </div>
            )
          }
        </header>
        {note.data.cover && (
          <Image class="note-cover" src={note.data.cover} alt={note.data.coverAlt ?? ""} />
        )}
        <div class="prose e-content">
          <Content />
        </div>
        <WebMentions url={noteUrl} />
      </article>
      <a href="/notes" class="back">← Notes</a>
    </main>
  </div>
</BaseLayout>

<style>
  .page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
    background: #f5f5f3;
    color: #111;
  }

  .main {
    max-width: var(--width-prose);
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    width: 100%;
  }

  .note-header {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e0e0de;
  }

  .note-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }

  .note-date {
    font-size: 0.875rem;
    color: #888;
  }

  .note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.75rem;
  }

  .tag {
    font-size: 0.75rem;
    color: #666;
    background: #e8e8e6;
    padding: 0.15em 0.55em;
    border-radius: 3px;
    text-decoration: none;
  }

  .tag:hover {
    background: var(--accent);
    color: #fff;
  }

  .note-cover {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin-bottom: 2rem;
  }

  .prose {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
  }

  .prose :global(h2) {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 2rem 0 0.75rem;
    color: #111;
  }

  .prose :global(h3) {
    font-size: 1.15rem;
    font-weight: 500;
    margin: 1.5rem 0 0.5rem;
    color: #111;
  }

  .prose :global(p) {
    margin-bottom: 1.25rem;
  }

  .prose :global(a) {
    color: var(--accent);
    text-underline-offset: 3px;
  }

  .prose :global(blockquote) {
    border-left: 3px solid var(--accent);
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    color: #555;
    font-style: italic;
  }

  .prose :global(code) {
    font-family: ui-monospace, monospace;
    font-size: 0.875em;
    background: #e8e8e6;
    padding: 0.1em 0.35em;
    border-radius: 3px;
  }

  .prose :global(pre) {
    background: #2b2b2b;
    color: #e0e0e0;
    padding: 1.25rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1.5rem 0;
  }

  .prose :global(pre code) {
    background: none;
    padding: 0;
    font-size: 0.875rem;
  }

  .prose :global(ul),
  .prose :global(ol) {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .prose :global(li) {
    margin-bottom: 0.4rem;
  }

  .back {
    display: inline-block;
    font-size: 0.9rem;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    padding-bottom: 1px;
    margin-bottom: 1.5rem;
  }

  article + .back {
    margin-bottom: 0;
    margin-top: 1rem;
  }

  .back:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
</style>
