The meat here is in tha default export component in page.tsx
(since my setup asummes app router
),
const Home = async ({ params, searchParams }: HomeProps) => { const articles = await getArticles(); const plasmicData = await PLASMIC.fetchComponentData({ projectId, name: 'Blog', }); const compMeta = plasmicData.entryCompMetas[0]; return ( <> <PlasmicClientRootProvider prefetchedData={plasmicData} pageRoute={compMeta.path} pageParams={compMeta.params} pageQuery={searchParams} > <PlasmicComponent component={compMeta.displayName} componentProps={{ title: 'Posts', description: 'List of posts', actualContent: articles.map((article, index) => ( <PlasmicComponent key={index} component="Button" componentProps={{ title: article.frontMatter.title, link: article.href, children: ( <div> {article.frontMatter.title} / {article.frontMatter.date} </div> ), shape: 'sharp', style: { width: '100%', marginTop: '8px', }, }} /> )), actionItems: ( <PlasmicComponent component="Button" componentProps={{ link: 'https://www.bulletninja.com/', children: <span>← Back home</span>, shape: 'sharp', style: { width: '100%', }, }} /> ), }} /> </PlasmicClientRootProvider> </> ); };
Quick & not so dirty, but easy way that enables some consistency through the use of plasmic.
Learn how to enhance your code snippets with a COPY button in your syntax highlighter. This guide provides a step-by-step solution to implement a user-friendly copy feature, improving code sharing and readability.
Discover the magic behind automated article generation using OpenAI's GPT-4o and how it’s revolutionizing content creation.
Learn how to implement a pre-commit hook in TypeScript that validates and grades content quality using AI, specifically GPT-4o, applies changes, and manages state with markdown metadata.
We use cookies to improve your experience and analyze our traffic. By using our site, you consent to our use of cookies. You can manage your preferences below: