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/footer.js

@@ -12,7 +12,7 @@ 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
@@ -55,22 +55,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 +86,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 +97,7 @@ const Footer = React.memo((prop) => {
               className="dropdown-item"
             >
               简体中文
-              {!langSwitchable && locale === 'en' && (
+              {locale !== 'zh' && !switchableLangs['zh'] && (
                 <span className="tooltiptext">
                   <FormattedMessage
                     id={
@@ -118,6 +109,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])
 

src/data/footer.js

@@ -220,4 +220,108 @@ const footerColumnsEn = [
   },
 ]
 
-export { footerColumnsZh, footerColumnsEn }
+const footerColumnsJa = [
+  {
+    name: 'Open Source Ecosystem',
+    items: [
+      {
+        name: 'TiDB',
+        link: 'https://pingcap.com/products/tidb',
+        linkType: 'outBoundLink',
+      },
+      {
+        name: 'TiKV',
+        link: 'https://github.com/tikv/tikv',
+        linkType: 'outBoundLink',
+      },
+      {
+        name: 'TiSpark',
+        link: 'https://github.com/pingcap/tispark',
+        linkType: 'outBoundLink',
+      },
+      {
+        name: 'Chaos Mesh®',
+        link: 'https://github.com/pingcap/chaos-mesh',
+        linkType: 'outBoundLink',
+      },
+    ],
+  },
+  {
+    name: 'Resources',
+    items: [
+      {
+        name: 'Quick Start',
+        link: '/tidb/stable/quick-start-with-tidb',
+        linkType: 'innerLink',
+      },
+      {
+        name: 'Documentation',
+        link: '/tidb/stable',
+        linkType: 'innerLink',
+      },
+      {
+        name: 'Blog',
+        link: 'https://pingcap.com/blog',
+        linkType: 'outBoundLink',
+      },
+      {
+        name: 'Community',
+        link: 'https://pingcap.com/community',
+
+        linkType: 'outBoundLink',
+      },
+      {
+        name: 'GitHub',
+        link: 'https://github.com/pingcap',
+        linkType: 'outBoundLink',
+      },
+    ],
+  },
+  {
+    name: 'Use Cases',
+    items: [
+      {
+        name: 'Internet',
+        link: 'https://pingcap.com/case-studies/Internet',
+        linkType: 'outBoundLink',
+      },
+      {
+        name: 'Gaming',
+        link: 'https://pingcap.com/case-studies/Gaming',
+        linkType: 'outBoundLink',
+      },
+      {
+        name: 'Financial services',
+        link: 'https://pingcap.com/case-studies/Financial-Services',
+        linkType: 'outBoundLink',
+      },
+    ],
+  },
+  {
+    name: 'Company',
+    items: [
+      {
+        name: 'About',
+        link: 'https://pingcap.com/about',
+        linkType: 'outBoundLink',
+      },
+      {
+        name: 'Careers',
+        link: 'https://pingcap.com/careers',
+        linkType: 'outBoundLink',
+      },
+      {
+        name: 'Legal',
+        link: 'https://pingcap.com/legal',
+        linkType: 'outBoundLink',
+      },
+      {
+        name: 'Contact',
+        link: 'https://pingcap.com/contact-us',
+        linkType: 'outBoundLink',
+      },
+    ],
+  },
+]
+
+export { footerColumnsZh, footerColumnsEn, footerColumnsJa }

src/intl/index.js

@@ -1,9 +1,11 @@
 import en from './en.json'
 import zh from './zh.json'
+import ja from './ja.json'
 
 const langMap = {
   en,
   zh,
+  ja,
 }
 
 export default langMap