chore: add post details

Author: openscript

.changeset/funny-ghosts-allow.md

@@ -0,0 +1,5 @@
+---
+"r.obin.ch": patch
+---
+
+Add post details

src/components/Details.astro

@@ -2,14 +2,19 @@
 
 type Props = {
   defaultOpen?: boolean;
+  title?: string;
 }
 
-const { defaultOpen = false } = Astro.props;
+const { defaultOpen = false, title } = Astro.props;
 
 ---
 
-<details open={defaultOpen} data-default-open={defaultOpen}>
-  <summary><slot name="title" /></summary>
+<details data-default-open={defaultOpen}>
+  <summary>
+    <slot name="title">
+      {title}
+    </slot>
+  </summary>
   <div class="content">
     <slot />
   </div>
@@ -52,17 +57,19 @@ const { defaultOpen = false } = Astro.props;
 </style>
 
 <script>
-  const details = document.querySelectorAll('details') as NodeListOf<HTMLDetailsElement>;
   const matchQuery = window.matchMedia('(max-width: 1280px)');
 
-  matchQuery.addEventListener('change', () => {
+  const handleBreakpoint = () => {
+    const details = document.querySelectorAll('details') as NodeListOf<HTMLDetailsElement>;
     details.forEach(detail => {
       if (matchQuery.matches) {
         detail.removeAttribute('open');
       } else {
         detail.dataset.defaultOpen === 'true' && detail.setAttribute('open', '');
       }
     });
-  });
+  };
+  document.addEventListener('astro:page-load', handleBreakpoint);
+  matchQuery.addEventListener('change', handleBreakpoint);
 
 </script>

src/components/TableOfContents.astro

@@ -93,8 +93,7 @@ const t = useTranslations(locale);
   });
 </script>
 
-<Details defaultOpen={true}>
-  <span class="label" slot="title">{t("tableOfContentsLabel")}</span>
+<Details defaultOpen={true} title={t("tableOfContentsLabel")}>
   <nav class="table-of-contents">
     <ul>
       {

src/components/GitInfo.astro renamed to src/components/VersioningDetails.astro

@@ -13,10 +13,8 @@ const t = useTranslations(locale);
 
 ---
 
-<Details>
-  <span class="label" slot="title">{t('gitInfoLabel')}</span>
+<Details title={t('versioningLabel')}>
   <dl>
-    <slot name="before" />
     {gitInfo?.lastCommit && (
       <dt>{t('authorLabel')}</dt>
       <dd>{gitInfo.lastCommit.authorName}</dd>
@@ -29,6 +27,5 @@ const t = useTranslations(locale);
         <Button href={gitInfo.remoteEditUrl}>{t('editLabel')}</Button>
       </dd>
     )}
-    <slot name="after" />
   </dl>
 </Details>

src/layouts/DefaultLayout.css

@@ -269,7 +269,7 @@ footer {
   padding-right: var(--padding-page);
 }
 
-:is(#topbar, header, footer) a {
+body > :is(#topbar, header, footer) a {
   text-decoration: none;
   color: var(--color-white);
 }

src/pages/[...locale]/[blog]/[...slug].astro

@@ -1,7 +1,6 @@
 ---
 import DefaultLayout from "../../../layouts/DefaultLayout.astro";
 import TableOfContents from "../../../components/TableOfContents.astro";
-import GitInfo from "../../../components/GitInfo.astro";
 import { getGitInfo } from "../../../remark/remark-git-info";
 import { parseLocale, useTranslations } from "../../../utils/i18n";
 import Comments from "../../../components/Comments.astro";
@@ -20,6 +19,8 @@ import {
 } from "../../../utils/paths";
 import ArticleWithAside from "../../../layouts/pages/ArticleWithAside.astro";
 import DateTime from "../../../components/DateTime.astro";
+import VersioningDetails from "../../../components/VersioningDetails.astro";
+import Details from "../../../components/Details.astro";
 
 export const getStaticPaths = async () => {
   const routePattern = "[...locale]/[blog]/[...slug]";
@@ -61,22 +62,18 @@ const t = useTranslations(parseLocale(locale));
     <Comments />
     <Fragment slot="title">
       <h1>{title}</h1>
-      {publishedAt && <DateTime date={publishedAt} />}
     </Fragment>
     <Fragment slot="aside">
       <TableOfContents headings={headings} />
-      <GitInfo gitInfo={gitInfo}>
-        <Fragment slot="after">
-          <dt>{t("tagsLabel")}</dt>
-          <dd>
-            {
-              tags.map((tag) => (
-                <a href={resolvePath(blogPath, slug(tag))}>{tag}</a>
-              ))
-            }
-          </dd>
-        </Fragment>
-      </GitInfo>
+      <Details defaultOpen title={t("detailsLabel")}>
+        <dl>
+          <dt>{t("createdAtLabel")}</dt>
+          <dd><DateTime date={publishedAt} /></dd>
+          <dt>{t("categorizedWithLabel")}</dt>
+          <dd>{tags.map((tag) => <a href={resolvePath(blogPath, slug(tag))}>{tag}</a>)}</dd>
+        </dl>
+      </Details>
+      <VersioningDetails gitInfo={gitInfo} />
     </Fragment>
   </ArticleWithAside>
 </DefaultLayout>

src/site.config.ts

@@ -30,8 +30,10 @@ export const C = {
       searchPlaceholder: "Tippe um zu suchen...",
       searchLoading: "Suche läuft...",
       tableOfContentsLabel: "Inhaltsverzeichnis",
-      tagsLabel: "Kategorien",
-      gitInfoLabel: "Zusatzinformationen",
+      detailsLabel: "Details",
+      categorizedWithLabel: "Kategorisiert mit",
+      createdAtLabel: "Erstellt am",
+      versioningLabel: "Versionierung",
       authorLabel: "Autor",
       lastUpdatedLabel: "Letzte Aktualisierung",
       linksLabel: "Links",
@@ -62,8 +64,10 @@ export const C = {
       searchPlaceholder: "Type to search...",
       searchLoading: "Searching...",
       tableOfContentsLabel: "Table of Contents",
-      tagsLabel: "Tags",
-      gitInfoLabel: "Meta information",
+      detailsLabel: "Details",
+      categorizedWithLabel: "Categorized with",
+      createdAtLabel: "Created at",
+      versioningLabel: "Versioning",
       authorLabel: "Author",
       lastUpdatedLabel: "Last updated",
       linksLabel: "Links",