1  <template>
 2    <main>
 3      <div class="container">
 4        <div class="numbers">
 5          <div class="item">
 6            <p>total hours</p>
 7            <h2>{{ stats?.totalHours }}</h2>
 8          </div>
 9          <div class="item">
10            <p>total heartbeats</p>
11            <h2>{{ stats?.totalHeartbeats }}</h2>
12          </div>
13          <div class="item">
14            <p>total users</p>
15            <h2>{{ stats?.totalUsers }}</h2>
16          </div>
17        </div>
18        <div class="top">
19          <div class="item">
20            <p>top editor</p>
21            <h2>{{ stats?.topEditor }}</h2>
22          </div>
23          <div class="item">
24            <p>top language</p>
25            <h2>{{ stats?.topLanguage }}</h2>
26          </div>
27          <div class="item">
28            <p>top os</p>
29            <h2>{{ stats?.topOS }}</h2>
30          </div>
31        </div>
32      </div>
33    </main>
34  </template>
35  
36  <script setup lang="ts">
37  const { data: stats } = await useFetch("/api/public/stats");
38  
39  useSeoMeta({
40    title: "Ziit - Instance Statistics",
41    description: "View instance statistics on Ziit.",
42    ogTitle: "Ziit - Instance Statistics",
43    ogDescription: "View instance statistics on Ziit.",
44    ogImage: "https://ziit.app/logo.webp",
45    ogUrl: "https://ziit.app/stats",
46    ogSiteName: "Ziit",
47    twitterTitle: "Ziit - Instance Statistics",
48    twitterDescription: "View instance statistics on Ziit.",
49    twitterImage: "https://ziit.app/logo.webp",
50    twitterCard: "summary",
51    twitterCreator: "@pandadev_",
52    twitterSite: "@pandadev_",
53    author: "PandaDEV",
54  });
55  
56  useHead({
57    htmlAttrs: { lang: "en" },
58    link: [
59      {
60        rel: "canonical",
61        href: "https://ziit.app/stats",
62      },
63      {
64        rel: "icon",
65        type: "image/ico",
66        href: "/favicon.ico",
67      },
68    ],
69    script: [
70      {
71        type: "application/ld+json",
72        innerHTML: JSON.stringify({
73          "@context": "https://schema.org",
74          "@type": "WebPage",
75          name: "Ziit - Instance Statistics",
76          url: "https://ziit.app/stats",
77          description: "View instance statistics on Ziit.",
78        }),
79      },
80    ],
81  });
82  </script>
83  
84  <style lang="scss">
85  @use "~~/styles/stats.scss";
86  </style>