docs: automatically generate i18n docs

README.md

@@ -77,18 +77,12 @@ picker.dataSource = '/my-emoji.json';
 
 #### i18n structure
 
-The default English (`"en"`) `i81n` object:
+Here is the default English `i81n` object (`"en"` locale):
+
+<!-- i18n options start -->
 
 ```json
 {
-  "emojiUnsupported": "Your browser does not support color emoji.",
-  "loading": "Loading…",
-  "networkError": "Could not load emoji. Try refreshing.",
-  "regionLabel": "Emoji picker",
-  "search": "Search",
-  "skinToneLabel": "Choose a skin tone",
-  "searchResultsLabel": "Search results",
-  "categoriesLabel": "Categories",
   "categories": {
     "smileys-emotion": "Smileys and emoticons",
     "people-body": "People and body",
@@ -99,11 +93,21 @@ The default English (`"en"`) `i81n` object:
     "objects": "Objects",
     "symbols": "Symbols",
     "flags": "Flags"
-  }
+  },
+  "categoriesLabel": "Categories",
+  "emojiUnsupported": "Your browser does not support color emoji.",
+  "loading": "Loading…",
+  "networkError": "Could not load emoji. Try refreshing.",
+  "regionLabel": "Emoji picker",
+  "search": "Search",
+  "searchResultsLabel": "Search results",
+  "skinToneLabel": "Choose a skin tone"
 }
 ```
 
-Note that some of these values are only visible to users of screen readers. 
+<!-- i18n options end -->
+
+Note that some of these strings are only visible to users of screen readers.
 But you should still support them if you internationalize your app!
 
 #### Styling

bin/generateI18nDocs.js

@@ -0,0 +1,30 @@
+import fs from 'fs'
+import { promisify } from 'util'
+const readFile = promisify(fs.readFile)
+const writeFile = promisify(fs.writeFile)
+
+const START_MARKER = '<!-- i18n options start -->'
+const END_MARKER = '<!-- i18n options end -->'
+
+// Take the current English i18n object and inject it into the README
+async function main () {
+  let readme = await readFile('./README.md', 'utf8')
+  const i18n = JSON.parse(await readFile('./src/picker/i18n/en.json', 'utf8'))
+  const startIndex = readme.indexOf(START_MARKER)
+  const endIndex = readme.indexOf(END_MARKER) + END_MARKER.length
+
+  const sortedI18n = Object.fromEntries(Object.entries(i18n).sort((a, b) => a[0] < b[0] ? -1 : 1))
+
+  readme = readme.substring(0, startIndex) +
+    START_MARKER + '\n\n```json\n' +
+    JSON.stringify(sortedI18n, null, 2) +
+    '\n```\n\n' + END_MARKER +
+    readme.substring(endIndex)
+
+  await writeFile('./README.md', readme, 'utf8')
+}
+
+main().catch(err => {
+  console.error(err)
+  process.exit(1)
+})

package.json

@@ -11,9 +11,10 @@
     "picker.js*"
   ],
   "scripts": {
-    "build": "run-s build:rollup build:css-docs",
+    "build": "run-s build:rollup build:css-docs build:i18n-docs",
     "build:rollup": "NODE_ENV=production rollup -c",
     "build:css-docs": "node ./bin/generateCssDocs",
+    "build:i18n-docs": "node ./bin/generateI18nDocs",
     "dev": "NODE_ENV=development rollup -c -w",
     "lint": "standard && stylelint '**/*.scss'",
     "lint:fix": "standard --fix && stylelint --fix '**/*.scss'",