docs: home page refactor

docs/.vuepress/layouts/Layout.vue

@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 
-import HomePage from './Home.vue'
+import HomePage from './home/index.vue'
 import { usePageFrontmatter } from '@vuepress/client'
 import { useDarkMode } from '@vuepress/theme-default/lib/client/composables'
 import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'

docs/.vuepress/layouts/home/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="homepage" ref="root">
+    <component v-for="(screen, index) in screens" :key="index" :is="screen" @scroll-screen="scroll"></component>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import Screen1 from './screen-1.vue'
+import Screen2 from './screen-2.vue'
+import Screen3 from './screen-3.vue'
+import Screen4 from './screen-4.vue'
+import Screen5 from './screen-5.vue'
+import Screen6 from './screen-6.vue'
+
+const screens = [
+  Screen1,
+  Screen2,
+  Screen3,
+  Screen4,
+  Screen5,
+  Screen6,
+]
+
+const root = ref<HTMLElement>()
+
+useEventListener('wheel', (event) => {
+  if (Math.abs(event.deltaY) < 100 || event.ctrlKey || event.shiftKey) return
+  event.preventDefault()
+  scroll(Math.sign(event.deltaY))
+}, { passive: false })
+
+function scroll(scale = 1) {
+  root.value.scrollBy({
+    top: innerHeight * scale,
+    behavior: 'smooth',
+  })
+}
+
+</script>
+
+<style lang="scss">
+
+.homepage {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  overflow-y: auto;
+  display: grid;
+  grid-template-rows: repeat(5, 100vh);
+  scroll-snap-type: y mandatory;
+
+  .koi {
+    color: var(--c-love);
+  }
+
+  .screen.flex {
+    padding: 6rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 720px) {
+      padding: 4rem;
+    }
+
+    @media (max-width: 480px) {
+      padding: 4rem 2.4rem;
+    }
+  }
+
+  .introduction.center {
+    text-align: center;
+  }
+
+  h1 {
+    margin: 0;
+    font-size: 2.2rem;
+    font-weight: 400;
+
+    @media (max-width: 720px) {
+      font-size: 2rem;
+    }
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 400;
+
+    @media (max-width: 720px) {
+      font-size: 1.3rem;
+    }
+  }
+
+  > :nth-child(2n+1) {
+    border-bottom: 1px solid var(--c-border);
+    border-top: 1px solid var(--c-border);
+    background-color: var(--c-bg-home);
+    transition: var(--t-color);
+  }
+}
+
+.screen {
+  --c-text: var(--c-text-home);
+  color: var(--c-text);
+  transition: var(--t-color);
+  scroll-snap-align: start;
+}
+
+.feature-view {
+  max-width: 80rem;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: center;
+  justify-items: center;
+
+  @media (max-width: 720px) {
+    grid-template-columns: 1fr;
+    .image {
+      display: none;
+    }
+  }
+
+  img {
+    border: 1px solid var(--c-border);
+    max-height: 100%;
+    max-width: 640px;
+  }
+}
+
+</style>

docs/.vuepress/layouts/home/screen-1.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="screen flex screen-1">
+    <h1><span class="koi">Koi</span>shi.js</h1>
+    <p class="desc">
+      CROSS-PLATFORM CHATBOT FRAMEWORK
+      <br>
+      MADE WITH <span class="koi">LOVE</span>
+    </p>
+    <div class="actions">
+      <router-link class="action-button primary" to="/guide/introduction/template">Get Started</router-link>
+      <a class="action-button secondary" @click="$emit('scroll-screen', 1)">Learn More</a>
+    </div>
+    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="w-10 h-10">
+      <g>
+        <path fill="var(--c-love)" d="M160 256.14l-56.51 56.47-96.44-96.15a23.77 23.77.0 01-.18-33.61l.18-.18 22.59-22.51a23.94 23.94.0 0133.85.0z"></path>
+        <path fill="currentcolor" d="M313 182.57 290.21 160a23.94 23.94.0 00-33.85.0L103.47 312.61 143 352l.06.06a24 24 0 0033.93-.16L313 216.36l.18-.17a23.78 23.78.0 00-.18-33.62z"></path>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+defineEmits(['scroll-screen'])
+
+</script>
+
+<style lang="scss" scoped>
+
+.screen-1 {
+  h1 {
+    font-size: 3rem;
+  }
+
+  svg {
+    position: absolute;
+    opacity: 60%;
+    bottom: 1.5rem;
+    width: 1.5rem;
+    animation: bounce 1s infinite;
+  }
+
+  .desc {
+    color: var(--c-text-lightest);
+    text-transform: uppercase;
+    text-align: center;
+    line-height: 2;
+
+     br {
+      @media (min-width: 600px) {
+        display: none;
+      }
+    }
+  }
+
+  .actions {
+    margin: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2.2rem;
+    justify-content: center;
+
+    @media (max-width: 600px) {
+      margin: 4rem 0 0 0;
+      flex-direction: column;
+    }
+
+    .action-button {
+      display: inline-block;
+      font-size: 1.05rem;
+      line-height: 1.4;
+      padding: 0.5rem 2.2rem;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 2rem;
+      transition: background-color var(--t-color), border-color var(--t-color);
+      box-sizing: border-box;
+      cursor: pointer;
+
+      @media (max-width: 600px) {
+        padding: 0.5rem 4rem;
+      }
+
+      &.primary {
+        color: var(--c-bg);
+        background-color: var(--c-brand);
+        border-color: var(--c-brand);
+        &:hover {
+          background-color: var(--c-brand-light);
+          border-color: var(--c-brand-light);
+        }
+      }
+
+      &.secondary {
+        color: var(--c-brand);
+        border-color: var(--c-brand);
+        &:hover {
+          color: var(--c-bg);
+          background-color: var(--c-brand);
+        }
+      }
+    }
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-50%);
+    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, .2, 1);
+  }
+}
+
+</style>

docs/.vuepress/layouts/home/screen-2.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="screen flex screen-2">
+    <div class="feature-view">
+      <div class="introduction">
+        <h1>开箱即用</h1>
+        <p>高度便利的控制台让你无需基础让你在几分钟之内搭建自己的聊天机器人。</p>
+        <ul>
+          <li>提供在线插件市场，一键下载安装插件</li>
+          <li>支持 QQ，Telegram，Discord 等主流聊天平台</li>
+          <li>随时随机通过控制面板监控运行状态，甚至上号聊天</li>
+        </ul>
+        <p>查看指南：<router-link to="/guide/introduction/template">创建 Koishi 模板项目</router-link></p>
+      </div>
+      <div class="image">
+        <carousel></carousel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import Carousel from './Carousel.vue'
+
+</script>

docs/.vuepress/layouts/home/screen-3.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="screen flex screen-3">
+    <div class="feature-view">
+      <div class="introduction">
+        <h1>功能强大</h1>
+        <p>中间件，指令系统，插件系统，数据库，跨平台……它们可以让你顺利实现任何需求。</p>
+      </div>
+      <div class="image">此处应该有一张图</div>
+    </div>
+  </div>
+</template>

docs/.vuepress/layouts/home/screen-4.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="screen flex screen-4">
+    <div class="introduction center">
+      <h1>生态丰富</h1>
+      <p>官方提供了大量插件和解决方案，覆盖了绝大多数常见需求的同时，也为开发提供了绝佳的范例。</p>
+    </div>
+  </div>
+</template>