initial commit

.github/workflows/deploy.yml

@@ -0,0 +1,55 @@
+name: CI
+
+on:
+  push:
+    branches: ["main"]
+
+  # 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@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        # We need to pass the repository name directly to the Vite build command
+        # as the "base" parameter. 
+        # This is necessary because it aligns with how GitHub Pages functions. 
+        # Here's how you can achieve this:
+        run: npm run build -- -- --base /${{ github.event.repository.name }}
+      - name: Create 404.html
+        run: cp ./app/dist/index.html ./app/dist/404.html
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload dist repository
+          path: './app/dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+.expo-shared
+
+.vscode
+
+# testing
+coverage
+
+# next.js
+.next/
+.swc/
+out/
+build
+
+# expo
+.expo
+
+# misc
+.DS_Store
+*.pem
+dist
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+# bot
+bot/.env

LICENSE

@@ -0,0 +1,19 @@
+MIT License
+
+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.

README.md

@@ -0,0 +1,149 @@
+# Telegram Onboarding Kit
+
+[Telegram Onboarding Kit](https://github.com/Easterok/telegram-onboarding-kit) is a simple-to-use tool for crafting **onboardings** and **paywalls** for Telegram Bots. You can create pretty onboardings with minimal adjustments to our presets or easily create your own custom flows with our web components – thanks to **Telegram Mini Apps**.
+
+But why do you need it? Because onboarding/paywall is a **must-have attribute** of any mobile app – it offers a bright product presentation and seamless payment process. We believe Telegram Mini Apps will be used by millions of users in the future and this kit will help developers to turn their apps into real products!
+
+To start:
+
+- Have a look at live demo: <a href="https://t.me/onboarding_kit_demo_bot" alt="Run Demo Bot shield"><img src="https://img.shields.io/badge//start-Demo%20Bot-blue?logo=data:image/svg+xml;base64,PHN2ZyBpZD0iTGl2ZWxsb18xIiBkYXRhLW5hbWU9IkxpdmVsbG8gMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDI0MCAyNDAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iMTIwIiB5MT0iMjQwIiB4Mj0iMTIwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWQ5M2QyIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMzhiMGUzIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHRpdGxlPlRlbGVncmFtX2xvZ288L3RpdGxlPjxjaXJjbGUgY3g9IjEyMCIgY3k9IjEyMCIgcj0iMTIwIiBmaWxsPSJ1cmwoI2xpbmVhci1ncmFkaWVudCkiLz48cGF0aCBkPSJNODEuMjI5LDEyOC43NzJsMTQuMjM3LDM5LjQwNnMxLjc4LDMuNjg3LDMuNjg2LDMuNjg3LDMwLjI1NS0yOS40OTIsMzAuMjU1LTI5LjQ5MmwzMS41MjUtNjAuODlMODEuNzM3LDExOC42WiIgZmlsbD0iI2M4ZGFlYSIvPjxwYXRoIGQ9Ik0xMDAuMTA2LDEzOC44NzhsLTIuNzMzLDI5LjA0NnMtMS4xNDQsOC45LDcuNzU0LDAsMTcuNDE1LTE1Ljc2MywxNy40MTUtMTUuNzYzIiBmaWxsPSIjYTljNmQ4Ii8+PHBhdGggZD0iTTgxLjQ4NiwxMzAuMTc4LDUyLjIsMTIwLjYzNnMtMy41LTEuNDItMi4zNzMtNC42NGMuMjMyLS42NjQuNy0xLjIyOSwyLjEtMi4yLDYuNDg5LTQuNTIzLDEyMC4xMDYtNDUuMzYsMTIwLjEwNi00NS4zNnMzLjIwOC0xLjA4MSw1LjEtLjM2MmEyLjc2NiwyLjc2NiwwLDAsMSwxLjg4NSwyLjA1NSw5LjM1Nyw5LjM1NywwLDAsMSwuMjU0LDIuNTg1Yy0uMDA5Ljc1Mi0uMSwxLjQ0OS0uMTY5LDIuNTQyLS42OTIsMTEuMTY1LTIxLjQsOTQuNDkzLTIxLjQsOTQuNDkzcy0xLjIzOSw0Ljg3Ni01LjY3OCw1LjA0M0E4LjEzLDguMTMsMCwwLDEsMTQ2LjEsMTcyLjVjLTguNzExLTcuNDkzLTM4LjgxOS0yNy43MjctNDUuNDcyLTMyLjE3N2ExLjI3LDEuMjcsMCwwLDEtLjU0Ni0uOWMtLjA5My0uNDY5LjQxNy0xLjA1LjQxNy0xLjA1czUyLjQyNi00Ni42LDUzLjgyMS01MS40OTJjLjEwOC0uMzc5LS4zLS41NjYtLjg0OC0uNC0zLjQ4MiwxLjI4MS02My44NDQsMzkuNC03MC41MDYsNDMuNjA3QTMuMjEsMy4yMSwwLDAsMSw4MS40ODYsMTMwLjE3OFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="/></a>
+- Watch tutorial: [![YouTube | Watch Tutorial](https://img.shields.io/badge/YouTube-Watch%20Tutorial-red?logo=youtube&style=social)](https://www.youtube.com/watch?v=q9R42T-7ykI)
+- And check out video demo:
+
+https://github.com/Easterok/telegram-onboarding-kit/assets/7571844/a3b7040d-35fa-40c5-ac36-d0595eb33457
+
+## Features
+
+- Native support for images, videos, Telegram (.tgs) animated stickers, forms, feature lists and page navigation
+- Configurable products on paywall
+- One-click 0$ **deploy** on GitHub Pages
+- Auto adaptation to Telegram color scheme
+- **Telegram Payments** & 👛 **Wallet Pay** payment methods
+- Large library of UI components for custom builds
+- Language and currency **localization**
+- Buttons with **haptic feedback**
+- Content pre-loading for smooth user experience
+- Telegram-native design
+- Many **examples/presets**
+- MIT License (free for commercial use)
+
+## Quick Start
+
+For a quick start you can watch video tutorial: [![YouTube | Watch Tutorial](https://img.shields.io/badge/YouTube-Watch%20Tutorial-red?logo=youtube&style=social)](https://www.youtube.com/watch?v=q9R42T-7ykI)
+
+But if you prefer text:
+
+1. Fork this repository and clone it to your local machine
+2. Run command `npm ci` to install all the dependencies (make sure that you have installed `pip` and `node` on your machine)
+3. And now you're ready to run the app with `npm run dev` command
+4. To run python bot put your tokens to `bot/.env` (use `bot/example.env` as an example). Then start the bot with `npm run bot` command
+
+## Configuration
+
+The heart of this project lies in the configuration. By tweaking the configuration file, you can customize the onboarding experience according to your project's requirements. The configuration file can be found at [config.ts](./app/src/config.ts).
+
+For detailed information on configuring the app, refer to the [Configuration Guide](./configuration-guide.md).
+
+## 🌈 Examples/Presets
+
+To help you understand how to create your own configuration, we provide multiple example applications in the `./examples` directory. Each example demonstrates different onboarding scenarios and includes a sample configuration file:
+
+1. Base App
+
+   - Located in: `./app`
+   - Key features: `various slide configurations` `telegram-native design` `onboarding from demo video`
+   - Run command: `npm run dev`
+
+2. Fashion AI App
+
+   - Located in: `./examples/ai`
+   - Key features: `interactive slides` `currency configuration` `vertical products on paywall` `custom preset`
+   - Run command: `npm run dev:ai`
+
+3. Meditation App
+
+   - Located in: `./examples/meditation`
+   - Key features: `localization` `custom icons` `different image styles` `custom preset`
+   - Run command: `npm run dev:meditation`
+
+4. AI Tales App
+
+   - Located in: `./examples/tales`
+   - Key features: `language/currency localization` `interactive flow on onboarding` `custom preset`
+   - Run command: `npm run dev:tales`
+
+5. VPN App
+   - Located in: `./examples/vpn`
+   - Key features: `app created during YouTube tutorial using base preset`
+   - Run command: `npm run dev:vpn`
+
+6. ChatGPT App
+   - Located in: `./examples/chatgpt`
+   - Key features: `onboarding for real bot @chatgpt_karfly_bot` `videos`
+   - Run command: `npm run dev:chagpt`
+
+## Reusable Packages
+
+### [@tok/ui](packages/ui/README.md)
+
+A collection of essential UI components. Explore the potential of these components by visiting our [Figma project](https://www.figma.com/file/ssQqPZ2vqZhD4QF2xyCTd2/Telegram-Onboarding--ToolKit), where you can see them in action and gain a better understanding of their capabilities.
+
+### [@tok/telegram-ui](packages/telegram-ui/README.md)
+
+This package offers a convenient wrapper around the [@twa-dev/sdk](https://github.com/twa-dev/SDK), providing Vue-like components and use-case solutions for Popups, MainButton, BackButton, and Theme integration.
+
+### [@tok/i18n](packages/i18n/README.md)
+
+A minimalistic package for handling localization in your applications. We refrain from using third-party solutions due to concerns about the bundle sizes they introduce. While we provide this solution, feel free to replace it with your own if it better suits your needs.
+
+### [@tok/generation](packages/generation/README.md)
+
+The primary package for generating projects via a configuration file. It offers presets that can be easily extended within the configuration file.
+
+### Tools:
+
+#### [@tok/compress](packages/compress/README.md)
+
+A Node solution for image compression. It processes PNG, JPG, and JPEG files, compressing them and converting them into WEBP, PNG, JPG, or JPEG formats.
+
+#### [@tok/eslint-config](packages/compress/README.md)
+
+A basic ESLint configuration for vue projects to maintain clean and consistent code.
+
+#### [@tok/tsconfig](packages/tsconfig/README.md)
+
+Shared `tsconfig.base.json` file for vue + vite projects
+
+## 3rd party packages:
+
+### [Turborepo](https://turbo.build/)
+
+A package for managing a monorepository. If you haven't heard of it, take a look at its [documentation](https://turbo.build/repo/docs); it's worth it
+
+### [Vite](https://vitejs.dev/)
+
+A package for building and running modern web applications. [Documentation](https://vitejs.dev/guide/)
+
+### [Vue](https://vuejs.org/)
+
+Vue is a JavaScript framework for building user interfaces. [Documentation](https://vuejs.org/)
+
+### [@twa-dev/sdk](https://github.com/twa-dev/SDK)
+
+NPM package for Telegram Mini Apps SDK. Take a look at their [GitHub repository](https://github.com/twa-dev/SDK)
+
+### [Lottie-web](https://github.com/airbnb/lottie-web)
+
+Lottie is a mobile library for Web that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively!
+
+For information on how `sticker.tgs` files are rendered in this project, please refer to [this link](./packages/telegram-ui/components/Sticker/README.md)
+
+## Our team
+
+- [Konstantin Beskrovnyi](https://github.com/Easterok) – Web
+- [Karim Iskakov](https://github.com/karfly) – Python/Product
+- [Michael Browk](https://www.michaelbrowk.com) – Design
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

app/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['@tok/eslint-config'],
+  parserOptions: { tsconfigRootDir: __dirname },
+};

app/README.md

@@ -0,0 +1 @@
+# Hi!

app/_internal/tgs.loader.ts

@@ -0,0 +1,37 @@
+import fs from 'fs';
+import { ungzip } from 'pako';
+import type { Plugin } from 'vite';
+
+// find the way to import it as a component
+const tgsRegexp = /\.tgs$/;
+
+export function telegramStickerLoader(): Plugin {
+  return {
+    name: 'telegram-sticker-loader',
+    enforce: 'pre',
+    load(id: string) {
+      if (!id.match(tgsRegexp)) {
+        return;
+      }
+
+      const [path, importType = 'json'] = id.split('?', 2) as [string, 'json'];
+
+      let decodedTgs;
+
+      try {
+        const fileBuffer = fs.readFileSync(path);
+
+        decodedTgs = new TextDecoder('utf-8').decode(ungzip(fileBuffer));
+      } catch (e) {
+        console.error(`\n${id} couldn't be loaded by telegramStickerLoader \n`);
+
+        return;
+      }
+
+      if (importType === 'json') {
+        // https://v8.dev/blog/cost-of-javascript-2019#json
+        return `export default JSON.parse(${JSON.stringify(decodedTgs)})`;
+      }
+    },
+  };
+}

app/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Onboarding | Tok</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,maximum-scale=1"
+    />
+    <meta name="theme-color" content="#fff" />
+
+    <meta name="robots" content="all" />
+    <meta name="robots" content="index, follow" />
+    <meta name="robots" content="noarchive" />
+
+    <link rel="icon" href="/favicon.ico" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+
+    <!-- Replace this with your font -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but tok-onboarding doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>

app/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@tok/app",
+    "version": "0.0.0",
+    "scripts": {
+        "dev": "vite --port 3000 --open",
+        "build": "vite build"
+    },
+    "dependencies": {
+        "@tok/generation": "*",
+        "vue": "^3.3.4",
+        "vue-router": "^4.2.5"
+    },
+    "devDependencies": {
+        "@tok/tsconfig": "*",
+        "@tok/eslint-config": "*"
+    }
+}

app/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

app/src/App.vue

@@ -0,0 +1,9 @@
+<template>
+  <root />
+</template>
+
+<script setup lang="ts">
+import './styles.scss';
+
+import { Root } from '@tok/generation';
+</script>