also use dynamic count on landing page (#1085)

Author: Lendemor

pcweb/components/docpage/navbar/buttons/github.py

@@ -9,7 +9,7 @@ def github() -> rx.Component:
         rx.flex(
             get_icon(icon="github_navbar", class_name="shrink-0 !text-slate-9"),
             rx.text(
-                GithubStarState.stars,
+                GithubStarState.stars_short,
                 class_name="font-small",
             ),
             class_name="text-slate-9 flex-row gap-2 hover:bg-slate-3 flex justify-center rounded-[10px] border border-slate-5 bg-slate-1 transition-bg cursor-pointer shadow-large py-0.5 px-3 items-center h-8",

pcweb/github.py

@@ -17,8 +17,7 @@ async def fetch_count():
             with contextlib.suppress(Exception):
                 global REFLEX_STAR_COUNT
                 data = httpx.get(GITHUB_API_URL).json()
-                count = int(data["stargazers_count"])
-                REFLEX_STAR_COUNT = round(count / 1000)
+                REFLEX_STAR_COUNT = int(data["stargazers_count"])
             await asyncio.sleep(3600)
     except asyncio.CancelledError:
         pass
@@ -27,4 +26,8 @@ async def fetch_count():
 class GithubStarState(rx.State):
     @rx.var(cache=True, interval=60)
     def stars(self) -> str:
-        return f"{REFLEX_STAR_COUNT}K"
+        return f"{REFLEX_STAR_COUNT}"
+
+    @rx.var(cache=True, interval=60)
+    def stars_short(self) -> str:
+        return f"{round(REFLEX_STAR_COUNT/1000)}K"

pcweb/pages/index/views/stats.py

@@ -1,6 +1,7 @@
 import reflex as rx
 from pcweb.components.icons import get_icon
-from pcweb.constants import GITHUB_STARS
+from pcweb.github import GithubStarState
+
 
 def stat_card(stat: str, text: str, icon: str, class_name: str = "") -> rx.Component:
     return rx.box(
@@ -10,15 +11,27 @@ def stat_card(stat: str, text: str, icon: str, class_name: str = "") -> rx.Compo
             class_name="flex flex-row gap-2 items-center",
         ),
         rx.text(stat, class_name="font-x-large text-slate-12"),
-        class_name="flex flex-col gap-2 w-full p-10 items-center lg:items-start" + " " + class_name,
+        class_name="flex flex-col gap-2 w-full p-10 items-center lg:items-start"
+        + " "
+        + class_name,
     )
 
 
 def stats_grid() -> rx.Component:
     return rx.box(
-        stat_card(stat=f"{GITHUB_STARS:,}+", text="Stars", icon="star", class_name="lg:!border-l !border-slate-3"),
-        stat_card(stat="150+", text="Contributors", icon="fork"),       
-        stat_card(stat="5,500+", text="Discord", icon="discord_navbar", class_name="lg:!border-r !border-slate-3"),
+        stat_card(
+            stat=f"{GithubStarState.stars:,}",
+            text="Stars",
+            icon="star",
+            class_name="lg:!border-l !border-slate-3",
+        ),
+        stat_card(stat="150+", text="Contributors", icon="fork"),
+        stat_card(
+            stat="5,500+",
+            text="Discord",
+            icon="discord_navbar",
+            class_name="lg:!border-r !border-slate-3",
+        ),
         class_name="grid grid-cols-1 lg:grid-cols-3 gap-0 grid-rows-1 w-full divide-slate-3 lg:divide-x !border-t-0 divide-y lg:divide-y-0",
     )