HALF WORK!astro

author: Yuqian Yang <crupest@crupest.life> 2026-01-23 23:16:45 +0800
committer: Yuqian Yang <crupest@crupest.life> 2026-01-24 16:38:33 +0800
commit: 6d39cee75e7ef7c5e06d1a745a32224e11d68c37 (patch)
tree: 0f2646b569e8af6a2f464eb2755553eda0fe593b /www-2/src/layouts
parent: 78e3e234877cb10ca1088df31e831b36fa4a12c0 (diff)
download: crupest-6d39cee75e7ef7c5e06d1a745a32224e11d68c37.tar.gz
crupest-6d39cee75e7ef7c5e06d1a745a32224e11d68c37.tar.bz2
crupest-6d39cee75e7ef7c5e06d1a745a32224e11d68c37.zip
3 files changed, 152 insertions, 127 deletions
diff --git a/www-2/src/layouts/ArticlePage.astro b/www-2/src/layouts/ArticlePage.astro
index b6ea5d0..669681e 100644
--- a/www-2/src/layouts/ArticlePage.astro
+++ b/www-2/src/layouts/ArticlePage.astro
@@ -1,23 +1,17 @@
 ---
+import type { CollectionEntry } from "astro:content";
+
 import PageBase from "./PageBase.astro";
 import Nav from "../components/Nav.astro";
 
-interface Props {
-    id: string;
-    data: {
-        title: string;
-        date: Date;
-        lastmod?: Date;
-    };
-}
+type Props = Pick<CollectionEntry<"articles">, "id" | "data">;
 
 const {
-    id,
     data: { title, date, lastmod },
 } = Astro.props;
 ---
 
-<PageBase>
+<PageBase title={title}>
     <Nav />
     <h1 class="post-title">{title}</h1>
     <hr />
diff --git a/www-2/src/layouts/ListPage.astro b/www-2/src/layouts/ListPage.astro
new file mode 100644
index 0000000..708df26
--- /dev/null
+++ b/www-2/src/layouts/ListPage.astro
@@ -0,0 +1,23 @@
+---
+import PageBase from "./PageBase.astro";
+import Nav from "../components/Nav.astro";
+import ArticlePreviewList, {
+    type Props as ArticlePreviewListProps,
+} from "../components/ArticlePreviewList.astro";
+
+interface Props {
+    title: string;
+    articles: ArticlePreviewListProps["articles"];
+}
+
+const { title, articles } = Astro.props;
+---
+
+<PageBase title={title}>
+    <Nav />
+    <h1>{title}</h1>
+    <hr />
+    <ArticlePreviewList articles={articles} headerElement="h2" />
+</PageBase>
+
+<style></style>
diff --git a/www-2/src/layouts/PageBase.astro b/www-2/src/layouts/PageBase.astro
index e6e0e1e..83073ca 100644
--- a/www-2/src/layouts/PageBase.astro
+++ b/www-2/src/layouts/PageBase.astro
@@ -1,3 +1,11 @@
+---
+interface Props {
+    title: string;
+}
+
+const { title } = Astro.props;
+---
+
 <!doctype html>
 <html lang="en">
     <head>
@@ -5,7 +13,7 @@
         <meta name="viewport" content="width=device-width" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="generator" content={Astro.generator} />
-        <title>Astro Basics</title>
+        <title>{title}</title>
     </head>
     <body>
         <article id="main-article">
@@ -41,141 +49,141 @@
 </html>
 
 <style is:global>
-html {
-  width: 100%;
-  --body-fg-color: unset;
-  --body-bg-color: unset;
-  --table-border-color: black;
-  --toast-fg-color: white;
-  --toast-bg-color: black;
-  --code-fg-color: var(--body-fg-color);
-  --code-bg-color: #eff1f5;
-}
+    html {
+        width: 100%;
+        --body-fg-color: unset;
+        --body-bg-color: unset;
+        --table-border-color: black;
+        --toast-fg-color: white;
+        --toast-bg-color: black;
+        --code-fg-color: var(--body-fg-color);
+        --code-bg-color: #eff1f5;
+    }
 
-* {
-  box-sizing: border-box;
-}
+    * {
+        box-sizing: border-box;
+    }
 
-body {
-  width: 100%;
-  margin: 0;
-  color: var(--body-fg-color);
-  background-color: var(--body-bg-color);
-}
+    body {
+        width: 100%;
+        margin: 0;
+        color: var(--body-fg-color);
+        background-color: var(--body-bg-color);
+    }
 
-/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
-h1 {
-  margin-block: 0.67em;
-  font-size: 2em;
-}
+    /* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
+    h1 {
+        margin-block: 0.67em;
+        font-size: 2em;
+    }
 
-.mono {
-  font-family: monospace;
-}
+    .mono {
+        font-family: monospace;
+    }
 
-a.mono-link,
-.mono-link a,
-.mono-link .fake-link {
-  font-family: monospace;
-}
+    a.mono-link,
+    .mono-link a,
+    .mono-link .fake-link {
+        font-family: monospace;
+    }
 
-div.mono-container {
-  font-family: monospace;
-  margin-block: 1rem;
-}
+    div.mono-container {
+        font-family: monospace;
+        margin-block: 1rem;
+    }
 
-table  {
-  border-collapse: collapse;
+    table {
+        border-collapse: collapse;
 
-  &, :is(td,th) {
-    padding: 0.2em 0.4em;
-    border: 1px solid var(--table-border-color);
-  }
-}
+        &,
+        :is(td, th) {
+            padding: 0.2em 0.4em;
+            border: 1px solid var(--table-border-color);
+        }
+    }
 
-.toast {
-  font-size: large;
-  font-family: monospace;
-  color: var(--toast-fg-color);
-  background-color: var(--toast-bg-color);
-  padding: 0.5em 0.3em;
-  border-radius: 6px;
-
-  position: fixed;
-  z-index: 1;
-  top: 4px;
-  left: 50vw;
-  transform: translateX(-50%);
-}
+    .toast {
+        font-size: large;
+        font-family: monospace;
+        color: var(--toast-fg-color);
+        background-color: var(--toast-bg-color);
+        padding: 0.5em 0.3em;
+        border-radius: 6px;
+
+        position: fixed;
+        z-index: 1;
+        top: 4px;
+        left: 50vw;
+        transform: translateX(-50%);
+    }
 
-.chroma {
-  overflow-x: auto;
-  padding-left: 1px;
-  padding-right: 4px;
-  border-radius: 6px;
-}
+    .chroma {
+        overflow-x: auto;
+        padding-left: 1px;
+        padding-right: 4px;
+        border-radius: 6px;
+    }
 
-nav {
-  font-size: large;
-}
+    nav {
+        font-size: large;
+    }
 
-#main-article {
-  position: relative;
-  left: 50%;
-  transform: translateX(-50%);
-  max-width: 880px;
-  padding: 0 1em;
-  margin-top: 1em;
-}
+    #main-article {
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+        max-width: 880px;
+        padding: 0 1em;
+        margin-top: 1em;
+    }
 
-#license a {
-  font-family: initial;
-  text-decoration: none;
-}
+    #license a {
+        font-family: initial;
+        text-decoration: none;
+    }
 
-#license-text {
-  font-family: monospace;
-  text-decoration: initial;
-}
+    #license-text {
+        font-family: monospace;
+        text-decoration: initial;
+    }
 
-#license-img-container img {
-  height: 1em;
-  vertical-align: middle;
-}
+    #license-img-container img {
+        height: 1em;
+        vertical-align: middle;
+    }
 
-.link-group {
-  margin-block-end: 1em;
+    .link-group {
+        margin-block-end: 1em;
 
-  > .link-group-title {
-    font-size: 1.1em;
-    margin-block-end: 5px;
-  }
+        > .link-group-title {
+            font-size: 1.1em;
+            margin-block-end: 5px;
+        }
 
-  > .link-group-list {
-    border-inline-start: solid 1px hsl(0, 0%, 25%);
-    padding-inline-start: 8px;
+        > .link-group-list {
+            border-inline-start: solid 1px hsl(0, 0%, 25%);
+            padding-inline-start: 8px;
 
-    > .link-group-item::before {
-      content: "- ";
+            > .link-group-item::before {
+                content: "- ";
+            }
+        }
     }
-  }
-}
-
-html[data-theme="dark"] {
-  --body-fg-color: white;
-  --body-bg-color: black;
-  --table-border-color: hsl(0, 0%, 25%);
-  --toast-fg-color: var(--body-bg-color);
-  --toast-bg-color: var(--body-fg-color);
-  --code-bg-color: #1e1e2e;
-
-  & a:link {
-    color:#34ffd9;
-  }
-
-  & a:visited {
-    color:#abcac4;
-  }
-}
 
+    html[data-theme="dark"] {
+        --body-fg-color: white;
+        --body-bg-color: black;
+        --table-border-color: hsl(0, 0%, 25%);
+        --toast-fg-color: var(--body-bg-color);
+        --toast-bg-color: var(--body-fg-color);
+        --code-bg-color: #1e1e2e;
+
+        & a:link {
+            color: #34ffd9;
+        }
+
+        & a:visited {
+            color: #abcac4;
+        }
+    }
 </style>
author	Yuqian Yang <crupest@crupest.life>	2026-01-23 23:16:45 +0800
committer	Yuqian Yang <crupest@crupest.life>	2026-01-24 16:38:33 +0800
commit	6d39cee75e7ef7c5e06d1a745a32224e11d68c37 (patch)
tree	0f2646b569e8af6a2f464eb2755553eda0fe593b /www-2/src/layouts
parent	78e3e234877cb10ca1088df31e831b36fa4a12c0 (diff)
download	crupest-6d39cee75e7ef7c5e06d1a745a32224e11d68c37.tar.gz crupest-6d39cee75e7ef7c5e06d1a745a32224e11d68c37.tar.bz2 crupest-6d39cee75e7ef7c5e06d1a745a32224e11d68c37.zip