Nodejs.dev: Refactor: homepage content to be in markdown

[benhalverson]

Summary

The content of the homepage should be in markdown
Similar to #729 and the /learn pages we should load content using graphql and markdown files.
I think this should be in a directory outside of src like the gatsby starter blog demostrates
https://github.com/gatsbyjs/gatsby-starter-blog

Something like /content/homepage/index.md

Motivation

• Follow best practices of Gatsby
• It makes i18n setup easier.
• Allows us to eventually use a headless CMS like Contentful or Netlify CMS.

[tstreamDOTh]

@benhalverson Let me know if you need help on this

[corinty]

I can probably take a crack at this later this week. Still need to get set up locally.

Haven't done a ton of work in Gatsby yet but I've implemented similar stuff in Next.js

[rmleg]

@corinty Let me know if you want help with this! I haven't set this sort of thing up from scratch before, but I have a blog running on the Gatsby starter blog and I think I can figure it out. I should have time this week as well.

[designMoreWeb]

@corinty Let me know if you want help with this! I haven't set this sort of thing up from scratch before, but I have a blog running on the Gatsby starter blog and I think I can figure it out. I should have time this week as well.

Sure that sounds great please take a look at it

[micahgodbolt]

Challenge here will be that the homepage is pretty data/component driven. It'll be 100% yaml frontmatter or json/ts file.

[rmleg]

Challenge here will be that the homepage is pretty data/component driven.

Yeah, I'm definitely seeing that. Which part(s) of the homepage do you envision being in markdown? I would normally expect something like:

<Components />
Main content imported from markdown
<MoreComponents />

Are you thinking something like this?

leafsIllustrationFront: image path here
leafsIllustrationMiddle: image path here
leafsIllustrationBack: image path here
featureImg1: image path here
featureText1: text here
etc
---
[Get Started](/learn)

And then pull all that frontmatter data into the page with GraphQL and inject it into the correct components?

[micahgodbolt]

Yeah, the homepage should be treated as a react component with a set of defined props (strings, arrays of objects etc). This way a translation can provide only the new strings/images/links etc without having to duplicate the components and other non content props.

[rmleg]

Makes sense! I can get started on a markdown file with all the relevant images, alt text, etc in frontmatter and then we can work on pulling the data into the page from there.

[designMoreWeb]

@micahgodbolt @rmleg This is great discussion and steps. If you need any help or have any questions please feel to reach out

[rmleg]

I have this working in my markdown-homepage branch in my fork. I'm currently only pulling strings out of frontmatter--we need to decide how to handle the images.

Here's a summary of what I did:

• Added a content directory at the same level as src.
• Added a homepage directory inside content.
• Added an images directory inside content/homepage and copied all the homepage image files there.
• Created index.md inside content/homepage:
  
  
  
  • Added frontmatter for each of the props that are passed into components in the existing homepage.
  
  
• Added a GraphQL query in src/pages/index.tsx to get all the frontmatter data from the page with slug "homepage". Currently this slug is hardcoded. I had some trouble getting the slug from the page context.
• Added a HomepageData interface to src/types/index.ts and imported it into src/pages/index.tsx. Set up a HomepageProps interface that maps data to HomepageData and updated the Index props accordingly.
  
  
  
  • Note: This is my first time using Typescript so I just copied what I saw had been done for the Learn page.
  
  
• Updated gatsby-node.js to exclude the homepage from its query. This prevents the homepage from showing up in the /learn table of contents.

I think that's everything so far!

As I mentioned above, right now I'm still displaying the images the old way because I wasn't sure what the preference was for importing and displaying images from frontmatter. I have used gatsby-image in the past and I like it, but I didn't want to add a new plugin without checking with y'all first.

Thank you for any and all feedback!

[rmleg]

Hey @benhalverson @designMoreWeb, are you still interested in this issue? Should I make a draft PR of what I have so far?

[designMoreWeb]

Yes please

[rmleg]

K I will try to do that this week!