feat: atrium as telegram mini app (#90)

* feat: atrium as telegram mini app

* chore: docker

Author: hmbanan666

.github/workflows/docker-nightly.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Set matrix
         id: set-matrix
         run: |
-          APPS=("web-app" "web-storefront" "web-parser")
+          APPS=("web-app" "web-storefront" "web-parser" "atrium-telegram")
           CHANGED=()
 
           if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then

.github/workflows/docker-release.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Set package in env
         id: set-package
         run: |
-          APPS=("web-app" "web-storefront" "web-parser")
+          APPS=("web-app" "web-storefront" "web-parser" "atrium-telegram")
           MATCH="${{ steps.regex-match.outputs.match }}"
 
           if [ -z "$MATCH" ]; then

.gitignore

@@ -16,6 +16,7 @@ build/
 .nitro/
 .data/
 .storage/
+.cert/
 
 ### Node ###
 node_modules/

apps/atrium-telegram/.env.example

@@ -0,0 +1,12 @@
+# Main database
+DATABASE_URL=
+
+# Telegram
+NUXT_TELEGRAM_ADMIN_ID=
+NUXT_TELEGRAM_ATRIUM_BOT_ID=
+NUXT_TELEGRAM_ATRIUM_BOT_TOKEN=
+NUXT_TELEGRAM_DEV_BOT_TOKEN=
+NUXT_TELEGRAM_TEAM_GROUP_ID=
+
+# App version
+VERSION=

apps/atrium-telegram/app/app.config.ts

@@ -0,0 +1,60 @@
+export default defineAppConfig({
+  ui: {
+    button: {
+      slots: {
+        base: 'font-semibold',
+      },
+      variants: {
+        size: {
+          xl: {
+            base: 'px-4 py-3 font-semibold',
+          },
+        },
+        variant: {
+          gradient: 'text-white bg-linear-to-br from-secondary-400 to-secondary-500 hover:opacity-90 disabled:from-neutral-300 disabled:to-neutral-400 aria-disabled:from-neutral-300 aria-disabled:to-neutral-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
+        },
+        color: {
+          secondary: '!text-white disabled:!bg-inverted/25',
+        },
+      },
+    },
+    tabs: {
+      variants: {
+        variant: {
+          pill: {
+            trigger: 'data-[state=active]:!text-white',
+          },
+          gradient: {
+            list: 'bg-elevated rounded-lg',
+            trigger: 'data-[state=active]:bg-linear-to-br from-lime-300 to-lime-500 data-[state=active]:text-neutral-950 flex-1 w-full',
+            indicator: 'rounded-md shadow-xs',
+          },
+        },
+      },
+    },
+    modal: {
+      slots: {
+        content: 'divide-y-0',
+        header: 'pb-0 min-h-12',
+        title: 'text-lg/5 font-semibold',
+      },
+    },
+    navigationMenu: {
+      slots: {
+        link: 'text-sm',
+      },
+    },
+    toast: {
+      slots: {
+        title: 'text-lg/6',
+        description: 'leading-4',
+        icon: 'shrink-0 size-7',
+      },
+    },
+    card: {
+      slots: {
+        body: 'p-4 sm:p-4',
+      },
+    },
+  },
+})

apps/atrium-telegram/app/app.vue

@@ -0,0 +1,61 @@
+<template>
+  <UApp
+    :locale="locales[locale]"
+    :tooltip="{ delayDuration: 0 }"
+    class="min-h-svh"
+  >
+    <NuxtLoadingIndicator :color="false" class="bg-primary h-[2px]" />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>
+
+<script setup lang="ts">
+import * as locales from '@nuxt/ui/locale'
+import { retrieveLaunchParams } from '@telegram-apps/sdk-vue'
+
+const { locale } = useI18n()
+
+const lang = computed(() => locales[locale.value].code)
+const dir = computed(() => locales[locale.value].dir)
+
+useHead({
+  htmlAttrs: {
+    lang,
+    dir,
+  },
+})
+
+// App
+const isDev = (retrieveLaunchParams().startParam === 'debug' || import.meta.env.DEV) ?? false
+await init({
+  debug: false,
+  eruda: isDev,
+  mockForMacOS: false,
+})
+
+// Init Stores
+const user = useUserStore()
+
+// Auto Update Online
+let interval: NodeJS.Timeout
+
+onMounted(async () => {
+  await Promise.all([
+    user.updateOnline(),
+    user.update(),
+  ])
+
+  interval = setInterval(async () => {
+    await Promise.all([
+      user.updateOnline(),
+      user.update(),
+    ])
+  }, 30000)
+})
+
+onUnmounted(() => {
+  clearInterval(interval)
+})
+</script>

apps/atrium-telegram/app/assets/css/styles.css

@@ -0,0 +1,3 @@
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-headers);
+}

apps/atrium-telegram/app/composables/useTelegram.ts

@@ -0,0 +1,13 @@
+import { initDataRaw as _initDataRaw, initDataState as _initDataState, useSignal } from '@telegram-apps/sdk-vue'
+
+function _useTelegram() {
+  const initDataRaw = useSignal(_initDataRaw)
+  const initDataState = useSignal(_initDataState)
+
+  return {
+    initDataRaw,
+    initDataState,
+  }
+}
+
+export const useTelegram = createSharedComposable(_useTelegram)

apps/atrium-telegram/app/error.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex flex-col max-w-sm mx-auto mt-32 text-center items-center">
+    <h1 class="text-4xl font-bold mb-4">
+      {{ $t('error.title') }} {{ error?.statusCode }}
+    </h1>
+    <p>{{ error?.statusMessage }}</p>
+
+    <UButton
+      variant="solid"
+      size="xl"
+      class="mt-12 w-full justify-center"
+      @click="handleError"
+    >
+      {{ $t('common.to-home') }}
+    </UButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { error } = defineProps<{ error: {
+  statusCode: number
+  statusMessage?: string
+} }>()
+
+function handleError() {
+  clearError({ redirect: '/' })
+}
+</script>

apps/atrium-telegram/app/layouts/default.vue

@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>