💄 Optimized UX

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/Capital.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Capital.iml" filepath="$PROJECT_DIR$/.idea/Capital.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

src/components/PostList.astro

@@ -8,11 +8,11 @@ import { POST_TYPES } from "../scripts/consts";
 const { posts } = Astro.props;
 ---
 
-<div class="grid justify-items-strench gap-6">
+<div class="grid justify-items-strench shadow-lg">
   {
     posts?.map((item) => (
       <a href={`/p/${item.slug}`}>
-        <div class="card sm:card-side hover:bg-base-200 transition-colors sm:max-w-none shadow-xl">
+        <div class="card sm:card-side hover:bg-base-200 transition-colors sm:max-w-none">
           {item.cover.image.url && (
             <figure class="mx-auto w-full object-cover p-6 max-sm:pb-0 sm:max-w-[12rem] sm:pe-0">
               <img

src/pages/index.astro

@@ -182,38 +182,6 @@ const { events } = (
   </div>
 </RootLayout>
 
-<script>
-  function debounce(func: any, timeout = 300) {
-    let timer: number;
-    return (...args: any[]) => {
-      clearTimeout(timer);
-      // @ts-ignore
-      timer = setTimeout(() => {
-        // @ts-ignore
-        func.apply(this, args);
-      }, timeout);
-    };
-  }
-
-  // Makes scroll means slide to next page
-  const wrapper = document.querySelector<HTMLDivElement>(".wrapper");
-  const template = document.querySelector<HTMLDivElement>("#hello");
-  const scroll = debounce((negative: boolean) => {
-    if (wrapper) {
-      console.log("scrolled");
-      let range = negative
-        ? -(template?.clientHeight ?? 0)
-        : template?.clientHeight ?? 0;
-      wrapper.scrollTop += range;
-    }
-  }, 40); // 40ms to prevent touchpad and smooth scroll software
-  wrapper?.addEventListener("wheel", (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    scroll(event.deltaY < 0);
-  });
-</script>
-
 <style>
   .spinning {
     animation: 5s ease-in-out infinite running spinning;

src/pages/posts/index.astro

@@ -2,14 +2,14 @@
 import PageLayout from "../../layouts/PageLayout.astro";
 import PostList from "../../components/PostList.astro";
 
-import { graphQuery } from "../../scripts/requests";
+import {graphQuery} from "../../scripts/requests";
 
 export const prerender = false;
 
-const { posts } = (
-  await graphQuery(
-    `query Query($where: PostWhereInput!) {
-  posts(where: $where) {
+const {posts} = (
+    await graphQuery(
+        `query Query($where: PostWhereInput!, $orderBy: [PostOrderByInput!]!) {
+  posts(where: $where, orderBy: $orderBy) {
     slug
     type
     title
@@ -31,18 +31,25 @@ const { posts } = (
     createdAt
   }
 }`,
-    { where: {} }
-  )
+        {
+            orderBy: [
+                {
+                    createdAt: "desc",
+                },
+            ],
+            where: {}
+        }
+    )
 ).data;
 ---
 
 <PageLayout title="记录">
-  <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-2">记录生活，记录理想，记录记录……</p>
-    </div>
+    <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-2">记录生活，记录理想，记录记录……</p>
+        </div>
 
-    <PostList posts={posts as any[]} />
-  </div>
+        <PostList posts={posts as any[]}/>
+    </div>
 </PageLayout>

src/scripts/requests.ts

@@ -1,12 +1,17 @@
+const defaultCms = "https://smartsheep.studio";
+
 export async function graphQuery(query: string, variables: any) {
-  const response = await fetch(`${process.env.PUBLIC_CMS}/api/graphql`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      query,
-      variables,
-    }),
-  });
+  const response = await fetch(
+    `${process.env.PUBLIC_CMS ?? defaultCms}/api/graphql`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        query,
+        variables,
+      }),
+    },
+  );
 
   return await response.json();
 }