website: why we are building SimpleX Network (#6657)

* website: why SimpleX exists * doc * size, centred * why * why we built SimpleX Network * why link * para gap * cleaner layout * link to why * update * fix script * ru correction --------- Co-authored-by: Evgeny @ SimpleX Chat <259188159+evgeny-simplex@users.noreply.github.com>
2026-08-06 23:39:54 +00:00 · 2026-02-26 13:21:31 +00:00
parent 60ff28d8f8
commit 3c27b5a29f
14 changed files with 247 additions and 14 deletions
@@ -12,6 +12,8 @@

 [<img src="./images/trail-of-bits.jpg" height="80">](http://simplex.chat/blog/20221108-simplex-chat-v4.2-security-audit-new-website.html) &nbsp;&nbsp;&nbsp; [<img src="./images/privacy-guides.jpg" height="64">](https://www.privacyguides.org/en/real-time-communication/#simplex-chat) &nbsp;&nbsp;&nbsp; [<img src="./images/whonix-logo.jpg" height="64">](https://www.whonix.org/wiki/Chat#Recommendation) &nbsp;&nbsp;&nbsp; [<img src="./images/kuketz-blog.jpg" height="64">](https://www.kuketz-blog.de/simplex-eindruecke-vom-messenger-ohne-identifier/)

+**[Why we are building SimpleX Network](./docs/WHY.md)**
+
 ## Welcome to SimpleX Chat!

 1. 📲 [Install the app](#install-the-app).
@@ -0,0 +1,19 @@
+# Why we are building SimpleX Network
+
+You were born without an account.
+
+Nobody tracked your conversations. No one drew a map of where you'd been. Privacy was never a feature — it was the way of life.
+
+Then we moved online, and every platform asked for a piece of you — your name, your number, your friends. We accepted that the price of talking to others is letting someone know who we talk to. Every generation, people and tech, had it this way — telephone, email, messengers, social media. It seemed the only way possible.
+
+There is another way. A network with no phone numbers. No usernames. No accounts. No user identities of any kind. A network that connects people and carries encrypted messages without knowing who is connected.
+
+Not a better lock on someone else's door. Not a nicer landlord that respects your privacy, but still keeps the record of all visitors. You are not a guest. You are home. No king can enter it — you are sovereign.
+
+Your conversations belong to you, as it had always been before the Internet. The network is not a place you visit. It is a place you create and own. And nobody can take it from you, whether you make it private or public.
+
+The oldest human freedom — to speak to another person without being watched — built on infrastructure that cannot betray it.
+
+Because we destroyed the power to know who you are. So that your power can never be taken.
+
+Be free in your network.
@@ -53,7 +53,7 @@ const globalConfig = {
 }

 const translationsDirectoryPath = './langs'
-const supportedRoutes = ["blog", "contact", "invitation", "messaging", "docs", "fdroid", ""]
+const supportedRoutes = ["blog", "contact", "invitation", "messaging", "docs", "fdroid", "why", ""]
 let supportedLangs = []
 fs.readdir(translationsDirectoryPath, (err, files) => {
  if (err) {
@@ -280,8 +280,8 @@
    "index-messaging-p2": "For your security and privacy, servers can&apos;t see your messages <span>and who you talk to</span>.",
    "index-messaging-cta": "Learn more about SimpleX messaging",
    "index-nextweb-h2": "You Own<br>The Next Web",
-    "index-nextweb-p1": "SimpleX is founded on the belief that <span>you must own your identity, contacts and communities</span>.",
-    "index-nextweb-p2": "Open and decentralized network lets you connect with people and share ideas: be free and secure.",
+    "index-nextweb-p1": "SimpleX is created on the belief that <span>you must own your profiles, contacts and communities</span>.",
+    "index-nextweb-p2": "A decentralized network nobody owns lets you connect with people and share ideas, to be free and secure in your network.",
    "index-token-h2": "Communities That Last",
    "index-token-p1": "You will support your favorite groups with future Community Vouchers.",
    "index-token-p2": "Vouchers will pay for servers, to let your communities stay free and independent.",
@@ -314,5 +314,15 @@
    "messengers-comparison-section-list-point-4": "Multi-device implementation compromises post-compromise security of Double Ratchet",
    "messengers-comparison-section-list-point-5": "2-factor key exchange is optional via security code verification.",
    "messengers-comparison-section-list-point-6": "Post-quantum key agreement is \"sparse\" &mdash; it protects only some of the ratchet steps.",
-    "navbar-old-site": "Old site"
-}
+    "navbar-old-site": "Old site",
+    "why-p1": "You were born without an account.",
+    "why-p2": "Nobody tracked your conversations. No one drew a map of where you&apos;d been. Privacy was never a feature &mdash; it was the way of life.",
+    "why-p3": "Then we moved online, and every platform asked for a piece of you &mdash; your name, your number, your friends. We accepted that the price of talking to others is letting someone know who we talk to. Every generation, people and tech, had it this way &mdash; telephone, email, messengers, social media. It seemed the only way possible.",
+    "why-p4": "There is another way. A network with no phone numbers. No usernames. No accounts. No user identities of any kind. A network that connects people and carries encrypted messages without knowing who is connected.",
+    "why-p5": "Not a better lock on someone else&apos;s door. Not a nicer landlord that respects your privacy, but still keeps the record of all visitors. You are not a guest. You are home. No king can enter it &mdash; you are sovereign.",
+    "why-p6": "Your conversations belong to you, as it had always been before the Internet. The network is not a place you visit. It is a place you create and own. And nobody can take it from you, whether you make it private or public.",
+    "why-p7": "The oldest human freedom &mdash; to speak to another person without being watched &mdash; built on infrastructure that cannot betray it.",
+    "why-p8": "Because we destroyed the power to know who you are. So that <em>your</em> power can never be taken.",
+    "why-tagline": "Be free in your network.",
+    "why-footer-link": "Why we are building it"
+}
@@ -278,8 +278,8 @@
    "index-messaging-p2": "Для Вашей безопасности, серверы не могут видеть ваши сообщения <span>и с кем Вы разговариваете</span>.",
    "index-messaging-cta": "Узнать больше про сообщения в SimpleX",
    "index-nextweb-h2": "Ваш Интернет Будущего",
-    "index-nextweb-p1": "SimpleX основан на идее что <span>Ваши данные, контакты и группы должны принадлежать Вам</span>.",
-    "index-nextweb-p2": "Открытая децентрализованная сеть позволяет Вам соединяться с другими людьми и общаться свободно и безопасно.",
+    "index-nextweb-p1": "SimpleX создан на убеждении, что <span>Ваши профили, контакты и сообщества должны принадлежать Вам</span>.",
+    "index-nextweb-p2": "Децентрализованная сеть, которой никто не владеет, позволяет Вам общаться и делиться идеями, оставаясь свободными и защищёнными в Вашей сети.",
    "index-token-h2": "Стабильные Сообщества",
    "index-token-p1": "Вы сможете поддерживать Ваши любимые группы с помощью будущих Ваучеров Групп.",
    "index-token-p2": "Ваучеры будут использоваться для оплаты за серверы, чтобы группы оставались свободными и независимыми.",
@@ -313,5 +313,15 @@
    "messengers-comparison-section-list-point-5": "2-факторный обмен ключами опциональный, через верификацию кода безопасности.",
    "messengers-comparison-section-list-point-6": "Пост-квантовое согласование ключей происходит не всегда, защищая только часть согласований.",
    "navbar-token": "Токен",
-    "navbar-old-site": "Старый сайт"
+    "navbar-old-site": "Старый сайт",
+    "why-p1": "Вы родились без аккаунта.",
+    "why-p2": "Никто не отслеживал ваши разговоры. Никто не составлял карту ваших перемещений. Конфиденциальность не была функцией &mdash; это был образ жизни.",
+    "why-p3": "Потом мы вышли в интернет, и каждая платформа попросила частичку вас &mdash; ваше имя, ваш номер, ваших друзей. Мы смирились с тем, что за возможность общаться приходится отдавать информацию о том, с кем мы общаемся. Каждое поколение людей и технологий жило так &mdash; телефон, электронная почта, мессенджеры, социальные сети. Казалось, что другого пути нет.",
+    "why-p4": "Другой путь есть. Сеть без номеров телефонов. Без имён пользователей. Без аккаунтов. Без каких-либо идентификаторов пользователей. Сеть, которая соединяет людей и передаёт зашифрованные сообщения, не зная, кто с кем связан.",
+    "why-p5": "Не более надёжный замок на чужой двери. Не более вежливый хозяин, который уважает вашу частную жизнь, но всё равно ведёт учёт всех посетителей. Вы не гость. Вы у себя дома. Ни один король не войдёт в ваш дом &mdash; вы суверенны.",
+    "why-p6": "Ваши разговоры принадлежат вам, как это всегда было до интернета. Сеть &mdash; это не место, куда вы приходите. Это место, которое вы создаёте и которым владеете. И никто не может это у вас отнять, делаете ли вы его конфиденциальным или публичным.",
+    "why-p7": "Древнейшая человеческая свобода &mdash; говорить с другим человеком без слежки &mdash; построенная на инфраструктуре, которая не может её предать.",
+    "why-p8": "Потому что мы разрушили саму возможность узнать, кто вы. Чтобы вашу свободу невозможно было отнять.",
+    "why-tagline": "Будь свободен в своей сети.",
+    "why-footer-link": "Почему мы это строим"
 }
@@ -0,0 +1,129 @@
+# 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
@@ -5,7 +5,8 @@
            "name": "English",
            "flag": "/img/flags/en.svg",
            "enabled": true,
-            "home": true
+            "home": true,
+            "why": true
        },
        {
            "label": "ar",
@@ -129,7 +130,8 @@
            "name": "Русский",
            "flag": "/img/flags/ru.svg",
            "enabled": true,
-            "home": true
+            "home": true,
+            "why": true
        }
   ]
 }
@@ -8,6 +8,10 @@

                <div class="flex flex-col items-center lg:items-start lg:flex-row gap-[150px] lg:gap-[350px]">
                    <div class="flex flex-col items-center lg:items-start">
+                        <a href="/{{ '' if lang == 'en' else lang ~ '/' }}why"
+                            class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3 flex items-center gap-1">
+                            {{ "why-footer-link" | i18n({}, lang ) | safe }}
+                        </a>
                        <a href="/about/"
                            class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3 flex items-center gap-1">
                            {{ "about-and-contact-us" | i18n({}, lang ) | safe }}
@@ -38,7 +38,7 @@
    <body class="bg-[#F3FAFF] dark:bg-[#000832]">
        {% include "navbar.html" %}

-        {{ content | applyGlossary | safe }}
+        {% if noGlossary %}{{ content | safe }}{% else %}{{ content | applyGlossary | safe }}{% endif %}

        {% include "footer.html" %}

@@ -162,7 +162,7 @@
                    {% endfor %}
                {% else %}
                    {% for language in languages.languages %}
-                        {% if language.enabled and (language.home or (page.url != '/' and page.url != '/' + lang + '/')) %}
+                        {% if language.enabled and (language.home or (page.url != '/' and page.url != '/' + lang + '/')) and (language.why or ('why' not in page.url)) %}
                            <li>
                                <a href="{% completeRoute {url: page.url, lang: language.label} %}">
                                    <p>{{ language.name }}</p>
@@ -816,6 +816,10 @@ main .section-bg {
    max-width: calc(var(--sec-vwu)*31) !important;
 }

+.page-3 .text-container a {
+    max-width: calc(var(--sec-vwu)*31) !important;
+}
+
 .page-3 .text-container,
 .page-4 .text-container {
    margin-left: auto;
@@ -921,7 +925,6 @@ main .section-bg {
        max-width: calc(var(--sec-vwu) * 93);
    }

-
    /* --- MAIN SECTIONS --- */
    .page .text-container {
        justify-content: flex-end;
@@ -145,6 +145,7 @@ active_home: true
                        <h2>{{ "index-nextweb-h2" | i18n({}, lang) | safe }}</h2>
                        <p>{{ "index-nextweb-p1" | i18n({}, lang) | safe }}</p>
                        <p>{{ "index-nextweb-p2" | i18n({}, lang) }}</p>
+                        <a class="gradient-text" href="{{ '' if lang == 'en' else '/' ~ lang }}/why">{{ "why-footer-link" | i18n({}, lang) | safe }}</a>
                    </div>
                </div>
            </section>
@@ -0,0 +1,51 @@
+---
+layout: layouts/main.html
+title: "Why we are building SimpleX Network"
+description: "A network with no accounts, no identities, and no way to know who you are."
+templateEngineOverride: njk
+noGlossary: true
+---
+
+{% set lang = page.url | getlang %}
+
+<section class="min-h-screen px-5 py-24 md:py-32 lg:py-40">
+  <div class="max-w-[680px] mx-auto">
+
+    <h1 class="text-grey-black dark:text-white text-[24px] md:text-[36px] lg:text-[40px] font-bold leading-[1.2] tracking-[-0.01em] mb-12 md:mb-16">
+      {{ "why-p1" | i18n({}, lang) | safe }}
+    </h1>
+
+    <p class="text-grey-black dark:text-white text-[18px] md:text-[20px] lg:text-[22px] font-normal leading-[1.6] mb-6 md:mb-8">
+      {{ "why-p2" | i18n({}, lang) | safe }}
+    </p>
+
+    <p class="text-grey-black dark:text-white text-[18px] md:text-[20px] lg:text-[22px] font-normal leading-[1.6] mb-6 md:mb-8">
+      {{ "why-p3" | i18n({}, lang) | safe }}
+    </p>
+
+    <p class="text-grey-black dark:text-white text-[20px] md:text-[24px] lg:text-[26px] font-medium leading-[1.5] mb-6 md:mb-8">
+      {{ "why-p4" | i18n({}, lang) | safe }}
+    </p>
+
+    <p class="text-grey-black dark:text-white text-[18px] md:text-[20px] lg:text-[22px] font-normal leading-[1.6] mb-6 md:mb-8">
+      {{ "why-p5" | i18n({}, lang) | safe }}
+    </p>
+
+    <p class="text-grey-black dark:text-white text-[18px] md:text-[20px] lg:text-[22px] font-normal leading-[1.6] mb-6 md:mb-8">
+      {{ "why-p6" | i18n({}, lang) | safe }}
+    </p>
+
+    <p class="text-grey-black dark:text-white text-[18px] md:text-[20px] lg:text-[22px] font-normal leading-[1.6] mb-6 md:mb-8">
+      {{ "why-p7" | i18n({}, lang) | safe }}
+    </p>
+
+    <p class="text-grey-black dark:text-white text-[20px] md:text-[24px] lg:text-[26px] font-medium leading-[1.5] mb-10 md:mb-14">
+      {{ "why-p8" | i18n({}, lang) | safe }}
+    </p>
+
+    <p class="text-[36px] md:text-[40px] lg:text-[46px] font-bold leading-[1.15] gradient-text">
+      {{ "why-tagline" | i18n({}, lang) | safe }}
+    </p>
+
+  </div>
+</section>
@@ -10,6 +10,7 @@ rm -rf website/src/docs/dependencies
 cp -R blog website/src
 cp -R images website/src
 rm website/src/blog/README.md
+rm -rf website/src/blog/new
 cp PRIVACY.md website/src/privacy.md
 cd website

@@ -40,6 +41,7 @@ for lang in "${langs[@]}"; do
  cp src/contact.html src/$lang
  cp src/invitation.html src/$lang
  cp src/fdroid.html src/$lang
+  cp src/why.html src/$lang
  echo "{\"lang\":\"$lang\"}" > src/$lang/$lang.json
  echo "done $lang copying"
 done
@@ -71,4 +73,4 @@ done
 #   done
 #   main_json_obj=$(echo "$main_json_obj" | jq ". + {\"$key\": $val_json_obj}")
 # done
-# echo "$main_json_obj" > translations.json
+# echo "$main_json_obj" > translations.json