From e94e5f36715a02b8169a4dc2b2f56b9634111fbf Mon Sep 17 00:00:00 2001
From: Vladislav Kibenko <wolfram.deus@gmail.com>
Date: Fri, 17 Nov 2023 19:01:59 +0300
Subject: [PATCH 1/3] feat(docs): split docs on "Platform" and "Packages"

---
 apps/docs/.vitepress/config.mts               | 197 +------
 apps/docs/.vitepress/packages.ts              | 103 ++++
 apps/docs/.vitepress/platform.ts              |  64 +++
 apps/docs/{ => docs}/about-platform.md        |   0
 .../{ => docs}/apps-communication/events.md   |   0
 .../apps-communication/flow-definition.md     |   0
 .../{ => docs}/apps-communication/methods.md  |   0
 .../functionality/closing-behavior.md         |   0
 .../functionality/haptic-feedback.md          |   0
 apps/docs/{ => docs}/functionality/theming.md |   0
 .../docs/{ => docs}/functionality/viewport.md |   0
 .../{ => docs}/guides/creating-new-app.md     |   0
 .../launch-parameters/common-information.md   |   0
 .../{ => docs}/launch-parameters/init-data.md |   0
 apps/docs/{ => docs}/test-environment.md      |   0
 apps/docs/{ => docs}/ui/back-button.md        |   0
 apps/docs/{ => docs}/ui/main-button.md        |   0
 apps/docs/{ => docs}/ui/popup.md              |   0
 apps/docs/{ => docs}/ui/settings-button.md    |   0
 apps/docs/packages/golang/init-data-golang.md |   2 +-
 .../tma-js-init-data-node.md                  |   6 +-
 .../typescript/tma-js-init-data/about.md      |   4 +-
 .../typescript/tma-js-launch-params.md        |   2 +-
 .../packages/typescript/tma-js-sdk/about.md   |   4 +-
 .../tma-js-sdk/components/back-button.md      |   2 +-
 .../components/closing-behaviour.md           |   2 +-
 .../tma-js-sdk/components/haptic-feedback.md  |   2 +-
 .../tma-js-sdk/components/init-data.md        |   2 +-
 .../tma-js-sdk/components/main-button.md      |   2 +-
 .../typescript/tma-js-sdk/components/popup.md |   2 +-
 .../tma-js-sdk/components/theme-params.md     |   2 +-
 .../tma-js-sdk/components/viewport.md         |   2 +-
 .../tma-js-sdk/components/web-app.md          |   2 +-
 .../typescript/tma-js-theme-params.md         |   2 +-
 apps/docs/platform/about-platform.md          |  75 +++
 .../platform/apps-communication/events.md     | 254 ++++++++
 .../apps-communication/flow-definition.md     |  23 +
 .../platform/apps-communication/methods.md    | 544 ++++++++++++++++++
 .../functionality/closing-behavior.md         |  14 +
 .../platform/functionality/haptic-feedback.md |  23 +
 apps/docs/platform/functionality/theming.md   |  62 ++
 apps/docs/platform/functionality/viewport.md  |  31 +
 apps/docs/platform/guides/creating-new-app.md | 178 ++++++
 .../launch-parameters/common-information.md   | 103 ++++
 .../platform/launch-parameters/init-data.md   | 344 +++++++++++
 apps/docs/platform/test-environment.md        |  31 +
 apps/docs/platform/ui/back-button.md          |  17 +
 apps/docs/platform/ui/main-button.md          |  26 +
 apps/docs/platform/ui/popup.md                |  13 +
 apps/docs/platform/ui/settings-button.md      |  16 +
 50 files changed, 1953 insertions(+), 203 deletions(-)
 create mode 100644 apps/docs/.vitepress/packages.ts
 create mode 100644 apps/docs/.vitepress/platform.ts
 rename apps/docs/{ => docs}/about-platform.md (100%)
 rename apps/docs/{ => docs}/apps-communication/events.md (100%)
 rename apps/docs/{ => docs}/apps-communication/flow-definition.md (100%)
 rename apps/docs/{ => docs}/apps-communication/methods.md (100%)
 rename apps/docs/{ => docs}/functionality/closing-behavior.md (100%)
 rename apps/docs/{ => docs}/functionality/haptic-feedback.md (100%)
 rename apps/docs/{ => docs}/functionality/theming.md (100%)
 rename apps/docs/{ => docs}/functionality/viewport.md (100%)
 rename apps/docs/{ => docs}/guides/creating-new-app.md (100%)
 rename apps/docs/{ => docs}/launch-parameters/common-information.md (100%)
 rename apps/docs/{ => docs}/launch-parameters/init-data.md (100%)
 rename apps/docs/{ => docs}/test-environment.md (100%)
 rename apps/docs/{ => docs}/ui/back-button.md (100%)
 rename apps/docs/{ => docs}/ui/main-button.md (100%)
 rename apps/docs/{ => docs}/ui/popup.md (100%)
 rename apps/docs/{ => docs}/ui/settings-button.md (100%)
 rename apps/docs/packages/{typescript => node}/tma-js-init-data-node.md (89%)
 create mode 100644 apps/docs/platform/about-platform.md
 create mode 100644 apps/docs/platform/apps-communication/events.md
 create mode 100644 apps/docs/platform/apps-communication/flow-definition.md
 create mode 100644 apps/docs/platform/apps-communication/methods.md
 create mode 100644 apps/docs/platform/functionality/closing-behavior.md
 create mode 100644 apps/docs/platform/functionality/haptic-feedback.md
 create mode 100644 apps/docs/platform/functionality/theming.md
 create mode 100644 apps/docs/platform/functionality/viewport.md
 create mode 100644 apps/docs/platform/guides/creating-new-app.md
 create mode 100644 apps/docs/platform/launch-parameters/common-information.md
 create mode 100644 apps/docs/platform/launch-parameters/init-data.md
 create mode 100644 apps/docs/platform/test-environment.md
 create mode 100644 apps/docs/platform/ui/back-button.md
 create mode 100644 apps/docs/platform/ui/main-button.md
 create mode 100644 apps/docs/platform/ui/popup.md
 create mode 100644 apps/docs/platform/ui/settings-button.md

diff --git a/apps/docs/.vitepress/config.mts b/apps/docs/.vitepress/config.mts
index 8e6855f37..487d4ba57 100644
--- a/apps/docs/.vitepress/config.mts
+++ b/apps/docs/.vitepress/config.mts
@@ -1,5 +1,8 @@
 import { defineConfig } from 'vitepress';
 
+import { packagesNavItem, packagesSidebar } from './packages';
+import { platformNavItem, platformSidebar } from './platform';
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: 'Telegram Mini Apps',
@@ -12,17 +15,6 @@ export default defineConfig({
       label: 'English',
       lang: 'en',
     },
-    // ru: {
-    //   label: 'Русский',
-    //   lang: 'ru',
-    //   description: 'Документация, покрывающая все аспекты платформы Telegram - Telegram Mini Apps.',
-    //   themeConfig: {
-    //     editLink: {
-    //       text: 'Редактировать эту страницу на GitHub',
-    //       pattern: 'https://github.com/telegram-mini-apps/tma.js/edit/master/apps/docs/src/:path',
-    //     },
-    //   },
-    // },
   },
 
   // Show when each page content was last updated.
@@ -64,187 +56,24 @@ export default defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
-      { text: 'Documentation', link: '/about-platform' },
+      platformNavItem,
+      packagesNavItem,
     ],
 
     // https://vitepress.dev/reference/default-theme-sidebar
-    sidebar: [
-      {
-        text: 'Common information',
-        items: [
-          { text: 'About platform', link: '/about-platform' },
-          { text: 'Test environment', link: '/test-environment' },
-        ],
-      },
-
-      {
-        text: 'Apps communication',
-        items: [
-          { text: 'Flow definition', link: '/apps-communication/flow-definition' },
-          { text: 'Methods', link: '/apps-communication/methods' },
-          { text: 'Events', link: '/apps-communication/events' },
-        ],
-      },
-
-      {
-        text: 'Launch parameters',
-        items: [
-          { text: 'Common information', link: '/launch-parameters/common-information' },
-          { text: 'Init data', link: '/launch-parameters/init-data' },
-        ],
-      },
-
-      {
-        text: 'Functionality',
-        items: [
-          { text: 'Closing behavior', link: '/functionality/closing-behavior' },
-          { text: 'Haptic feedback', link: '/functionality/haptic-feedback' },
-          { text: 'Theming', link: '/functionality/theming' },
-          { text: 'Viewport', link: '/functionality/viewport' },
-        ],
-      },
-
-      {
-        text: 'UI',
-        items: [
-          { text: 'Back Button', link: '/ui/back-button' },
-          { text: 'Main Button', link: '/ui/main-button' },
-          { text: 'Popup', link: '/ui/popup' },
-          { text: 'Settings Button', link: '/ui/settings-button' },
-        ],
-      },
-
-      {
-        text: 'Packages',
-        items: [
-          {
-            text: 'TypeScript',
-            collapsed: true,
-            items: [
-              { text: '@tma.js/bridge', link: '/packages/typescript/tma-js-bridge' },
-              {
-                text: '@tma.js/init-data',
-                collapsed: true,
-                items: [
-                  { text: 'About', link: '/packages/typescript/tma-js-init-data/about' },
-                  { text: 'InitData', link: '/packages/typescript/tma-js-init-data/init-data' },
-                  { text: 'Chat', link: '/packages/typescript/tma-js-init-data/chat' },
-                  { text: 'User', link: '/packages/typescript/tma-js-init-data/user' },
-                ],
-              },
-              {
-                text: '@tma.js/init-data-node',
-                link: '/packages/typescript/tma-js-init-data-node',
-              },
-              { text: '@tma.js/launch-params', link: '/packages/typescript/tma-js-launch-params' },
-              { text: '@tma.js/theme-params', link: '/packages/typescript/tma-js-theme-params' },
-              { text: '@tma.js/navigation', link: '/packages/typescript/tma-js-navigation' },
-              {
-                text: '@tma.js/sdk',
-                collapsed: true,
-                items: [
-                  { text: 'About', link: '/packages/typescript/tma-js-sdk/about' },
-                  {
-                    text: 'Components',
-                    collapsed: true,
-                    items: [
-                      {
-                        text: 'BackButton',
-                        link: '/packages/typescript/tma-js-sdk/components/back-button',
-                      },
-                      {
-                        text: 'ClosingBehavior',
-                        link: '/packages/typescript/tma-js-sdk/components/closing-behaviour',
-                      },
-                      {
-                        text: 'HapticFeedback',
-                        link: '/packages/typescript/tma-js-sdk/components/haptic-feedback',
-                      },
-                      {
-                        text: 'InitData',
-                        link: '/packages/typescript/tma-js-sdk/components/init-data',
-                      },
-                      {
-                        text: 'MainButton',
-                        link: '/packages/typescript/tma-js-sdk/components/main-button',
-                      },
-                      {
-                        text: 'Popup',
-                        link: '/packages/typescript/tma-js-sdk/components/popup',
-                      },
-                      {
-                        text: 'QRScanner',
-                        link: '/packages/typescript/tma-js-sdk/components/qr-scanner',
-                      },
-                      {
-                        text: 'ThemeParams',
-                        link: '/packages/typescript/tma-js-sdk/components/theme-params',
-                      },
-                      {
-                        text: 'Viewport',
-                        link: '/packages/typescript/tma-js-sdk/components/viewport',
-                      },
-                      // TODO: Rename?
-                      {
-                        text: 'WebApp',
-                        link: '/packages/typescript/tma-js-sdk/components/web-app',
-                      },
-                    ],
-                  },
-                ],
-              },
-              { text: '@tma.js/sdk-react', link: '/packages/typescript/tma-js-sdk-react' },
-              { text: '@tma.js/sdk-solid', link: '/packages/typescript/tma-js-sdk-solid' },
-            ],
-          },
-          {
-            text: 'GoLang',
-            collapsed: true,
-            items: [
-              { text: 'init-data-golang', link: '/packages/golang/init-data-golang' },
-            ],
-          },
-        ],
-      },
-
-      {
-        text: 'Guides',
-        items: [
-          { text: 'Creating new app', link: '/guides/creating-new-app' },
-        ],
-      },
-    ],
+    sidebar: {
+      ...packagesSidebar,
+      ...platformSidebar,
+    },
 
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/telegram-mini-apps' },
-    ],
+    socialLinks: [{
+      icon: 'github',
+      link: 'https://github.com/telegram-mini-apps',
+    }],
 
     search: {
       // TODO: Probably replace with Algolia.
       provider: 'local',
-      // options: {
-      //   locales: {
-      //     ru: {
-      //       translations: {
-      //         button: {
-      //           buttonText: 'Поиск',
-      //           buttonAriaLabel: 'Поиск',
-      //         },
-      //         modal: {
-      //           noResultsText: 'Не удалось ничего найти по запросу',
-      //           backButtonTitle: 'закрыть',
-      //           displayDetails: 'Отобразить подробные данные',
-      //           resetButtonTitle: 'Сбросить',
-      //           footer: {
-      //             selectText: 'выбрать',
-      //             navigateText: 'для навигации',
-      //             closeText: 'закрыть',
-      //           },
-      //         },
-      //       },
-      //     },
-      //   },
-      // },
     },
   },
 });
diff --git a/apps/docs/.vitepress/packages.ts b/apps/docs/.vitepress/packages.ts
new file mode 100644
index 000000000..e1f643b5e
--- /dev/null
+++ b/apps/docs/.vitepress/packages.ts
@@ -0,0 +1,103 @@
+function prefixed(value: string): string {
+  return `/packages${value}`;
+}
+
+export const packagesNavItem = {
+  text: 'Packages',
+  link: prefixed('/typescript/tma-js-bridge'),
+};
+
+export const packagesSidebar = {
+  [prefixed('/')]: [
+    {
+      text: 'TypeScript',
+      items: [
+        { text: '@tma.js/bridge', link: prefixed('/typescript/tma-js-bridge') },
+        {
+          text: '@tma.js/init-data',
+          collapsed: true,
+          items: [
+            { text: 'About', link: prefixed('/typescript/tma-js-init-data/about') },
+            { text: 'InitData', link: prefixed('/typescript/tma-js-init-data/init-data') },
+            { text: 'Chat', link: prefixed('/typescript/tma-js-init-data/chat') },
+            { text: 'User', link: prefixed('/typescript/tma-js-init-data/user') },
+          ],
+        },
+        {
+          text: '@tma.js/launch-params',
+          link: prefixed('/typescript/tma-js-launch-params'),
+        },
+        { text: '@tma.js/theme-params', link: prefixed('/typescript/tma-js-theme-params') },
+        { text: '@tma.js/navigation', link: prefixed('/typescript/tma-js-navigation') },
+        {
+          text: '@tma.js/sdk',
+          collapsed: true,
+          items: [
+            { text: 'About', link: prefixed('/typescript/tma-js-sdk/about') },
+            {
+              text: 'Components',
+              collapsed: true,
+              items: [
+                {
+                  text: 'BackButton',
+                  link: prefixed('/typescript/tma-js-sdk/components/back-button'),
+                },
+                {
+                  text: 'ClosingBehavior',
+                  link: prefixed('/typescript/tma-js-sdk/components/closing-behaviour'),
+                },
+                {
+                  text: 'HapticFeedback',
+                  link: prefixed('/typescript/tma-js-sdk/components/haptic-feedback'),
+                },
+                {
+                  text: 'InitData',
+                  link: prefixed('/typescript/tma-js-sdk/components/init-data'),
+                },
+                {
+                  text: 'MainButton',
+                  link: prefixed('/typescript/tma-js-sdk/components/main-button'),
+                },
+                {
+                  text: 'Popup',
+                  link: prefixed('/typescript/tma-js-sdk/components/popup'),
+                },
+                {
+                  text: 'QRScanner',
+                  link: prefixed('/typescript/tma-js-sdk/components/qr-scanner'),
+                },
+                {
+                  text: 'ThemeParams',
+                  link: prefixed('/typescript/tma-js-sdk/components/theme-params'),
+                },
+                {
+                  text: 'Viewport',
+                  link: prefixed('/typescript/tma-js-sdk/components/viewport'),
+                },
+                // TODO: Rename?
+                {
+                  text: 'WebApp',
+                  link: prefixed('/typescript/tma-js-sdk/components/web-app'),
+                },
+              ],
+            },
+          ],
+        },
+        { text: '@tma.js/sdk-react', link: prefixed('/typescript/tma-js-sdk-react') },
+        { text: '@tma.js/sdk-solid', link: prefixed('/typescript/tma-js-sdk-solid') },
+      ],
+    },
+    {
+      text: 'Node',
+      items: [
+        { text: '@tma.js/init-data-node', link: prefixed('/node/tma-js-init-data-node') },
+      ],
+    },
+    {
+      text: 'GoLang',
+      items: [
+        { text: 'init-data-golang', link: prefixed('/golang/init-data-golang') },
+      ],
+    },
+  ],
+};
\ No newline at end of file
diff --git a/apps/docs/.vitepress/platform.ts b/apps/docs/.vitepress/platform.ts
new file mode 100644
index 000000000..002d5ac3a
--- /dev/null
+++ b/apps/docs/.vitepress/platform.ts
@@ -0,0 +1,64 @@
+function prefixed(value: string): string {
+  return `/platform${value}`;
+}
+
+export const platformNavItem = {
+  text: 'Platform',
+  link: prefixed('/about-platform'),
+};
+
+export const platformSidebar = {
+  [prefixed('/')]: [
+    {
+      text: 'Common information',
+      items: [
+        { text: 'About platform', link: prefixed('/about-platform') },
+        { text: 'Test environment', link: prefixed('/test-environment') },
+      ],
+    },
+
+    {
+      text: 'Apps communication',
+      items: [
+        { text: 'Flow definition', link: prefixed('/apps-communication/flow-definition') },
+        { text: 'Methods', link: prefixed('/apps-communication/methods') },
+        { text: 'Events', link: prefixed('/apps-communication/events') },
+      ],
+    },
+
+    {
+      text: 'Launch parameters',
+      items: [
+        { text: 'Common information', link: prefixed('/launch-parameters/common-information') },
+        { text: 'Init data', link: prefixed('/launch-parameters/init-data') },
+      ],
+    },
+
+    {
+      text: 'Functionality',
+      items: [
+        { text: 'Closing behavior', link: prefixed('/functionality/closing-behavior') },
+        { text: 'Haptic feedback', link: prefixed('/functionality/haptic-feedback') },
+        { text: 'Theming', link: prefixed('/functionality/theming') },
+        { text: 'Viewport', link: prefixed('/functionality/viewport') },
+      ],
+    },
+
+    {
+      text: 'UI',
+      items: [
+        { text: 'Back Button', link: prefixed('/ui/back-button') },
+        { text: 'Main Button', link: prefixed('/ui/main-button') },
+        { text: 'Popup', link: prefixed('/ui/popup') },
+        { text: 'Settings Button', link: prefixed('/ui/settings-button') },
+      ],
+    },
+
+    {
+      text: 'Guides',
+      items: [
+        { text: 'Creating new app', link: prefixed('/guides/creating-new-app') },
+      ],
+    },
+  ],
+};
\ No newline at end of file
diff --git a/apps/docs/about-platform.md b/apps/docs/docs/about-platform.md
similarity index 100%
rename from apps/docs/about-platform.md
rename to apps/docs/docs/about-platform.md
diff --git a/apps/docs/apps-communication/events.md b/apps/docs/docs/apps-communication/events.md
similarity index 100%
rename from apps/docs/apps-communication/events.md
rename to apps/docs/docs/apps-communication/events.md
diff --git a/apps/docs/apps-communication/flow-definition.md b/apps/docs/docs/apps-communication/flow-definition.md
similarity index 100%
rename from apps/docs/apps-communication/flow-definition.md
rename to apps/docs/docs/apps-communication/flow-definition.md
diff --git a/apps/docs/apps-communication/methods.md b/apps/docs/docs/apps-communication/methods.md
similarity index 100%
rename from apps/docs/apps-communication/methods.md
rename to apps/docs/docs/apps-communication/methods.md
diff --git a/apps/docs/functionality/closing-behavior.md b/apps/docs/docs/functionality/closing-behavior.md
similarity index 100%
rename from apps/docs/functionality/closing-behavior.md
rename to apps/docs/docs/functionality/closing-behavior.md
diff --git a/apps/docs/functionality/haptic-feedback.md b/apps/docs/docs/functionality/haptic-feedback.md
similarity index 100%
rename from apps/docs/functionality/haptic-feedback.md
rename to apps/docs/docs/functionality/haptic-feedback.md
diff --git a/apps/docs/functionality/theming.md b/apps/docs/docs/functionality/theming.md
similarity index 100%
rename from apps/docs/functionality/theming.md
rename to apps/docs/docs/functionality/theming.md
diff --git a/apps/docs/functionality/viewport.md b/apps/docs/docs/functionality/viewport.md
similarity index 100%
rename from apps/docs/functionality/viewport.md
rename to apps/docs/docs/functionality/viewport.md
diff --git a/apps/docs/guides/creating-new-app.md b/apps/docs/docs/guides/creating-new-app.md
similarity index 100%
rename from apps/docs/guides/creating-new-app.md
rename to apps/docs/docs/guides/creating-new-app.md
diff --git a/apps/docs/launch-parameters/common-information.md b/apps/docs/docs/launch-parameters/common-information.md
similarity index 100%
rename from apps/docs/launch-parameters/common-information.md
rename to apps/docs/docs/launch-parameters/common-information.md
diff --git a/apps/docs/launch-parameters/init-data.md b/apps/docs/docs/launch-parameters/init-data.md
similarity index 100%
rename from apps/docs/launch-parameters/init-data.md
rename to apps/docs/docs/launch-parameters/init-data.md
diff --git a/apps/docs/test-environment.md b/apps/docs/docs/test-environment.md
similarity index 100%
rename from apps/docs/test-environment.md
rename to apps/docs/docs/test-environment.md
diff --git a/apps/docs/ui/back-button.md b/apps/docs/docs/ui/back-button.md
similarity index 100%
rename from apps/docs/ui/back-button.md
rename to apps/docs/docs/ui/back-button.md
diff --git a/apps/docs/ui/main-button.md b/apps/docs/docs/ui/main-button.md
similarity index 100%
rename from apps/docs/ui/main-button.md
rename to apps/docs/docs/ui/main-button.md
diff --git a/apps/docs/ui/popup.md b/apps/docs/docs/ui/popup.md
similarity index 100%
rename from apps/docs/ui/popup.md
rename to apps/docs/docs/ui/popup.md
diff --git a/apps/docs/ui/settings-button.md b/apps/docs/docs/ui/settings-button.md
similarity index 100%
rename from apps/docs/ui/settings-button.md
rename to apps/docs/docs/ui/settings-button.md
diff --git a/apps/docs/packages/golang/init-data-golang.md b/apps/docs/packages/golang/init-data-golang.md
index 96d4e6f45..a35080920 100644
--- a/apps/docs/packages/golang/init-data-golang.md
+++ b/apps/docs/packages/golang/init-data-golang.md
@@ -2,7 +2,7 @@
 
 The package provides utilities to work with the initialization data of Telegram Mini Apps. To learn
 more about the initialization data and its usage, please refer to
-the [documentation](../../launch-parameters/common-information.md).
+the [documentation](../../docs/launch-parameters/common-information.md).
 
 ## Installation
 
diff --git a/apps/docs/packages/typescript/tma-js-init-data-node.md b/apps/docs/packages/node/tma-js-init-data-node.md
similarity index 89%
rename from apps/docs/packages/typescript/tma-js-init-data-node.md
rename to apps/docs/packages/node/tma-js-init-data-node.md
index 9eca9c5f4..7840c8a62 100644
--- a/apps/docs/packages/typescript/tma-js-init-data-node.md
+++ b/apps/docs/packages/node/tma-js-init-data-node.md
@@ -8,10 +8,10 @@
 
 The package provides utilities to work with the initialization data of Telegram Mini Apps on the
 server side. To learn more about the initialization data and its usage, please refer to
-the [documentation](../../launch-parameters/common-information.md).
+the [documentation](../../docs/launch-parameters/common-information.md).
 
 ::: info
-This package extends the functionality of [@tma.js/init-data](tma-js-init-data/about.md), including all
+This package extends the functionality of [@tma.js/init-data](../typescript/tma-js-init-data/about.md), including all
 its types and utilities. Therefore, there is no need to install both packages separately.
 :::
 
@@ -35,7 +35,7 @@ yarn add @tma.js/init-data-node
 
 ### Parsing
 
-You can learn more about parsing utilities in [@tma.js/init-data](tma-js-init-data/about.md#parsing)
+You can learn more about parsing utilities in [@tma.js/init-data](../typescript/tma-js-init-data/about.md#parsing)
 documentation.
 
 ### Validation
diff --git a/apps/docs/packages/typescript/tma-js-init-data/about.md b/apps/docs/packages/typescript/tma-js-init-data/about.md
index f76b8bd80..81fb9fcf1 100644
--- a/apps/docs/packages/typescript/tma-js-init-data/about.md
+++ b/apps/docs/packages/typescript/tma-js-init-data/about.md
@@ -8,7 +8,7 @@
 
 The package provides utilities to work with the initialization data of Telegram Mini Apps on the
 client side. To learn more about the initialization data and its usage, please refer to
-the [documentation](../../../launch-parameters/common-information.md).
+the [documentation](../../../docs/launch-parameters/common-information.md).
 
 ## Installation
 
@@ -72,5 +72,5 @@ to [InitData type](init-data.md) page.
 ## Validation
 
 We have moved the validation utilities to a
-separate [TypeScript package](../tma-js-init-data-node.md). These utilities are only needed on the
+separate [TypeScript package](../../node/tma-js-init-data-node.md). These utilities are only needed on the
 server side, as there is no need to validate initialization data on the client side.**
diff --git a/apps/docs/packages/typescript/tma-js-launch-params.md b/apps/docs/packages/typescript/tma-js-launch-params.md
index dc92b04d7..5d5137905 100644
--- a/apps/docs/packages/typescript/tma-js-launch-params.md
+++ b/apps/docs/packages/typescript/tma-js-launch-params.md
@@ -7,7 +7,7 @@
 ![[npm-link]][npm-shield]
 
 Provides utilities to work with Telegram Mini
-Apps [launch parameters](../../launch-parameters/common-information.md).
+Apps [launch parameters](../../docs/launch-parameters/common-information.md).
 
 ## Installation
 
diff --git a/apps/docs/packages/typescript/tma-js-sdk/about.md b/apps/docs/packages/typescript/tma-js-sdk/about.md
index b3d7e5be5..cc7443ce6 100644
--- a/apps/docs/packages/typescript/tma-js-sdk/about.md
+++ b/apps/docs/packages/typescript/tma-js-sdk/about.md
@@ -14,7 +14,7 @@ Mini Apps. It consists of several individual components, each responsible for a
 the Telegram Mini Apps ecosystem.
 
 Before you begin using the SDK, we highly recommend familiarizing yourself with the Telegram Mini
-Apps [documentation](../../../about-platform.md) to grasp the fundamental concepts of the platform.
+Apps [documentation](../../../docs/about-platform.md) to grasp the fundamental concepts of the platform.
 
 ## Installation
 
@@ -123,7 +123,7 @@ reached, an error will be thrown.
 ## Launch parameters
 
 The launch parameters are the initial parameters passed to the Mini App. You can find more
-information about them in the [documentation](../../../launch-parameters/common-information.md).
+information about them in the [documentation](../../../docs/launch-parameters/common-information.md).
 
 Developers can retrieve the launch parameters by using the `retrieveLaunchParams` function. This
 function parses the parameters that begin with the `tgWebApp` prefix.
diff --git a/apps/docs/packages/typescript/tma-js-sdk/components/back-button.md b/apps/docs/packages/typescript/tma-js-sdk/components/back-button.md
index 953f894c5..168c76b0f 100644
--- a/apps/docs/packages/typescript/tma-js-sdk/components/back-button.md
+++ b/apps/docs/packages/typescript/tma-js-sdk/components/back-button.md
@@ -1,6 +1,6 @@
 # `BackButton`
 
-Controls the [Back Button](../../../../ui/back-button.md) displayed in the header of the Mini App in
+Controls the [Back Button](../../../../docs/ui/back-button.md) displayed in the header of the Mini App in
 the Telegram interface.
 
 ## Initialization
diff --git a/apps/docs/packages/typescript/tma-js-sdk/components/closing-behaviour.md b/apps/docs/packages/typescript/tma-js-sdk/components/closing-behaviour.md
index 7a4d5b708..19e8de93c 100644
--- a/apps/docs/packages/typescript/tma-js-sdk/components/closing-behaviour.md
+++ b/apps/docs/packages/typescript/tma-js-sdk/components/closing-behaviour.md
@@ -1,7 +1,7 @@
 # `ClosingBehaviour`
 
 Controls the application closing behavior. There is more information about this functionality in
-this [documentation](../../../../functionality/closing-behavior.md).
+this [documentation](../../../../docs/functionality/closing-behavior.md).
 
 ## Initialization
 
diff --git a/apps/docs/packages/typescript/tma-js-sdk/components/haptic-feedback.md b/apps/docs/packages/typescript/tma-js-sdk/components/haptic-feedback.md
index e119721fe..6b02071ec 100644
--- a/apps/docs/packages/typescript/tma-js-sdk/components/haptic-feedback.md
+++ b/apps/docs/packages/typescript/tma-js-sdk/components/haptic-feedback.md
@@ -2,7 +2,7 @@
 
 Controls the haptic feedback. It allows calling different types of haptic notifications which
 usually occur after the user interaction with the application. There is more information about this
-component in this [documentation](../../../../functionality/haptic-feedback.md).
+component in this [documentation](../../../../docs/functionality/haptic-feedback.md).
 
 ## Initialization
 
diff --git a/apps/docs/packages/typescript/tma-js-sdk/components/init-data.md b/apps/docs/packages/typescript/tma-js-sdk/components/init-data.md
index 2698c82ee..034216b44 100644
--- a/apps/docs/packages/typescript/tma-js-sdk/components/init-data.md
+++ b/apps/docs/packages/typescript/tma-js-sdk/components/init-data.md
@@ -5,7 +5,7 @@ outline: [2, 3]
 # `InitData`
 
 The component which is responsible for displaying the Telegram Mini
-Apps [init data](../../../../launch-parameters/init-data.md). This class represents object with
+Apps [init data](../../../../docs/launch-parameters/init-data.md). This class represents object with
 readonly properties. To create its new instance, a developer could use the class constructor as
 follows:
 
diff --git a/apps/docs/packages/typescript/tma-js-sdk/components/main-button.md b/apps/docs/packages/typescript/tma-js-sdk/components/main-button.md
index 6e2bf6fc1..de05b712e 100644
--- a/apps/docs/packages/typescript/tma-js-sdk/components/main-button.md
+++ b/apps/docs/packages/typescript/tma-js-sdk/components/main-button.md
@@ -1,6 +1,6 @@
 # `MainButton`
 
-The component which controls the [Main Button](../../../../ui/main-button.md).
+The component which controls the [Main Button](../../../../docs/ui/main-button.md).
 
 ## Initialization
 
diff --git a/apps/docs/packages/typescript/tma-js-sdk/components/popup.md b/apps/docs/packages/typescript/tma-js-sdk/components/popup.md
index 34f93bd5a..d084bf9bb 100644
--- a/apps/docs/packages/typescript/tma-js-sdk/components/popup.md
+++ b/apps/docs/packages/typescript/tma-js-sdk/components/popup.md
@@ -1,6 +1,6 @@
 # `Popup`
 
-The component which controls the currently displayed application [popup](../../../../ui/popup.md).
+The component which controls the currently displayed application [popup](../../../../docs/ui/popup.md).
 
 ## Initialization
 
diff --git a/apps/docs/packages/typescript/tma-js-sdk/components/theme-params.md b/apps/docs/packages/typescript/tma-js-sdk/components/theme-params.md
index 5428e45f7..8853041d5 100644
--- a/apps/docs/packages/typescript/tma-js-sdk/components/theme-params.md
+++ b/apps/docs/packages/typescript/tma-js-sdk/components/theme-params.md
@@ -1,7 +1,7 @@
 # `ThemeParams`
 
 The component which contains an information about currently
-used [theme](../../../../functionality/theming.md) by the Telegram application.
+used [theme](../../../../docs/functionality/theming.md) by the Telegram application.
 
 ## Initialization
 
diff --git a/apps/docs/packages/typescript/tma-js-sdk/components/viewport.md b/apps/docs/packages/typescript/tma-js-sdk/components/viewport.md
index 8ac42c605..2e39a5573 100644
--- a/apps/docs/packages/typescript/tma-js-sdk/components/viewport.md
+++ b/apps/docs/packages/typescript/tma-js-sdk/components/viewport.md
@@ -1,7 +1,7 @@
 # `Viewport`
 
 The component which contains an information about the current Mini App
-device [viewport](../../../../functionality/viewport.md), its dimensions and state.
+device [viewport](../../../../docs/functionality/viewport.md), its dimensions and state.
 
 ## Initialization
 
diff --git a/apps/docs/packages/typescript/tma-js-sdk/components/web-app.md b/apps/docs/packages/typescript/tma-js-sdk/components/web-app.md
index bd40fcbd1..2f41be359 100644
--- a/apps/docs/packages/typescript/tma-js-sdk/components/web-app.md
+++ b/apps/docs/packages/typescript/tma-js-sdk/components/web-app.md
@@ -26,7 +26,7 @@ const webApp = new WebApp(
 ## Platform
 
 You could get current Telegram Mini
-Apps [platform](../../../../about-platform.md#supported-applications) by getting `platform`
+Apps [platform](../../../../docs/about-platform.md#supported-applications) by getting `platform`
 property.
 
 ## Opening links
diff --git a/apps/docs/packages/typescript/tma-js-theme-params.md b/apps/docs/packages/typescript/tma-js-theme-params.md
index c828e35cc..9282001a6 100644
--- a/apps/docs/packages/typescript/tma-js-theme-params.md
+++ b/apps/docs/packages/typescript/tma-js-theme-params.md
@@ -6,7 +6,7 @@
 
 ![[npm-link]][npm-shield]
 
-Provides utilities to work with Telegram Mini Apps [theme](../../functionality/theming.md).
+Provides utilities to work with Telegram Mini Apps [theme](../../docs/functionality/theming.md).
 
 ## Installation
 
diff --git a/apps/docs/platform/about-platform.md b/apps/docs/platform/about-platform.md
new file mode 100644
index 000000000..2e0e5791d
--- /dev/null
+++ b/apps/docs/platform/about-platform.md
@@ -0,0 +1,75 @@
+# About platform
+
+Telegram Mini Apps is a technology created by developers of the famous messenger Telegram. The main
+it’s purpose is to provide developers more flexible communication channel with Telegram users.
+
+It may seem not clear, but Mini Apps are not self-served services. The first thing to note is,
+technically, this technology is just an add-on for such already-known Telegram functionality as
+Telegram Bots. So, currently, creating a Mini App without creating a Telegram Bot is not available.
+
+The platform offers a high variety of available methods to communicate with the Telegram application
+to make your web applications look more native, allow them to simulate native application's
+behavior, and, finally, **mimic** native applications.
+
+## Required technologies
+
+Before starting to create an application on the Mini Apps platform, it is important to know what
+Mini Apps is from its technical side. This will lead the developer to language and technologies
+selection.
+
+Internally, Mini Apps are usual web applications, which are displayed in WebView. In other words,
+they are just a set of static files (mostly `.js`, `.css`, and `.html`). So, to create Mini App, it
+is enough to learn standard front-end development technologies, such as:
+
+- JavaScript
+- CSS
+- HTML
+
+Really simple, isn't it? But to make much more serious and bigger applications, we recommend using
+more solid technologies, such as `TypeScript`, `React`, `SCSS`, etc.
+
+So, if we want to create Mini App, we should create a standard web application with any technologies
+stack. The only 1 thing Telegram needs from the developer is the application URL to download it
+from. It will be used as a source for WebView, which will lead to application download and display.
+
+## Usage
+
+As we mentioned in the previous section, Mini Apps are add-ons for Telegram Bots. Telegram Bots is
+also known technology that provides functionality for a wide list of use cases. You could create a
+bot to buy a ticket in the cinema, make him tell user jokes, generate random numbers, etc. In other
+words, the bot can do whatever the developer thinks about.
+
+The problem is, the visual part of bots is not as good and functional as it could be. Their current
+implementation is "console-like" which is more appropriate for developers, not common users. That's
+the time for Mini Apps to show up.
+
+Using Mini Apps, developers are allowed to create more user-friendly and complex interfaces, which
+are commonly used by usual users. With this technology, the developer is still able to communicate
+with the bot behind Mini App, but, additionally, he can provide some more flexible interfaces to
+interact with.
+
+Mini Apps are usually used when a standard bot interface is not enough. Create a Mini App when you
+want to make user life easier when displaying several buttons is not even close to the
+functionality, you want to provide.
+
+## Supported applications
+
+Currently, Telegram Mini Apps is presented on the wide list of Telegram
+applications:
+
+- [Telegram for Android](https://github.com/DrKLO/Telegram) `android`;
+- [Telegram for iOS](https://github.com/TelegramMessenger/Telegram-iOS) `ios`;
+- [Telegram for macOS](https://github.com/overtake/TelegramSwift) `macos`;
+- [Telegram Desktop](https://github.com/telegramdesktop/tdesktop) `tdesktop`;
+- [Telegram Web A](https://github.com/Ajaxy/telegram-tt) `web`;
+- [Telegram Web K](https://github.com/morethanwords/tweb) `webk`;
+
+Other applications either don't have implementation for Telegram Mini Apps, or
+support it too poorly. This will probably be useful in the next sections of the
+documentation.
+
+::: info
+As long as all applications are being developed separately, there may be variations in how they
+implement the platform. If you encounter unexpected differences, please consider reporting
+an [issue](https://github.com/Telegram-Mini-Apps/issues).
+:::
diff --git a/apps/docs/platform/apps-communication/events.md b/apps/docs/platform/apps-communication/events.md
new file mode 100644
index 000000000..92eb49f02
--- /dev/null
+++ b/apps/docs/platform/apps-communication/events.md
@@ -0,0 +1,254 @@
+---
+outline: [2, 3]
+---
+
+# Events
+
+Events are signals, sent from Telegram native application in case, when some external action was
+done. Like methods, each event has its unique name and parameters.
+
+## Web
+
+As mentioned before, the web version uses a standard way of communication between iframes. It means,
+the parent iframe is able to send events through `window.postMessage` function. To handle this type
+of message, it is enough to add `message` event listener on the global `window` object:
+
+```typescript
+window.addEventListener('message', ...);
+```
+
+The native application will send an event with `data: string` which represents a JSON object
+converted to string. This object has the same interface as we defined in
+the [Methods](methods.md#web) section:
+
+```typescript
+interface MessageJSON {
+  eventType: string;
+  eventData: any;
+}
+```
+
+Then, lets imagine how we could process an event from Telegram application:
+
+```typescript
+window.addEventListener('message', ({ data }) => {
+  const { eventType, eventData } = JSON.parse(data);
+  console.log(eventType, eventData);
+});
+```
+
+::: warning
+In this code, we assumed, that the `message` event is sent only by the native application which is
+not always true in real applications. Additionally, we didn't check if `data` is really of
+type `string`. Don't forget to check each type and appropriately process incoming events.
+:::
+
+## Desktop, mobile and Windows Phone
+
+Desktop, mobile, and Windows Phone versions of Telegram don’t use the method, described in the
+previous section. They do it in a bit unusual way. The first thing developer should know, is in
+case, when Telegram needs to emit an event, it will insert JavaScript code, which calls a globally
+defined function.
+
+Here is an example:
+
+```typescript
+window.Telegram.WebView.receiveEvent('popup_closed', { button_id: 'cancel' });
+```
+
+Path to this function depends on platform:
+
+- `window.TelegramGameProxy.receiveEvent` - Telegram Desktop;
+- `window.Telegram.WebView.receiveEvent` - Telegram for iOS and Android;
+- `window.TelegramGameProxy_receiveEvent` - Windows Phone
+
+All of these functions have the same signature:
+
+```typescript
+type ReceiveEvent = (eventType: string, eventData: unknown) => void;
+```
+
+So, the solution is rather simple. To handle incoming events we should create a function of this
+type and assign it to all 3 paths.
+
+## Available events
+
+This section contains the list of events, sent from Telegram: their names, description, and
+parameters. Section title means minimal version, from which events inside the section could be sent.
+
+### `back_button_pressed`
+
+Available since: **v6.1**
+
+User clicked the [Back Button](../ui/back-button.md).
+
+### `clipboard_text_received`
+
+Available since: **v6.4**
+
+Telegram application attempted to extract text from clipboard.
+
+| Field  | Type               | Description                                                                                                                                              |
+|--------|--------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
+| req_id | `string`           | Passed during the [web_app_read_text_from_clipboard](methods.md#web-app-read-text-from-clipboard) method invocation `req_id` value.                      |
+| data   | `string` or `null` | _Optional_. Data extracted from the clipboard. The returned value will have the type `string` only in the case, application has access to the clipboard. |
+
+### `custom_method_invoked`
+
+Available since: **v6.9**
+
+Custom method invocation completed.
+
+| Field  | Type      | Description                                      |
+|--------|-----------|--------------------------------------------------|
+| req_id | `string`  | Unique identifier of this invocation.            |
+| result | `unknown` | _Optional_. Method invocation successful result. |
+| error  | `string`  | _Optional_. Method invocation error code.        |
+
+### `invoice_closed`
+
+An invoice was closed.
+
+<table>
+  <thead>
+
+  <tr>
+    <th>Field</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+
+  </thead>
+  <tbody>
+
+  <tr>
+    <td>slug</td>
+    <td>
+      <code>string</code>
+   </td>
+    <td>
+      Passed during the&nbsp;
+      <a href="./methods#web-app-open-invoice">
+        <code>web_app_open_invoice</code>
+      </a>&nbsp;
+      method invocation <code>slug</code> value.
+    </td>
+  </tr>
+
+  <tr>
+    <td>status</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      Invoice status. Values:
+      <ul>
+        <li>
+          <code>paid</code>, invoice was paid
+        </li>
+        <li>
+          <code>failed</code>, invoice failed
+        </li>
+        <li>
+          <code>pending</code>, invoice is currently pending
+        </li>
+        <li>
+          <code>cancelled</code>, invoice was cancelled
+        </li>
+      </ul>
+    </td>
+  </tr>
+
+  </tbody>
+</table>
+
+### `main_button_pressed`
+
+User clicked the [Main Button](../ui/main-button.md).
+
+### `phone_requested`
+
+Available since: **v6.9**
+
+Application received phone access request status.
+
+| Field  | Type     | Description                         |
+|--------|----------|-------------------------------------|
+| status | `string` | Request status. Can only be `sent`. |
+
+### `popup_closed`
+
+[Popup](../ui/popup.md) was closed.
+
+| Field     | Type     | Description                                                                                                                             |
+|-----------|----------|-----------------------------------------------------------------------------------------------------------------------------------------|
+| button_id | `string` | _Optional_. Identifier of the clicked button. In case, the popup was closed without clicking any button, this property will be omitted. |
+
+### `reload_iframe`
+
+Parent iframe requested current iframe reload.
+
+### `qr_text_received`
+
+Available since: **v6.4**
+
+The QR scanner scanned some QR and extracted its content.
+
+| Field | Type     | Description                             |
+|-------|----------|-----------------------------------------|
+| data  | `string` | _Optional_. Data extracted from the QR. |
+
+### `scan_qr_popup_closed`
+
+Available since: **v6.4**
+
+QR scanner was closed.
+
+### `set_custom_style`
+
+The event which is usually sent by the Telegram web application. Its payload represents `<style/>`
+tag html content, a developer could use. The stylesheet described in the payload will help the
+developer to stylize the app scrollbar (but he is still able to do it himself).
+
+### `settings_button_pressed`
+
+Available since: **v6.1**
+
+Occurs when the [Settings Button](../ui/settings-button.md) was pressed.
+
+### `theme_changed`
+
+Occurs whenever [the theme](../functionality/theming.md) was changed in the user's Telegram app (
+including switching to night mode).
+
+| Field        | Type                     | Description                                                                                            |
+|--------------|--------------------------|--------------------------------------------------------------------------------------------------------|
+| theme_params | `Record<string, string>` | Map where the key is a theme stylesheet key and value is  the corresponding color in `#RRGGBB` format. |
+
+### `viewport_changed`
+
+Occurs whenever the [viewport](../functionality/viewport.md) has been changed. For example, when the
+user started dragging the application or called the expansion method.
+
+| Field           | Type      | Description                                                                      |
+|-----------------|-----------|----------------------------------------------------------------------------------|
+| height          | `number`  | The viewport height.                                                             |
+| width           | `number`  | _Optional_. The viewport width.                                                  |
+| is_expanded     | `boolean` | Is the viewport currently expanded.                                              |
+| is_state_stable | `boolean` | Is the viewport current state stable and not going to change in the next moment. |
+
+::: tip
+Pay attention to the fact, that send rate of this method is not enough to smoothly resize the
+application window. You should probably use a stable height instead of the current one, or handle
+this problem in another way.
+:::
+
+### `write_access_requested`
+
+Available since: **v6.9**
+
+Application received write access request status.
+
+| Field  | Type     | Description                            |
+|--------|----------|----------------------------------------|
+| status | `string` | Request status. Can only be `allowed`. |
diff --git a/apps/docs/platform/apps-communication/flow-definition.md b/apps/docs/platform/apps-communication/flow-definition.md
new file mode 100644
index 000000000..46e44e7ae
--- /dev/null
+++ b/apps/docs/platform/apps-communication/flow-definition.md
@@ -0,0 +1,23 @@
+# Flow definition
+
+To understand how to use Mini Apps functionality, we should start by learning how Telegram native
+application communicates with Mini App.
+
+Depending on the Telegram application, it will create a special environment for the Mini App. For
+developers, it is enough to know, that this environment is web-based, but nevertheless, each of them
+has its own communication way between the Telegram application and Mini App.
+
+To be more accurate, Telegram Mini Apps is not new technology even in the world of Telegram.
+Messenger already has such technology as Telegram Games, which is, internally, almost the same
+platform as Mini Apps. At least, it uses the same way of communication with the front-end app.
+
+## Methods and events
+
+The next thing important to know is there are 2 terms that are usually used in the context of apps
+communication:
+
+- `events` are received by Mini App from Telegram app;
+- `methods` are called by Mini App and executed by Telegram app.
+
+Internally, each of them is the event, but we will use these terms as a
+convention to speak the same language.
diff --git a/apps/docs/platform/apps-communication/methods.md b/apps/docs/platform/apps-communication/methods.md
new file mode 100644
index 000000000..c19406da0
--- /dev/null
+++ b/apps/docs/platform/apps-communication/methods.md
@@ -0,0 +1,544 @@
+---
+outline: [2, 3]
+---
+
+# Methods
+
+Telegram Mini Apps methods are events, which execute some predefined action. They are always called
+by a Mini App.
+
+## Web
+
+As long as the web version of Telegram displays the front-end application in `<iframe/>` tag, it
+uses the default way of communication between 2 iframes - sending messages
+through `window.parent.postMessage` function.
+
+As the first parameter, you should pass a JSON object **converted to a string**. The object should
+have this interface:
+
+```typescript
+interface MessageJSON {
+  eventType: string;
+  eventData: any;
+}
+```
+
+The second parameter is `targetOrigin` - allowed parent iframe origin. We recommend avoiding the
+usage of wildcard `*` as long as it is not secure - your application could be inserted not by
+Telegram, but by another iframe that will still be able to communicate with your app and receive
+some data.
+
+As a default value, you could use `https://web.telegram.org`.
+
+So, as you see, each method has its own name expressed by `eventType` and parameters stored
+in `eventData` property. Here is the usage example:
+
+```typescript
+const data = JSON.stringify({
+  eventType: 'web_app_setup_back_button',
+  eventData: {
+    is_visible: true,
+  },
+});
+
+window.parent.postMessage(data, 'https://web.telegram.org');
+```
+
+This code will make the Telegram [BackButton](../ui/back-button.md) appear.
+
+## Desktop and mobile
+
+Unlike the web, desktop and mobile applications use a bit more unusual way of calling methods. Both
+of these platforms will create a global function `window.TelegramWebviewProxy.postEvent`.
+
+As the first argument, this function accepts the event name. The second one - the parameters object,
+converted to a string. Here is how it works:
+
+```typescript
+const data = JSON.stringify({ is_visible: true });
+
+window
+  .TelegramWebviewProxy
+  .postEvent('web_app_setup_back_button', data);
+```
+
+## Windows Phone
+
+Telegram Windows Phone app provides such function as `window.external.notify`. It accepts the same
+parameter as the web version does:
+
+```typescript
+const data = JSON.stringify({
+  eventType: 'web_app_setup_back_button',
+  eventData: { is_visible: true },
+});
+
+window.external.notify(data);
+```
+
+## Available methods
+
+This section contains a list of available methods to call with their names, description, and
+parameters. In case, Mini App does not satisfy the minimal method version requirement, nothing will
+happen. The native app just doesn't know which method should be called as long as it is not defined
+internally.
+
+### `iframe_ready`
+
+Notifies parent iframe about the current frame is ready. This method is only used in the Web version
+of Telegram. As a result, Mini App will receive [set_custom_style](events.md#set-custom-style)
+event.
+
+| Field            | Type      | Description                                                      |
+|------------------|-----------|------------------------------------------------------------------|
+| reload_supported | `boolean` | _Optional_. True, if current Mini App supports native reloading. |
+
+### `iframe_will_reload`
+
+Notifies parent iframe about the current iframe is going to reload.
+
+### `web_app_close`
+
+Closes Mini App.
+
+### `web_app_close_scan_qr_popup`
+
+Available since: **v6.4**
+
+Closes a QR scanner. The Telegram application creates
+the [scan_qr_popup_closed](events.md#scan-qr-popup-closed) event.
+
+### `web_app_data_send`
+
+Sends data to the bot. When this method is called, a service message is sent to the bot containing
+the data of the length up to 4096 bytes. Then, Mini App will be closed.
+
+To get more information, take a look at `web_app_data` field in the
+class [Message](https://core.telegram.org/bots/api#message).
+
+| Field | Type     | Description                                                          |
+|-------|----------|----------------------------------------------------------------------|
+| data  | `string` | Data to send to a bot. Should not have size of more than 4096 bytes. |
+
+### `web_app_expand`
+
+[Expands](../functionality/viewport.md) the Mini App.
+
+### `web_app_invoke_custom_method`
+
+Available since: **v6.9**
+
+| Field  | Type      | Description                           |
+|--------|-----------|---------------------------------------|
+| req_id | `string`  | Current invocation unique identifier. |
+| method | `string`  | Method name.                          |
+| params | `unknown` | Parameters according to `method`.     |
+
+### `web_app_open_invoice`
+
+Available since: **v6.1**
+
+Opens an invoice by its specified slug. More information about invoices in
+this [documentation](https://core.telegram.org/bots/payments).
+
+| Field | Type     | Description                |
+|-------|----------|----------------------------|
+| slug  | `string` | Invoice unique identifier. |
+
+### `web_app_open_link`
+
+Opens link in the default browser. Mini App will not be closed.
+
+| Field            | Type      | Description                                                                                            | Available since |
+|------------------|-----------|--------------------------------------------------------------------------------------------------------|-----------------|
+| url              | `string`  | URL to be opened by Telegram application. Should be a full path with `https` protocol.                 |                 |
+| try_instant_view | `boolean` | _Optional_. Link will be opened in [Instant View](https://instantview.telegram.org/) mode if possible. | `v6.4`          |
+
+### `web_app_open_popup`
+
+Available since: **v6.2**
+
+Opens a new [popup](../ui/popup.md). When user closes the popup, Telegram creates
+the [popup_closed](events.md#popup-closed) event.
+
+<table>
+  <thead>
+
+  <tr>
+    <th>Field</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+
+  </thead>
+  <tbody>
+
+  <tr>
+    <td>title</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>The text to be displayed in the popup title, 0-64 characters</td>
+  </tr>
+
+  <tr>
+    <td>message</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      The message to be displayed in the body of the popup, 1-256 characters
+    </td>
+  </tr>
+
+  <tr>
+    <td>buttons</td>
+    <td>
+      <a href="#popupbutton">
+        <code>PopupButton[]</code>
+      </a>
+    </td>
+    <td>List of buttons to be displayed in the popup, 1-3 buttons</td>
+  </tr>
+
+  </tbody>
+</table>
+
+#### `PopupButton`
+
+<table>
+  <thead>
+
+  <tr>
+    <th>Field</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+
+  </thead>
+  <tbody>
+
+  <tr>
+    <td>id</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>Identifier of the button, 0-64 characters.</td>
+  </tr>
+
+  <tr>
+    <td>type</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      Type of the button. Values:
+      <ul>
+        <li>
+          <code>default</code>, a button with the default style
+        </li>
+        <li>
+          <code>destructive</code>, a button with a style that indicates a destructive action (e.g.
+          "Remove", "Delete", etc.)
+        </li>
+        <li>
+          <code>ok</code>, a button with the localized text "OK"
+        </li>
+        <li>
+          <code>close</code>, a button with the localized text "Close"
+        </li>
+        <li>
+          <code>cancel</code>, a button with the localized text "Cancel"
+        </li>
+      </ul>
+    </td>
+  </tr>
+
+  <tr>
+    <td>text</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      The text to be displayed on the button, 0-64
+      characters. <i>Ignored</i> when <code>type</code> is <code>ok</code>, <code>close</code> or
+      <code>cancel</code>.
+    </td>
+  </tr>
+  </tbody>
+</table>
+
+### `web_app_open_scan_qr_popup`
+
+Available since: **v6.4**
+
+Opens a QR scanner. When the scanner was closed, the Telegram application creates
+the [scan_qr_popup_closed](events.md#scan-qr-popup-closed) event. When the scanner reads QR,
+Telegram creates the [qr_text_received](events.md#qr-text-received) event.
+
+| Field | Type     | Description                                         |
+|-------|----------|-----------------------------------------------------|
+| text  | `string` | _Optional_. Text to be displayed in the QR scanner. |
+
+### `web_app_open_tg_link`
+
+Available since: **v6.1**
+
+Opens the Telegram link by its pathname and query parameters. The link will be opened in the
+Telegram app, Mini App will be closed.
+
+| Field     | Type     | Description                                                                                                                  |
+|-----------|----------|------------------------------------------------------------------------------------------------------------------------------|
+| path_full | `string` | Should be a value taken from the link of this format: `https://t.me/{path_full}`. Can additionally contain query parameters. |
+
+### `web_app_read_text_from_clipboard`
+
+Available since: **v6.4**
+
+Reads text from the clipboard. The method accepts a request identifier which is used to
+appropriately retrieve the method execution result from
+the [clipboard_text_received](events.md#clipboard-text-received) event.
+
+| Field  | Type     | Description                                                                                         |
+|--------|----------|-----------------------------------------------------------------------------------------------------|
+| req_id | `string` | Unique request identifier. Should be any unique string to handle the generated event appropriately. |
+
+### `web_app_ready`
+
+Notifies Telegram about current application is ready to be shown. This method will make Telegram to
+remove application loader and display Mini App.
+
+### `web_app_request_phone`
+
+Available since: **v6.9**
+
+[//]: # (TODO: Check if it is right. It probably requests other user phone.)
+
+Requests access to current user's phone.
+
+### `web_app_request_theme`
+
+Requests current [theme](../functionality/theming.md) from Telegram. As a result, Telegram will
+create [theme_changed](events.md#theme-changed) event.
+
+### `web_app_request_viewport`
+
+Requests current [viewport](../functionality/viewport.md) information from Telegram. As a result,
+Telegram will create [viewport_changed](events.md#viewport-changed) event.
+
+### `web_app_request_write_access`
+
+Available since: **v6.9**
+
+Requests write message access to current user.
+
+### `web_app_set_background_color`
+
+Available since: **v6.1**
+
+Updates the Mini App [background color](../functionality/theming.md#background-and-header-colors).
+
+| Field | Type     | Description                                        |
+|-------|----------|----------------------------------------------------|
+| color | `string` | The Mini App background color in `#RRGGBB` format. |
+
+### `web_app_set_header_color`
+
+Available since: **v6.1**
+
+Updates the Mini App [header color](../functionality/theming.md#background-and-header-colors). This
+method should accept `color_key` or `color` property.
+
+| Field     | Type     | Description                                                                        | Available since |
+|-----------|----------|------------------------------------------------------------------------------------|-----------------|
+| color_key | `string` | The Mini App header color key. Could be either `bg_color` or `secondary_bg_color`. |                 |
+| color     | `string` | Color in RGB format.                                                               | `v6.9`          |
+
+### `web_app_setup_back_button`
+
+Available since: **v6.1**
+
+Updates the [Back Button](../ui/back-button.md) settings.
+
+| Field      | Type      | Description                        |
+|------------|-----------|------------------------------------|
+| is_visible | `boolean` | Should the Back Button be visible. |
+
+### `web_app_setup_closing_behavior`
+
+Updates current [closing behavior](../functionality/closing-behavior.md).
+
+| Field             | Type      | Description                                                          |
+|-------------------|-----------|----------------------------------------------------------------------|
+| need_confirmation | `boolean` | Will user be prompted in case, an application is going to be closed. |
+
+### `web_app_setup_main_button`
+
+Updates the [Main Button](../ui/main-button.md) settings.
+
+| Field               | Type      | Description                                                                                                                                                        |
+|---------------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| is_visible          | `boolean` | _Optional_. Should the Main Button be displayed.                                                                                                                   |
+| is_active           | `boolean` | _Optional_. Should the Main Button be enabled.                                                                                                                     |
+| is_progress_visible | `boolean` | _Optional_. Should loader inside the Main Button be displayed. Use this property in case, some operation takes time. This loader will make user notified about it. |
+| text                | `string`  | _Optional_. Text inside the Main Button.                                                                                                                           |
+| color               | `string`  | _Optional_. The Main Button background color in `#RRGGBB` format.                                                                                                  |
+| text_color          | `string`  | _Optional_. The Main Button text color in `#RRGGBB` format.                                                                                                        |
+
+### `web_app_setup_settings_button`
+
+Available since: **v6.10**
+
+Updates current state of [Settings Button](../ui/settings-button.md).
+
+| Field      | Type      | Description                              |
+|------------|-----------|------------------------------------------|
+| is_visible | `boolean` | Should the Settings Button be displayed. |
+
+### `web_app_switch_inline_query`
+
+Available since: **v6.7**
+
+Inserts the bot's username and the specified inline query in the current chat's input field.
+Query may be empty, in which case only the bot's username will be inserted. The client prompts
+the user to choose a specific chat, then opens that chat and inserts the bot's username and
+the specified inline query in the input field.
+
+<table>
+  <thead>
+
+  <tr>
+    <th>Field</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+
+  </thead>
+  <tbody>
+
+  <tr>
+    <td>query</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      Text which should be inserted in the input after the current bot name. Max length is 
+      <b>256</b> symbols.
+    </td>
+  </tr>
+
+  <tr>
+    <td>chat_types</td>
+    <td>
+      <code>string[]</code>
+    </td>
+    <td>
+      List of chat types which could be chosen to send the message. Could be empty list. Values:
+      <ul>
+        <li>
+          <code>users</code> 
+        </li>
+        <li>
+          <code>bots</code>
+        </li>
+        <li>
+          <code>groups</code>
+        </li>
+        <li>
+          <code>channels</code>
+        </li>
+      </ul>
+    </td>
+  </tr>
+
+  </tbody>
+</table>
+
+### `web_app_trigger_haptic_feedback`
+
+Available since: **v6.1**
+
+Generates the [haptic feedback](../functionality/haptic-feedback.md) event.
+
+<table>
+  <thead>
+
+  <tr>
+    <th>Field</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+
+  </thead>
+  <tbody>
+
+  <tr>
+    <td>type</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      Type of haptic event. Values:
+      <ul>
+        <li>
+          <code>impact</code>, when there's a collision involving UI components.
+        </li>
+        <li>
+          <code>notification</code>, when some action execution has been completed.
+        </li>
+        <li>
+          <code>selection_change</code>, when the user changes their selection.
+        </li>
+      </ul>
+    </td>
+  </tr>
+
+  <tr>
+    <td>impact_style</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      Required when <code>type</code> is <code>impact</code>. Values:
+      <ul>
+        <li>
+          <code>light</code>, indicates a collision between small or lightweight UI objects
+        </li>
+        <li>
+          <code>medium</code>, indicates a collision between medium-sized or medium-weight UI
+          objects
+        </li>
+        <li>
+          <code>heavy</code>, indicates a collision between large or heavyweight UI objects
+        </li>
+        <li>
+          <code>rigid</code>, indicates a collision between hard or inflexible UI objects
+        </li>
+        <li>
+          <code>soft</code>, indicates a collision between soft or flexible UI objects
+        </li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>notification_type</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      Required when <code>type</code> is <code>notification</code>. Values:
+      <ul>
+        <li>
+          <code>error</code>, indicates that a task or action has failed
+        </li>
+        <li>
+          <code>success</code>, indicates that a task or action has completed successfully
+        </li>
+        <li>
+          <code>warning</code>, indicates that a task or action produced a warning
+        </li>
+      </ul>
+    </td>
+  </tr>
+  </tbody>
+</table>
diff --git a/apps/docs/platform/functionality/closing-behavior.md b/apps/docs/platform/functionality/closing-behavior.md
new file mode 100644
index 000000000..aebc665c7
--- /dev/null
+++ b/apps/docs/platform/functionality/closing-behavior.md
@@ -0,0 +1,14 @@
+# Closing behavior
+
+![Closing confirmation](/functionality/closing-confirmation.png)
+
+Mini Apps are intended to handle different, and at times, complex scenarios where the user can
+navigate deep into the application architecture. It's a common situation when a user is following a
+specific workflow, such as purchasing an airplane ticket, which involves multiple steps.
+
+Accidentally closing a Mini App with data loss can be a significant disappointment for the user. To
+prevent this, developers have the option to configure the closing behavior and prompt the user
+before closing the application.
+
+To enable closing confirmation, Telegram Mini Apps provides a method
+called [web_app_setup_closing_behavior](../apps-communication/methods.md#web-app-setup-closing-behavior).
diff --git a/apps/docs/platform/functionality/haptic-feedback.md b/apps/docs/platform/functionality/haptic-feedback.md
new file mode 100644
index 000000000..a161767bf
--- /dev/null
+++ b/apps/docs/platform/functionality/haptic-feedback.md
@@ -0,0 +1,23 @@
+# Haptic feedback
+
+Native mobile applications are always filled with interactive components, which allow user to
+communicate with its functionality. Such components are mostly popups, buttons and many others.
+
+Interacting with application (clicking buttons, closing popups etc.), it is allowed to emit haptic
+notifications. Commonly, this process is called **_haptic feedback_**. In simple words, these events
+are just mobile device vibrations. Usage of haptic feedback can make user's experience much better.
+
+There are currently three types of notifications used in different cases:
+
+- `impact`, when there's a collision involving UI components.
+- `selection_change`, when the user changes their selection.
+- `notification`, when some action execution has been completed.
+
+Almost each of these types has its own subtypes. To produce haptic feedback, Telegram Mini Apps
+provides [web_app_trigger_haptic_feedback](../apps-communication/methods.md#web-app-trigger-haptic-feedback)
+method.
+
+::: warning
+Use this method carefully. Emitting haptic events too often can make an effect on user's mobile
+device battery.
+:::
diff --git a/apps/docs/platform/functionality/theming.md b/apps/docs/platform/functionality/theming.md
new file mode 100644
index 000000000..39aa1b115
--- /dev/null
+++ b/apps/docs/platform/functionality/theming.md
@@ -0,0 +1,62 @@
+# Theming
+
+![Theming](/functionality/theming.png)
+
+Mini Apps are web applications designed to have a native appearance. This includes not only the use
+of components that mimic native elements but also the adoption of the parent application's color
+scheme.
+
+Mini Apps are provided with colors that currently match those used in the Telegram application.
+These colors should be utilized by Mini Apps to ensure a consistent and native look.
+
+## Retrieving
+
+### Launch parameter
+
+Telegram Mini Apps provides theming data through a launch parameter known
+as [tgWebAppThemeParams](../launch-parameters/common-information.md#tgwebappthemeparams). This
+parameter represents a serialized JSON object containing a list of optional properties, with each
+property describing one of the palette colors.
+
+Here is a complete example of the parameter value:
+
+```json
+{
+  "accent_text_color": "#6ab2f2",
+  "bg_color": "#17212b",
+  "button_color": "#5288c1",
+  "button_text_color": "#ffffff",
+  "destructive_text_color": "#ec3942",
+  "header_bg_color": "#17212b",
+  "hint_color": "#708499",
+  "link_color": "#6ab3f3",
+  "secondary_bg_color": "#232e3c",
+  "section_bg_color": "#17212b",
+  "section_header_text_color": "#6ab3f3",
+  "subtitle_text_color": "#708499",
+  "text_color": "#f5f5f5"
+}
+```
+
+### Telegram Mini Apps method
+
+Nevertheless, retrieving theming data via launch parameters is not the only way. Telegram Mini Apps
+also permits obtaining the theme through a method
+called [web_app_request_theme](../apps-communication/methods.md#web-app-request-theme).
+
+As a result of calling this method, Telegram will emit an event
+named [theme_changed](../apps-communication/events.md#theme-changed). The payload of this event
+contains a property called `theme_params`, which has the format described in the previous section.
+
+## Background and header colors
+
+As long as a Mini App is always displayed within a native component, which consists of parts such
+as the _header_ and _body_, Telegram Mini Apps also allows changing their colors.
+
+To change the header color, developers should utilize
+the [web_app_set_header_color](../apps-communication/methods.md#web-app-set-header-color) method,
+which provides a way to set the color either by using a theme key or a custom RGB string.
+
+To update the body color, it is required to use
+the [web_app_set_background_color](../apps-communication/methods.md#web-app-set-background-color)
+method.
diff --git a/apps/docs/platform/functionality/viewport.md b/apps/docs/platform/functionality/viewport.md
new file mode 100644
index 000000000..150b6b923
--- /dev/null
+++ b/apps/docs/platform/functionality/viewport.md
@@ -0,0 +1,31 @@
+# Viewport
+
+The term **Viewport** describes the **visible part** of a Mini App. Since the Mini App can be
+displayed differently on various platforms, using viewport information is allowed to ensure the
+correct display of the Mini App.
+
+Viewport data is described through four properties:
+
+- The `width` and `height` properties define the dimensions of the visible part of the Mini App.
+- The `stability` property is a flag that equals `true` whenever the Mini App is considered as not
+  going to change its size in the next moment.
+- The `expansion` property is also a flag that equals `true` whenever the Mini App has reached its
+  maximum height.
+
+## Expanding
+
+In case, application is opened in mobile version of Telegram (both Android and iOS), it will be
+displayed in native component, called `BottomSheet`. It represents draggable from bottom to top
+block, which could be expanded to the entire screen size. To do this, user could drag it to the
+upper bound of the screen, but developer is able to do it programmatically too.
+
+By default, application is minimized (not expanded), it has minimal allowed height. To expand
+application via code, developer should
+call [web_app_expand](../apps-communication/methods.md#web-app-expand) method.
+
+During the process of dragging, viewport is considered not stable. For developer, it means, that he
+should not probably do any resizes or something like that, as long as viewport dimensions could
+change in the next moment.
+
+Other platforms open Mini App already maximized in medium-size window and call
+of [web_app_expand](../apps-communication/methods.md#web-app-expand) method will have no effect.
diff --git a/apps/docs/platform/guides/creating-new-app.md b/apps/docs/platform/guides/creating-new-app.md
new file mode 100644
index 000000000..b258af48c
--- /dev/null
+++ b/apps/docs/platform/guides/creating-new-app.md
@@ -0,0 +1,178 @@
+# Creating new app
+
+In this article, we will delve into the process of developing a new application on the Telegram Mini
+Apps platform, we will find out exactly what actions need to be performed to create it, as well as
+give advice on improving the process of creating an application.
+
+The process of creating an application usually consists of the following basic steps:
+
+1. Creating Telegram bot and registering TWA application.
+2. Creating web application.
+3. Getting web application URL and setting it in TWA settings.
+
+## Before starting
+
+Before creating a new TWA application, you need to remember an important rule: _do not create
+entities related to development in the production environment_. Development within the production
+environment is a sign of bad taste, so use it strictly if you can't avoid it.
+
+To create an application we should use test environment. You can learn more about switch to the test
+environment in [this](../test-environment.md) article.
+
+Speaking of advantages a developer gets from the test environment, it is important to mention an
+opportunity of usage of `http` links instead of `https`, as well as IPs directly. Production
+environments allows usage only valid `https` links.
+
+## Creating application in BotFather
+
+As long as technically, TWA applications are connected with Telegram bots, we should firstly create
+a Telegram bot. To do this, you need to find the father of all bots, the
+bot [BotFather](https://t.me/botfather) and use the command `/newbot`, then go through the proposed
+process, specifying all the necessary data.
+
+When the bot is created, it is required then to use the command `/newapp` and again go through the
+procedure of creating another entity - the Telegram Mini Apps application, linking it to the
+Telegram bot. From now on, the created application will be available via a direct link of the
+form `https://t.me/{mybot}/{myapp}`.
+
+## Web application link
+
+::: info
+Before reading this section, make sure that you have already created a frontend application
+that can be accessed via a direct link.
+:::
+
+This step is mandatory in the process of creating a TWA application. Due to the fact that TWA
+applications are web applications, the most common way to get and display applications is to
+download them at some URL and then render them.
+
+As mentioned earlier, in the production environment, it is allowed to use only links that have
+the `https` protocol with a valid SSL certificate. Otherwise, users' devices will not be able to
+download the application. In the test environment, both `http` links and direct IP addresses can be
+used.
+
+Given the fact that links in the production environment and for development are different, we will
+consider the process of obtaining them separately.
+
+### For development
+
+#### Ngrok
+
+Many newcomers to development may often have a question about how easy it is to get a temporary URL
+for development that works on the `https` protocol and has a valid SSL certificate. The solution to
+this problem is quite simple and common, developers can use such a service
+as [ngrok](https://ngrok.com/). It has low development limits and allows you to create applications
+comfortably.
+
+Imagine that the application being developed is currently running at `localhost:3000`. Then in order
+to open a tunnel to this application, you need to use the following command:
+
+```bash
+ngrok http 3000
+```
+
+::: warning
+Do not use the provided ngrok link in the production environment. Frontend applications should be a
+set of static files and be uploaded to some hosting. The link to the application should not be
+dynamic, since in this case it will have to be constantly changed in BotFather.
+:::
+
+#### Localtunnel
+
+[Localtunnel](https://github.com/localtunnel/localtunnel) is another similar technology that
+provides a valid `https` link.
+
+```bash
+lt --port 3000 -s web-apps-test
+# your url is: https://web-apps-test.loca.lt
+```
+
+::: warning
+The main problem of this project is disabling the tunnel in case the development server has been
+disabled.
+:::
+
+### For production
+
+Getting a production link is also not difficult. To do this, you can use the popular free static
+services:
+
+- [GitHub Pages](https://pages.github.com/)
+- [Heroku](https://www.heroku.com/)
+- [Vercel](https://vercel.com/)
+
+However, the developer can also use any other hosting. It is important to remember that the link to
+the application must work on the `https` protocol and have a valid SSL certificate. To get a free
+one, consider [certbot](https://certbot.eff.org/pages/about).
+
+### Applying link
+
+When https link is received, it must be used in a previously created Telegram bot. Telegram
+supports several ways to install this link:
+
+- **For the bot menu button**. Then every user who will enter a dialogue with the bot will be able
+  to open its "menu" in the form of a developed application.
+- **For TWA application**. Then the application will open only if the user
+  follows the link in format `https://t.me/{mybot}/{myapp}`. In this case, user can avoid joining
+  a dialogue with the bot.
+
+#### Menu button
+
+To set the link on the menu button, you need to go to the dialog with BotFather and use
+the command (send a message) `/setmenubutton`. Next, BotFather will ask you to select a bot, specify
+a link, as well as a title for the menu button.
+
+As a result, when a user enters a chat with a bot, he will be able to open a web application by
+clicking on the menu button on the bottom left in the interface.
+
+#### Direct link
+
+To install a direct link to the application, you must complete the following steps:
+
+1. Send the BotFather command `/myapps`.
+2. Select the required application.
+3. Click `Edit link` and install a new link.
+
+Now when the user clicks on the format link `https://t.me/{mybot}/{myapp}`, Telegram
+will display the web component with the source address as the URL specified in the settings.
+
+## Additional
+
+### Hot Module Replacement
+
+The application development process is a fairly complex and lengthy process. You always want to see
+the changes you make in the code right away on the screen. In order to see the changes in real time,
+it is necessary to use such a technique as **Hot Module Replacement**. This section will not cover
+the process of setting it up, as it often depends on the project, but well-known frameworks already
+include this functionality by default.
+
+How to configure HMR can be found
+in [this Webpack article](https://webpack.js.org/guides/hot-module-replacement/).
+
+[//]: # (## Заключение)
+
+[//]: # ()
+
+[//]: # (Этого вполне достаточно для того, чтобы создать свое первое приложение TWA.)
+
+[//]: # (Тем не менее, данный гайд не покрывает все особенности платформы, а лишь)
+
+[//]: # (помогает избежать бесполезной траты времени на базовые и простые проблемы.)
+
+[//]: # (## Debugging application)
+
+[//]: # ()
+
+[//]: # (As long as Web Apps are web applications, and they are opened in some native)
+
+[//]: # (components &#40;not in browser&#41;, we are not allowed to debug them in common way as)
+
+[//]: # (we do it in browser applications until some additional actions are done.)
+
+[//]: # ()
+
+[//]: # (To enable debug mode in native application follow)
+
+[//]: # ([official documentation]&#40;https://core.telegram.org/bots/webapps#debug-mode-for-web-apps&#41;)
+
+[//]: # (.)
\ No newline at end of file
diff --git a/apps/docs/platform/launch-parameters/common-information.md b/apps/docs/platform/launch-parameters/common-information.md
new file mode 100644
index 000000000..70c64f019
--- /dev/null
+++ b/apps/docs/platform/launch-parameters/common-information.md
@@ -0,0 +1,103 @@
+# Common information
+
+The launch parameters are the list of parameters that is passed by the native Telegram application
+to the Mini App. It helps the developer to find out the characteristics of the Telegram application,
+the current device, get basic information about the user and much more.
+
+## Transmission method
+
+It's easy to guess, but in a web environment, one of the simplest and most instantaneous ways to
+transfer data in a local environment is to specify them in the address bar of the application. Thus,
+both the called server and the downloaded application will have some pre-known data. Actually,
+Telegram Mini Apps technology uses the same algorithm.
+
+The native Telegram application transmits a list of these parameters in the dynamic part of the
+URL (in the hash, `#`). Accordingly, in order to access these parameters, it is necessary to access
+the `window.location.hash` property from the JavaScript code.
+
+## Extraction
+
+It is important to remember that `hash` is a string property, while Telegram transmits a whole list
+of properties, after which the question arises about formatting and processing this list. In fact,
+everything is quite simple.
+
+The native Telegram application passes the list of launch parameters as query-parameters and saves
+the resulting string in `window.location.hash`. For this reason, in order to extract the launch
+parameters, it is enough to perform the following operation:
+
+```typescript title="Example on how to extract launch parameters"
+const hash = window.location.hash.slice(1);
+console.log(hash); // tgWebAppData=...&tgWebAppVersion=6.2&...
+
+const params = new URLSearchParams(hash);
+console.log(params.get('tgWebAppVersion')); // "6.2"
+```
+
+::: tip
+However, users have the capability to refresh the current application without exiting it. If the
+application uses hash routing, it may lose the initial hash after some time. Therefore, it's
+advisable to save this data during the initial launch of the application.
+:::
+
+## Parameters list
+
+### `tgWebAppVersion`
+
+The current Telegram Mini Apps version used by the native application. This parameter is important
+to use, for example, before calling the Telegram Mini
+Apps [methods](../apps-communication/methods.md) to make sure, they are supported.
+
+### `tgWebAppData`
+
+Contains data describing the current user, data sign, and also some useful values. To learn more,
+visit the [Init Data](./init-data) page.
+
+This parameter is passed as query parameters, so in order to get a more user-friendly value, a
+developer need to use the `URLSearchParams` constructor:
+
+```typescript
+const initData = new URLSearchParams(params.get('tgWebAppData'));
+
+// ['user', '{"id":279058397,"first_name":"Vladislav", ... }']
+// ['chat_instance', '8428209589180549439']
+// ['chat_type', 'sender']
+// ['auth_date', '1698272211']
+// ['hash', 'ddc15fc7419ae9cb9a597b98efee42ea0']
+```
+
+### `tgWebAppPlatform`
+
+[Telegram application identifier](../about-platform.md#supported-applications). It can be used as a factor
+determining the visual style of the application, for example, when, depending on the device, the
+developer needs to display components that are different visually.
+
+### `tgWebAppThemeParams`
+
+Parameters of the native Telegram application [theme](../functionality/theming.md). This parameter
+can be used to style the application even at the moment of rendering the loader.
+
+The value of this parameter is a JSON object converted to the string. To get a more user-friendly
+value, it is enough to use the `JSON.parse` method.
+
+```typescript
+const theme = {
+  bg_color: '#212121',
+  text_color: '#ffffff',
+  hint_color: '#aaaaaa',
+  link_color: '#8774e1',
+  button_color: '#8774e1',
+  button_text_color: '#ffffff',
+  secondary_bg_color: '#0f0f0f',
+};
+```
+
+### `tgWebAppShowSettings`
+
+Parameter used only by Telegram SDK to show the Settings Button on startup. It has
+no other meaning to external developers.
+
+### `tgWebAppBotInline`
+
+This parameter is being added in case the current application is launched in inline mode. This
+allows calling such Telegram Mini Apps method
+as [web_app_switch_inline_query](../apps-communication/methods.md#web-app-switch-inline-query).
diff --git a/apps/docs/platform/launch-parameters/init-data.md b/apps/docs/platform/launch-parameters/init-data.md
new file mode 100644
index 000000000..a97111b4e
--- /dev/null
+++ b/apps/docs/platform/launch-parameters/init-data.md
@@ -0,0 +1,344 @@
+# Init data
+
+In the list of [launch parameters](common-information.md), initialization data is located in
+the `tgWebAppData` parameter. It is a set of data mostly related to a specific user who launched
+the Mini App.
+
+A striking feature of init data is the fact that it can be used as an authentication or
+authorization factor. For this reason, do not forget about the security of the application
+and init data specifically.
+
+::: tip
+
+This section provides detailed information about an essential aspect of Telegram Mini Apps, which
+relates to application security for developers. We recommend utilizing well-established and tested
+packages:
+
+- For browser: [@tma.js/init-data](../../packages/typescript/tma-js-init-data/about.md)
+- For Node: [@tma.js/init-data-node](../../packages/node/tma-js-init-data-node.md)
+- For GoLang: [init-data-golang](../../packages/golang/init-data-golang.md)
+
+:::
+
+## Retrieving
+
+To extract init data, it is required to firstly get the launch parameters, then extract parameter
+with name `tgWebAppData` and pass it to the `URLSearchParams` constructor:
+
+```typescript
+// Get launch parameters.
+const params = new URLSearchParams(window.location.hash.slice(1));
+const initDataRaw = params.get('tgWebAppData'); // user=...&query_id=...&...
+
+const initData = new URLSearchParams(initDataRaw);
+// ['user', '{"id":279058397,"first_name":"Vladislav", ... }']
+// ['chat_instance', '8428209589180549439']
+// ['chat_type', 'sender']
+// ['auth_date', '1698272211']
+// ['hash', 'ddc15fc7419ae9cb9a597b98efee42ea0']
+```
+
+## Authorization and authentication
+
+A special feature of initialization data is the ability to be used as a factor for authorization or
+authentication. The fact is that the data generated by the native Telegram application is signed
+with the secret key of the Telegram bot, after which the generated signature is placed next to the
+parameters themselves.
+
+Thus, knowing the secret key of the Telegram bot, the developer has the opportunity to verify the
+signature of the parameters and make sure that they were indeed issued to the specified user.
+
+Also, the signature verification operation is fast enough and does not require large server
+resources. More information about the data signature and verification algorithm can be found
+in [this](https://core.telegram.org/bots/webapps#validating-data-received-via-the-web-app)
+documentation.
+
+[//]: # (TODO: Move signing flow to our docs)
+
+## Sending to server
+
+In order to authorize the user on the server, the developer needs to transmit the initialization
+data that was specified when launching the Mini App. To make life easier for yourself, the
+developer can transmit them at each request to the server, after which the signature verification is
+carried out on the server side.
+
+Here comes the example with the usage of such package
+as [axios](https://www.npmjs.com/package/axios):
+
+```typescript
+import axios from 'axios';
+
+const initData = new URLSearchParams(window.location.hash.slice(1))
+  .get('tgWebAppData');
+
+if (initData === null) {
+  throw new Error('Ooof! Something is wrong. Init data is missing');
+}
+
+// Create axios instance.  
+const http = axios.create({
+  headers: {
+    // Append authorization header. 
+    Authorization: `tma ${initData}`,
+  }
+});
+```
+
+In turn, the following actions must be performed on the server side:
+
+1. Get the value of the `Authorization` header;
+2. Check that the first part of it is equal to `tma`;
+3. Get initialization data and verify its signature.
+
+If this algorithm is successful, the server part of the application can trust the transmitted
+initialization data.
+
+::: tip
+In real-world applications, it is recommended to use additional mechanisms for verifying
+initialization data. For example, add their expiration date. This check can be implemented using
+the `auth_date` parameter, which is responsible for the date when the parameters were created. This
+solution will allow in case of theft of initialization data to prevent their constant use by an
+attacker.
+:::
+
+## Parameters list
+
+This section provides a complete list of parameters used in initialization data.
+
+<table>
+<thead>
+  <tr>
+    <th>Parameter</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+</thead>
+<tbody>
+  <tr>
+    <td>auth_date</td>
+    <td>
+      <code>number</code>
+    </td>
+    <td>
+      The date the initialization data was created. Is a number representing a Unix timestamp.
+    </td>
+  </tr>
+
+  <tr>
+    <td>can_send_after</td>
+    <td>
+      <code>number</code>
+    </td>
+    <td>
+      <i>Optional</i>. The number of seconds after which a message can be sent via the method
+      <a href="https://core.telegram.org/bots/api#answerwebappquery">answerWebAppQuery</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>chat</td>
+    <td>
+      <a href="#chat">
+        <code>Chat</code>
+      </a>
+    </td>
+    <td>
+      <i>Optional</i>. An object containing information about the chat with the bot in which
+      the Mini Apps was launched. It is returned only for Mini Apps opened through the attachments 
+      menu.
+    </td>
+  </tr>
+
+  <tr>
+    <td>chat_type</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      <i>Optional</i>. The type of chat from which the Mini Apps was opened. Values:
+      <ul>
+        <li>
+          <code>sender</code>
+        </li>
+        <li>
+          <code>private</code>
+        </li>
+        <li>
+          <code>group</code>
+        </li>
+        <li>
+          <code>supergroup</code>
+        </li>
+        <li>
+          <code>channel</code>
+        </li>
+      </ul>
+      Returned only for applications opened by direct link.
+    </td>
+  </tr>
+
+  <tr>
+    <td>chat_instance</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      <i>Optional</i>. A global identifier indicating the chat from which the Mini Apps was opened.
+      Returned only for applications opened by direct link.
+    </td>
+  </tr>
+
+  <tr>
+    <td>hash</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>Initialization data signature.</td>
+  </tr>
+
+  <tr>
+    <td>query_id</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      <i>Optional</i>. The unique session ID of the Mini App. Used in the process of
+      sending a message via the method
+      <a href="https://core.telegram.org/bots/api#answerwebappquery">answerWebAppQuery</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>receiver</td>
+    <td>
+      <a href="#user">
+        <code>User</code>
+      </a>
+    </td>
+    <td>
+      <i>Optional</i>. An object containing data about the chat partner of the current user in 
+      the chat where the bot was launched via the attachment menu. Returned only for private chats 
+      and only for Mini Apps launched via the attachment menu.
+    </td>
+  </tr>
+
+  <tr>
+    <td>start_param</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      <i>Optional</i>. The value of the <code>startattach</code> or <code>startapp</code> query 
+      parameter specified in the link. It is returned only for Mini Apps opened through the 
+      attachment menu.
+    </td>
+  </tr>
+
+  <tr>
+    <td>user</td>
+    <td>
+      <a href="#user">
+        <code>User</code>
+      </a>
+    </td>
+    <td>
+      <i>Optional</i>. An object containing information about the current user.
+    </td>
+  </tr>
+
+</tbody>
+</table>
+
+## Other types
+
+### Chat
+
+Describes the chat information.
+
+<table>
+<thead>
+  <tr>
+    <th>Property</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+</thead>
+<tbody>
+  <tr>
+    <td>id</td>
+    <td>
+      <code>number</code>
+    </td>
+    <td>Unique chat ID.</td>
+  </tr>
+
+  <tr>
+    <td>type</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      Chat type. Values:
+      <ul>
+        <li>
+          <code>group</code>
+        </li>
+        <li>
+          <code>supergroup</code>
+        </li>
+        <li>
+          <code>channel</code>
+        </li>
+      </ul>
+    </td>
+  </tr>
+
+  <tr>
+    <td>title</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>Chat title.</td>
+  </tr>
+
+  <tr>
+    <td>photo_url</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      <i>Optional</i>. Chat photo link. The photo can have <code>.jpeg</code> and
+      <code>.svg</code> formats. It is returned only for Mini Apps opened through the attachments 
+      menu.
+    </td>
+  </tr>
+
+  <tr>
+    <td>username</td>
+    <td>
+      <code>string</code>
+    </td>
+    <td>
+      <i>Optional</i>. Chat user login.
+    </td>
+  </tr>
+</tbody>
+</table>
+
+### User
+
+Describes information about a user or bot.
+
+| Property                 | Type      | Description                                                                                                                                                      |
+|--------------------------|-----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| added_to_attachment_menu | `boolean` | _Optional_. True, if this user added the bot to the attachment menu.                                                                                             |
+| allows_write_to_pm       | `boolean` | _Optional_. True, if this user allowed the bot to message them.                                                                                                  |
+| is_premium               | `boolean` | _Optional_. Has the user purchased Telegram Premium.                                                                                                             |
+| first_name               | `string`  | Bot or user name.                                                                                                                                                |
+| id                       | `number`  | Bot or user ID.                                                                                                                                                  |
+| is_bot                   | `boolean` | _Optional_. Is the user a bot.                                                                                                                                   |
+| is_premium               | `boolean` | _Optional_. Has the user purchased Telegram Premium.                                                                                                             |
+| last_name                | `string`  | _Optional_. User's last name.                                                                                                                                    |
+| language_code            | `string`  | _Optional_. [IETF](https://en.wikipedia.org/wiki/IETF_language_tag) user's language.                                                                             |
+| photo_url                | `string`  | _Optional_. Link to the user's or bot's photo. Photos can have formats `.jpeg` and `.svg`. It is returned only for Mini Apps opened through the attachment menu. |
+| username                 | `string`  | _Optional_. Login of the bot or user.                                                                                                                            |
\ No newline at end of file
diff --git a/apps/docs/platform/test-environment.md b/apps/docs/platform/test-environment.md
new file mode 100644
index 000000000..ccb02d8dc
--- /dev/null
+++ b/apps/docs/platform/test-environment.md
@@ -0,0 +1,31 @@
+# Test environment
+
+Telegram provides the special environment for development with some specific features. For example,
+a developer will be allowed to create a new Telegram bot and specify a Mini Apps link with `http`
+protocol or even IP. As opposed to the test environment, in production, a developer is only allowed
+to specify links with `https` protocol. That's why this step is important during the Mini App
+development process.
+
+::: info
+You are only allowed to create a new account in the test environment in mobile versions of Telegram.
+Nevertheless, in this documentation, you will find out how to link to these accounts in other
+versions of Telegram.
+:::
+
+[//]: # (TODO: Other platforms?)
+
+### Telegram iOS
+
+- Fastly tap `Settings` section 10 times;
+- Tap `Accounts` button;
+- Tap `Login to another account`;
+- Tap `Test` button;
+- Create a new account.
+
+### Telegram Desktop
+
+- Open side menu;
+- Expand the menu item, where current username is specified;
+- Hold `Shift` + `Alt` and press **right** mouse button on `Add Account` button;
+- Select `Test Server`;
+- Link the account created in the test environment.
\ No newline at end of file
diff --git a/apps/docs/platform/ui/back-button.md b/apps/docs/platform/ui/back-button.md
new file mode 100644
index 000000000..3264f9245
--- /dev/null
+++ b/apps/docs/platform/ui/back-button.md
@@ -0,0 +1,17 @@
+# Back Button
+
+![Back Button](/components/back-button.png)
+
+The main task that the Back Button performs is to provide a seemingly native way to navigate back in
+the routing history. However, Telegram does not restrict the developer in the ways of using the Back
+Button and allows them to handle the component click event as required in the application.
+
+When working with this component, it is important to understand that, like other Telegram Mini Apps
+components, clicking it does not inherently trigger any built-in action. Its handling is the
+responsibility of the developer.
+
+To show the Back Button, it is required to
+call [web_app_setup_back_button](../apps-communication/methods.md#web-app-setup-back-button)
+method. When user clicks this component, Telegram application
+emits [back_button_pressed](../apps-communication/events.md#back-button-pressed) event.
+
diff --git a/apps/docs/platform/ui/main-button.md b/apps/docs/platform/ui/main-button.md
new file mode 100644
index 000000000..ed0b47341
--- /dev/null
+++ b/apps/docs/platform/ui/main-button.md
@@ -0,0 +1,26 @@
+# Main Button
+
+![Main Button](/components/main-button.png)
+
+The Main Button is a component that is usually used when it is necessary to perform some final
+action.
+
+An example of the use case of this component is sending data. For example, a Mini App may
+involve selecting products from a catalog and filling a user's shopping cart. At the moment when
+products appear in the cart, the developer can display the Main Button, clicking on which will cause
+the creation and processing of the order.
+
+This is a moderately sized yet simple component that offers limited functionality. The developer has
+the ability to control the button text, its active state, button and inner loader visibility. It is
+also possible to update text and background colors.
+
+To update any of the Main Button properties, Telegram Mini Apps provides the
+[web_app_setup_main_button](../apps-communication/methods.md#web-app-setup-main-button) method.
+When user clicks the Main Button, Telegram application emits
+the [main_button_pressed](../apps-communication/events.md#main-button-pressed) event.
+
+::: tip
+If clicking the button produces an action that takes some time to complete, it is recommended to
+display the loader inside the Main Button. This will allow the user to understand that the
+application is not frozen and is currently performing an operation.
+:::
diff --git a/apps/docs/platform/ui/popup.md b/apps/docs/platform/ui/popup.md
new file mode 100644
index 000000000..3f3aa8cf5
--- /dev/null
+++ b/apps/docs/platform/ui/popup.md
@@ -0,0 +1,13 @@
+# Popup
+
+![Popup](/components/popup.png)
+
+Popup is a component that is located on top of the Mini App. Its classic use case is a request for
+user confirmation to perform an action. Telegram Mini Apps allows specifying popup title, message
+and the list of up to 3 configurable buttons.
+
+To show the popup, developer can utilize
+the [web_app_open_popup](../apps-communication/methods.md#web-app-open-popup) Telegram Mini Apps
+method. When user presses any popup button, Telegram application emits
+the [popup_closed](../apps-communication/events.md#popup-closed) event passing the identifier of the
+clicked button.
diff --git a/apps/docs/platform/ui/settings-button.md b/apps/docs/platform/ui/settings-button.md
new file mode 100644
index 000000000..df932ebec
--- /dev/null
+++ b/apps/docs/platform/ui/settings-button.md
@@ -0,0 +1,16 @@
+# Settings Button
+
+![Popup](/components/settings-button.png)
+
+The Settings Button is a component displayed in the top right menu of the Mini App interface. Like
+many other Telegram Mini Apps components, this button does not have a built-in action, and it's up
+to the developer to decide how to handle a click on this button.
+
+Until Telegram Mini Apps version `6.10`, this button was only displayed for Mini Apps belonging to
+Telegram Ads' major advertisers' bots. Starting from version `6.10`, all developers have the option
+to display this button using
+the [web_app_setup_settings_button](../apps-communication/methods.md#web-app-setup-settings-button)
+method.
+
+When a user clicks the Settings Button, the Telegram application emits
+the [settings_button_pressed](../apps-communication/events.md#settings-button-pressed) event.
\ No newline at end of file

From 878734ce78f8e23b0bf981be7ee9202c055f845c Mon Sep 17 00:00:00 2001
From: Vladislav Kibenko <wolfram.deus@gmail.com>
Date: Fri, 17 Nov 2023 19:02:12 +0300
Subject: [PATCH 2/3] chore(links): actualize docs links

---
 packages/bridge/src/events/events.ts   | 32 +++++++--------
 packages/bridge/src/methods/methods.ts | 54 +++++++++++++-------------
 packages/bridge/src/methods/popup.ts   |  2 +-
 packages/init-data/src/types.ts        |  6 +--
 packages/launch-params/README.md       |  2 +-
 packages/launch-params/src/types.ts    |  2 +-
 packages/theme-params/README.md        |  2 +-
 packages/theme-params/src/types.ts     |  2 +-
 8 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/packages/bridge/src/events/events.ts b/packages/bridge/src/events/events.ts
index 759226026..39a56d54e 100644
--- a/packages/bridge/src/events/events.ts
+++ b/packages/bridge/src/events/events.ts
@@ -20,13 +20,13 @@ import type {
 
 /**
  * Map where key is known event name, and value is its listener.
- * @see https://docs.telegram-mini-apps.com/apps-communication/events
+ * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events
  */
 export interface Events {
   /**
    * User clicked back button.
    * @since v6.1
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#back-button-pressed
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#back-button-pressed
    */
   back_button_pressed: () => void;
 
@@ -34,7 +34,7 @@ export interface Events {
    * Telegram application attempted to extract text from clipboard.
    * @param payload - event payload.
    * @since v6.4
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#clipboard-text-received
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#clipboard-text-received
    */
   clipboard_text_received: (payload: ClipboardTextReceivedPayload) => void;
 
@@ -42,20 +42,20 @@ export interface Events {
    * Custom method invocation completed.
    * @param payload - event payload.
    * @since v6.9
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#custom-method-invoked
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#custom-method-invoked
    */
   custom_method_invoked: (payload: CustomMethodInvokedPayload) => void;
 
   /**
    * An invoice was closed.
    * @param payload - invoice close information.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#invoice-closed
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#invoice-closed
    */
   invoice_closed: (payload: InvoiceClosedPayload) => void;
 
   /**
    * User clicked the Main Button.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#main-button-pressed
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#main-button-pressed
    */
   main_button_pressed: () => void;
 
@@ -63,20 +63,20 @@ export interface Events {
    * Application received phone access request status.
    * @param payload - event payload.
    * @since v6.9
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#phone-requested
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#phone-requested
    */
   phone_requested: (payload: PhoneRequestedPayload) => void;
 
   /**
    * Popup was closed.
    * @param payload - event payload.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#popup-closed
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#popup-closed
    */
   popup_closed: (payload: PopupClosedPayload) => void;
 
   /**
    * Parent iframe requested current iframe reload.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#reload-iframe
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#reload-iframe
    */
   reload_iframe: () => void;
 
@@ -84,14 +84,14 @@ export interface Events {
    * The QR scanner scanned some QR and extracted its content.
    * @param payload - event payload.
    * @since v6.4
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#qr-text-received
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#qr-text-received
    */
   qr_text_received: (payload: QrTextReceivedPayload) => void;
 
   /**
    * QR scanner was closed.
    * @since v6.4
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#scan-qr-popup-closed
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#scan-qr-popup-closed
    */
   scan_qr_popup_closed: () => void;
 
@@ -100,14 +100,14 @@ export interface Events {
    * `<style/>` tag html content, a developer could use. The stylesheet described in the payload
    * will help the developer to stylize the app scrollbar (but he is still able to do it himself).
    * @param html - `style` tag inner HTML.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#set-custom-style
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#set-custom-style
    */
   set_custom_style: (html: string) => void;
 
   /**
    * Occurs when the Settings Button was pressed.
    * @since v6.1
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#settings-button-pressed
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#settings-button-pressed
    */
   settings_button_pressed: () => void;
 
@@ -115,7 +115,7 @@ export interface Events {
    * Occurs whenever theme settings are changed in the user's Telegram app
    * (including switching to night mode).
    * @param payload - event payload.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#theme-changed
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#theme-changed
    */
   theme_changed: (payload: ThemeChangedPayload) => void;
 
@@ -123,7 +123,7 @@ export interface Events {
    * Occurs whenever the viewport has been changed. For example, when the user started
    * dragging the application or called the expansion method.
    * @param payload - event payload.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#viewport-changed
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#viewport-changed
    */
   viewport_changed: (payload: ViewportChangedPayload) => void;
 
@@ -131,7 +131,7 @@ export interface Events {
    * Application received write access request status.
    * @param payload - event payload.
    * @since v6.9
-   * @see https://docs.telegram-mini-apps.com/apps-communication/events#write-access-requested
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/events#write-access-requested
    */
   write_access_requested: (payload: WriteAccessRequestedPayload) => void;
 }
diff --git a/packages/bridge/src/methods/methods.ts b/packages/bridge/src/methods/methods.ts
index 2a797f6fb..43fd46d31 100644
--- a/packages/bridge/src/methods/methods.ts
+++ b/packages/bridge/src/methods/methods.ts
@@ -23,13 +23,13 @@ interface CreateParams<Params = undefined, VersionedParam extends UnionKeys<Para
 
 /**
  * Describes list of events and their parameters that could be posted by Bridge.
- * @see https://docs.telegram-mini-apps.com/apps-communication/methods
+ * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods
  */
 export interface Methods {
   /**
    * Notifies parent iframe about the current frame is ready. This method is only used in the Web
    * version of Telegram. As a result, Mini App will receive `set_custom_style` event.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#iframe-ready
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#iframe-ready
    */
   iframe_ready: CreateParams<{
     /**
@@ -40,20 +40,20 @@ export interface Methods {
 
   /**
    * Notifies parent iframe about the current iframe is going to reload.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#iframe-will-reload
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#iframe-will-reload
    */
   iframe_will_reload: CreateParams;
 
   /**
    * Closes Mini App.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-close
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-close
    */
   web_app_close: CreateParams;
 
   /**
    * Closes a QR scanner. The Telegram application creates `scan_qr_popup_closed` event.
    * @since v6.4
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-close-scan-qr-popup
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-close-scan-qr-popup
    */
   web_app_close_scan_qr_popup: CreateParams;
 
@@ -64,7 +64,7 @@ export interface Methods {
    * To get more information, take a look at `web_app_data` field in the
    * class [Message](https://core.telegram.org/bots/api#message).
    *
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-data-send
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-data-send
    */
   web_app_data_send: CreateParams<{
     /**
@@ -75,7 +75,7 @@ export interface Methods {
 
   /**
    * Expands the Mini App.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-expand
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-expand
    */
   web_app_expand: CreateParams;
 
@@ -83,7 +83,7 @@ export interface Methods {
   /**
    * Invokes custom method.
    * @since v6.9
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-invoke-custom-method
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-invoke-custom-method
    */
   web_app_invoke_custom_method: CreateParams<AnyInvokeCustomMethodParams>;
 
@@ -91,7 +91,7 @@ export interface Methods {
    * Opens an invoice by its specified slug. More information about invoices in
    * this [documentation](https://core.telegram.org/bots/payments).
    * @since v6.1
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-open-invoice
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-open-invoice
    */
   web_app_open_invoice: CreateParams<{
     /**
@@ -102,7 +102,7 @@ export interface Methods {
 
   /**
    * Opens link in the default browser. Mini App will not be closed.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-open-link
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-open-link
    */
   web_app_open_link: CreateParams<{
     /**
@@ -121,7 +121,7 @@ export interface Methods {
   /**
    * Opens a new popup. When user closes the popup, Telegram creates the `popup_closed` event.
    * @since v6.2
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-open-popup
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-open-popup
    */
   web_app_open_popup: CreateParams<PopupParams>;
 
@@ -130,7 +130,7 @@ export interface Methods {
    * the `scan_qr_popup_closed` event. When the scanner reads QR, Telegram creates the
    * `qr_text_received` event.
    * @since v6.4
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-open-scan-qr-popup
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-open-scan-qr-popup
    */
   web_app_open_scan_qr_popup: CreateParams<{
     /**
@@ -143,7 +143,7 @@ export interface Methods {
    * Opens the Telegram link by its pathname and query parameters. The link will be opened in the
    * Telegram app, Mini App will be closed.
    * @since v6.1
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-open-tg-link
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-open-tg-link
    */
   web_app_open_tg_link: CreateParams<{
     /**
@@ -157,7 +157,7 @@ export interface Methods {
    * Reads text from the clipboard. The method accepts a request identifier which is used to
    * appropriately retrieve the method execution result from the `clipboard_text_received` event.
    * @since v6.4
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-read-text-from-clipboard
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-read-text-from-clipboard
    */
   web_app_read_text_from_clipboard: CreateParams<{
     /**
@@ -170,7 +170,7 @@ export interface Methods {
   /**
    * Notifies Telegram about current application is ready to be shown. This method will make
    * Telegram to remove application loader and display Mini App.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-ready
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-ready
    */
   web_app_ready: CreateParams;
 
@@ -178,34 +178,34 @@ export interface Methods {
   /**
    * Requests access to current user's phone.
    * @since v6.9
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-request-phone
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-request-phone
    */
   web_app_request_phone: CreateParams;
 
   /**
    * Requests current theme from Telegram. As a result, Telegram will create `theme_changed` event.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-request-theme
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-request-theme
    */
   web_app_request_theme: CreateParams;
 
   /**
    * Requests current viewport information from Telegram. As a result, Telegram will create
    * `viewport_changed` event.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-request-viewport
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-request-viewport
    */
   web_app_request_viewport: CreateParams;
 
   /**
    * Requests write message access to current user.
    * @since v6.9
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-rqeuest-write-access
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-rqeuest-write-access
    */
   web_app_request_write_access: CreateParams;
 
   /**
    * Updates the Mini App background color.
    * @since v6.1
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-set-background-color
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-set-background-color
    */
   web_app_set_background_color: CreateParams<{
     /**
@@ -217,7 +217,7 @@ export interface Methods {
   /**
    * Updates the Mini App header color.
    * @since v6.1
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-set-header-color
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-set-header-color
    */
   web_app_set_header_color: CreateParams<
     | {
@@ -237,7 +237,7 @@ export interface Methods {
   /**
    * Updates the Back Button settings.
    * @since v6.1
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-setup-back-button
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-setup-back-button
    */
   web_app_setup_back_button: CreateParams<{
     /**
@@ -248,7 +248,7 @@ export interface Methods {
 
   /**
    * Updates current closing behavior.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-setup-closing-behavior
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-setup-closing-behavior
    */
   web_app_setup_closing_behavior: CreateParams<{
     /**
@@ -259,7 +259,7 @@ export interface Methods {
 
   /**
    * Updates the Main Button settings.
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-setup-main-button
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-setup-main-button
    */
   web_app_setup_main_button: CreateParams<{
     /**
@@ -292,7 +292,7 @@ export interface Methods {
   /**
    * Updates current state of Settings Button.
    * @since v6.10
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-setup-settings-button
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-setup-settings-button
    */
   web_app_setup_settings_button: CreateParams<{
     /**
@@ -307,7 +307,7 @@ export interface Methods {
    * the user to choose a specific chat, then opens that chat and inserts the bot's username and
    * the specified inline query in the input field.
    * @since v6.7
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-switch-inline-query
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-switch-inline-query
    */
   web_app_switch_inline_query: CreateParams<{
     /**
@@ -324,7 +324,7 @@ export interface Methods {
   /**
    * Generates haptic feedback event.
    * @since v6.1
-   * @see https://docs.telegram-mini-apps.com/apps-communication/methods#web-app-trigger-haptic-feedback
+   * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#web-app-trigger-haptic-feedback
    */
   web_app_trigger_haptic_feedback: CreateParams<AnyHapticFeedbackParams>;
 }
diff --git a/packages/bridge/src/methods/popup.ts b/packages/bridge/src/methods/popup.ts
index 5b2fb4644..38bba8ff2 100644
--- a/packages/bridge/src/methods/popup.ts
+++ b/packages/bridge/src/methods/popup.ts
@@ -20,7 +20,7 @@ export interface PopupParams {
 
 /**
  * Describes the native popup button.
- * @see https://docs.telegram-mini-apps.com/apps-communication/methods#popupbutton
+ * @see https://docs.telegram-mini-apps.com/platform/apps-communication/methods#popupbutton
  */
 export type PopupButton = {
   /**
diff --git a/packages/init-data/src/types.ts b/packages/init-data/src/types.ts
index 6212ea6ae..2eba269e1 100644
--- a/packages/init-data/src/types.ts
+++ b/packages/init-data/src/types.ts
@@ -10,7 +10,7 @@ export type ChatType =
   | string;
 
 /**
- * Describes Telegram Mini Apps [User](https://docs.telegram-mini-apps.com/launch-parameters/init-data#user) type.
+ * Describes Telegram Mini Apps [User](https://docs.telegram-mini-apps.com/platform/launch-parameters/init-data#user) type.
  */
 export interface User {
   /**
@@ -68,7 +68,7 @@ export interface User {
 }
 
 /**
- * Describes Telegram Mini Apps [Chat](https://docs.telegram-mini-apps.com/launch-parameters/init-data#chat) type.
+ * Describes Telegram Mini Apps [Chat](https://docs.telegram-mini-apps.com/platform/launch-parameters/init-data#chat) type.
  */
 export interface Chat {
   /**
@@ -99,7 +99,7 @@ export interface Chat {
 }
 
 /**
- * Describes Telegram Mini Apps [InitData](https://docs.telegram-mini-apps.com/launch-parameters/init-data#parameters-list)
+ * Describes Telegram Mini Apps [InitData](https://docs.telegram-mini-apps.com/platform/launch-parameters/init-data#parameters-list)
  * type.
  */
 export interface InitData {
diff --git a/packages/launch-params/README.md b/packages/launch-params/README.md
index 867143c54..4f2afe913 100644
--- a/packages/launch-params/README.md
+++ b/packages/launch-params/README.md
@@ -7,7 +7,7 @@
 ![[npm-link]][npm-shield]
 
 Provides utilities to work with Telegram Mini
-Apps [launch parameters](https://docs.telegram-mini-apps.com/launch-parameters/common-information).
+Apps [launch parameters](https://docs.telegram-mini-apps.com/platform/launch-parameters/common-information).
 
 This library is a part of TypeScript packages ecosystem around Telegram Web
 Apps. To see full documentation and other libraries, please, visit
diff --git a/packages/launch-params/src/types.ts b/packages/launch-params/src/types.ts
index adb251af3..16b79555c 100644
--- a/packages/launch-params/src/types.ts
+++ b/packages/launch-params/src/types.ts
@@ -18,7 +18,7 @@ export type Platform =
 
 /**
  * Telegram Mini Apps launch parameters.
- * @see https://docs.telegram-mini-apps.com/launch-parameters/common-information
+ * @see https://docs.telegram-mini-apps.com/platform/launch-parameters/common-information
  */
 export interface LaunchParams {
   /**
diff --git a/packages/theme-params/README.md b/packages/theme-params/README.md
index f86ad9550..1a1fb0ebb 100644
--- a/packages/theme-params/README.md
+++ b/packages/theme-params/README.md
@@ -7,7 +7,7 @@
 ![[npm-link]][npm-shield]
 
 Provides utilities to work with Telegram Mini
-Apps [theme](https://docs.telegram-mini-apps.com/functionality/theming).
+Apps [theme](https://docs.telegram-mini-apps.com/platform/functionality/theming).
 
 This library is a part of TypeScript packages ecosystem around Telegram Web
 Apps. To see full documentation and other libraries, please, visit
diff --git a/packages/theme-params/src/types.ts b/packages/theme-params/src/types.ts
index 0dd821ef2..abf852a51 100644
--- a/packages/theme-params/src/types.ts
+++ b/packages/theme-params/src/types.ts
@@ -1,7 +1,7 @@
 import type { RGB } from '@tma.js/colors';
 
 /**
- * Application [theme parameters](https://docs.telegram-mini-apps.com/functionality/theming).
+ * Application [theme parameters](https://docs.telegram-mini-apps.com/platform/functionality/theming).
  * Defines palette used by the Telegram application.
  */
 export interface ThemeParams {

From 3a59bfc210542cc062b867257fb3bca5554c912f Mon Sep 17 00:00:00 2001
From: Vladislav Kibenko <wolfram.deus@gmail.com>
Date: Fri, 17 Nov 2023 19:20:31 +0300
Subject: [PATCH 3/3] fix(links): fix broken links

---
 apps/docs/docs/launch-parameters/init-data.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/docs/docs/launch-parameters/init-data.md b/apps/docs/docs/launch-parameters/init-data.md
index 017d52ab8..a97111b4e 100644
--- a/apps/docs/docs/launch-parameters/init-data.md
+++ b/apps/docs/docs/launch-parameters/init-data.md
@@ -14,9 +14,9 @@ This section provides detailed information about an essential aspect of Telegram
 relates to application security for developers. We recommend utilizing well-established and tested
 packages:
 
-- For browser: [@tma.js/init-data](../packages/typescript/tma-js-init-data/about.md)
-- For Node: [@tma.js/init-data-node](../packages/typescript/tma-js-init-data-node.md)
-- For GoLang: [init-data-golang](../packages/golang/init-data-golang.md)
+- For browser: [@tma.js/init-data](../../packages/typescript/tma-js-init-data/about.md)
+- For Node: [@tma.js/init-data-node](../../packages/node/tma-js-init-data-node.md)
+- For GoLang: [init-data-golang](../../packages/golang/init-data-golang.md)
 
 :::