docs: 📝 update docs home page

docs/.vitepress/theme/components/CustomLayout.vue

@@ -53,6 +53,32 @@ provide("toggle-appearance", async ({ clientX: x, clientY: y }) => {
 </template>
 
 <style>
+.Layout::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  --tw-content: "";
+  content: var(--tw-content);
+  background-image: linear-gradient(
+      to bottom,
+      rgba(250, 250, 250, 0) 0%,
+      rgba(250, 250, 250, 1) 100%
+    ),
+    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(226 232 240 / 0.8)' stroke-dasharray='5 3' transform='scale(1%2c -1)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+}
+
+.dark .Layout::before {
+  background-image: linear-gradient(
+      to bottom,
+      rgba(10, 10, 10, 0) 0%,
+      rgba(10, 10, 10, 0.8) 100%
+    ),
+    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(248 250 252 / .025)' stroke-dasharray='5 3' transform='scale(1%2c -1)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+}
+
 .VPHome {
   padding-bottom: 0 !important;
 }

docs/.vitepress/theme/components/HomePage.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="w-full pt-30">
+    <section class="w-full">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+        <div>
+          <h1
+            v-motion
+            :initial="{ opacity: 0, y: 100 }"
+            :enter="{ opacity: 1, y: 0, scale: 1 }"
+            :delay="50"
+            :duration="400"
+            class="text-32px! font-bold text-primary"
+            uno-sm="text-38px! leading-10!"
+            uno-md="text-48px! leading-12!"
+            uno-xl="text-56px! leading-16!"
+          >
+            {{ t(lang, "title") }}
+          </h1>
+          <h1
+            v-motion
+            :initial="{ opacity: 0, y: 100 }"
+            :enter="{ opacity: 1, y: 0, scale: 1 }"
+            :delay="100"
+            :duration="400"
+            class="text-32px! font-bold mt-2"
+            uno-sm="text-38px! leading-10!"
+            uno-md="text-48px! leading-12!"
+            uno-xl="text-56px! leading-16!"
+          >
+            {{ t(lang, "desc") }}
+          </h1>
+          <div
+            v-motion
+            :initial="{ opacity: 0, y: 100 }"
+            :enter="{ opacity: 1, y: 0, scale: 1 }"
+            :delay="150"
+            :duration="400"
+            class="text-[var(--vp-c-text-2)] lg:text-xl max-w-2xl mt-4 mx-auto text-base"
+          >
+            {{ t(lang, "desc.secondary") }}
+          </div>
+          <div class="flex justify-start gap-3 mt-10 mb-5 flex-col sm:flex-row">
+            <a
+              v-motion
+              :initial="{ opacity: 0, y: 100 }"
+              :enter="{ opacity: 1, y: 0, scale: 1 }"
+              :delay="200"
+              :duration="400"
+              target="_blank"
+              class="items-center justify-center h-12 font-medium rounded-xl inline-flex duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-text-1)]! w-full border-2 border-solid border-[var(--vp-c-gray-soft)] no-underline!"
+              uno-hover="text-primary! border-primary"
+              href="https://playground.islenote.com/"
+            >
+              {{ t(lang, "playground") }}
+            </a>
+            <a
+              v-motion
+              :initial="{ opacity: 0, y: 100 }"
+              :enter="{ opacity: 1, y: 0, scale: 1 }"
+              :delay="300"
+              :duration="400"
+              class="items-center justify-center h-12 font-medium rounded-xl inline-flex bg-primary border-solid border-2 border-primary duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-neutral-inverse)]! w-full no-underline!"
+              uno-hover="bg-transparent border-primary text-primary!"
+              :href="routerPath(lang, '/guide/introduction')"
+            >
+              {{ t(lang, "guide") }} →
+            </a>
+          </div>
+          <a
+            v-motion
+            :initial="{ opacity: 0, y: 100 }"
+            :enter="{ opacity: 1, y: 0, scale: 1 }"
+            :delay="400"
+            :duration="400"
+            href="https://github.com/isboyjc/isle-editor"
+            target="_blank"
+            class="h-34px font-semibold text-primary rounded-full px-1 text-sm leading-6 flex-left duration-200 no-underline!"
+            uno-hover="underline!"
+          >
+            <span class="block lg:inline"
+              >{{ t(lang, "github", { star: stars }) }}
+              <span aria-hidden="true">→</span>
+            </span>
+          </a>
+        </div>
+        <div
+          class="flex items-center justify-center md:justify-end"
+          ref="target"
+        >
+          <div
+            class="relative w-350px h-350px"
+            uno-lg="w-450px h-450px"
+            v-motion
+            :initial="{ opacity: 0, scale: 0.8 }"
+            :enter="{ opacity: 1, scale: 1 }"
+          >
+            <div
+              class="absolute top-0 left-0 w-full h-full rounded-30% border-solid border-30 border-[var(--vp-c-brand-1)] opacity-10"
+              uno-lg="border-35"
+              :style="{
+                transform: `translateX(${parallax.tilt * -30}px) translateY(${parallax.roll * -30}px) scale(1)`,
+              }"
+            ></div>
+            <div
+              class="w-full h-full rounded-30% flex-center border-solid border-30 border-[var(--vp-c-brand-1)]"
+              uno-lg="border-35"
+              :style="{
+                transform: `translateX(${parallax.tilt * 20}px) translateY(${parallax.roll * 20}px) scale(1)`,
+              }"
+            >
+              <icon-custom-islenote
+                :style="{
+                  transform: `translateX(${parallax.tilt * 40}px) translateY(${parallax.roll * 40}px) scale(1)`,
+                }"
+                class="text-60 text-primary"
+                uno-lg="text-70"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="w-full h-100vh"></section>
+  </div>
+</template>
+
+<script setup>
+import { useData } from "vitepress";
+import { useParallax } from "@vueuse/core";
+import { ref, reactive, watch, onMounted } from "vue";
+import { t, routerPath } from "../locale";
+
+const { lang, isDark } = useData();
+
+const stars = ref(0);
+const getGithubStars = async () => {
+  try {
+    const response = await fetch(
+      "https://api.github.com/repos/isboyjc/isle-editor",
+    );
+    const data = await response.json();
+    stars.value = data.stargazers_count;
+  } catch (error) {
+    console.error("Failed to fetch GitHub stars:", error);
+  }
+};
+
+onMounted(() => {
+  getGithubStars();
+});
+
+const target = ref(null);
+const parallax = reactive(useParallax(target));
+</script>

docs/.vitepress/theme/locale/en.js

@@ -0,0 +1,9 @@
+export default {
+  title: "Isle Editor",
+  desc: "Modern Rich Text Editor",
+  "desc.secondary":
+    "Open source web editor that supports rich text, block, markdown editing , efficient and out-of-the-box , based on prosemirror and tiptap.",
+  guide: "Get Started",
+  github: "There are {star} stars, Go to github and give us a star ✨",
+  playground: "Playground",
+};

docs/.vitepress/theme/locale/index.js

@@ -0,0 +1,21 @@
+import en from "./en.js";
+import zh from "./zh.js";
+
+const hash = {
+  en,
+  zh,
+};
+
+export function t(locale, key, params = {}) {
+  if (!hash[locale.split("-")[0]]) return "";
+  let text = hash[locale.split("-")[0]][key];
+  Object.keys(params).forEach((k) => {
+    const regex = new RegExp(`{${k}}`, "g");
+    text = text.replace(regex, params[k]);
+  });
+  return text;
+}
+
+export function routerPath(locale, path) {
+  return (locale == "en" ? "/en" : "") + path;
+}

docs/.vitepress/theme/locale/zh.js

@@ -0,0 +1,9 @@
+export default {
+  title: "Isle Editor",
+  desc: "现代富文本编辑器",
+  "desc.secondary":
+    "开源 Web 编辑器，支持富文本、块、markdown 编辑，高效且开箱即用，基于 prosemirror 和 tiptap。",
+  guide: "快速了解",
+  github: "当前有 {star} 个 Star，去 GitHub 查看并为我们点 ✨",
+  playground: "在线演示",
+};

docs/index.md

@@ -1,29 +1,8 @@
 ---
 layout: home
-
-hero:
-  name: Isle Editor
-  text: A Modern Rich Text Editor
-  tagline: Simple, powerful, and performant. Meet the modern rich text editor for Vue.js
-  actions:
-    - theme: brand
-      text: Get Started
-      link: /guide/getting-started
-    - theme: alt
-      text: View on GitHub
-      link: https://github.com/isboyjc/isle-editor
-
-features:
-  - icon: 🎯
-    title: Vue 3 Based
-    details: Built with Vue 3 and TypeScript, providing excellent type support and modern development experience.
-  - icon: ⚡️
-    title: Lightweight & Fast
-    details: Optimized bundle size and performance, ensuring a smooth editing experience.
-  - icon: 🛠️
-    title: Extensible
-    details: Modular architecture allows easy extension and customization of editor features.
-  - icon: 📦
-    title: Rich Features
-    details: Comes with a comprehensive set of text editing features out of the box.
+sidebar: false
+title: Isle Editor
+titleTemplate: "Modern Rich Text Editor"
 ---
+
+<HomePage />

docs/package.json

@@ -39,10 +39,12 @@
     "@isle-editor/vue3": "workspace:*",
     "@vitepress-demo-preview/component": "^2.3.2",
     "@vitepress-demo-preview/plugin": "^1.2.3",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.11.1",
     "@vueuse/motion": "^2.2.6"
   },
   "devDependencies": {
+    "@iconify-json/lucide": "^1.2.14",
+    "@iconify-json/tabler": "^1.2.10",
     "@unocss/transformer-directives": "^0.63.6",
     "@unocss/transformer-variant-group": "^0.63.6",
     "unocss": "^0.63.6",

docs/zh/index.md

@@ -1,29 +1,7 @@
 ---
 layout: home
-
-hero:
-  name: "Isle Editor"
-  text: "现代富文本编辑器"
-  tagline: 基于 Vue 3 的强大富文本编辑器
-  actions:
-    - theme: brand
-      text: 快速开始
-      link: /zh/guide/getting-started
-    - theme: alt
-      text: 在 GitHub 上查看
-      link: https://github.com/isboyjc/isle-editor
-
-features:
-  - title: Vue 3 支持
-    details: 基于 Vue 3 构建，完全支持 Composition API 和 TypeScript
-  - title: 模块化设计
-    details: 采用模块化设计，易于扩展和定制
-  - title: 现代化 UI
-    details: 现代化的用户界面，支持主题切换和响应式设计
-  - title: 高性能
-    details: 优化的性能和渲染机制，提供流畅的编辑体验
-  - title: 丰富的功能
-    details: 支持多种编辑功能，包括富文本格式化、代码块、列表等
-  - title: 易于集成
-    details: 简单的 API 设计，易于集成到现有项目中
+title: Isle Editor
+titleTemplate: "现代富文本编辑器"
 ---
+
+<HomePage />

playground/src/views/rich-text-page/rich-text-page.vue

@@ -1,5 +1,20 @@
 <template>
-  <div>1</div>
+  <div class="w-full h-full">
+    <div class="w-screen-lg min-h-500px">
+      <IsleEditor
+        ref="editorEl"
+        v-model="content"
+        :extensions="extensions"
+        @update="editorUpdate"
+      ></IsleEditor>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { RichTextKit } from '@isle-editor/core'
+import { IsleEditor, IsleEditorToolbar } from '@isle-editor/vue3'
+
+const content = ref('')
+const extensions = [RichTextKit.configure({})]
+</script>