# Northstar Localization Demo Website v0.5.3

A realistic four-page demonstration for Website Localization Starter Kit v1.0.2.

The customer package opens in **Static mode** and contains no seller endpoint.
The language selector reads `locales/manifest.json`, and the site loads one
local JSON dictionary for the selected locale. A separate endpoint config
template is included for buyer-owned Dynamic mode.

## Package inventory

Archive: `Northstar_Localization_Demo_Website_v0_5_3.zip`

The archive contains **27 files**:

- 4 HTML pages: `index.html`, `about.html`, `pricing.html`, `contact.html`;
- 4 JavaScript files: `assets/js/i18n.js`, `app.js`, `config.js`, `config.live.example.js`;
- 1 CSS file: `assets/css/styles.css`;
- 11 JSON files: 9 locale dictionaries, `locales/manifest.json`, and `docs/demo_strings.json`;
- 3 Markdown guides;
- 1 CSV source list;
- 1 Python bundle installer;
- 1 favicon;
- 1 Business Use License.

## Compatible release set

- `Dynamic_Google_Sheets_Translation_Manager_v0_9_2.xlsx`
- `Website_Localization_Apps_Script_v0_9_2.zip`
- `SiteI18n_Loader_v0_4_3_Static_Manifest.zip`
- `Northstar_Localization_Demo_Website_v0_5_3.zip`
- generated `<project-id>-locales-<translation-version>.zip`

## Start the demo

Run the website through a local HTTP server:

```bash
python3 -m http.server 8012
```

Open:

```text
http://localhost:8012/
```

The bundled static locale files work immediately.

## Included pages

- `index.html` - product landing page, workflow, and localized status values;
- `about.html` - product story, mission, values, and statistics;
- `pricing.html` - plan cards, `{{price}}`, and FAQ interactions;
- `contact.html` - localized labels, placeholders, validation, and toasts.

## Bundled static languages

The sample manifest includes 9 locales:

`en-US`, `es`, `de`, `ja`, `ar`, `fr`, `pt-BR`, `zh-TW`, `zh-HK`.

The fresh Translation Manager starts with 5 enabled demo locales. Language count
is controlled by the workbook and is not limited to the included sample set.

## Static workflow

The default `assets/js/config.js` uses:

```javascript
mode: 'static'
endpoint: ''
loadStaticManifest: true
```

Available languages come only from `locales/manifest.json`. To publish changes:

1. Finalize enabled languages while the Sheet is Dynamic.
2. Apply Static mode so locale headers and translated values are frozen together.
3. Run `Localization Kit -> Build / Refresh Static Locale Bundle`.
4. Download the generated ZIP.
5. Install or deploy the complete `locales/` folder.
6. Refresh the website and invalidate hosting/CDN cache when applicable.

If a new locale is needed after Static was applied, return to Dynamic first,
change `Languages`, wait for translations, then apply Static again.

## Install a generated bundle

```bash
python3 tools/install_generated_bundle.py /path/to/generated-locales.zip
```

The installer validates the manifest and every referenced locale file, backs up
the current `locales/` folder, and replaces it as one unit.

## Dynamic endpoint workflow

`assets/js/config.live.example.js` contains only a placeholder. To use Dynamic
mode:

1. deploy your own Apps Script Web App;
2. paste your `/exec` URL into the example;
3. copy it over `assets/js/config.js`;
4. refresh the site.

The Dynamic config is endpoint-only and does not mix its language list with the
static manifest.

## Features demonstrated

- selector populated from one active language source;
- persistence across four pages and refresh;
- semantic Arabic RTL and return to LTR;
- localized titles, content, labels, placeholders, validation, and toasts;
- stable backend codes mapped to translated UI labels;
- `{{variables}}` in reusable pricing strings;
- MutationObserver support for inserted DOM elements;
- static bundle installation workflow.

## Release safety

- No seller endpoint, credential, private URL, or browser cache is included.
- The endpoint template contains only `REPLACE_WITH_YOUR_DEPLOYMENT`.
- Locale files are public website assets; do not put secrets or private data in them.