Merge pull request #1553 from transloadit/docs/locale-packs

Docs: locale packs

website/inject.js

@@ -8,6 +8,8 @@ const gzipSize = require('gzip-size')
 const bytes = require('pretty-bytes')
 const browserify = require('browserify')
 const touch = require('touch')
+const glob = require('glob')
+const LocaleCode = require('locale-code')
 
 const webRoot = __dirname
 const uppyRoot = path.join(__dirname, '../packages/uppy')
@@ -174,6 +176,38 @@ async function injectMarkdown () {
   touch(path.join(webRoot, `/src/support.md`))
 }
 
+function injectLocaleList () {
+  const mdTable = [
+    `<!-- WARNING! This file was automatically injected. Please run "${path.basename(__filename)}" to re-generate -->\n\n`,
+    '| Language        | NPM                | CDN                 | Source on GitHub |',
+    '| --------------- | ------------------ | ------------------- | ---------------- |'
+  ]
+  const mdRows = []
+
+  const localePackagePath = path.join(localesRoot, 'src', '*.js')
+  let localePackageVersion = require(path.join(localesRoot, 'package.json')).version
+  // @TODO: remove next line when upload-to-cdn is updated
+  localePackageVersion = '1.0.0'
+
+  glob.sync(localePackagePath).forEach((localePath) => {
+    const localeName = path.basename(localePath, '.js')
+    const localeNameWithDash = localeName.replace('_', '-')
+    const languageName = LocaleCode.getLanguageName(localeNameWithDash)
+    const countryName = LocaleCode.getCountryName(localeNameWithDash)
+    const npmPath = `<code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/${localeName}</code>`
+    const cdnPath = `[\`${localeName}.min.js\`](https://transloadit.edgly.net/releases/uppy/v${localePackageVersion}/locales/${localeName}.min.js)`
+    const githubSource = `[\`${localeName}.js\`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/${localeName}.js)`
+    const mdTableRow = `| ${languageName}<br/> <small>(${countryName})</small> | ${npmPath} | ${cdnPath} | ✏️ ${githubSource} |`
+    mdRows.push(mdTableRow)
+  })
+
+  const resultingMdTable = mdTable.concat(mdRows.sort()).join('\n')
+
+  let dstpath = path.join(webRoot, 'src', '_template', 'list_of_locale_packs.md')
+  fs.writeFileSync(dstpath, resultingMdTable, 'utf-8')
+  console.info(chalk.green(`✓ injected: `), chalk.grey(dstpath))
+}
+
 async function readConfig () {
   try {
     const buf = await promisify(fs.readFile)(configPath, 'utf8')
@@ -190,6 +224,8 @@ async function inject () {
 
   await injectMarkdown()
 
+  injectLocaleList()
+
   config.uppy_version = version
   config.uppy_version_anchor = version.replace(/[^\d]+/g, '')
   await injectSizes(config)

website/package-lock.json

@@ -4808,6 +4808,30 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
     },
+    "iso-3166-1-alpha-2": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/iso-3166-1-alpha-2/-/iso-3166-1-alpha-2-1.0.0.tgz",
+      "integrity": "sha1-vJ4LuU5YTfVGipMpl6KFUuJvl6w=",
+      "dev": true,
+      "requires": {
+        "mout": "^0.11.0"
+      }
+    },
+    "iso-639-1": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.0.5.tgz",
+      "integrity": "sha512-2TcJ8AcsqM4AXLi92eFZX3xa7X6Eno/chq9yOR0AvSgb15Smmoh1miXyYJVWCkSmbzDimds3Ix2M4efhnOuxOg==",
+      "dev": true
+    },
+    "iso-639-1-zh": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/iso-639-1-zh/-/iso-639-1-zh-2.0.4.tgz",
+      "integrity": "sha1-YbV30U7osMLI5zaXo8iU/gLb1UE=",
+      "dev": true,
+      "requires": {
+        "iso-639-1": "^2.0.0"
+      }
+    },
     "isobject": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
@@ -4976,6 +5000,16 @@
         "strip-bom": "^2.0.0"
       }
     },
+    "locale-code": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/locale-code/-/locale-code-2.0.2.tgz",
+      "integrity": "sha512-wNcUMwk6Nlc10pnZZXWtKArAOZHhH8p2vohPEIENg7ImwMrib/CwKSvyV4g9Wm7KjylyHzXnEMz4i/W3w57wlw==",
+      "dev": true,
+      "requires": {
+        "iso-3166-1-alpha-2": "~1.0.0",
+        "iso-639-1-zh": "^2.0.4"
+      }
+    },
     "localtunnel": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/localtunnel/-/localtunnel-1.9.1.tgz",
@@ -5409,6 +5443,12 @@
         "on-headers": "~1.0.1"
       }
     },
+    "mout": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/mout/-/mout-0.11.1.tgz",
+      "integrity": "sha1-ujYR318OWx/7/QEWa48C0fX6K5k=",
+      "dev": true
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",

website/package.json

@@ -9,7 +9,7 @@
     "autoprefixer": "^7.2.6",
     "cssnano": "^3.10.0",
     "he": "^1.1.1",
-    "hexo": "^3.7.1",
+    "hexo": "3.8.0",
     "hexo-browsersync": "^0.3.0",
     "hexo-filter-github-emojis": "^2.0.0",
     "hexo-generator-alias": "^0.1.3",
@@ -39,6 +39,7 @@
     "browserify": "^16.2.2",
     "chalk": "^2.4.1",
     "glob": "^7.1.2",
+    "locale-code": "^2.0.2",
     "mdast-util-inject": "1.1.0",
     "multi-glob": "^1.0.2",
     "node-notifier": "^5.2.1",

website/src/_template/list_of_locale_packs.md

@@ -0,0 +1,14 @@
+<!-- WARNING! This file was automatically injected. Please run "inject.js" to re-generate -->
+
+
+| Language        | NPM                | CDN                 | Source on GitHub |
+| --------------- | ------------------ | ------------------- | ---------------- |
+| Chinese<br/> <small>(China)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/zh_CN</code> | [`zh_CN.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/zh_CN.min.js) | ✏️ [`zh_CN.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/zh_CN.js) |
+| Dutch<br/> <small>(Netherlands)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/nl_NL</code> | [`nl_NL.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/nl_NL.min.js) | ✏️ [`nl_NL.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/nl_NL.js) |
+| English<br/> <small>(United States)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/en_US</code> | [`en_US.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/en_US.min.js) | ✏️ [`en_US.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/en_US.js) |
+| French<br/> <small>(France)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/fr_FR</code> | [`fr_FR.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/fr_FR.min.js) | ✏️ [`fr_FR.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/fr_FR.js) |
+| German<br/> <small>(Germany)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/de_DE</code> | [`de_DE.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/de_DE.min.js) | ✏️ [`de_DE.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/de_DE.js) |
+| Italian<br/> <small>(Italy)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/it_IT</code> | [`it_IT.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/it_IT.min.js) | ✏️ [`it_IT.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/it_IT.js) |
+| Persian<br/> <small>(Iran, Islamic Republic of)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/fa_IR</code> | [`fa_IR.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/fa_IR.min.js) | ✏️ [`fa_IR.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/fa_IR.js) |
+| Russian<br/> <small>(Russian Federation)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/ru_RU</code> | [`ru_RU.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/ru_RU.min.js) | ✏️ [`ru_RU.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/ru_RU.js) |
+| Spanish<br/> <small>(Spain)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/es_ES</code> | [`es_ES.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/es_ES.min.js) | ✏️ [`es_ES.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/es_ES.js) |

website/src/docs/locales.md

@@ -0,0 +1,85 @@
+---
+type: docs
+order: 6
+title: "Locale Packs"
+permalink: docs/locales/
+category: 'Docs'
+body_class: 'page-docs-locales'
+---
+
+Uppy speaks multiple languages, English being the default. You can use a locale pack to translate Uppy into your language of choice.
+
+[List of our locale packs](#List-of-locale-packs)
+
+## Using a locale pack from npm
+
+This is the recommded way. Install `@uppy/locales` package from npm, then [choose the locale](#List-of-locale-packs) you’d like to use: `@uppy/locales/lib/LANGUAGE_CODE`.
+
+```bash
+npm i @uppy/core @uppy/locales
+```
+
+```js
+const Uppy = require('@uppy/core')
+const German = require('@uppy/locales/lib/de_DE') // see below for the full list of locales
+const uppy = Uppy({
+  debug: true,
+  locale: German
+})
+```
+
+## Using a locale pack from CDN
+
+Add a `<script>` tag with Uppy bundle and the locale pack you’d like to use. You can copy/paste the link from the CDN column in the [locales table](#List-of-locale-packs). The locale will attach itself to the `Uppy.locales` object.
+
+```html
+<script src="https://transloadit.edgly.net/releases/uppy/v1.0.0/uppy.min.js"></script>
+<script src="https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/de_DE.min.js"></script>
+
+<script>
+var uppy = Uppy.Core({
+  debug: true,
+  locale: Uppy.locales.de_DE
+})
+</script>
+```
+
+## Overriding locale strings for a specific plugin
+
+Many plugins come with their own locale strings, and the packs we provide consist of most of those strings. You can, however, override a locale string for a specific plugin, regardless of whether you are using locale pack or not. See the plugin documentation for the list of locale strings it uses (for example, [here’s Dashboard](http://localhost:4000/docs/dashboard/#locale)).
+
+```js
+const Uppy = require('@uppy/core')
+const DragDrop = require('@uppy/drag-drop')
+const Russian = require('@uppy/locales/lib/ru_RU')
+const uppy = Uppy({
+  debug: true,
+  autoProceed: true,
+  locale: Russian
+})
+uppy.use(DragDrop, {
+  target: '.UppyDragDrop',
+  // We are using the ru_RU locale pack (set above in Uppy options),
+  // but you can also override specific strings like so:
+  locale: {
+    strings: {
+      browse: 'выберите ;-)'
+    }
+  }
+})
+
+```
+
+## List of locale packs
+
+<!-- md list_of_locale_packs.md -->
+
+## Contributing a new language
+
+If you speak a language we don’t yet support, you can contribute! Here’s how you do it:
+
+1. Go to the [uppy/locales](https://github.com/transloadit/uppy/tree/master/packages/%40uppy/locales/src) directory in the Uppy GitHub repo.
+2. Go to `en_US.js` and copy its contents, as English is the most up-to-date locale.
+3. Press “Create new file”, name it according to the [`language_COUNTRY` format](http://www.i18nguy.com/unicode/language-identifiers.html), make sure to use underscore `_` as a divider. Examples: `en_US`, `en_GB`, `ru_RU`, `ar_AE`.
+4. Paste what you’ve copied from `en_US.js` and use it as a starting point to translate strings into your language.
+5. When you are ready, save the file — this should create a PR that we’ll then review 🎉 Thanks!

website/themes/uppy/layout/layout.ejs

@@ -37,7 +37,7 @@ if (page.series) {
     <%- css('css/main').replace('.css', '.css?version=2') %>
     <!-- ^-- poor man's solution to css cache busting. bump the version when there's something new we really want users to see -->
   </head>
-  <body class="<%= isIndex ? 'page-index' : 'page-inner' %>">
+  <body class="<%= isIndex ? 'page-index' : 'page-inner' %> <%= page.body_class %>">
     <div class="page">
       <div class="TransloaditBar">
         <a class="TransloaditBar-logo" href="https://transloadit.com/" target="_blank" rel="noopener noreferrer">

website/themes/uppy/layout/partials/generated_stargazers.ejs

@@ -1 +1 @@
-19157
+19174

website/themes/uppy/source/css/_page.scss

@@ -176,17 +176,19 @@
   }
 
   table {
+    width: 100%;
+    text-align: left;
     display: block;
     font-size: 85%;
     border-spacing: 10px;
     overflow-x: auto;
-    // white-space: nowrap;
   }
 
-  // table td,
-  // table th {
-  //   padding-right: 30px;
-  // }
+  table td { 
+    vertical-align: top;
+    padding: 8px;
+    border-bottom: 1px solid #eee;
+  }
 
   .light {
     color: $color-light;
@@ -347,16 +349,14 @@
       font-size: 14px;
     }
   }
+}
 
-  table {
-    width: 100%;
-    text-align: left;
-    td {
-      vertical-align: top;
-      padding: 8px;
-      border-bottom: 1px solid #eee;
-    }
-  }
+.page-docs-locales table td {
+  white-space: nowrap;
+}
+
+.page-docs-locales table code {
+  font-size: 75%;
 }
 
 .PostAuthor:first-of-type {