docs: move docs

.github/workflows/vercel-deploy.yml

@@ -0,0 +1,31 @@
+name: Vercel Deploy
+
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+  push:
+    branches:
+      - main
+
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: corepack enable
+      - name: Install Vercel CLI
+        if: env.VERCEL_ORG_ID != ''
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        if: env.VERCEL_ORG_ID != ''
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        if: env.VERCEL_ORG_ID != ''
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        if: env.VERCEL_ORG_ID != ''
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.gitignore

@@ -7,3 +7,12 @@ dist
 node_modules
 temp
 .eslintcache
+
+# docs
+docs/showcase/*.md
+!docs/showcase/index.md
+docs/.vitepress/cache
+docs/.vitepress/components.d.ts
+docs/.env
+docs/.vitepress/data/repository.json
+.vercel

.npmrc

@@ -0,0 +1,3 @@
+ignore-workspace-root-check=true
+shamefully-hoist=true
+shell-emulator=true

docs/.env.example

@@ -0,0 +1 @@
+GITHUB_TOKEN=

docs/.vitepress/components/RepoInfo.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineProps<{
+  owner: string
+  name: string
+  stars: number
+  forks: number
+}>()
+</script>
+
+<template>
+  <div flex gap-3 items-center justify-end>
+    <div class="flex items-center text-gray-500 dark:text-gray-300 cursor-default">
+      <i class="i-heroicons-star-solid" />
+      <span ml-1>
+        {{ stars.toLocaleString() }}
+      </span>
+    </div>
+
+    <div class="flex items-center text-gray-500 dark:text-gray-300 cursor-default">
+      <i class="i-lucide-git-fork" />
+      <span ml-1>
+        {{ forks.toLocaleString() }}
+      </span>
+    </div>
+
+    <a target="_blank" :href="`https://github.com/${owner}/${name}`">
+      <div class="flex text-gray-400" hover="text-gray-900" dark:hover="text-gray-200">
+        <i class="i-radix-icons-github-logo" />
+        <i class="i-heroicons-arrow-up-right-20-solid h-3 w-3" />
+      </div>
+    </a>
+
+    <a target="_blank" :href="`https://www.npmjs.com/package/${name}`">
+      <div class="flex text-gray-400" hover="text-#C12127">
+        <i class="i-simple-icons-npm " />
+        <i class="i-heroicons-arrow-up-right-20-solid h-3 w-3" />
+      </div>
+    </a>
+  </div>
+</template>

docs/.vitepress/components/Repositories.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { data as repositoryData } from '../data/repository.data'
+</script>
+
+<template>
+  <div flex="~ wrap" gap-3 items-center>
+    <a
+      v-for="(item, index) in repositoryData" :key="index"
+      w-20rem h-42 px-4 py-3 cursor-pointer
+      border="1 solid $vp-c-divider" rounded-md
+      important-transition-all duration-400
+      hover="shadow-md bg-$vp-c-bg-soft"
+      :href="`/showcase/${item.name}`"
+      flex="~ col"
+      justify-between
+    >
+      <div flex items-center gap-2>
+        <img :src="item.owner?.avatarUrl" rounded-full w-4 h-4 alt="">
+        <span dark="text-gray-400" text-gray-500 text-16px>{{ item.owner.login }}/</span>
+      </div>
+      <div font-semibold dark="text-gray-200" text-gray-900 text-16px>
+        {{ item.name }}
+      </div>
+      <div text-gray-500 dark="text-gray-400" flex-auto mt-2 text-14px>
+        <span line-clamp-2>
+          {{ item.description }}
+        </span>
+      </div>
+      <div flex gap-5>
+        <div flex items-center gap-1>
+          <div
+            w-3 h-3 rounded-full :style="{
+              'background-color': item.primaryLanguage.color,
+            }"
+          />
+          <div text="14px gray-500" dark="text-gray-400">{{ item.primaryLanguage.name }}</div>
+        </div>
+        <div flex items-center gap-1 text="14px gray-500" dark="text-gray-400">
+          <i class="i-radix-icons-star" />
+          <div>{{ (item.stargazers.totalCount).toLocaleString() }}</div>
+        </div>
+        <div flex items-center gap-1 text="14px gray-500" dark="text-gray-400">
+          <i class="i-lucide-git-fork" />
+          <div>{{ (item.forkCount).toLocaleString() }}</div>
+        </div>
+      </div>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+a {
+  cursor: pointer;
+  text-decoration: none!important;
+}
+</style>

docs/.vitepress/config.ts

@@ -0,0 +1,88 @@
+import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'
+import { defineConfig } from 'vitepress'
+
+import { transformerTwoslash } from 'vitepress-plugin-twoslash'
+import { repositoryMeta } from './data/meta'
+import { description, ogImage, title } from './constance'
+
+import vite from './vite.config'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title,
+  description,
+  lastUpdated: true,
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Guide', link: '/guide/', activeMatch: '/guide/' },
+      { text: 'Showcase', link: '/showcase/', activeMatch: '/showcase/' },
+    ],
+    search: {
+      provider: 'local',
+    },
+    logo: {
+      light: '/logo_light.svg',
+      dark: '/logo_dark.svg',
+    },
+
+    sidebar: {
+      '/': [
+        {
+          text: 'Guide',
+          items: [
+            { text: 'Getting Started', link: '/guide/' },
+            // { text: 'Why Unplugin', link: '/guide/why' },
+            { text: 'Plugin Conventions', link: '/guide/plugin-conventions' },
+          ],
+        },
+        {
+          text: 'Showcase',
+          link: '/showcase/',
+          items: [
+            {
+              text: 'Overview',
+              link: '/showcase/',
+            },
+            ...repositoryMeta.map(repo => (
+              {
+                text: repo.name,
+                link: `/showcase/${repo.name}`,
+              }
+            )),
+          ],
+        },
+      ],
+    },
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/unplugin' },
+    ],
+
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright (c) 2021-PRESENT UnJS Team',
+    },
+  },
+  head: [
+    ['meta', { name: 'theme-color', content: '#ffffff' }],
+    ['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }],
+    ['meta', { name: 'author', content: 'Nuxt Contrib' }],
+    ['meta', { property: 'og:title', content: title }],
+    ['meta', { property: 'og:image', content: ogImage }],
+    ['meta', { property: 'og:description', content: description }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { name: 'twitter:image', content: ogImage }],
+    ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0, viewport-fit=cover' }],
+  ],
+  markdown: {
+    config: (md: any) => {
+      md.use(MarkdownItGitHubAlerts)
+    },
+    codeTransformers: [
+      transformerTwoslash(),
+    ],
+  },
+  ignoreDeadLinks: true,
+  vite: vite as any,
+})

docs/.vitepress/constance.ts

@@ -0,0 +1,4 @@
+export const title = 'Unplugin'
+export const description = 'Unified plugin system. Support Vite, Rollup, webpack, esbuild, and every frameworks on top of them.'
+export const url = 'https://unplugin.vercel.app/'
+export const ogImage = `${url}/og.png`

docs/.vitepress/data/gen-files.ts

@@ -0,0 +1,135 @@
+import 'dotenv/config'
+import { writeFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { env } from 'node:process'
+import { $fetch } from 'ofetch'
+import { consola } from 'consola'
+import type { Repository } from './repository.data'
+import { repositoryMeta } from './meta'
+
+const GITHUB_TOKEN = env.GITHUB_TOKEN
+
+const gql = `#graphql
+query repositoryQuery($owner: String!, $name: String!, $readme: String!) {
+  repository(owner: $owner, name: $name) {
+    name
+    stargazers {
+      totalCount
+    }
+    owner {
+      avatarUrl
+      login
+    }
+    description
+    primaryLanguage {
+      name
+      color
+    }
+    forkCount
+    object(expression: $readme) {
+      ... on Blob {
+        text
+      }
+    }
+  }
+}`
+
+async function fetchRepo(meta: {
+  owner: string
+  name: string
+  readme?: string
+}) {
+  const { owner, name, readme } = meta
+
+  const _readme = readme || 'main:README.md'
+  try {
+    const results = await $fetch('https://api.github.com/graphql', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${GITHUB_TOKEN}`,
+      },
+      body: JSON.stringify({
+        query: gql,
+        variables: {
+          owner,
+          name,
+          readme: _readme,
+        },
+      }),
+    })
+
+    const repositoryInfo = results.data.repository as Repository
+
+    const markdownFrontmatter = `---
+title: ${repositoryInfo.name}
+owner: ${repositoryInfo.owner.login}
+name: ${repositoryInfo.name}
+stars: ${repositoryInfo.stargazers.totalCount}
+forks: ${repositoryInfo.forkCount}
+outline: deep
+---
+
+<RepoInfo :owner="$frontmatter.owner" :name="$frontmatter.name" :stars="$frontmatter.stars" :forks="$frontmatter.forks" />
+
+---
+
+`
+
+    writeFileSync(
+      join(dirname(fileURLToPath(import.meta.url)), `../../showcase/${name}.md`),
+      markdownFrontmatter + repositoryInfo.object.text,
+    )
+    consola.success(`[${name}.md]: generate success`)
+    return repositoryInfo
+  }
+  catch (error) {
+    consola.error(`[${name}.md]: generate failed: ${error}`)
+  }
+}
+
+function main() {
+  if (!GITHUB_TOKEN) {
+    consola.error('GITHUB_TOKEN is missing, please refer to https://github.com/unplugin/docs#development')
+    return false
+  }
+
+  const fetchs = repositoryMeta.map((repository) => {
+    return fetchRepo({
+      name: repository.name,
+      owner: repository.owner,
+      readme: repository.defaultBranch ? `${repository.defaultBranch}:README.md` : 'main:README.md',
+    })
+  })
+
+  Promise.allSettled(fetchs).then((res) => {
+    const repoMeta = res?.map((item) => {
+      if (item.status === 'fulfilled') {
+        return {
+          name: item.value?.name,
+          stargazers: item.value?.stargazers,
+          owner: item.value?.owner,
+          description: item.value?.description,
+          url: item.value?.url,
+          isTemplate: item.value?.isTemplate,
+          primaryLanguage: item.value?.primaryLanguage,
+          forkCount: item.value?.forkCount,
+        }
+      }
+
+      return null
+    })?.filter(item => item && item.name)
+
+    writeFileSync(
+      join(dirname(fileURLToPath(import.meta.url)), './repository.json'),
+      JSON.stringify(repoMeta, null, 2),
+    )
+    consola.success('[repository.json] generate success!')
+    consola.success('All files generate done!')
+  }).catch((error) => {
+    consola.error(error)
+  })
+}
+
+main()