diff --git a/app/components/landingpage/LandingNavbar.tsx b/app/components/landingpage/LandingNavbar.tsx
index ffa0b35..b77b5a4 100644
--- a/app/components/landingpage/LandingNavbar.tsx
+++ b/app/components/landingpage/LandingNavbar.tsx
@@ -3,7 +3,8 @@ import clsx from "clsx";
import ExtLink from "~/components/ExtLink";
import type { ReactNode } from "react";
import React from "react";
-import { LinkButton } from "~/components/Button";
+import { Button, LinkButton } from "~/components/Button";
+import { GitHubIcon } from "../Icons";
type LinkProps = {
to: string;
@@ -50,27 +51,40 @@ const NavLink = (props: NavLinkProps) => {
);
};
-export default function LandingNavbar() {
+export default function LandingNavbar({ githubStars }: { githubStars: number | null }) {
+ const formatNumber = (number: number) => {
+ return new Intl.NumberFormat("en", {
+ notation: "compact",
+ compactDisplay: "short",
+ maximumFractionDigits: 1, // Adjust for desired decimal places
+ }).format(number);
+ };
+
return (
-
+

+
Documentation
+
Contact us
-
Documentation
-
Contact us
- {/*
*/}
- {/* GitHub*/}
- {/*
*/}
- {/*
*/}
+
+
+
diff --git a/app/routes/_landingpage.tsx b/app/routes/_landingpage.tsx
index cfb4ef9..047d68d 100644
--- a/app/routes/_landingpage.tsx
+++ b/app/routes/_landingpage.tsx
@@ -1,9 +1,10 @@
import LandingNavbar from "~/components/landingpage/LandingNavbar";
import Container from "~/components/Container";
-import { HeadersFunction } from "@remix-run/node";
-import { Outlet } from "@remix-run/react";
+import { HeadersFunction, json } from "@remix-run/node";
+import { Outlet, useLoaderData } from "@remix-run/react";
import Footer from "~/components/landingpage/Footer";
+import { getGitHubStars } from "../services/github.server";
export const headers: HeadersFunction = () => {
/*
@@ -39,11 +40,17 @@ export const headers: HeadersFunction = () => {
};
};
+export const loader = async () => {
+ const githubStars = await getGitHubStars();
+ return json({ githubStars });
+};
+
export default function LandingRootRoute() {
+ const { githubStars } = useLoaderData
();
return (
-
+
diff --git a/app/services/github.server.ts b/app/services/github.server.ts
new file mode 100644
index 0000000..0781883
--- /dev/null
+++ b/app/services/github.server.ts
@@ -0,0 +1,36 @@
+interface GitHubRepoResponse {
+ stargazers_count: number;
+}
+
+const CACHE_DURATION = 1; // 1 hour in milliseconds
+
+let cachedStars: number | null = null;
+let lastFetchTime: number | null = null;
+
+export async function getGitHubStars(): Promise {
+ const now = Date.now();
+
+ if (
+ cachedStars !== null &&
+ lastFetchTime !== null &&
+ now - lastFetchTime < CACHE_DURATION
+ ) {
+ return cachedStars;
+ }
+
+ try {
+ const resp = await fetch(`https://api.github.com/repos/jetkvm/kvm`);
+
+ if (!resp.ok) {
+ throw new Error(`GitHub API error: ${resp.status}`);
+ }
+
+ const data = (await resp.json()) as GitHubRepoResponse;
+ cachedStars = data.stargazers_count;
+ lastFetchTime = now;
+ return cachedStars;
+ } catch (error) {
+ console.error("Failed to fetch GitHub stars:", error);
+ return cachedStars ?? null;
+ }
+}