✨ Posts

.gitignore

@@ -21,4 +21,5 @@ pnpm-debug.log*
 .DS_Store
 
 # Development content
-/content
+content
+public/media

astro.config.mjs

@@ -1,10 +1,13 @@
 import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import tailwind from "@astrojs/tailwind";
-
 import react from "@astrojs/react";
 
+import sitemap from "@astrojs/sitemap";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [mdx(), tailwind(), react()]
+  output: "hybrid",
+  site: "https://smartsheep.studio",
+  integrations: [mdx(), tailwind(), react(), sitemap()]
 });

package.json

@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.4.1",
+    "@astrojs/deno": "^5.0.1",
     "@astrojs/mdx": "^2.0.5",
     "@astrojs/react": "^3.0.9",
+    "@astrojs/sitemap": "^3.0.5",
     "@astrojs/tailwind": "^5.1.0",
     "@popperjs/core": "^2.11.8",
     "@types/react": "^18.2.48",

src/components/Navbar.astro

@@ -7,12 +7,12 @@ interface MenuItem {
 
 const items: MenuItem[] = [
   { href: "/posts", label: "记录" },
-  { href: "/annoucements", label: "情报" },
+  { href: "/events", label: "情报" },
   { href: "/projects", label: "企划" },
 ];
 ---
 
-<div class="fixed top-0 navbar shadow-md bg-base-100 lg:px-5">
+<div class="fixed top-0 navbar shadow-md bg-base-100 lg:px-5 z-10">
   <div class="navbar-start">
     <div class="dropdown">
       <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
@@ -84,9 +84,8 @@ const items: MenuItem[] = [
       <input
         type="checkbox"
         class="theme-controller"
-        value="light"
+        value="dark"
-        data-toggle-theme="dark,light"
+        data-toggle-theme="dark"
-        data-act-class="active"
       />
 
       <svg

src/layouts/RootLayout.astro

@@ -33,7 +33,11 @@ const { title } = Astro.props;
     <Navbar />
 
     <!-- Content -->
+    <main transition:animate="slide">
       <slot />
+    </main>
+
+    <!-- Styles -->
     <style>
       html {
         overflow-x: hidden !important;
@@ -53,6 +57,10 @@ const { title } = Astro.props;
       .mt-header {
         margin-top: 64px;
       }
+
+      .top-header {
+        top: 64px;
+      }
     </style>
   </body>
 </html>

src/pages/events/index.astro

@@ -21,7 +21,7 @@ const events = eventsResponse.data.eventConnection.edges
   <div class="max-w-[720px] mx-auto">
     <div class="card w-full shadow-xl">
       <div class="card-body">
-        <h2 class="card-title">活动</h2>
+        <h2 class="card-title">情报</h2>
         <p>读岁月史书，涨人生阅历</p>
         <div class="divider"></div>
 

src/pages/posts/[...slug].astro

@@ -0,0 +1,79 @@
+---
+import PageLayout from "../../layouts/PageLayout.astro";
+
+import client from "../../../tina/__generated__/client";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+
+export const prerender = false;
+
+const { slug } = Astro.params;
+
+const { data } = await client.queries.post({
+  relativePath: (slug ?? "index") + ".mdx",
+});
+---
+
+<PageLayout>
+  <div class="wrapper">
+    <div class="card w-full shadow-xl">
+      {
+        data.post.heroImg && (
+          <figure>
+            <img src={data.post.heroImg} alt={data.post.title} />
+          </figure>
+        )
+      }
+      <div class="card-body">
+        <h2 class="card-title">{data.post.title}</h2>
+        <p class="description">{data.post.description ?? "No description"}</p>
+        <div class="divider"></div>
+
+        <div class="prose max-w-none">
+          <TinaMarkdown content={data.post._body} />
+        </div>
+      </div>
+    </div>
+
+    <div class="h-fit sticky top-header">
+      <div class="card shadow-xl">
+        <div class="card-body">
+          <div class="gap-2 text-sm metadata description">
+            <div>
+              <div>作者</div>
+              <div>{data.post.author?.name ?? "佚名"}</div>
+            </div>
+            <div>
+              <div>发布于</div>
+              <div>{new Date(data.post.date ?? 0).toLocaleString()}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</PageLayout>
+
+<style>
+  .wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .description {
+    color: oklch(var(--bc) / 0.8);
+  }
+
+  .metadata {
+    display: flex;
+    flex-direction: column;
+
+    transition: color 0.3s;
+  }
+
+  @media (min-width: 768px) {
+    .wrapper {
+      grid-template-columns: 2fr 1fr;
+    }
+  }
+</style>

src/pages/posts/index.astro

@@ -0,0 +1,55 @@
+---
+import PageLayout from "../../layouts/PageLayout.astro";
+
+import { client } from "../../../tina/__generated__/client";
+
+const postsResponse = await client.queries.postConnection();
+const posts = postsResponse.data.postConnection.edges
+  ?.sort((a, b) =>
+    new Date(a?.node?.date ?? 0).getTime() <=
+    new Date(b?.node?.date ?? 0).getTime()
+      ? -1
+      : 0
+  )
+  .map((event) => {
+    return { ...event?.node, slug: event?.node?._sys.filename };
+  });
+---
+
+<PageLayout>
+  <div class="max-w-[720px] mx-auto">
+    <div class="pt-16 pb-6 px-6">
+      <h1 class="text-4xl font-bold">记录</h1>
+      <p class="pt-3">记录生活，记录理想，记录记录……</p>
+    </div>
+
+    <div class="card card-compact w-full shadow-xl">
+      <div class="card-body">
+        <div class="grid justify-items-strench gap-6">
+          {
+            posts?.map((item) => (
+              <a href={`/posts/${item.slug}`}>
+                <div class="card sm:card-side hover:bg-base-200 transition-colors sm:max-w-none">
+                  {item.heroImg && (
+                    <figure class="mx-auto w-full object-cover p-6 max-sm:pb-0 sm:max-w-[12rem] sm:pe-0">
+                      <img
+                        loading="lazy"
+                        src={item.heroImg}
+                        class="border-base-content bg-base-300 rounded-btn border border-opacity-5"
+                        alt={item.title}
+                      />
+                    </figure>
+                  )}
+                  <div class="card-body">
+                    <h2 class="card-title">{item.title}</h2>
+                    <p class="text-xs opacity-60">{item.description}</p>
+                  </div>
+                </div>
+              </a>
+            ))
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+</PageLayout>

tina/collection/event.ts

@@ -33,7 +33,6 @@ const Event: Collection = {
       type: "string",
       label: "Description",
       name: "description",
-      required: true,
     },
     {
       type: "datetime",

tina/collection/post.ts

@@ -23,17 +23,17 @@ const Post: Collection = {
       name: "heroImg",
       label: "Hero Image",
     },
-    {
-      type: "rich-text",
-      label: "Excerpt",
-      name: "excerpt",
-    },
     {
       type: "reference",
       label: "Author",
       name: "author",
       collections: ["author"],
     },
+    {
+      type: "string",
+      label: "Description",
+      name: "description",
+    },
     {
       type: "datetime",
       label: "Published Date",

tina/config.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   },
   media: {
     tina: {
-      mediaRoot: "",
+      mediaRoot: "media",
       publicFolder: "public",
     },
   },

tsconfig.json

@@ -3,5 +3,8 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "react"
+  },
+  "paths": {
+    "@/*": ["src/*"],
   }
 }

yarn.lock

@@ -54,6 +54,13 @@
   resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-2.5.0.tgz#dba7a7a936aed98089b93505dda1c1011ba82746"
   integrity sha512-ZDluNgMIJT+z+HJcZ6QEJ/KqaFkTkrb+Za6c6VZs8G/nb1LBErL14/iU5EVJ9yu25i4QCLweuBJ3m5df34gZJg==
 
+"@astrojs/deno@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@astrojs/deno/-/deno-5.0.1.tgz#69949ab92b01c0c03e45236b7693f49c74406720"
+  integrity sha512-nYztGqHqC+q3A9ynjj3gblAkO/ZylDwahjVTx+2DvZgX4U+BJU/gL5BZkNtL+P10opCKJi29NvvVFvk6jwZHmA==
+  dependencies:
+    esbuild "^0.19.2"
+
 "@astrojs/internal-helpers@0.2.1":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@astrojs/internal-helpers/-/internal-helpers-0.2.1.tgz#4e2e6aabaa9819f17119aa10f413c4d6122c94cf"
@@ -139,6 +146,14 @@
     "@vitejs/plugin-react" "^4.2.0"
     ultrahtml "^1.3.0"
 
+"@astrojs/sitemap@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@astrojs/sitemap/-/sitemap-3.0.5.tgz#f7313c21f4eba2ba6d22936326af70f889c53414"
+  integrity sha512-60eLzNjMza3ABypiQPUC6ElOSZNZeY5CwSwgJ03hfeonl+Db9x12CCzBFdTw7A5Mq+O54xEZVUrR0tB+yWgX8w==
+  dependencies:
+    sitemap "^7.1.1"
+    zod "^3.22.4"
+
 "@astrojs/tailwind@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@astrojs/tailwind/-/tailwind-5.1.0.tgz#f63d285825f448704dbdccb3430980fee7ba7d26"
@@ -2459,13 +2474,18 @@
   dependencies:
     "@types/unist" "^2"
 
-"@types/node@^20.11.5":
+"@types/node@*", "@types/node@^20.11.5":
   version "20.11.5"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.5.tgz#be10c622ca7fcaa3cf226cf80166abc31389d86e"
   integrity sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==
   dependencies:
     undici-types "~5.26.4"
 
+"@types/node@^17.0.5":
+  version "17.0.45"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.45.tgz#2c0fafd78705e7a18b7906b5201a522719dc5190"
+  integrity sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==
+
 "@types/parse-json@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
@@ -2507,6 +2527,13 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/sax@^1.2.1":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@types/sax/-/sax-1.2.7.tgz#ba5fe7df9aa9c89b6dff7688a19023dd2963091d"
+  integrity sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==
+  dependencies:
+    "@types/node" "*"
+
 "@types/scheduler@*":
   version "0.16.8"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
@@ -3219,7 +3246,7 @@ append-field@^1.0.0:
   resolved "https://registry.yarnpkg.com/append-field/-/append-field-1.0.0.tgz#1e3440e915f0b1203d23748e78edd7b9b5b43e56"
   integrity sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==
 
-arg@^5.0.2:
+arg@^5.0.0, arg@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
@@ -4464,7 +4491,7 @@ esbuild@^0.18.10:
     "@esbuild/win32-ia32" "0.18.20"
     "@esbuild/win32-x64" "0.18.20"
 
-esbuild@^0.19.3, esbuild@^0.19.6:
+esbuild@^0.19.2, esbuild@^0.19.3, esbuild@^0.19.6:
   version "0.19.11"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.11.tgz#4a02dca031e768b5556606e1b468fe72e3325d96"
   integrity sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==
@@ -9159,6 +9186,16 @@ sisteransi@^1.0.5:
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
   integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
 
+sitemap@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-7.1.1.tgz#eeed9ad6d95499161a3eadc60f8c6dce4bea2bef"
+  integrity sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==
+  dependencies:
+    "@types/node" "^17.0.5"
+    "@types/sax" "^1.2.1"
+    arg "^5.0.0"
+    sax "^1.2.4"
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"