# Plan: Add `/why` philosophy page

## Context

The SimpleX Network philosophy text — a short manifesto explaining why SimpleX was built — needs its own page at `/why`. The text is 7 paragraphs (~200 words). It should be translatable paragraph-by-paragraph so the community can localize it. The page should feel like a statement, not a blog post.

Translations will arrive over time from community translators. The language dropdown must only show languages where the translation is complete.

## Files to modify

| File | Action |
|------|--------|
| `src/why.html` | **Create** — page template |
| `langs/en.json` | **Edit** — add 8 translation keys (`why-p1` through `why-p7` + `why-tagline`) |
| `.eleventy.js` line 56 | **Edit** — add `"why"` to `supportedRoutes` |
| `web.sh` line 42 | **Edit** — add `cp src/why.html src/$lang` to the language copy loop |
| `src/_data/languages.json` | **Edit** — add `"why": true` to English (and later, each translated language) |
| `src/_includes/navbar.html` line 165 | **Edit** — check `language.why` when on the `/why` page |
| `src/_includes/layouts/main.html` line 41 | **Edit** — make glossary filter conditional on `noGlossary` frontmatter flag |

## 1. Create `src/why.html`

Uses `layouts/main.html` (navbar, footer, dark mode, RTL — all inherited). The content is a single centered section with a narrow reading column (`max-w-[680px]`), generous vertical padding, and scaled typography:

- **Paragraph 1** — headline-sized (`h1`, 28–42px, bold). The opening hook.
- **Paragraphs 2–3, 5–6** — body text (18–22px, normal weight). The narrative.
- **Paragraph 4** — slightly larger (20–26px, medium weight). The rhetorical turn: "There is another way."
- **Paragraph 7** — same emphasis as p4. The declaration: "Because we destroyed the power..."
- **Tagline** — display-sized (32–48px, bold, `gradient-text` class). "Be free in your network."

All text via `{{ "why-pN" | i18n({}, lang) | safe }}`. Background matches the site default (`bg-[#F3FAFF]` / `dark:bg-[#000832]` from `main.html` body).

```yaml
---
layout: layouts/main.html
title: "SimpleX Network - Philosophy"
description: "The philosophy behind SimpleX: a network with no accounts, no identities, and no way to know who you are."
templateEngineOverride: njk
noGlossary: true
---
```

## 2. Add translation keys to `langs/en.json`

8 keys, one per paragraph + tagline. Dashes rendered as `&mdash;`, apostrophes as `&apos;` (matching existing site conventions):

```
why-p1: "You were born without an account."
why-p2: "Nobody tracked your conversations..."
why-p3: "Then we moved online..."
why-p4: "There is another way..."
why-p5: "Not a better lock on someone else's door..."
why-p6: "The oldest human freedom..."
why-p7: "Because we destroyed the power to know who you are. So that your power can never be taken."
why-tagline: "Be free in your network."
```

## 3. Add `"why"` to `supportedRoutes` in `.eleventy.js`

```js
const supportedRoutes = ["blog", "contact", "invitation", "messaging", "docs", "fdroid", "why", ""]
```

Without this, the `getlang` filter would misinterpret `/why/` as a language code.

## 4. Add `why.html` to `web.sh` language copy loop

```bash
cp src/why.html src/$lang
```

After the existing `cp src/fdroid.html src/$lang` line. Cleanup is automatic (the loop already deletes `src/$lang`).

## 5. Track translation availability via `languages.json`

In `src/_data/languages.json`, add `"why": true` to the English entry (and later, each language as its translation is completed):

```json
{
    "label": "en",
    "name": "English",
    "flag": "/img/flags/en.svg",
    "enabled": true,
    "home": true,
    "why": true
}
```

This follows the same pattern as `"home": true` — a per-language boolean that controls dropdown visibility.

## 6. Update navbar to check `language.why` for the `/why` page

In `src/_includes/navbar.html` line 165, extend the condition to also gate on `language.why` when on the `/why` page:

```nunjucks
{% if language.enabled and (language.home or (page.url != '/' and page.url != '/' + lang + '/')) and (language.why or ('why' not in page.url)) %}
```

Logic: on the `/why` page, only show languages with `"why": true`. On all other pages, behavior is unchanged (the `('why' not in page.url)` clause passes through).

When a translator completes their work, they submit a PR that:
1. Adds translated `why-p1`...`why-p7` keys to their `langs/XX.json`
2. Adds `"why": true` to their entry in `languages.json`

That's it — their language appears in the dropdown.

## 7. Disable glossary on the `/why` page

The manifesto text must stay clean — no tooltip underlines, now or in the future.

In `src/_includes/layouts/main.html` line 41, make the glossary filter conditional on a frontmatter flag:

```nunjucks
{# current: #}
{{ content | applyGlossary | safe }}

{# changed to: #}
{% if noGlossary %}{{ content | safe }}{% else %}{{ content | applyGlossary | safe }}{% endif %}
```

Then add `noGlossary: true` to `why.html` frontmatter. No new layout file needed.

## Verification

1. Run `npm start` → visit `localhost:8080/why/`
2. Toggle dark mode — text should be white on dark blue
3. Check language selector appears in navbar — should only show English initially
4. Check mobile — text should scale down via responsive classes
5. Full build with `./web.sh` from repo root generates all language variants
