Skip to content

ktav-lang/ktav-lang.github.io

Repository files navigation

ktav — landing & playground

A single static page for the future ktav-lang.github.io repo: an in-browser format converter (JSON / YAML / TOML / INI ⇄ Ktav), a comparison table, a light/dark toggle and an EN / RU / ZH language switcher. 2026 frosted-glass aesthetic.

The page ships as plain static files (index.html + assets/bundle.js), so it works on GitHub Pages and when opened straight from disk (file://).

Build

Two build steps, both wrapped by the PHP builder:

php build/build.php          # assemble index.html + concat assets/styles.css
php build/build.php --js     # full build: also compile Tailwind + bundle JS
  • HTML is composed from small partials so no single file is huge. Edit a partial and rebuild — never hand-edit the generated index.html.
  • CSS = assets/tailwind.css (compiled from utility classes by the Tailwind CLI, --js step) + assets/styles.css (our look, concatenated from build/styles/*.css). No runtime CDN.
  • JS is bundled from the ES-module sources in assets/ into one classic IIFE script (assets/bundle.js). A classic script is required because browsers block ES-module imports over file://.

The full production build is php build/build.php --js (needs npx for the Tailwind CLI + esbuild, first run downloads them).

If you only touched a partial, php build/build.php is enough. If you touched any assets/*.js, rebundle (--js, or run esbuild directly):

npx esbuild assets/app.js --bundle --format=iife --target=es2020 --outfile=assets/bundle.js

Run it

python -m http.server -d site 8099   # then open http://localhost:8099/
# …or just double-click site/index.html (file:// works too)

Layout

build/
  build.php            builder: partials → index.html (+ optional --js bundle)
  partials/            one small file per page section
    layout.php           skeleton; pulls in the sections via block()
    head.php  nav.php  hero.php  converter.php  comparison.php  bindings.php  footer.php
index.html             GENERATED — do not edit by hand
robots.txt sitemap.xml SEO; canonical/OG URL is https://ktav-lang.github.io/
assets/
  app.js               wiring: editors, conversion, i18n (EN/RU/ZH), theme, lang
  converter.js         parse/serialize hub + ktav WASM warm-up
  highlight.js         five format tokenizers
  editor.js            transparent-textarea-over-<pre> editor
  styles.css           GENERATED — concatenated from build/styles/*.css
  tailwind.css         GENERATED — Tailwind utilities compiled from the markup
  bundle.js            GENERATED by esbuild from app.js + its imports
  favicon.svg          theme-aware {ktav: lang} coin (prefers-color-scheme)
  og.png               1200×630 social preview (regenerate via Playwright)
vendor/                js-yaml, smol-toml, ktav.inline.js (all self-contained)
build/styles/          CSS partials (assembled into assets/styles.css)
build/tailwind/        Tailwind input.css + config (compiled to assets/tailwind.css)
build/data/icons.php   shared brand logos (icon() helper)

How it works

  • Ktav parse/serialize runs on the official WASM bindings, vendored self-contained at vendor/ktav/ktav.inline.js (wasm base64-embedded, one file). Spec 0.5.0: ## comments, numbers/bools inferred from :, :: forces a literal string (no :i/:f markers).
  • JSON native · YAML js-yaml · TOML smol-toml · INI a small hand-rolled parser/serializer in converter.js.
  • Every route goes through one intermediate JS value: X → parse → (JS value) → serialize → Y.
  • Ktav is a configuration language, so some shapes are lossy (dotted keys are paths; the root must be an object/array; TOML/INI lack null). The converter surfaces these as non-fatal warnings.

Highlighting

Lightweight synchronous tokenizers (assets/highlight.js) drive a transparent-textarea-over-<pre> editor for all five formats. The Ktav tokenizer is derived from the canonical TextMate grammar in editor/grammars/ktav.tmLanguage.json and tracks spec 0.5.0.

Theme & language

  • Theme (light/dark) and language (en/ru/zh) are set on <html> by a tiny inline script before first paint (no flash) and persisted in localStorage.
  • UI strings live in the I18N table in app.js; translatable nodes are tagged with data-i18n / data-i18n-html. Code samples and technical parser messages stay in English.

SEO

head.php carries canonical, Open Graph, Twitter-card and JSON-LD (SoftwareApplication) tags; robots.txt + sitemap.xml sit at the root. All point at https://ktav-lang.github.io/ and a 1200×630 assets/og.png social preview (present). Change the URL if hosted elsewhere. No analytics counter is wired yet; to add one, drop the provider snippet into head.php and rebuild.

Dependencies

Everything ships self-contained: ktav/yaml/toml vendored, Tailwind compiled to a static assets/tailwind.css (no runtime CDN). Build-time tools (npx Tailwind CLI + esbuild) are only needed when running php build/build.php --js. assets/og.png is a committed asset — regenerate it by rendering a 1200×630 HTML banner with Playwright (it isn't part of the PHP build).

Dual-licensed under MIT OR Apache-2.0.

About

Ktav landing & in-browser config converter (JSON/YAML/TOML/INI ⇄ Ktav)

Resources

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors