✨ Better player

💄 Optimized navbar
💄 Optimized UX
2024-01-23 00:46:18 +08:00 · 2024-01-23 00:16:04 +08:00 · 2024-01-23 00:07:36 +08:00
28 changed files with 629 additions and 341 deletions
--- a/.idea/.gitignore
+++ b/.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
--- a/.idea/Capital.iml
+++ b/.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>
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@ -0,0 +1,57 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="120" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="120" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="120" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="120" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>
--- a/.idea/codeStyles/codeStyleConfig.xml
+++ b/.idea/codeStyles/codeStyleConfig.xml
@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
--- a/.idea/modules.xml
+++ b/.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>
--- a/.idea/vcs.xml
+++ b/.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>
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": false
+}
--- a/content/.keystone/config.js
+++ b/content/.keystone/config.js
@ -4,14 +4,16 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+  for (var name in all) __defProp(target, name, { get: all[name], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
+  if ((from && typeof from === "object") || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+        __defProp(to, key, {
+          get: () => from[key],
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable,
+        });
  }
  return to;
 };
@ -20,7 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // keystone.ts
 var keystone_exports = {};
 __export(keystone_exports, {
-  default: () => keystone_default
+  default: () => keystone_default,
 });
 module.exports = __toCommonJS(keystone_exports);
 var import_core8 = require("@keystone-6/core");
@ -35,24 +37,24 @@ var allowUser = {
  operation: {
    create: isUser,
    update: isUser,
-    delete: isUser
-  }
+    delete: isUser,
+  },
 };
 var isEditor = ({ session: session2 }) => session2?.data.isEditor || session2?.data.isAdmin;
 var allowEditor = {
  operation: {
    create: isEditor,
    update: isEditor,
-    delete: isEditor
-  }
+    delete: isEditor,
+  },
 };
 var isAdmin = ({ session: session2 }) => session2?.data.isAdmin;
 var allowAdmin = {
  operation: {
    create: isAdmin,
    update: isAdmin,
-    delete: isAdmin
-  }
+    delete: isAdmin,
+  },
 };

 // schema/assets.ts
@ -64,9 +66,9 @@ var Image = (0, import_core.list)({
    caption: (0, import_fields.text)(),
    image: (0, import_fields.image)({ storage: "localImages" }),
    createdAt: (0, import_fields.timestamp)({
-      defaultValue: { kind: "now" }
-    })
-  }
+      defaultValue: { kind: "now" },
+    }),
+  },
 });
 var Asset = (0, import_core.list)({
  access: allowEditor,
@ -77,17 +79,17 @@ var Asset = (0, import_core.list)({
      type: "enum",
      options: [
        { label: "Video", value: "video" },
-        { label: "Audio", value: "audio" }
+        { label: "Audio", value: "audio" },
      ],
      defaultValue: "video",
      db: { map: "media_type" },
      validation: { isRequired: true },
-      ui: { displayMode: "select" }
+      ui: { displayMode: "select" },
    }),
    createdAt: (0, import_fields.timestamp)({
-      defaultValue: { kind: "now" }
-    })
-  }
+      defaultValue: { kind: "now" },
+    }),
+  },
 });

 // schema/moments.ts
@ -106,10 +108,10 @@ var Moment = (0, import_core2.list)({
        [1, 1, 1],
        [2, 1],
        [1, 2],
-        [1, 2, 1]
+        [1, 2, 1],
      ],
      links: true,
-      dividers: true
+      dividers: true,
    }),
    author: (0, import_fields2.relationship)({
      ref: "User.moments",
@ -118,9 +120,9 @@ var Moment = (0, import_core2.list)({
        cardFields: ["name", "email"],
        inlineEdit: { fields: ["name", "email"] },
        linkToItem: true,
-        inlineConnect: true
+        inlineConnect: true,
      },
-      many: false
+      many: false,
    }),
    categories: (0, import_fields2.relationship)({
      ref: "Category.moments",
@ -131,8 +133,8 @@ var Moment = (0, import_core2.list)({
        inlineEdit: { fields: ["name"] },
        linkToItem: true,
        inlineConnect: true,
-        inlineCreate: { fields: ["name"] }
-      }
+        inlineCreate: { fields: ["name"] },
+      },
    }),
    tags: (0, import_fields2.relationship)({
      ref: "Tag.moments",
@ -143,13 +145,13 @@ var Moment = (0, import_core2.list)({
        inlineEdit: { fields: ["name"] },
        linkToItem: true,
        inlineConnect: true,
-        inlineCreate: { fields: ["name"] }
-      }
+        inlineCreate: { fields: ["name"] },
+      },
    }),
    createdAt: (0, import_fields2.timestamp)({
-      defaultValue: { kind: "now" }
-    })
-  }
+      defaultValue: { kind: "now" },
+    }),
+  },
 });

 // schema/categories.ts
@ -160,30 +162,30 @@ var Category = (0, import_core3.list)({
  fields: {
    slug: (0, import_fields3.text)({
      validation: {
-        isRequired: true
+        isRequired: true,
      },
-      isIndexed: "unique"
+      isIndexed: "unique",
    }),
    name: (0, import_fields3.text)(),
    posts: (0, import_fields3.relationship)({ ref: "Post.categories", many: true }),
    moments: (0, import_fields3.relationship)({ ref: "Moment.categories", many: true }),
-    events: (0, import_fields3.relationship)({ ref: "Event.categories", many: true })
-  }
+    events: (0, import_fields3.relationship)({ ref: "Event.categories", many: true }),
+  },
 });
 var Tag = (0, import_core3.list)({
  access: allowEditor,
  fields: {
    slug: (0, import_fields3.text)({
      validation: {
-        isRequired: true
+        isRequired: true,
      },
-      isIndexed: "unique"
+      isIndexed: "unique",
    }),
    name: (0, import_fields3.text)(),
    posts: (0, import_fields3.relationship)({ ref: "Post.tags", many: true }),
    moments: (0, import_fields3.relationship)({ ref: "Moment.tags", many: true }),
-    events: (0, import_fields3.relationship)({ ref: "Event.tags", many: true })
-  }
+    events: (0, import_fields3.relationship)({ ref: "Event.tags", many: true }),
+  },
 });

 // schema/projects.ts
@ -194,11 +196,10 @@ var Project = (0, import_core4.list)({
    ...allowAdmin,
    filter: {
      query: ({ session: session2 }) => {
-        if (session2?.data.isEditor || session2?.data.isAdmin)
-          return true;
+        if (session2?.data.isEditor || session2?.data.isAdmin) return true;
        return { isPublished: { equals: true } };
-      }
-    }
+      },
+    },
  },
  fields: {
    icon: (0, import_fields4.relationship)({ ref: "Image" }),
@ -212,18 +213,18 @@ var Project = (0, import_core4.list)({
        { label: "Pending", value: "pending" },
        { label: "Constructing", value: "constructing" },
        { label: "Published", value: "published" },
-        { label: "Abandoned", value: "abandoned" }
+        { label: "Abandoned", value: "abandoned" },
      ],
      defaultValue: "pending",
      db: { map: "project_status" },
      validation: { isRequired: true },
-      ui: { displayMode: "select" }
+      ui: { displayMode: "select" },
    }),
    post: (0, import_fields4.relationship)({ ref: "Post" }),
    createdAt: (0, import_fields4.timestamp)({
-      defaultValue: { kind: "now" }
-    })
-  }
+      defaultValue: { kind: "now" },
+    }),
+  },
 });

 // schema/posts.ts
@ -235,18 +236,17 @@ var Post = (0, import_core5.list)({
    ...allowEditor,
    filter: {
      query: ({ session: session2 }) => {
-        if (session2?.data.isEditor || session2?.data.isAdmin)
-          return true;
+        if (session2?.data.isEditor || session2?.data.isAdmin) return true;
        return { isPublished: { equals: true } };
-      }
-    }
+      },
+    },
  },
  fields: {
    slug: (0, import_fields5.text)({
      validation: {
-        isRequired: true
+        isRequired: true,
      },
-      isIndexed: "unique"
+      isIndexed: "unique",
    }),
    title: (0, import_fields5.text)({ validation: { isRequired: true } }),
    cover: (0, import_fields5.relationship)({ ref: "Image" }),
@ -260,21 +260,21 @@ var Post = (0, import_core5.list)({
        [1, 1, 1],
        [2, 1],
        [1, 2],
-        [1, 2, 1]
+        [1, 2, 1],
      ],
      links: true,
-      dividers: true
+      dividers: true,
    }),
    type: (0, import_fields5.select)({
      type: "enum",
      options: [
        { label: "Article", value: "article" },
-        { label: "Podcast", value: "podcast" }
+        { label: "Podcast", value: "podcast" },
      ],
      defaultValue: "article",
      db: { map: "post_type" },
      validation: { isRequired: true },
-      ui: { displayMode: "select" }
+      ui: { displayMode: "select" },
    }),
    isPublished: (0, import_fields5.checkbox)(),
    author: (0, import_fields5.relationship)({
@ -284,9 +284,9 @@ var Post = (0, import_core5.list)({
        cardFields: ["name", "email"],
        inlineEdit: { fields: ["name", "email"] },
        linkToItem: true,
-        inlineConnect: true
+        inlineConnect: true,
      },
-      many: false
+      many: false,
    }),
    categories: (0, import_fields5.relationship)({
      ref: "Category.posts",
@ -297,8 +297,8 @@ var Post = (0, import_core5.list)({
        inlineEdit: { fields: ["name"] },
        linkToItem: true,
        inlineConnect: true,
-        inlineCreate: { fields: ["name"] }
-      }
+        inlineCreate: { fields: ["name"] },
+      },
    }),
    tags: (0, import_fields5.relationship)({
      ref: "Tag.posts",
@ -309,13 +309,13 @@ var Post = (0, import_core5.list)({
        inlineEdit: { fields: ["name"] },
        linkToItem: true,
        inlineConnect: true,
-        inlineCreate: { fields: ["name"] }
-      }
+        inlineCreate: { fields: ["name"] },
+      },
    }),
    createdAt: (0, import_fields5.timestamp)({
-      defaultValue: { kind: "now" }
-    })
-  }
+      defaultValue: { kind: "now" },
+    }),
+  },
 });

 // schema/events.ts
@ -327,18 +327,17 @@ var Event = (0, import_core6.list)({
    ...allowEditor,
    filter: {
      query: ({ session: session2 }) => {
-        if (session2?.data.isEditor || session2?.data.isAdmin)
-          return true;
+        if (session2?.data.isEditor || session2?.data.isAdmin) return true;
        return { isPublished: { equals: true } };
-      }
-    }
+      },
+    },
  },
  fields: {
    slug: (0, import_fields6.text)({
      validation: {
-        isRequired: true
+        isRequired: true,
      },
-      isIndexed: "unique"
+      isIndexed: "unique",
    }),
    title: (0, import_fields6.text)({ validation: { isRequired: true } }),
    description: (0, import_fields6.text)(),
@ -349,10 +348,10 @@ var Event = (0, import_core6.list)({
        [1, 1, 1],
        [2, 1],
        [1, 2],
-        [1, 2, 1]
+        [1, 2, 1],
      ],
      links: true,
-      dividers: true
+      dividers: true,
    }),
    isPublished: (0, import_fields6.checkbox)(),
    isHistory: (0, import_fields6.checkbox)(),
@ -363,9 +362,9 @@ var Event = (0, import_core6.list)({
        cardFields: ["name", "email"],
        inlineEdit: { fields: ["name", "email"] },
        linkToItem: true,
-        inlineConnect: true
+        inlineConnect: true,
      },
-      many: false
+      many: false,
    }),
    categories: (0, import_fields6.relationship)({
      ref: "Category.events",
@ -376,8 +375,8 @@ var Event = (0, import_core6.list)({
        inlineEdit: { fields: ["name"] },
        linkToItem: true,
        inlineConnect: true,
-        inlineCreate: { fields: ["name"] }
-      }
+        inlineCreate: { fields: ["name"] },
+      },
    }),
    tags: (0, import_fields6.relationship)({
      ref: "Tag.events",
@ -388,13 +387,13 @@ var Event = (0, import_core6.list)({
        inlineEdit: { fields: ["name"] },
        linkToItem: true,
        inlineConnect: true,
-        inlineCreate: { fields: ["name"] }
-      }
+        inlineCreate: { fields: ["name"] },
+      },
    }),
    createdAt: (0, import_fields6.timestamp)({
-      defaultValue: { kind: "now" }
-    })
-  }
+      defaultValue: { kind: "now" },
+    }),
+  },
 });

 // schema/index.ts
@ -405,7 +404,7 @@ var lists = {
      name: (0, import_fields7.text)({ validation: { isRequired: true } }),
      email: (0, import_fields7.text)({
        validation: { isRequired: true },
-        isIndexed: "unique"
+        isIndexed: "unique",
      }),
      password: (0, import_fields7.password)({ validation: { isRequired: true } }),
      posts: (0, import_fields7.relationship)({ ref: "Post.author", many: true }),
@ -414,9 +413,9 @@ var lists = {
      isAdmin: (0, import_fields7.checkbox)(),
      isEditor: (0, import_fields7.checkbox)(),
      createdAt: (0, import_fields7.timestamp)({
-        defaultValue: { kind: "now" }
-      })
-    }
+        defaultValue: { kind: "now" },
+      }),
+    },
  }),
  Image,
  Asset,
@ -425,7 +424,7 @@ var lists = {
  Project,
  Event,
  Category,
-  Tag
+  Tag,
 };

 // auth.ts
@ -442,13 +441,13 @@ var { withAuth } = (0, import_auth.createAuth)({
  sessionData: "id name createdAt isAdmin isEditor",
  secretField: "password",
  initFirstItem: {
-    fields: ["name", "email", "password", "isAdmin"]
-  }
+    fields: ["name", "email", "password", "isAdmin"],
+  },
 });
 var sessionMaxAge = 60 * 60 * 24 * 30;
 var session = (0, import_session.statelessSessions)({
  maxAge: sessionMaxAge,
-  secret: sessionSecret
+  secret: sessionSecret,
 });

 // keystone.ts
@ -458,17 +457,17 @@ var databaseProvider = process.env.DATABASE_PROVIDER ?? "postgresql";
 var keystone_default = withAuth(
  (0, import_core8.config)({
    ui: {
-      basePath: "/cms"
+      basePath: "/cms",
    },
    db: {
      provider: databaseProvider,
-      url: databaseUrl
+      url: databaseUrl,
    },
    server: {
      cors: {
        origin: "*",
-        methods: "GET,HEAD,PUT,PATCH,POST,DELETE"
-      }
+        methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
+      },
    },
    storage: {
      localImages: {
@ -476,13 +475,13 @@ var keystone_default = withAuth(
        type: "image",
        generateUrl: (path) => `${baseUrl}/images${path}`,
        serverRoute: {
-          path: "/images"
+          path: "/images",
+        },
+        storagePath: "public/images",
      },
-        storagePath: "public/images"
-      }
    },
    lists,
-    session
-  })
+    session,
+  }),
 );
 //# sourceMappingURL=config.js.map
--- a/content/keystone.ts
+++ b/content/keystone.ts
@ -6,15 +6,13 @@ import { withAuth, session } from "./auth";
 import { DatabaseProvider } from "@keystone-6/core/types";

 const baseUrl = process.env.BASE_URL ?? "http://localhost:3000";
-const databaseUrl =
-  process.env.DATABASE_URL ??
-  "postgresql://postgres:password@127.0.0.1:5432/capital";
+const databaseUrl = process.env.DATABASE_URL ?? "postgresql://postgres:password@127.0.0.1:5432/capital";
 const databaseProvider = process.env.DATABASE_PROVIDER ?? "postgresql";

 export default withAuth(
  config({
    ui: {
-      basePath: "/cms"
+      basePath: "/cms",
    },
    db: {
      provider: databaseProvider as DatabaseProvider,
@ -39,5 +37,5 @@ export default withAuth(
    },
    lists,
    session,
-  })
+  }),
 );
--- a/content/limit.ts
+++ b/content/limit.ts
@ -7,8 +7,7 @@ const allowUser: any = {
  },
 };

-const isEditor = ({ session }: { session: any }) =>
-  session?.data.isEditor || session?.data.isAdmin;
+const isEditor = ({ session }: { session: any }) => session?.data.isEditor || session?.data.isAdmin;
 const allowEditor: any = {
  operation: {
    create: isEditor,
--- a/content/schema.graphql
+++ b/content/schema.graphql
@ -6,11 +6,29 @@ type User {
  name: String
  email: String
  password: PasswordState
-  posts(where: PostWhereInput! = {}, orderBy: [PostOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: PostWhereUniqueInput): [Post!]
+  posts(
+    where: PostWhereInput! = {}
+    orderBy: [PostOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: PostWhereUniqueInput
+  ): [Post!]
  postsCount(where: PostWhereInput! = {}): Int
-  moments(where: MomentWhereInput! = {}, orderBy: [MomentOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: MomentWhereUniqueInput): [Moment!]
+  moments(
+    where: MomentWhereInput! = {}
+    orderBy: [MomentOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: MomentWhereUniqueInput
+  ): [Moment!]
  momentsCount(where: MomentWhereInput! = {}): Int
-  events(where: EventWhereInput! = {}, orderBy: [EventOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: EventWhereUniqueInput): [Event!]
+  events(
+    where: EventWhereInput! = {}
+    orderBy: [EventOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: EventWhereUniqueInput
+  ): [Event!]
  eventsCount(where: EventWhereInput! = {}): Int
  isAdmin: Boolean
  isEditor: Boolean
@ -253,7 +271,9 @@ input ImageFieldInput {
  upload: Upload!
 }

-"""The `Upload` scalar type represents a file upload."""
+"""
+The `Upload` scalar type represents a file upload.
+"""
 scalar Upload

 input ImageUpdateArgs {
@ -335,17 +355,41 @@ type Post {
  title: String
  cover: Image
  description: String
-  assets(where: AssetWhereInput! = {}, orderBy: [AssetOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: AssetWhereUniqueInput): [Asset!]
+  assets(
+    where: AssetWhereInput! = {}
+    orderBy: [AssetOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: AssetWhereUniqueInput
+  ): [Asset!]
  assetsCount(where: AssetWhereInput! = {}): Int
-  images(where: ImageWhereInput! = {}, orderBy: [ImageOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: ImageWhereUniqueInput): [Image!]
+  images(
+    where: ImageWhereInput! = {}
+    orderBy: [ImageOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: ImageWhereUniqueInput
+  ): [Image!]
  imagesCount(where: ImageWhereInput! = {}): Int
  content: Post_content_Document
  type: PostTypeType
  isPublished: Boolean
  author: User
-  categories(where: CategoryWhereInput! = {}, orderBy: [CategoryOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: CategoryWhereUniqueInput): [Category!]
+  categories(
+    where: CategoryWhereInput! = {}
+    orderBy: [CategoryOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: CategoryWhereUniqueInput
+  ): [Category!]
  categoriesCount(where: CategoryWhereInput! = {}): Int
-  tags(where: TagWhereInput! = {}, orderBy: [TagOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: TagWhereUniqueInput): [Tag!]
+  tags(
+    where: TagWhereInput! = {}
+    orderBy: [TagOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: TagWhereUniqueInput
+  ): [Tag!]
  tagsCount(where: TagWhereInput! = {}): Int
  createdAt: DateTime
 }
@ -534,13 +578,31 @@ input TagRelateToManyForCreateInput {
 type Moment {
  id: ID!
  title: String
-  images(where: ImageWhereInput! = {}, orderBy: [ImageOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: ImageWhereUniqueInput): [Image!]
+  images(
+    where: ImageWhereInput! = {}
+    orderBy: [ImageOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: ImageWhereUniqueInput
+  ): [Image!]
  imagesCount(where: ImageWhereInput! = {}): Int
  content: Moment_content_Document
  author: User
-  categories(where: CategoryWhereInput! = {}, orderBy: [CategoryOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: CategoryWhereUniqueInput): [Category!]
+  categories(
+    where: CategoryWhereInput! = {}
+    orderBy: [CategoryOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: CategoryWhereUniqueInput
+  ): [Category!]
  categoriesCount(where: CategoryWhereInput! = {}): Int
-  tags(where: TagWhereInput! = {}, orderBy: [TagOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: TagWhereUniqueInput): [Tag!]
+  tags(
+    where: TagWhereInput! = {}
+    orderBy: [TagOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: TagWhereUniqueInput
+  ): [Tag!]
  tagsCount(where: TagWhereInput! = {}): Int
  createdAt: DateTime
 }
@ -699,9 +761,21 @@ type Event {
  isPublished: Boolean
  isHistory: Boolean
  author: User
-  categories(where: CategoryWhereInput! = {}, orderBy: [CategoryOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: CategoryWhereUniqueInput): [Category!]
+  categories(
+    where: CategoryWhereInput! = {}
+    orderBy: [CategoryOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: CategoryWhereUniqueInput
+  ): [Category!]
  categoriesCount(where: CategoryWhereInput! = {}): Int
-  tags(where: TagWhereInput! = {}, orderBy: [TagOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: TagWhereUniqueInput): [Tag!]
+  tags(
+    where: TagWhereInput! = {}
+    orderBy: [TagOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: TagWhereUniqueInput
+  ): [Tag!]
  tagsCount(where: TagWhereInput! = {}): Int
  createdAt: DateTime
 }
@ -776,11 +850,29 @@ type Category {
  id: ID!
  slug: String
  name: String
-  posts(where: PostWhereInput! = {}, orderBy: [PostOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: PostWhereUniqueInput): [Post!]
+  posts(
+    where: PostWhereInput! = {}
+    orderBy: [PostOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: PostWhereUniqueInput
+  ): [Post!]
  postsCount(where: PostWhereInput! = {}): Int
-  moments(where: MomentWhereInput! = {}, orderBy: [MomentOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: MomentWhereUniqueInput): [Moment!]
+  moments(
+    where: MomentWhereInput! = {}
+    orderBy: [MomentOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: MomentWhereUniqueInput
+  ): [Moment!]
  momentsCount(where: MomentWhereInput! = {}): Int
-  events(where: EventWhereInput! = {}, orderBy: [EventOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: EventWhereUniqueInput): [Event!]
+  events(
+    where: EventWhereInput! = {}
+    orderBy: [EventOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: EventWhereUniqueInput
+  ): [Event!]
  eventsCount(where: EventWhereInput! = {}): Int
 }

@ -832,11 +924,29 @@ type Tag {
  id: ID!
  slug: String
  name: String
-  posts(where: PostWhereInput! = {}, orderBy: [PostOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: PostWhereUniqueInput): [Post!]
+  posts(
+    where: PostWhereInput! = {}
+    orderBy: [PostOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: PostWhereUniqueInput
+  ): [Post!]
  postsCount(where: PostWhereInput! = {}): Int
-  moments(where: MomentWhereInput! = {}, orderBy: [MomentOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: MomentWhereUniqueInput): [Moment!]
+  moments(
+    where: MomentWhereInput! = {}
+    orderBy: [MomentOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: MomentWhereUniqueInput
+  ): [Moment!]
  momentsCount(where: MomentWhereInput! = {}): Int
-  events(where: EventWhereInput! = {}, orderBy: [EventOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: EventWhereUniqueInput): [Event!]
+  events(
+    where: EventWhereInput! = {}
+    orderBy: [EventOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: EventWhereUniqueInput
+  ): [Event!]
  eventsCount(where: EventWhereInput! = {}): Int
 }

@ -949,7 +1059,9 @@ type Mutation {
  createInitialUser(data: CreateInitialUserInput!): UserAuthenticationWithPasswordSuccess!
 }

-union UserAuthenticationWithPasswordResult = UserAuthenticationWithPasswordSuccess | UserAuthenticationWithPasswordFailure
+union UserAuthenticationWithPasswordResult =
+  | UserAuthenticationWithPasswordSuccess
+  | UserAuthenticationWithPasswordFailure

 type UserAuthenticationWithPasswordSuccess {
  sessionToken: String!
@ -968,31 +1080,85 @@ input CreateInitialUserInput {
 }

 type Query {
-  users(where: UserWhereInput! = {}, orderBy: [UserOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: UserWhereUniqueInput): [User!]
+  users(
+    where: UserWhereInput! = {}
+    orderBy: [UserOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: UserWhereUniqueInput
+  ): [User!]
  user(where: UserWhereUniqueInput!): User
  usersCount(where: UserWhereInput! = {}): Int
-  images(where: ImageWhereInput! = {}, orderBy: [ImageOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: ImageWhereUniqueInput): [Image!]
+  images(
+    where: ImageWhereInput! = {}
+    orderBy: [ImageOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: ImageWhereUniqueInput
+  ): [Image!]
  image(where: ImageWhereUniqueInput!): Image
  imagesCount(where: ImageWhereInput! = {}): Int
-  assets(where: AssetWhereInput! = {}, orderBy: [AssetOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: AssetWhereUniqueInput): [Asset!]
+  assets(
+    where: AssetWhereInput! = {}
+    orderBy: [AssetOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: AssetWhereUniqueInput
+  ): [Asset!]
  asset(where: AssetWhereUniqueInput!): Asset
  assetsCount(where: AssetWhereInput! = {}): Int
-  posts(where: PostWhereInput! = {}, orderBy: [PostOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: PostWhereUniqueInput): [Post!]
+  posts(
+    where: PostWhereInput! = {}
+    orderBy: [PostOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: PostWhereUniqueInput
+  ): [Post!]
  post(where: PostWhereUniqueInput!): Post
  postsCount(where: PostWhereInput! = {}): Int
-  moments(where: MomentWhereInput! = {}, orderBy: [MomentOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: MomentWhereUniqueInput): [Moment!]
+  moments(
+    where: MomentWhereInput! = {}
+    orderBy: [MomentOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: MomentWhereUniqueInput
+  ): [Moment!]
  moment(where: MomentWhereUniqueInput!): Moment
  momentsCount(where: MomentWhereInput! = {}): Int
-  projects(where: ProjectWhereInput! = {}, orderBy: [ProjectOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: ProjectWhereUniqueInput): [Project!]
+  projects(
+    where: ProjectWhereInput! = {}
+    orderBy: [ProjectOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: ProjectWhereUniqueInput
+  ): [Project!]
  project(where: ProjectWhereUniqueInput!): Project
  projectsCount(where: ProjectWhereInput! = {}): Int
-  events(where: EventWhereInput! = {}, orderBy: [EventOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: EventWhereUniqueInput): [Event!]
+  events(
+    where: EventWhereInput! = {}
+    orderBy: [EventOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: EventWhereUniqueInput
+  ): [Event!]
  event(where: EventWhereUniqueInput!): Event
  eventsCount(where: EventWhereInput! = {}): Int
-  categories(where: CategoryWhereInput! = {}, orderBy: [CategoryOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: CategoryWhereUniqueInput): [Category!]
+  categories(
+    where: CategoryWhereInput! = {}
+    orderBy: [CategoryOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: CategoryWhereUniqueInput
+  ): [Category!]
  category(where: CategoryWhereUniqueInput!): Category
  categoriesCount(where: CategoryWhereInput! = {}): Int
-  tags(where: TagWhereInput! = {}, orderBy: [TagOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: TagWhereUniqueInput): [Tag!]
+  tags(
+    where: TagWhereInput! = {}
+    orderBy: [TagOrderByInput!]! = []
+    take: Int
+    skip: Int! = 0
+    cursor: TagWhereUniqueInput
+  ): [Tag!]
  tag(where: TagWhereUniqueInput!): Tag
  tagsCount(where: TagWhereInput! = {}): Int
  keystone: KeystoneMeta!
--- a/content/schema/events.ts
+++ b/content/schema/events.ts
@ -1,9 +1,4 @@
-import {
-  checkbox,
-  relationship,
-  text,
-  timestamp,
-} from "@keystone-6/core/fields";
+import { checkbox, relationship, text, timestamp } from "@keystone-6/core/fields";
 import { document } from "@keystone-6/fields-document";
 import { list } from "@keystone-6/core";
 import { allowEditor } from "../limit";
--- a/content/schema/index.ts
+++ b/content/schema/index.ts
@ -1,12 +1,6 @@
 import { list } from "@keystone-6/core";

-import {
-  text,
-  relationship,
-  password,
-  timestamp,
-  checkbox,
-} from "@keystone-6/core/fields";
+import { text, relationship, password, timestamp, checkbox } from "@keystone-6/core/fields";

 import { allowAdmin } from "../limit";

--- a/content/schema/moments.ts
+++ b/content/schema/moments.ts
@ -67,4 +67,4 @@ export const Moment = list({
      defaultValue: { kind: "now" },
    }),
  },
-  })
+});
--- a/content/schema/posts.ts
+++ b/content/schema/posts.ts
@ -1,10 +1,4 @@
-import {
-  checkbox,
-  relationship,
-  select,
-  text,
-  timestamp,
-} from "@keystone-6/core/fields";
+import { checkbox, relationship, select, text, timestamp } from "@keystone-6/core/fields";
 import { document } from "@keystone-6/fields-document";
 import { list } from "@keystone-6/core";
 import { allowEditor } from "../limit";
--- a/content/tsconfig.json
+++ b/content/tsconfig.json
@ -6,5 +6,5 @@
    "noEmit": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
-  }
+  },
 }
--- a/package.json
+++ b/package.json
@ -19,6 +19,8 @@
    "@popperjs/core": "^2.11.8",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
+    "aplayer": "^1.10.1",
+    "artplayer": "^5.1.1",
    "astro": "^4.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
--- a/src/assets/fonts/fonts.css
+++ b/src/assets/fonts/fonts.css
@ -139,8 +139,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 200;
-  src: url("./noto-serif-sc-v22-chinese-simplified-200.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-300 - chinese-simplified */
@ -149,8 +148,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 300;
-  src: url("./noto-serif-sc-v22-chinese-simplified-300.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-regular - chinese-simplified */
@ -159,8 +157,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 400;
-  src: url("./noto-serif-sc-v22-chinese-simplified-regular.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-500 - chinese-simplified */
@ -169,8 +166,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 500;
-  src: url("./noto-serif-sc-v22-chinese-simplified-500.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-600 - chinese-simplified */
@ -179,8 +175,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 600;
-  src: url("./noto-serif-sc-v22-chinese-simplified-600.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-700 - chinese-simplified */
@ -189,8 +184,7 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 700;
-  src: url("./noto-serif-sc-v22-chinese-simplified-700.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* noto-serif-sc-900 - chinese-simplified */
@ -199,6 +193,5 @@ body {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 900;
-  src: url("./noto-serif-sc-v22-chinese-simplified-900.woff2")
-    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("./noto-serif-sc-v22-chinese-simplified-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@ -1,14 +1,17 @@
 ---
 interface MenuItem {
-  href: string;
+  href?: string;
  label: string;
  children?: MenuItem[];
 }

 const items: MenuItem[] = [
+  {
+    label: "情报", children: [
      { href: "/posts", label: "记录" },
-  { href: "/events", label: "活动" },
-  { href: "/projects", label: "企划" },
+      { href: "/events", label: "活动" }
+    ]
+  }
 ];
 ---

@ -22,11 +25,13 @@ const items: MenuItem[] = [
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
-          ><path
+        >
+          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
-            d="M4 6h16M4 12h8m-8 6h16"></path></svg
+            d="M4 6h16M4 12h8m-8 6h16"></path>
+        </svg
        >
      </div>
      <ul
@ -41,7 +46,7 @@ const items: MenuItem[] = [
                <ul class="p-2">
                  {item.children?.map((child) => (
                    <li>
-                      <a href={item.href}>{item.label}</a>
+                      <a href={child.href}>{child.label}</a>
                    </li>
                  ))}
                </ul>
@ -61,15 +66,13 @@ const items: MenuItem[] = [
            {item.children ? (
              <details>
                <summary>{item.label}</summary>
-                <ul class="p-2">
                <ul class="p-2">
                  {item.children?.map((child) => (
                    <li>
-                        <a href={item.href}>{item.label}</a>
+                      <a href={child.href}>{child.label}</a>
                    </li>
                  ))}
                </ul>
-                </ul>
              </details>
            ) : (
              <a href={item.href}>{item.label}</a>
@ -87,18 +90,22 @@ const items: MenuItem[] = [
        class="swap-on fill-current w-8 h-8"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
-        ><path
+      >
+        <path
          d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-        ></path></svg
+        ></path>
+      </svg
      >

      <svg
        class="swap-off fill-current w-8 h-8"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
-        ><path
+      >
+        <path
          d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-        ></path></svg
+        ></path>
+      </svg
      >
    </label>
  </div>
--- a/src/components/PostList.astro
+++ b/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
--- a/src/components/posts/Media.tsx
+++ b/src/components/posts/Media.tsx
@ -1,16 +1,63 @@
-import { useState, Fragment } from "react";
+// @ts-ignore
+import APlayer from "aplayer";
+import Artplayer from "artplayer";
+import { useState, Fragment, useRef, useEffect } from "react";

-export default function Media({
-  sources,
-}: {
-  sources: { caption: string; url: string; type: string }[];
-}) {
-  const [focus, setFocus] = useState<boolean[]>(
-    sources.map((_, idx) => idx === 0)
+import "aplayer/dist/APlayer.min.css";
+
+function Video({ url, ...rest }: { url: string, className?: string }) {
+  const container = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    new Artplayer({
+      container: container.current as HTMLDivElement,
+      url: url,
+      setting: true,
+      flip: true,
+      playbackRate: true,
+      aspectRatio: true,
+      subtitleOffset: true
+    });
+  });
+
+  return (
+    <div ref={container} {...rest}></div>
  );
+}
+
+function Audio({ url, artist, caption, ...rest }: {
+  url: string,
+  artist: string,
+  caption: string,
+  className?: string
+}) {
+  const container = useRef(null);
+
+  useEffect(() => {
+    new APlayer({
+      container: container.current,
+      audio: [{
+        name: caption,
+        artist: artist,
+        url: url,
+        theme: "#49509e"
+      }]
+    });
+  });
+
+  return (
+    <div ref={container} {...rest}></div>
+  );
+}
+
+export default function Media({ sources, author }: {
+  sources: { caption: string; url: string; type: string }[],
+  author?: { name: string }
+}) {
+  const [focus, setFocus] = useState<boolean[]>(sources.map((_, idx) => idx === 0));

  function changeFocus(idx: number) {
-    setFocus(focus.map((_, idx) => idx === idx));
+    setFocus(focus.map((_, i) => i === idx));
  }

  return (
@ -26,19 +73,16 @@ export default function Media({
            checked={focus[idx]}
            onChange={() => changeFocus(idx)}
          />
-          <div
-            role="tabpanel"
-            className="tab-content bg-base-100 border-base-300 rounded-box"
-          >
+          <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box w-full">
            {item.type === "video" && (
-              <video className="mb-0 block w-full h-[360px]" controls>
-                <source src={item.url} />
-              </video>
+              <div className="w-full h-[460px]">
+                <Video className="w-full h-full" url={item.url} />
+              </div>
            )}
            {item.type === "audio" && (
-              <audio className="mb-0 block w-full h-[20px]" controls>
-                <source src={item.url} />
-              </audio>
+              <div className="w-full">
+                <Audio url={item.url} artist={author?.name ?? "佚名"} caption={item.caption} />
+              </div>
            )}
          </div>
        </Fragment>
--- a/src/pages/index.astro
+++ b/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;
--- a/src/pages/posts/[slug].astro
+++ b/src/pages/posts/[slug].astro
@ -19,6 +19,9 @@ const { post } = (
    type
    title
    description
+    author {
+      name
+    }
    assets {
      caption
      url
@ -67,8 +70,8 @@ const { post } = (

        {
          post.assets?.length > 0 && (
-            <div class="mb-5">
-              <Media sources={post.assets} />
+            <div class="mb-5 w-full">
+              <Media client:only sources={post.assets} author={post.author} />
            </div>
          )
        }
--- a/src/pages/posts/index.astro
+++ b/src/pages/posts/index.astro
@ -8,8 +8,8 @@ export const prerender = false;

 const {posts} = (
    await graphQuery(
-    `query Query($where: PostWhereInput!) {
-  posts(where: $where) {
+        `query Query($where: PostWhereInput!, $orderBy: [PostOrderByInput!]!) {
+  posts(where: $where, orderBy: $orderBy) {
    slug
    type
    title
@ -31,7 +31,14 @@ const { posts } = (
    createdAt
  }
 }`,
-    { where: {} }
+        {
+            orderBy: [
+                {
+                    createdAt: "desc",
+                },
+            ],
+            where: {}
+        }
    )
 ).data;
 ---
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@ -1,24 +0,0 @@
---
-import PageLayout from "../../layouts/PageLayout.astro";
---
-
-<PageLayout title="企划">
-  <div role="alert" class="alert alert-info">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      class="stroke-current shrink-0 w-6 h-6"
-      ><path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-      ></path></svg
-    >
-    <div>
-        <p>暂无可公开企划，若想进一步探索，可以加入我们的 GoatChat！</p>
-        <a class="link" href="https://matrix.to/#/#plaza:matrix.smartsheep.studio">邀请链接 👈</a>
-    </div>
-  </div>
-</PageLayout>
--- a/src/scripts/requests.ts
+++ b/src/scripts/requests.ts
@ -1,5 +1,7 @@
+const defaultCms = "https://smartsheep.studio";
+
 export async function graphQuery(query: string, variables: any) {
-  const response = await fetch(`${process.env.PUBLIC_CMS}/api/graphql`, {
+  const response = await fetch(`${process.env.PUBLIC_CMS ?? defaultCms}/api/graphql`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
--- a/tsconfig.json
+++ b/tsconfig.json
@ -2,7 +2,9 @@
  "extends": "astro/tsconfigs/strict",
  "exclude": ["./content", "./dist"],
  "compilerOptions": {
+    "target": "es5",
+    "lib": ["esnext", "es2021"],
    "jsx": "react-jsx",
-    "jsxImportSource": "react",
+    "jsxImportSource": "react"
  },
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -916,6 +916,15 @@ anymatch@~3.1.2:
    normalize-path "^3.0.0"
    picomatch "^2.0.4"

+aplayer@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/aplayer/-/aplayer-1.10.1.tgz#318289206107452cc39e8f552fa6cc6cb459a90c"
+  integrity sha512-HAfyxgCUTLAqtYlxzzK9Fyqg6y+kZ9CqT1WfeWE8FSzwspT6oBqWOZHANPHF3RGTtC33IsyEgrfthPDzU5r9kQ==
+  dependencies:
+    balloon-css "^0.5.0"
+    promise-polyfill "7.1.0"
+    smoothscroll "0.4.0"
+
 arg@^5.0.0, arg@^5.0.2:
  version "5.0.2"
  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@ -945,6 +954,13 @@ array-iterate@^2.0.0:
  resolved "https://registry.yarnpkg.com/array-iterate/-/array-iterate-2.0.1.tgz#6efd43f8295b3fee06251d3d62ead4bd9805dd24"
  integrity sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==

+artplayer@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/artplayer/-/artplayer-5.1.1.tgz#a35071036f899aafb3a8f1fa3a9e0755dc6d5b66"
+  integrity sha512-pZ2/lB+Oo3g0CVLqkFuB86bMBPMtZaABaq5e1LPKubYDBW46+mzin2wzdVmk3tvFyfQoVnb+MBFU7nJYvI3qNg==
+  dependencies:
+    option-validator "^2.0.6"
+
 astro@^4.2.1:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/astro/-/astro-4.2.1.tgz#c0676bdd63cdd8ac2e46f53b7a72229ad302b24b"
@ -1050,6 +1066,11 @@ balanced-match@^1.0.0:
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==

+balloon-css@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/balloon-css/-/balloon-css-0.5.2.tgz#9e2163565a136c9d4aa20e8400772ce3b738d3ff"
+  integrity sha512-zheJpzwyNrG4t39vusA67v3BYg1HTVXOF8cErPEHzWK88PEOFwgo6Ea9VHOgOWNMgeuOtFVtB73NE2NWl9uDyQ==
+
 base-64@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/base-64/-/base-64-1.0.0.tgz#09d0f2084e32a3fd08c2475b973788eee6ae8f4a"
@ -2108,7 +2129,7 @@ jsonc-parser@^2.3.0:
  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.3.1.tgz#59549150b133f2efacca48fe9ce1ec0659af2342"
  integrity sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==

-kind-of@^6.0.0, kind-of@^6.0.2:
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
  version "6.0.3"
  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@ -2853,6 +2874,13 @@ onetime@^6.0.0:
  dependencies:
    mimic-fn "^4.0.0"

+option-validator@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/option-validator/-/option-validator-2.0.6.tgz#a314dae65e26db5f948ef0ff96fc88f18bb76ed6"
+  integrity sha512-tmZDan2LRIRQyhUGvkff68/O0R8UmF+Btmiiz0SmSw2ng3CfPZB9wJlIjHpe/MKUZqyIZkVIXCrwr1tIN+0Dzg==
+  dependencies:
+    kind-of "^6.0.3"
+
 ora@^7.0.1:
  version "7.0.1"
  resolved "https://registry.yarnpkg.com/ora/-/ora-7.0.1.tgz#cdd530ecd865fe39e451a0e7697865669cb11930"
@ -3115,6 +3143,11 @@ probe-image-size@^7.2.3:
    needle "^2.5.2"
    stream-parser "~0.3.1"

+promise-polyfill@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-7.1.0.tgz#4d749485b44577c14137591c6f36e5d7e2dd3378"
+  integrity sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg==
+
 prompts@^2.4.2:
  version "2.4.2"
  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
@ -3556,6 +3589,11 @@ sitemap@^7.1.1:
    arg "^5.0.0"
    sax "^1.2.4"

+smoothscroll@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/smoothscroll/-/smoothscroll-0.4.0.tgz#40e507b46461408ba1b787d0081e1e883c4124a5"
+  integrity sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
Author	SHA1	Message	Date
LittleSheep	6897bfe018	✨ Better player	2024-01-23 00:46:18 +08:00
LittleSheep	bb10ff9cac	💄 Optimized navbar	2024-01-23 00:16:04 +08:00
LittleSheep	bc2de51987	💄 Optimized UX	2024-01-23 00:07:36 +08:00