app/website/pages/app.vue at main · OctoconDev/app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
  <div class="relative overflow-hidden">
    <div class="absolute z--1 w-screen h-screen grid place-items-center">
      <div class="flex flex-col gap-4 items-center text-center">
        <NuxtPicture
          src="/img/octocon-logo.png"
          alt="Octocon logo"
          format="avif,webp"
          width="96"
          height="96"
          sizes="256"
          quality="90"
        />
        <div class="text-3xl font-display text-gray-300">
          Loading Octocon app...
        </div>
        <div class="font-body text-xl text-gray-400 font-medium">
          This may take a minute!
        </div>
      </div>
    </div>
    <div v-if="error != null" class="absolute z-99 w-screen h-screen">
      <div class="bg-black/60 h-full w-full grid place-items-center">
        <div
          class="relative bg-gray-950 p-8 rounded-xl max-w-xl flex flex-col gap-4"
        >
          <button
            class="absolute top-4 right-4 p-2 rounded-xl text-lg bg-gray-800 backdrop-blur-sm"
            @click="error = null"
          >
            <UnoIcon
              class="text-gray-400"
              :class="'i-material-symbols-close-rounded'"
            />
          </button>
          <h1 class="text-3xl font-display text-gray-300 text-center">
            🤦 Whoops!
          </h1>
          <p class="text-lg text-gray-400">
            An error occurred while running the app. Please report this to the
            Octocon developers
            <NuxtLink to="https://octocon.app/discord" class="text-violet-400">
              on Discord
            </NuxtLink>
            !
          </p>
          <p class="text-lg text-gray-400">
            You can click the "X" above to ignore this error, but the app likely
            won't work correctly.
          </p>
          <p class="text-sm text-gray-500 text-center font-semibold">
            {{ error }}
          </p>
        </div>
      </div>
    </div>
    <div v-if="!popupDismissed" class="absolute z-99 w-screen h-screen">
      <div class="bg-black/60 h-full w-full grid place-items-center">
        <div
          class="bg-gray-950 p-8 rounded-xl max-w-xl flex flex-col gap-4"
        >
          <h1 class="text-3xl font-display text-gray-300 text-center">
            ⚠️ Warning! ⚠️
          </h1>
          <p class="text-lg text-gray-400">
            Octocon's web app is currently in beta! The app is VERY likely to break. For a more stable
            and fully featured experience, we recommend using our Android or iOS app.
          </p>
          <button
            class="self-center px-4 py-2 rounded-xl bg-red-500 text-gray-100 font-display font-medium hover:bg-red-600 transition ease-in-out duration-300"
            @click="popupDismissed = true"
          >
            I understand, show me the app!
          </button>
        </div>
      </div>
    </div>
    <div id="composeApp" class="z-98 w-screen h-screen" />
  </div>
</template>
<script setup lang="ts">
const error = ref<Error | null>(null)
const popupDismissed = ref(false)

onMounted(() => {
  // Ugly hack to get Kotlin/Wasm to not implode because Nuxt simulates `window.process`
  if (window.process) {
    window.process.release = {
      name: 'meow'
    }
  }

  // Hook Vue into uncaught Wasm errors
  addEventListener('error', (event) => {
    error.value = event.error
    console.log(event)
  })

  // Load app Wasm script outside the Vue context
  const script = document.createElement('script')
  script.src = '/priv/app/octocon-app.js'
  script.async = true
  script.defer = true
  document.body.appendChild(script)

  window.lastWasError = false
  // Repeatedly warn the user in the console not to paste anything there
  setInterval(() => {
    const fun = window.lastWasError ? console.warn : console.error
    fun(
      `⚠️ DO NOT copy or paste anything here! If someone told you to access this screen, they are trying to scam you and/or gain access to your Octocon account. ${Math.random()}`
    )
    window.lastWasError = !window.lastWasError
  }, 3000)
})

declare namespace window {
  let lastWasError: boolean
  let process: any
}

definePageMeta({
  layout: 'app'
})
</script>