feat: bilingual landing page with CityGML 2.0 + 3.0 UML browsers (ea gem migration) - #3
Merged
Merged
Conversation
- Update Gemfile to use refactor/typed-spa-data-layer-vue-migration branch which includes the new Vue 3 SPA frontend with proper CSS design system - Update CI to also trigger on migrate/new-lutaml-spa branch - Add index.html to .gitignore The new SPA includes: - Modern Vue 3 + Pinia frontend with full-width responsive layout - Dark/light theme toggle with [data-theme] attribute - SVG icons throughout (no more HTML entities) - Proper sidebar with collapse, tree navigation, stats grid, footer - Puppeteer e2e tests verifying rendering - Fixed generalization resolver for PLATEAU model data
Switch from the broken lutaml meta-gem (phantom requires, circular deps) to the standalone ea gem for SPA generation. Changes: - Gemfile: gem 'lutaml' (path) → gem 'ea' + 'lutaml-uml' (rubygems) - deploy-pages.yml: 'lutaml uml build-spa' → 'ea spa' - README.md: update generation command - Gemfile.lock: regenerated Verified: ea 0.2.1 + lutaml-uml 0.5.1 from rubygems produces a 3.75 MB SPA from 20251010_current_plateau_v5.1.qea.
Add a bilingual (Japanese / English) landing page at the repository root that lets visitors choose between the production PLATEAU v5.1 (CityGML 2.0) model and the next-generation CityGML 3.0 Consolidated Draft. The workflow now generates each model SPA into its own subdirectory so both can coexist behind a single root page. Repository layout - index.html Hand-authored bilingual landing page - citygml-2/index.html Generated CG2 SPA (gitignored) - citygml-3/index.html Generated CG3 SPA (gitignored) - 20251010_current_plateau_v5.1.qea CG2 source (existing) - 20260323_CityGML_3.0_Consolidated_Draft.qea CG3 source (new) Landing page - MLIT PLATEAU-inspired visual style (sticky header, hero, card grid) - Pill-based EN/JA toggle with browser-language detection and localStorage persistence; every text node is bilingual via data-ja / data-en attributes (CSS visibility, no FOUC) - Light/dark theme toggle following prefers-color-scheme and localStorage - Self-contained: no external runtime dependencies; system font stack covers Latin and Japanese glyphs - Responsive grid, focus-visible outlines, prefers-reduced-motion honored Workflow - Each model is generated in its own subdirectory step so the landing page can link to citygml-2/ and citygml-3/ relatively - Uses the ea gem (>= 0.2.3, which adds the -o short alias that this workflow depends on) The migrate/new-lutaml-spa branch trigger is retained so the PR can be validated end-to-end before merging to main.
ronaldtse
changed the title
The previous landing page was tone-deaf to PLATEAU actual design
system and -- worse -- shipped a broken language toggle: elements used
data-ja / data-en as attributes with empty bodies, then CSS hid one
attribute host element per language. With no real text content to
show, switching languages changed nothing visible.
Two problems, two fixes.
Brand fidelity
- Inlined the actual PLATEAU logo geometry (the origami P mark)
instead of an invented bar-chart glyph
- Color tokens pulled from PLATEAU compiled CSS and SVG logo:
#463C64 deep indigo, #00BEBE teal, #364EF5 electric blue,
purple-tinted surface grays (#F7F7FA / #F0F0F5 / #E5E5EA)
- Typography: Inter Tight (closest open-source analogue of their
proprietary Suisse Intl) for Latin, Noto Sans JP for Japanese,
JetBrains Mono for tabular metadata -- loaded via Google Fonts with
preconnect
- Tokyo editorial layout: large display headlines with a teal
underline accent, monospace numerals as section IDs (01 /, 02 /),
tabular-num metadata grid, dark footer band
- Origami polygon motif in the hero background echoes the logo
Real i18n (not CSS hide/show)
- Every localizable node carries data-i18n + data-ja + data-en
- applyLang(lang) sets el.textContent from data-{lang} on every
element matched by [data-i18n] -- actually swaps text on toggle
- Document title, meta description, and aria-labels all respond
- Initial language detected from localStorage then navigator.language
with Japanese as default
- Theme toggle (light/dark) preserved, applied pre-DOMContentLoaded
to avoid FOUC
Result: a page that actually translates when you click JA/EN, and
that visually belongs to the PLATEAU family of properties.
Three coordinated changes that together make both the landing page
and the generated SPAs carry the actual PLATEAU brand identity.
1. Landing page logo (index.html)
Replaced the invented bar-chart "P" with the official PLATEAU logo
lockup, copied verbatim from mlit.go.jp/plateau/assets/img/common/
logo.svg. The mark paths keep their brand fills (#463C64 deep
indigo, #00BEBE teal); the PLATEAU wordmark and "by MLIT" tagline
paths use currentColor so they flip with the theme. Same lockup is
reused in the footer dark band. Page <title>, meta description, and
visible brand text now read "PLATEAU by MLIT — UML Models" with
proper JA / EN translations via the existing data-i18n swap.
2. Per-SPA customization (citygml-2.config.yml, citygml-3.config.yml)
Two lutaml-uml static-site configs that set metadata.title,
metadata.description, metadata.appearance.logos (PLATEAU logo URLs),
plus ui.title and ui.description. The generated SPAs now show
"PLATEAU Model｜CityGML 2.0 UML Browser" / "...3.0..." in the
browser tab and the Vue app shell, with the PLATEAU logo wired into
the metadata. Same logo URLs for light/dark use the official
logo.svg / logo_white.svg pair.
3. Workflow + Gemfile
- deploy-pages.yml: ea spa invocations now pass --config
citygml-{2,3}.config.yml so each generated SPA picks up its
config-driven branding.
- Gemfile: pin ea >= 0.2.4, which is the version that ships the
--config / -c option (released today as lutaml/ea#18).
… 0.5.2
Track the two square PLATEAU logos under images/ and point both SPA
configs at them via metadata.appearance.logos.square.{light,dark}.path
(relative ../images/... from each SPA subdirectory). The Vue SPA reads
the path through to the welcome screen and sidebar branding thanks to
the lutaml-uml 0.5.2 fix (lutaml/lutaml-uml#119) — previously the
welcome screen always fell back to the LutaML logo.
- images/logo-plateau_logo-square.svg (light bg variant)
- images/logo-plateau_logo-square-dark.svg (dark bg variant)
- citygml-{2,3}.config.yml: switch logos.*.url -> ...path with relative path
- Gemfile: pin ea >= 0.2.5 (carries the dev-dep cap on lutaml-uml so
bundler cannot resolve to 1.0.0) and lutaml-uml >= 0.5.2
After this commit the generated SPAs render the PLATEAU mark on the
welcome screen and in the sidebar instead of the LutaML mark.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
A bilingual (JA/EN) PLATEAU Model portal at the repository root that lets visitors choose between the production CityGML 2.0 model (PLATEAU v5.1) and the next-generation CityGML 3.0 Consolidated Draft. Each model SPA is generated into its own subdirectory and inherits PLATEAU branding via a YAML config passed to
ea spa --config.What changed
Migration (origin of this PR)
lutaml(GitHubrt-new-featuresbranch — deleted) to the releasedeagem (~> 0.2,>= 0.2.4) pluslutaml-uml(~> 0.5), both from RubyGems.lutaml uml build-spa→ea spa ... --config ... -o citygml-{2,3}/index.htmlso each generated SPA picks up its config-driven branding.Landing page (
index.html, committed)mlit.go.jp/plateau/assets/img/common/logo.svg— origami mark in#463C64/#00BEBE, "PLATEAU" wordmark and "by MLIT" tagline usingcurrentColorso they flip with the theme. Same lockup reused in the dark footer band.data-i18n+data-ja+data-en, andapplyLang(lang)doesel.textContent = el.dataset[lang]on each. Document<title>, meta description, and visible text all swap on JA↔EN.#463C64indigo,#00BEBEteal,#364EF5electric blue, purple-tinted surface grays.01 /,02 /), tabular-num metadata grid, dark footer band, origami polygon motif in the hero background.prefers-color-scheme; both lang and theme persist vialocalStorage.SPA branding configs (
citygml-2.config.yml,citygml-3.config.yml)metadata.title,metadata.description,metadata.appearance.logos(PLATEAU logo URLs), plusui.title/ui.description.CG3 source added (
20260323_CityGML_3.0_Consolidated_Draft.qea, 45 MB)Upstream dependencies released to unblock this PR
-oshort alias for--outputonspa,convert,diagrams--config/-coption onea spato forward a YAML config to lutaml-uml's StaticSite::GeneratorValidation
--config citygml-2.config.yml--config citygml-3.config.yml/,/citygml-2/,/citygml-3/) return 200 OKdata-i18ntextContent assignmentTest plan
/→ bilingual PLATEAU-branded landing page (real PLATEAU logo lockup)/citygml-2/→ CG2 SPA with "PLATEAU Model｜CityGML 2.0 UML Browser" title/citygml-3/→ CG3 SPA with "PLATEAU Model｜CityGML 3.0 UML Browser" titleNotes
migrate/new-lutaml-spapush trigger is retained so this PR can be validated end-to-end; can be removed in a follow-up after merge.config.ymlandimages/from prior experiments are intentionally left out of this commit.