mxskylar · mxskylar · May 6, 2025 · May 4, 2025 · May 4, 2025 · May 4, 2025
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,6 @@ node_modules
 build
 installed-resources
 installed-data
-.DS_Store
+.DS_Store
+dist
+assets
diff --git a/README.md b/README.md
@@ -1,17 +1,23 @@
 # Phlexicon
 
-Beginner-friendly phonetic keyboards for spoken & sign languages on desktop Mac, Windows, & Linux.
+A catalog of [phonemes](https://en.wikipedia.org/wiki/Phoneme) in hundreds of languages, dialects, and lexicons—both [signed](https://www.signwriting.org/about/) and [spoken](https://en.wikipedia.org/wiki/International_Phonetic_Alphabet).
 
-Type [phonemes](https://en.wikipedia.org/wiki/Phoneme) using the [International Phonetic Alphabet (IPA)](https://en.wikipedia.org/wiki/International_Phonetic_Alphabet)
-for spoken languages and [SignWriting](https://www.signwriting.org/about/) for sign languages.
-Choose from a list of phonemes used by a particular dialect or optionally, all phonemes in the IPA or SignWriting.
+![Demo of Phlexicon app](docs/demo.gif)
 
-The application is still under development and is only available for developers to build from scratch.
-The [user guide](https://mxskylar.github.io/phlexicon/) will be updated when Phlexicon is available for installation.
+See the [user guide](https://mxskylar.github.io/phlexicon/) for details about the app.
+Read the reast of this README for technical details.
 
 > Phlexicon would be nothing without the open source data and frameworks it depends on.
 > Read more about those [here](https://mxskylar.github.io/phlexicon/attribution).
 
+## Install
+
+Download the [latest release](https://github.com/mxskylar/phlexicon/releases/latest) for your operating system:
+
+- **macOS:** If your Mac uses an M1 chip, download an `arm64` file. Download either a `zip` or `dmg` file.
+- **Windows:** Download the `exe` installer.
+- **Linux:** Download an `rpm`, `deb`, `AppImage`, `pacman` file.
+
 ## Development
 
 Phlexicon is an [Electron](https://www.electronjs.org/) app built with [Node](https://nodejs.org/) `v23.10.0`.
@@ -103,10 +109,58 @@ npm run compile-react
 
 ---
 
+Creates the database from scratch, inserts data, transpiles Typescript into JavaScript, then bundles the application with [Webpack](https://webpack.js.org/).
+
+```bash
+npm run build
+```
+
+*Deletes cache?* **Yes**, deletes the bundle for the previous version of the app, if it exists, then re-creates it.
+
+---
+
 Launches the Electron application.
 
 ```bash
 npm run electron
 ```
 
-*Deletes cache?* **No**, launches the app using its existing bundle.
+*Deletes cache?* **No**, launches the app using its existing bundle.
+
+---
+
+Packages app distribution for macOS. Only works when run on macOS.
+
+```bash
+npm run dist-mac
+```
+
+*Deletes cache?* **Partially**, replaces files for previous app macOS distribution, if they exist.
+
+---
+
+Packages app distribution for Windows.
+
+```bash
+./electron-builder-docker win
+npm run dist-win
+```
+
+These commands may give the following, expected error while still succeeding to package the app for Windows.
+
+```
+0024:err:environ:run_wineboot failed to start wineboot 1
+```
+
+*Deletes cache?* **Partially**, replaces files for previous app Windows distributions, if they exist.
+
+---
+
+Packages app distribution for Linux.
+
+```bash
+./electron-builder-docker linux
+npm run dist-linux
+```
+
+*Deletes cache?* **Partially**, replaces files for previous app Linux distributions, if they exist.
diff --git a/ci/app/init.ts b/ci/app/init.ts
@@ -1,5 +1,5 @@
 import * as fs from 'fs';
-import { BUILD_DIR, DATABASE_FILE_PATH } from '../../src/build-constants';
+import { ASSETS_DIR, BUILD_DIR, DATABASE_RELATIVE_FILE_PATH } from '../../src/build-constants';
 import { Database } from '../../src/db/database';
 import {
     CONSONANTS_TABLE,
@@ -32,8 +32,9 @@ import { SpokenDialectParser } from './spoken/spoken-dialect-parser';
 import { SignWritingFontParser } from './sign/sign-writing-font-parser';
 import { SignPhonemeParser } from './sign/sign-phoneme-parser';
 
-// STEP 1: Prep the build directory
+// STEP 1: Prep the build & assets directories
 recreateDirectory(BUILD_DIR);
+recreateDirectory(ASSETS_DIR);
 
 // Installed Resources
 console.log(`Copying contents of ${INSTALLED_RESOURCES_DIR} to ${BUILD_DIR}`);
@@ -45,8 +46,8 @@ console.log(`Copying contents of ${CUSTOM_RESOURCES_DIR} to ${BUILD_DIR}`);
 fs.cpSync(CUSTOM_RESOURCES_DIR, BUILD_DIR, {recursive: true});
 
 // Database
-console.log(`Creating database: ${DATABASE_FILE_PATH}`);
-const db = new Database(DATABASE_FILE_PATH);
+console.log(`Creating database: ${DATABASE_RELATIVE_FILE_PATH}`);
+const db = new Database(DATABASE_RELATIVE_FILE_PATH);
 
 // STEP 2: Insert data into the database
 // SPOKEN DIALECTS

diff --git a/ci/utils.ts b/ci/utils.ts
@@ -21,6 +21,6 @@ export const recreateDirectory = (path: string) => {
             recursive: true,
             force: true
         });
-        fs.mkdirSync(path);
     }
+    fs.mkdirSync(path);
 };
diff --git a/custom-resources/app.css b/custom-resources/app.css
@@ -1,3 +1,18 @@
 body {
     height: 100vh;
+}
+
+#navigation-bar .navbar-brand {
+    font-family: 'Merriweather', serif;
+}
+
+footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    background: #ffffff;
+    padding: 5px;
+    text-align: center;
+    font-size: 10px;
+    width: 100%;
 }
diff --git a/custom-resources/icon.png b/custom-resources/icon.png
diff --git a/custom-resources/logo.svg b/custom-resources/logo.svg
diff --git a/docs/README.md b/docs/README.md
@@ -1,15 +1,9 @@
-# Phlexicon
+![Demo of Phlexicon app](demo.gif)
 
-Beginner-friendly phonetic keyboards for spoken & sign languages on desktop Mac, Windows, & Linux.
+## Install
 
-Type [phonemes](https://en.wikipedia.org/wiki/Phoneme) using the [International Phonetic Alphabet (IPA)](https://en.wikipedia.org/wiki/International_Phonetic_Alphabet)
-for spoken languages and [SignWriting](https://www.signwriting.org/about/) for sign languages.
-Choose from a list of phonemes used by a particular dialect or optionally, all phonemes in the IPA or SignWriting.
+Download the [latest release](https://github.com/mxskylar/phlexicon/releases/latest) for your operating system:
 
-The application is still under development and is only available for developers to [build from scratch](https://github.com/mxskylar/phlexicon).
-This user guide will be updated when Phlexicon is available for installation.
-
----
-
-Phlexicon would be nothing without the open source data and frameworks it depends on.
-Read more about those [here](./attribution.md).
+- **macOS:** If your Mac uses an M1 chip, download an `arm64` file. Download either a `zip` or `dmg` file.
+- **Windows:** Download the `exe` installer.
+- **Linux:** Download an `rpm`, `deb`, `AppImage`, `pacman` file.
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -0,0 +1,6 @@
+# https://github.com/pages-themes/minimal
+remote_theme: pages-themes/minimal@v0.2.0
+plugins:
+  - jekyll-remote-theme
+title: Phlexicon
+logo: "logo.png"
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+{% seo %}
+    <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
+    <link rel="stylesheet" href="style.css">
+    <!--[if lt IE 9]>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <![endif]-->
+    {% include head-custom.html %}
+  </head>
+  <body>
+    <div class="wrapper">
+      <header>
+        <h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
+
+        {% if site.logo %}
+          <img src="{{site.logo | relative_url}}" alt="Logo" id="logo" />
+        {% endif %}
+
+        <p>
+          A catalog of <a href="https://en.wikipedia.org/wiki/Phoneme">phonemes</a>&nbsp;
+          in hundreds of languages, dialects, and lexicons—both <a href="https://www.signwriting.org/about/">signed</a>&nbsp;
+          and <a href="https://en.wikipedia.org/wiki/International_Phonetic_Alphabet">spoken</a>.
+        </p>
+
+        {% if site.github.is_project_page %}
+        <p class="view">
+          <a href="https://mxskylar.github.io/phlexicon/faq">FAQ</a>&nbsp;•&nbsp;
+          <a href="{{ site.github.repository_url }}">Source Code</a>&nbsp;•&nbsp;
+          <a href="{{ site.github.repository_url }}/releases/latest">Download App</a>
+        </p>
+        {% endif %}
+      </header>
+      <section>
+
+      {{ content }}
+
+      </section>
+      <footer>
+        <p><small>
+            Phlexicon would be nothing without the open source data and frameworks it depends on.
+            Read more about those <a href="https://mxskylar.github.io/phlexicon/attribution">here</a>.
+            Website hosted on GitHub Pages. Theme by <a href="https://github.com/orderedlist">orderedlist</a>.
+        </small></p>.
+      </footer>
+    </div>
+    <script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
+  </body>
+</html>
diff --git a/docs/attribution.md b/docs/attribution.md
@@ -1,14 +1,17 @@
 # Attribution
 
 Phlexicon would be nothing without the open source data and frameworks it depends on:
-- [PBase](https://pbase.phon.chass.ncsu.edu/): Phonetic data for spoken languages
-- [SignWriting](https://www.signwriting.org/) & [SignPuddle](https://signpuddle.org/): Writing system & phonetic data for sign languages
-- [International SignWriting Alphabet 2010](https://www.signbank.org/iswa/): Font for writing phonemes in sign language
-- [SIL ISO 639-3](https://iso639-3.sil.org/): Language names & identifiers
-- [Charis SIL](https://software.sil.org/charis/): Font that supports International Phonentic Alphabet (IPA) symbols
-- [Bootstrap](https://getbootstrap.com/): UI framework & [icons](https://icons.getbootstrap.com/)
-- [Bootswatch](https://bootswatch.com/): Theme for Bootstrap
-- [React](https://react.dev/): Framework for web development
-- [Webpack](https://webpack.js.org/): JavaScript bundler
-- [Electron](https://www.electronjs.org/): Framework to distribute web apps as desktop apps
-- [Node.js](https://nodejs.org/): JavaScript development tool
+
+|  | Description | License |
+|---|---|---|
+| [PBase](https://pbase.phon.chass.ncsu.edu/) | Phonetic data for spoken languages | [Attribution-NonCommercial-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-nc-sa/4.0/) |
+| [International SignWriting Alphabet 2010](https://www.signbank.org/iswa/), [SignWriting](https://www.signwriting.org/), & [SignPuddle 3.0](https://signpuddle.org/) | Writing system, font, & phonetic data for sign languages | [Attribution-ShareAlike 3.0 Unported](https://creativecommons.org/licenses/by-sa/3.0/) |
+| [SIL ISO 639-3](https://iso639-3.sil.org/) | Language names & identifiers |  |
+| [Charis SIL](https://software.sil.org/charis/) | Font that supports International Phonetic Alphabet (IPA) symbols |  |
+| [Bootstrap](https://getbootstrap.com/) | UI framework | [MIT](https://github.com/twbs/bootstrap/blob/main/LICENSE) |
+| [Bootstrap Icons](https://icons.getbootstrap.com/) | Icon symbols | [MIT](https://github.com/twbs/icons/blob/main/LICENSE) |
+| [Bootswatch](https://bootswatch.com/) | Theme for Bootstrap | [MIT](https://github.com/thomaspark/bootswatch/blob/v5/LICENSE) |
+| [React](https://react.dev/) | Framework for web development | [MIT](https://github.com/facebook/react/blob/main/LICENSE) |
+| [Webpack](https://webpack.js.org/) | JavaScript bundler | [MIT](https://github.com/webpack/webpack/blob/main/LICENSE) |
+| [Electron](https://www.electronjs.org/) | Framework to distribute web apps as desktop apps | [MIT](https://github.com/electron/electron/blob/main/LICENSE) |
+| [Node.js](https://nodejs.org/) | JavaScript development tool | [MIT](https://github.com/nodejs/node/blob/main/LICENSE) |
diff --git a/docs/demo.gif b/docs/demo.gif
diff --git a/docs/faq.md b/docs/faq.md
@@ -0,0 +1,31 @@
+# FAQ
+
+## Where does Phlexicon get its data?
+
+Spoken phonemes are pulled from [PBase](https://pbase.phon.chass.ncsu.edu/)
+and the handshapes of sign languages are pulled from [SignPuddle 3.0](https://signpuddle.org/)
+and the [one-dimensional font](https://www.sutton-signwriting.io/#fonts) for [SignWriting](https://www.signwriting.org/about).
+
+These datasets are normalized and parsed by Phlexicon.
+Some granular data may be excluded or simplified, but the data in the app
+should not meaningfully differ from original datasets,
+unless there is a [bug](https://github.com/mxskylar/phlexicon/issues).
+
+See the [data parsing source code](https://github.com/mxskylar/phlexicon/blob/main/ci/app/init.ts)
+to better understand how the original datasets are normalized, simplified, and parsed.
+
+## What fonts does Phlexicon use?
+
+The [Charis SIL font](https://software.sil.org/charis/) for spoken phonemes in the
+[International Phonetic Alphabet (IPA)](https://en.wikipedia.org/wiki/International_Phonetic_Alphabet)
+and the [one-dimensional font for SignWriting](https://www.sutton-signwriting.io/#fonts),
+which can be used to write sign languages.
+
+Some characters in the IPA use are in a [Unicode private use area](https://en.wikipedia.org/wiki/Private_Use_Areas),
+which means that the Charis font or another IPA-compatible font will need to be used to properly render them.
+The SignWriting font must be used to render all symbols in the SignWriting system.
+
+## Where can I find symobls for movement, location, expressions, etc. in sign languages?
+
+For now, only oriented handshapes are supported by Phlexicon. The [SignMaker tool](https://www.signbank.org/signmaker/#)
+can be used to find symbols for other phonemic parameters in the [SignWriting](https://www.signwriting.org/about) system.
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/logo.png b/docs/logo.png
diff --git a/docs/style.css b/docs/style.css
@@ -0,0 +1,16 @@
+header, footer {
+    text-align: center;
+}
+
+header h1 {
+    font-family: 'Merriweather', serif;
+    margin-bottom: 0;
+}
+
+#logo {
+    height: 150px;
+}
+
+a {
+    color: #2fa4e7;
+}
diff --git a/electron-builder-docker b/electron-builder-docker
@@ -0,0 +1,18 @@
+#!/bin/bash
+# https://www.electron.build/multi-platform-build#build-electron-app-using-docker-on-a-local-machine
+
+IMAGE_VERSION=""
+if [[ "$1" == "win" ]]; then
+    IMAGE_VERSION=":wine"
+fi
+
+set -o xtrace
+docker run --rm -ti \
+    --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS_TAG|TRAVIS|TRAVIS_REPO_|TRAVIS_BUILD_|TRAVIS_BRANCH|TRAVIS_PULL_REQUEST_|APPVEYOR_|CSC_|GH_|GITHUB_|BT_|AWS_|STRIP|BUILD_') \
+    --env ELECTRON_CACHE="/root/.cache/electron" \
+    --env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" \
+    -v ${PWD}:/project \
+    -v ${PWD##*/}-node-modules:/project/node_modules \
+    -v ~/.cache/electron:/root/.cache/electron \
+    -v ~/.cache/electron-builder:/root/.cache/electron-builder \
+    electronuserland/builder$IMAGE_VERSION