Skip to content
Made with Corex

Launching in

Days
Hours
Min
Sec
Join the waitlist
Back to home

Using the Soonex i18n template

2026-05-08

Clone corex-ui repos, run Mix and Tableau, tune i18n and themes, plus a Markdown gallery (tables, alerts, footnotes, images) matching MDEx in config.

This guide walks through cloning soonex_i18n, running the static site pipeline, renaming the OTP app, and tuning locales, themes, color mode, and demo chrome. Further down, a Markdown feature gallery shows what MDEx emits for the extensions enabled in config/config.exs (table, tasklist, strikethrough, autolink, alerts, footnotes, and syntax_highlight: nil plus the SoonexI18n code pipeline).

Get the code

The localized Tableau site lives in its own repository under the corex-ui organization.

Clone over HTTPS

git clone https://github.com/corex-ui/soonex_i18n.git cd soonex_i18n 

Clone over SSH

If you prefer SSH:

git clone git@github.com:corex-ui/soonex_i18n.git

Then cd into the repo directory you cloned.

Single-language template

For a single-language layout without locale path prefixes, use the sibling template soonex:

git clone https://github.com/corex-ui/soonex.git 

Work inside the Corex monorepo

If you develop from the monorepo checkout, use templates/soonex_i18n. The default is {:corex, "~> 0.1.0-beta.5"} from Hex; to build against a sibling corex repo, switch mix.exs to {:corex, path: "../../corex"} and run mix deps.get so deps/corex matches that checkout (the corex/hooks and corex/select style imports in assets/js/site.js stay the same).

First run

From the repository root, in order:

  1. mix deps.get
  2. mix setup
    Or run mix localize.download_locales (and any other steps your checkout documents) if you are not using the default setup alias.
  3. cd assets && npm install && cd ..
  4. mix assets.build
  5. Either mix tableau.build for a production tree under _site/, or mix tableau.server for the dev server with reload.

Rename the project

From the repo root, choose a snake_case OTP application name (lowercase letters, digits, underscores only). Commit or branch first, the rename task does not provide an undo.

mix project.rename acme 

What the rename task updates

  • lib/, config/, test/, priv/, and mix.exs
  • Selected package.json / package-lock.json entries where applicable
  • Directory renames such as lib/soonex_i18n/ → lib/acme/ and lib/soonex_i18n_web/ → lib/acme_web/, plus matching test/ trees when present

After it finishes, run mix format and mix compile.

What you still edit by hand

Markdown under _posts/ and the root README are intentionally not rewritten so clone URLs like corex-ui/soonex_i18n stay accurate. Update branding copy yourself if you rebrand the app.

Locales and static posts

Gettext and Localize

  1. Open lib/soonex_i18n/gettext.ex and set default_locale and allowed_locales to the languages you ship.
  2. Align config/config.exs:localize with those locale codes: supported_locales and an explicit default_locale string (for example "en"). The explicit default keeps mix tableau.build and CI from depending on POSIX LANG (often C.UTF-8 on GitHub Actions), which is not a valid BCP 47 tag for Localize’s default-locale resolution.

Permalinks and _posts/

Add or remove Markdown under _posts/ with one permalink per language (for example /en/docs/ and /ar/docs/). Tableau emits one static tree per permalink.

Themes

Allowed theme ids and the default live in lib/soonex_i18n/theme.ex.

Import the matching priv/design/corex/theme/*.css files in assets/css/site.css so every [data-theme="…"] value you expose is present in the CSS graph.

Color mode (light / dark)

Light and dark preference is driven by data-mode on <html>, with helpers in lib/soonex_i18n/mode.ex and client logic under assets/js/mode.js.

Demo panel (Template Options)

The floating Template Options panel lives in lib/layouts/root/demo.ex. You can remove:

  • the theme <.select> block,
  • the mode <.toggle_group> block,

or both, and keep the language <.select> if you still want a locale switcher on the static site.

Markdown feature gallery

The snippets below mirror MDEx options under config :tableau, :config, markdown: [mdex: …] and the SoonexI18n post-processing step (SoonexI18n.MDExConverter → SoonexI18n.Markdown.CodeBlocks.transform/1) for fenced and inline code.

Headings

The post layout renders the post title as the page <h1>. In Markdown body text, ## maps to <h2>, ### to <h3>, and so on.

Third-level heading example

Fourth-level heading example

Emphasis, inline code, and strikethrough

Use bold, italic, combined emphasis, backticks for commands and paths, and strikethrough when extensions include strikethrough: true.

Links and autolink

Markdown link: Tableau on Hex. With autolink: true, bare URLs also become links, for example https://hexdocs.pm/mdex/MDEx.html.

Unordered and nested lists

  • Clone the template
    • HTTPS or SSH
    • Optional monorepo path
  • Run mix setup
  • Build with mix tableau.build or serve with mix tableau.server

Ordered lists

  1. Edit config/config.exs and lib/soonex_i18n/gettext.ex for locales.
  2. Add posts under _posts/ with a unique permalink per file.
  3. Ship _site/ to your host or CDN.

Task lists

tasklist: true renders GitHub-style checkboxes (inputs are disabled in static HTML):

  • Enable MDEx extensions in config
  • Replace demo copy with your product story
  • Point the waitlist form at your backend

Table

Tables need extension: [table: true]:

TopicWhere to look
Markdown pipelinelib/soonex_i18n/md_ex_converter.ex, lib/soonex_i18n/markdown/code_blocks.ex
MDEx optionsconfig/config.exs → markdown: [mdex: …]
Post layoutlib/layouts/post_layout.ex (.typo wraps body HTML)

Blockquote

Blockquotes use the .typo blockquote styles: layer background, border, and italic body text for callouts that are not GitHub alerts.

Image

Site-root paths resolve after mix tableau.build (static files live under _site/):

Default Open Graph image bundled with Soonex

GitHub-style alerts

With alerts: true, MDEx emits div.markdown-alert blocks. Titles come from the alert keyword.

Note

Use Note for neutral context that readers should notice.

Tip

Use Tip for shortcuts, conventions, or quality-of-life details.

Important

Use Important for security, data loss, or breaking-change warnings.

Warning

Use Warning when behavior may surprise operators.

Caution

Use Caution when the outcome depends on environment or ordering.

Footnotes

Footnotes need footnotes: true. References render as superscript links; definitions are collected at the end of the document1.

Fenced and inline code

Fenced blocks use the SoonexI18n pipeline (Makeup + Corex Code + Clipboard when a language-… class is present):

defmodule Demo do @moduledoc "Shown in the gallery" def hello, do: :soonex end 

Inline highlighter: Mix.Task.run("tableau.build") and mix deps.get.

Raw HTML (render: [unsafe: true])

With unsafe: true, trusted HTML passes through MDEx. Use sparingly in content you control:

Example: native details / summary

Pair with Ctrl+B style keys using the .typo kbd styles.

Tip: After mix tableau.build, open _site/en/docs/index.html to confirm exactly what shipped for this permalink.

  1. See SoonexI18n.MDExConverter.convert/4 and Application.get_env(:tableau, :config)[:markdown][:mdex] for the exact option map passed to MDEx.to_html!/2. ↩