feat(docs): migrate bs docs

2026-07-29 08:09:52 +08:00 · 2026-04-29 17:23:23 +08:00
parent bf6fc66943
commit 0ccfacbc29
105 changed files with 5537 additions and 243 deletions
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps<{
+  name: string;
+  icon?: string;
+}>();
+
+const src = computed(() => {
+  if (props.icon) return props.icon;
+  return `https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/icons/${props.name.toLowerCase()}.svg`;
+});
+</script>
+
+<template>
+  <img :src="src" :alt="`${name} Logo`" />
+</template>
+
+<style scoped>
+img {
+  display: inline;
+  transform: translateY(5px);
+  margin-right: 8px;
+  width: 20px;
+}
+</style>
@@ -0,0 +1,79 @@
+<template>
+  <h1>BlockSuite Blog</h1>
+  <div class="blog-posts-container">
+    <div class="blog-post" v-for="post in posts">
+      <a :href="post.url">
+        <h2 class="blog-post-title">{{ post.title }}</h2>
+      </a>
+      <div class="blog-post-excerpt">
+        {{ post.excerpt }}
+        <a class="blog-post-read-more" :href="post.url">Read more →</a>
+      </div>
+      <div class="blog-post-date">{{ post.date.formatted }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { usePosts } from '../composables/use-posts';
+
+const { posts } = usePosts();
+</script>
+
+<style scoped>
+h1 {
+  margin: auto;
+  margin-top: 30px;
+  margin-bottom: 50px;
+  font-size: 50px;
+  font-weight: bolder;
+  line-height: 50px;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  h1 {
+    font-size: 40px;
+    line-height: 40px;
+  }
+}
+
+.blog-posts-container {
+  max-width: 800px;
+  margin: auto;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.blog-post {
+  margin-bottom: 40px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eaecef;
+}
+
+.blog-post-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: bold;
+  color: var(--vp-c-text-1);
+}
+
+.blog-post-date {
+  font-size: 14px;
+  color: var(--vp-c-text-3);
+}
+
+.blog-post-excerpt {
+  margin-top: 10px;
+  margin-bottom: 5px;
+  line-height: 1.6;
+}
+
+.dark .blog-post {
+  border-bottom: 1px solid #343a40;
+}
+
+.blog-post-read-more:hover {
+  text-decoration: underline;
+}
+</style>
@@ -0,0 +1,36 @@
+<template>
+  <div class="blog-post-meta">
+    <span class="post-date">{{ post.date.formatted }}</span> by
+    <span v-html="formattedAuthors"></span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+import { usePosts } from '../composables/use-posts';
+
+const { post } = usePosts();
+
+const formattedAuthors = computed(() => {
+  return post.value.authors
+    .map(
+      author =>
+        `<a class="author" href="${author.link}" target="_blank">${author.name}</a>`
+    )
+    .join(', ');
+});
+</script>
+
+<style>
+.blog-post-meta {
+  margin-top: 8px;
+  font-size: 14px;
+}
+.author {
+  color: var(--vp-c-text-1) !important;
+}
+.post-date {
+  color: var(--vp-c-text-2);
+}
+</style>
@@ -0,0 +1,36 @@
+<template>
+  <!-- 'code-options' is a build-in prop, do not edit it -->
+  <Sandbox
+    :rtl="rtl"
+    :template="'vanilla-ts'"
+    :light-theme="lightTheme"
+    :dark-theme="darkTheme"
+    :options="{
+      ...props, // do not forget it
+      coderHeight: Number(props.coderHeight),
+      previewHeight: Number(props.previewHeight),
+      showLineNumbers: true,
+    }"
+    :custom-setup="{
+      ...props, // do not forget it
+      deps: {
+        yjs: 'latest',
+        '@toeverything/theme': 'latest',
+        '@blocksuite/presets': 'canary',
+      },
+    }"
+    :code-options="codeOptions"
+  >
+    <slot />
+  </Sandbox>
+</template>
+
+<script setup lang="ts">
+import { Sandbox, sandboxProps } from 'vitepress-plugin-sandpack';
+
+const props = defineProps({
+  ...sandboxProps,
+  coderHeight: String,
+  previewHeight: String,
+});
+</script>
@@ -0,0 +1,6 @@
+<template>
+  <img
+    style="width: 70%; height: 100%; margin: auto; opacity: 0.8"
+    src="https://raw.githubusercontent.com/toeverything/blocksuite/master/assets/logo.svg"
+  />
+</template>