Starter Blog Tour

Code base

To see how the Starter Blog project is used in code, check out the template repositories for Next.js and Gatsby. In the starter template, there are 2 places where Plasmic components are integrated.

Configuration

We configure the PlasmicLoader plugin in the global config file, next.config.js for Next.js, and gatsby-config.js for Gatsby.

Homepage component

The Homepage component is wired up in index.js ( Next.js, Gatsby ) as a static route for /.

return (
  <PlasmicLoader
    component={"Homepage"}    componentProps={{
      container: { // Overriding the children for the `container` element        children: posts.map(post => (          <PlasmicLoader            component={"ListItem"}            componentProps={{ // Hydrating slot props with data              title: post.title              date: post.date,              description: post.description || post.excerpt,              href: post.slug,            }}          />        ),      }    }}    providerProps={{
      Screen: null
    }}
  />
)

This code will load the Homepage component with an override prop that sets the children for the container element. If you open the Plasmic project for Starter Blog, you’ll notice an element in the tree named “container”. For more details on how to use overrides, check out the override guide and API reference.

We instantiate a ListItem component for each blog post, to render a list of blog posts. In the Plasmic project, you will also notice slot props for the title, date, and description of a ListItem. For more details on how to use slots, check out the slots guide and API reference.

We also specify a Screen prop in providerProps to make sure that the Screen global variant is properly rendered.

Blog Post component

The blog post component is wired up in blog-post.js ( Next.js Gatsby, ) Note that this template is used to dynamically generate a page per blog post from the markdown backend.

return (
  <PlasmicLoader
    component={"PostPage"}    componentProps={{      postHeader: { // Passing slot data through to the `postHeader` element        postTitle: post.title,        date: post.date,      },      container: { // Overriding the render function for the `container` element        render: () => (          <section            dangerouslySetInnerHTML={{ __html: post.html }}            itemProp="articleBody"          />        )      },      previousPost: { // Overriding props on the `previousPost` element        style: {          visibility: !previous ? "hidden" : "visible",        },        href: previous?.fields?.slug,      },      nextPost: { // Overriding props on the `nextPost` element        style: {          visibility: !next ? "hidden" : "visible",        },        href: next?.fields?.slug,      },    }}    providerProps={{
      Screen: null
    }}
  />
);

In this example, we have 4 named elements in the PostPage component: postHeader, container, previousPost, and nextPost.

postHeader the name for an instance of the PostHeader component in the PostPage component. By naming the element, we can pass slot props directly to the component.

container is the name of a placeholder box we made in Plasmic. By overriding its render function, we can render the generated HTML directly.

previousPost and nextPost are named link elements, which we show or hide depending on whether the post exists.