Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Commit 607f7d6

Browse files
davemooreuwsdavemooreuws
authored
get default star count on build (#676)
1 parent 6ae0c59 commit 607f7d6

File tree

4 files changed

+117
-84
lines changed

4 files changed

+117
-84
lines changed

‎src/components/GitHubStarCount.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
'use client'
22

3+
import { getStarGazers } from '@/lib/stargazers'
34
import clsx from 'clsx'
4-
import React, { useEffect, useState } from 'react'
5+
import React, { FC, useEffect, useState } from 'react'
56

67
const STAR_COUNT_KEY = 'nitric_github_star_count'
78
const STAR_COUNT_TIMESTAMP_KEY = 'nitric_github_star_count_timestamp'
@@ -18,10 +19,16 @@ const formatStarCount = (count: number) => {
1819
return count.toString()
1920
}
2021

21-
const DEFAULT_STAR_COUNT = 1150
22+
interface GitHubStarCountProps {
23+
className: string
24+
defaultStarCount: number
25+
}
2226

23-
const GitHubStarCount = ({ className }: { className: string }) => {
24-
const [starCount, setStarCount] = useState(DEFAULT_STAR_COUNT)
27+
const GitHubStarCount: FC<GitHubStarCountProps> = ({
28+
className,
29+
defaultStarCount,
30+
}) => {
31+
const [starCount, setStarCount] = useState(defaultStarCount)
2532

2633
useEffect(() => {
2734
const fetchStarCount = async () => {
@@ -35,7 +42,7 @@ const GitHubStarCount = ({ className }: { className: string }) => {
3542
cachedTimestamp &&
3643
currentTime - parseInt(cachedTimestamp) < CACHE_DURATION &&
3744
// Ensure cached value is at least the new default value
38-
parseInt(cachedStarCount) >= DEFAULT_STAR_COUNT
45+
parseInt(cachedStarCount) >= defaultStarCount
3946
) {
4047
setStarCount(JSON.parse(cachedStarCount))
4148
} else {

‎src/components/layout/BaseLayout.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
1-
import Link from 'next/link'
2-
31
import { Footer } from '@/components/Footer'
42
import { Header } from '@/components/layout/Header'
5-
import { Logo } from '@/components/Logo'
63
import { Navigation } from '@/components/nav/Navigation'
4+
import { getStarGazers } from '@/lib/stargazers'
75

8-
const experimentalRuntimes = ['go', 'dart']
9-
10-
const v0Runtimes = ['csharp', 'jvm']
6+
export async function BaseLayout({ children }: React.PropsWithChildren) {
7+
const defaultStarCount = await getStarGazers()
118

12-
export function BaseLayout({ children }: React.PropsWithChildren) {
139
return (
1410
<div className="w-full lg:ml-72 xl:ml-80">
1511
<header className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex">
1612
<div className="contents lg:pointer-events-auto lg:mt-[calc(var(--header-height))] lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:px-6 lg:pb-8 lg:pt-4 lg:dark:border-white/10 xl:w-80">
17-
<Header />
13+
<Header defaultStarCount={defaultStarCount} />
1814

1915
<Navigation className="hidden lg:block" />
2016
</div>

‎src/components/layout/Header.tsx‎

Lines changed: 80 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -43,83 +43,92 @@ function TopLevelNavItem({
4343
)
4444
}
4545

46-
export const Header = forwardRef<
47-
React.ElementRef<'div'>,
48-
React.ComponentPropsWithoutRef<typeof motion.div>
49-
>(function Header({ className, ...props }, ref) {
50-
let { isOpen: mobileNavIsOpen } = useMobileNavigationStore()
51-
let isInsideMobileNavigation = useIsInsideMobileNavigation()
46+
interface HeaderProps
47+
extends React.ComponentPropsWithoutRef<typeof motion.div> {
48+
defaultStarCount?: number
49+
}
5250

53-
let { scrollY } = useScroll()
54-
let bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9])
55-
let bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8])
51+
export const Header = forwardRef<React.ElementRef<'div'>, HeaderProps>(
52+
function Header({ className, defaultStarCount, ...props }, ref) {
53+
let { isOpen: mobileNavIsOpen } = useMobileNavigationStore()
54+
let isInsideMobileNavigation = useIsInsideMobileNavigation()
5655

57-
return (
58-
<motion.div
59-
ref={ref}
60-
className={clsx(
61-
className,
62-
'fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:z-30 lg:px-8',
63-
!isInsideMobileNavigation && 'backdrop-blur-sm dark:backdrop-blur',
64-
isInsideMobileNavigation
65-
? 'bg-white dark:bg-background'
66-
: 'bg-white/[var(--bg-opacity-light)] dark:bg-background/[var(--bg-opacity-dark)]',
67-
)}
68-
style={
69-
{
70-
'--bg-opacity-light': bgOpacityLight,
71-
'--bg-opacity-dark': bgOpacityDark,
72-
} as any
73-
}
74-
>
75-
<div
56+
let { scrollY } = useScroll()
57+
let bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9])
58+
let bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8])
59+
60+
return (
61+
<motion.div
62+
ref={ref}
7663
className={clsx(
77-
'absolute inset-x-0 top-full h-px transition',
78-
(isInsideMobileNavigation || !mobileNavIsOpen) &&
79-
'bg-gray-800/7.5 dark:bg-white/7.5',
64+
className,
65+
'fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:z-30 lg:px-8',
66+
!isInsideMobileNavigation && 'backdrop-blur-sm dark:backdrop-blur',
67+
isInsideMobileNavigation
68+
? 'bg-white dark:bg-background'
69+
: 'bg-white/[var(--bg-opacity-light)] dark:bg-background/[var(--bg-opacity-dark)]',
8070
)}
81-
/>
82-
<Link href="/" aria-label="Home" className="hidden lg:block">
83-
<Logo className="h-6" />
84-
</Link>
85-
86-
<div className="flex items-center gap-5 lg:hidden">
87-
<MobileNavigation />
88-
<Link href="/" aria-label="Home">
71+
style={
72+
{
73+
'--bg-opacity-light': bgOpacityLight,
74+
'--bg-opacity-dark': bgOpacityDark,
75+
} as any
76+
}
77+
>
78+
<div
79+
className={clsx(
80+
'absolute inset-x-0 top-full h-px transition',
81+
(isInsideMobileNavigation || !mobileNavIsOpen) &&
82+
'bg-gray-800/7.5 dark:bg-white/7.5',
83+
)}
84+
/>
85+
<Link href="/" aria-label="Home" className="hidden lg:block">
8986
<Logo className="h-6" />
9087
</Link>
91-
</div>
92-
<div className="flex items-center gap-5">
93-
<nav className="hidden lg:block">
94-
<ul role="list" className="flex items-center gap-8">
95-
<TopLevelNavItem
96-
parentHref="/get-started/foundations"
97-
href="/get-started/foundations/why-nitric"
98-
>
99-
Foundations
100-
</TopLevelNavItem>
101-
<TopLevelNavItem href="/guides">Guides</TopLevelNavItem>
102-
<li>
103-
<Search />
104-
</li>
10588

106-
<TopLevelNavItem
107-
className="group flex items-center"
108-
rel="noreferrer noopener"
109-
href="https://github.com/nitrictech/nitric"
110-
>
111-
<GitHubIcon className="dark:fill-gray h-5 w-5 fill-current" />
112-
<GitHubStarCount className="ml-2 text-inherit" />
113-
</TopLevelNavItem>
114-
</ul>
115-
</nav>
116-
<div className="flex items-center gap-4">
117-
<div className="lg:hidden">
118-
<Search />
89+
<div className="flex items-center gap-5 lg:hidden">
90+
<MobileNavigation />
91+
<Link href="/" aria-label="Home">
92+
<Logo className="h-6" />
93+
</Link>
94+
</div>
95+
<div className="flex items-center gap-5">
96+
<nav className="hidden lg:block">
97+
<ul role="list" className="flex items-center gap-8">
98+
<TopLevelNavItem
99+
parentHref="/get-started/foundations"
100+
href="/get-started/foundations/why-nitric"
101+
>
102+
Foundations
103+
</TopLevelNavItem>
104+
<TopLevelNavItem href="/guides">Guides</TopLevelNavItem>
105+
<li>
106+
<Search />
107+
</li>
108+
109+
<TopLevelNavItem
110+
className="group flex items-center"
111+
rel="noreferrer noopener"
112+
href="https://github.com/nitrictech/nitric"
113+
>
114+
<GitHubIcon className="dark:fill-gray h-5 w-5 fill-current" />
115+
{typeof defaultStarCount === 'number' && (
116+
<GitHubStarCount
117+
defaultStarCount={defaultStarCount}
118+
className="ml-2 text-inherit"
119+
/>
120+
)}
121+
</TopLevelNavItem>
122+
</ul>
123+
</nav>
124+
<div className="flex items-center gap-4">
125+
<div className="lg:hidden">
126+
<Search />
127+
</div>
128+
<ThemeToggle />
119129
</div>
120-
<ThemeToggle />
121130
</div>
122-
</div>
123-
</motion.div>
124-
)
125-
})
131+
</motion.div>
132+
)
133+
},
134+
)

‎src/lib/stargazers.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const DEFAULT_STARGAZERS = 1250
2+
3+
export const getStarGazers = async (): Promise<number> => {
4+
try {
5+
// on next < 15.x fetch will force-cache by default
6+
const response = await fetch(
7+
'https://api.github.com/repos/nitrictech/nitric',
8+
)
9+
if (!response.ok) {
10+
console.error('Error fetching star count:', response.statusText)
11+
12+
return DEFAULT_STARGAZERS
13+
}
14+
15+
const repoData = await response.json()
16+
return repoData.stargazers_count
17+
} catch (e) {
18+
console.error('Error fetching star count:', e)
19+
return DEFAULT_STARGAZERS
20+
}
21+
}

0 commit comments

Comments
 (0)