nuxt-telegram-mini-app 0.0.1

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "nuxt-telegram-mini-app",
+  "description": "Structure and configurations for building a Telegram Mini App using Nuxt and TailWind, hosted on Netlify.",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/patricktobias86/nuxt-telegram-mini-app.git"
+  },
+  "author": {
+    "name": "Patrick Tobias",
+    "url": "https://github.com/patricktobias86"
+  },
+  "dependencies": {
+    "@nuxt/eslint": "^1.9.0",
+    "@nuxt/fonts": "^0.11.4",
+    "@nuxt/icon": "^2.0.0",
+    "eslint": "^9.35.0",
+    "nuxt": "^4.1.1",
+    "vue": "^3.5.21",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "@types/node": "^24.3.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^18.0.1",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.4.5",
+    "vitest": "^3.2.4"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+    }
+}

package/public/_redirects

@@ -0,0 +1,2 @@
+/* /index.html 200
+

package/public/img/hero-user.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background rectangle -->
+  <rect width="16" height="16" fill="#f0f0f0"/>
+  
+  <!-- Icon path -->
+  <path d="m 8 1 c -1.65625 0 -3 1.34375 -3 3 s 1.34375 3 3 3 s 3 -1.34375 3 -3 s -1.34375 -3 -3 -3 z m -1.5 7 c -2.492188 0 -4.5 2.007812 -4.5 4.5 v 0.5 c 0 1.109375 0.890625 2 2 2 h 8 c 1.109375 0 2 -0.890625 2 -2 v -0.5 c 0 -2.492188 -2.007812 -4.5 -4.5 -4.5 z m 0 0" fill="#2e3436"/>
+</svg>

package/public/img/nuxt-logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <!-- Soft green background -->
+  <rect width="200" height="200" fill="#e6f7ec" />
+
+  <!-- Original Nuxt logo with scaling and padding -->
+  <g transform="translate(25,25) scale(0.75)">
+    <path d="M108.8 126.6c-1.1 1.9-3 3-5.2 3H7.4c-2.2 0-4.1-1.1-5.2-3s-1.1-4.1 0-6l50.2-87c1.1-1.9 3-3 5.2-3s4.1 1.1 5.2 3l50.2 87c1.1 1.9 1.1 4.1 0 6z" fill="#00C58E"/>
+    <path d="M197.8 126.6c-1.1 1.9-3 3-5.2 3h-89.9c-2.2 0-4.1-1.1-5.2-3s-1.1-4.1 0-6l44.9-77.9c1.1-1.9 3-3 5.2-3s4.1 1.1 5.2 3l44.9 77.9c1.1 1.9 1.1 4.1 0 6z" fill="#108775"/>
+    <path d="M152.9 126.6c-1.1 1.9-3 3-5.2 3h-45c-2.2 0-4.1-1.1-5.2-3s-1.1-4.1 0-6l22.5-39c1.1-1.9 3-3 5.2-3s4.1 1.1 5.2 3l22.5 39c1.1 1.9 1.1 4.1 0 6z" fill="#2F495E"/>
+  </g>
+</svg>

package/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow: /

package/server/api/verify-telegram-data.post.ts

@@ -0,0 +1,150 @@
+import { createHmac } from 'node:crypto'
+import { defineEventHandler, getMethod, readBody, setHeaders, createError } from 'h3'
+
+
+interface TelegramInitData {
+  query_id?: string
+  user?: string
+  auth_date: string
+  hash: string
+  [key: string]: string | undefined
+}
+
+const BOT_TOKEN = process.env.BOT_TOKEN
+
+function verifyTelegramWebAppData(telegramInitData: string): boolean {
+  try {
+    if (!BOT_TOKEN) {
+      console.error('BOT_TOKEN environment variable is not set')
+      return false
+    }
+
+    const urlParams = new URLSearchParams(telegramInitData)
+    const hash = urlParams.get('hash')
+    
+    if (!hash) {
+      return false
+    }
+
+    urlParams.delete('hash')
+
+    // Create data-check-string
+    const dataCheckArr: string[] = []
+    for (const [key, value] of Array.from(urlParams.entries()).sort()) {
+      if (value) {
+        dataCheckArr.push(`${key}=${value}`)
+      }
+    }
+    const dataCheckString = dataCheckArr.join('\n')
+
+    // Create secret key from bot token
+    const secretKey = createHmac('sha256', 'WebAppData').update(BOT_TOKEN).digest()
+
+    // Create hash of data-check-string using secret key
+    const calculatedHash = createHmac('sha256', secretKey).update(dataCheckString).digest('hex')
+
+    return calculatedHash === hash
+  } catch (error) {
+    console.error('Error verifying Telegram data:', error)
+    return false
+  }
+}
+
+function isDataFresh(authDate: string, maxAgeSeconds: number = 86400): boolean {
+  const authTimestamp = parseInt(authDate, 10)
+  const currentTimestamp = Math.floor(Date.now() / 1000)
+  return (currentTimestamp - authTimestamp) <= maxAgeSeconds
+}
+
+export default defineEventHandler(async (event) => {
+  // Set CORS headers
+  setHeaders(event, {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Headers': 'Content-Type',
+    'Access-Control-Allow-Methods': 'POST, OPTIONS',
+    'Content-Type': 'application/json'
+  })
+
+  // Handle preflight requests
+  if (getMethod(event) === 'OPTIONS') {
+    return ''
+  }
+
+  if (getMethod(event) !== 'POST') {
+    throw createError({
+      statusCode: 405,
+      statusMessage: 'Method not allowed'
+    })
+  }
+
+  try {
+    const body = await readBody(event)
+    const { initData } = body
+
+    if (!initData) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Missing initData parameter',
+        data: { valid: false }
+      })
+    }
+
+    // Verify the data authenticity
+    const isValid = verifyTelegramWebAppData(initData)
+
+    if (!isValid) {
+      return {
+        valid: false,
+        error: 'Invalid signature'
+      }
+    }
+
+    // Parse the init data to get user info and check freshness
+    const urlParams = new URLSearchParams(initData)
+    const authDate = urlParams.get('auth_date')
+    
+    if (!authDate) {
+      return {
+        valid: false,
+        error: 'Missing auth_date'
+      }
+    }
+
+    // Check if data is fresh (within 24 hours by default)
+    const isFresh = isDataFresh(authDate, 86400)
+
+    if (!isFresh) {
+      return {
+        valid: false,
+        error: 'Data is too old'
+      }
+    }
+
+    // Parse user data if available
+    let user = null
+    const userParam = urlParams.get('user')
+    if (userParam) {
+      try {
+        user = JSON.parse(decodeURIComponent(userParam))
+      } catch (e) {
+        console.warn('Failed to parse user data:', e)
+      }
+    }
+
+    return {
+      valid: true,
+      user,
+      auth_date: parseInt(authDate, 10),
+      query_id: urlParams.get('query_id'),
+      start_param: urlParams.get('start_param')
+    }
+
+  } catch (error) {
+    console.error('API error:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Internal server error',
+      data: { valid: false }
+    })
+  }
+})

package/tailwind.config.ts

@@ -0,0 +1,39 @@
+import type { Config } from 'tailwindcss'
+import defaultTheme from 'tailwindcss/defaultTheme'
+
+export default {
+  content: [
+    "~/components/**/*.{js,vue,ts}",
+    "~/layouts/**/*.vue",
+    "~/pages/**/*.vue",
+    "~/plugins/**/*.{js,ts}",
+    "~/app.vue",
+    "~/error.vue",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Map Telegram theme variables to Tailwind colors
+        bg: 'var(--tg-theme-bg-color)',
+        secondaryBg: 'var(--tg-theme-secondary-bg-color)',
+        sectionBg: 'var(--tg-theme-section-bg-color)',
+        text: 'var(--tg-theme-text-color)',
+        hint: 'var(--tg-theme-hint-color)',
+        link: 'var(--tg-theme-link-color)',
+        primary: 'var(--tg-theme-button-color)',
+        primaryFg: 'var(--tg-theme-button-text-color)',
+        destructive: 'var(--tg-theme-destructive-text-color)',
+        accent: 'var(--tg-theme-accent-text-color)',
+        headerBg: 'var(--tg-theme-header-bg-color)',
+        sectionSeparator: 'var(--tg-theme-section-separator-color)',
+      },
+      borderColor: {
+        DEFAULT: 'var(--tg-theme-section-separator-color)'
+      },
+      fontFamily: {
+        sans: ['Roboto', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config

package/tests/components.spec.ts

@@ -0,0 +1,311 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
+
+// Mock Nuxt composables
+vi.mock('#app', () => ({
+  useRequestURL: () => ({
+    href: 'https://test.example.com'
+  })
+}))
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    back: vi.fn(),
+    replace: vi.fn(),
+    currentRoute: {
+      value: { path: '/' }
+    }
+  })
+}))
+
+// Mock Telegram composables
+vi.mock('~/composables/telegram', () => ({
+  useHapticFeedback: () => ({
+    supported: { value: true },
+    impactOccurred: vi.fn(),
+    notificationOccurred: vi.fn(),
+    selectionChanged: vi.fn()
+  }),
+  useMainButton: () => ({
+    mounted: { value: true },
+    visible: { value: false },
+    text: { value: '' },
+    mount: vi.fn(),
+    setParams: vi.fn(),
+    onClick: vi.fn(() => vi.fn())
+  }),
+  useBackButton: () => ({
+    mounted: { value: true },
+    visible: { value: false },
+    mount: vi.fn(),
+    show: vi.fn(),
+    hide: vi.fn(),
+    onClick: vi.fn(() => vi.fn())
+  }),
+  useInitData: () => ({
+    user: { value: { username: 'testuser', first_name: 'Test' } },
+    queryId: { value: 'test123' },
+    startParam: { value: null },
+    state: { value: {} },
+    raw: { value: 'test_data=123' }
+  }),
+  useThemeParams: () => ({
+    backgroundColor: { value: '#ffffff' },
+    textColor: { value: '#000000' },
+    buttonColor: { value: '#0088cc' },
+    buttonTextColor: { value: '#ffffff' },
+    linkColor: { value: '#0088cc' },
+    secondaryBackgroundColor: { value: '#f0f0f0' }
+  }),
+  useMiniApp: () => ({
+    supported: { value: true },
+    dark: { value: false },
+    setBackgroundColor: vi.fn(),
+    setHeaderColor: vi.fn()
+  }),
+  useViewport: () => ({
+    width: { value: 390 },
+    height: { value: 844 },
+    stableHeight: { value: 844 },
+    expand: vi.fn()
+  }),
+  openLink: vi.fn(),
+  openTelegramLink: vi.fn(),
+  shareURL: vi.fn()
+}))
+
+vi.mock('~/utils/color', () => ({
+  toHex: (color: string) => color.startsWith('#') ? color : '#000000'
+}))
+
+// Test components
+const TestTgButton = defineComponent({
+  name: 'TgButton',
+  props: {
+    title: String,
+    status: String,
+    haptic: String,
+    disabled: Boolean,
+    loading: Boolean
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    return () => h('button', {
+      onClick: () => emit('click'),
+      disabled: props.disabled || props.loading,
+      class: `tg-button tg-button--${props.status || 'primary'}`
+    }, props.title)
+  }
+})
+
+const TestTgCell = defineComponent({
+  name: 'TgCell',
+  props: {
+    title: String,
+    subtitle: String,
+    description: String,
+    icon: String,
+    to: String,
+    border: { type: Boolean, default: true }
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    return () => h('div', {
+      onClick: () => emit('click'),
+      class: 'tg-cell'
+    }, [
+      props.icon && h('div', { class: 'tg-cell__icon' }),
+      h('div', { class: 'tg-cell__content' }, [
+        h('div', { class: 'tg-cell__title' }, props.title),
+        props.subtitle && h('div', { class: 'tg-cell__subtitle' }, props.subtitle),
+        props.description && h('div', { class: 'tg-cell__description' }, props.description)
+      ])
+    ])
+  }
+})
+
+const TestTgSection = defineComponent({
+  name: 'TgSection',
+  props: {
+    title: String,
+    inset: Boolean
+  },
+  setup(props, { slots }) {
+    return () => h('section', {
+      class: ['tg-section', props.inset && 'tg-section--inset']
+    }, [
+      props.title && h('h2', { class: 'tg-section__title' }, props.title),
+      h('div', { class: 'tg-section__content' }, slots.default?.())
+    ])
+  }
+})
+
+const TestTgContent = defineComponent({
+  name: 'TgContent',
+  setup(_, { slots }) {
+    return () => h('main', { class: 'tg-content' }, slots.default?.())
+  }
+})
+
+const TestHero = defineComponent({
+  name: 'Hero',
+  props: {
+    title: String,
+    subtitle: String,
+    imageSrc: String
+  },
+  setup(props) {
+    return () => h('header', { class: 'hero' }, [
+      props.imageSrc && h('img', { src: props.imageSrc, alt: props.title }),
+      h('h1', { class: 'hero__title' }, props.title),
+      props.subtitle && h('p', { class: 'hero__subtitle' }, props.subtitle)
+    ])
+  }
+})
+
+describe('Telegram Components', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('TgButton', () => {
+    it('renders with title', () => {
+      const wrapper = mount(TestTgButton, {
+        props: { title: 'Test Button' }
+      })
+      expect(wrapper.text()).toBe('Test Button')
+    })
+
+    it('applies correct status class', () => {
+      const wrapper = mount(TestTgButton, {
+        props: { title: 'Test', status: 'secondary' }
+      })
+      expect(wrapper.classes()).toContain('tg-button--secondary')
+    })
+
+    it('handles disabled state', () => {
+      const wrapper = mount(TestTgButton, {
+        props: { title: 'Test', disabled: true }
+      })
+      expect(wrapper.attributes('disabled')).toBeDefined()
+    })
+
+    it('handles loading state', () => {
+      const wrapper = mount(TestTgButton, {
+        props: { title: 'Test', loading: true }
+      })
+      expect(wrapper.attributes('disabled')).toBeDefined()
+    })
+
+    it('emits click event', async () => {
+      const wrapper = mount(TestTgButton, {
+        props: { title: 'Test' }
+      })
+      await wrapper.trigger('click')
+      expect(wrapper.emitted('click')).toHaveLength(1)
+    })
+  })
+
+  describe('TgCell', () => {
+    it('renders title', () => {
+      const wrapper = mount(TestTgCell, {
+        props: { title: 'Test Cell' }
+      })
+      expect(wrapper.find('.tg-cell__title').text()).toBe('Test Cell')
+    })
+
+    it('renders subtitle when provided', () => {
+      const wrapper = mount(TestTgCell, {
+        props: { title: 'Test', subtitle: 'Test Subtitle' }
+      })
+      expect(wrapper.find('.tg-cell__subtitle').text()).toBe('Test Subtitle')
+    })
+
+    it('renders description when provided', () => {
+      const wrapper = mount(TestTgCell, {
+        props: { title: 'Test', description: 'Test Description' }
+      })
+      expect(wrapper.find('.tg-cell__description').text()).toBe('Test Description')
+    })
+
+    it('renders icon when provided', () => {
+      const wrapper = mount(TestTgCell, {
+        props: { title: 'Test', icon: 'i-heroicons-star-20-solid' }
+      })
+      expect(wrapper.find('.tg-cell__icon').exists()).toBe(true)
+    })
+
+    it('emits click event', async () => {
+      const wrapper = mount(TestTgCell, {
+        props: { title: 'Test' }
+      })
+      await wrapper.trigger('click')
+      expect(wrapper.emitted('click')).toHaveLength(1)
+    })
+  })
+
+  describe('TgSection', () => {
+    it('renders title', () => {
+      const wrapper = mount(TestTgSection, {
+        props: { title: 'Test Section' }
+      })
+      expect(wrapper.find('.tg-section__title').text()).toBe('Test Section')
+    })
+
+    it('applies inset class when inset prop is true', () => {
+      const wrapper = mount(TestTgSection, {
+        props: { title: 'Test', inset: true }
+      })
+      expect(wrapper.classes()).toContain('tg-section--inset')
+    })
+
+    it('renders slot content', () => {
+      const wrapper = mount(TestTgSection, {
+        props: { title: 'Test' },
+        slots: {
+          default: '<p>Slot content</p>'
+        }
+      })
+      expect(wrapper.html()).toContain('Slot content')
+    })
+  })
+
+  describe('TgContent', () => {
+    it('renders as main element', () => {
+      const wrapper = mount(TestTgContent, {
+        slots: {
+          default: '<p>Content</p>'
+        }
+      })
+      expect(wrapper.element.tagName).toBe('MAIN')
+      expect(wrapper.classes()).toContain('tg-content')
+    })
+  })
+
+  describe('Hero', () => {
+    it('renders title', () => {
+      const wrapper = mount(TestHero, {
+        props: { title: 'Test Title' }
+      })
+      expect(wrapper.find('.hero__title').text()).toBe('Test Title')
+    })
+
+    it('renders subtitle when provided', () => {
+      const wrapper = mount(TestHero, {
+        props: { title: 'Test', subtitle: 'Test Subtitle' }
+      })
+      expect(wrapper.find('.hero__subtitle').text()).toBe('Test Subtitle')
+    })
+
+    it('renders image when imageSrc provided', () => {
+      const wrapper = mount(TestHero, {
+        props: { title: 'Test', imageSrc: '/test.jpg' }
+      })
+      const img = wrapper.find('img')
+      expect(img.attributes('src')).toBe('/test.jpg')
+      expect(img.attributes('alt')).toBe('Test')
+    })
+  })
+})