@maple-design/cli-vue 0.0.0-stage → 1.1.0

package/site/pc/main.ts

@@ -0,0 +1,108 @@
+import { createApp, h } from 'vue'
+import config from '@config'
+import {
+  currentStyleVars,
+  currentThemePreset,
+  getSavedLanguage,
+  normalizeLanguage,
+  saveLanguage,
+} from '@maple-design/cli-vue/client'
+import { Locale, ThemeProvider } from '@maple-design/ui-vue'
+import routes from '@pc-routes'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { getDesktopPath } from '../mobile/route-sync'
+import { installRouteRecovery } from '../route-recovery'
+import App from './App.vue'
+import CodeExample from './components/code-example'
+import DemoPreview from './components/demo-preview'
+import '@maple-design/touch-emulator-vue'
+import '@maple-foundation'
+
+const defaultLanguage = getSavedLanguage(normalizeLanguage(config?.defaultLanguage))
+Locale.add('zh-CN', Locale.zhCN)
+Locale.add('en-US', Locale.enUS)
+const redirect = config?.pc?.redirect
+const mobileRedirect = config?.mobile?.redirect
+
+redirect &&
+  routes.push({
+    path: '/:pathMatch(.*)*',
+    redirect: `/${defaultLanguage}${redirect}`,
+  })
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+  scrollBehavior(to: any) {
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: 'smooth',
+        top: 100,
+      }
+    }
+
+    return { top: 0 }
+  },
+})
+
+installRouteRecovery(router)
+
+router.beforeEach((to: any, from: any) => {
+  const language = normalizeLanguage(to.path.split('/')[1], defaultLanguage)
+  Locale.use(language)
+  saveLanguage(language)
+  if (to.fullPath === from.fullPath) {
+    return false
+  }
+
+  // @ts-ignore
+  if (
+    window._hmt &&
+    (from.matched.length === 0 || to.path !== from.path || JSON.stringify(to.query) !== JSON.stringify(from.query))
+  ) {
+    if (to.path) {
+      // @ts-ignore
+      window._hmt.push(['_trackPageview', `/#${to.fullPath}`])
+    }
+  }
+})
+
+Object.defineProperty(window, 'onMobileRouteChange', {
+  value: (path: string, language: string, replace: string, hash: string, query: Record<string, any> = {}) => {
+    const { language: _language, platform: _platform, replace: _replace, ...businessQuery } = query
+    router.replace({
+      path: path === mobileRedirect ? `/${language}/${replace}` : getDesktopPath(path, language),
+      hash,
+      query: businessQuery,
+    })
+  },
+})
+
+Object.defineProperty(window, 'scrollToMenu', {
+  value: (docName: string) => {
+    setTimeout(() => {
+      const cell = document.getElementById(docName) as HTMLElement
+      const scroller = cell.parentNode as HTMLElement
+      scroller.scrollTo({ top: cell.offsetTop - scroller.offsetHeight / 2 })
+    })
+  },
+})
+
+createApp({
+  render: () =>
+    h(
+      ThemeProvider,
+      {
+        theme: currentThemePreset.value,
+        styleVars: currentStyleVars.value,
+        style: { minHeight: '100vh', background: 'var(--mp-color-body)', color: 'var(--mp-color-text)' },
+      },
+      () => h(App),
+    ),
+})
+  .use(router)
+  // @ts-ignore
+  .use(CodeExample)
+  .use(DemoPreview)
+  .mount('#app')

package/site/pc/pages/index/index.vue

@@ -0,0 +1,421 @@
+<script setup lang="ts">
+import { ref, watch, type Ref } from 'vue'
+import config from '@config'
+import { getPCLocationInfo, onThemeChange } from '@maple-design/cli-vue/client'
+import { IconGithub as MIconGithub, IconTwitter as MIconTwitter } from '@maple-design/icons-vue'
+import { useRoute, useRouter } from 'vue-router'
+import { resolveSiteAsset } from '../../../utils'
+import AppAd from '../../components/AppAd.vue'
+import AppHeader from '../../components/AppHeader.vue'
+
+const route = useRoute()
+const router = useRouter()
+const github = config?.pc?.header?.github
+const siteLogo = resolveSiteAsset(config?.logo)
+const title: Ref<string> = ref(config?.title)
+const language: Ref<string> = ref(config?.defaultLanguage)
+const indexPage: Ref<Record<string, any>> = ref(config?.pc?.indexPage)
+
+const getStar = () => {
+  router.push(`/${language.value}/quickstart`)
+}
+
+const toGithub = () => {
+  window.open(github)
+}
+
+const setLocale = () => {
+  const { language: lang } = getPCLocationInfo()
+  if (!lang) {
+    return
+  }
+
+  language.value = lang
+  document.title = config?.pc.title[lang] as string
+}
+
+const to = (url: string) => {
+  window.open(url)
+}
+
+onThemeChange(undefined, 'site')
+
+watch(
+  () => route.path,
+  () => {
+    language.value = getPCLocationInfo().language
+    setLocale()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="maple-doc-index">
+    <app-ad :language="language" />
+    <app-header :language="language" />
+    <div class="maple-doc-index__layout">
+      <div class="maple-doc-index__main-container">
+        <div class="maple-doc-index__logo-container">
+          <div class="maple-doc-index__logo-background-mask"></div>
+          <img class="maple-doc-index__logo" :src="siteLogo" alt="" />
+        </div>
+        <div class="maple-doc-index__info-container">
+          <p v-if="indexPage.eyebrow" class="maple-doc-index__eyebrow">{{ indexPage.eyebrow[language] }}</p>
+          <p class="maple-doc-index__product">{{ title }}</p>
+          <h1 class="maple-doc-index__title">{{ indexPage.headline?.[language] || title }}</h1>
+          <div class="maple-doc-index__description">{{ indexPage.description[language] }}</div>
+
+          <mp-space size="lg">
+            <mp-button class="maple-doc-index__link-button" type="primary" style="line-height: 1.2" @click="getStar">
+              {{ indexPage.started[language] }}
+            </mp-button>
+            <a v-if="indexPage.companion" class="maple-doc-index__companion-link" :href="indexPage.companion.href">
+              {{ indexPage.companion.label[language] }}
+            </a>
+            <mp-button v-else class="maple-doc-index__github-button" style="line-height: 1.2" @click="toGithub">
+              {{ indexPage.viewOnGithub[language] }}
+            </mp-button>
+          </mp-space>
+        </div>
+      </div>
+
+      <section v-if="indexPage.companion" class="maple-doc-index__pair">
+        <div>
+          <h2>{{ indexPage.companion.title[language] }}</h2>
+          <p>{{ indexPage.companion.description[language] }}</p>
+        </div>
+        <div class="maple-doc-index__platforms">
+          <a :href="indexPage.companion.href"><span>01 / DESKTOP</span><strong>Cedar ↗</strong></a>
+          <div aria-current="page"><span>02 / MOBILE</span><strong>Maple</strong></div>
+        </div>
+      </section>
+
+      <div v-if="indexPage.features" class="maple-doc-index__features">
+        <div v-for="feature in indexPage.features" :key="feature.name[language]" class="maple-doc-index__feature">
+          <div class="maple-doc-index__feature-name">{{ feature.name[language] }}</div>
+          <div class="maple-doc-index__feature-description">{{ feature.description[language] }}</div>
+        </div>
+      </div>
+
+      <div v-if="indexPage.teamMembers" class="maple-doc-index__team-members">
+        <div class="maple-doc-index__team-members-title">{{ indexPage.teamMembers.label[language] }}</div>
+
+        <div class="maple-doc-index__team-members-container">
+          <div
+            v-for="member in indexPage.teamMembers.members"
+            :key="member.name[language]"
+            class="maple-doc-index__team-member"
+          >
+            <img
+              v-if="member.avatar"
+              class="maple-doc-index__team-member-avatar"
+              :src="member.avatar"
+              :alt="member.name[language]"
+            />
+            <div
+              v-else
+              class="maple-doc-index__team-member-avatar maple-doc-index__team-member-avatar--placeholder"
+              aria-hidden="true"
+            >
+              {{ member.name[language].slice(0, 1) }}
+            </div>
+            <div class="maple-doc-index__team-member-name">{{ member.name[language] }}</div>
+            <div class="maple-doc-index__team-member-title">{{ member.title[language] }}</div>
+            <div class="maple-doc-index__team-member-description">{{ member.description[language] }}</div>
+            <div v-if="member.github || member.twitter" class="maple-doc-index__team-member-social">
+              <mp-icon
+                v-if="member.github"
+                class="maple-doc-index__team-member-social-icon"
+                :size="24"
+                @click="to(member.github)"
+                ><MIconGithub
+              /></mp-icon>
+              <mp-icon
+                v-if="member.twitter"
+                class="maple-doc-index__team-member-social-icon"
+                :size="24"
+                @click="to(member.twitter)"
+                ><MIconTwitter
+              /></mp-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="indexPage.contributors" class="maple-doc-index__contributors">
+        <div class="maple-doc-index__contributors-title">{{ indexPage.contributors.label[language] }}</div>
+
+        <a class="maple-doc-index__contributors-link" :href="indexPage.contributors.link">
+          <img class="maple-doc-index__contributors-image" :src="indexPage.contributors.image" />
+        </a>
+      </div>
+
+      <div v-if="indexPage.sponsors" class="maple-doc-index__sponsors">
+        <div class="maple-doc-index__sponsors-title">{{ indexPage.sponsors.label[language] }}</div>
+
+        <a class="maple-doc-index__sponsors-link" :href="indexPage.sponsors.link">
+          <img class="maple-doc-index__sponsors-image" :src="indexPage.sponsors.image" />
+        </a>
+      </div>
+
+      <div class="maple-doc-index__footer">
+        <div class="maple-doc-index__license">{{ indexPage.license[language] }}</div>
+        <div class="maple-doc-index__copyright">{{ indexPage.copyright[language] }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+.maple-doc-index {
+  min-height: 100vh;
+  background: var(--site-config-color-index-page-background);
+  color: var(--site-config-color-text);
+
+  &__layout {
+    width: 100%;
+    max-width: 1120px;
+    margin: auto;
+    padding: 80px 32px 0;
+    box-sizing: border-box;
+  }
+  &__main-container {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: 64px;
+    padding: 36px 0 80px;
+  }
+  &__info-container {
+    flex: 1;
+    min-width: 0;
+  }
+  &__eyebrow {
+    color: var(--site-config-color-text);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    margin: 0 0 24px;
+  }
+  &__product {
+    font-size: 18px;
+    margin: 0 0 12px;
+    color: var(--site-config-color-index-page-second-text-color);
+  }
+  &__title {
+    font-size: clamp(34px, 4.4vw, 56px);
+    font-weight: 750;
+    line-height: 1.2;
+    letter-spacing: -1.5px;
+    white-space: pre-line;
+    margin: 0;
+  }
+  &__description {
+    max-width: 660px;
+    font-size: 17px;
+    line-height: 1.9;
+    margin: 24px 0 30px;
+    color: var(--site-config-color-index-page-second-text-color);
+  }
+  &__logo-container {
+    width: 160px;
+    flex: 0 0 160px;
+  }
+  &__logo {
+    display: block;
+    width: 100%;
+  }
+  &__logo-background-mask {
+    display: none;
+  }
+  &__link-button,
+  &__github-button {
+    min-height: 44px;
+    padding: 0 24px;
+  }
+  &__companion-link {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    color: var(--site-config-color-text);
+    text-decoration: none;
+    font-weight: 600;
+  }
+  a:focus-visible {
+    outline: 2px solid var(--site-config-color-primary);
+    outline-offset: 5px;
+    border-radius: 4px;
+  }
+  a:hover {
+    color: var(--site-config-color-text);
+  }
+  &__pair {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    gap: 40px;
+    padding: 32px;
+    border: 1px solid var(--site-config-color-border);
+    border-radius: 16px;
+  }
+  &__pair h2 {
+    font-size: 24px;
+    line-height: 1.4;
+    margin: 0 0 12px;
+  }
+  &__pair p {
+    line-height: 1.8;
+    margin: 0;
+    color: var(--site-config-color-index-page-second-text-color);
+  }
+  &__platforms {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+  }
+  &__platforms > * {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 24px;
+    border-radius: 10px;
+    background: var(--site-config-color-side-bar-active-background);
+    color: inherit;
+    text-decoration: none;
+  }
+  &__platforms span {
+    font-size: 11px;
+    letter-spacing: 1px;
+    color: var(--site-config-color-index-page-second-text-color);
+  }
+  &__platforms strong {
+    font-size: 24px;
+  }
+  &__features {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 20px;
+    margin: 32px 0 72px;
+  }
+  &__feature {
+    padding: 28px;
+    border: 1px solid var(--site-config-color-border);
+    border-radius: 12px;
+    background: var(--site-config-color-index-page-feature-background);
+  }
+  &__feature-name {
+    font-size: 18px;
+    font-weight: 650;
+  }
+  &__feature-description {
+    font-size: 14px;
+    line-height: 1.9;
+    margin-top: 12px;
+    color: var(--site-config-color-index-page-second-text-color);
+  }
+  &__team-members,
+  &__contributors,
+  &__sponsors {
+    padding-top: 32px;
+    margin-bottom: 48px;
+    border-top: 1px solid var(--site-config-color-border);
+  }
+  &__team-members-title,
+  &__contributors-title,
+  &__sponsors-title {
+    font-size: 20px;
+    font-weight: 600;
+  }
+  &__team-members-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 32px;
+    margin-top: 24px;
+  }
+  &__team-member {
+    display: grid;
+    grid-template-columns: 48px auto;
+    column-gap: 16px;
+    align-content: start;
+  }
+  &__team-member-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    grid-row: span 3;
+  }
+  &__team-member-avatar--placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--site-config-color-text);
+    background: var(--site-config-color-side-bar-active-background);
+    font-size: 20px;
+  }
+  &__team-member-name {
+    font-weight: 600;
+    line-height: 24px;
+  }
+  &__team-member-title,
+  &__team-member-description {
+    font-size: 12px;
+    line-height: 22px;
+    color: var(--site-config-color-index-page-second-text-color);
+  }
+  &__team-member-social {
+    grid-column: 2;
+  }
+  &__team-member-social-icon {
+    margin-right: 12px;
+    cursor: pointer;
+  }
+  &__contributors-image,
+  &__sponsors-image {
+    max-width: 100%;
+  }
+  &__footer {
+    padding: 24px 0;
+    border-top: 1px solid var(--site-config-color-border);
+    font-size: 12px;
+    line-height: 1.8;
+    color: var(--site-config-color-index-page-second-text-color);
+  }
+
+  @media (max-width: 767px) {
+    &__layout {
+      padding: 48px 20px 0;
+    }
+    &__main-container {
+      gap: 20px;
+      padding: 0 0 40px;
+    }
+    &__logo-container {
+      display: none;
+    }
+    &__pair {
+      grid-template-columns: 1fr;
+      gap: 24px;
+      padding: 24px;
+    }
+    &__features {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+    &__feature {
+      padding: 20px;
+    }
+    &__team-members-container {
+      gap: 24px;
+    }
+  }
+  @media (max-width: 420px) {
+    &__features {
+      grid-template-columns: 1fr;
+    }
+    &__platforms > * {
+      padding: 18px;
+    }
+  }
+}
+</style>

package/site/pc/pages/index/locale/en-US.ts

@@ -0,0 +1 @@
+// this file used to generate route path ('/en-US/index')

package/site/pc/pages/index/locale/zh-CN.ts

@@ -0,0 +1 @@
+// this file used to generate route path ('/zh-CN/index')

package/site/pc/responsive-layout.spec.ts

@@ -0,0 +1,40 @@
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { parse } from '@vue/compiler-sfc'
+import less from 'less'
+import { describe, expect, it } from 'vitest'
+
+const directory = dirname(fileURLToPath(import.meta.url))
+
+describe('documentation responsive layout contract', () => {
+  it('compiles shrinking columns, stacked preview and an accessible narrow navigation', async () => {
+    const source = readFileSync(resolve(directory, 'Layout.vue'), 'utf8')
+    const { descriptor } = parse(source)
+    const { css } = await less.render(descriptor.styles.map((style) => style.content).join('\n'))
+
+    expect(css).not.toContain('min-width: 1200px')
+    expect(css).not.toContain('min-width: 500px')
+    expect(css).toContain('grid-template-columns: 220px minmax(0, 1fr)')
+    expect(css).toContain('@media (max-width: 1199px)')
+    expect(css).toContain('@media (max-width: 767px)')
+    expect(css).toMatch(/\.maple-site-content--navigation-open \.maple-site-sidebar\s*\{\s*display: block/)
+    expect(css).toMatch(/\.maple-site-mobile\s*\{[^}]*position: static/)
+    expect(source).toContain('aria-controls="maple-site-navigation"')
+    expect(source).toContain(':aria-expanded="sidebarOpen"')
+    expect(source).toContain('@keydown.esc="closeSidebar"')
+    expect(source).toContain('doc.value?.focus()')
+    expect(source).toContain('sidebarToggle.value?.focus()')
+  })
+
+  it('keeps language selection and visible keyboard focus available on narrow screens', async () => {
+    const header = parse(readFileSync(resolve(directory, 'components/AppHeader.vue'), 'utf8')).descriptor
+    const sidebar = parse(readFileSync(resolve(directory, 'components/AppSidebar.vue'), 'utf8')).descriptor
+    const { css } = await less.render([...header.styles, ...sidebar.styles].map((style) => style.content).join('\n'))
+    expect(css).not.toMatch(/\.maple-site-header__tail\s*\{\s*display: none/)
+    expect(css.indexOf('@media screen and (max-width: 562px)')).toBeGreaterThan(
+      css.indexOf('.maple-site-header__link {'),
+    )
+    expect(css).toMatch(/\.maple-site-sidebar__link:focus-visible\s*\{[^}]*outline: 2px solid/)
+  })
+})

package/site/pc/route-state.spec.ts

@@ -0,0 +1,34 @@
+import { computed, ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { MenuTypes, type Menu } from '../utils'
+import { getPcSiteRoute } from './route-state'
+
+const menu: Menu[] = [
+  { doc: 'button', type: MenuTypes.COMPONENT, text: {} },
+  { doc: 'input', type: MenuTypes.COMPONENT, text: {} },
+  { doc: 'guide', type: MenuTypes.DOCUMENTATION, text: {} },
+]
+
+describe('PC site mobile preview route', () => {
+  it('tracks component and hash changes from the reactive router state', () => {
+    const path = ref('/zh-CN/button')
+    const hash = ref('')
+    const state = computed(() => getPcSiteRoute(path.value, hash.value, menu, '/home', true))
+
+    expect(state.value).toMatchObject({ componentName: 'button', menuName: 'button', useMobile: true })
+    path.value = '/zh-CN/input'
+    hash.value = '#basic'
+    expect(state.value).toMatchObject({ componentName: 'input', menuName: 'input', hash: 'basic' })
+
+    path.value = '/zh-CN/guide'
+    expect(state.value).toMatchObject({ componentName: 'home', menuName: 'guide' })
+
+    path.value = '/en-US/button'
+    expect(state.value).toMatchObject({ language: 'en-US', componentName: 'button' })
+  })
+})
+
+it('previews opted-in root documentation on the phone route', () => {
+  expect(getPcSiteRoute('/zh-CN/guide', '', menu, '/home', true, ['guide']).componentName).toBe('zh-CN/guide')
+  expect(getPcSiteRoute('/en-US/guide', '', menu, '/home', true, ['guide']).componentName).toBe('en-US/guide')
+})

package/site/pc/route-state.ts

@@ -0,0 +1,25 @@
+import { MenuTypes, type Menu } from '../utils'
+
+export function getPcSiteRoute(
+  path: string,
+  hash: string,
+  menu: Menu[],
+  mobileRedirect: string | undefined,
+  defaultUseMobile: boolean | undefined,
+  mobileDocs: string[] = [],
+) {
+  const [, language = '', menuName = ''] = path.split('/')
+  const component = menu.find((item) => item.doc === menuName && item.type === MenuTypes.COMPONENT)
+
+  return {
+    language,
+    menuName,
+    hash: hash.replace(/^#/, ''),
+    componentName: component
+      ? menuName
+      : mobileDocs.includes(menuName)
+        ? `${language}/${menuName}`
+        : mobileRedirect?.replace(/^\//, ''),
+    useMobile: component?.useMobile ?? defaultUseMobile,
+  }
+}

package/site/pc/scroll-hash.spec.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import { createScrollHashSync } from './scroll-hash'
+
+function setup() {
+  const scrollBehavior = vi.fn(() => false as const)
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [{ path: '/:pathMatch(.*)*', component: {} }],
+    scrollBehavior,
+  })
+  return { router, scrollBehavior, sync: createScrollHashSync(router) }
+}
+
+describe('document scroll hash synchronization', () => {
+  it('replaces only the hash, preserves query, skips scrolling and adds no back entry', async () => {
+    const { router, scrollBehavior, sync } = setup()
+    await router.push('/previous')
+    await router.push('/zh-CN/button?scene=test')
+    scrollBehavior.mockClear()
+    const replace = vi.spyOn(router, 'replace')
+    await sync.replace('#sizes')
+    expect(router.currentRoute.value.fullPath).toBe('/zh-CN/button?scene=test#sizes')
+    expect(scrollBehavior).not.toHaveBeenCalled()
+    expect(router.options.scrollBehavior).toBe(scrollBehavior)
+    await sync.replace('#sizes')
+    expect(replace).toHaveBeenCalledTimes(1)
+    await sync.replace('')
+    expect(router.currentRoute.value.hash).toBe('')
+    const back = new Promise<void>((resolve) => router.afterEach(() => resolve()))
+    router.back()
+    await back
+    expect(router.currentRoute.value.path).toBe('/previous')
+  })
+
+  it('restores normal scrolling after cancelled or failed navigation', async () => {
+    const { router, scrollBehavior, sync } = setup()
+    await router.push('/zh-CN/button')
+    router.beforeEach(() => false)
+    await sync.replace('#cancelled')
+    expect(router.currentRoute.value.hash).toBe('')
+    expect(router.options.scrollBehavior).toBe(scrollBehavior)
+    expect(sync.pending).toBe(false)
+    vi.spyOn(router, 'replace').mockRejectedValueOnce(new Error('Failed navigation'))
+    await expect(sync.replace('#failed')).rejects.toThrow('Failed navigation')
+    expect(router.options.scrollBehavior).toBe(scrollBehavior)
+    expect(sync.pending).toBe(false)
+  })
+})