Implement template

.github/workflows/github-pages-deploy.yml

@@ -0,0 +1,45 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['master']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload dist repository
+          path: './dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

README.md

@@ -3,37 +3,110 @@
 > ⚠️ Please, avoid using vanilla JavaScript if possible on Telegram Mini Apps
 > platform. It is better to use ES modules at least. [Learn more](#about-iife).
 
-Vanilla JavaScript SDK usage example.
+This example shows how developer could use Vanilla JavaScript to start developing at
+Telegram Mini Apps platform.
 
-## Trying it out
+This template demonstrates how developers can implement an application on the Telegram
+Mini Apps platform using the following technologies and libraries
 
-### Live
+- [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview)
+- [@telegram-apps SDK](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk)
 
-This example is already deployed and can be viewed right in Telegram, just follow
-the [link](https://t.me/tmajsbot/vanilla_example).
+> This boilerplate was created using [pnpm](https://pnpm.io/). Therefore, it is required to use
+> it for this project as well.
 
-### Locally
+## Install Dependencies
 
-Install dependencies:
+If you have just cloned this template, you should install the project dependencies using the
+command:
 
-```bash
-pnpm i
+```Bash
+pnpm install
+```
+
+## Scripts
+
+This project contains the following scripts:
+
+- `serve`. Runs the HTTP server to serve `./dist/index.html`.
+- `tunnel`. Runs tunnel to locally launched HTTP server.
+
+`tunnel` command will return a URL which has to be used by [@BotFather](https://t.me/botfather). Bind
+it to your Mini App and open the application.
+
+To run a script, use the `pnpm run` command:
+
+```Bash
+pnpm run {script}
+# Example: pnpm run serve
 ```
 
-Serve `index.html`:
+## Create Bot and Mini App
+
+Before you start, make sure you have already created a Telegram Bot. Here is
+a [comprehensive guide](https://docs.telegram-mini-apps.com/platform/creating-new-app) on how to
+do it.
+
+## Run
+
+Although Mini Apps are designed to be opened
+within [Telegram applications](https://docs.telegram-mini-apps.com/platform/about#supported-applications),
+you can still develop and test them outside of Telegram during the development process.
+
+To serve `./dist/index.html`, use the `serve` script:
 
 ```bash
 pnpm run serve
 ```
 
-Run tunnel to locally launched HTTP server:
+After this, you will see a similar message in your terminal:
+
+```bash
+Serving!
+  - Local: http://localhost:3000
+  - Network: http://192.168.0.117:3000
+```
+
+Here, you can see the `Local` link, available locally, and `Network` links accessible to all
+devices in the same network with the current device.
+
+To view the application, you need to open the `Local`
+link (`http://localhost:3000` in this example) in your browser.
+
+It is important to note that some libraries in this template, such as `@telegram-apps/sdk`, are not
+intended for use outside of Telegram.
+
+Nevertheless, they appear to function properly. This is because the `dist/js/mockEnv.ts` file, which is
+imported in the application's entry point (`dist/index.html`), employs the `mockTelegramEnv` function
+to simulate the Telegram environment. This trick convinces the application that it is running in a
+Telegram-based environment. Therefore, be cautious not to use this function in production mode
+unless you fully understand its implications.
+
+### Run Inside Telegram
+
+Although it is possible to run the application outside of Telegram, it is recommended to develop it
+within Telegram for the most accurate representation of its real-world functionality.
+
+To run the application inside Telegram, [@BotFather](https://t.me/botfather) requires an HTTPS link.
+
+This template already provides a solution.
+
+Run next script:
 
 ```bash
 pnpm run tunnel
 ```
 
-`tunnel` command will return a URL which has to be used by [@BotFather](https://t.me/botfather). Bind
-it to your Mini App and open the application.
+After this, you will see a similar message in your terminal:
+
+```bash
+your url is: https://odd-yaks-smash.loca.lt
+```
+
+Once the application is displayed correctly, submit one of the `Network` links as the Mini App link
+to [@BotFather](https://t.me/botfather). Then, navigate
+to [https://web.telegram.org/k/](https://web.telegram.org/k/), find your bot, and launch the
+Telegram Mini App. This approach provides the full development experience.
 
 ## About IIFE
 
@@ -73,20 +146,20 @@ to do it:
 ```html
 
 <head>
-  <script src="https://cdn.jsdelivr.net/npm/@tma.js/sdk"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@telegram-apps/sdk/dist/index.iife.js"></script>
 </head>
 ```
 
-Loaded packages of `@tma.js` in IIFE format are accessible by path `window.tmajs.*`:
+Loaded packages of `@telegram-apps` in IIFE format are accessible by path `window.telegramApps.*`:
 
 ```html
 
 <head>
-  <script src="https://cdn.jsdelivr.net/npm/@tma.js/sdk"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@telegram-apps/sdk/dist/index.iife.js"></script>
 </head>
 <body>
   <script>
-    var sdk = window.tmajs.sdk;
+    var sdk = window.telegramApps.sdk;
     console.log(sdk.retrieveLaunchData());
   </script>
 </body>
@@ -95,3 +168,85 @@ Loaded packages of `@tma.js` in IIFE format are accessible by path `window.tmajs
 > ⚠️ In this example we did not specify the exact version of required package. In this case,
 > JSDelivr CDN will return the latest version of the package which in some cases may lead to
 > unexpected behavior. To prevent such case, specify the exact version.
+
+
+
+## Deploy
+
+This boilerplate uses GitHub Pages as the way to host the application externally. GitHub Pages
+provides a CDN which will let your users receive the application rapidly. Alternatively, you could
+use such services as [Heroku](https://www.heroku.com/) or [Vercel](https://vercel.com).
+
+### Manual Deployment
+
+This boilerplate uses the [gh-pages](https://www.npmjs.com/package/gh-pages) tool, which allows
+deploying your application right from your PC.
+
+#### Configuring
+
+Before running the deployment process, ensure that you have done the following:
+
+1. Replaced the `homepage` value in `package.json`. The GitHub Pages deploy tool uses this value to
+   determine the related GitHub project.
+
+For instance, if your GitHub username is `telegram-mini-apps` and the repository name
+is `is-awesome`, the value in the `homepage` field should be the following:
+
+```json
+{
+  "homepage": "https://telegram-mini-apps.github.io/is-awesome"
+}
+```
+
+You can find more information on configuring the deployment in the `gh-pages`
+[docs](https://github.com/tschaub/gh-pages?tab=readme-ov-file#github-pages-project-sites).
+
+#### Before Deploying
+
+Then, run the deployment process, using the `deploy` script:
+
+```Bash
+pnpm run deploy
+```
+
+After the deployment completed successfully, visit the page with data according to your
+username and repository name. Here is the page link example using the data mentioned above:
+https://telegram-mini-apps.github.io/is-awesome
+
+### GitHub Workflow
+
+To simplify the deployment process, this template includes a
+pre-configured [GitHub workflow](.github/workflows/github-pages-deploy.yml) that automatically
+deploys the project when changes are pushed to the `master` branch.
+
+To enable this workflow, create a new environment (or edit the existing one) in the GitHub
+repository settings and name it `github-pages`. Then, add the `master` branch to the list of
+deployment branches.
+
+You can find the environment settings using this
+URL: `https://github.com/{username}/{repository}/settings/environments`.
+
+![img.png](.github/deployment-branches.png)
+
+In case, you don't want to do it automatically, or you don't use GitHub as the project codebase,
+remove the `.github` directory.
+
+### GitHub Web Interface
+
+Alternatively, developers can configure automatic deployment using the GitHub web interface. To do
+this, follow the link: `https://github.com/{username}/{repository}/settings/pages`.
+
+## TON Connect
+
+This boilerplate utilizes the [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview)
+project to demonstrate how developers can integrate functionality related to TON cryptocurrency.
+
+The TON Connect manifest used in this boilerplate is stored in the `dist` folder, where all
+publicly accessible static files are located. Remember
+to [configure](https://docs.ton.org/develop/dapps/ton-connect/manifest) this file according to your
+project's information.
+
+## Useful Links
+
+- [Platform documentation](https://docs.telegram-mini-apps.com/)
+- [Telegram developers community chat](https://t.me/devs)

dist/css/displayData.css

@@ -0,0 +1,19 @@
+.display-data__line {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  gap: 10px;
+  flex-flow: wrap;
+}
+
+.display-data__line-title {
+  border: 1px solid var(--tg-theme-accent-text-color);
+  background-color: var(--tg-theme-bg-color);
+  border-radius: 5px;
+  padding: 2px 8px 4px;
+  box-sizing: border-box;
+}
+
+.display-data__line-value {
+  word-break: break-word;
+}

dist/css/homePage.css

@@ -0,0 +1,23 @@
+.index-page__links {
+  list-style: none;
+  padding-left: 0;
+}
+
+.index-page__link {
+  font-weight: bold;
+  display: inline-flex;
+  gap: 5px;
+}
+
+.index-page__link-item + .index-page__link-item {
+  margin-top: 10px;
+}
+
+.index-page__link-icon {
+  width: 20px;
+  display: block;
+}
+
+.index-page__link-icon svg {
+  display: block;
+}

dist/css/index.css

@@ -0,0 +1,29 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.5;
+
+    background: var(--tg-theme-secondary-bg-color, white);
+    color: var(--tg-theme-text-color, black);
+  }
+
+  blockquote {
+    margin: 0;
+  }
+
+  blockquote p {
+    padding: 15px;
+    background: #eee;
+    border-radius: 5px;
+  }
+
+  pre {
+    overflow: auto;
+  }
+
+  h1 {
+    margin-top: 0.67em;
+  }

dist/css/initDataPage.css

@@ -0,0 +1,7 @@
+.init-data-page__section + .init-data-page__section {
+  margin-top: 12px;
+}
+
+.init-data-page__section-title {
+  margin-bottom: 4px;
+}

dist/css/link.css

@@ -0,0 +1,4 @@
+.link {
+  text-decoration: none;
+  color: var(--tg-theme-link-color);
+}

dist/css/page.css

@@ -0,0 +1,8 @@
+.page {
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.page__disclaimer {
+  margin-bottom: 16px;
+}

dist/css/rgb.css

@@ -0,0 +1,12 @@
+.rgb {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.rgb__icon {
+  width: 18px;
+  aspect-ratio: 1;
+  border: 1px solid #555;
+  border-radius: 50%;
+}