Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature: integrate marketing copy with home page #164

Merged
merged 5 commits into from
Oct 14, 2020
Merged

feature: integrate marketing copy with home page #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9168e9e
feature (#92): integrate marketing copy with home page
bencodezen Oct 13, 2020
b496ff4
feature (#92): update marketing copy schema to focus on content and id
bencodezen Oct 14, 2020
c5a7fda
refactor (#92): create util for loadmdx helper
bencodezen Oct 14, 2020
968c9c8
refactor (#92): create helper for mdx client function
bencodezen Oct 14, 2020
1ee0ece
refactor (#92): allow global import of components in mdx
bencodezen Oct 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 4 additions & 7 deletions backend/schemas/marketingCopy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,16 @@ export default {
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
name: 'id',
title: 'ID',
type: 'string',
description:
'Define a unique identifier for this content. Example: `home-hero`',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

context for the @netlify/developer-experience team: our reasoning here is to treat this more like localization where you set up copy with a key in the code. this is necessary because our copy on the site doesn't follow the standard "one big block of content" model, so we need multiple copy blocks per page

},
{
name: 'content',
title: 'Content',
type: 'markdown',
},
{
name: 'pagePath',
title: 'Page Path',
type: 'string',
},
],
};
25 changes: 17 additions & 8 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
import { loadMdxContent } from '@util/mdxServer';
import { renderMdxContent } from '@util/mdxClient';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is two files because of vercel/next.js#16153


import Layout from '@components/Layout';
import HomeHero from '@components/HomeHero';
import MissionCard from '@components/MissionCard';
import { useMissionsState } from '@context/missions';

export default function Home() {
export default function Home({ content }) {
const { missions } = useMissionsState();

const pageContent = renderMdxContent(content);

return (
<Layout navtheme="light">
<div>
<HomeHero />

<section className="margintop-lg">
<div className="sectioncontain">
<h2>Missions</h2>
<p>
Here in Mission Control, you'll find missions covering all sorts
of web development and Jamstack topics.
</p>
</div>
<div className="sectioncontain">{pageContent}</div>

<div className="row sectioncontain">
{missions.map((mission, index) => (
Expand All @@ -30,3 +29,13 @@ export default function Home() {
</Layout>
);
}

export async function getStaticProps() {
const renderedContent = await loadMdxContent('jamstack-mission-control');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we rename this to something like loadCopyBlock or something more outcome-driven vs. implementation-driven?


return {
props: {
content: renderedContent,
},
};
}
6 changes: 6 additions & 0 deletions src/util/mdxClient.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import hydrate from 'next-mdx-remote/hydrate';
import components from '@util/mdxCustomComponents';

export const renderMdxContent = (content) => {
return hydrate(content, { components });
};
5 changes: 5 additions & 0 deletions src/util/mdxCustomComponents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import Aside from '@components/mdx/Aside';

export default {
Aside,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for @netlify/developer-experience: we can create custom components for use in marketing copy as long as we register them here

to use this component, we can do the following in Sanity's content area:

This is some content.

<Aside>

This is the content that should appear inside this custom component.

</Aside>

More content!

NOTE: the line breaks are significant here! without the extra line breaks, the text inside the custom component won't be parsed as Markdown

};
26 changes: 26 additions & 0 deletions src/util/mdxServer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import renderToString from 'next-mdx-remote/render-to-string';
import { sanityQuery } from '@util/sanity';
import components from '@util/mdxCustomComponents';

export const loadMdxContent = async (contentId) => {
const data = await sanityQuery({
query: `
query($contentId: String!) {
allMarketingCopy(where: { id: { eq: $contentId } }) {
content
}
}
`,
variables: {
contentId,
},
});

const [pageData] = data.allMarketingCopy;

const renderedContent = await renderToString(pageData.content, {
components,
});

return renderedContent;
};