We've come a long way since we implemented our global header component. It's time to make another push to start filling out the homepage a bit more. This post is going to cover implementing the other components on the homepage that won't require us to go into connected mode and leverage GraphQL to implement.

Here's what we'll build out:

  • 75/25 Row: This component will contain two placeholders that we can position content in
  • Section Title: Will be placed in the main content well, will be used to display some header text "From the Firehose"
  • Callout: A sidebar component that will be used to display a little "About Me" content, body of this component will be Rich Text.
  • Featured Links: Another sidebar component that will display some external links that might be useful for linking to the authors Twitter or GitHub pages.

After we implement these components, our page will look like this:

Let's get started. I'm going to gloss over initializing components and just link to them and describe them at a high level at this point. We've covered the basics of component building in previous posts. I'll link to those related posts as I go through in case you're interested in a refresher.

Clean Up

When we implemented our Featured Post component I used some external placeholder images and used them as the src property in the YML definition. This worked great while the JSS was already running but when starting cold via jss start, it would generate some errors. I pulled down those images and put them into the media directory in the repository so we can link to them properly.

Source changes:

75/25 Row

Same basic structure as the row component we built out in the last homepage posting. We'll be using different class names and placeholder names but all of the same principles apply here.

Source changes:

Section Title

Instead of just building this into our row component, I decided to make it generic and just insert into the placeholder. We'll be using this elsewhere so it'll be nice to have it be flexible as well. Pretty generic component overall. We'll just using the Text field to display the title:

import React from 'react';
import { Text } from '@sitecore-jss/sitecore-jss-react';

const SectionTitle = ({ fields }) => (
  <h3 className="pb-4 mb-4 font-italic border-bottom">
    <Text field={fields.title} />
  </h3>
);

export default SectionTitle;

Source changes:

Callout

This component will just contain two fields, a title and body field. It's the first time we'll be using the RichText field during this implementation. JSS has us covered though. Our React component should look like this:

import React from 'react';
import { Text, RichText } from '@sitecore-jss/sitecore-jss-react';

const Callout = ({fields}) => (
  <div className="p-4 mb-3 bg-light rounded">
    <h4 className="font-italic">
      <Text field={fields.title} />
    </h4>
    <RichText field={fields.body} className="mb-0" />
  </div>
);

export default Callout;

Source changes:

We explored rendering a list of links in the earlier post about rendering the global header. Some new content items we added to the tree to allow selection of which links to display. The resulting component should look as follows:

import React from 'react';
import { Text, Link } from '@sitecore-jss/sitecore-jss-react';

const FeaturedLinks = ({ fields }) => (
  <div className="p-4">
    <h4 className="font-italic">
      <Text field={fields.title} />
    </h4>
    <ol className="list-unstyled">
      {fields.links.map((listItem, index) => (
        <li key={index}>
          <Link field={listItem.fields.link} />
        </li>
      ))}
    </ol>
  </div>
);

export default FeaturedLinks;

Source changes:

Conclusion

A lot of components got built out in this post using concepts we've covered in previous posts. I thought about splitting this post up but I just wanted to get through them so we can move onto some of the more interesting dynamic components that will involve us going connected and starting the leverage GraphQL to build out some components. I'm looking forward to it.

As always, the full code for this post has been tagged in the GitHub repository.