Add static rendering of blog posts

Opens the door to trigger rendering from spanner

src/app/page.tsx

@@ -1,11 +1,15 @@
 import type { Metadata } from "next";
-import SpannerBlog from "../components/spanner_blog"
+import SpannerBlog from "@/components/blog/blog";
+import { getPosts } from "@/components/blog/api_client";
 
 export const metadata: Metadata = {
   title: "Wye & Welsh LRC | Home",
 };
 
-export default function Home() {
+export default async function Home() {
+  // This is fine because we're statically exporting anyway
+  let posts = await getPosts();
+
   return (
     <main>
       <h1 className="text-2xl font-bold">Home</h1>
@@ -14,7 +18,7 @@ export default function Home() {
 
       <h2 className="text-xl font-bold mt-2">Latest News</h2>
 
-      <SpannerBlog />
+      <SpannerBlog staticPosts={posts}/>
     </main>
   );
 }

src/components/blog/api_client.ts

@@ -0,0 +1,3 @@
+export function getPosts() {
+    return fetch('https://spanner.wwlrc.co.uk/api/clubs/c/2/blog_posts').then((res) => res.json()).then((res) => { return res.rows })
+}

src/components/spanner_blog.jsx → src/components/blog/blog.tsx

@@ -1,25 +1,21 @@
 "use client";
 
 import { useState, useEffect } from 'react'
+import { getPosts } from './api_client';
 
-export default function SpannerBlog() {
-    const [posts, setPosts] = useState([])
+export default function SpannerBlog({ staticPosts }: any) {
+    const [posts, setPosts] = useState(staticPosts)
     const [isLoading, setLoading] = useState(true)
 
     useEffect(() => {
-        fetch('https://spanner.wwlrc.co.uk/api/clubs/c/2/blog_posts')
-            .then((res) => res.json())
-            .then((data) => {
-                setPosts(data.rows)
-                setLoading(false)
-            })
-        }, [])
+        getPosts().then((posts) => {
+            setPosts(posts)
+        })
+    }, [])
 
-    if (isLoading) return <p>Loading...</p>
     if(!posts) return <p>No Blog Posts :/</p>
-
     return (<div>
-            {posts.map((post, id) => (
+            {posts.map((post: any, id: number) => (
                 <div key={id}>
                     <h3 className="text-l font-bold mt-2">{post.title}</h3>
                     <div dangerouslySetInnerHTML={{ __html: post.content }}></div>