Repository: telegram-mini-apps-dev/vanilla-js-boilerplate
Branch: master
Commit: 31bd721d67ce
Files: 4
Total size: 10.1 KB

Directory structure:
gitextract_9um0k6cc/

├── .github/
│   └── workflows/
│       └── static.yml
├── LICENSE
├── README.md
└── index.html

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/workflows/static.yml
================================================
# 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: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

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@v5
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: '.'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2023 TON Foundation

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================
FILE: README.md
================================================
<p align="center">
  <br>
  <img width="240" src="./assets/tapps.png" alt="logo of telegram web apps">
  <br>
  <br>
</p>

# Telegram Mini Apps Basic Example
This is a basic and straightforward Telegram Mini App(TMA) implemented using plain JavaScript, HTML, and CSS. This project aims to provide a minimalistic example of how to create a simple TWA and launch it within Telegram without relying on complex build tools or bleeding-edge libraries.

- App is available via direct link: https://t.me/simple_telegram_mini_app_bot/app
- Or you can launch app with a bot menu button: https://t.me/simple_telegram_mini_app_bot
- Deployment URL: [https://twa-dev.github.io/simple-telegram-web-app/](https://telegram-mini-apps-dev.github.io/vanilla-js-boilerplate/)

## Features
- Minimalistic user interface.
- No external libraries or frameworks used.
- Easy to understand and modify.

## Getting Started

### Prerequisites

To run this example, you'll need a modern web browser with JavaScript enabled.

### Installation

1. Clone this repository to your local machine:

   ```bash
   git clone https://github.com/Telegram-Mini-Apps-Dev/vanilla-js-boilerplate

2. Navigate to the project directory:

	```bash
	cd vanilla-js-boilerplate

Open index.html in your preferred code editor or IDE.

### Usage
1. Open index.html in your preferred code editor or IDE.
2. Make your changes
3. Create your own GitHub repository, commit and push your updates.
4. Go to your repository GitHub page and open Settings. Check the Pages tab and Build and deployment section. If GitHub Actions option was selected, assets should be deployed to Pages and there will be an URL like `https://<username>.github.io/simple-telegram-mini-app/`. You can copy this URL and use it with [BotFather](https://tg.me/BotFather) bot to create your very own TWA.

### Customization
Feel free to customize this web app to suit your needs. You can modify the HTML, CSS, and JavaScript files as required.

## Contributing
If you'd like to contribute to this project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them with descriptive messages.
4. Push your branch to your fork.
5. Create a pull request to the main repository's main branch.

## License
This project is licensed under the MIT License - see the LICENSE file for details.


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Telegram Mini Apps Vanilla JS Sample App</title>
    <style>
        body {
            --bg-color: var(--tg-theme-bg-color);
            font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--tg-theme-text-color);
            margin: 48px 24px;
            padding: 0;
            color-scheme: var(--tg-color-scheme);
        }

        a {
            color: var(--tg-theme-link-color);
        }
        #viewport {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            height: var(--tg-viewport-stable-height, 100vh);
            pointer-events: none;
            transition: all .2s ease;
        }
        #viewport:after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-width: 4px;
            border-style: solid;
            border-image: linear-gradient(45deg, rgba(64, 224, 208, .5), rgba(173, 255, 47, .5)) 1;
        }

        #viewport-params-size,
        #viewport-params-expand {
            content: attr(text);
            position: absolute;
            display: inline-block;
            background: var(--tg-theme-link-color, rgb(64, 224, 208));
            right: 4px;
            left: auto;
            font-size: 8px;
            padding: 4px;
            vertical-align: top;
        }
        #viewport-params-size {
            top: 4px;
        }
        #viewport-params-expand {
            top: 30px;
        }
    </style>
</head>

<body>
    <main>
        <div align="center">
            <a href="https://ton.org/"><img width="48" src="./assets/tapps.png" alt="logo of telegram web apps"></a>
        </div>
        <h1>Modals</h1>
        <button onclick="Telegram.WebApp.showAlert('Hello World!');">Launch Alert</button>
        <button onclick="showPopup();">Launch Popup</button>

        <h1>Links</h1>
        <ul>
            <li>
                <a href="javascript:Telegram.WebApp.openTelegramLink('https://t.me/trendingapps');">Open link within Telegram</a>
            </li>
            <li>
                <a href="javascript:Telegram.WebApp.openLink('https://ton.org/');">Open link in external browser</a>
            </li>
            <li>
                <a href="javascript:Telegram.WebApp.openLink('https://telegra.ph/api',{try_instant_view:true});">Open link inside Telegram webview</a>
            </li>
        </ul>

        <h1>Buttons</h1>
        <button onclick="Telegram.WebApp.expand();">Expand Webview</button>
        <button onclick="toggleMainButton();">Toggle Main Button</button>
    </main>
    <div id="viewport"></div>
    <div id="viewport-params-size"></div>
    <div id="viewport-params-expand"></div>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <script>
        // Init TWA
        Telegram.WebApp.ready();

        // Event occurs whenever theme settings are changed in the user's Telegram app (including switching to night mode).
        Telegram.WebApp.onEvent('themeChanged', function() {
            document.documentElement.className = Telegram.WebApp.colorScheme;
        });

        // Show main button
        Telegram.WebApp.MainButton.setParams({
            text: 'Main Button'
        });
        Telegram.WebApp.MainButton.onClick(function () {
            Telegram.WebApp.showAlert('Main Button was clicked')
        });	
        Telegram.WebApp.MainButton.show();

        // Function to call showPopup API
        function showPopup() {
            Telegram.WebApp.showPopup({
                title: 'Title',
                message: 'Some message',
                buttons: [
                    {id: 'link', type: 'default', text: 'Open ton.org'},
                    {type: 'cancel'},
                ]
            }, function(btn) {
                if (btn === 'link') {
                    Telegram.WebApp.openLink('https://ton.org/');
                }
            });
        };

        // Function to toggle main TWA button
        function toggleMainButton() {
            if (Telegram.WebApp.MainButton.isVisible) {
                Telegram.WebApp.MainButton.hide();
            } else {
                Telegram.WebApp.MainButton.show();
            }
        };

        function setViewportData() {
            var sizeEl = document.getElementById('viewport-params-size');
            sizeEl.innerText = 'width: ' + window.innerWidth + ' x ' + 
                'height: ' + Telegram.WebApp.viewportStableHeight;

            var expandEl = document.querySelector('#viewport-params-expand');
            expandEl.innerText = 'Is Expanded: ' + (Telegram.WebApp.isExpanded ? 'true' : 'false');
        }

        Telegram.WebApp.setHeaderColor('secondary_bg_color');

        setViewportData();
        Telegram.WebApp.onEvent('viewportChanged', setViewportData);

        Telegram.WebApp.onEvent('themeChanged', function() {
            document.body.setAttribute('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
        });

    </script>

    <!-- Eruda is console for mobile browsers -->
    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
    <script>eruda.init();</script>
</body>
</html>