docs: website layout

packages/components/icon/definitions/copyFill.ts

@@ -0,0 +1,5 @@
+export const CopyFill = {
+  name: 'copy-fill',
+  svgString:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style/></defs><path d="M644.096 268.8c33.28 0 59.904 27.136 59.904 59.904v520.192c0 33.28-27.136 59.904-59.904 59.904H123.904C90.624 908.8 64 881.664 64 848.896V328.704c0-33.28 27.136-59.904 59.904-59.904h520.192zm204.8 435.2H780.8V211.968c0-11.264-9.216-19.968-19.968-19.968H268.8v-68.096C268.8 90.624 295.936 64 328.704 64h520.192c33.28 0 59.904 27.136 59.904 59.904v520.192c0 32.768-27.136 59.904-59.904 59.904z"/></svg>',
+}

packages/components/icon/definitions/definition.ts

@@ -0,0 +1,5 @@
+export const Definition = {
+  name: 'definition',
+  svgString:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style/></defs><path d="M895.64 383.905H575.961V64.227h319.677v319.678zM881.867.272H590.596c-42.92 0-77.675 36.386-77.675 81.275v301.717A63.938 63.938 0 00576.86 447.2h305.009c42.862 0 77.688-36.38 77.688-81.268V81.547c0-44.889-34.826-81.275-77.688-81.275m-18.196 831.182H607.929c-17.658 0-31.968 14.308-31.968 31.968 0 17.652 14.31 31.968 31.968 31.968h255.743c17.658 0 31.967-14.316 31.967-31.968 0-17.66-14.309-31.968-31.968-31.968m0-191.807H607.93c-17.66 0-31.97 14.308-31.97 31.968 0 17.652 14.31 31.968 31.97 31.968h255.742c17.658 0 31.967-14.316 31.967-31.968 0-17.66-14.309-31.968-31.968-31.968m-479.51-255.742H64.485V64.227h319.678v319.678zM369.457.272H78.166C35.31.272.52 36.658.52 81.547v284.386c0 44.889 34.789 81.268 77.645 81.268h305.028a63.938 63.938 0 0063.937-63.937V81.547c0-44.889-34.756-81.275-77.675-81.275m14.706 895.118H64.484V575.712h319.678V895.39zM.522 593.65v284.393c0 44.876 34.8 81.268 77.644 81.268h291.29c42.92 0 77.674-36.392 77.674-81.268v-301.73a63.938 63.938 0 00-63.937-63.937H78.167C35.31 512.377.522 548.762.522 593.65"/></svg>',
+}

packages/components/icon/definitions/editFill.ts

@@ -0,0 +1,5 @@
+export const EditFill = {
+  name: 'edit-fill',
+  svgString:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style/></defs><path d="M0 945.209h1024V1024H0zm0-250.823v172.146h172.146l516.323-516.38-172.089-172.09L0 694.386zm846.165-599.61l-74.41-74.41a68.836 68.836 0 00-97.394-.341l-89.145 89.202 172.089 172.089 89.202-89.145c26.737-26.738 26.624-70.429-.342-97.394z"/></svg>',
+}

packages/components/icon/definitions/index.ts

@@ -1,5 +1,10 @@
+export * from './copyFill'
+export * from './definition'
 export * from './down'
+export * from './editFill'
 export * from './left'
 export * from './loading'
+export * from './overview'
+export * from './pasteFill'
 export * from './right'
 export * from './up'

packages/components/icon/definitions/overview.ts

@@ -0,0 +1,5 @@
+export const Overview = {
+  name: 'overview',
+  svgString:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style/></defs><path d="M895.632 383.891H575.945V64.203h319.687v319.688zm0-383.625H575.945c-35.313 0-63.931 28.625-63.931 63.937v319.688c0 35.313 28.618 63.938 63.93 63.938h319.688c35.313 0 63.938-28.625 63.938-63.938V64.203c0-35.312-28.625-63.937-63.938-63.937m0 895.126H575.945V575.704h319.687v319.688zm0-383.626H575.945c-35.313 0-63.931 28.625-63.931 63.938v319.688c0 35.312 28.618 63.937 63.93 63.937h319.688c35.313 0 63.938-28.625 63.938-63.937V575.704c0-35.313-28.625-63.938-63.938-63.938M384.14 895.392H64.45V575.704H384.14v319.688zm0-383.626H64.45C29.145 511.766.52 540.391.52 575.704v319.688c0 35.312 28.626 63.937 63.932 63.937H384.14c35.312 0 63.937-28.625 63.937-63.937V575.704c0-35.313-28.625-63.938-63.937-63.938m0-127.875H64.45V64.203H384.14v319.688zm0-383.625H64.45C29.145.266.52 28.89.52 64.203v319.688c0 35.313 28.626 63.938 63.932 63.938H384.14c35.312 0 63.937-28.625 63.937-63.938V64.203c0-35.312-28.625-63.937-63.937-63.937"/></svg>',
+}

packages/components/icon/definitions/pasteFill.ts

@@ -0,0 +1,5 @@
+export const PasteFill = {
+  name: 'paste-fill',
+  svgString:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style/></defs><path d="M804.571 914.286v73.143A36.571 36.571 0 01768 1024H36.571A36.571 36.571 0 010 987.429V256a36.571 36.571 0 0136.571-36.571h73.143A36.571 36.571 0 01146.286 256l.146 585.143a36.571 36.571 0 0036.571 36.571H768a36.571 36.571 0 0136.571 36.572zM1024 36.57V768a36.571 36.571 0 01-36.571 36.571H256A36.571 36.571 0 01219.429 768V36.571A36.571 36.571 0 01256 0h731.429A36.571 36.571 0 011024 36.571z"/></svg>',
+}

packages/components/icon/src/utils.ts

@@ -109,7 +109,5 @@ export function createScriptElements(urls: string[], index = 0): void {
     }
     iconfontCache.add(currentUrl)
     document.body.appendChild(scriptElement)
-  } else {
-    createScriptElements(urls, index + 1)
   }
 }

packages/components/style/variable/index.less

@@ -3,5 +3,4 @@
 @import './color.less';
 @import './font.less';
 @import './shadow.less';
-@import './sizing.less';
 @import './spacing.less';

scripts/gulp/site/_site/docs/src/App.vue

@@ -1,10 +1,52 @@
 <template>
-  <router-view></router-view>
+  <div class="site-root">
+    <div class="page-wrapper">
+      <site-header :language="language" :page="page" />
+      <div class="main-wrapper">
+        <div style="width: 20%">
+          <site-side-nav :language="language" :page="page" :routerList="routerList" />
+        </div>
+        <div style="width: 80%">
+          <router-view></router-view>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, ref, watchEffect } from 'vue'
+import { useRoute } from 'vue-router'
+import { useGlobalConfig } from '@idux/components'
+
+import SiteHeader from './header/Index.vue'
+import SiteSideNav from './side-nav/Index.vue'
+
+import { routerList } from './router'
+
+export default defineComponent({
   name: 'App',
-  components: {},
-}
+  components: { SiteHeader, SiteSideNav },
+  setup() {
+    // 动态加载：不会被打包，可以减小包体积，需要加载的时候时候 http 请求加载
+    const loadIconDynamically = (iconName: string) => {
+      // TODO： fix with vite
+      return fetch(`packages/components/icon/svg/${iconName}.svg`).then(res => res.text())
+    }
+    useGlobalConfig('icon', { loadIconDynamically })
+
+    const language = ref('zh')
+
+    const route = useRoute()
+    const page = ref('docs')
+    watchEffect(() => {
+      const match = route.path.match(/\/(\w+)/)
+      if (match && match[1]) {
+        page.value = match[1]
+      }
+    })
+
+    return { language, page, routerList }
+  },
+})
 </script>

scripts/gulp/site/_site/docs/src/header/GithubButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="github-btn">
+    <a
+      class="gh-btn"
+      target="_blank"
+      rel="noopener"
+      :href="'https://github.com/' + org + '/' + repo"
+      aria-hidden="true"
+    >
+      <span class="gh-ico" aria-hidden="true"></span>
+      <span class="gh-text">Star</span>
+    </a>
+    <a class="gh-count" target="_blank" rel="noopener" :href="'https://github.com/' + org + '/' + repo + '/stargazers'">
+      {{ starCount }}
+    </a>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const org = 'IduxFE'
+    const repo = 'components'
+
+    const starCount = ref(0)
+
+    fetch(`https://api.github.com/repos/${org}/${repo}`)
+      .then(res => res.json())
+      .then(res => {
+        starCount.value = res.stargazers_count
+      })
+
+    return { org, repo, starCount }
+  },
+})
+</script>

scripts/gulp/site/_site/docs/src/header/Index.vue

@@ -0,0 +1,32 @@
+<template>
+  <header class="site-header">
+    <div style="width: 25%">
+      <logo />
+    </div>
+    <div style="width: 75%" class="nav-wrapper">
+      <navigation :language="language" :page="page" />
+      <github-button />
+    </div>
+  </header>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import Logo from './Logo.vue'
+import Navigation from './Navigation.vue'
+import GithubButton from './GithubButton.vue'
+
+export default defineComponent({
+  components: { Logo, Navigation, GithubButton },
+  props: {
+    language: { type: String, required: true },
+    page: { type: String, required: true },
+  },
+  emits: ['languageChange'],
+  setup(_, { emit }) {
+    const changeLanguage = (language: string) => emit('languageChange', language)
+
+    return { changeLanguage }
+  },
+})
+</script>

scripts/gulp/site/_site/docs/src/header/Logo.vue

@@ -0,0 +1,6 @@
+<template>
+  <a href="/" class="logo">
+    <img width="40" height="40" alt="logo" src="./assets/logo.png" />
+    <strong>@IDUX</strong>
+  </a>
+</template>

scripts/gulp/site/_site/docs/src/header/Navigation.vue

@@ -0,0 +1,36 @@
+<template>
+  <ul class="navigation">
+    <li :class="{ selected: page === 'docs' }">
+      <router-link :to="'/docs/contributing/' + language">
+        <span>{{ language == 'zh' ? '文档' : 'Docs' }}</span>
+      </router-link>
+    </li>
+    <li :class="{ selected: page === 'components' }">
+      <router-link :to="'/components/button/' + language">
+        <span>{{ language == 'zh' ? '组件' : 'Components' }}</span>
+      </router-link>
+    </li>
+    <li :class="{ selected: page === 'cdk' }">
+      <router-link :to="'/cdk/clipboard/' + language">
+        <span>{{ language == 'zh' ? '开发套件' : 'CDK' }}</span>
+      </router-link>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    language: { type: String, required: true },
+    page: { type: String, required: true },
+  },
+  emits: ['languageChange'],
+  setup(_, { emit }) {
+    const changeLanguage = (language: string) => emit('languageChange', language)
+
+    return { changeLanguage }
+  },
+})
+</script>

scripts/gulp/site/_site/docs/src/index.less

@@ -1,5 +1,10 @@
 @import '../../../packages/components/index.less';
+@import './styles/header.less';
+@import './styles/side-nav.less';
 
-.idux-site {
-  color: #fff;
+.site-root {
+  background-color: #fff;
+  .main-wrapper {
+    display: flex;
+  }
 }

scripts/gulp/site/_site/docs/src/shared/CodeBox.vue

@@ -10,15 +10,15 @@
         <a @click="goLink()">
           {{ title }}
           <a class="edit-button" :href="editHref" target="_blank" rel="noopener noreferrer">
-            <i type="edit">ICON</i>
+            <ix-icon name="edit-fill" />
           </a>
         </a>
       </div>
       <div class="code-box-description">
         <slot name="intro"></slot>
       </div>
       <div class="code-box-actions">
-        <i @click="copyCode()">ICON</i>
+        <ix-icon name="copy-fill" @click="copyCode()" />
         <span class="code-expand-icon" @click="changeExpanded(!expanded)">
           <ix-icon :name="expanded ? 'left' : 'right'" />
           <ix-icon :name="!expanded ? 'left' : 'right'" />
@@ -36,18 +36,18 @@
 </template>
 
 <script lang="ts">
-import { computed, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import { useClipboard } from '@idux/cdk'
 
 interface CodeBoxProps {
-  title: string
-  type: string
-  component: string
-  demoKey: string
-  rawCode: string
+  title?: string
+  type?: string
+  component?: string
+  demoKey?: string
+  rawCode?: string
 }
 
-export default {
+export default defineComponent({
   name: 'CodeBox',
   props: {
     title: String,
@@ -61,7 +61,7 @@ export default {
 
     const codeCopied = ref(false)
     const copyCode = () => {
-      if (codeCopied.value) return
+      if (codeCopied.value || !props.rawCode) return
       copy(props.rawCode).then(successful => {
         codeCopied.value = true
         console.log('codeCopied ', successful)
@@ -80,7 +80,7 @@ export default {
 
     return { copyCode, goLink, editHref, expanded, changeExpanded }
   },
-}
+})
 </script>
 
 <style lang="less">
@@ -101,5 +101,10 @@ export default {
       }
     }
   }
+
+  .highlight-wrapper {
+    // TODO: 暂时隐藏
+    display: none;
+  }
 }
 </style>

scripts/gulp/site/_site/docs/src/side-nav/Index.vue

@@ -0,0 +1,47 @@
+<template>
+  <ul class="site-side-nav">
+    <template v-if="page === 'docs'">
+      <li v-for="docs in routerList.docs" v-show="docs.language === language" :key="docs.path">
+        <router-link :to="docs.path">
+          <span>{{ docs.title }}</span>
+        </router-link>
+      </li>
+    </template>
+    <template v-if="page === 'components'">
+      <li
+        v-for="group in routerList.components"
+        v-show="group.language === language"
+        :key="group.name"
+        :title="group.name"
+      >
+        <ul>
+          <li v-for="component in group.children" :key="component.path">
+            <router-link :to="component.path">
+              <span>{{ component.title }}</span>
+              <span class="chinese">{{ component.subtitle }}</span>
+            </router-link>
+          </li>
+        </ul>
+      </li>
+    </template>
+    <template v-if="page === 'cdk'">
+      <li v-for="cdk in routerList.cdk" v-show="cdk.language === language" :key="cdk.path">
+        <router-link :to="cdk.path">
+          <span>{{ cdk.label }}</span>
+          <span class="chinese">{{ cdk.subtitle }}</span>
+        </router-link>
+      </li>
+    </template>
+  </ul>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    routerList: { type: Object, required: true },
+    language: { type: String, required: true },
+    page: { type: String, required: true },
+  },
+})
+</script>