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; + } +}