🎉 Start development

src/assets/fonts/fonts.css

@@ -0,0 +1,204 @@
+:root {
+  --bs-body-font-family: "IBM Plex Serif", "Noto Serif SC", sans-serif !important;
+}
+
+html,
+body {
+  font-family: var(--bs-body-font-family);
+}
+
+/* ibm-plex-serif-100 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: normal;
+  font-weight: 100;
+  src: url("./ibm-plex-serif-v19-latin-100.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-100italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: italic;
+  font-weight: 100;
+  src: url("./ibm-plex-serif-v19-latin-100italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-200 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: normal;
+  font-weight: 200;
+  src: url("./ibm-plex-serif-v19-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-200italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: italic;
+  font-weight: 200;
+  src: url("./ibm-plex-serif-v19-latin-200italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: normal;
+  font-weight: 300;
+  src: url("./ibm-plex-serif-v19-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-300italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: italic;
+  font-weight: 300;
+  src: url("./ibm-plex-serif-v19-latin-300italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: normal;
+  font-weight: 400;
+  src: url("./ibm-plex-serif-v19-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: italic;
+  font-weight: 400;
+  src: url("./ibm-plex-serif-v19-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: normal;
+  font-weight: 500;
+  src: url("./ibm-plex-serif-v19-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-500italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: italic;
+  font-weight: 500;
+  src: url("./ibm-plex-serif-v19-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: normal;
+  font-weight: 600;
+  src: url("./ibm-plex-serif-v19-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-600italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: italic;
+  font-weight: 600;
+  src: url("./ibm-plex-serif-v19-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: normal;
+  font-weight: 700;
+  src: url("./ibm-plex-serif-v19-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* ibm-plex-serif-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Serif";
+  font-style: italic;
+  font-weight: 700;
+  src: url("./ibm-plex-serif-v19-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* noto-serif-sc-200 - chinese-simplified */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  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+ */
+}
+
+/* noto-serif-sc-300 - chinese-simplified */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  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+ */
+}
+
+/* noto-serif-sc-regular - chinese-simplified */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  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+ */
+}
+
+/* noto-serif-sc-500 - chinese-simplified */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  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+ */
+}
+
+/* noto-serif-sc-600 - chinese-simplified */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  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+ */
+}
+
+/* noto-serif-sc-700 - chinese-simplified */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  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+ */
+}
+
+/* noto-serif-sc-900 - chinese-simplified */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  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/components/Navbar.astro

@@ -0,0 +1,117 @@
+---
+interface MenuItem {
+  href: string;
+  label: string;
+  children?: MenuItem[];
+}
+
+const items: MenuItem[] = [
+  { href: "/posts", label: "记录" },
+  { href: "/annoucements", label: "情报" },
+  { href: "/projects", label: "企划" },
+];
+---
+
+<div class="fixed top-0 navbar shadow-md bg-base-100 lg:px-5">
+  <div class="navbar-start">
+    <div class="dropdown">
+      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          ><path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h8m-8 6h16"></path></svg
+        >
+      </div>
+      <ul
+        tabindex="0"
+        class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+      >
+        {
+          items.map((item) => (
+            <li>
+              <a href={item.href}>{item.label}</a>
+              {item.children && (
+                <ul class="p-2">
+                  {item.children?.map((child) => (
+                    <li>
+                      <a href={item.href}>{item.label}</a>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+    <a class="btn btn-ghost text-xl">山羊寒舍</a>
+  </div>
+  <div class="navbar-center hidden lg:flex">
+    <ul class="menu menu-horizontal px-1">
+      {
+        items.map((item) => (
+          <li>
+            {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>
+                      </li>
+                    ))}
+                  </ul>
+                </ul>
+              </details>
+            ) : (
+              <a href={item.href}>{item.label}</a>
+            )}
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+  <div class="navbar-end">
+    <label class="swap swap-rotate px-[16px]">
+      <input
+        type="checkbox"
+        class="theme-controller"
+        value="light"
+        data-toggle-theme="dark,light"
+        data-act-class="active"
+      />
+
+      <svg
+        class="swap-on fill-current w-8 h-8"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        ><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
+      >
+
+      <svg
+        class="swap-off fill-current w-8 h-8"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        ><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
+      >
+    </label>
+  </div>
+</div>
+
+<script>
+  import { themeChange } from "theme-change";
+
+  themeChange();
+</script>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/PageLayout.astro

@@ -0,0 +1,9 @@
+---
+import RootLayout from "./RootLayout.astro";
+---
+
+<RootLayout>
+  <main class="container h-fullpage mt-[81px]">
+    <slot />
+  </main>
+</RootLayout>

src/layouts/RootLayout.astro

@@ -0,0 +1,58 @@
+---
+import "../assets/fonts/fonts.css";
+
+import Navbar from "../components/Navbar.astro";
+import { ViewTransitions } from "astro:transitions";
+
+const { title } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+
+    <script is:inline>
+      if (localStorage.getItem("theme") === null) {
+        document.documentElement.setAttribute("data-theme", "light");
+      } else {
+        document.documentElement.setAttribute(
+          "data-theme",
+          localStorage.getItem("theme")
+        );
+      }
+    </script>
+
+    <ViewTransitions />
+  </head>
+  <body>
+    <!-- Header -->
+    <Navbar />
+
+    <!-- Content -->
+    <slot />
+    <style>
+      html {
+        overflow-x: hidden !important;
+        overflow-y: auto !important;
+      }
+    </style>
+
+    <style is:global>
+      .h-fullpage {
+        height: calc(100vh - 64px);
+      }
+
+      .max-h-fullpage {
+        max-height: calc(100vh - 64px);
+      }
+
+      .mt-header {
+        margin-top: 64px;
+      }
+    </style>
+  </body>
+</html>

src/pages/index.astro

@@ -0,0 +1,241 @@
+---
+import RootLayout from "../layouts/RootLayout.astro";
+
+import { client } from "../..//tina/__generated__/client";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+
+const eventsResponse = await client.queries.eventConnection();
+const events = eventsResponse.data.eventConnection.edges
+  ?.reverse()
+  .map((event) => {
+    return { ...event?.node, slug: event?.node?._sys.filename };
+  });
+---
+
+<RootLayout>
+  <div class="max-h-fullpage mt-header wrapper px-5 snap-y snap-mandatory">
+    <div id="hello" class="hero h-fullpage snap-start">
+      <div
+        class="hero-content w-full grid grid-cols-1 md:grid-cols-2 max-md:gap-[60px]"
+      >
+        <div class="max-md:text-center">
+          <h1 class="text-5xl font-bold">你好呀 👋</h1>
+          <p class="py-6">
+            欢迎来到 SmartSheep Studio
+            的官方网站！在这里了解，订阅，跟踪我们的最新消息。
+            接触我们最大的官方社区，并且尝试最新产品，参与各种活动，提供反馈，让我们更好的服务您。
+          </p>
+          <a href="#about" class="btn btn-primary btn-md">了解更多</a>
+        </div>
+
+        <div class="flex justify-center md:justify-end max-md:order-first">
+          <div
+            class="spinning p-3 md:p-5 shadow-2xl aspect-square rounded-[30%] w-[192px] md:w-[256px] lg:w-[384px]"
+          >
+            <img src="/favicon.svg" alt="logo" loading="lazy" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="about" class="hero h-fullpage snap-start">
+      <div
+        class="hero-content w-full grid grid-cols-1 md:grid-cols-2 max-md:gap-[60px]"
+      >
+        <div class="flex justify-center md:justify-start">
+          <div class="stats shadow">
+            <div class="stat">
+              <div class="stat-figure text-secondary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  class="inline-block w-8 h-8 stroke-current"
+                  ><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>
+              <div class="stat-title">People</div>
+              <div class="stat-value">1</div>
+              <div class="stat-desc">2019 - {new Date().getFullYear()}</div>
+            </div>
+
+            <div class="stat">
+              <div class="stat-figure text-secondary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  class="inline-block w-8 h-8 stroke-current"
+                  ><path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+                  ></path></svg
+                >
+              </div>
+              <div class="stat-title">Clients</div>
+              <div class="stat-value">180</div>
+              <div class="stat-desc">↗︎ 80 (44%)</div>
+            </div>
+
+            <div class="stat">
+              <div class="stat-figure text-secondary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  class="inline-block w-8 h-8 stroke-current"
+                  ><path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+                  ></path></svg
+                >
+              </div>
+              <div class="stat-title">Products</div>
+              <div class="stat-value">4</div>
+              <div class="stat-desc">↘︎ 8 (67%)</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="max-md:text-center">
+          <h1 class="text-5xl font-bold">关于我们 🔖</h1>
+          <p class="py-6">
+            我们是一群充满活力、对开源充满热情的开发者。成立于 2019
+            年。自那年起我们一直在开发让人喜欢的开源软件。在我们这里，“取之于开源，用之于开源”
+            不仅是原则，更是我们信仰的座右铭。
+          </p>
+          <a href="#history" class="btn btn-primary btn-md pl-[24px]">查看「岁月史书」</a>
+        </div>
+      </div>
+    </div>
+
+    <div
+      id="history"
+      class="flex flex-col justify-center items-center h-fullpage snap-start"
+    >
+      <div class="text-center">
+        <div>
+          <h1 class="text-4xl font-bold">岁月史书</h1>
+          <p class="pt-2 pb-4 tracking-[8px]">但当涉猎，见往事耳</p>
+          <ul
+            class="pb-6 mx-[-20px] max-w-[100vw] px-5 flex justify-center history timeline timeline-horizontal"
+          >
+            {
+              events?.map((item: any, idx: number) => (
+                <li>
+                  {idx > 0 && <hr />}
+                  <div class="timeline-start">
+                    {new Date(item.date).toLocaleDateString()}
+                  </div>
+                  <div class="timeline-middle">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      class="w-5 h-5"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                  <div class="timeline-end timeline-box">
+                    <h2 class="font-bold">{item.title}</h2>
+                    <div class="line-clamp-2">
+                      <TinaMarkdown content={item._body} />
+                    </div>
+                  </div>
+                  {idx < events?.length - 1 && <hr />}
+                </li>
+              ))
+            }
+          </ul>
+          <a class="btn btn-primary" href="/events">查看更多</a>
+        </div>
+      </div>
+    </div>
+  </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;
+  }
+
+  @keyframes spinning {
+    0% {
+      rotate: 0deg;
+    }
+    60% {
+      rotate: 360deg;
+    }
+    100% {
+      rotate: 360deg;
+    }
+  }
+</style>
+
+<style scoped>
+  .wrapper {
+    overflow-y: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+  }
+
+  .wrapper::-webkit-scrollbar {
+    width: 0;
+  }
+
+  .history {
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+  }
+
+  .history::-webkit-scrollbar {
+    width: 0;
+  }
+</style>