留言页搞定

src/components/MainpageComments.astro

@@ -0,0 +1,174 @@
+---
+// 不想写得屎长屎长，所以就用单独的文件写了
+
+import { Image } from 'astro:assets'
+---
+
+<div class="comments">
+  {
+    [
+      [
+        'https://legacy.passthem.top/assets/ice-BN4Z25mt.jpg',
+        '超几何冰精',
+        '⑨',
+        <>
+          <p>
+            <s>@☀️ 可以当靶场玩吗</s>
+          </p>
+          <p>我喜欢passthem</p>
+        </>,
+      ],
+      [
+        'https://legacy.passthem.top/assets/pigeon-16qh82EW.jpg',
+        'pigeon某人',
+        '可爱的鸽子，Bilibili 著名 YTPMVer',
+        <>
+          <Image
+            src="https://legacy.passthem.top/assets/idk-DjwAIbw0.jpg"
+            width={100}
+            height={95}
+            alt="用户「pigeon某人」的个人形象的表情包"
+          />
+          <p>这个可以贴吗</p>
+        </>,
+      ],
+      [
+        'https://legacy.passthem.top/assets/kio-DikBD7t4.jpg',
+        'asynkio',
+        '西多kitaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+        <p>asynkio 祝 jazzwhom.top 開張大吉！</p>,
+      ],
+      [
+        'https://legacy.passthem.top/assets/leukos-Ci6_szKv.jpg',
+        'leukos',
+        '冰镇西米露，在幻想乡被称作露米娅',
+        <p>帕，移动</p>,
+      ],
+      [
+        'https://legacy.passthem.top/assets/mono-BkJO6fUP.webp',
+        'モノクロ子',
+        '全て変えるのなら黒にする。',
+        <>
+          <>
+            <p>pt的音mad做的特别厉害！当时给我看哭了……</p>
+            <p>谢谢你，pt。我希望有一天我也能做出那样的音mad。</p>
+          </>
+        </>,
+      ],
+      [
+        'https://legacy.passthem.top/assets/graffiti-DHeEktlb.webp',
+        'Graffiti_',
+        '泡壳老师，虽然是僵尸，却比人类都要暖',
+        <p>人与人之间是情感连接着的</p>,
+      ],
+      [
+        'https://legacy.passthem.top/assets/miskplar-CJpcFQZ_.webp',
+        'miskplar',
+        '校友',
+        <p>后悔的时候，不要后悔</p>,
+      ],
+      [
+        'https://legacy.passthem.top/assets/sge-Da3d1ENG.webp',
+        '一根烤肠肠',
+        '小孩小孩你别馋，过了腊八就是年',
+        <p>产出作品是你持续站在舞台上的唯一方式</p>,
+      ],
+      [
+        'https://legacy.passthem.top/assets/aishi-OOmvQDjV.jpg',
+        '蔼石',
+        '校友，东方社团「有顶天变电站」运营中',
+        <Image
+          src="https://legacy.passthem.top/assets/mgmg-qXzHVGjP.jpg"
+          width={140}
+          height={140}
+          alt="表情包，东方project角色露娜萨·普莉兹姆利巴吃年糕"
+        />,
+      ],
+    ].map((elements) => (
+      <div class="comment">
+        <div class="comment-head">
+          <Image
+            class="avatar"
+            src={elements[0] as string}
+            width={48}
+            height={48}
+            alt={`${elements[1]} 的头像`}
+          />
+          <div class="userinfo">
+            <div class="username">{elements[1]}</div>
+            <div class="comment">{elements[2]}</div>
+          </div>
+        </div>
+        <div class="comment-content">{elements[3]}</div>
+      </div>
+    ))
+  }
+</div>
+
+<style>
+  .comments {
+    overflow-y: scroll;
+    padding-inline: 3rem;
+    margin-inline: 1rem;
+    height: 100%;
+    padding-block: 2rem;
+
+    @media (max-width: 767px) {
+      padding-inline: 1rem;
+    }
+
+    & > .comment {
+      padding-block-start: 1.5rem;
+      padding-block-end: 1.5rem;
+
+      &:not(:last-child) {
+        border-bottom: solid 2px rgb(from var(--color-fg-0) r g b / 0.05);
+      }
+
+      & > .comment-head {
+        display: flex;
+        align-items: center;
+        padding-inline: 1.25rem;
+        padding-block-end: 1.5rem;
+        gap: 1rem;
+
+        & > .avatar {
+          flex: none;
+          width: 3rem;
+          height: 3rem;
+          border-radius: 9999px;
+          object-fit: cover;
+        }
+
+        & > .userinfo {
+          min-width: 0;
+          flex-shrink: 1;
+
+          & > .username {
+            overflow-x: hidden;
+            font-weight: 700;
+          }
+
+          & > .comment {
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            opacity: 0.5;
+          }
+        }
+      }
+
+      & > .comment-content {
+        padding-inline: 1.5rem;
+
+        p {
+          margin: 0.5rem 0;
+        }
+
+        s {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+</style>

src/layout/BaseLayout.astro

@@ -3,6 +3,7 @@ import '../assets/style.css'
 import '../assets/fonts.css'
 import 'katex/dist/katex.min.css'
 import '@unocss/reset/tailwind-v4.css'
+import { ClientRouter } from 'astro:transitions'
 
 interface Props {
   title?: string
@@ -19,6 +20,7 @@ const { title = '小帕的小窝' } = Astro.props
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
+    <ClientRouter />
   </head>
   <body>
     <slot />

src/layout/FullLayoutV1.astro

@@ -10,7 +10,7 @@ const { title = '小帕的小窝' } = Astro.props
 ---
 
 <BaseLayout title={title}>
-  <div class="nav-container">
+  <div class="nav-container" transition:persist>
     <nav>
       <ul class="left">
         <li class="website-logo">
@@ -33,7 +33,7 @@ const { title = '小帕的小窝' } = Astro.props
       <ul class="right">Hello!</ul>
     </nav>
   </div>
-  <main>
+  <main transition:animate="slide">
     <slot />
   </main>
 </BaseLayout>

src/pages/index.astro

@@ -4,8 +4,10 @@ export const prerender = false
 // import BoringLayout from '../layout/BoringLayout.astro'
 import FullLayoutV1 from '../layout/FullLayoutV1.astro'
 import MainpageButton from '../components/MainpageButton.svelte'
+import MainpageComments from '../components/MainpageComments.astro'
 import MainpageTypewriter from '../components/MainpageTypewriter.svelte'
 import { Image } from 'astro:assets'
+import { Icon } from 'astro-icon/components'
 
 import { mainpageGetClick } from '../lib/apis/legacy/mainpage'
 
@@ -24,13 +26,6 @@ try {
 }
 ---
 
-<!--<BoringLayout>
-  <h1>博客系统翻新中...</h1>
-  <p>点击 <a href="https://legacy.passthem.top">这里</a> 查看旧版博客</p>
-  <p>或者了解更多 <a href="/about">关于这里</a></p>
-  <p>也欢迎你来 <a href="/contact">联络我</a></p>
-  <p><MainpageButton initialClicks={initialClicks} client:load /></p>
-</BoringLayout>-->
 <FullLayoutV1 title="首页 - 小帕的小窝">
   <!-- 就像写幻灯片一样的逻辑写它吧！ -->
   <section class="slide">
@@ -67,43 +62,74 @@ try {
           class="thsx">涂黑书信</a
         >
       </p>
+      <p class="animation-error-warning">
+        ⁴你的系统设置中似乎禁用了动画效果，而 Firefox
+        在禁用动画效果时，网页的表现会很奇怪
+      </p>
     </div>
   </section>
 
   <section class="slide" style="background-color: var(--color-bg-1);">
-    <div class="slide-title-design1">
+    <div class="slide-title-design1" aria-hidden="true">
-      <svg aria-hidden="true" width="800" height="240" viewBox="0 0 800 240">
+      <svg width="800" height="240" viewBox="0 0 800 240">
         <text x="10" y="220" class="stroke-layer">留言</text>
         <text x="0" y="210" class="main-layer">留言</text>
       </svg>
     </div>
-    <h1>当前页面还在开发中......</h1>
+    <div class="slide-title-design2" aria-hidden="true">
+      <Icon name="mdi:comment-quote" />
+    </div>
+    <div class="comment-page-container">
+      <h1>来自大家的留言</h1>
+      <div class="comment-container">
+        <MainpageComments />
+      </div>
+    </div>
   </section>
 
   <section class="slide">
-    <div class="slide-title-design1">
+    <div class="slide-title-design1" aria-hidden="true">
-      <svg aria-hidden="true" width="800" height="240" viewBox="0 0 800 240">
+      <svg width="800" height="240" viewBox="0 0 800 240">
         <text x="10" y="220" class="stroke-layer">友链</text>
         <text x="0" y="210" class="main-layer">友链</text>
       </svg>
     </div>
+    <div class="slide-title-design2" aria-hidden="true">
+      <Icon name="mdi:link-variant" />
+    </div>
     <h1>当前页面还在开发中......</h1>
   </section>
 </FullLayoutV1>
 
+<script>
+  const setupObserver = () => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.intersectionRatio > 0.5) {
+            entry.target.classList.add('slide-visible')
+          } else {
+            entry.target.classList.remove('slide-visible')
+          }
+        })
+      },
+      { threshold: 0.5 },
+    )
+
+    document.querySelectorAll('section.slide').forEach((ele) => {
+      observer.observe(ele)
+    })
+  }
+
+  document.addEventListener('astro:page-load', setupObserver)
+</script>
+
 <style>
   :global(html) {
     scroll-snap-type: y proximity;
     scroll-behavior: smooth;
   }
 
-  @-moz-document url-prefix() {
-    :global(html) {
-      scroll-snap-type: none;
-      scroll-behavior: auto;
-    }
-  }
-
   .slide {
     scroll-snap-align: start;
     height: 100dvh;
@@ -112,6 +138,7 @@ try {
     justify-content: center;
     position: relative;
     overflow: hidden;
+    isolation: isolate;
 
     & > .notation {
       position: absolute;
@@ -133,6 +160,28 @@ try {
         }
       }
     }
+
+    & h1 {
+      font-size: clamp(2.5rem, 6vw, 3rem);
+      font-weight: 800;
+    }
+  }
+
+  .animation-error-warning {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    @-moz-document url-prefix() {
+      .animation-error-warning {
+        display: block;
+      }
+
+      :global(html) {
+        scroll-snap-type: none;
+        scroll-behavior: auto;
+      }
+    }
   }
 
   /* 自我介绍部分 */
@@ -151,9 +200,17 @@ try {
     & > .avatar {
       margin: 0;
       border-radius: 50%;
-      width: clamp(160px, 30vw, 240px);
+      --final-width: clamp(160px, 30vw, 240px);
+      transition: all cubic-bezier(0.4, 1, 0.4, 1) 1.2s;
+      transform: rotate(10deg);
       aspect-ratio: 1 / 1;
       overflow: hidden;
+      width: 0;
+
+      section.slide.slide-visible & {
+        width: var(--final-width);
+        transform: rotate(0);
+      }
     }
 
     & > .descriptions {
@@ -192,6 +249,7 @@ try {
     }
   }
 
+  /* 涂黑书信的特殊处理 */
   .thsx {
     cursor: pointer;
     text-decoration: underline;
@@ -235,11 +293,20 @@ try {
     filter: grayscale(100%);
   }
 
+  /* 一个特殊设计的标题元素，呼呼 */
   .slide-title-design1 {
     position: absolute;
-    inset-inline-start: -1rem;
+    inset-inline-start: -3rem;
-    inset-block-start: -5rem;
+    inset-block-end: -2rem;
-    opacity: 0.6;
+    opacity: 0;
+    user-select: none;
+    z-index: -1;
+    transition: all ease 1.5s;
+
+    section.slide.slide-visible & {
+      opacity: 0.2;
+      inset-inline-start: -1rem;
+    }
 
     & > svg {
       font-weight: 900;
@@ -250,11 +317,71 @@ try {
         stroke: var(--color-fg-0);
         stroke-width: 1px;
         stroke-linejoin: round;
-        user-select: none;
       }
       & > .main-layer {
         fill: var(--color-fg-0);
       }
     }
   }
+  .slide-title-design2 {
+    position: absolute;
+    inset-inline-end: -5rem;
+    inset-block-start: -2rem;
+    opacity: 0;
+    user-select: none;
+    z-index: -1;
+    transition: all ease 1.5s;
+
+    section.slide.slide-visible & {
+      opacity: 0.2;
+      inset-inline-end: -3rem;
+    }
+
+    & > svg {
+      font-size: 288px;
+      transform: rotate(-12deg);
+    }
+  }
+
+  /* 评论页 */
+  .comment-page-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    & > .comment-container {
+      height: 0;
+      padding: 0;
+      margin: 0;
+      transition: all cubic-bezier(0.4, 1, 0.4, 1) 1.2s;
+      border-radius: 1rem;
+      background-color: var(--color-bg-n);
+      width: calc(min(100dvw - 2rem, 40rem));
+      position: relative;
+
+      &::before {
+        content: '';
+        display: block;
+
+        width: 100%;
+        height: 100%;
+        border-radius: 1rem;
+        transition: all cubic-bezier(0.4, 1, 0.4, 1) 1.2s;
+        position: absolute;
+        transform: rotate(0deg);
+        z-index: -1;
+        background-color: rgb(from var(--color-fg-0) r g b / 0.05);
+      }
+
+      section.slide.slide-visible & {
+        margin-block-start: 2rem;
+        height: 60dvh;
+
+        &::before {
+          transform: rotate(-6deg);
+        }
+      }
+    }
+  }
 </style>