AkongaLabs · Cnnb01 · Jul 25, 2025 · Jul 28, 2025 · Jul 28, 2025 · Jul 30, 2025
diff --git a/bun.lock b/bun.lock
diff --git a/landing-panda/astro.config.mjs b/landing-panda/astro.config.mjs
@@ -1,5 +1,9 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 
+import react from '@astrojs/react';
+
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [react()]
+});
diff --git a/landing-panda/package.json b/landing-panda/package.json
@@ -9,6 +9,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.9.2"
+    "@astrojs/react": "^4.3.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "astro": "^5.9.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   }
 }
diff --git a/landing-panda/public/images/blog1.webp b/landing-panda/public/images/blog1.webp
diff --git a/landing-panda/public/images/blog2.webp b/landing-panda/public/images/blog2.webp
diff --git a/landing-panda/public/images/blog3.webp b/landing-panda/public/images/blog3.webp
diff --git a/landing-panda/public/images/blog4.webp b/landing-panda/public/images/blog4.webp
diff --git a/landing-panda/public/images/header-background.webp b/landing-panda/public/images/header-background.webp
diff --git a/landing-panda/src/data/types.ts b/landing-panda/src/data/types.ts
@@ -0,0 +1,29 @@
+interface BlogPost {
+  id: number;
+  date: string;
+  slug: string;
+  title: {
+    rendered: string;
+  };
+  guid: {
+    rendered: string;
+  };
+  content: {
+    rendered: string;
+  };
+  excerpt: {
+    rendered: string;
+  };
+  link: string;
+  author: number;
+  jetpack_featured_media_url: string;
+
+  // embedded data
+  _embedded?: {
+    author?: {
+      name: string;
+      }[];
+  };
+}
+
+export type { BlogPost };
diff --git a/landing-panda/src/pages/[slug].astro b/landing-panda/src/pages/[slug].astro
@@ -0,0 +1,90 @@
+---
+import type { BlogPost } from "../data/types";
+import "../../src/styles/mylanding.css";
+import { preview } from "astro";
+export async function getStaticPaths() {
+  // _embed query param expands related objects like authors
+  const res = await fetch("https://akongalabs.com/wp-json/wp/v2/posts?_embed");
+  const posts: BlogPost[] = await res.json();
+
+  return posts.map((post, index) => ({
+    params: { slug: post.slug },
+    props: {
+      post,
+      prevPost: posts[index + 1] || null,
+      nextPost: posts[index - 1] || null,
+    },
+  }));
+}
-export async function getStaticPaths() {
-  // _embed query param expands related objects like authors
-  const res = await fetch("https://akongalabs.com/wp-json/wp/v2/posts?_embed");
-  const posts: BlogPost[] = await res.json();
-
-  return posts.map((post) => ({
-    params: { slug: post.slug },
-    props: { post },
-  }));
-}
+export async function getStaticPaths() {
+  // Fetch all posts (WP caps per_page at 100)
+  const posts: BlogPost[] = [];
+  let page = 1;
+  const perPage = 100;
+  while (true) {
+    const res = await fetch(
+      `https://akongalabs.com/wp-json/wp/v2/posts?_embed&per_page=${perPage}&page=${page}`
+    );
+    if (!res.ok) {
+      throw new Error(`Failed to fetch posts (page ${page}): ${res.status} ${res.statusText}`);
+    }
+    const batch: BlogPost[] = await res.json();
+    posts.push(...batch);
+    if (batch.length < perPage) break;
+    page++;
+  }
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
-export async function getStaticPaths() {
-  // _embed query param expands related objects like authors
-  const res = await fetch("https://akongalabs.com/wp-json/wp/v2/posts?_embed");
-  const posts: BlogPost[] = await res.json();
-
-  return posts.map((post) => ({
-    params: { slug: post.slug },
-    props: { post },
-  }));
-}
+export async function getStaticPaths() {
+  // Fetch all posts (WP caps per_page at 100)
+  const posts: BlogPost[] = [];
+  let page = 1;
+  const perPage = 100;
+  while (true) {
+    const res = await fetch(
+      `https://akongalabs.com/wp-json/wp/v2/posts?_embed&per_page=${perPage}&page=${page}`
+    );
+    if (!res.ok) {
+      throw new Error(`Failed to fetch posts (page ${page}): ${res.status} ${res.statusText}`);
+    }
+    const batch: BlogPost[] = await res.json();
+    posts.push(...batch);
+    if (batch.length < perPage) break;
+    page++;
+  }
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+const { post, prevPost, nextPost } = Astro.props as {
+  post: BlogPost;
+  prevPost: BlogPost | null;
+  nextPost: BlogPost | null;
+};
+---
+
+<html>
+  <head>
+    <title>{post.title.rendered}</title>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <article class="blog-post">
+      <div class="blog-body">
+        <div class="first_links_snips">
+          <a href="/newLanding">Akong'a Labs</a>
+          <a href="/blogSnippets">Blogs</a>
+        </div>
+        <div class="blog-content">
+          <h1 set:html={post.title.rendered} />
+          <img src={post.jetpack_featured_media_url} />
+          <p class="author-date">
+            <span class="author">{post._embedded?.author?.[0]?.name}</span>
-          <h1 set:html={post.title.rendered} />
-          <img src={post.jetpack_featured_media_url} />
-          <p class="author-date">
-            <span class="author">{post._embedded?.author?.[0]?.name}</span>
+          <h1>{titleText}</h1>
+          {post.jetpack_featured_media_url && (
+            <img
+              src={post.jetpack_featured_media_url}
+              alt={titleText}
+              loading="lazy"
+              decoding="async"
+            />
+          )}
+          <p class="author-date">
+            <span class="author">{post._embedded?.author?.[0]?.name}</span>
-          <h1 set:html={post.title.rendered} />
-          <img src={post.jetpack_featured_media_url} />
-          <p class="author-date">
-            <span class="author">{post._embedded?.author?.[0]?.name}</span>
+          <h1>{titleText}</h1>
+          {post.jetpack_featured_media_url && (
+            <img
+              src={post.jetpack_featured_media_url}
+              alt={titleText}
+              loading="lazy"
+              decoding="async"
+            />
+          )}
+          <p class="author-date">
+            <span class="author">{post._embedded?.author?.[0]?.name}</span>
+            <span class="date">
+              {
+                new Date(post.date).toLocaleDateString("en-US", {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })
+              }
+            </span>
+          </p>
+
+          <div set:html={post.content.rendered} />
+        </div>
+        <script
+          async
+          data-uid="4e5ba9cc5c"
+          src="https://akongalabs.kit.com/4e5ba9cc5c/index.js"></script>
+        <hr />
+
+        {
+          (prevPost || nextPost) && (
+            <nav class="blog-navigation">
+              <div class="nav-links">
+                {prevPost && (
+                  <a href={`/${prevPost.slug}`}>
+                    Previous: <span set:html={prevPost.title.rendered} />
+                  </a>
+                )}
+
+                {nextPost && (
+                  <a href={`/${nextPost.slug}`}>
+                    Next: <span set:html={nextPost.title.rendered} />
+                  </a>
+                )}
+              </div>
+            </nav>
+          )
+        }
+
+        <div class="last_links">
+          <p><a href="https://x.com/adrianmurage">X</a></p>
+          <p><a href="https://github.com/AkongaLabs">GitHub</a></p>
+        </div>
+      </div>
+    </article>
+  </body>
+</html>
diff --git a/landing-panda/src/pages/blogSnippets.astro b/landing-panda/src/pages/blogSnippets.astro
@@ -0,0 +1,56 @@
+---
+import "../../src/styles/mylanding.css";
+import type { BlogPost } from "../data/types";
+
+const res = await fetch("https://akongalabs.com/wp-json/wp/v2/posts");
+const posts: BlogPost[] = await res.json();
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Charity's landing page 🐼</title>
+  </head>
+  <body>
+    <div class="blogs_container">
+      <div class="first_links">
+        <a href="/newLanding">Akong'a Labs</a>
+        <a href="/blogSnippets">Blogs</a>
+      </div>
+
+      <div>
+        {posts.map((post) => {
+          const formattedDate = new Date(post.date).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          });
+          const cleanedExcerpt = post.excerpt.rendered.replace(/\[&hellip;\]/g, "...");
+
+          return (
+            <div class="asnip">
+              <p class="bluecolor" set:html={formattedDate}></p>
+              <h1 class="blog-title" set:html={post.title.rendered}></h1>
+              <div class="para_space" set:html={cleanedExcerpt}></div>
+              <a class="readmore" href={`/${post.slug}`}>Read more →</a>
+            </div>
+          );
+        })}
+      </div>
+
+      <p class="insider">Get insider posts straight in your inbox</p>
+
+      <div class="convertkit-form">
+          <script async data-uid="4e5ba9cc5c" src="https://akongalabs.kit.com/4e5ba9cc5c/index.js"></script>
+      </div>
+
+      <div class="last_links">
+        <p><a href="https://x.com/adrianmurage">X</a></p>
+        <p><a href="https://github.com/AkongaLabs">GitHub</a></p>
+      </div>
+    </div>
+  </body>
+</html>
+<!-- <script async data-uid="4e5ba9cc5c" src="https://akongalabs.kit.com/4e5ba9cc5c/index.js"></script> -->
diff --git a/landing-panda/src/pages/index.astro b/landing-panda/src/pages/index.astro
@@ -14,7 +14,8 @@ const baseUrl = isDev ? "http://localhost:3001" : "";
     <body>
         <h1>🐼 Hello from Astro static site landing page</h1>
         <p>Welcome to Landing Panda!</p>
-        <p><a href="/landing">Go to Landing Page</a></p>
+        <!-- <p><a href="/landing">Go to Landing Page</a></p> -->
+        <p><a href="/newLanding">Go to Landing Page</a></p>
         <p><a href={`${baseUrl}/app`}>Go to the React App</a></p>
         <p><a href={`${baseUrl}/api/health`}>Check API Health</a></p>
     </body>

diff --git a/landing-panda/src/pages/newLanding.astro b/landing-panda/src/pages/newLanding.astro
@@ -0,0 +1,53 @@
+---
+// import "../../public/styles/mylanding.css";
+import "../../src/styles/mylanding.css"
+const isDev = import.meta.env.DEV;
+const baseUrl = isDev ? "http://localhost:3001" : "";
-const isDev = import.meta.env.DEV;
-const baseUrl = isDev ? "http://localhost:3001" : "";
+---
+import '../../public/styles/mylanding.css'
+---
-const isDev = import.meta.env.DEV;
-const baseUrl = isDev ? "http://localhost:3001" : "";
+---
+import '../../public/styles/mylanding.css'
+---
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1"
+    />
+    <meta name="generator" content={Astro.generator} />
+    <title>Akong’a Labs</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="content">
+        <div class="first_links">
+          <a href="/newLanding">Akong'a Labs</a>
+          <a href="/blogSnippets">Blogs</a>
+        </div>
+        <div class="about">
+          <h2 class="title">Akong’a — The number “1” in the Pokot language.</h2>
+          <p>
+            Akonga Labs is the first of a new kind of company, in Kenya, and
+            Africa. A <s>startup</s> <strong>stayup</strong> that builds a sustainable business first.
+          </p>
+          <p>
+            Prioritizing building <strong>needed products</strong> in <strong>existing</strong>
+            and <strong>validated markets.</strong> Prioritizing <strong>profit</strong> over “growth at all cost”.
+          </p>
+        </div>
+
+        <div class="last_links">
+          <p><a href="https://x.com/adrianmurage">𝕏</a></p>
+          <p><a href="https://github.com/AkongaLabs">GitHub</a></p>
+        </div>
+      </div>
+      <div class="image_container">
+        <img
+          class="header_image"
+          src="/images/header-background.webp"
+          alt="header image"
+        />
+        <div class="image_text">Akong'a Labs</div>
+      </div>
+    </div>
+  </body>
+</html>