src/pages setup

.nvmrc

@@ -1 +0,0 @@
-18

astro.config.mjs

@@ -1,4 +1,8 @@
-import { defineConfig } from 'astro/config'
+import { defineConfig } from 'astro/config';
+
+import react from "@astrojs/react";
 
 // https://astro.build/config
-export default defineConfig({})
+export default defineConfig({
+  integrations: [react()]
+});

package-lock.json

@@ -73,7 +73,7 @@
         "typescript-plugin-css-modules": "^5.0.1"
       },
       "engines": {
-        "node": "18"
+        "node": ">=16"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {

package.json

@@ -93,7 +93,7 @@
     "typescript-plugin-css-modules": "^5.0.1"
   },
   "engines": {
-    "node": "18"
+    "node": ">=16"
   },
   "repository": {
     "type": "git",

src/content/config.ts

@@ -0,0 +1,22 @@
+import { defineCollection, z } from 'astro:content'
+
+const articles = defineCollection({
+  type: 'content', // v2.5.0 and later
+  // Type-check frontmatter using a schema
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    // Transform string to Date object
+    date: z
+      .string()
+      .or(z.date())
+      .transform((val) => new Date(val)),
+    updated: z
+      .string()
+      .optional()
+      .transform((str) => (str ? new Date(str) : undefined)),
+    image: z.string().optional()
+  })
+})
+
+export const collections = { articles }

src/pages/404/404.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { Link, PageProps } from 'gatsby'
-import HeadMeta, { HeadMetaProps } from '../components/atoms/HeadMeta'
-import Page from '../components/templates/Page'
+import HeadMeta, { HeadMetaProps } from '../../components/atoms/HeadMeta'
+import Page from '../../components/templates/Page'
 import * as styles from './404.module.css'
 
 const meta: Partial<HeadMetaProps> = {

src/pages/[...slug].astro

@@ -0,0 +1,18 @@
+---
+import { getCollection } from 'astro:content';
+
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+  const articles = await getCollection('articles');
+  return articles.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}
+
+// 2. For your template, you can get the entry directly from the prop
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+
+<h1>{entry.data.title}</h1>
+<Content />

src/pages/__tests__/404.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import NotFound from '../404'
+import NotFound from '../404/404'
 
 describe('/404', () => {
   it('renders without crashing', () => {

src/pages/__tests__/tags.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Tags from '../tags'
+import Tags from '../tags/tags'
 
 describe('/tags', () => {
   const data = {

src/pages/tags/tags.tsx

@@ -1,8 +1,8 @@
 import React, { ReactElement } from 'react'
 import { PageProps, graphql } from 'gatsby'
-import HeadMeta, { HeadMetaProps } from '../components/atoms/HeadMeta'
-import Tag from '../components/atoms/Tag'
-import Page from '../components/templates/Page'
+import HeadMeta, { HeadMetaProps } from '../../components/atoms/HeadMeta'
+import Tag from '../../components/atoms/Tag'
+import Page from '../../components/templates/Page'
 import * as styles from './tags.module.css'
 
 const meta: Partial<HeadMetaProps> = {

src/pages/thanks/thanks.tsx

@@ -2,11 +2,11 @@ import React, { ReactElement } from 'react'
 import { HeadProps } from 'gatsby'
 import { WagmiConfig } from 'wagmi'
 import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
-import { chains, theme, wagmiConfig } from '../helpers/rainbowkit'
-import Copy from '../components/atoms/Copy'
-import Meta, { HeadMetaProps } from '../components/atoms/HeadMeta'
-import Icon from '../components/atoms/Icon'
-import { useSiteMetadata } from '../hooks/useSiteMetadata'
+import { chains, theme, wagmiConfig } from '../../helpers/rainbowkit'
+import Copy from '../../components/atoms/Copy'
+import Meta, { HeadMetaProps } from '../../components/atoms/HeadMeta'
+import Icon from '../../components/atoms/Icon'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 import * as styles from './thanks.module.css'
 
 const meta: Partial<HeadMetaProps> = {
@@ -14,7 +14,7 @@ const meta: Partial<HeadMetaProps> = {
 }
 
 const Web3Donation = React.lazy(
-  () => import('../components/molecules/Web3Donation')
+  () => import('../../components/molecules/Web3Donation')
 )
 
 function Coin({ address, title }: { address: string; title: string }) {

tsconfig.json

@@ -1,8 +1,13 @@
 {
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
-    "jsx": "react",
-    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      }
+    ],
+    "jsxImportSource": "react"
   },
   "exclude": ["node_modules", "public", "dist", "*.js"],
   "include": ["./*.ts", "./src/**/*", "./scripts/*.ts", "./.jest/**/*"]