chore: add ja app dev docs

create-pages/doc.js

@@ -8,6 +8,8 @@ const {
   genVersionChunks,
 } = require('./utils')
 
+const languages = ['en', 'zh', 'ja']
+
 const createDocs = async ({ graphql, createPage, createRedirect }) => {
   const docTemplate = path.resolve(`${__dirname}/../src/templates/doc.js`)
 
@@ -69,6 +71,35 @@ const createDocs = async ({ graphql, createPage, createRedirect }) => {
     }
   `)
 
+  const docsJa = await graphql(`
+    query {
+      allMdx(
+        filter: {
+          fields: { langCollection: { eq: "markdown-pages/contents/ja" } }
+          fileAbsolutePath: { regex: "/^(?!.*TOC).*$/" }
+          frontmatter: { draft: { ne: true } }
+        }
+      ) {
+        nodes {
+          id
+          fields {
+            langCollection
+          }
+          frontmatter {
+            aliases
+          }
+          parent {
+            ... on File {
+              relativeDirectory
+              relativePath
+              base
+            }
+          }
+        }
+      }
+    }
+  `)
+
   // create pages for different language docs
   function _createDocs(docs, locale, pathPrefix = '') {
     const nodes = docs.data.allMdx.nodes
@@ -83,12 +114,23 @@ const createDocs = async ({ graphql, createPage, createRedirect }) => {
       const _fullPath = `${replacePath(relativeDir, base)}`
       const fullPath = `${pathPrefix}${_fullPath}`
       node.path = fullPath
-      const filePathInDiffLang = path.resolve(
-        `${__dirname}/../markdown-pages/contents${
-          locale === 'en' ? '/zh/' : '/en/'
-        }${relativePath}`
-      )
-      node.langSwitchable = fs.existsSync(filePathInDiffLang) ? true : false
+      const switchableLangs = {}
+
+      languages.forEach((lang) => {
+        if (locale != lang) {
+          const filePathInDiffLang = path.resolve(
+            `${__dirname}/../markdown-pages/contents/${lang}/${relativePath}`
+          )
+
+          iSSwitchable = fs.existsSync(filePathInDiffLang) ? true : false
+
+          switchableLangs[lang] = iSSwitchable
+        } else {
+          switchableLangs[lang] = true
+        }
+      })
+
+      node.switchableLangs = switchableLangs
       const vChunks = genVersionChunks(_fullPath)
       node.version = vChunks[0]
       node.pathWithoutVersion = vChunks[1]
@@ -115,7 +157,7 @@ const createDocs = async ({ graphql, createPage, createRedirect }) => {
         pathPrefix,
         tocPath,
         parent,
-        langSwitchable,
+        switchableLangs,
       } = node
       createPage({
         path: path,
@@ -131,7 +173,7 @@ const createDocs = async ({ graphql, createPage, createRedirect }) => {
           downloadURL,
           fullPath: path,
           versions: versionsMap[node.pathWithoutVersion],
-          langSwitchable,
+          switchableLangs,
         },
       })
 
@@ -152,6 +194,7 @@ const createDocs = async ({ graphql, createPage, createRedirect }) => {
 
   _createDocs(docsEn, 'en')
   _createDocs(docsZh, 'zh', '/zh')
+  _createDocs(docsJa, 'ja', '/ja')
 }
 
 module.exports = createDocs

create-pages/intl.js

@@ -35,6 +35,17 @@ const createIntlPages = ({ page, actions }) => {
       },
     })
   )
+
+  if (pagePath === '/search/') {
+    createPage({
+      ...page,
+      path: `/ja${pagePath}`,
+      context: {
+        ...page.context,
+        locale: 'ja',
+      },
+    })
+  }
 }
 
 module.exports = createIntlPages

gatsby-config.js

@@ -40,6 +40,13 @@ module.exports = {
         path: `${__dirname}/markdown-pages/contents/zh`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `markdown-pages/contents/ja`,
+        path: `${__dirname}/markdown-pages/contents/ja`,
+      },
+    },
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
@@ -87,7 +94,7 @@ module.exports = {
       resolve: `gatsby-plugin-sitemap`,
       options: {
         output: `/sitemap.xml`,
-        exclude: ['/404', '/zh/404', '/search', '/zh/search'],
+        exclude: ['/404', '/zh/404', '/search', '/zh/search', '/jp/search'],
       },
     },
     {

markdown-pages/cli.js

@@ -179,7 +179,7 @@ function main(argv) {
           ref,
           path: path,
         },
-        `${__dirname}/contents/${path}/docs-appdev/${ref}`,
+        `${__dirname}/contents/${path}/docs-appdev/master`,
         [
           () => createReplaceImagePathStream(DEV_GUIDE_IMAGE_CDN_URL),
           () => createReplaceCopyableStream(),

package.json

@@ -102,6 +102,7 @@
     "download:docs-appdev:all": "./scripts/download-docs-appdev.sh",
     "download:docs-appdev:zh:all": "./scripts/download-docs-appdev-zh.sh",
     "download:docs-appdev:en:all": "./scripts/download-docs-appdev-en.sh",
+    "download:docs-appdev:ja:all": "./scripts/download-docs-appdev-ja.sh",
     "sync": "node markdown-pages/cli.js sync"
   },
   "lint-staged": {

scripts/download-docs-appdev-ja.sh

@@ -0,0 +1 @@
+yarn download:docs-appdev ja add-tdds-documents

scripts/download-docs-appdev.sh

@@ -1,2 +1,3 @@
-yarn download:docs-appdev zh
-yarn download:docs-appdev en
+yarn download:docs-appdev zh add-tdds-documents
+yarn download:docs-appdev en add-tdds-documents
+yarn download:docs-appdev ja add-tdds-documents

src/components/IntlLink.js

@@ -6,7 +6,11 @@ import { useIntl } from 'react-intl'
 const IntlLink = ({ to, children, type, ...rest }) => {
   const intl = useIntl()
 
-  const localeTo = `${intl.locale === 'en' ? '' : '/' + intl.locale}${to}`
+  const localeTo = `${
+    (intl.locale === 'ja' && to === '/appdev/dev') || intl.locale === 'zh'
+      ? '/' + intl.locale
+      : ''
+  }${to}`
   const linkType = type
 
   return (

src/components/footer.js

@@ -5,17 +5,26 @@ import AddIcon from '@material-ui/icons/Add'
 import LanguageIcon from '@material-ui/icons/Language'
 import Socials from './socials'
 import IntlLink from '../components/IntlLink'
-import { footerColumnsZh, footerColumnsEn } from '../data/footer'
+import {
+  footerColumnsZh,
+  footerColumnsEn,
+  footerColumnsJa,
+} from '../data/footer'
 import { useLocation } from '@reach/router'
 import { useSelector } from 'react-redux'
 import { FormattedMessage } from 'react-intl'
 
 const Footer = React.memo((prop) => {
   const locale = prop.locale
-  const langSwitchable = prop.langSwitchable
+  const switchableLangs = prop.switchableLangs
   const location = useLocation()
   const currentPathname = location.pathname
-  const footerColumns = locale === 'zh' ? footerColumnsZh : footerColumnsEn
+  const footerColumns =
+    locale === 'en'
+      ? footerColumnsEn
+      : locale === 'zh'
+      ? footerColumnsZh
+      : footerColumnsJa
 
   const { FooterLogoSVG } = useStaticQuery(
     graphql`
@@ -55,22 +64,13 @@ const Footer = React.memo((prop) => {
 
     const switchToLang = (lang) => {
       let currentPathnameArr = currentPathname.split('/')
-      let preLang
-      switch (lang) {
-        case 'zh':
-          preLang = '/zh'
-          break
-
-        case 'en':
-          preLang = ''
-          currentPathnameArr.splice(1, 1)
-          break
-
-        default:
-          break
+
+      const preLang = lang === 'en' ? '' : lang
+      if (locale !== 'en') {
+        currentPathnameArr.splice(1, 1)
       }
 
-      return langSwitchable
+      return switchableLangs[lang]
         ? preLang + currentPathnameArr.join('/')
         : docInfo.type === 'tidbcloud'
         ? preLang + '/tidb/stable/'
@@ -95,7 +95,7 @@ const Footer = React.memo((prop) => {
               className="dropdown-item"
             >
               English
-              {!langSwitchable && locale === 'zh' && (
+              {locale !== 'en' && !switchableLangs['en'] && (
                 <span className="tooltiptext">
                   <FormattedMessage id="langSwitchTip" />
                 </span>
@@ -106,7 +106,7 @@ const Footer = React.memo((prop) => {
               className="dropdown-item"
             >
               简体中文
-              {!langSwitchable && locale === 'en' && (
+              {locale !== 'zh' && !switchableLangs['zh'] && (
                 <span className="tooltiptext">
                   <FormattedMessage
                     id={
@@ -118,6 +118,19 @@ const Footer = React.memo((prop) => {
                 </span>
               )}
             </Link>
+            {docInfo.type === 'appdev' && (
+              <Link
+                to={locale === 'ja' ? currentPathname : switchToLang('ja')}
+                className="dropdown-item"
+              >
+                日本語
+                {locale !== 'ja' && !switchableLangs['ja'] && (
+                  <span className="tooltiptext">
+                    <FormattedMessage id="langSwitchTip" />
+                  </span>
+                )}
+              </Link>
+            )}
           </div>
         </div>
       </div>

src/components/layout.js

@@ -15,7 +15,7 @@ const Layout = ({
   locale,
   children,
   forbidResetDocInfo = false,
-  langSwitchable,
+  switchableLangs = { en: true, zh: true },
 }) => {
   const dispatch = useDispatch()
 
@@ -49,7 +49,7 @@ const Layout = ({
     <IntlProvider locale={locale} messages={flat(langMap[locale])}>
       <Navbar locale={locale} />
       <main>{children}</main>
-      <Footer locale={locale} langSwitchable={langSwitchable} />
+      <Footer locale={locale} switchableLangs={switchableLangs} />
     </IntlProvider>
   )
 }

src/components/navbar.js

@@ -36,9 +36,9 @@ const Navbar = (prop) => {
 
   useEffect(() => {
     const pageType =
-      locale === 'zh'
-        ? location.pathname.split('/')[2]
-        : location.pathname.split('/')[1]
+      locale === 'en'
+        ? location.pathname.split('/')[1]
+        : location.pathname.split('/')[2]
     setActiveNav(pageType)
   }, [locale, location.pathname])
 
@@ -107,7 +107,7 @@ const Navbar = (prop) => {
             </IntlLink>
 
             <IntlLink
-              to="/tools/"
+              to="/tools"
               className={`navbar-item with-main-section ${
                 (activeNav === 'tools' ||
                   activeNav === 'tidb-data-migration' ||
@@ -120,7 +120,7 @@ const Navbar = (prop) => {
             >
               <FormattedMessage id="navbar.tools" />
             </IntlLink>
-            {locale === 'en' && (
+            {locale !== 'zh' && (
               <IntlLink
                 to="/tidbcloud/public-preview"
                 className={`navbar-item with-main-section ${