Announcement: Updating and Maintaining Foundation

[munawar-js]

We updated gatsby-starter-foundation from Gatsby v3 to v4.7 last year, but Gatsby had already moved to v5.8 two years ago.

With @GatsbyJS now part of @Netlify and NetlifyCMS rebranded to @Decap_CMS under PM TechHub.

We are considering to transition our template to a new framework and CMS.

[munawar-js]

Things to consider before the transition.

Tech stack:

• Gatsbyjs on React
• NetlifyCMS with Markdown & JSON, queried with Graphql
• Styling with ThemeUI, Sass, Prismjs(syntax highlighter)

Pages:

• Home bio, picture, social links and blog posts
• Blog with blog posts
  • Blog post
• About
• Contact via Netlify Email

Features:

• Theme mode toggle [Dark & Light]
• Accent color
• Manifest.json
• Sitemap
• Blog posts CRUD via git-based NetlifyCMS
• SEO options
• Open graph
• Twitter cards

Integrations:

• Google Analytics
• Search [elasticlunr]

[charles-hood]

Have you looked at TinaCMS?

[munawar-js]

Yes, I’m exploring TinaCMS. It’s a promising git-based CMS, and its cloud model with a free tier looks appealing for Foundation. The visual editing features are particularly interesting, but I still need to dig deeper to determine if it’s the best fit for us.

Are there any other alternatives you’d recommend considering before we make the switch?

[munawar-js]

Have you looked at TinaCMS?

TinaCMS is not the right fit for our Content Modeling NetlifyCMS Config

[charles-hood]

Seems like Decap CMS may be the way to go then.

[munawar-js]

Yes, Despite lack of updates its pretty solid.

[munawar-js]

Our top priority is to help users smoothly migrate their content and settings from Gatsby to the new framework. This template is intentionally structured with user-friendly migration in mind:

The src/content folder contains all markdown files for pages and posts, while the src/util folder houses configuration files such as dark-theme-colors.json, default-colors.json, site.json, and socialmedia.json.

This organization allows users to easily copy and paste their existing content and settings into the new framework, making the transition as seamless as possible.

[munawar-js]

The core of Foundation revolves around markdown files. In Gatsby, we query this markdown data using GraphQL and pass the resulting props to template files located in the src/templates directory.

Example implementation of index page

[munawar-js]

I’ve been weighing the options between Next.js and Astro for Foundation, and I’m leaning heavily towards Astro. What stands out for me is Astro’s flexibility to work with different frameworks, which is a huge plus. The built-in Markdown support is a game-changer for our content needs, and the super-fast build times make it even more appealing.

Astro’s static-first approach offers excellent scalability with very low build complexity, which means less hassle and more efficiency. Plus, the low maintenance and fast development cycles align perfectly with what we need for Foundation. Overall, Astro seems like the best fit for what we’re aiming to achieve.

[munawar-js]

Check out how simple it is to set up Markdown with Astro! The content is placed in /src/content/pages/index.md, and the templates are in /src/pages/index.astro.

# /src/content/pages/index.md
---
title: "Home Page"
description: "Welcome to my Astro site!"
---

# Hello, Astro!

This is a page generated from Markdown.

# /src/pages/index.astro
---
import content from '../content/pages/index.md';
---

<Layout>
  <h1>{content.frontmatter.title}</h1>
  <p>{content.frontmatter.description}</p>
  <article>
    <Markdown content={content.content} />
  </article>
</Layout>

This setup is super straightforward. Astro’s built-in support for Markdown and its seamless integration with templates makes the whole process incredibly efficient and clean. Just write your Markdown content, import it into your Astro template, and you’re done! No complex configurations or extra dependencies—just simple, fast, and effective development.

[munawar-js]

I made a switch, here what our tech stack looks like

[charles-hood]

So Astro is out of the running?

[munawar-js]

Yes, we are considering it. While Astro is quite user-friendly and offers a vast ecosystem of plugins like Gatsby, it also introduces dependency on third-party updates, which can slow us down. After careful consideration, we’ve decided to go with Next.js instead. It’s a more standardized framework with an excellent developer community, and since it’s based on React, it provides everything we need out of the box without relying heavily on plugins, unlike Astro.