fetch()
function GithubSponsors({ sponsors }) {
return (
<div>
<h1>If you like what I build, sponsor my work</h1>
<ul>
{sponsors.map((sponsor) => (
<li key={sponsor.id}>
<img src={sponsor.avatar_url} />
</li>
))}
</ul>
<p>Join {sponsors.length} people to support my open source work.</p>
</div>
);
}
function Projects({ sponsors }) {
return (
<div>
{/* ... */}
<GithubSponsors sponsors={sponsors} />
{/* ... */}
</div>
);
}
export const getStaticProps = async () => ...;
export const query = graphql`query { ... }`;
function GithubSponsors({ sponsors }) {
return (
<div>
<h1>If you like what I build, sponsor my work</h1>
<ul>
{sponsors.map((sponsor) => (
<li key={sponsor.id}>
<img src={sponsor.avatar_url} />
</li>
))}
</ul>
<p>Join {sponsors.length} people to support my open source work.</p>
</div>
);
}
function Projects() {
return (
<div>
{/* ... */}
<GithubSponsors />
{/* ... */}
</div>
);
}
function BlogPost() {
return (
<div>
{/* ... */}
<GithubSponsors />
{/* ... */}
</div>
);
}
useStaticQuery();
function GithubSponsors() {
const { sponsors } = useStaticQuery(graphql`
query {
...
}
`);
return (
<div>
<h1>If you like what I build, sponsor my work</h1>
{/* ... */}
</div>
);
}
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/02ba055114f14ef8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-d0ceac4fb78a3613.js"/><script src="/_next/static/chunks/fd9d1056-2821b0f0cabcd8bd.js" async=""></script><script src="/_next/static/chunks/23-2309b8fd26fbddcb.js" async=""></script><script src="/_next/static/chunks/main-app-15aa97dceccc8824.js" async=""></script><title>Create Next App</title><meta name="description" content="Generated by create next app"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/><meta name="next-size-adjust"/><script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script></head>
<body class="__className_aaf875"><main>
<div><h2>Sponsor <!-- -->blenderskool<!-- -->'s work.</h2><div><ul>
<li><img src="https://avatars.githubusercontent.com/u/30949385?s=60&v=4" alt="saurabhdaware"/></li>
<li><img src="https://avatars.githubusercontent.com/u/19529592?s=60&v=4" alt="shivaylamba"/></li>
<li><img src="https://avatars.githubusercontent.com/u/6796491?s=60&v=4" alt="animysore"/></li></ul>
<p>Join <!-- -->5<!-- --> people to support <!-- -->blenderskool<!-- -->'s open source work.</p></div></div>
<div><h2>Sponsor <!-- -->antfu<!-- -->'s work.</h2><div><ul>
<li><img src="https://avatars.githubusercontent.com/u/2841780?s=60&v=4" alt="AnandChowdhary"/></li>
<li><img src="https://avatars.githubusercontent.com/u/34610289?s=60&v=4" alt="MichaelGitArt"/></li>
<li><img src="https://avatars.githubusercontent.com/u/1875256?s=60&v=4" alt="bushuai"/></li></ul>
<p>Join <!-- -->782<!-- --> people to support <!-- -->antfu<!-- -->'s open source work.</p></div></div>
</main><script src="/_next/static/chunks/webpack-d0ceac4fb78a3613.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/css/02ba055114f14ef8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"3:I[5751,[],\"\"]\n7:I[9275,[],\"\"]\n8:I[1343,[],\"\"]\na:I[6130,[],\"\"]\nb:[]\n0:
[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":,
import { getHighlighter } from 'shiki';
async function CodeBlock({ code, language }) {
const highlighter = await getHighlighter({
themes: ['github-light', 'tokyo-night'],
});
const html = await highlighter.codeToHtml(code, {
lang: language,
themes: {
dark: 'tokyo-night',
light: 'github-light',
},
});
return (
<div>
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
);
}
Josh W Comeau
Dan Abramov