docs: star count docs (#3037)

docs/.vitepress/activity.data.ts

@@ -0,0 +1,20 @@
+declare const data: { stars: number; pulls: number };
+export { data };
+
+export default {
+  async load() {
+    const urls = [
+      "https://api.github.com/repos/amir20/dozzle",
+      "https://hub.docker.com/v2/namespaces/amir20/repositories/dozzle",
+    ];
+
+    const responses = await Promise.all(urls.map((url) => fetch(url).then((res) => res.json())));
+
+    const data = {
+      stars: responses[0].stargazers_count,
+      pulls: responses[1].pull_count,
+    };
+
+    return data;
+  },
+};

docs/.vitepress/config.ts

@@ -1,14 +1,9 @@
 import { createRequire } from "module";
 import { defineConfig } from "vitepress";
-import { createWriteStream } from "node:fs";
-import { resolve } from "node:path";
-import { SitemapStream, streamToPromise } from "sitemap";
 
 const require = createRequire(import.meta.url);
 const pkg = require("dozzle/package.json");
 
-const links = [] as { url: string; lastmod?: number }[];
-
 export default defineConfig({
   lang: "en-US",
   title: "Dozzle",

docs/.vitepress/theme/components/BuyMeCoffee.vue

@@ -1,10 +1,11 @@
 <script setup></script>
 
 <template>
-  <div class="content">
-    <a href="https://www.buymeacoffee.com/amirraminfar"
-      ><img
+  <div>
+    <a href="https://www.buymeacoffee.com/amirraminfar">
+      <img
         src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=amirraminfar&button_colour=FFDD00&font_colour=000000&font_family=Poppins&outline_colour=000000&coffee_colour=ffffff"
-    /></a>
+      />
+    </a>
   </div>
 </template>

docs/.vitepress/theme/components/Counter.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+const defaultFormatter = (value: number) => {
+  return value.toLocaleString();
+};
+
+const {
+  start,
+  end,
+  duration,
+  formatter = defaultFormatter,
+} = defineProps<{
+  start: number;
+  end: number;
+  duration: number;
+  formatter?: (value: number) => string;
+}>();
+
+const text = ref(0);
+
+onMounted(() => {
+  let startTimestamp: number | undefined = undefined;
+
+  const step = (timestamp: number) => {
+    if (!startTimestamp) startTimestamp = timestamp;
+    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+
+    text.value = Math.floor(progress * (end - start) + start);
+    if (progress < 1) {
+      requestAnimationFrame(step);
+    }
+  };
+
+  requestAnimationFrame(step);
+});
+
+const formmated = computed(() => formatter(text.value));
+</script>
+
+<template>
+  {{ formmated }}
+</template>

docs/.vitepress/theme/components/HeroVideo.vue

@@ -28,7 +28,7 @@ onUnmounted(() => {
 
 <template>
   <div
-    class="border-rounded-md border-light-100 dark:border-dark-50 overflow-hidden border border-solid bg-[#eee] drop-shadow-md dark:bg-[#222]"
+    class="overflow-hidden rounded-md border border-solid border-gray-200 bg-[#eee] text-[red] drop-shadow-md dark:border-gray-900 dark:bg-[#222]"
   >
     <video muted loop autoplay playsinline poster="../media/poster-dark.png" v-if="isDark">
       <source src="../media/dozzle-dark.mp4" type="video/mp4" />

docs/.vitepress/theme/components/Stats.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { data } from "../../activity.data.ts";
+import Counter from "./Counter.vue";
+</script>
+
+<template>
+  <div class="stats mt-10 shadow">
+    <div class="stat w-40">
+      <div class="stat-title">Github Stars</div>
+      <div class="stat-value">
+        <Counter :start="0" :end="data.stars" :duration="1000" :formatter="(value) => (value / 1e3).toFixed(1) + 'K'" />
+      </div>
+    </div>
+
+    <div class="stat !border-l-0">
+      <div class="stat-title">Docker Pulls</div>
+      <div class="stat-value">
+        <Counter :start="0" :end="data.pulls" :duration="1000" :formatter="(value) => (value / 1e6).toFixed(0) + 'M'" />
+      </div>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/index.ts

@@ -1,17 +1,19 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from "vue";
 import Theme from "vitepress/theme";
-import "uno.css";
+import "@fontsource-variable/playfair-display";
 import "./style.css";
 import HeroVideo from "./components/HeroVideo.vue";
 import BuyMeCoffee from "./components/BuyMeCoffee.vue";
+import Stats from "./components/Stats.vue";
 
 export default {
   ...Theme,
   Layout: () => {
     return h(Theme.Layout, null, {
       "home-hero-image": () => h(HeroVideo),
       "sidebar-nav-after": () => h(BuyMeCoffee),
+      "home-hero-actions-after": () => h(Stats),
     });
   },
   enhanceApp({ app, router, siteData }) {},

docs/.vitepress/theme/style.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /**
  * Customize default theme styling by overriding CSS variables:
  * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
@@ -145,13 +149,13 @@
 
 .VPHomeHero .name {
   @apply text-7xl font-light;
-  font-family: "Playfair Display", serif;
+  font-family: "Playfair Display Variable", serif;
 }
 
 .VPNavBarTitle .title {
   @apply text-3xl font-light;
   color: var(--bar-title-color);
-  font-family: "Playfair Display", serif;
+  font-family: "Playfair Display Variable", serif;
 }
 
 .VPHero .container .image {

docs/components.d.ts

@@ -7,10 +7,11 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    BrowserWindow: typeof import('./.vitepress/theme/components/BrowserWindow.vue')['default']
     BuyMeCoffee: typeof import('./.vitepress/theme/components/BuyMeCoffee.vue')['default']
+    Counter: typeof import('./.vitepress/theme/components/Counter.vue')['default']
     HeroVideo: typeof import('./.vitepress/theme/components/HeroVideo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Stats: typeof import('./.vitepress/theme/components/Stats.vue')['default']
   }
 }

docs/index.md

@@ -18,8 +18,8 @@ hero:
 features:
   - title: Real-time Logging & Monitoring
     details: Captures real-time Docker container logs, enabling quick and efficient issue diagnosis.
-  - title: Easy Installation and Use
-    details: Offers a quick, simple setup and minimal configuration, making it user-friendly for those unfamiliar with Docker.
+  - title: Docker Swarm Support
+    details: Supports Docker services, allowing you to monitor logs from multiple nodes in a single interface.
   - title: Multi-host Support
     details: UI support connecting to multiple remote hosts with a simple drop down to choose between different hosts.
   - title: No Database Required

docs/package.json

@@ -3,10 +3,9 @@
   "type": "module",
   "name": "docs",
   "devDependencies": {
-    "@unocss/preset-typography": "^0.61.0",
-    "@unocss/reset": "^0.61.0",
-    "@unocss/transformer-directives": "^0.61.0",
-    "dozzle": "workspace:*",
-    "unocss": "^0.61.0"
+    "dozzle": "workspace:*"
+  },
+  "dependencies": {
+    "@fontsource-variable/playfair-display": "^5.0.25"
   }
 }