Subchapter 20.11

INSTRUCTIONS

references/blog/INSTRUCTIONS.mdMarkdown16 KBView on GitHub

Wix Blog — ready-made client

The blog reader is shipped as real files, not snippets to regenerate. It’s a complete feed + post detail + category/tag landing pages, styled with your app’s design tokens (base44’s src/index.css — the shadcn palette the design phase already set). Copy it into the app and wire the routes — you generate almost none of the reader code (post paging, slug routing, the category/tag id→label resolution, the plain-text body split all ship and are correct).

INSTRUCTIONS · Wix Vibe Headless · wix/skills · Skills Docs

file	what it is
`context/TaxonomyContext.jsx`	`useTaxonomy()` provider: categories + tags fetched once, exposed as `catById` / `tagById` id→object maps
`hooks/usePostDetail.js`	post-detail data — load by slug, not-found state, resolved category/tag chips, body paragraphs
`components/PostCard.jsx`, `PostGrid.jsx`	post listing UI (grid + card, with cover image + empty state)
`components/PostChips.jsx`	category/tag chips for a post (resolves ids via the taxonomy, routes by slug)
`components/WixManageBanner.jsx`	dev-only manage banner — drop it into your Layout (STEP 4)
`pages/Blog.jsx`	the feed route (`/blog`) — lists posts, paginates, empty state
`pages/PostDetail.jsx`	the post route (`/blog/:slug`)
`pages/CategoryPage.jsx`, `TagPage.jsx`	the taxonomy landing routes (`/blog/category/:slug`, `/blog/tag/:slug`)
`rest/wix-config.js`	you set the ids here (STEP 2)
`rest/wix-client.js` + `rest/wix-blog.js`	REST transport + blog helpers (posts/categories/tags)

import { useRef, useState, useEffect } from "react";
import { Routes, Route, Outlet } from "react-router-dom";
import { TaxonomyProvider } from "@/context/TaxonomyContext";
import WixManageBanner from "@/components/WixManageBanner";   // shipped, dev-only · default export, no props
import Blog from "@/pages/Blog";                       // shipped · default export, no props
import PostDetail from "@/pages/PostDetail";           // shipped · default export, no props
import CategoryPage from "@/pages/CategoryPage";       // shipped · default export, no props
import TagPage from "@/pages/TagPage";                 // shipped · default export, no props
import Home from "@/pages/Home";       // YOU build
import Header from "@/components/Header";   // YOU build — plain in-flow markup, NOT position:fixed
import Footer from "@/components/Footer";   // YOU build

function Layout() {
  const topRef = useRef(null);
  const [offset, setOffset] = useState(0);
  useEffect(() => {                                  // measure the fixed region → pad content below it
    const ro = new ResizeObserver(() => setOffset(topRef.current?.offsetHeight ?? 0));
    if (topRef.current) ro.observe(topRef.current);
    return () => ro.disconnect();
  }, []);
  return (<>
    <div ref={topRef} style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 50 }}>
      <WixManageBanner />                    {/* null in prod / when dismissed */}
      <Header />                             {/* your brand header, in-flow inside this fixed block */}
    </div>
    <div style={{ paddingTop: offset }}>     {/* clears the chrome; shrinks when the banner is dismissed */}
      <Outlet />                             {/* shipped Blog / PostDetail / Category / Tag render here, untouched */}
      <Footer />
    </div>
  </>);
}

<TaxonomyProvider>
  <Routes>
    <Route element={<Layout />}>                                    {/* chrome wraps all */}
      <Route path="/" element={<Home />} />                         {/* yours */}
      <Route path="/blog" element={<Blog />} />                     {/* shipped, as-is */}
      <Route path="/blog/:slug" element={<PostDetail />} />         {/* shipped, as-is */}
      <Route path="/blog/category/:slug" element={<CategoryPage />} /> {/* shipped, as-is */}
      <Route path="/blog/tag/:slug" element={<TagPage />} />        {/* shipped, as-is */}
    </Route>
  </Routes>
</TaxonomyProvider>

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { queryPosts } from "@/rest/wix-blog";
import { useTaxonomy } from "@/context/TaxonomyContext";
import PostGrid from "@/components/PostGrid";

// Responsive header: choose ONE branch with a state flag (never a Tailwind `hidden md:*` toggle —
// these navs are inline-styled, and an inline `display` beats a Tailwind class, so `hidden` never
// applies and BOTH branches render). One branch = one nav.
export function Header() {
  const [mobile, setMobile] = useState(() => window.innerWidth < 768);
  useEffect(() => {
    const onResize = () => setMobile(window.innerWidth < 768);
    window.addEventListener("resize", onResize);            // keep it reactive to viewport changes
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return (
    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      {/* brand/logo */}
      {mobile
        ? <YourMenu />                                       // your hamburger + links here
        : <div style={{ display: "flex", gap: 24 }}><Link to="/">Home</Link><Link to="/blog">Blog</Link></div>}
    </nav>
  );
}
export function Latest() {                                   // on your home page
  const [posts, setPosts] = useState([]);
  // NB: queryPosts returns { posts, nextCursor } — destructure the array.
  useEffect(() => { queryPosts({ limit: 6 }).then(({ posts }) => setPosts(posts)); }, []);
  return <PostGrid posts={posts} empty="Posts coming soon." />;
}
export function CategoryNav() {                              // a menu of the blog's categories
  const { categories } = useTaxonomy();                     // fetched once by the provider
  return categories.filter((c) => c.postCount > 0)          // hide empty categories if you want
    .map((c) => <Link key={c.id} to={`/blog/category/${c.slug}`}>{c.label}</Link>);
}

// Every list helper returns an OBJECT, not a bare array — destructure first, or `.map` throws:
const { posts, nextCursor } = await queryPosts({ limit: 20 });          // pass nextCursor back as `cursor`
const { categories, total } = await queryCategories();                  // display c.label · count c.postCount
const { tags } = await queryTags();                                     // display t.label · count t.publishedPostCount
const { posts: inCategory } = await queryPostsByCategory(categoryId, { limit: 20 });
const { posts: withTag }    = await queryPostsByTag(tagId, { limit: 20 });

// Single-item lookups fail soft (null on miss) — show a not-found state, never invent an item:
const post = await getPostBySlug(slug);         // null → 404 state
const cat  = await getCategoryBySlug(slug);
const tag  = await getTagBySlug(slug);

// Cover image: post cover and category cover are DIFFERENT paths.
const postCover = post.media?.wixMedia?.image?.url;   // post/card cover (ready-to-use https)
const catCover  = cat.coverImage?.url;                // category landing cover
// No post cover? fall back to the first richContent IMAGE node, or a text-only card — never a stock image.

// Body: contentText is plain text (split on "\n" for paragraphs — the shipped hook does this).
// richContent is a Ricos document for a faithful render (images/embeds) — see "Extending".

INSTRUCTIONS

Wix Blog — ready-made client

INSTRUCTIONS

Wix Blog — ready-made client

Prerequisites

STEP 1 — The client is already in `src/`

STEP 2 — Credentials

STEP 3 — Theme (nothing to style on the shipped components)

STEP 4 — Wire routes + provider (surgical `find_replace` on `src/App.jsx`, never a rewrite)

What you build (not shipped)

Using the client from your own UI

Extending the client

Hard rules

Point the user to their dashboard

Seeding

Verify (before declaring done)