Merge pull request #10 from CodeBoxxTechSchool/ml/blog-posts-content

Ml/blog posts content

Author: minuitcinq

node_modules/.package-lock.json

@@ -11,6 +11,7 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
+    "@portabletext/react": "^6.2.0",
     "bootstrap": "^5.3.8",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.10",

package-lock.json

@@ -31,6 +31,7 @@ npm run dev
 | ------------ | ------------------------- | ------------------------------------------------------------------ |
 | `/`          | `src/pages/Home.jsx`      | Sections 01–07, WSJ and Forge 20 bands, Codi drawer, enroll drawer |
 | `/blog`      | `src/pages/Blog.jsx`      | CodeBlog index, Sanity-backed                                      |
+| `/blog/:slug` | `src/pages/BlogPost.jsx` | Standalone post page, renders the post's own content               |
 | `/financing` | `src/pages/Financing.jsx` | Academy financing options                                          |
 | `/ventures`  | `src/pages/Ventures.jsx`  | CodeBoxx Ventures                                                  |
 
@@ -61,7 +62,7 @@ consumes the API, it doesn't scaffold a Studio):
 
 | Document type  | Fields                                                                                                   | Consumed by                                                                                                                           |
 | -------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `post`         | `title`, `category`, `author`, `publishedAt`, `excerpt`, `url`                                           | `useSanityPosts` — Blog page                                                                                                          |
+| `post`         | `title`, `slug`, `category`, `author`, `publishedAt`, `excerpt`, `content` (Portable Text/rich text), `featuredImage` (optional), `url` (optional external reference — not the content source) | `useSanityPosts` — Blog page; `useSanityPost(slug, seed)` — the post's own page at `/blog/:slug` |
 | `teamMember`   | `name`, `role`, `linkedin` (url), `photo` (image), `group` (`"studio"` \| `"academy"`), `order` (number) | `useSanityTeam(group, seed)` — Studio team (`#codeboxx .person`) and Academy team (`#academy .person`), same type filtered by `group` |
 | `partnerLogo`  | `name`, `logo` (image), `order` (number)                                                                 | `useSanityLogos(seed)` — the `.client-slider` partner logos; however many documents exist is however many slides show                 |
 | `cohortIntake` | `program` (`"fsd"` \| `"aidev"`), `date`, `location`, `status` (`"Open"` \| `"Waitlist"` \| `"Planned"`) | `useIntakes(seed)` in `src/lib/intakes.js` — the `#intake` calendar rows                                                              |
@@ -71,6 +72,28 @@ placeholder for a real admissions API later, and `IntakeCalendar` only ever impo
 `useIntakes` and expects a `{ fsd: [...], aidev: [...] }` return shape — swapping the data
 source later means rewriting `src/lib/intakes.js` only, with no changes to `Home.jsx`.
 
+Each post's `content` field is Sanity's standard Portable Text (rich text) — currently
+text-only in the schema (headings, bold/italic, links, lists, quotes), no inline images
+yet; that's a deliberate, easy-to-extend-later scope call, not a limitation of the
+approach. It renders via `@portabletext/react` (the one dependency this project adds
+beyond a plain `fetch` — a small, official rendering library, not an API client, so it
+doesn't conflict with the rest of `sanity.js` staying SDK-free) with `components`
+overrides in `src/pages/BlogPost.jsx` mapping block/list/mark types onto this site's
+existing typography classes (`pbody`, `h2`, `ptitle`, etc.) instead of unstyled defaults.
+
+`featuredImage` (optional) is the post page's hero background, via inline `style`
+since the URL is per-post data — stacking a `linear-gradient(rgba(0,0,0,.6), ...)`
+scrim with `url(...)` in one `background-image`, reusing the scrim-over-photo
+technique already used by the homepage `.hero` (`_components.scss`). It also backs
+the `/blog` listing card's cover (`Blog.jsx`, via the same `<image-slot src>` prop
+already used for team photos/logos). `sanityImageUrl(url, { w, q })` in `sanity.js`
+appends Sanity's CDN resize/quality query params so each use requests only the pixel
+size it renders (large for the hero, small for the card thumbnail) — no
+`@sanity/image-url` package needed. Posts without a `featuredImage` keep the plain
+navy hero, unchanged. The article section below the hero (`.post-content-band` in
+`_blog.scss`) has its own subtle top-fade gradient, independent of `featuredImage` —
+plain CSS, not photo-based.
+
 Team member and partner logo entries carry a stable `id` (the Sanity document `_id`) that's
 used as both the React list key and the `<image-slot>` element's `id` attribute. Don't
 switch that back to an array index — `image-slot` persists locally-dropped images keyed by

package.json

@@ -2,6 +2,7 @@ import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Home from './pages/Home';
 import Blog from './pages/Blog';
+import BlogPost from './pages/BlogPost';
 import Financing from './pages/Financing';
 import Ventures from './pages/Ventures';
 
@@ -11,6 +12,7 @@ export default function App() {
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/blog" element={<Blog />} />
+        <Route path="/blog/:slug" element={<BlogPost />} />
         <Route path="/financing" element={<Financing />} />
         <Route path="/ventures" element={<Ventures />} />
         <Route path="*" element={<Home />} />

readme.md

@@ -20,29 +20,50 @@ export async function fetchCollection(type, groqTail = '') {
   });
   if (!res.ok) throw new Error('Sanity ' + res.status + ' on ' + type);
   const body = await res.json();
-  return body.result || [];
+  return body.result;
 }
 
-// Sanity 'post' document -> the shape the Blog page renders.
+// Appends Sanity's image CDN resize/quality params to an asset URL, so callers
+// request only the pixel size they'll actually render (e.g. a small, low-quality
+// tile for a repeated background) instead of always paying for the full upload.
+export function sanityImageUrl(url, { w, q = 60 } = {}) {
+  if (!url) return null;
+  return url + '?w=' + w + '&q=' + q + '&auto=format';
+}
+
+// Sanity 'post' document -> the shape Blog.jsx's cards and BlogPost.jsx's page
+// render. Both post queries below add a `{..., "featuredImageUrl": ...}` projection —
+// `...` keeps every raw field as-is (so `slug`/`content` need no query change) while
+// resolving the image asset reference to a plain URL. `url` is an optional external
+// reference now (not the content source), so it maps to `null` when absent rather
+// than a placeholder '#' href.
 function toPost(entry) {
   return {
     title: entry.title,
+    slug: entry.slug?.current || entry.slug || '',
     category: entry.category,
     author: entry.author,
     date: (entry.publishedAt || entry.date || '').slice(0, 10),
     excerpt: entry.excerpt || entry.summary || '',
-    url: entry.url || entry.canonicalUrl || '#',
+    content: entry.content || null,
+    featuredImage: entry.featuredImageUrl || null,
+    url: entry.url || entry.canonicalUrl || null,
   };
 }
 
+const FEATURED_IMAGE_PROJECTION = '{..., "featuredImageUrl": featuredImage.asset->url}';
+
 export function useSanityPosts(seed = []) {
   const [posts, setPosts] = React.useState(seed);
   React.useEffect(() => {
     let live = true;
     if (!PROJECT_ID) return undefined;
-    fetchCollection('post', ' | order(publishedAt desc) [0...50]')
+    fetchCollection(
+      'post',
+      ' | order(publishedAt desc) [0...50]' + FEATURED_IMAGE_PROJECTION
+    )
       .then((rows) => {
-        if (live && rows.length) setPosts(rows.map(toPost));
+        if (live && rows && rows.length) setPosts(rows.map(toPost));
       })
       .catch((err) => console.warn('[sanity]', err.message));
     return () => {
@@ -52,6 +73,27 @@ export function useSanityPosts(seed = []) {
   return posts;
 }
 
+// Fetches one post by slug for BlogPost.jsx (route: /blog/:slug). The slug comes
+// from a route param, so it's the first user-facing value in this codebase to feed
+// directly into a hand-built GROQ string — sanitized to [a-z0-9-] before use.
+export function useSanityPost(slug, seed = null) {
+  const [post, setPost] = React.useState(seed);
+  React.useEffect(() => {
+    let live = true;
+    const safeSlug = (slug || '').replace(/[^a-z0-9-]/g, '');
+    if (!PROJECT_ID || !safeSlug) return undefined;
+    fetchCollection('post', '[slug.current == "' + safeSlug + '"][0]' + FEATURED_IMAGE_PROJECTION)
+      .then((entry) => {
+        if (live && entry) setPost(toPost(entry));
+      })
+      .catch((err) => console.warn('[sanity]', err.message));
+    return () => {
+      live = false;
+    };
+  }, [slug]);
+  return post;
+}
+
 // Sanity 'teamMember' document (name, role, linkedin, photo image, group: "studio" |
 // "academy", order) -> the shape ServiceDetail's and Academy's people-grids render.
 // `id` carries the Sanity document _id — used as both the React key and the
@@ -81,7 +123,7 @@ export function useSanityTeam(group, seed = []) {
         '"] | order(order asc) {_id, name, role, linkedin, "photo": photo.asset->url}'
     )
       .then((rows) => {
-        if (live && rows.length) setTeam(rows.map(toTeamMember));
+        if (live && rows && rows.length) setTeam(rows.map(toTeamMember));
       })
       .catch((err) => console.warn('[sanity]', err.message));
     return () => {
@@ -104,7 +146,7 @@ export function useSanityLogos(seed = []) {
     if (!PROJECT_ID) return undefined;
     fetchCollection('partnerLogo', ' | order(order asc) {_id, name, "logo": logo.asset->url}')
       .then((rows) => {
-        if (live && rows.length) setLogos(rows.map(toLogo));
+        if (live && rows && rows.length) setLogos(rows.map(toLogo));
       })
       .catch((err) => console.warn('[sanity]', err.message));
     return () => {