docs: enable translations

closes #17221

.github/actions/download-locales/action.yml

@@ -0,0 +1,32 @@
+name: Download translations
+description: Download translations from Crowdin
+
+inputs:
+  crowdin-branch:
+    description: 'Crowdin branch name'
+    required: false
+    default: 'v3'
+
+runs:
+  using: composite
+  steps:
+    - name: Download eo-UY
+      uses: crowdin/github-action@v1.8.0
+      with:
+        download_language: eo
+        config: crowdin.yml
+        upload_sources: false
+        download_translations: true
+        push_translations: false
+        export_only_approved: false
+        crowdin_branch_name: ${{ inputs.crowdin-branch }}
+    - name: Download zh-CN
+      uses: crowdin/github-action@v1.8.0
+      with:
+        download_language: zh-CN
+        config: crowdin.yml
+        upload_sources: false
+        download_translations: true
+        push_translations: false
+        export_only_approved: false
+        crowdin_branch_name: ${{ inputs.crowdin-branch }}

.github/workflows/ci.yml

@@ -8,7 +8,6 @@ env:
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
   CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
   CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
-  CROWDIN_BRANCH: v3
 
 jobs:
   pre_job:
@@ -130,17 +129,7 @@ jobs:
         with:
           name: vuetify-dist
       - uses: ./.github/actions/yarn-install
-# TODO: crowdin is returning invalid markdown
-#      - name: Download eo-UY
-#        uses: crowdin/github-action@1.8.0
-#        with:
-#          config: crowdin.yml
-#          upload_sources: false
-#          download_translations: true
-#          push_translations: false
-#          export_only_approved: false
-#          download_language: eo
-#          crowdin_branch_name: ${{ env.CROWDIN_BRANCH }}
+      - uses: ./.github/actions/download-locales
       - run: yarn build api
       - run: yarn build docs
         env:

packages/api-generator/src/index.ts

@@ -6,7 +6,7 @@ import importMapLabs from 'vuetify/dist/json/importMap-labs.json' assert { type:
 import { kebabCase } from './helpers/text'
 import { generateComposableDataFromTypes, generateDirectiveDataFromTypes } from './types'
 import Piscina from 'piscina'
-import { addDescriptions, addDirectiveDescriptions, stringifyProps } from './utils'
+import { addDescriptions, addDirectiveDescriptions, addPropData, stringifyProps } from './utils'
 import * as os from 'os'
 import mkdirp from 'mkdirp'
 import { createVeturApi } from './vetur'
@@ -15,6 +15,7 @@ import { createWebTypesApi } from './web-types'
 import inspector from 'inspector'
 import yargs from 'yargs'
 import { execSync } from 'child_process'
+import { parseSassVariables } from './helpers/sass'
 
 type TranslationData = {
   [type in 'props' | 'events' | 'slots' | 'exposed']?: {
@@ -43,7 +44,8 @@ const componentsInfo = {
 
 const run = async () => {
   const argv = await yar.argv
-  const locales = ['en']
+
+  const locales = await fs.readdir('./src/locale', 'utf-8')
 
   // Components
   const pool = new Piscina({
@@ -66,19 +68,22 @@ const run = async () => {
   }
 
   const outPath = path.resolve('./dist/api')
+  await mkdirp(outPath)
 
   const componentData = await Promise.all(
-    Object.entries(components).map(([componentName, componentInstance]) => {
+    Object.entries(components).map(async ([componentName, componentInstance]) => {
       if (argv.components && !argv.components.includes(componentName)) return null
 
-      return pool.run(
-        JSON.stringify({
-          componentName,
-          componentProps: stringifyProps(componentInstance.props),
-          locales,
-          outPath,
-        })
-      )
+      const data = await pool.run(componentName)
+      const componentProps = stringifyProps(componentInstance.props)
+      const sources = addPropData(componentName, data, componentProps)
+      await addDescriptions(componentName, data, locales, sources)
+      const sass = parseSassVariables(componentName)
+
+      const component = { displayName: componentName, fileName: kebabCase(componentName), ...data, sass }
+      await fs.writeFile(path.resolve(outPath, `${componentName}.json`), JSON.stringify(component, null, 2))
+
+      return component
     }).filter(Boolean)
   )
 

packages/api-generator/src/worker.ts

@@ -1,32 +1,10 @@
-import fs from 'fs/promises'
-import path from 'path'
-import { kebabCase } from './helpers/text'
 import { generateComponentDataFromTypes } from './types'
-import { addDescriptions, addPropData } from './utils'
-import mkdirp from 'mkdirp'
-import { parseSassVariables } from './helpers/sass'
-
-export default async (json: string) => {
-  const { componentName, componentProps, locales, outPath } = JSON.parse(json)
 
+export default async (componentName: string) => {
   console.log(componentName)
 
   try {
-    const componentData = await generateComponentDataFromTypes(componentName)
-
-    const sources = addPropData(componentName, componentData as any, componentProps)
-
-    await addDescriptions(componentName, componentData as any, locales, sources)
-
-    const sass = parseSassVariables(componentName)
-
-    await mkdirp(outPath)
-
-    const component = { displayName: componentName, fileName: kebabCase(componentName), ...componentData, sass }
-
-    await fs.writeFile(path.resolve(outPath, `${componentName}.json`), JSON.stringify(component, null, 2))
-
-    return component
+    return await generateComponentDataFromTypes(componentName)
   } catch (err) {
     console.error(`${componentName}: ${err}`, err.stack)
     return null

packages/docs/.env.example

@@ -6,7 +6,6 @@ PORT=8080
 # Cosmic.js
 VITE_COSMIC_BUCKET_READ_KEY=
 VITE_COSMIC_BUCKET_SLUG=
-VITE_COSMIC_BUCKET_WRITE_KEY=
 
 VITE_COSMIC_BUCKET_SLUG_STORE=
 VITE_COSMIC_BUCKET_READ_KEY_STORE=
@@ -19,4 +18,3 @@ VITE_EMAILJS_PUBLIC_KEY=
 # Auth0
 VITE_AUTH0_DOMAIN=
 VITE_AUTH0_CLIENT_ID=
-VITE_AUTH0_CLIENT_SECRET=

packages/docs/build/markdown-it.ts

@@ -44,46 +44,57 @@ const validate = ajv.compile({
   type: 'object',
   additionalProperties: false,
   properties: {
-    nav: { type: 'string' },
-    layout: { type: 'string' },
     meta: {
       type: 'object',
       additionalProperties: false,
       properties: {
-        title: { type: 'string' },
-        description: { type: 'string' },
-        keywords: { type: 'string' },
+        nav: { type: 'string' }, // Title used in navigation links
+        title: { type: 'string' }, // SEO title
+        description: { type: 'string' }, // SEO description
+        keywords: { type: 'string' }, // SEO keywords
       },
     },
+    layout: { type: 'string' },
     related: {
       type: 'array',
       maxItems: 3,
       uniqueItems: true,
-      items: { type: 'string' },
+      items: { type: 'string' }, // Absolute paths to related pages
     },
     assets: {
       type: 'array',
       uniqueItems: true,
-      items: { type: 'string' },
+      items: { type: 'string' }, // Additional stylesheets to load
     },
-    disabled: { type: 'boolean' },
-    emphasized: { type: 'boolean' },
+    disabled: { type: 'boolean' }, // The page is not published
+    emphasized: { type: 'boolean' }, // The page is emphasized in the navigation
   },
 })
 
-export const parseMeta = (componentPath: string) => {
+export function parseMeta (componentPath: string, locale: string) {
   const str = fs.readFileSync(path.resolve(componentPath.slice(1)), { encoding: 'utf-8' })
   const { attributes, body } = fm(str)
 
   const valid = validate(attributes)
-  if (!valid) {
+  if (!valid && locale !== 'eo-UY') {
     throw new Error(`\nInvalid frontmatter: ${componentPath}` + validate.errors!.map(error => (
       `\n  | Property ${error.instancePath} ${error.message}`
     )).join())
   }
 
   const { meta, ...rest } = attributes as any
 
+  if (locale !== 'en') {
+    const original = parseMeta(componentPath.replace(`/${locale}/`, '/en/'), 'en')
+    Object.assign(rest, {
+      layout: original.layout,
+      related: original.related,
+      assets: original.assets,
+      disabled: original.disabled,
+      emphasized: original.emphasized,
+    })
+  }
+
   return {
     ...rest,
     ...meta,

packages/docs/src/App.vue

@@ -42,6 +42,18 @@
     title: computed(() => meta.value.title),
     meta: computed(() => meta.value.meta),
     link: computed(() => meta.value.link),
+    script: computed(() => {
+      return route.meta.locale === 'eo-UY' ? [
+        {
+          type: 'text/javascript',
+          innerHTML: `let _jipt = [['project', 'vuetify']];`,
+        },
+        {
+          type: 'text/javascript',
+          src: '//cdn.crowdin.com/jipt/jipt.js',
+        },
+      ] : []
+    }),
   })
 
   onBeforeMount(() => {

packages/docs/src/components/api/ApiTable.vue

@@ -30,11 +30,14 @@
 
           <tr v-if="item.description || (DEV && item.source)">
             <td colspan="3" class="text-mono pt-4">
-              <app-markdown
-                v-if="item.description"
-                :content="item.description"
-                class="mb-0"
-              />
+              <template v-if="item.description">
+                <app-markdown
+                  v-if="localeStore.locale !== 'eo-UY'"
+                  :content="item.description"
+                  class="mb-0"
+                />
+                <span v-else>{{ item.description }}</span>
+              </template>
 
               <p v-if="DEV && item.source">
                 <strong>source: {{ item.source }}</strong>
@@ -53,6 +56,7 @@
 
   // Utilities
   import { PropType } from 'vue'
+  import { useLocaleStore } from '@/store/locale'
 
   defineProps({
     headers: {
@@ -66,6 +70,7 @@
   })
 
   const { current: theme } = useTheme()
+  const localeStore = useLocaleStore()
 
   const DEV = import.meta.env.DEV
 </script>

packages/docs/src/components/app/bar/LanguageMenu.vue

@@ -1,7 +1,6 @@
 <template>
   <app-menu
     key="language-menu"
-    :close-on-content-click="false"
     :open-on-hover="false"
     :items="items"
   >

packages/docs/src/components/getting-started/WireframeExamples.vue

@@ -8,9 +8,7 @@
       lg="4"
     >
       <router-link
-        :to="{
-          name: `wireframes-${wireframe}`
-        }"
+        :to="rpath(`/wireframes/${wireframe}/`)"
         class="text-decoration-none"
         rel="nofollow noopener"
         target="_blank"
@@ -30,6 +28,7 @@
 <script setup>
   // Utilities
   import kebabCase from 'lodash/kebabCase'
+  import { rpath } from '@/util/routes'
 
   const wireframes = [
     'Baseline',

packages/docs/src/components/home/ActionBtns.vue

@@ -22,6 +22,7 @@
 <script setup>
   // Composables
   import { useI18n } from 'vue-i18n'
+  import { rpath } from '@/util/routes'
 
   const { t } = useI18n()
 
@@ -31,18 +32,14 @@
       flat: true,
       icon: 'mdi-speedometer',
       text: 'home.get-started',
-      to: {
-        name: 'getting-started-installation',
-      },
+      to: rpath('/getting-started/installation/'),
     },
     {
       color: 'primary',
       icon: '$vuetify',
       variant: 'outlined',
       text: 'home.why-vuetify',
-      to: {
-        name: 'introduction-why-vuetify',
-      },
+      to: rpath('/introduction/why-vuetify/'),
     },
     {
       color: '#212121',

packages/docs/src/i18n/locales.json

@@ -14,7 +14,7 @@
     "title": "简体中文",
     "locale": "zh-CN",
     "alternate": "zh-Hans",
-    "enabled": false
+    "enabled": true
   },
   {
     "title": "Deutsch",
@@ -43,6 +43,6 @@
   {
     "title": "Help translate",
     "locale": "eo-UY",
-    "enabled": false
+    "enabled": true
   }
 ]