├── public
    ├── robots.txt
    ├── favicon.ico
    └── noise.png
├── .github
    ├── funding.yml
    ├── ISSUE_TEMPLATE
    │   ├── question.yml
    │   ├── feature-request.yml
    │   └── bug-report.yml
    ├── workflows
    │   ├── build.yml
    │   ├── nuxthub.yml
    │   ├── semantic-pull-request.yml
    │   └── label-pr.yml
    ├── release.yml
    └── pull_request_template.md
├── server
    ├── tsconfig.json
    ├── api
    │   └── stream.get.ts
    └── routes
    │   └── chat.ts
├── app
    ├── app.vue
    ├── utils
    │   ├── tags.ts
    │   └── socials.ts
    ├── app.config.ts
    ├── components
    │   ├── Player.vue
    │   ├── Tags.vue
    │   ├── NbViewer.vue
    │   ├── Chat.vue
    │   ├── ChatOverlay.vue
    │   ├── ChatMessage.vue
    │   └── OverlayPage.vue
    ├── pages
    │   ├── end.vue
    │   ├── pause.vue
    │   ├── start.vue
    │   └── index.vue
    ├── types
    │   ├── chat.ts
    │   └── stream.ts
    ├── assets
    │   ├── icons
    │   │   └── shelve.svg
    │   └── style
    │   │   └── main.css
    ├── composables
    │   ├── useTwitchBadges.ts
    │   ├── useTwitchChat.ts
    │   ├── useTwitchEmotes.ts
    │   └── useStream.ts
    └── layouts
    │   ├── default.vue
    │   └── overlay.vue
├── .npmrc
├── eslint.config.mjs
├── tsconfig.json
├── renovate.json
├── shelve.json
├── types
    └── irc-message.d.ts
├── .gitignore
├── nuxt.config.ts
├── package.json
├── README.md
└── LICENSE


/public/robots.txt:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/.github/funding.yml:
--------------------------------------------------------------------------------
1 | github: [HugoRCD]
2 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <UApp>
3 |     <NuxtPage />
4 |   </UApp>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HugoRCD/twitch-assets/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/noise.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HugoRCD/twitch-assets/HEAD/public/noise.png


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | auto-install-peers=true
3 | ignore-workspace-root-check=true
4 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import { createConfig } from "@hrcd/eslint-config"
2 | 
3 | export default createConfig()
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/app/utils/tags.ts:
--------------------------------------------------------------------------------
1 | export const tags = [
2 |   'Nuxt',
3 |   'Vue',
4 |   'Tailwind',
5 |   'TypeScript',
6 |   'Raycast'
7 | ]
8 | 


--------------------------------------------------------------------------------
/app/app.config.ts:
--------------------------------------------------------------------------------
1 | export default defineAppConfig({
2 |   ui: {
3 |     colors: {
4 |       neutral: 'neutral'
5 |     }
6 |   }
7 | })
8 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 |   "extends": [
4 |     "local>HugoRCD/renovate-config"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/shelve.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://raw.githubusercontent.com/HugoRCD/shelve/main/packages/types/schema.json",
3 |   "project": "twitch",
4 |   "defaultEnv": "development",
5 |   "slug": "hugo"
6 | }
7 | 


--------------------------------------------------------------------------------
/app/components/Player.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps<{
 3 |   test: string
 4 | }>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div>
 9 |     Hello {{ test }}
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/types/irc-message.d.ts:
--------------------------------------------------------------------------------
 1 | declare module 'irc-message' {
 2 |   interface TwitchIRCMessage {
 3 |     command: string
 4 |     params: string[]
 5 |     prefix?: string
 6 |     tags?: Record<string, string>
 7 |   }
 8 | 
 9 |   export function parse(message: string): TwitchIRCMessage | null
10 | } 
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/app/pages/end.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { stream } = useStream()
 3 | 
 4 | const subtitle = 'À la prochaine !'
 5 | const title = 'Le stream est fini <span class="font-serif italic">merci pour votre participation</span><span class="text-primary">.</span>'
 6 | </script>
 7 | 
 8 | <template>
 9 |   <OverlayPage
10 |     :subtitle
11 |     :title
12 |   />
13 | </template>
14 | 


--------------------------------------------------------------------------------
/app/utils/socials.ts:
--------------------------------------------------------------------------------
 1 | export const socials = [
 2 |   {
 3 |     name: 'hugorcd',
 4 |     icon: 'i-simple-icons-github',
 5 |   },
 6 |   {
 7 |     name: 'hugorcd__',
 8 |     icon: 'i-simple-icons-x',
 9 |   },
10 |   {
11 |     name: '@hrcd.fr',
12 |     icon: 'i-simple-icons-bluesky',
13 |   },
14 |   {
15 |     name: 'hugo.rcd_',
16 |     icon: 'i-simple-icons-instagram',
17 |   }
18 | ]
19 | 


--------------------------------------------------------------------------------
/app/pages/pause.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { stream } = useStream()
 3 | 
 4 | const subtitle = computed(() => {
 5 |   return stream.value?.stream?.title || 'Stream en cours...'
 6 | })
 7 | 
 8 | const title = 'Le stream est en <span class="font-serif italic">pause</span><span class="text-primary">.</span>'
 9 | </script>
10 | 
11 | <template>
12 |   <OverlayPage
13 |     :subtitle
14 |     :title
15 |   />
16 | </template> 
17 | 


--------------------------------------------------------------------------------
/app/pages/start.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { stream } = useStream()
 3 | 
 4 | const subtitle = computed(() => {
 5 |   return stream.value?.stream?.title || 'Initialisation du stream...'
 6 | })
 7 | 
 8 | const title = 'Le stream va démarrer dans <span class="font-serif italic">quelques secondes</span><span class="text-primary">.</span>'
 9 | </script>
10 | 
11 | <template>
12 |   <OverlayPage
13 |     :subtitle
14 |     :title
15 |   />
16 | </template>
17 | 


--------------------------------------------------------------------------------
/app/types/chat.ts:
--------------------------------------------------------------------------------
 1 | export interface ChatMessage {
 2 |   username: string
 3 |   message: string
 4 |   timestamp: string
 5 |   badges: Record<string, string>
 6 |   emotes?: Record<string, string[]>
 7 |   color?: string
 8 |   rawEmotes?: string
 9 | }
10 | 
11 | export interface BadgeSets {
12 |   [badge: string]: {
13 |     versions: {
14 |       [version: string]: {
15 |         image_url_1x: string
16 |         image_url_2x: string
17 |         image_url_4x: string
18 |       }
19 |     }
20 |   }
21 | } 
22 | 


--------------------------------------------------------------------------------
/app/components/Tags.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-wrap gap-2 mt-4">
 3 |     <Motion
 4 |       v-for="(tag, index) in tags"
 5 |       :key="tag"
 6 |       class="text-muted border border-default px-2 py-0.5"
 7 |       :initial="{ opacity: 0, y: 10 }"
 8 |       :animate="{ opacity: 1, y: 0 }"
 9 |       :transition="{ 
10 |         duration: 2,
11 |         type: 'spring',
12 |         repeat: Infinity,
13 |         repeatType: 'loop',
14 |         repeatDelay: 4,
15 |         bounce: 0,
16 |         delay: index * 0.05
17 |       }"
18 |     >
19 |       {{ tag }}
20 |     </Motion>
21 |   </div>
22 | </template>
23 | 


--------------------------------------------------------------------------------
/app/components/NbViewer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { AnimateNumber } from 'motion-plus-vue'
 3 | 
 4 | const { nbViewers = 0 } = defineProps<{
 5 |   nbViewers: number
 6 | }>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <UBadge color="error" variant="soft" size="lg">
11 |     <span class="relative flex size-2 mr-1">
12 |       <span class="absolute inline-flex size-full rounded-full opacity-75 bg-error animate-ping" />
13 |       <span class="relative inline-flex size-2 scale-90 rounded-full bg-error" />
14 |     </span>
15 |     <AnimateNumber :value="nbViewers" />
16 |     <span>
17 |       viewers
18 |     </span>
19 |   </UBadge>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/app/components/Chat.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { stream, isLive } = useStream()
 3 | const { messages, isConnected } = useTwitchChat()
 4 | const channelId = computed(() => stream.value?.user?.id || '')
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div class="chat-container h-full">
 9 |     <!-- <template v-if="!isConnected">
10 |       <span class="text-red-500">
11 |         Disconnected from chat
12 |       </span>
13 |     </template> -->
14 |     <template>
15 |       <ChatOverlay
16 |         :messages
17 |         :channel-id
18 |         :max-messages="30"
19 |         class="rounded-lg w-full max-w-lg"
20 |       />
21 |     </template>
22 |   </div>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/question.yml:
--------------------------------------------------------------------------------
 1 | name: "💬 Question"
 2 | description: Ask a question about the project.
 3 | labels: ["question"]
 4 | body:
 5 |   - type: markdown
 6 |     attributes:
 7 |       value: |
 8 |         Before requesting a question, please make sure that you have read through our [documentation](https://hrcd.fr) and existing [issues](https://github.com/HugoRCD/hr-folio/issues) to see if the feature has already been requested or implemented. If it has, please add your reaction to the existing issue instead of creating a new one.
 9 |   - type: textarea
10 |     id: description
11 |     attributes:
12 |       label: Description
13 |     validations:
14 |       required: true
15 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Check if packages can be built
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     branches:
 6 |       - '**'
 7 | 
 8 | permissions:
 9 |   contents: read
10 | 
11 | jobs:
12 |   build:
13 |     runs-on: ubuntu-latest
14 |     steps:
15 |       - uses: actions/checkout@v4
16 |       - uses: actions/setup-node@v4
17 |         with:
18 |           node-version: '22.15.1'
19 | 
20 |       - name: Install pnpm
21 |         uses: pnpm/action-setup@v2
22 |         with:
23 |           version: latest
24 |           run_install: false
25 | 
26 |       - name: 📦 Install dependencies
27 |         run: pnpm install
28 | 
29 |       - name: 🛠️ Build
30 |         run: pnpm run build
31 | 


--------------------------------------------------------------------------------
/app/assets/icons/shelve.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 717 488"><path d="M700.867 0L577.808 142.717C563.922 158.728 542.573 168.197 519.836 168.197H388.098C379.94 168.197 373.518 162.343 373.518 155.113V110.696C373.518 98.3011 355.814 92.9643 347.309 102.777L182.593 293.698C168.708 309.709 147.359 319.177 124.622 319.177H0L253.583 25.4791C267.468 9.46859 288.817 0 311.554 0H700.867Z"/><path d="M15.4475 487.374L138.507 344.657C152.393 328.646 173.742 319.177 196.479 319.177H328.217C336.375 319.177 342.797 325.031 342.797 332.261V376.678C342.797 389.073 360.501 394.41 369.005 384.597L533.721 193.676C547.607 177.665 568.956 168.197 591.693 168.197H716.141L462.559 461.895C448.673 477.905 427.324 487.374 404.587 487.374H15.4475Z"/></svg>


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   compatibilityDate: '2024-11-01',
 4 |   
 5 |   devtools: { enabled: true },
 6 |   
 7 |   future: {
 8 |     compatibilityVersion: 4
 9 |   },
10 | 
11 |   hub: {
12 |     workers: true
13 |   },
14 | 
15 |   nitro: {
16 |     experimental: {
17 |       websocket: true
18 |     }
19 |   },
20 | 
21 |   css: ['~/assets/style/main.css'],
22 | 
23 |   runtimeConfig: {
24 |     twitch: {
25 |       clientId: '',
26 |       clientSecret: '',
27 |       oauthToken: ''
28 |     }
29 |   },
30 | 
31 |   modules: [
32 |     '@nuxt/ui',
33 |     '@nuxt/image',
34 |     '@vueuse/nuxt',
35 |     '@nuxthub/core',
36 |     'motion-v/nuxt',
37 |     '@nuxtjs/mdc',
38 |   ],
39 | })


--------------------------------------------------------------------------------
/app/types/stream.ts:
--------------------------------------------------------------------------------
 1 | export interface TwitchUser {
 2 |   id: string
 3 |   login: string
 4 |   display_name: string
 5 |   type: string
 6 |   broadcaster_type: string
 7 |   description: string
 8 |   profile_image_url: string
 9 |   offline_image_url: string
10 |   view_count: number
11 |   created_at: string
12 | }
13 | 
14 | export interface TwitchStream {
15 |   id: string
16 |   user_id: string
17 |   user_login: string
18 |   user_name: string
19 |   game_id: string
20 |   game_name: string
21 |   type: string
22 |   title: string
23 |   viewer_count: number
24 |   started_at: string
25 |   language: string
26 |   thumbnail_url: string
27 |   tag_ids?: string[]
28 |   is_mature: boolean
29 | }
30 | 
31 | export interface StreamData {
32 |   user: TwitchUser
33 |   stream: TwitchStream | null
34 | } 
35 | 


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | definePageMeta({
 3 |   layout: 'overlay',
 4 | })
 5 | 
 6 | const { stream, isLive } = useStream()
 7 | const { messages, isConnected } = useTwitchChat()
 8 | const channelId = computed(() => stream.value?.user?.id || '')
 9 | </script>
10 | 
11 | <template>
12 |   <NuxtLayout>
13 |     <div class="flex flex-col gap-4 p-4">
14 |       <div class="hidden chat-container">
15 |         <div v-if="!isConnected" class="text-red-500">
16 |           Disconnected from chat
17 |         </div>
18 |         <div v-else class="messages">
19 |           <ChatOverlay
20 |             :messages
21 |             :channel-id
22 |             :max-messages="30"
23 |             class="rounded-lg w-full max-w-lg"
24 |           />
25 |         </div>
26 |       </div>
27 |     </div>
28 |   </NuxtLayout>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/app/components/ChatOverlay.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { ChatMessage } from '~/types/chat'
 3 | 
 4 | const props = defineProps<{
 5 |   messages: ChatMessage[]
 6 |   channelId: string
 7 |   maxMessages?: number
 8 |   class?: string
 9 | }>()
10 | 
11 | const displayedMessages = computed(() =>
12 |   props.maxMessages ? props.messages.slice(-props.maxMessages) : props.messages
13 | )
14 | </script>
15 | 
16 | <template>
17 |   <div class="border-l-2 border-t-2 border-b-2 border-default p-2">
18 |     <div class="flex-1" :class="displayedMessages.length > 0 ? 'mask-t-from-50%' : ''">
19 |       <ChatMessage
20 |         v-for="message in displayedMessages"
21 |         :key="message.timestamp + message.username + message.message"
22 |         :message
23 |         :channel-id
24 |       />
25 |     </div>
26 |   </div>
27 | </template> 
28 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature-request.yml:
--------------------------------------------------------------------------------
 1 | name: "🚀 Feature request"
 2 | description: Suggest an idea or enhancement for the project.
 3 | labels: ["enhancement"]
 4 | body:
 5 |   - type: markdown
 6 |     attributes:
 7 |       value: |
 8 |         Before requesting a feature, please make sure that you have read through our [documentation](https://hrcd.fr) and existing [issues](https://github.com/HugoRCD/hr-folio/issues) to see if the feature has already been requested or implemented. If it has, please add your reaction to the existing issue instead of creating a new one.
 9 |   - type: textarea
10 |     id: description
11 |     attributes:
12 |       label: Description
13 |       description: A clear and concise description of what you think would be an helpful addition to the project, including the possible use cases and alternatives you have considered.
14 |     validations:
15 |       required: true
16 |   - type: textarea
17 |     id: additional
18 |     attributes:
19 |       label: Additional context
20 |       description: If applicable, add any other context or screenshots here.
21 | 


--------------------------------------------------------------------------------
/.github/workflows/nuxthub.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy to NuxtHub
 2 | on: push
 3 | 
 4 | jobs:
 5 |   deploy:
 6 |     name: "Deploy to NuxtHub"
 7 |     runs-on: ubuntu-latest
 8 |     environment:
 9 |       name: ${{ github.ref == 'refs/heads/main' && 'production' || 'preview' }}
10 |       url: ${{ steps.deploy.outputs.deployment-url }}
11 |     permissions:
12 |       contents: read
13 |       id-token: write
14 | 
15 |     steps:
16 |       - uses: actions/checkout@v4
17 | 
18 |       - name: Install pnpm
19 |         uses: pnpm/action-setup@v4
20 | 
21 |       - name: Install Node.js
22 |         uses: actions/setup-node@v4
23 |         with:
24 |           node-version: 22
25 |           cache: 'pnpm'
26 | 
27 |       - name: Install dependencies
28 |         run: pnpm install
29 | 
30 |       - name: Ensure NuxtHub module is installed
31 |         run: pnpx nuxthub@latest ensure
32 | 
33 |       - name: Build application
34 |         run: pnpm build
35 | 
36 |       - name: Deploy to NuxtHub
37 |         uses: nuxt-hub/action@v1
38 |         id: deploy
39 |         with:
40 |           project-key: twitch-f5y4
41 | 


--------------------------------------------------------------------------------
/app/assets/style/main.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | @import "@nuxt/ui";
 3 | 
 4 | @theme static {
 5 |   --font-serif: "Instrument Serif", serif;
 6 |   --font-sans: "Geist", sans-serif;
 7 |   --font-mono: "Geist Mono", sans-serif;
 8 | }
 9 | 
10 | :root {
11 |   --ui-primary: rgb(40, 83, 255) !important;
12 |   --ui-bg: rgb(248, 243, 238);
13 | }
14 | 
15 | .dark {
16 |   --ui-primary: rgb(8, 73, 236) !important;
17 |   --ui-bg: rgb(2, 2, 2);
18 | }
19 | 
20 | html, body, #__nuxt, #__layout {
21 |   width: 100%;
22 |   height: 100%;
23 | }
24 | 
25 | /* Main Noise effect */
26 | .noise {
27 |     animation: noise 2s steps(10) infinite;
28 | }
29 | 
30 | @keyframes noise {
31 |     0%, 20%, 40%, 60%, 80%, 100% {
32 |         transform: translate(0, 0);
33 |     }
34 |     10% {
35 |         transform: translate(-5%, -10%);
36 |     }
37 |     30% {
38 |         transform: translate(5%, 10%);
39 |     }
40 |     50% {
41 |         transform: translate(-15%, 5%);
42 |     }
43 |     70% {
44 |         transform: translate(10%, -5%);
45 |     }
46 |     90% {
47 |         transform: translate(5%, -10%);
48 |     }
49 | }


--------------------------------------------------------------------------------
/.github/release.yml:
--------------------------------------------------------------------------------
 1 | changelog:
 2 |   exclude:
 3 |     labels:
 4 |       - ignore-for-release
 5 |     authors:
 6 |       - octocat
 7 |   categories:
 8 |     - title: Breaking Changes 💥
 9 |       labels:
10 |         - breaking
11 |     - title: Features 🚀
12 |       labels:
13 |         - feature
14 |     - title: Enhancements 🌈
15 |       labels:
16 |         - enhancement
17 |     - title: Bug Fixes 🐞
18 |       labels:
19 |         - bug
20 |     - title: Build System 🛠
21 |       labels:
22 |         - build
23 |     - title: Continuous Integration 🔄
24 |       labels:
25 |         - ci
26 |     - title: Documentation 📚
27 |       labels:
28 |         - documentation
29 |     - title: Tests 🧪
30 |       labels:
31 |         - test
32 |     - title: Refactoring 🛠
33 |       labels:
34 |         - refactor
35 |     - title: Dependency Updates 📦
36 |       labels:
37 |         - dependencies
38 |     - title: Performance Improvements ⚡️
39 |       labels:
40 |         - performance
41 |     - title: Style 💅
42 |       labels:
43 |         - style
44 |     - title: Revert 🔄
45 |       labels:
46 |         - revert
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare",
11 |     "lint": "eslint .",
12 |     "lint:fix": "eslint --fix .",
13 |     "deploy": "nuxthub deploy"
14 |   },
15 |   "dependencies": {
16 |     "@iconify-json/heroicons": "^1.2.2",
17 |     "@iconify-json/lucide": "^1.2.44",
18 |     "@iconify-json/simple-icons": "^1.2.34",
19 |     "@iconify-json/vscode-icons": "^1.2.21",
20 |     "@nuxt/image": "^1.10.0",
21 |     "@nuxt/ui": "^3.1.2",
22 |     "@nuxthub/core": "0.8.27",
23 |     "@nuxtjs/mdc": "0.17.0",
24 |     "@shelve/cli": "^4.1.6",
25 |     "@vueuse/nuxt": "13.2.0",
26 |     "irc-message": "^3.0.2",
27 |     "motion-plus": "^0.1.9",
28 |     "motion-plus-vue": "^1.1.5",
29 |     "motion-v": "1.0.2",
30 |     "nuxt": "^3.17.3",
31 |     "vue": "latest",
32 |     "ws": "^8.18.2"
33 |   },
34 |   "devDependencies": {
35 |     "@hrcd/eslint-config": "^3.0.3",
36 |     "@types/ws": "^8.18.1"
37 |   },
38 |   "packageManager": "pnpm@8.6.5+sha1.a074a371066567dcdeb19a1d1bd9a78cf3c9faa3"
39 | }
40 | 


--------------------------------------------------------------------------------
/app/composables/useTwitchBadges.ts:
--------------------------------------------------------------------------------
 1 | import { useFetch } from '#app'
 2 | import type { BadgeSets } from '~/types/chat'
 3 | 
 4 | export const useTwitchBadges = (channelId: string) => {
 5 |   const globalBadges = ref<BadgeSets>({})
 6 |   const channelBadges = ref<BadgeSets>({})
 7 | 
 8 |   useFetch('https://badges.twitch.tv/v1/badges/global/display', {
 9 |     onResponse({ response }) {
10 |       globalBadges.value = response._data?.badge_sets || {}
11 |     }
12 |   })
13 | 
14 |   useFetch(`https://badges.twitch.tv/v1/badges/channels/${channelId}/display`, {
15 |     onResponse({ response }) {
16 |       channelBadges.value = response._data?.badge_sets || {}
17 |     }
18 |   })
19 | 
20 |   function getBadgeUrl(badge: string, version: string): string | undefined {
21 |     const channel = channelBadges.value[badge]?.versions[version]?.image_url_1x
22 |     const globalBadge = globalBadges.value[badge]?.versions[version]?.image_url_1x
23 |     if (channel) return channel
24 |     if (globalBadge) return globalBadge
25 |     if (badge === 'broadcaster' && version === '1') {
26 |       return 'https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/1'
27 |     }
28 |   }
29 | 
30 |   return { getBadgeUrl }
31 | } 
32 | 


--------------------------------------------------------------------------------
/app/composables/useTwitchChat.ts:
--------------------------------------------------------------------------------
 1 | import type { ChatMessage } from '~/types/chat'
 2 | 
 3 | export const useTwitchChat = () => {
 4 |   const toast = useToast()
 5 |   const messages = useState<ChatMessage[]>('twitch-chat-messages', () => [])
 6 |   const isConnected = computed(() => status.value === 'OPEN')
 7 | 
 8 |   const { status, send, open, close } = useWebSocket<ChatMessage>('/chat', {
 9 |     autoReconnect: {
10 |       retries: 3,
11 |       delay: 5000,
12 |       onFailed: () => {
13 |         console.error('Failed to connect to Twitch chat after 3 retries')
14 |       }
15 |     },
16 |     onMessage: (ws, event) => {
17 |       const message = JSON.parse(event.data) as ChatMessage
18 |       console.log(message)
19 |       if (message.message.includes('fesse')) {
20 |         toast.add({
21 |           title: `Fesse de ${message.username}`,
22 |           description: 'Fesse',
23 |         })
24 |       }
25 |       messages.value = [...messages.value, message].slice(-100)
26 |     }
27 |   })
28 | 
29 |   onMounted(() => {
30 |     open()
31 |   })
32 | 
33 |   onUnmounted(() => {
34 |     close()
35 |   })
36 | 
37 |   return {
38 |     messages,
39 |     isConnected,
40 |     connect: open,
41 |     disconnect: close,
42 |     send
43 |   }
44 | } 
45 | 


--------------------------------------------------------------------------------
/app/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { stream } = useStream()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <UApp class="relative">
 7 |     <div class="pointer-events-none absolute -top-56 z-40 size-44 rounded-full opacity-50 blur-[200px] dark:bg-white dark:blur-[200px] sm:size-72" />
 8 |     <div class="pointer-events-none fixed inset-0 z-40 size-full overflow-hidden">
 9 |       <div class="noise pointer-events-none absolute inset-[-200%] z-50 size-[400%] bg-[url('/noise.png')] opacity-[4%]" />
10 |     </div>
11 |     <div class="flex h-screen flex-col p-12">
12 |       <div class="relative flex size-full mx-auto flex-1 flex-col gap-3 border-2 border-default">
13 |         <NbViewer :nb-viewers="stream?.stream?.viewer_count" class="absolute top-2 right-2" />
14 |         <slot />
15 |         <div class="flex items-center justify-center gap-2 absolute bottom-0 w-full">
16 |           <div v-for="social in socials" :key="social.name" class="flex items-center justify-center gap-2 p-4">
17 |             <UIcon :name="social.icon" class="size-6" />
18 |             <span class="text-lg">
19 |               {{ social.name }}
20 |             </span>
21 |           </div>
22 |         </div>
23 |       </div>
24 |     </div>
25 |   </UApp>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/app/components/ChatMessage.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { ChatMessage } from '~/types/chat'
 3 | 
 4 | const props = defineProps<{
 5 |   message: ChatMessage
 6 |   channelId: string
 7 | }>()
 8 | 
 9 | const { getBadgeUrl } = useTwitchBadges(props.channelId)
10 | const emoteParts = computed(() => parseTwitchEmotes(props.message.rawEmotes, props.message.message))
11 | </script>
12 | 
13 | <template>
14 |   <div class="flex items-start gap-2 py-0.5">
15 |     <span v-for="(version, badge) in message.badges" :key="badge" class="inline-block align-middle">
16 |       <img
17 |         v-if="getBadgeUrl(badge, version)"
18 |         :src="getBadgeUrl(badge, version)"
19 |         :alt="badge"
20 |         class="h-5 w-5 inline-block align-middle"
21 |         loading="lazy"
22 |       >
23 |     </span>
24 |     <span class="font-bold mr-1" :style="{ color: message.color }">{{ message.username }}</span>
25 |     <span class="break-words">
26 |       <template v-for="(part, i) in emoteParts" :key="i">
27 |         <img
28 |           v-if="part.emoteId"
29 |           :src="getTwitchEmoteUrl(part.emoteId)"
30 |           class="inline h-6 align-text-bottom"
31 |           :alt="part.text"
32 |         >
33 |         <span v-else>{{ part.text }}</span>
34 |       </template>
35 |     </span>
36 |   </div>
37 | </template> 
38 | 


--------------------------------------------------------------------------------
/app/composables/useTwitchEmotes.ts:
--------------------------------------------------------------------------------
 1 | interface EmotePosition {
 2 |   id: string
 3 |   start: number
 4 |   end: number
 5 | }
 6 | 
 7 | export function parseTwitchEmotes(emotesTag: string | undefined, message: string) {
 8 |   if (typeof emotesTag !== 'string' || emotesTag === '') return [{ text: message }]
 9 |   const emotes: { id: string; positions: [number, number][] }[] = []
10 |   const emoteParts = emotesTag.split('/')
11 |   for (const part of emoteParts) {
12 |     const [id, positions] = part.split(':')
13 |     if (!id || !positions) continue
14 |     emotes.push({
15 |       id,
16 |       positions: positions.split(',').map(pos => {
17 |         const [start, end] = pos.split('-').map(Number)
18 |         return [start, end] as [number, number]
19 |       })
20 |     })
21 |   }
22 |   const result: { text: string; emoteId?: string }[] = []
23 |   let lastIndex = 0
24 |   for (const emote of emotes) {
25 |     for (const [start, end] of emote.positions) {
26 |       if (lastIndex < start) {
27 |         result.push({ text: message.slice(lastIndex, start) })
28 |       }
29 |       result.push({ text: message.slice(start, end + 1), emoteId: emote.id })
30 |       lastIndex = end + 1
31 |     }
32 |   }
33 |   if (lastIndex < message.length) {
34 |     result.push({ text: message.slice(lastIndex) })
35 |   }
36 |   return result
37 | }
38 | 
39 | export function getTwitchEmoteUrl(emoteId: string, size: 1 | 2 | 3 = 1) {
40 |   return `https://static-cdn.jtvnw.net/emoticons/v2/${emoteId}/default/dark/${size}.0`
41 | } 
42 | 


--------------------------------------------------------------------------------
/app/composables/useStream.ts:
--------------------------------------------------------------------------------
 1 | import type { StreamData } from '~/types/stream'
 2 | 
 3 | export const useStream = () => {
 4 |   const stream = useState<StreamData | null>('stream-data', () => null)
 5 |   const isLive = computed(() => !!stream.value?.stream)
 6 | 
 7 |   const POLLING_INTERVALS = {
 8 |     LIVE: 10000,
 9 |     OFFLINE: 30000,
10 |   }
11 | 
12 |   let pollingInterval: NodeJS.Timeout | null = null
13 | 
14 |   const fetchStreamData = async () => {
15 |     try {
16 |       const response = await $fetch<StreamData>('/api/stream')
17 |       if (response) {
18 |         stream.value = response
19 |       }
20 |     } catch (error) {
21 |       console.error('Error fetching stream data:', error)
22 |     }
23 |   }
24 | 
25 |   const startPolling = () => {
26 |     if (pollingInterval) return
27 | 
28 |     const poll = () => {
29 |       fetchStreamData()
30 |       const interval = isLive.value ? POLLING_INTERVALS.LIVE : POLLING_INTERVALS.OFFLINE
31 |       pollingInterval = setTimeout(poll, interval)
32 |     }
33 | 
34 |     poll()
35 |   }
36 | 
37 |   const stopPolling = () => {
38 |     if (pollingInterval) {
39 |       clearTimeout(pollingInterval)
40 |       pollingInterval = null
41 |     }
42 |   }
43 | 
44 |   watch(isLive, () => {
45 |     if (pollingInterval) {
46 |       stopPolling()
47 |       startPolling()
48 |     }
49 |   })
50 | 
51 |   onMounted(() => {
52 |     fetchStreamData()
53 |     startPolling()
54 |   })
55 | 
56 |   onUnmounted(() => {
57 |     stopPolling()
58 |   })
59 | 
60 |   return {
61 |     stream,
62 |     isLive,
63 |   }
64 | } 
65 | 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | <!---
 2 | ☝️ PR title should follow conventional commits (https://conventionalcommits.org)
 3 | Here are the available types:
 4 | 
 5 | - breaking (fix or feature that would cause existing functionality to change) 💥
 6 | - feat (a non-breaking change that adds functionality) ✨
 7 | - fix (a non-breaking change that fixes an issue) 🐞
 8 | - build (changes that affect the build system or external dependencies) 🏗
 9 | - ci (changes to our CI configuration files and scripts) 🚀
10 | - docs (updates to the documentation or readme) 📖
11 | - enhancement (improving an existing functionality) 🌈
12 | - chore (updates to the build process or auxiliary tools and libraries) 📦
13 | - perf (a code change that improves performance) ⚡️
14 | - style (changes that do not affect the meaning of the code) 💅
15 | - test (adding or updating tests) 🧪
16 | - refactor (a code change that neither fixes a bug nor adds a feature) 🛠
17 | - revert (reverts a previous commit) 🔄
18 | 
19 | -->
20 | 
21 | ### 🔗 Linked issue
22 | 
23 | <!-- If it resolves an open issue, please link the issue here. For example "Resolves #123" -->
24 | 
25 | ### 📚 Description
26 | 
27 | <!-- Describe your changes in detail -->
28 | <!-- Why is this change required? What problem does it solve? -->
29 | 
30 | ### 📝 Checklist
31 | 
32 | <!-- Put an `x` in all the boxes that apply. -->
33 | <!-- If your change requires a documentation PR, please link it appropriately -->
34 | <!-- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
35 | 
36 | - [ ] I have linked an issue or discussion.
37 | - [ ] I have updated the documentation accordingly.
38 | 


--------------------------------------------------------------------------------
/.github/workflows/semantic-pull-request.yml:
--------------------------------------------------------------------------------
 1 | name: validate pr title
 2 | 
 3 | on:
 4 |   pull_request_target:
 5 |     types:
 6 |       - opened
 7 |       - reopened
 8 |       - edited
 9 |       - synchronize
10 | 
11 | permissions:
12 |   pull-requests: write
13 | 
14 | jobs:
15 |   validate-pr:
16 |     name: Validate PR title
17 |     if: ${{ !contains(github.actor, 'renovate') }}
18 | 
19 |     runs-on: ubuntu-latest
20 |     steps:
21 |       - uses: amannn/action-semantic-pull-request@v5
22 |         id: lint_pr_title
23 |         with:
24 |           types: |
25 |             breaking
26 |             feat
27 |             fix
28 |             build
29 |             ci
30 |             docs
31 |             enhancement
32 |             chore
33 |             performance
34 |             style
35 |             test
36 |             refactor
37 |             revert
38 |         env:
39 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
40 | 
41 |       - uses: marocchino/sticky-pull-request-comment@v2
42 |         # When the previous steps fail, the workflow would stop. By adding this
43 |         # condition you can continue the execution with the populated error message.
44 |         if: always() && (steps.lint_pr_title.outputs.error_message != null)
45 |         with:
46 |           header: pr-title-lint-error
47 |           message: |
48 |             Hey there and thank you for opening this pull request! 👋🏼
49 | 
50 |             We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
51 | 
52 |             Details:
53 | 
54 |             ```
55 |             ${{ steps.lint_pr_title.outputs.error_message }}
56 |             ```
57 | 
58 |       # Delete a previous comment when the issue has been resolved
59 |       - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
60 |         uses: marocchino/sticky-pull-request-comment@v2
61 |         with:
62 |           header: pr-title-lint-error
63 |           message: |
64 |             Thank you for following the naming conventions! 🙏
65 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug-report.yml:
--------------------------------------------------------------------------------
 1 | name: "🐛 Bug report"
 2 | description: Report a bug to help us improve the project.
 3 | labels: ["bug"]
 4 | body:
 5 |   - type: markdown
 6 |     attributes:
 7 |       value: |
 8 |         Before reporting a bug, please make sure that you have read through our [documentation](https://hrcd.fr) and existing [issues](https://github.com/HugoRCD/hr-folio/issues) to see if the bug has already been reported or fixed. If it has, please add your reaction to the existing issue instead of creating a new one.
 9 |   - type: textarea
10 |     id: env
11 |     attributes:
12 |       label: Environment
13 |       description: |
14 |         Please complete the following information, for example:
15 |         - OS: Windows 10
16 |         - Browser: Chrome 88
17 |         - Node.js version: 14.15.4
18 |         - Package manager: npm 6.14.10
19 |     validations:
20 |       required: true
21 |   - type: input
22 |     id: version
23 |     attributes:
24 |       label: Version
25 |       placeholder: v2.8.0
26 |     validations:
27 |       required: true
28 |   - type: textarea
29 |     id: reproduction
30 |     attributes:
31 |       label: Reproduction
32 |       description: A reproduction is strongly encouraged, to help us identify the issue and fix it. You can use a code sandbox or a repository to reproduce the issue.
33 |       placeholder: https://stackblitz.com/edit/blanked
34 |     validations:
35 |       required: true
36 |   - type: textarea
37 |     id: description
38 |     attributes:
39 |       label: Description
40 |       description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description.
41 |     validations:
42 |       required: true
43 |   - type: textarea
44 |     id: additonal
45 |     attributes:
46 |       label: Additional context
47 |       description: If applicable, add any other context or screenshots here.
48 |   - type: textarea
49 |     id: logs
50 |     attributes:
51 |       label: Logs
52 |       description: |
53 |         Optional if provided reproduction. Please try not to insert an image but copy paste the log text.
54 |       render: shell-script
55 | 


--------------------------------------------------------------------------------
/.github/workflows/label-pr.yml:
--------------------------------------------------------------------------------
 1 | name: Label PR
 2 | 
 3 | on:
 4 |   pull_request_target:
 5 |     types:
 6 |       - opened
 7 |     branches:
 8 |       - main
 9 | 
10 | jobs:
11 |   add-pr-labels:
12 |     name: Add PR labels
13 |     runs-on: ubuntu-latest
14 |     permissions:
15 |       pull-requests: write
16 |     steps:
17 |       - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
18 |         env:
19 |           PULL_REQUEST_TITLE: ${{ github.event.pull_request.title }}
20 |         with:
21 |           script: |
22 |             const labelsToAdd = []
23 | 
24 |             const pullRequest = {
25 |               number: ${{ github.event.pull_request.number }},
26 |               title: process.env.PULL_REQUEST_TITLE,
27 |               labelsNames: ${{ toJson(github.event.pull_request.labels.*.name) }}
28 |             }
29 | 
30 |             // Select label based on the type in PR title
31 |             const pullRequestTypeToLabelName = {
32 |               breaking: 'breaking',
33 |               feat: 'feature',
34 |               fix: 'bug',
35 |               build: 'build',
36 |               ci: 'ci',
37 |               docs: 'documentation',
38 |               enhancement: 'enhancement',
39 |               chore: 'dependencies',
40 |               perf: 'performance',
41 |               style: 'style',
42 |               test: 'test',
43 |               refactor: 'refactor',
44 |               revert: 'revert'
45 |             }
46 | 
47 |             for (const [pullRequestType, labelName] of Object.entries(
48 |               pullRequestTypeToLabelName
49 |             )) {
50 |               if (
51 |                 pullRequest.title.startsWith(pullRequestType) &&
52 |                 !pullRequest.labelsNames.includes(
53 |                   pullRequestTypeToLabelName[pullRequestType]
54 |                 )
55 |               ) {
56 |                 labelsToAdd.push(labelName)
57 | 
58 |                 break
59 |               }
60 |             }
61 | 
62 |             // Add selected labels
63 |             if (labelsToAdd.length > 0) {
64 |               github.rest.issues.addLabels({
65 |                 issue_number: pullRequest.number,
66 |                 owner: context.repo.owner,
67 |                 repo: context.repo.repo,
68 |                 labels: labelsToAdd
69 |               })
70 |             }
71 | 


--------------------------------------------------------------------------------
/server/api/stream.get.ts:
--------------------------------------------------------------------------------
  1 | import { H3Event } from 'h3'
  2 | import { z } from 'zod'
  3 | 
  4 | const USERS_SCHEMA = z.object({
  5 |   data: z.array(z.object({
  6 |     id: z.string(),
  7 |     login: z.string(),
  8 |     display_name: z.string(),
  9 |     type: z.string(),
 10 |     broadcaster_type: z.string(),
 11 |     description: z.string(),
 12 |     profile_image_url: z.string(),
 13 |     offline_image_url: z.string(),
 14 |     view_count: z.number(),
 15 |     created_at: z.string(),
 16 |   })),
 17 | })
 18 | 
 19 | const STREAMS_SCHEMA = z.object({
 20 |   data: z.array(z.object({
 21 |     id: z.string(),
 22 |     user_id: z.string(),
 23 |     user_login: z.string(),
 24 |     user_name: z.string(),
 25 |     game_id: z.string(),
 26 |     game_name: z.string(),
 27 |     type: z.string(),
 28 |     title: z.string(),
 29 |     viewer_count: z.number(),
 30 |     started_at: z.string(),
 31 |     language: z.string(),
 32 |     thumbnail_url: z.string(),
 33 |     tag_ids: z.array(z.string()).optional(),
 34 |     is_mature: z.boolean(),
 35 |   })),
 36 |   pagination: z.object({
 37 |     cursor: z.string().optional(),
 38 |   }).optional(),
 39 | })
 40 | 
 41 | type GetAccessTokenParams = {
 42 |   clientId: string;
 43 |   clientSecret: string;
 44 | };
 45 | 
 46 | async function getAccessToken({
 47 |   clientId,
 48 |   clientSecret,
 49 | }: GetAccessTokenParams): Promise<string> {
 50 |   const body = new FormData()
 51 |   body.append('client_id', clientId)
 52 |   body.append('client_secret', clientSecret)
 53 |   body.append('grant_type', 'client_credentials')
 54 | 
 55 |   try {
 56 |     const result = await $fetch<any>('https://id.twitch.tv/oauth2/token', {
 57 |       method: 'POST',
 58 |       body,
 59 |     })
 60 |     return result.access_token as string
 61 |   } catch (e) {
 62 |     console.log(e)
 63 |     throw createError({
 64 |       status: 500,
 65 |       message: 'Error getting access token',
 66 |     })
 67 |   }
 68 | }
 69 | 
 70 | async function fetchTwitchUserAndStream(event: H3Event) {
 71 |   const { clientId, clientSecret } = useRuntimeConfig(event).twitch
 72 |   const accessToken = await getAccessToken({ clientId, clientSecret })
 73 |   const login = 'hugo_rcd'
 74 | 
 75 |   // Fetch user info
 76 |   const userRaw = await $fetch('https://api.twitch.tv/helix/users', {
 77 |     query: { login },
 78 |     headers: {
 79 |       Authorization: `Bearer ${accessToken}`,
 80 |       'Client-Id': clientId,
 81 |     },
 82 |   })
 83 |   const userParsed = USERS_SCHEMA.parse(userRaw)
 84 |   const user = userParsed.data[0] ?? null
 85 | 
 86 |   // Fetch stream info
 87 |   const streamRaw = await $fetch('https://api.twitch.tv/helix/streams', {
 88 |     query: { user_login: login, first: 1 },
 89 |     headers: {
 90 |       Authorization: `Bearer ${accessToken}`,
 91 |       'Client-Id': clientId,
 92 |     },
 93 |   })
 94 |   const streamParsed = STREAMS_SCHEMA.parse(streamRaw)
 95 |   const stream = streamParsed.data[0] ?? null
 96 | 
 97 |   return { user, stream }
 98 | }
 99 | 
100 | export default defineEventHandler(async (event) => {
101 |   return await fetchTwitchUserAndStream(event)
102 | }) 
103 | 


--------------------------------------------------------------------------------
/server/routes/chat.ts:
--------------------------------------------------------------------------------
 1 | import { Socket, createConnection } from 'net'
 2 | import { parse } from 'irc-message'
 3 | import { useRuntimeConfig } from '#imports'
 4 | import type { ChatMessage } from '~/types/chat'
 5 | 
 6 | function parseBadges(badgesStr: string | undefined): Record<string, string> {
 7 |   console.log('badgesStr', badgesStr)
 8 |   if (!badgesStr && typeof badgesStr !== 'string' && badgesStr !== 'true') return {}
 9 |   return badgesStr.split(',').reduce((acc, badge) => {
10 |     const [name, version] = badge.split('/')
11 |     if (name && version) acc[name] = version
12 |     return acc
13 |   }, {} as Record<string, string>)
14 | }
15 | 
16 | function parseEmotes(emotesStr: string | undefined): Record<string, string[]> {
17 |   if (!emotesStr || emotesStr === '') return {}
18 |   try {
19 |     return JSON.parse(emotesStr) 
20 |   } catch {
21 |     return {} 
22 |   }
23 | }
24 | 
25 | let ircClient: Socket | null = null
26 | let ircConnected = false
27 | const wsClients: Set<any> = new Set()
28 | 
29 | function connectToTwitchChat(broadcast: (msg: ChatMessage) => void) {
30 |   if (ircConnected && ircClient) return
31 |   const { twitch } = useRuntimeConfig()
32 |   const { clientId, oauthToken } = twitch
33 |   if (!oauthToken) return
34 | 
35 |   if (!ircClient) {
36 |     ircClient = createConnection(6667, 'irc.chat.twitch.tv', () => {
37 |       ircConnected = true
38 |       ircClient!.write(`PASS ${oauthToken}\r\n`)
39 |       ircClient!.write(`NICK ${clientId}\r\n`)
40 |       ircClient!.write('CAP REQ :twitch.tv/membership twitch.tv/tags twitch.tv/commands\r\n')
41 |       ircClient!.write('JOIN #hugo_rcd\r\n')
42 |     })
43 |   }
44 |   ircClient.removeAllListeners('data')
45 |   ircClient.on('data', (data: Buffer) => {
46 |     const rawMessage = data.toString()
47 |     const messages = rawMessage.split('\r\n')
48 |     for (const message of messages) {
49 |       if (!message) continue
50 |       const parsed = parse(message)
51 |       if (!parsed) continue
52 |       if (parsed.command === 'PRIVMSG') {
53 |         const chatMessage: ChatMessage = {
54 |           username: parsed.tags?.['display-name'] || parsed.prefix?.split('!')[0] || '',
55 |           message: parsed.params?.[1] || '',
56 |           timestamp: new Date().toISOString(),
57 |           badges: parseBadges(parsed.tags?.['badges']),
58 |           color: parsed.tags?.['color'],
59 |           rawEmotes: parsed.tags?.['emotes'] || ''
60 |         }
61 |         broadcast(chatMessage)
62 |       }
63 |       if (parsed.command === 'PING' && ircClient) {
64 |         ircClient.write('PONG :tmi.twitch.tv\r\n')
65 |       }
66 |     }
67 |   })
68 |   ircClient.removeAllListeners('error')
69 |   ircClient.on('error', () => {
70 |     ircConnected = false
71 |     setTimeout(() => connectToTwitchChat(broadcast), 5000)
72 |   })
73 |   ircClient.removeAllListeners('close')
74 |   ircClient.on('close', () => {
75 |     ircConnected = false
76 |     setTimeout(() => connectToTwitchChat(broadcast), 5000)
77 |   })
78 | }
79 | 
80 | export default defineWebSocketHandler({
81 |   open(peer) {
82 |     wsClients.add(peer)
83 |     if (wsClients.size === 1) {
84 |       connectToTwitchChat((msg) => {
85 |         for (const client of wsClients) {
86 |           client.send(JSON.stringify(msg))
87 |         }
88 |       })
89 |     }
90 |   },
91 |   close(peer) {
92 |     wsClients.delete(peer)
93 |   }
94 | }) 
95 | 


--------------------------------------------------------------------------------
/app/layouts/overlay.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { stream } = useStream()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <UApp class="relative min-h-screen bg-transparent overflow-hidden">
 7 |     <div class="absolute inset-0 opacity-[0.03]">
 8 |       <div class="w-full h-full" style="background-image: radial-gradient(circle at 1px 1px, rgba(var(--ui-text-dimmed), 0.5) 1px, transparent 0); background-size: 50px 50px;" />
 9 |     </div>
10 | 
11 |     <div class="absolute top-4 left-4 w-8 h-8 border-l-2 border-t-2 border-default" />
12 |     <div class="absolute top-4 right-4 w-8 h-8 border-r-2 border-t-2 border-default" />
13 |     <div class="absolute bottom-4 left-4 w-8 h-8 border-l-2 border-b-2 border-default" />
14 |     <div class="absolute bottom-4 right-4 w-8 h-8 border-r-2 border-b-2 border-default" />
15 | 
16 |     <div class="absolute top-6 right-16 flex items-center gap-4">
17 |       <div class="flex items-center gap-2">
18 |         <div class="w-2 h-2 border border-muted rotate-45" />
19 |         <NbViewer :nb-viewers="stream?.stream?.viewer_count ?? 0" />
20 |         <div class="w-8 h-[1px] bg-muted" />
21 |       </div>
22 |     </div>
23 | 
24 |     <div class="h-screen p-8">
25 |       <div class="h-full relative">
26 |         <slot />
27 |       </div>
28 |     </div>
29 | 
30 |     <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2">
31 |       <div class="flex items-center gap-6">
32 |         <div class="relative">
33 |           <div class="w-3 h-3 border border-muted rotate-45" />
34 |           <div class="absolute top-1/2 left-1/2 w-1 h-1 bg-highlighted transform -translate-x-1/2 -translate-y-1/2" />
35 |         </div>
36 | 
37 |         <div class="bg-default/40 backdrop-blur-sm border border-default px-4 py-2 flex items-center gap-1">
38 |           <div class="w-1 h-1 bg-highlighted" />
39 |           <div class="flex items-center gap-4 mx-3">
40 |             <div 
41 |               v-for="(social, index) in socials" 
42 |               :key="social.name" 
43 |               class="flex items-center gap-2 text-muted text-xs font-mono"
44 |             >
45 |               <div class="w-1 h-1 bg-dimmed" />
46 |               <UIcon :name="social.icon" class="size-3" />
47 |               <span class="tracking-wider">{{ social.name }}</span>
48 |               <div v-if="index < socials.length - 1" class="w-3 h-[1px] bg-muted" />
49 |             </div>
50 |           </div>
51 |           <div class="w-1 h-1 bg-highlighted" />
52 |         </div>
53 | 
54 |         <div class="relative">
55 |           <div class="w-3 h-3 border border-muted rotate-45" />
56 |           <div class="absolute top-1/2 left-1/2 w-1 h-1 bg-highlighted transform -translate-x-1/2 -translate-y-1/2" />
57 |         </div>
58 |       </div>
59 |     </div>
60 | 
61 |     <div class="absolute top-1/3 left-0 w-16 h-[1px] bg-gradient-to-r from-transparent via-muted to-transparent animate-pulse" />
62 |     <div class="absolute top-2/3 right-0 w-16 h-[1px] bg-gradient-to-l from-transparent via-muted to-transparent animate-pulse" style="animation-delay: 1s;" />
63 |     
64 |     <div class="absolute top-1/2 left-8 transform -translate-y-1/2">
65 |       <div class="flex flex-col gap-1">
66 |         <div class="w-2 h-[1px] bg-default" />
67 |         <div class="w-1 h-[1px] bg-muted" />
68 |         <div class="w-3 h-[1px] bg-default" />
69 |       </div>
70 |     </div>
71 |     
72 |     <div class="absolute top-1/2 right-8 transform -translate-y-1/2">
73 |       <div class="flex flex-col gap-1">
74 |         <div class="w-2 h-[1px] bg-default" />
75 |         <div class="w-1 h-[1px] bg-muted" />
76 |         <div class="w-3 h-[1px] bg-default" />
77 |       </div>
78 |     </div>
79 |   </UApp>
80 | </template>
81 | 
82 | <style scoped>
83 | .font-mono {
84 |   font-family: 'JetBrains Mono', monospace;
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <h1>My Nuxt-Powered Twitch Assets</h1>
 3 |   <p>Ever thought about building your Twitch stream assets with Nuxt? Turns out, it's not only possible, it's awesome!</p>
 4 |   <p>This repository contains all the dynamic overlays, alerts, and tools I use for my personal Twitch stream, all built with Nuxt and Vue.</p>
 5 |   <p>
 6 |     <a href="https://dub.sh/hugo-twitch">Watch My Stream</a> ·
 7 |     <a href="https://twitch.hrcd.fr">See Them In Action</a>
 8 |   </p>
 9 | </div>
10 | 
11 | ---
12 | 
13 | ## ✨ Why Nuxt for Twitch Assets?
14 | 
15 | You might not think of Nuxt when planning your stream visuals, but it offers some incredible advantages:
16 | 
17 | *   **Full Creative Control:** Leverage the power of Vue components and modern web technologies to create truly unique and interactive assets.
18 | *   **Dynamic Content:** Easily integrate real-time data, APIs (like the Twitch API I'm already using!), or even server-side logic with Nitro.
19 | *   **Reactivity:** Vue's reactivity makes for smooth and responsive overlays that can react to stream events.
20 | *   **Familiar Workflow:** If you're a web developer, you're already in your comfort zone!
21 | *   **Open Source & Customizable:** This repo serves as a live example. Fork it, learn from it, and adapt it for your own stream!
22 | *   **Powered by @nuxt_hub & Cloudflare Workers:** Deployed on the edge for optimal performance and enabling real-time features like WebSockets.
23 | 
24 | ## 🚀 Current State & Future Vision
25 | 
26 | This project is actively under development. Here's a glimpse of what's here and what's planned:
27 | 
28 | **Implemented:**
29 | *   Integration with the Twitch API (for basic data, more to come!).
30 | *   Deployment on [@nuxt_hub](https://x.com/nuxt_hub) using Cloudflare Workers.
31 | 
32 | **Roadmap / To-Do (The exciting stuff I'm building!):**
33 | *   🖼️ **Customizable Overlays:** Starting Soon, Be Right Back, Stream Ending screens.
34 | *   💬 **Interactive Elements:** Real-time chat display, follower/subscriber/raid alerts (leveraging WebSockets!).
35 | *   📊 **Dynamic Information Display:** Current project, music playing, social media handles, sponsor logos.
36 | *   🎨 **Themeable Design:** Easily switch looks or create your own themes.
37 | *   🔧 **Easy Configuration Interface:** (Potentially a simple UI to manage asset settings).
38 | *   🌐 **Optimized Browser Sources:** Ensuring smooth performance in OBS, Streamlabs, etc.
39 | 
40 | The goal is to showcase a comprehensive suite of Nuxt-powered stream assets!
41 | 
42 | <details><summary>🛠️ Getting Started (Basic Nuxt Setup)</summary>
43 | 
44 | This project is a standard Nuxt application.
45 | 
46 | 1.  Clone the repo:
47 |     ```bash
48 |     git clone https://github.com/HugoRCD/twitch-assets.git
49 |     ```
50 | 2.  Navigate to the project directory:
51 |     ```bash
52 |     cd twitch-assets
53 |     ```
54 | 3.  Install dependencies (using PNPM):
55 |     ```bash
56 |     pnpm install
57 |     ```
58 | 4.  Configure your Twitch API credentials and other settings in `.env` (create one from `.env.example` if provided) for the chat you will need to create a special token here (https://twitchtokengenerator.com).
59 | 5.  Run the Nuxt development server:
60 |     ```bash
61 |     pnpm dev
62 |     ```
63 | 6.  Add the relevant Nuxt routes (e.g., `http://localhost:3000/starting-soon`) as Browser Sources in your streaming software.
64 | 
65 | </details>
66 | 
67 | ## 💡 Get Inspired!
68 | 
69 | Feel free to browse the code as it develops, see how things are structured, and get inspired to build your own Nuxt-powered stream assets. You might be surprised by what's possible!
70 | 
71 | While this project hosts *my* personal assets, the patterns and techniques can be adapted for any stream.
72 | 
73 | ## 🤝 Contributing & Feedback
74 | 
75 | This is primarily a showcase of my personal setup and a learning journey in building these assets. However, if you have cool ideas, find bugs, or want to share how you've adapted this, feel free to open an issue or discussion!
76 | 
77 | And if you find this inspiring, a star ⭐ on the repo is always appreciated!
78 | 
79 | ## 📝 License
80 | 
81 | Distributed under the Apache-2.0 License. See `LICENSE` for more information.
82 | 
83 | ---
84 | 
85 | <div align="center">
86 |   Happy Streaming! Built with Nuxt 💚 & Deployed on @nuxt_hub
87 | </div>
88 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright 2024-present Hugo Richard
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/app/components/OverlayPage.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { ref, onMounted, onUnmounted } from 'vue'
  3 | 
  4 | interface Props {
  5 |   subtitle?: string
  6 |   title: string
  7 |   showTags?: boolean
  8 |   showChat?: boolean
  9 |   chatClass?: string
 10 |   showTechStack?: boolean
 11 | }
 12 | 
 13 | const props = withDefaults(defineProps<Props>(), {
 14 |   showTags: true,
 15 |   showChat: false,
 16 |   chatClass: 'h-[70%] w-[500px]',
 17 |   showTechStack: true
 18 | })
 19 | 
 20 | const techStack = [
 21 |   { icon: 'i-simple-icons-nuxtdotjs', name: 'NUXT', color: 'text-primary', isPrimary: true },
 22 |   { icon: 'i-simple-icons-vuedotjs', name: 'VUE', color: 'text-green-400' },
 23 |   { icon: 'i-simple-icons-tailwindcss', name: 'TAILWIND', color: 'text-cyan-400' },
 24 |   { icon: 'i-simple-icons-raycast', name: 'RAYCAST', color: 'text-orange-400' }
 25 | ]
 26 | 
 27 | const primaryTech = computed(() => techStack.find(tech => tech.isPrimary))
 28 | const secondaryTechs = computed(() => techStack.filter(tech => !tech.isPrimary))
 29 | 
 30 | const glitchTrigger = ref(false)
 31 | const currentTime = ref('')
 32 | 
 33 | onMounted(() => {
 34 |   const glitchInterval = setInterval(() => {
 35 |     glitchTrigger.value = true
 36 |     setTimeout(() => {
 37 |       glitchTrigger.value = false
 38 |     }, 200)
 39 |   }, 8000)
 40 |   
 41 |   const updateTime = () => {
 42 |     const now = new Date()
 43 |     currentTime.value = now.toLocaleTimeString('fr-FR', { 
 44 |       hour: '2-digit', 
 45 |       minute: '2-digit'
 46 |     })
 47 |   }
 48 |   
 49 |   updateTime()
 50 |   const timeInterval = setInterval(updateTime, 60000)
 51 |   
 52 |   onUnmounted(() => {
 53 |     clearInterval(glitchInterval)
 54 |     clearInterval(timeInterval)
 55 |   })
 56 | })
 57 | </script>
 58 | 
 59 | <template>
 60 |   <NuxtLayout name="overlay">
 61 |     <div class="absolute inset-0 opacity-[0.02]">
 62 |       <div class="w-full h-full" style="background-image: linear-gradient(rgba(var(--ui-text-dimmed), 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ui-text-dimmed), 0.3) 1px, transparent 1px); background-size: 20px 20px;" />
 63 |     </div>
 64 |     <div class="pointer-events-none fixed inset-0 z-40 size-full overflow-hidden">
 65 |       <div class="noise pointer-events-none absolute inset-[-200%] z-50 size-[400%] bg-[url('/noise.png')] opacity-[2%]" />
 66 |     </div>
 67 | 
 68 |     <div class="absolute inset-0 overflow-hidden pointer-events-none">
 69 |       <Motion
 70 |         v-if="showTechStack && primaryTech"
 71 |         class="absolute top-1/2 right-12 transform -translate-y-1/2"
 72 |         :initial="{ opacity: 0, x: 50, filter: 'blur(10px)' }"
 73 |         :animate="{ opacity: 1, x: 0, filter: 'blur(0px)' }"
 74 |         :transition="{ duration: 1.5, ease: 'easeOut', delay: 0.5 }"
 75 |       >
 76 |         <div class="flex flex-col gap-6">
 77 |           <Motion
 78 |             class="flex items-center gap-3 mb-2"
 79 |             :animate="{ opacity: [0.6, 1, 0.6] }"
 80 |             :transition="{ duration: 4, repeat: Infinity, ease: 'easeInOut' }"
 81 |           >
 82 |             <div class="w-6 h-[1px] bg-muted" />
 83 |             <span class="text-xs font-mono text-muted tracking-widest">TECH STACK</span>
 84 |             <div class="w-6 h-[1px] bg-muted" />
 85 |           </Motion>
 86 | 
 87 |           <Motion
 88 |             class="relative"
 89 |             :animate="{ scale: [0.98, 1.02, 0.98] }"
 90 |             :transition="{ duration: 6, repeat: Infinity, ease: 'easeInOut' }"
 91 |           >
 92 |             <div class="relative">
 93 |               <Motion
 94 |                 class="absolute inset-0 border border-primary opacity-40"
 95 |                 :animate="{ opacity: [0.3, 0.6, 0.3] }"
 96 |                 :transition="{ duration: 4, repeat: Infinity, ease: 'easeInOut' }"
 97 |               />
 98 |               
 99 |               <div class="absolute -top-1 -left-1 w-3 h-3 border-l-2 border-t-2 border-primary" />
100 |               <div class="absolute -top-1 -right-1 w-3 h-3 border-r-2 border-t-2 border-primary" />
101 |               <div class="absolute -bottom-1 -left-1 w-3 h-3 border-l-2 border-b-2 border-primary" />
102 |               <div class="absolute -bottom-1 -right-1 w-3 h-3 border-r-2 border-b-2 border-primary" />
103 |               
104 |               <div class="p-3 relative flex items-center justify-center">
105 |                 <Motion
106 |                   :class="`opacity-30 ${primaryTech.color}`"
107 |                   :animate="{ opacity: [0.25, 0.45, 0.25] }"
108 |                   :transition="{ duration: 5, repeat: Infinity, ease: 'easeInOut' }"
109 |                 >
110 |                   <UIcon :name="primaryTech.icon" class="text-[60px] drop-shadow-[0_0_15px_rgba(var(--ui-primary),0.4)]" />
111 |                 </Motion>
112 |                  
113 |                 <Motion
114 |                   class="absolute top-1/2 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-primary to-transparent opacity-60"
115 |                   :animate="{ scaleX: [0.6, 1.4, 0.6] }"
116 |                   :transition="{ duration: 3, repeat: Infinity, ease: 'easeInOut', delay: 1 }"
117 |                 />
118 |               </div>
119 |             </div>
120 |           </Motion>
121 | 
122 |           <div class="grid grid-cols-3 gap-3">
123 |             <Motion
124 |               v-for="(tech, index) in secondaryTechs"
125 |               :key="tech.name"
126 |               class="relative"
127 |               :animate="{ scale: [0.95, 1.05, 0.95] }"
128 |               :transition="{ duration: 4 + (index * 0.5), repeat: Infinity, ease: 'easeInOut', delay: index * 0.3 }"
129 |             >
130 |               <div class="relative group">
131 |                 <Motion
132 |                   class="absolute inset-0 border border-muted opacity-25"
133 |                   :animate="{ opacity: [0.15, 0.35, 0.15] }"
134 |                   :transition="{ duration: 3 + (index * 0.2), repeat: Infinity, ease: 'easeInOut' }"
135 |                 />
136 |                 
137 |                 <div class="absolute -top-0.5 -left-0.5 w-2 h-2 border-l border-t border-highlighted" />
138 |                 <div class="absolute -bottom-0.5 -right-0.5 w-2 h-2 border-r border-b border-highlighted" />
139 |                 
140 |                 <div class="p-2 relative">
141 |                   <Motion
142 |                     :class="`opacity-25 ${tech.color}`"
143 |                     :animate="{ opacity: [0.2, 0.4, 0.2] }"
144 |                     :transition="{ duration: 4, repeat: Infinity, ease: 'easeInOut', delay: index * 0.5 }"
145 |                   >
146 |                     <UIcon :name="tech.icon" class="text-[32px]" />
147 |                   </Motion>
148 |                   
149 |                   <Motion
150 |                     class="absolute -bottom-5 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
151 |                     :animate="{ opacity: [0.3, 0.6, 0.3] }"
152 |                     :transition="{ duration: 5, repeat: Infinity, ease: 'easeInOut', delay: index * 0.2 }"
153 |                   >
154 |                     <span class="text-[10px] font-mono text-muted tracking-widest">{{ tech.name }}</span>
155 |                   </Motion>
156 |                 </div>
157 |               </div>
158 |             </Motion>
159 |           </div>
160 |         </div>
161 |       </Motion>
162 | 
163 |       <Motion
164 |         class="absolute top-20 right-20 w-16 h-16 border border-muted opacity-20"
165 |         :animate="{ 
166 |           rotate: [0, 360],
167 |           opacity: [0.1, 0.3, 0.1]
168 |         }"
169 |         :transition="{ 
170 |           duration: 20,
171 |           repeat: Infinity,
172 |           ease: 'linear'
173 |         }"
174 |       >
175 |         <div class="absolute top-1/2 left-1/2 w-1 h-1 bg-primary transform -translate-x-1/2 -translate-y-1/2" />
176 |       </Motion>
177 | 
178 |       <Motion
179 |         class="absolute bottom-20 left-20 w-12 h-12 border border-muted opacity-20"
180 |         :animate="{ 
181 |           rotate: [360, 0],
182 |           opacity: [0.1, 0.3, 0.1]
183 |         }"
184 |         :transition="{ 
185 |           duration: 15,
186 |           repeat: Infinity,
187 |           ease: 'linear'
188 |         }"
189 |       >
190 |         <div class="absolute top-0 left-0 w-3 h-3 border-t border-l border-primary" />
191 |         <div class="absolute bottom-0 right-0 w-3 h-3 border-b border-r border-primary" />
192 |       </Motion>
193 | 
194 |       <Motion
195 |         v-for="i in 6"
196 |         :key="`diagonal-${i}`"
197 |         class="absolute border-t border-muted opacity-30"
198 |         :style="{
199 |           width: '200px',
200 |           left: `${10 + i * 15}%`,
201 |           top: `${20 + i * 10}%`,
202 |           transform: `rotate(${35 + i * 10}deg)`
203 |         }"
204 |         :animate="{ 
205 |           opacity: [0.1, 0.5, 0.1],
206 |           scaleX: [0.8, 1.2, 0.8]
207 |         }"
208 |         :transition="{ 
209 |           duration: 3 + (i * 0.2),
210 |           repeat: Infinity,
211 |           ease: 'easeInOut',
212 |           delay: i * 0.3
213 |         }"
214 |       />
215 | 
216 |       <Motion
217 |         v-for="i in 4"
218 |         :key="`corner-element-${i}`"
219 |         class="absolute w-8 h-8 border border-muted"
220 |         :style="{
221 |           left: i % 2 === 0 ? '10%' : '85%',
222 |           top: i < 2 ? '15%' : '80%',
223 |           transform: 'rotate(45deg)'
224 |         }"
225 |         :animate="{ 
226 |           rotate: [45, 135, 45],
227 |           opacity: [0.3, 0.8, 0.3]
228 |         }"
229 |         :transition="{ 
230 |           duration: 4,
231 |           repeat: Infinity,
232 |           ease: 'easeInOut',
233 |           delay: i * 0.5
234 |         }"
235 |       >
236 |         <div class="absolute top-1/2 left-1/2 w-1 h-1 bg-primary transform -translate-x-1/2 -translate-y-1/2" />
237 |       </Motion>
238 | 
239 |       <Motion
240 |         class="absolute left-8 top-1/4 transform -translate-y-1/2"
241 |         :animate="{ x: [-5, 5, -5] }"
242 |         :transition="{ duration: 4, repeat: Infinity, ease: 'easeInOut' }"
243 |       >
244 |         <div class="flex flex-col gap-4">
245 |           <Motion
246 |             class="flex items-center gap-2"
247 |             :animate="{ opacity: [0.5, 1, 0.5] }"
248 |             :transition="{ duration: 2, repeat: Infinity }"
249 |           >
250 |             <div class="w-8 h-[1px] bg-default" />
251 |             <Motion
252 |               class="w-2 h-2 border border-muted rotate-45"
253 |               :animate="{ rotate: [45, 135, 45] }"
254 |               :transition="{ duration: 3, repeat: Infinity, ease: 'easeInOut' }"
255 |             />
256 |             <div class="w-4 h-[1px] bg-muted" />
257 |           </Motion>
258 |           <Motion
259 |             class="flex items-center gap-2"
260 |             :animate="{ opacity: [0.3, 0.9, 0.3] }"
261 |             :transition="{ duration: 2.5, repeat: Infinity, delay: 0.5 }"
262 |           >
263 |             <div class="w-6 h-[1px] bg-muted" />
264 |             <Motion
265 |               class="w-1 h-1 bg-highlighted"
266 |               :animate="{ scale: [1, 1.5, 1] }"
267 |               :transition="{ duration: 1.5, repeat: Infinity }"
268 |             />
269 |             <div class="w-8 h-[1px] bg-default" />
270 |           </Motion>
271 |           <Motion
272 |             class="flex items-center gap-2"
273 |             :animate="{ opacity: [0.4, 1, 0.4] }"
274 |             :transition="{ duration: 3, repeat: Infinity, delay: 1 }"
275 |           >
276 |             <div class="w-12 h-[1px] bg-default" />
277 |             <div class="w-2 h-2 border border-default rotate-45" />
278 |           </Motion>
279 |         </div>
280 |       </Motion>
281 | 
282 |       <Motion
283 |         class="absolute right-8 bottom-1/4 transform translate-y-1/2"
284 |         :animate="{ x: [5, -5, 5] }"
285 |         :transition="{ duration: 4, repeat: Infinity, ease: 'easeInOut' }"
286 |       >
287 |         <div class="flex flex-col gap-4">
288 |           <Motion
289 |             class="flex items-center gap-2 justify-end"
290 |             :animate="{ opacity: [0.4, 1, 0.4] }"
291 |             :transition="{ duration: 2.2, repeat: Infinity }"
292 |           >
293 |             <div class="w-4 h-[1px] bg-muted" />
294 |             <Motion
295 |               class="w-1 h-1 bg-highlighted"
296 |               :animate="{ scale: [1, 1.8, 1] }"
297 |               :transition="{ duration: 1.8, repeat: Infinity }"
298 |             />
299 |             <div class="w-6 h-[1px] bg-default" />
300 |           </Motion>
301 |           <Motion
302 |             class="flex items-center gap-2 justify-end"
303 |             :animate="{ opacity: [0.5, 1, 0.5] }"
304 |             :transition="{ duration: 2.8, repeat: Infinity, delay: 0.3 }"
305 |           >
306 |             <Motion
307 |               class="w-2 h-2 border border-muted rotate-45"
308 |               :animate="{ rotate: [45, -45, 45] }"
309 |               :transition="{ duration: 4, repeat: Infinity, ease: 'easeInOut' }"
310 |             />
311 |             <div class="w-8 h-[1px] bg-default" />
312 |           </Motion>
313 |           <Motion
314 |             class="flex items-center gap-2 justify-end"
315 |             :animate="{ opacity: [0.3, 0.9, 0.3] }"
316 |             :transition="{ duration: 3.5, repeat: Infinity, delay: 0.7 }"
317 |           >
318 |             <div class="w-12 h-[1px] bg-muted" />
319 |             <div class="w-1 h-1 bg-highlighted" />
320 |           </Motion>
321 |         </div>
322 |       </Motion>
323 | 
324 |       <Motion
325 |         v-for="i in 12" 
326 |         :key="`indicator-${i}`"
327 |         class="absolute w-1 h-1 bg-highlighted"
328 |         :style="{
329 |           left: `${15 + (i * 6)}%`,
330 |           top: `${20 + (i % 3) * 20}%`
331 |         }"
332 |         :animate="{ 
333 |           opacity: [0, 1, 0],
334 |           scale: [0.5, 1.5, 0.5]
335 |         }"
336 |         :transition="{ 
337 |           duration: 2,
338 |           delay: i * 0.15,
339 |           repeat: Infinity,
340 |           ease: 'easeInOut'
341 |         }"
342 |       />
343 | 
344 |       <Motion
345 |         class="absolute top-16 left-1/4 w-32 h-[1px] bg-gradient-to-r from-transparent via-muted to-transparent"
346 |         :animate="{ opacity: [0.3, 1, 0.3] }"
347 |         :transition="{ duration: 3, repeat: Infinity }"
348 |       >
349 |         <Motion
350 |           class="w-4 h-[3px] bg-highlighted -translate-y-[1px]"
351 |           :animate="{ x: [0, 128, 0] }"
352 |           :transition="{ 
353 |             duration: 3,
354 |             ease: 'easeInOut',
355 |             repeat: Infinity
356 |           }"
357 |         />
358 |       </Motion>
359 |       
360 |       <Motion
361 |         class="absolute bottom-16 right-1/4 w-32 h-[1px] bg-gradient-to-l from-transparent via-muted to-transparent"
362 |         :animate="{ opacity: [0.4, 1, 0.4] }"
363 |         :transition="{ duration: 3.5, repeat: Infinity }"
364 |       >
365 |         <Motion
366 |           class="w-4 h-[3px] bg-highlighted -translate-y-[1px] ml-auto"
367 |           :animate="{ x: [0, -128, 0] }"
368 |           :transition="{ 
369 |             duration: 3.5,
370 |             ease: 'easeInOut',
371 |             repeat: Infinity
372 |           }"
373 |         />
374 |       </Motion>
375 | 
376 |       <Motion
377 |         v-for="i in 6"
378 |         :key="`floating-${i}`"
379 |         class="absolute w-2 h-2 border border-primary rotate-45"
380 |         :style="{
381 |           left: `${10 + (i * 15)}%`,
382 |           top: `${70 + (i % 2) * 15}%`
383 |         }"
384 |         :animate="{ 
385 |           y: [-10, 10, -10],
386 |           rotate: [45, 135, 45],
387 |           opacity: [0.3, 0.8, 0.3]
388 |         }"
389 |         :transition="{ 
390 |           duration: 2.5 + (i * 0.3),
391 |           repeat: Infinity,
392 |           ease: 'easeInOut',
393 |           delay: i * 0.4
394 |         }"
395 |       />
396 |     </div>
397 | 
398 |     <Motion
399 |       class="absolute top-6 left-6 z-20"
400 |       :initial="{ opacity: 0, x: -50, filter: 'blur(10px)' }"
401 |       :animate="{ 
402 |         opacity: 1, 
403 |         x: 0, 
404 |         filter: 'blur(0px)',
405 |         ...(glitchTrigger ? { 
406 |           x: [0, -2, 2, 0], 
407 |           textShadow: ['0 0 0 transparent', '2px 0 0 #ff0000, -2px 0 0 #00ffff', '0 0 0 transparent'] 
408 |         } : {})
409 |       }"
410 |       :transition="{ 
411 |         duration: glitchTrigger ? 0.1 : 1.5, 
412 |         ease: 'easeOut',
413 |         ...(glitchTrigger ? { repeat: 3 } : {})
414 |       }"
415 |     >
416 |       <div class="flex items-center gap-6">
417 |         <div class="flex items-center gap-2">
418 |           <Motion
419 |             class="w-3 h-3 border border-muted rotate-45"
420 |             :animate="{ rotate: [45, 225, 45] }"
421 |             :transition="{ duration: 4, repeat: Infinity }"
422 |           />
423 |           <div class="w-12 h-[1px] bg-default" />
424 |           <Motion
425 |             class="w-1 h-1 bg-highlighted"
426 |             :animate="{ scale: [1, 2, 1] }"
427 |             :transition="{ duration: 2, repeat: Infinity }"
428 |           />
429 |         </div>
430 |         <span class="text-sm font-mono text-muted tracking-widest uppercase">STREAM STATUS</span>
431 |         <div class="flex items-center gap-2">
432 |           <Motion
433 |             class="w-1 h-1 bg-highlighted"
434 |             :animate="{ scale: [1, 2, 1] }"
435 |             :transition="{ duration: 2, repeat: Infinity, delay: 0.5 }"
436 |           />
437 |           <div class="w-12 h-[1px] bg-default" />
438 |           <Motion
439 |             class="w-3 h-3 border border-muted rotate-45"
440 |             :animate="{ rotate: [45, -135, 45] }"
441 |             :transition="{ duration: 4, repeat: Infinity }"
442 |           />
443 |         </div>
444 |       </div>
445 |     </Motion>
446 | 
447 |     <div class="relative z-10 size-full flex items-center">
448 |       <div class="ml-6 flex flex-col max-w-7xl">
449 |         <Motion
450 |           v-if="subtitle"
451 |           :initial="{ opacity: 0, y: 20, filter: 'blur(10px)' }"
452 |           :animate="{ 
453 |             opacity: 1, 
454 |             y: 0, 
455 |             filter: 'blur(0px)',
456 |             ...(glitchTrigger ? { 
457 |               x: [0, -3, 3, 0], 
458 |               filter: ['blur(0px)', 'blur(1px)', 'blur(0px)'],
459 |               textShadow: ['0 0 0 transparent', '1px 0 0 #ff0000, -1px 0 0 #00ffff', '0 0 0 transparent'] 
460 |             } : {})
461 |           }"
462 |           :transition="{ 
463 |             duration: glitchTrigger ? 0.15 : 0.8, 
464 |             ease: 'easeOut', 
465 |             delay: glitchTrigger ? 0 : 0.3,
466 |             ...(glitchTrigger ? { repeat: 2 } : {})
467 |           }"
468 |         >
469 |           <div class="flex items-center gap-3 mb-1">
470 |             <div class="w-2 h-[1px] bg-muted" />
471 |             <span class="text-3xl text-muted">{{ subtitle }}</span>
472 |           </div>
473 |         </Motion>
474 | 
475 |         <Motion
476 |           :initial="{ 
477 |             opacity: 0, 
478 |             y: 30,
479 |             filter: 'blur(15px)'
480 |           }"
481 |           :animate="{ 
482 |             opacity: 1, 
483 |             y: 0, 
484 |             filter: 'blur(0px)',
485 |             ...(glitchTrigger ? { 
486 |               x: [0, -4, 4, -2, 2, 0], 
487 |               filter: ['blur(0px)', 'blur(2px)', 'blur(0px)'],
488 |               textShadow: ['0 0 0 transparent', '3px 0 0 #ff0000, -3px 0 0 #00ffff', '0 0 0 transparent'],
489 |               scaleX: [1, 1.02, 0.98, 1]
490 |             } : {})
491 |           }"
492 |           :transition="{ 
493 |             duration: glitchTrigger ? 0.2 : 1.2, 
494 |             ease: 'easeOut', 
495 |             delay: glitchTrigger ? 0 : 0.6,
496 |             ...(glitchTrigger ? { repeat: 1 } : {})
497 |           }"
498 |         >
499 |           <div class="relative">
500 |             <MDC tag="h1" class="text-6xl leading-tight" :value="title" />
501 |             <Motion
502 |               class="absolute -bottom-4 left-0 h-[3px] bg-primary"
503 |               :initial="{ width: 0, filter: 'blur(5px)' }"
504 |               :animate="{ 
505 |                 width: '200px', 
506 |                 filter: 'blur(0px)',
507 |                 ...(glitchTrigger ? { 
508 |                   scaleX: [1, 1.1, 0.9, 1],
509 |                   filter: ['blur(0px)', 'blur(1px)', 'blur(0px)']
510 |                 } : {})
511 |               }"
512 |               :transition="{ 
513 |                 duration: glitchTrigger ? 0.1 : 1, 
514 |                 ease: 'easeOut', 
515 |                 delay: glitchTrigger ? 0 : 1.2,
516 |                 ...(glitchTrigger ? { repeat: 3 } : {})
517 |               }"
518 |             />
519 |           </div>
520 |         </Motion>
521 | 
522 |         <Motion
523 |           v-if="showTags"
524 |           :initial="{ opacity: 0, y: 20, filter: 'blur(10px)' }"
525 |           :animate="{ 
526 |             opacity: 1, 
527 |             y: 0, 
528 |             filter: 'blur(0px)',
529 |             ...(glitchTrigger ? { 
530 |               x: [0, -1, 1, 0],
531 |               filter: ['blur(0px)', 'blur(0.5px)', 'blur(0px)']
532 |             } : {})
533 |           }"
534 |           :transition="{ 
535 |             duration: glitchTrigger ? 0.1 : 0.8, 
536 |             ease: 'easeOut', 
537 |             delay: glitchTrigger ? 0 : 1.8,
538 |             ...(glitchTrigger ? { repeat: 2 } : {})
539 |           }"
540 |         >
541 |           <div class="flex items-center gap-4 mt-8">
542 |             <div class="flex items-center gap-4">
543 |               <Motion
544 |                 class="flex items-center gap-2"
545 |                 :animate="{ opacity: [0.6, 0.9, 0.6] }"
546 |                 :transition="{ duration: 4, repeat: Infinity, ease: 'easeInOut' }"
547 |               >
548 |                 <div class="flex gap-1">
549 |                   <Motion
550 |                     v-for="i in 3"
551 |                     :key="i"
552 |                     class="w-1 bg-muted"
553 |                     :style="{ height: `${4 + i * 2}px` }"
554 |                     :animate="{ opacity: [0.4, 0.8, 0.4] }"
555 |                     :transition="{ 
556 |                       duration: 1.5, 
557 |                       repeat: Infinity, 
558 |                       ease: 'easeInOut',
559 |                       delay: i * 0.2 
560 |                     }"
561 |                   />
562 |                 </div>
563 |                 <span class="text-xs font-mono text-muted tracking-wider uppercase">1080P</span>
564 |               </Motion>
565 |               
566 |               <div class="w-6 h-[1px] bg-muted opacity-30" />
567 |               
568 |               <Motion
569 |                 v-if="currentTime"
570 |                 class="flex items-center gap-2"
571 |                 :animate="{ opacity: [0.5, 0.8, 0.5] }"
572 |                 :transition="{ duration: 3, repeat: Infinity, ease: 'easeInOut', delay: 1 }"
573 |               >
574 |                 <div class="w-1 h-1 bg-highlighted rounded-full" />
575 |                 <span class="text-xs font-mono text-muted tracking-wider uppercase">{{ currentTime }}</span>
576 |               </Motion>
577 |               <div class="w-6 h-[1px] bg-muted opacity-30" />
578 |               
579 |               <Motion
580 |                 class="flex items-center gap-2"
581 |                 :animate="{ opacity: [0.4, 0.7, 0.4] }"
582 |                 :transition="{ duration: 5, repeat: Infinity, ease: 'easeInOut', delay: 2 }"
583 |               >
584 |                 <UIcon name="i-heroicons-globe-alt" class="w-3 h-3 text-muted" />
585 |                 <span class="text-xs font-mono text-muted tracking-wider uppercase">CET</span>
586 |               </Motion>
587 |               
588 |               <div class="w-6 h-[1px] bg-muted opacity-30" />
589 |               
590 |               <Motion
591 |                 class="flex items-center gap-2"
592 |                 :animate="{ opacity: [0.5, 0.9, 0.5] }"
593 |                 :transition="{ duration: 4, repeat: Infinity, ease: 'easeInOut', delay: 1.5 }"
594 |               >
595 |                 <Motion
596 |                   class="w-1 h-1 bg-green-400 rounded-full"
597 |                   :animate="{ scale: [1, 1.2, 1] }"
598 |                   :transition="{ duration: 2, repeat: Infinity }"
599 |                 />
600 |                 <span class="text-xs font-mono text-muted tracking-wider uppercase">BUILD OK</span>
601 |               </Motion>
602 |             </div>
603 |           </div>
604 |         </Motion>
605 |       </div>
606 | 
607 |       <Motion
608 |         v-if="showChat"
609 |         class="absolute right-12 top-1/2 transform -translate-y-1/2"
610 |         :initial="{ opacity: 0, scale: 0.8, filter: 'blur(10px)' }"
611 |         :animate="{ opacity: 1, scale: 1, filter: 'blur(0px)' }"
612 |         :transition="{ duration: 1.5, ease: 'easeOut', delay: 2 }"
613 |       >
614 |         <div class="relative">
615 |           <div class="absolute inset-0 -m-4">
616 |             <Motion
617 |               class="w-full h-full border border-default relative"
618 |               :animate="{ opacity: [0.5, 1, 0.5] }"
619 |               :transition="{ duration: 3, repeat: Infinity }"
620 |             >
621 |               <div class="absolute -top-1 -left-1 w-4 h-4 border-l-2 border-t-2 border-primary" />
622 |               <div class="absolute -top-1 -right-1 w-4 h-4 border-r-2 border-t-2 border-primary" />
623 |               <div class="absolute -bottom-1 -left-1 w-4 h-4 border-l-2 border-b-2 border-primary" />
624 |               <div class="absolute -bottom-1 -right-1 w-4 h-4 border-r-2 border-b-2 border-primary" />
625 |             </Motion>
626 |           </div>
627 |           <Chat :class="chatClass" />
628 |         </div>
629 |       </Motion>
630 |     </div>
631 |   </NuxtLayout>
632 | </template>
633 | 
634 | <style scoped>
635 | .font-mono {
636 |   font-family: 'JetBrains Mono', monospace;
637 | }
638 | </style> 
639 | 


--------------------------------------------------------------------------------