Turn homepage plugin list into horizontal banner

Author: 54895y

src/pages/index.module.css

@@ -179,6 +179,39 @@
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
+.bannerNote {
+  max-width: 1200px;
+  margin: 0 auto 0.75rem;
+  color: var(--site-text-muted);
+  font-size: 0.92rem;
+}
+
+.pluginBanner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0.2rem 0 0.85rem;
+  overflow-x: auto;
+  overflow-y: visible;
+  scroll-snap-type: x proximity;
+  scrollbar-width: thin;
+}
+
+.pluginBanner::-webkit-scrollbar {
+  height: 10px;
+}
+
+.pluginBanner::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(33, 121, 255, 0.22);
+}
+
+.pluginStrip {
+  display: flex;
+  gap: 1rem;
+  min-width: max-content;
+  padding-right: 1rem;
+}
+
 .quickCard,
 .pluginCard,
 .flowCard,
@@ -189,6 +222,11 @@
   border-radius: 24px;
 }
 
+.pluginCardBanner {
+  width: min(320px, 82vw);
+  scroll-snap-align: start;
+}
+
 .quickTitle,
 .pluginHeader h3,
 .flowCard h3 {

src/pages/index.tsx

@@ -247,9 +247,11 @@ export default function Home(): ReactNode {
             <h2>插件列表</h2>
             <p className={styles.sectionLead}>首页现已补全 Matrix 系列全部插件入口，并覆盖文档、发布与开发者 API。</p>
           </div>
-          <div className={styles.pluginGrid}>
-            {pluginDocs.map((plugin) => (
-              <article key={plugin.title} className={styles.pluginCard}>
+          <p className={styles.bannerNote}>左右滑动可浏览全部插件入口。</p>
+          <div className={styles.pluginBanner}>
+            <div className={styles.pluginStrip}>
+              {pluginDocs.map((plugin) => (
+              <article key={plugin.title} className={`${styles.pluginCard} ${styles.pluginCardBanner}`}>
                 <div className={styles.pluginHeader}>
                   <div>
                     <h3>{plugin.title}</h3>
@@ -267,7 +269,8 @@ export default function Home(): ReactNode {
                   进入文档
                 </Link>
               </article>
-            ))}
+              ))}
+            </div>
           </div>
         </section>