feat: new version of docs site (windicss#96)

* refactor: next version

* feat: rwd support

* WIP: adapt playground to new site

* refactor: migrate playground

* chore: fix vue import

* feat: add not found page

* fix: page layout in not full height

* fix: not found layout in mobile

* chore: ignore readme

* chore: apply linter

* chore: add transition

* fix: table style

* chore: update component type

* fix: dropdown menu in ssr mode

* chore: adjest inline code text size

* chore: unifi colors

* chore: ignore components.d.ts

* chore: delete components.d.ts

* fix: sidebar toggle in ssr mode

* fix: next and prev links layout in mobile size

* chore: padding of tree links in sidebar

* chore: set to max width

* chore: add prose a hover underline

* fix: remap title level

* chore: title author font-size

* chore: apply new linter rules

* feat: rander code block filename

* chore: add box-shadow to code block

* chore: move dropdown class to navlink

* chore: change toc height

* chore: code block filename

* chore: code block filename text color

* fix: double underline

* chore: remap title level

* chore: animate dropdown icon

* chore: update deps

* chore: remap title level

* fix: windows build

* fix: windows build

* fix: next and prev link flex flow

* fix: remove prose img margin

* chore: change menu to font-normal

* chore: remove space

* chore: reset search box top

* feat: use web component in playground preview 😎

* chore: upgrade to new version of mitt

* chore: cleanup

* fix: scrolling issue

* chore: use css vars in background

* refactor: upgrade to vue 3.1.4, update deps

* fix: playground viewport & replace group variant, close windicss#100

* fix: remove space in code block filename

* refactor: remove vue global helper functions, update deps

* fix: move to code block filename

* refactor: move filename to filename block

* fix: parser error in svelte docs code block

* fix: replace deplicate key

* chore: code block filename

* chore: update deps

* fix: playground url share not works

* fix: playground action button toggle

* chore: update deps

* fix: lock vite version

* feat: apply new eslint rules

.eslintignore

@@ -1,5 +1,4 @@
-.git/
-node_modules/
-!.vitepress
-!.shared-components
+.git
+node_modules
+!/.vitepress
 **/dist

.eslintrc

@@ -0,0 +1,15 @@
+{
+  "extends": ["@hannoeru", "plugin:markdown/recommended"],
+  "overrides": [
+    {
+      "files": ["**/*.md/**"],
+      "rules": {
+        "no-undef": "off",
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "jsonc/no-dupe-keys": "off"
+      }
+    }
+  ]
+}

.gitignore

@@ -49,3 +49,6 @@ wiki/
 
 # Algolia
 .algolia.env
+
+# vite-plugin-components
+components.d.ts

.npmrc

@@ -1,2 +1 @@
-shared-workspace-lockfile=false
 shamefully-hoist=true

.vitepress/config.js

@@ -1,4 +1,5 @@
 require('esbuild-register')
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const config = require('./config/index.ts')
 module.exports = config.default

.vitepress/config/index.ts

@@ -1,14 +1,28 @@
 import { UserConfig } from 'vitepress'
-import { DefaultTheme } from '@windicss/vitepress-theme/config'
 import { metaData } from './constants'
+import { mdRenderFilename } from './markdown'
 import head from './head'
 import themeConfig from './theme'
+import { DefaultTheme } from '@/config'
 
 const config: UserConfig<DefaultTheme.Config> = {
   title: 'Windi CSS',
   description: metaData.description,
   head,
   themeConfig,
+  srcExclude: ['README.md'],
+  markdown: {
+    config(md) {
+      md.use(mdRenderFilename)
+    },
+  },
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => tag === 'preview-box',
+      },
+    },
+  },
 }
 
 export default config

.vitepress/config/markdown.ts

@@ -0,0 +1,23 @@
+import MarkdownIt from 'markdown-it'
+
+export const mdRenderFilename = (md: MarkdownIt) => {
+  const fence = md.renderer.rules.fence!
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx] = args
+    const token = tokens[idx]
+    const langInfo = token.info.split(' ')
+    const langName = langInfo?.length ? langInfo[0] : ''
+    const filename = langName.length && langInfo[1] ? langInfo[1] : null
+
+    // remove filename
+    token.info = langName
+
+    const rawCode = fence(...args)
+
+    const finalCode = filename
+      ? rawCode.replace(/<div class="language-(\w+)">/, `<div class="language-$1 with-filename"><div class="code-block-filename">${filename}</div>`)
+      : rawCode
+
+    return finalCode
+  }
+}

.vitepress/config/nav.ts

@@ -1,4 +1,4 @@
-import type { DefaultTheme } from '@windicss/vitepress-theme/config'
+import type { DefaultTheme } from '@/config'
 
 export const nav: DefaultTheme.Config['nav'] = [
   {

.vitepress/config/sidebar.ts

@@ -1,4 +1,4 @@
-import type { DefaultTheme } from '@windicss/vitepress-theme/config'
+import type { DefaultTheme } from '@/config'
 
 export const sidebar: DefaultTheme.Config['sidebar'] = {
   '/utilities': [

.vitepress/config/theme.ts

@@ -1,6 +1,6 @@
-import type { DefaultTheme } from '@windicss/vitepress-theme/config'
 import { sidebar } from './sidebar'
 import { nav } from './nav'
+import type { DefaultTheme } from '@/config'
 
 const themeConfig: DefaultTheme.Config = {
   algolia: {

.vitepress/theme/Layout.vue

@@ -0,0 +1,4 @@
+<template>
+  <TheLayout />
+  <Debug />
+</template>

.vitepress/theme/NotFound.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="relative flex flex-col items-center justify-center h-60vh">
+    <h1 class="!m-0 w-full text-center !text-9xl !md:text-12xl !text-transparent text-stroke-sm text-stroke-primary-300 dark:text-stroke-primary-700">
+      404
+    </h1>
+    <h2 class="!m-0 !-mt-15 !md:-mt-20 w-full text-center !text-3xl text-stroke-sm uppercase tracking-0.5em pl-3">
+      Page Not Found
+    </h2>
+  </div>
+</template>

.vitepress/theme/components/atoms/AppButton.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+  outline: {
+    type: Boolean,
+    default: false,
+  },
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+  size: String as PropType<'sm' | 'lg'>,
+})
+
+const linkClass = computed(() => ([
+  `
+  inline-flex items-center justify-center
+  px-3 py-2
+  border border-transparent rounded-md
+  bg-primary
+  hover:bg-primary-600
+  shadow-sm
+  text-base text-white font-medium
+  transition duration-50
+  ring-primary focus:ring-3 ring-opacity-50
+  `, {
+    'bg-transparent border border-primary text-primary hover:text-gray-100': props.outline,
+    'text-sm underline': props.inline,
+    'text-sm px-2.5 py-2': props.size === 'sm',
+    'text-base px-3 py-2.5 md:(text-lg px-4 py-3) border-2': props.size === 'lg',
+  },
+]))
+
+</script>
+
+<template>
+  <a
+    :href="href"
+    :class="linkClass"
+  >
+    <div v-if="$slots.icon" class="inline-block mr-1">
+      <slot name="icon" />
+    </div>
+    <slot />
+  </a>
+</template>
+
+<style>
+.btn {
+  display: inline-flex;
+
+}
+</style>

.vitepress/theme/components/atoms/AppLayout.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="container !max-w-screen-2xl lg:px-6 mx-auto pt-$header-height">
+    <slot />
+  </div>
+</template>

.vitepress/theme/components/atoms/AppLogo.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { withBase, useData } from 'vitepress'
+const { site, theme, localePath } = useData()
+</script>
+
+<template>
+  <a
+    class="
+      inline-flex
+      items-center
+      text-xl lg:text-2xl
+      font-semibold
+    "
+    :href="localePath"
+    :aria-label="`${site.title}, back to home`"
+  >
+    <img
+      v-if="theme.logo"
+      class="
+        inline-flex
+        mr-1 lg:mr-3
+        h-8 lg:h-10
+      "
+      :src="withBase(theme.logo)"
+      alt="Logo"
+    >
+    {{ site.title }}
+  </a>
+</template>

.vitepress/theme/components/atoms/ContentLayout.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="grid px-6 md:px-8 py-8 lg:py-12">
+    <slot />
+  </div>
+</template>

.vitepress/theme/components/atoms/IconButton.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <a
+    v-if="href"
+    :href="href"
+    target="_blank"
+    rel="noopener"
+    class="inline-flex text-xl p-2"
+  >
+    <slot />
+  </a>
+  <button v-else class="inline-flex text-xl p-2">
+    <slot />
+  </button>
+</template>

.vitepress/theme/components/atoms/PlayDivide.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="hidden md:inline-flex items-center">
+    <div class="h-5 w-2px bg-gray-200 dark:bg-dark-200" />
+  </div>
+</template>

.vitepress/theme/components/atoms/logos/Logo.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import Nuxt from 'virtual:vite-icons/logos/nuxt-icon'
+import Vue from 'virtual:vite-icons/logos/vue'
+import Svelte from 'virtual:vite-icons/logos/svelte-icon'
+import Rollup from 'virtual:vite-icons/logos/rollup'
+import Webpack from 'virtual:vite-icons/logos/webpack'
+import VSCode from 'virtual:vite-icons/logos/visual-studio-code'
+import Webstrom from 'virtual:vite-icons/logos/webstorm'
+import PostCSS from 'virtual:vite-icons/logos/postcss'
+import Gridsome from 'virtual:vite-icons/logos/gridsome-icon'
+import JavaScript from 'virtual:vite-icons/logos/javascript'
+import NextJs from './NuxtJs.vue'
+import Vite from './ViteLogo.vue'
+import Windi from './WindiLogo.vue'
+
+// @windicss-safelist: 'logo-float-xl'
+
+const props = defineProps({
+  name: {
+    default: '',
+  },
+})
+
+const Logo = computed(() => {
+  switch (props.name.toString()) {
+    case 'nuxt':
+      return Nuxt
+    case 'vue':
+      return Vue
+    case 'svelte':
+      return Svelte
+    case 'rollup':
+      return Rollup
+    case 'webpack':
+      return Webpack
+    case 'vite':
+      return Vite
+    case 'nextjs':
+      return NextJs
+    case 'gridsome':
+      return Gridsome
+    case 'vscode':
+      return VSCode
+    case 'webstorm':
+      return Webstrom
+    case 'postcss':
+      return PostCSS
+    case 'javascript':
+      return JavaScript
+    default:
+      return Windi
+  }
+})
+</script>
+
+<template>
+  <component :is="Logo" />
+</template>

.vitepress/theme/components/atoms/logos/NuxtJs.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import NextJs from 'virtual:vite-icons/logos/nextjs'
+</script>
+
+<template>
+  <NextJs class="dark:brightness-0 dark:invert" />
+</template>

.vitepress/theme/components/atoms/logos/ViteLogo.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg width="1.2em" height="1.2em" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)" />
+    <path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)" />
+    <defs>
+      <linearGradient
+        id="paint0_linear"
+        x1="6.00017"
+        y1="32.9999"
+        x2="235"
+        y2="344"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#41D1FF" />
+        <stop offset="1" stop-color="#BD34FE" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear"
+        x1="194.651"
+        y1="8.81818"
+        x2="236.076"
+        y2="292.989"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#FFEA83" />
+        <stop offset="0.0833333" stop-color="#FFDD35" />
+        <stop offset="1" stop-color="#FFA800" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>

.vitepress/theme/components/atoms/logos/WindiLogo.vue

@@ -0,0 +1,3 @@
+<template>
+  <img src="/assets/logo.svg" style="width: 1.35em; height: 1.35em" class="!m-0">
+</template>