frontend/app.vue at main · BlueScript-NPO/frontend · 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
<template>
  <!-- Google Font -->
  <Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir">
    <Head>
      <template v-for="link in head.link" :key="link.hid">
        <Link
          :id="link.hid"
          :rel="link.rel"
          :href="link.href"
          :hreflang="link.hreflang"
        />
      </template>
    </Head>

    <ClientOnly>
      <NuxtLoadingIndicator :color="isDark ? '#C2C8EC' : '#2F45C7'" />
    </ClientOnly>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
    <UNotifications />
  </Html>
</template>

<script setup lang="ts">
import { ParsedContent } from "@nuxt/content";

const { t } = useI18n();
const colorMode = useColorMode();
const supabase = useSupabaseClient();
const localePath = useLocalePath();
const isDark = computed({
  get() {
    return colorMode.value === "dark";
  },
  set() {
    colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
  },
});

const head = useLocaleHead({
  addDirAttribute: true,
  identifierAttribute: "id",
  addSeoAttributes: true,
});

const signOut = async () => {
  const { error } = await supabase.auth.signOut();
  if (error) console.log(error);
  navigateTo(localePath("/auth"));
};

const { data: navigation } = await useAsyncData("navigation", () =>
  fetchContentNavigation()
);
const { data: files } = useLazyFetch<ParsedContent[]>("/api/search.json", {
  default: () => [],
  server: true,
});

const links = computed(() => [
  {
    label: t("nav.docs"),
    to: localePath("/docs"),
    icon: "i-ph-book",
  },
  {
    label: t("nav.train"),
    to: localePath("/train"),
    icon: "i-ph-yin-yang",
  },

  {
    label: t("nav.result"),
    to: localePath("/result"),
    icon: "i-ph-chart-bar",
  },
]);

provide("signOut", signOut);
provide("navigation", navigation);
provide("files", files);
provide("links", links);
</script>