don't nest date into h1

Author: matklad

content/css/main.css

@@ -15,16 +15,25 @@ body {
     margin-right: auto;
 }
 
-header { margin-bottom: 2rem; }
-header > nav { display: flex; column-gap: 2ch; align-items: baseline; flex-wrap: wrap; }
-header a { font-style: normal; color: rgba(0, 0, 0, .8); text-decoration: none; }
-header a:hover { color: rgba(0, 0, 0, .8); text-decoration: underline; }
-header .title { font-size: 1.2em; flex-grow: 2; }
+header { /* Site Header */
+    margin-bottom: 2rem;
+    & nav { display: flex; column-gap: 2ch; align-items: baseline; flex-wrap: wrap; }
+    & a { font-style: normal; color: rgba(0, 0, 0, .8); text-decoration: none; }
+    & a:hover { color: rgba(0, 0, 0, .8); text-decoration: underline; }
+    & .title { font-size: 1.2em; flex-grow: 2; }
+}
+
+header:has(> h1) { /* Article Header */
+    margin-bottom: 0.75rem;
+    & h1 { margin-bottom: 0; line-height: 1.2 }
+}
 
-footer { margin-top: 2rem; }
-footer > p { display: flex; column-gap: 2ch; justify-content: center; flex-wrap: wrap; }
-footer a { color: rgba(0, 0, 0, .8); text-decoration: none; white-space: nowrap; }
-footer i { vertical-align: middle; color: rgba(0, 0, 0, .8) }
+footer {
+    margin-top: 2rem;
+    & p { display: flex; column-gap: 2ch; justify-content: center; flex-wrap: wrap; }
+    & a { color: rgba(0, 0, 0, .8); text-decoration: none; white-space: nowrap; }
+    & i { vertical-align: middle; color: rgba(0, 0, 0, .8) }
+}
 
 article > *, article > section > *, figure.blockquote { max-width: 55ch; }
 article > section, article > figure, article > section > figure { max-width: 80ch; }
@@ -166,7 +175,7 @@ kbd > kbd {
 
 dfn, .small-caps { font-style: normal; font-variant: small-caps; }
 
-.meta { display: block; display: block; color: #828282; font-family: "Open Sans", sans-serif; font-size: 1.5rem;}
+.meta { display: block; color: #828282; font-family: "Open Sans", sans-serif; font-size: 1.5rem;}
 
 .menu { font-weight: bold; }
 

src/djot.ts

@@ -44,22 +44,20 @@ export function render(doc: Doc, ctx: RenderCtx): HtmlString {
       return result;
     },
     heading: (node: Heading, r: HTMLRenderer) => {
-      const tag = `h${node.level}`;
-      const date = node.level == 1 && ctx.date
-        ? time_html(ctx.date, "meta")
-        : "";
-      const children = r.renderChildren(node);
       if (node.level == 1) ctx.title = get_string_content(node);
-      const id = node.level > 1 && section?.autoAttributes?.id;
-      if (id) {
+      if (node.level == 1 && ctx.date) {
+        const date = time_html(ctx.date, "meta");
+        const children = r.renderChildren(node);
         return `
-    <${tag}${r.renderAttributes(node)}>
-    <a href="#${id}">${children} ${date}</a>
-    </${tag}>\n`;
+<header>
+  <h1${r.renderAttributes(node)}>${children}</h1>
+  ${date}
+</header>
+`;
       } else {
-        return `\n<${tag}${
-          r.renderAttributes(node)
-        }>${children} ${date}</${tag}>\n`;
+        const tag = `h${node.level}`;
+        const children = r.renderChildren(node);
+        return `\n<${tag}${r.renderAttributes(node)}>${children}</${tag}>\n`;
       }
     },
     ordered_list: (node: OrderedList, r: HTMLRenderer): string => {

src/main.ts

@@ -167,7 +167,9 @@ async function build(params: {
   for (const page of pages) {
     const text = await Deno.readTextFile(`content/${page}.dj`);
     const ast = await djot.parse(text);
-    const html = djot.render(ast, {});
+    const html = djot.render(ast, {
+      date: page == "resume" ? new Date("May 21, 2024") : undefined,
+    });
     await update_file(
       `out/www/${page}.html`,
       html_ugly(Page(page, html)),

src/templates.tsx

@@ -147,10 +147,8 @@ export function Page(name: string, content: HtmlString) {
 export function PostList({ posts }: { posts: PostData[] }) {
   const list_items = posts.map((post) => (
     <li>
-      <h2>
-        <Time className="meta" date={post.date} />
-        <a href={post.path}>{post.title}</a>
-      </h2>
+      <Time className="meta" date={post.date} />
+      <h2><a href={post.path}>{post.title}</a></h2>
     </li>
   ));