Improve how we render locale variants (#1614)

website/inject.js

@@ -179,7 +179,7 @@ async function injectMarkdown () {
 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 |',
+    '| %count% Locales | NPM                | CDN                 | Source on GitHub |',
     '| --------------- | ------------------ | ------------------- | ---------------- |'
   ]
   const mdRows = []
@@ -191,7 +191,7 @@ function injectLocaleList () {
 
   glob.sync(localePackagePath).forEach((localePath) => {
     const localeName = path.basename(localePath, '.js')
-    let localeNameWithDash = localeName.replace('_', '-')
+    let localeNameWithDash = localeName.replace(/_/g, '-')
 
     const parts = localeNameWithDash.split('-')
     let variant = ''
@@ -207,11 +207,11 @@ function injectLocaleList () {
     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}${variant ? `, ${variant}` : ''})</small> | ${npmPath} | ${cdnPath} | ✏️ ${githubSource} |`
+    const mdTableRow = `| ${languageName}<br/> <small>${countryName}</small>${variant ? `<br /><small>(${variant})</small>` : ''} | ${npmPath} | ${cdnPath} | ✏️ ${githubSource} |`
     mdRows.push(mdTableRow)
   })
 
-  const resultingMdTable = mdTable.concat(mdRows.sort()).join('\n')
+  const resultingMdTable = mdTable.concat(mdRows.sort()).join('\n').replace('%count%', mdRows.length)
 
   let dstpath = path.join(webRoot, 'src', '_template', 'list_of_locale_packs.md')
   fs.writeFileSync(dstpath, resultingMdTable, 'utf-8')

website/src/_template/list_of_locale_packs.md

@@ -1,17 +1,18 @@
 <!-- WARNING! This file was automatically injected. Please run "inject.js" to re-generate -->
 
 
-| Language        | NPM                | CDN                 | Source on GitHub |
+| 13 Locales | 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) |
-| Chinese<br/> <small>(Taiwan, Province of China)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/zh_TW</code> | [`zh_TW.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/zh_TW.min.js) | ✏️ [`zh_TW.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/zh_TW.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) |
-| Hungarian<br/> <small>(Hungary)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/hu_HU</code> | [`hu_HU.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/hu_HU.min.js) | ✏️ [`hu_HU.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/hu_HU.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>(Greenland)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/es_GL</code> | [`es_GL.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/es_GL.min.js) | ✏️ [`es_GL.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/es_GL.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) |
+| 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) |
+| Chinese<br/> <small>Taiwan, Province of China</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/zh_TW</code> | [`zh_TW.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/zh_TW.min.js) | ✏️ [`zh_TW.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/zh_TW.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) |
+| Hungarian<br/> <small>Hungary</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/hu_HU</code> | [`hu_HU.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/hu_HU.min.js) | ✏️ [`hu_HU.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/hu_HU.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) |
+| Serbian<br/> <small>Serbia</small><br /><small>(Latin)</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/sr_RS_Latin</code> | [`sr_RS_Latin.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/sr_RS_Latin.min.js) | ✏️ [`sr_RS_Latin.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/sr_RS_Latin.js) |
+| Spanish<br/> <small>Greenland</small> | <code><a href="https://www.npmjs.com/package/@uppy/locales">@uppy/locales</a>/lib/es_GL</code> | [`es_GL.min.js`](https://transloadit.edgly.net/releases/uppy/v1.0.0/locales/es_GL.min.js) | ✏️ [`es_GL.js`](https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/es_GL.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

@@ -80,6 +80,6 @@ If you speak a language we don’t yet support, you can contribute! Here’s how
 
 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`.
+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`. Variants should be trailing, e.g.: `sr_RS_Latin` for Serbian Latin vs Cyrillic.
 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/source/css/_page.scss

@@ -351,10 +351,13 @@
   }
 }
 
+.page-docs-locales table {
+  overflow: visible;
+}
 .page-docs-locales table td {
   white-space: nowrap;
+  font-size: 90%;
 }
-
 .page-docs-locales table code {
   font-size: 75%;
 }