Skip to content

Commit 4128bfe

Browse files
faizancodesfaizancodes
authored
refactor[landing]: use github api to fetch stars instead of hardcoding (#134)
1 parent 85c1a84 commit 4128bfe

File tree

3 files changed

+120
-84
lines changed

3 files changed

+120
-84
lines changed

‎sim/app/(landing)/github-stars.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Star } from 'lucide-react'
2+
import { GithubIcon } from '@/components/icons'
3+
4+
async function getGitHubStars() {
5+
const response = await fetch('https://api.github.com/repos/simstudioai/sim', {
6+
headers: {
7+
Accept: 'application/vnd.github+json',
8+
'X-GitHub-Api-Version': '2022-11-28',
9+
},
10+
next: { revalidate: 3600 }, // Revalidate every hour
11+
})
12+
13+
if (!response.ok) {
14+
// Return 0 stars if API fails, we don't want to break the UI
15+
return 0
16+
}
17+
18+
const data = await response.json()
19+
return data.stargazers_count
20+
}
21+
22+
export default async function GitHubStars() {
23+
const stars = await getGitHubStars()
24+
25+
return (
26+
<a
27+
href="https://github.com/simstudioai/sim"
28+
className="flex items-center gap-2 text-white/80 hover:text-white/100 p-2 rounded-md group hover:scale-[1.04] transition-colors transition-transform duration-200"
29+
aria-label="GitHub"
30+
target="_blank"
31+
rel="noopener noreferrer"
32+
>
33+
<GithubIcon className="w-[20px] h-[20px]" />
34+
<div className="flex items-center justify-center gap-1">
35+
<span className="text-sm font-medium py-[2px]">{stars}</span>
36+
<Star className="w-3.5 h-3.5 fill-white/80 stroke-none group-hover:fill-white" />
37+
</div>
38+
</a>
39+
)
40+
}

‎sim/app/(landing)/landing.tsx‎

Lines changed: 5 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,14 @@
1-
'use client'
2-
3-
import { Star } from 'lucide-react'
4-
import { GithubIcon } from '@/components/icons'
1+
import GitHubStars from './github-stars'
52
import HeroWorkflowProvider from './hero-workflow'
6-
import { useWindowSize } from './use-window-size'
3+
import NavClient from './nav-client'
74
import WaitlistForm from './waitlist-form'
85

9-
const XIcon = () => (
10-
<svg
11-
data-testid="geist-icon"
12-
height="18"
13-
strokeLinejoin="round"
14-
viewBox="0 0 16 16"
15-
width="18"
16-
className="w-4.5 h-4.5"
17-
style={{ color: 'currentcolor' }}
18-
>
19-
<path
20-
fillRule="evenodd"
21-
clipRule="evenodd"
22-
d="M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z"
23-
fill="currentColor"
24-
></path>
25-
</svg>
26-
)
27-
28-
const DiscordIcon = () => (
29-
<svg
30-
data-testid="geist-icon"
31-
height="18"
32-
strokeLinejoin="round"
33-
viewBox="0 0 16 16"
34-
width="18"
35-
className="w-4.5 h-4.5"
36-
style={{ color: 'currentcolor' }}
37-
>
38-
<path
39-
d="M13.5535 3.01557C12.5023 2.5343 11.3925 2.19287 10.2526 2C10.0966 2.27886 9.95547 2.56577 9.82976 2.85952C8.6155 2.67655 7.38067 2.67655 6.16641 2.85952C6.04063 2.5658 5.89949 2.27889 5.74357 2C4.60289 2.1945 3.4924 2.53674 2.44013 3.01809C0.351096 6.10885 -0.215207 9.12285 0.0679444 12.0941C1.29133 12.998 2.66066 13.6854 4.11639 14.1265C4.44417 13.6856 4.73422 13.2179 4.98346 12.7283C4.51007 12.5515 4.05317 12.3334 3.61804 12.0764C3.73256 11.9934 3.84456 11.9078 3.95279 11.8248C5.21891 12.4202 6.60083 12.7289 7.99997 12.7289C9.39912 12.7289 10.781 12.4202 12.0472 11.8248C12.1566 11.9141 12.2686 11.9997 12.3819 12.0764C11.9459 12.3338 11.4882 12.5524 11.014 12.7296C11.2629 13.2189 11.553 13.6862 11.881 14.1265C13.338 13.6872 14.7084 13.0001 15.932 12.0953C16.2642 8.64968 15.3644 5.66336 13.5535 3.01557ZM5.34212 10.2668C4.55307 10.2668 3.90119 9.55073 3.90119 8.66981C3.90119 7.78889 4.53042 7.06654 5.3396 7.06654C6.14879 7.06654 6.79563 7.78889 6.78179 8.66981C6.76795 9.55073 6.14627 10.2668 5.34212 10.2668ZM10.6578 10.2668C9.86752 10.2668 9.21815 9.55073 9.21815 8.66981C9.21815 7.78889 9.84738 7.06654 10.6578 7.06654C11.4683 7.06654 12.1101 7.78889 12.0962 8.66981C12.0824 9.55073 11.462 10.2668 10.6578 10.2668Z"
40-
fill="currentColor"
41-
></path>
42-
</svg>
43-
)
44-
456
export default function Landing() {
46-
const { width } = useWindowSize()
47-
const isMobile = width !== undefined && width < 640
48-
497
return (
508
<main className="bg-[#020817] relative overflow-x-hidden">
51-
<nav className="fixed top-1 left-0 right-0 z-10 backdrop-blur-sm px-4 py-4">
52-
<div className="max-w-6xl mx-auto flex justify-between items-center">
53-
<div className="text-xl text-white">sim studio</div>
54-
55-
{/* Social media icons */}
56-
<div className={`flex items-center ${isMobile ? 'gap-2' : 'gap-3'}`}>
57-
<a
58-
href="https://x.com/simstudioai"
59-
className="text-white/80 hover:text-white/100 p-2 rounded-md group hover:scale-[1.04] transition-colors transition-transform duration-200"
60-
aria-label="Twitter"
61-
target="_blank"
62-
rel="noopener noreferrer"
63-
>
64-
<XIcon />
65-
</a>
66-
<a
67-
href="https://discord.gg/pQKwMTvNrg"
68-
className="text-white/80 hover:text-white/100 p-2 rounded-md group hover:scale-[1.04] transition-colors transition-transform duration-200"
69-
aria-label="Discord"
70-
target="_blank"
71-
rel="noopener noreferrer"
72-
>
73-
<DiscordIcon />
74-
</a>
75-
<a
76-
href="https://github.com/simstudioai/sim"
77-
className="flex items-center gap-2 text-white/80 hover:text-white/100 p-2 rounded-md group hover:scale-[1.04] transition-colors transition-transform duration-200"
78-
aria-label="GitHub"
79-
target="_blank"
80-
rel="noopener noreferrer"
81-
>
82-
<GithubIcon className="w-[20px] h-[20px]" />
83-
<div className="flex items-center justify-center gap-1">
84-
<span className="text-sm font-medium py-[2px]">56</span>
85-
<Star className="w-3.5 h-3.5 fill-white/80 stroke-none group-hover:fill-white" />
86-
</div>
87-
</a>
88-
</div>
89-
</div>
90-
</nav>
9+
<NavClient>
10+
<GitHubStars />
11+
</NavClient>
9112

9213
<section className="min-h-[100dvh] pt-[134px] md:pt-36 text-white relative">
9314
<div className="absolute inset-0 z-0">

‎sim/app/(landing)/nav-client.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
'use client'
2+
3+
import { useWindowSize } from './use-window-size'
4+
5+
const XIcon = () => (
6+
<svg
7+
data-testid="geist-icon"
8+
height="18"
9+
strokeLinejoin="round"
10+
viewBox="0 0 16 16"
11+
width="18"
12+
className="w-4.5 h-4.5"
13+
style={{ color: 'currentcolor' }}
14+
>
15+
<path
16+
fillRule="evenodd"
17+
clipRule="evenodd"
18+
d="M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z"
19+
fill="currentColor"
20+
></path>
21+
</svg>
22+
)
23+
24+
const DiscordIcon = () => (
25+
<svg
26+
data-testid="geist-icon"
27+
height="18"
28+
strokeLinejoin="round"
29+
viewBox="0 0 16 16"
30+
width="18"
31+
className="w-4.5 h-4.5"
32+
style={{ color: 'currentcolor' }}
33+
>
34+
<path
35+
d="M13.5535 3.01557C12.5023 2.5343 11.3925 2.19287 10.2526 2C10.0966 2.27886 9.95547 2.56577 9.82976 2.85952C8.6155 2.67655 7.38067 2.67655 6.16641 2.85952C6.04063 2.5658 5.89949 2.27889 5.74357 2C4.60289 2.1945 3.4924 2.53674 2.44013 3.01809C0.351096 6.10885 -0.215207 9.12285 0.0679444 12.0941C1.29133 12.998 2.66066 13.6854 4.11639 14.1265C4.44417 13.6856 4.73422 13.2179 4.98346 12.7283C4.51007 12.5515 4.05317 12.3334 3.61804 12.0764C3.73256 11.9934 3.84456 11.9078 3.95279 11.8248C5.21891 12.4202 6.60083 12.7289 7.99997 12.7289C9.39912 12.7289 10.781 12.4202 12.0472 11.8248C12.1566 11.9141 12.2686 11.9997 12.3819 12.0764C11.9459 12.3338 11.4882 12.5524 11.014 12.7296C11.2629 13.2189 11.553 13.6862 11.881 14.1265C13.338 13.6872 14.7084 13.0001 15.932 12.0953C16.2642 8.64968 15.3644 5.66336 13.5535 3.01557ZM5.34212 10.2668C4.55307 10.2668 3.90119 9.55073 3.90119 8.66981C3.90119 7.78889 4.53042 7.06654 5.3396 7.06654C6.14879 7.06654 6.79563 7.78889 6.78179 8.66981C6.76795 9.55073 6.14627 10.2668 5.34212 10.2668ZM10.6578 10.2668C9.86752 10.2668 9.21815 9.55073 9.21815 8.66981C9.21815 7.78889 9.84738 7.06654 10.6578 7.06654C11.4683 7.06654 12.1101 7.78889 12.0962 8.66981C12.0824 9.55073 11.462 10.2668 10.6578 10.2668Z"
36+
fill="currentColor"
37+
></path>
38+
</svg>
39+
)
40+
41+
export default function NavClient({ children }: { children: React.ReactNode }) {
42+
const { width } = useWindowSize()
43+
const isMobile = width !== undefined && width < 640
44+
45+
return (
46+
<nav className="fixed top-1 left-0 right-0 z-10 backdrop-blur-sm px-4 py-4">
47+
<div className="max-w-6xl mx-auto flex justify-between items-center">
48+
<div className="text-xl text-white">sim studio</div>
49+
50+
{/* Social media icons */}
51+
<div className={`flex items-center ${isMobile ? 'gap-2' : 'gap-3'}`}>
52+
<a
53+
href="https://x.com/simstudioai"
54+
className="text-white/80 hover:text-white/100 p-2 rounded-md group hover:scale-[1.04] transition-colors transition-transform duration-200"
55+
aria-label="Twitter"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
>
59+
<XIcon />
60+
</a>
61+
<a
62+
href="https://discord.gg/pQKwMTvNrg"
63+
className="text-white/80 hover:text-white/100 p-2 rounded-md group hover:scale-[1.04] transition-colors transition-transform duration-200"
64+
aria-label="Discord"
65+
target="_blank"
66+
rel="noopener noreferrer"
67+
>
68+
<DiscordIcon />
69+
</a>
70+
{children}
71+
</div>
72+
</div>
73+
</nav>
74+
)
75+
}

0 commit comments

Comments
 (0)