Add basic markdown rendering for about-us page

src/App.tsx

@@ -1,3 +1,25 @@
+import {
+  lazy,
+  LocationProvider,
+  ErrorBoundary,
+  Router,
+  Route,
+} from 'preact-iso'
+
+import aboutUsUrl from './routes/about-us.md'
+import { renderMarkdownRoute } from './utils/renderMarkdownRoute'
+
+const AboutUs = lazy(() => renderMarkdownRoute(aboutUsUrl))
+
 export default function App() {
-  return <div>Hello World!</div>
+  return (
+    <LocationProvider>
+      <ErrorBoundary>
+        <Router>
+          <Route path="/about-us" component={AboutUs} />
+          <Route default component={() => 'Not found'} />
+        </Router>
+      </ErrorBoundary>
+    </LocationProvider>
+  )
 }

src/modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const url: string
+  export default url
+}

src/routes/about-us.md

@@ -0,0 +1,22 @@
+---
+title: About Us
+excerpt: SeattleJS is a safe and inclusive event for everyone
+---
+
+![SeattleJS at the Collective](/_public/images/seattlejs-march-2022.jpg)
+
+SeattleJS is the largest JavaScript and web developer meetup in Seattle.
+
+We are an inclusive community and welcome everyone, including folks who are just getting started in tech.
+
+Our mission is to help folks:
+
+<i class="fa-solid fa-battery-bolt"></i> Level up their skills
+
+<i class="fa-solid fa-handshake-simple"></i> Grow their network
+
+<i class="fa-solid fa-briefcase"></i> Get connected to job opportunities
+
+<i class="fa-solid fa-globe"></i> Advocate for the open web
+
+Our meetings are the 2nd Wednesday of each month, we hope you can join us!

src/utils/renderMarkdownRoute.tsx

@@ -0,0 +1,16 @@
+export async function renderMarkdownRoute(
+  markdownPath: string
+): Promise<preact.ComponentType> {
+  const [frontMatter, marked] = await Promise.all([
+    import('front-matter'),
+    import('marked'),
+  ])
+
+  const res = await fetch(markdownPath)
+  const text = await res.text()
+
+  const { attributes, body } = frontMatter.default(text)
+  const html = await marked.marked(body)
+
+  return () => <div dangerouslySetInnerHTML={{ __html: html }}></div>
+}

tsconfig.json

@@ -1,13 +1,15 @@
 {
   "compilerOptions": {
     "target": "ES2022",
+    "module": "ES2022",
     "moduleResolution": "bundler",
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
     "noEmit": true,
     "strict": true,
     "verbatimModuleSyntax": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "allowImportingTsExtensions": true
   },
   "include": ["src"],
   "exclude": ["node_modules"]

vite.config.js → vite.config.ts

@@ -3,7 +3,8 @@ import preact from '@preact/preset-vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: '/preact-starter/',
+  // base: '/seattlejs.com/',
   publicDir: 'public',
   plugins: [preact()],
+  assetsInclude: ['**/*.md'],
 })