website: add docs to website (#2080)

* website: add fontmatter & improve image URLs where necessary

* website: add docs to website

* website: add prismjs for code highlighting

* website: change npm install position in web.sh

* website: fix an image URL in lang/cs/README.md

* website: improve image paths in lang/cs/translations.md

* website: add responsiveness & improve stylings of docs

* website: add dir to navbar in blog & docs

* website: remove scroll in mobile dropdown menu

* website: remove rfcs & add guide docs to website

* website: remove file renaming script from web.sh

* website: add menu to docs in nav

* website: add hash list & add scroll to headers

* website: customize docs frontmatter through JS

* website: remove supported_languages.json

* website: move merge_translations.js to JS folder

* website: add the following changes to docs
- add frontmatter to new doc merged from master
- add ignoreForWeb property to frontmatter of README.md docs

* website: remove package-lock.json from .gitignore

* website: add package-lock.json from .gitignore

* website: add no docs message to docs dropdown

* website: improve the sidebar of docs

* website: add revision date to docs

* website: add script to add version to docs frontmatter

* website: add layout to display message in docs if its version is old

* website: improve nav responsiveness

* website: remove frontmatter form main README & rfcs

* website: remove rfcs from website folder

* website: add ignore condition for rfcs in .eleventy

* website: remove frontmatter from lang README docs

* website: remove README from website's lang docs

* website: add guides menu in nav

* website: following changes
- add docs_dropdown.json
- extend reference menu in nav
- remove docs menu from nav

* website: fix in docs sidebar

* website: revert main docs README.md files

* website: revert main docs README.md files

* website: move scripts out of js that are for build

* website: remove displayAt form guide docs

* website: create a docs_sidebar.json & shift to that approach

* update navigation

* website: set navbar

* website: add icons to external links

* website: change the approach for docs sidebar creation

* website: update docs template

* website: add some strings to en.json and map them accordingly

* remove icon

---------

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
This commit is contained in:
M Sarmad Qadeer
2023-04-30 22:31:23 +01:00
committed by GitHub
co-authored by Evgeny Poberezkin
parent 315d830357
commit f97a1fcedf
54 changed files with 1321 additions and 94 deletions
+27 -14
View File
@@ -1,38 +1,51 @@
{% set lang = page.url | getlang %}
<section class="bg-[#D9E7ED] dark:bg-[#0E2B57] py-[50px]">
<div class="container">
<div class="flex flex-col lg:flex-row justify-between">
<div class="flex flex-col items-center lg:items-start">
<a href="{% getlangRoute page.url %}/" class="h-full mb-14 dark:hidden"><img class="w-auto h-[32px]" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="{% getlangRoute page.url %}/" class="h-full mb-14 hidden dark:inline-block"><img class="w-auto h-[32px]" src="/img/new/logo-dark.png" alt="logo" /></a>
<a href="/{{ '' if lang == 'en' else lang }}" class="h-full mb-14 dark:hidden"><img class="w-auto h-[32px]" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/{{ '' if lang == 'en' else lang }}" class="h-full mb-14 hidden dark:inline-block"><img class="w-auto h-[32px]" src="/img/new/logo-dark.png" alt="logo" /></a>
<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="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
SimpleX Whitepaper</a>
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3 flex items-center gap-1">
SimpleX Whitepaper
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a>
<a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/protocol/simplex-chat.md"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
{{ "simplex-chat-protocol" | i18n({}, lang ) | safe }}</a>
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3 flex items-center gap-1">
{{ "simplex-chat-protocol" | i18n({}, lang ) | safe }}
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a>
<a href="https://github.com/simplex-chat/simplex-chat/blob/stable/PRIVACY.md"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
{{ "terms-and-privacy-policy" | i18n({}, lang ) | safe }}</a>
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3 flex items-center gap-1">
{{ "terms-and-privacy-policy" | i18n({}, lang ) | safe }}
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a>
<a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
{{ "donate" | i18n({}, lang ) | safe }}</a>
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3 flex items-center gap-1">
{{ "donate" | i18n({}, lang ) | safe }}
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a>
</div>
<div class="flex flex-col items-center lg:items-start">
<a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/CLI.md"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
{{ "terminal-cli" | i18n({}, lang ) | safe }}</a>
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3 flex items-center gap-1">
{{ "terminal-cli" | i18n({}, lang ) | safe }}
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a>
<a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
TypeScript SDK</a>
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3 flex items-center gap-1">
TypeScript SDK
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a>
</div>
</div>
</div>
@@ -25,6 +25,7 @@
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico" />
<link href="/css/tailwind.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/blog.css" />
<link rel="stylesheet" href="/css/prism.min.css"/>
<link href="/css/style.css" rel="stylesheet" />
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
@@ -41,6 +42,7 @@
</section>
{% include "footer.html" %}
<script src="/js/prism.min.js"></script>
</body>
</html>
+123
View File
@@ -0,0 +1,123 @@
{% set lang = page.url | getlang %}
<!DOCTYPE html>
<html lang="{{ page.url | getlang }}"
{% for language in languages.languages %}
{% if language.label == page.url | getlang %}
dir="{{ "rtl" if language.rtl else "ltr" }}"
{% endif %}
{% endfor %}>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<meta name="Content-Type" content="text/html;charset=utf-8"/>
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico"/>
<link href="/css/tailwind.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/prism.min.css"/>
<link href="/css/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/doc.css"/>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body class="bg-[#F3F6F7] dark:bg-[#0C0B13]">
<section class="w-full bg-transparent fixed top-0 z-50">
{% include "navbar.html" %}
</section>
<section id="doc" class="bg-white dark:bg-[#17203D] mt-[66px]">
<div>
<main>
<aside class="sidebar px-4 lg:px-7">
<div class="h-[66px] lg:h-0">
<a href="/{{ '' if lang == 'en' else lang }}" class="h-full flex dark:hidden lg:hidden items-center ltr:mr-auto rtl:ml-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-light.png" alt="logo"/></a>
<a href="/{{ '' if lang == 'en' else lang }}" class="h-full hidden dark:flex dark:lg:hidden items-center ltr:mr-auto rtl:ml-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-dark.png" alt="logo"/></a>
</div>
<ul class="!my-4">
{% for doc in collections.docs %}
{% set hasMenu = false %}
{% for checkDoc in collections.docs %}
{% if checkDoc.lang == lang and checkDoc.menu == doc.menu %}
{% set hasMenu = true %}
{% endif %}
{% endfor %}
{% if hasMenu %}
{% if doc.lang == page.url | getlang %}
<p class="">{{ doc.menu | capitalize }}</p>
<ul>
{% for submenu in doc.data %}
<li>
<a class="{{ "active" if page.url == submenu.url | url else '' }}" href="{{ submenu.url | url }}">{{ submenu.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% else %}
<p class="">{{ doc.menu | capitalize }}</p>
<ul>
{% for submenu in doc.data %}
<li>
<a class="{{ "active" if page.url == submenu.url | url else '' }}" href="{{ submenu.url | url }}">{{ submenu.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</ul>
</aside>
<article class="content px-4 lg:px-7">
{% if version == 'old' %}
<div class="px-4 lg:px-7 !py-2">
<div class="bg-yellow-200 px-4 lg:px-7 py-6 rounded-md">
{{ "newer-version-of-eng-msg" | i18n({}, lang ) | safe }} <a class="!no-underline !text-primary-pressed-light" href="{% completeRoute {url:page.url,lang:'en'} %}">{{ "click-to-see" | i18n({}, lang ) | safe }}</a>
</div>
</div>
{% endif %}
<div class="sticky top-[66px] bg-white dark:bg-[#17203D] z-[49] !py-2 lg:hidden">
<div class="relative flex items-center justify-between">
<button class="menu flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="menu-icon h-4 w-4 fill-[rgb(60,60,60)] dark:fill-white">
<path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path>
<path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path>
<path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path>
<path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path>
</svg>
<span class="!text-[rgb(60,60,60)] dark:!text-white">{{ "menu" | i18n({}, lang ) | safe }}</span>
</button>
<div class="nav-link">
<a href="javascript:void(0);" class="flex items-center gap-2 !no-underline !text-[rgb(60,60,60)] dark:!text-white">
<span class="">{{ "on-this-page" | i18n({}, lang ) | safe }}</span>
<span href="" id="btn-mobile" class="flex items-center justify-center h-auto w-auto mt-1">
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
</svg>
</span>
</a>
<ul class="flex flex-col items-start gap-2 absolute bg-white dark:bg-black top-full left-0 right-0 mt-[10px] w-full h-auto rounded-md shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu hash-list">
<li class="mb-5">
<a href="#" id="back-to-top">{{ "back-to-top" | i18n({}, lang ) | safe }}</a>
</li>
</ul>
</div>
</div>
</div>
<div>{{ content | safe }}</div>
</article>
</main>
</div>
</section>
{% include "footer.html" %}
<script src="/js/docs.js"></script>
<script src="/js/prism.min.js"></script>
</body>
</html>
+102 -49
View File
@@ -1,16 +1,24 @@
{% set lang = page.url | getlang %}
{% set langName = "aaa" %}
{% for language in languages.languages %}
{% if language.label == page.url | getlang %}
{% set langName = language.name %}
{% endif %}
{% endfor %}
<header class="">
<div class="flex items-center flex-row justify-end m-auto px-4 lg:px-7 h-[66px]">
<a href="{% getlangRoute page.url %}/" class="h-full hidden dark:hidden lg:flex items-center ltr:mr-auto rtl:ml-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="{% getlangRoute page.url %}/" class="h-full hidden dark:lg:flex items-center ltr:mr-auto rtl:ml-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-dark.png" alt="logo" /></a>
<a href="{% getlangRoute page.url %}/" class="dark:hidden lg:hidden ltr:mr-auto rtl:ml-auto"><img class="h-[32px]" src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="{% getlangRoute page.url %}/" class="hidden dark:inline-block dark:lg:hidden lg:hidden ltr:mr-auto rtl:ml-auto"><img class="h-[32px]" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<a href="/{{ '' if lang == 'en' else lang }}" class="h-full hidden dark:hidden lg:flex items-center ltr:mr-auto rtl:ml-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/{{ '' if lang == 'en' else lang }}" class="h-full hidden dark:lg:flex items-center ltr:mr-auto rtl:ml-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-dark.png" alt="logo" /></a>
<a href="/{{ '' if lang == 'en' else lang }}" class="dark:hidden lg:hidden ltr:mr-auto rtl:ml-auto"><img class="h-[32px]" src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/{{ '' if lang == 'en' else lang }}" class="hidden dark:inline-block dark:lg:hidden lg:hidden ltr:mr-auto rtl:ml-auto"><img class="h-[32px]" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<nav class="bg-[#F0F1F2] dark:bg-gradient-radial-mobile dark:lg:bg-none lg:bg-transparent fixed top-[66px] left-0 right-0 bottom-0 lg:top-0 lg:relative" id="menu">
<div class="flex flex-col lg:flex-row justify-between lg:items-center gap-5 xl:gap-10 px-4 lg:px-0 h-full">
<div class="flex flex-col lg:flex-row justify-between lg:items-center gap-5 xl:gap-10 px-4 lg:px-0 h-full">
<ul class="flex flex-col lg:flex-row lg:items-center gap-3 py-4 lg:py-0 lg:gap-5 xl:gap-8">
<li class="nav-link relative {% if active_home %}active{% endif %}">
<a href="{% getlangRoute page.url %}/" class="flex items-center justify-between gap-2 lg:py-5 ">
<a href="/{{ '' if lang == 'en' else lang }}" class="flex items-center justify-between gap-2 lg:py-5 whitespace-nowrap">
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">{{ "home" | i18n({}, lang ) | safe }}</span>
</a>
</li>
@@ -19,7 +27,7 @@
<li class="nav-link relative">
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
<span class="text-[16px] leading-[26px] tracking-[0.01em] text-black dark:text-white before:bg-black dark:before:bg-white">{{ "developers" | i18n({}, lang ) | safe }}</span>
<span class="text-[16px] leading-[26px] tracking-[0.01em] text-black dark:text-white before:bg-black dark:before:bg-white">{{ "guide" | i18n({}, lang ) | safe }}</span>
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1">
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
@@ -27,20 +35,11 @@
</span>
</a>
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white dark:lg:bg-black top-full lg:mt-[10px] lg:py-4 min-w-[200px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu">
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/apps/simplex-bot-advanced/Main.hs"
target="_blank" class="lg:px-[20px] inline-block"
>{{ "chat-bot-example" | i18n({}, lang ) | safe }}</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript"
target="_blank" class="lg:px-[20px] inline-block"
>TypeScript SDK</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/CLI.md"
target="_blank" class="lg:px-[20px] inline-block"
>{{ "terminal-cli" | i18n({}, lang ) | safe }}</a></li>
<li><a href="https://github.com/simplex-chat/simplexmq"
target="_blank" class="lg:px-[20px] inline-block"
>SimpleXMQ</a></li>
</ul>
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white dark:lg:bg-black top-full lg:mt-[10px] lg:py-4 min-w-[180px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu">
{% for guide in guide_dropdown.items %}
<li><a href="{{ guide.url | url }}" class="{{ "active" if page.url == guide.url | url else '' }} lg:px-[20px] inline-block whitespace-nowrap">{{ guide.title | i18n({}, lang ) | safe }}</a></li>
{% endfor %}
</ul>
</li>
<hr class="dark:opacity-[0.1]" >
@@ -57,14 +56,43 @@
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white dark:lg:bg-black top-full lg:mt-[10px] lg:py-4 min-w-[180px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu">
<li><a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md"
target="_blank" class="lg:px-[20px] inline-block"
>Whitepaper</a></li>
target="_blank" class="lg:px-[20px] flex items-center gap-1"
>Whitepaper
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a></li>
<li><a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/simplex-messaging.md"
target="_blank" class="lg:px-[20px] inline-block"
>{{ "smp-protocol" | i18n({}, lang ) | safe }}</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/protocol/simplex-chat.md"
target="_blank" class="lg:px-[20px] inline-block"
target="_blank" class="lg:px-[20px] flex items-center gap-1"
>{{ "smp-protocol" | i18n({}, lang ) | safe }}
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a></li>
<li><a href="/docs/protocol/simplex-chat.html" class="lg:px-[20px] inline-block"
>{{ "chat-protocol" | i18n({}, lang ) | safe }}</a></li>
<hr class=" h-[1px] w-full dark:opacity-[0.1]">
{% for doc in docs_dropdown.items %}
<li><a href="{{ doc.url | url }}" class="{{ "active" if page.url == doc.url | url else '' }} lg:px-[20px] inline-block whitespace-nowrap">{{ doc.title | i18n({}, lang ) | safe }}</a></li>
{% endfor %}
<hr class=" h-[1px] w-full dark:opacity-[0.1]">
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/apps/simplex-bot-advanced/Main.hs"
target="_blank" class="lg:px-[20px] flex items-center gap-1"
>{{ "chat-bot-example" | i18n({}, lang ) | safe }}
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript"
target="_blank" class="lg:px-[20px] flex items-center gap-1"
>TypeScript SDK
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a></li>
<li><a href="/docs/cli.html" class="lg:px-[20px] inline-block"
>{{ "terminal-cli" | i18n({}, lang ) | safe }}</a></li>
<li><a href="https://github.com/simplex-chat/simplexmq"
target="_blank" class="lg:px-[20px] flex items-center gap-1"
>SimpleXMQ
<svg class="float-right" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a></li>
</ul>
</li>
@@ -78,8 +106,9 @@
</ul>
<a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations"
target="_blank" class="whitespace-nowrap inline-block self-center text-white dark:text-black text-[16px] font-medium tracking-[0.02em] rounded-[34px] bg-primary-light dark:bg-primary-dark py-3 lg:py-2 px-20 lg:px-5 mb-16 lg:mb-0"
>{{ "donate" | i18n({}, lang ) | safe }}</a>
target="_blank" class="whitespace-nowrap flex items-center gap-1 self-center text-white dark:text-black text-[16px] font-medium tracking-[0.02em] rounded-[34px] bg-primary-light dark:bg-primary-dark py-3 lg:py-2 px-20 lg:px-5 mb-16 lg:mb-0"
>{{ "donate" | i18n({}, lang ) | safe }}
</a>
<div class="inline-block dark:hidden self-center mt-[8px]">
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
@@ -110,26 +139,50 @@
{% endfor %}
</a>
<ul class="flex flex-col items-start gap-2 h-fit absolute top-11 -right-14 bg-white dark:bg-black mt-[10px] py-4 px-5 min-w-[170px] rounded-md shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu overflow-auto">
{% for language in languages.languages %}
{% if language.enabled %}
<li>
{% if language.flag %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flex items-center gap-4 flag-anchor whitespace-nowrap w-max">
<img class="h-4" src="{{ language.flag }}" alt="" srcset="">
<p>{{ language.name }}</p>
</a>
{% else %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flex items-center gap-4 flag-anchor whitespace-nowrap w-max">
<div class="flex items-center justify-center" style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:21.33px; height:16px">
<p style="text-align:center; font-size:7px">{{ language.iconText }}</p>
</div>
<p>{{ language.name }}</p>
</a>
{% endif %}
</li>
{% endif %}
{% endfor %}
<ul class="flex flex-col items-start gap-2 h-fit absolute top-11 -left-10 bg-white dark:bg-black mt-[10px] py-4 min-w-[170px] rounded-md shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu overflow-auto">
{% if "docs" in page.url %}
{% for supportedLang in supportedLangsForDoc %}
{% for language in languages.languages %}
{% if language.label == supportedLang %}
<li>
{% if language.flag %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="px-[20px] flex items-center gap-4 flag-anchor">
<img class="h-4" src="{{ language.flag }}" alt="" srcset="">
<p>{{ language.name }}</p>
</a>
{% else %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="px-[20px] flex items-center gap-4 flag-anchor">
<div class="flex items-center justify-center" style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:21.33px; height:16px">
<p style="text-align:center; font-size:7px">{{ language.iconText }}</p>
</div>
<p>{{ language.name }}</p>
</a>
{% endif %}
</li>
{% endif %}
{% endfor %}
{% endfor %}
{% else %}
{% for language in languages.languages %}
{% if language.enabled %}
<li>
{% if language.flag %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="px-[20px] flex items-center gap-4 flag-anchor">
<img class="h-4" src="{{ language.flag }}" alt="" srcset="">
<p>{{ language.name }}</p>
</a>
{% else %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="px-[20px] flex items-center gap-4 flag-anchor">
<div class="flex items-center justify-center" style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:21.33px; height:16px">
<p style="text-align:center; font-size:7px">{{ language.iconText }}</p>
</div>
<p>{{ language.name }}</p>
</a>
{% endif %}
</li>
{% endif %}
{% endfor %}
{% endif %}
</ul>
</div>
{% endif %}