Feat/add coauthors 2 #66

Tabarzin · 2025-11-07T19:33:00Z

It seems working

Summary by CodeRabbit

New Features
- Added Docker support for streamlined development and production deployments.
- Introduced Makefile commands for simplified build and container management workflows.
- Redesigned homepage to display posts in a grid layout from the news category.
Style
- Updated site branding and metadata.
- Refined navigation by removing the "Get Started" button and optimizing layout spacing.
- Conditional blog menu rendering in navigation when content is available.
Documentation
- Updated README with Docker and Makefile usage instructions.
- Added comprehensive deployment guidance for local and production environments.

Dockerize app

fix: remove placeholder image if none for preview

Refactor Wordpress API

vercel · 2025-11-07T19:33:05Z

@Tabarzin is attempting to deploy a commit to the 9d8 Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2025-11-07T19:33:10Z

Walkthrough

Comprehensive project restructuring featuring environment variable renaming (WORDPRESS_URL → NEXT_PUBLIC_WORDPRESS_URL, WORDPRESS_WEBHOOK_SECRET → NEXT_WORDPRESS_WEBHOOK_SECRET), Docker containerization infrastructure, major data layer refactoring with typed queries and cache tagging, simplified homepage rendering, and enhanced webhook revalidation with slug-aware cache invalidation.

Changes

Cohort / File(s)	Summary
Environment & Config Updates `.env.example`, `site.config.ts`, `next.config.ts`, `menu.config.ts`	Renamed WordPress env vars to NEXT_PUBLIC_* format; updated siteConfig to derive domain from NEXT_PUBLIC_URL and rebrand content; hardcoded remote image host to sysblok.ru; restructured navigation menus (removed external links, added posts/pages/authors routes).
Docker & Container Infrastructure `Dockerfile`, `Dockerfile.dev`, `Makefile`, `compose.yml`, `.dockerignore`	Added multi-stage production Dockerfile (Alpine-based, pnpm, non-root nextjs user), dev Dockerfile with hot-reload, Makefile with build/run/clean targets for both environments, docker-compose config with volume mounts, and dockerignore patterns.
Documentation `CLAUDE.md`, `README.md`, `plugin/README.md`, `plugin/next-revalidate/README.txt`	Updated env var references from WORDPRESS_* to NEXT_* conventions; rewrote project description/branding; added Makefile usage section; updated webhook secret guidance throughout.
.gitignore	Renamed env comment from "local env files" to "env files"; added `.env` pattern alongside existing `.env*.local`.
Type System & Query Definitions `lib/wordpress.d.ts`	Renamed `FeaturedMedia` → `Media`; expanded `Post` interface with type, author_meta, embedded links, and featured image fields; introduced pagination headers; added generic query types (PostQuery, PageQuery, MediaQuery, etc.); introduced CacheTag union type for granular cache invalidation.
Data Layer Refactor `lib/wordpress.ts`	Migrated to NEXT_PUBLIC_WORDPRESS_URL; added generic `createGetAll<T>` factory for pagination; refactored all fetchers (posts, pages, categories, tags, authors, media) to use typed field-sets and cache tags; introduced CardPost type for optimized card rendering; added `getPostData(slug)` composite fetcher; added `getCoAuthorsByPost(postId)` for co-author resolution; updated `wordpressFetch`/`wordpressFetchWithPagination` to accept cacheTags array.
Utility Helpers `lib/utils.ts`	Added `stripHtmlTags(htmlString)` and `extractExcerptText(excerpt)` for excerpt processing in card views.
Homepage & Posts Pages `app/page.tsx`, `app/pages/page.tsx`, `app/pages/[slug]/page.tsx`, `app/posts/page.tsx`, `app/posts/[slug]/page.tsx`, `app/sitemap.ts`	Converted `Home` to async function; added "news" category filtering and paginated post grid; simplified multi-card layout to simple prose header; updated data fetching to use new field-limited queries; refactored post detail page to use composite `getPostData()` and `getMediaById()`; added error handling for missing posts; updated slug generation to use new API patterns.
Revalidation & Webhook `app/api/revalidate/route.ts`, `plugin/next-revalidate/next-revalidate.php`	Updated env var from WORDPRESS_WEBHOOK_SECRET to NEXT_WORDPRESS_WEBHOOK_SECRET; added contentSlug extraction from webhook payload; introduced slug-aware cache tags (post-{id}, post-{slug}, page-{slug}, etc.); expanded post/page/media revalidation logic; refined hook priorities and post context handling in plugin; plugin now passes post_name (slug) to revalidation requests.
Components `components/posts/post-card.tsx`, `components/nav/mobile-nav.tsx`	Updated PostCard to accept `CardPost` type; changed media resolution to prefer embedded wp:featuredmedia with fallback; updated excerpt to use extractExcerptText with 24-word truncation; removed author retrieval; added category fallback to embedded wp:term; made Blog Menu rendering conditional on contentMenu entries.

Sequence Diagram(s)

sequenceDiagram
    participant WordPress as WordPress REST API
    participant Next as Next.js App
    participant Cache as Next.js Data Cache
    participant Webhook as WP Plugin Webhook
    participant Revalidate as /api/revalidate Route

    Note over Webhook: Post published/updated with slug
    Webhook->>Revalidate: Send contentId, contentType, contentSlug
    Revalidate->>Revalidate: Extract & validate payload
    activate Revalidate
        Note over Revalidate: Generate cache tags:<br/>post-{id}, post-{slug}<br/>posts, wordpress (if default)
        Revalidate->>Cache: revalidateTag(tag) per type
        Revalidate->>Cache: revalidatePath("/layout")
    deactivate Revalidate
    
    participant User as User Browser
    User->>Next: Request page/post
    activate Next
        alt Cache hit
            Next->>Cache: Check cache tags
            Cache-->>Next: Return cached data
        else Cache miss/revalidated
            Next->>WordPress: Fetch with _fields=[slug, title...]
            WordPress-->>Next: Return typed fields
            Next->>Cache: Store with tags
        end
    deactivate Next
    Next-->>User: Render page

sequenceDiagram
    participant Client as Client Browser
    participant App as app/page.tsx (async)
    participant WP as lib/wordpress.ts
    participant Cache as fetch cache + revalidate

    Client->>App: Request /
    activate App
        App->>WP: getPostsPaginated(1, 30, {categories: !news_id})
        activate WP
            WP->>WP: Build query with _fields: postCardFields
            WP->>Cache: wordpressFetchWithPagination(..., cacheTags)
            Cache->>Cache: Fetch with 1-day revalidation
            WP-->>App: WordPressResponse<CardPost[]>
        deactivate WP
        App->>App: Render Container with Prose + PostCard grid
        alt Posts exist
            App->>Client: Render 3-col grid of CardPost
        else No posts
            App->>Client: "No posts found" message
        end
    deactivate App

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Areas requiring extra attention:

lib/wordpress.ts and lib/wordpress.d.ts: Major architectural shift with new generic pagination patterns, cache tagging strategy, field-set definitions, and query type system. Verify consistency across all endpoints, correct cache tag generation, and backward compatibility gaps.
app/api/revalidate/route.ts: Complex slug-aware cache invalidation logic with per-content-type branching. Validate revalidation tag correctness for posts/pages/media and fallback behavior.
plugin/next-revalidate/next-revalidate.php: Hook priority changes, post context resolution, and slug payload inclusion. Ensure post_name is correctly passed through all revalidation triggers and no edge cases (trash/delete) are missed.
components/posts/post-card.tsx: Updated from Post to CardPost type with embedded media/category resolution; verify embedded data extraction works and fallback logic is sound.
Docker/Makefile/compose.yml: Validate Alpine image compatibility, pnpm setup, volume mounts (especially node_modules preservation), and development watch patterns.
Type migrations across files: Multiple files now depend on new query types (WordPressQuery, PostQuery, etc.). Verify call sites have been migrated and no legacy patterns remain.

Possibly related PRs

Create WP-Revalidate Next.js Plugin! #51: Introduced WordPress revalidate plugin and initial app/api/revalidate route using WORDPRESS_WEBHOOK_SECRET; this PR directly extends that by renaming the env var, expanding payload structure with slug data, and refining cache tag logic for granular invalidation.
refactor: Simplified API implementation #55: Modified lib/wordpress.ts wordpressFetch signature and URL construction; this PR's refactor to add cacheTags and genericize pagination builds upon those changes.
54 retrieve totalpages from the posts response headers instead of fetching all posts #56: Added pagination support (getPostsPaginated, WordPressResponse headers, getAllPostSlugs); this PR expands pagination across all data fetchers and introduces the generic createGetAll factory.

Suggested reviewers

brijr
youngbloodcyb

Poem

🐰 A rabbit hops through Docker files,

With cache tags sparkling, typed for miles,

The webhook slugs now dance and play,

Revalidation's smart today!

From WordPress whispers to Next.js dreams—

The refactor flows in pristine streams. 🌿✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title 'Feat/add coauthors 2' refers to a real aspect of the changeset (coauthor support is added via getCoAuthorsByPost and related functions), but significantly undersells the main changes. The PR contains extensive infrastructure changes (Docker setup, Makefile, compose.yml), major API refactoring (generic fetch helpers, cache tagging), environment variable renames, configuration updates, and UI/branding overhaul that dwarf the coauthors feature.	Revise the title to reflect the primary changes, such as 'Refactor WordPress data fetching with cache tagging and Docker support' or similar, or clarify if coauthors is truly the focus given the scope of other modifications.
Docstring Coverage	⚠️ Warning	Docstring coverage is 12.28% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 9

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

app/posts/[slug]/page.tsx (1)

82-112: Primary author disappears when no co-authors

getPostData only returns co-author slugs, so for a normal single-author post the authors array comes back empty. The new rendering path therefore drops the byline entirely, which is a regression from the previous behavior. Please fall back to the primary author (via getAuthorById(post.author)) when authors is empty, and reuse that list for the UI. This keeps co-author support while preserving the existing single-author output.

-  const { post, featuredMedia, category, authors } = postData;
+  const { post, featuredMedia, category, authors } = postData;
+  const primaryAuthor =
+    (!authors || authors.length === 0) && post.author
+      ? await getAuthorById(post.author)
+      : null;
+  const displayAuthors =
+    authors && authors.length > 0
+      ? authors
+      : primaryAuthor
+        ? [primaryAuthor]
+        : [];
@@
-              {authors?.length > 0 && (
+              {displayAuthors.length > 0 && (
                 <>
                   {" by "}
-                  {authors.map((a: any, i: number) => (
+                  {displayAuthors.map((a: any, i: number) => (
                     <span key={a.id}>
                       <a href={`/posts/?author=${a.id}`}>{a.name}</a>
-                      {i < authors.length - 1 ? ", " : ""}
+                      {i < displayAuthors.length - 1 ? ", " : ""}
                     </span>
                   ))}
                 </>
               )}

components/posts/post-card.tsx (1)

23-59: Avoid indexing into empty term arrays.

On Line 24 the code reads post._embedded?.["wp:term"][0][0].taxonomy without verifying that the inner array has an element. If the API returns an empty term list, term[0] is undefined and React will crash rendering this card. Please guard against empty arrays before dereferencing.
-  const category = post._embedded?.["wp:term"][0] && post._embedded?.["wp:term"][0][0].taxonomy === "category" ?
-    post._embedded?.["wp:term"][0][0]
-    : post.categories?.[0]
-    ? await getCategoryById(post.categories[0])
-    : null;
+  const primaryTerms = post._embedded?.["wp:term"]?.[0];
+  const embeddedCategory =
+    Array.isArray(primaryTerms) && primaryTerms[0]?.taxonomy === "category"
+      ? primaryTerms[0]
+      : null;
+  const category =
+    embeddedCategory ??
+    (post.categories?.[0] ? await getCategoryById(post.categories[0]) : null);

🧹 Nitpick comments (3)

.env.example (1)
1-6: Remove quotes from environment variable values.

In .env files, quotes around URLs are typically unnecessary and can cause issues as they may be included in the actual value. The dotenv-linter static analysis tool has flagged this.

Apply this diff to remove the quotes:
-NEXT_PUBLIC_WORDPRESS_URL="https://sysblok.ru"
-NEXT_PUBLIC_URL="https://next.sysblok.team"
+NEXT_PUBLIC_WORDPRESS_URL=https://sysblok.ru
+NEXT_PUBLIC_URL=https://next.sysblok.team

 # If using the revalidate plugin
 # You can generate by running `openssl rand -base64 32` in the terminal
-NEXT_WORDPRESS_WEBHOOK_SECRET="your-secret-key-here"
+NEXT_WORDPRESS_WEBHOOK_SECRET=your-secret-key-here
next.config.ts (1)
1-21: Remove commented code.

This commented-out configuration should be removed. Version control preserves the history, so there's no need to keep it in the file.

Apply this diff:
-// import type { NextConfig } from "next";
-
-// const nextConfig: NextConfig = {
-//   images: {
-//     remotePatterns: [
-//       new URL(`${process.env.NEXT_PUBLIC_WORDPRESS_URL}/wp-content/**`),
-//     ],
-//   },
-//   async redirects() {
-//     return [
-//       {
-//         source: "/admin",
-//         destination: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/wp-admin`,
-//         permanent: true,
-//       },
-//     ];
-//   },
-//   output: "standalone",
-// };
-
-// export default nextConfig;
-
 import type { NextConfig } from "next";
Dockerfile.dev (1)
1-32: Consider using pnpm consistently for both install and run commands.

The Dockerfile uses pnpm for dependency installation (line 19) but npm for running the dev server (line 32). While this works because both package managers can read the same package.json scripts, using pnpm consistently would be clearer.

Apply this diff:
-CMD ["npm", "run", "dev"]
+CMD ["pnpm", "run", "dev"]

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3abffe5 and be9c7ad.

⛔ Files ignored due to path filters (2)

app/favicon.ico is excluded by !**/*.ico
plugin/next-revalidate.zip is excluded by !**/*.zip

📒 Files selected for processing (28)

.env.example (1 hunks)
.gitignore (1 hunks)
CLAUDE.md (1 hunks)
Dockerfile (1 hunks)
Dockerfile.dev (1 hunks)
Makefile (1 hunks)
README.md (5 hunks)
app/api/revalidate/route.ts (3 hunks)
app/layout.tsx (5 hunks)
app/page.tsx (1 hunks)
app/pages/[slug]/page.tsx (1 hunks)
app/pages/page.tsx (1 hunks)
app/posts/[slug]/page.tsx (4 hunks)
app/posts/page.tsx (1 hunks)
app/sitemap.ts (1 hunks)
components/nav/mobile-nav.tsx (1 hunks)
components/posts/post-card.tsx (2 hunks)
compose.yml (1 hunks)
dockerignore (1 hunks)
lib/utils.ts (1 hunks)
lib/wordpress.d.ts (6 hunks)
lib/wordpress.ts (9 hunks)
menu.config.ts (1 hunks)
next.config.ts (1 hunks)
plugin/README.md (1 hunks)
plugin/next-revalidate/README.txt (1 hunks)
plugin/next-revalidate/next-revalidate.php (6 hunks)
site.config.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (7)

📓 Common learnings

Learnt from: CR
Repo: 9d8dev/next-wp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-06-26T17:28:47.375Z
Learning: When working with a headless WordPress starter using Next.js 15 App Router and TypeScript, centralize all WordPress API interactions in a single module (e.g., lib/wordpress.ts) to maintain a clean data layer.

Learnt from: CR
Repo: 9d8dev/next-wp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-06-26T17:28:47.375Z
Learning: Set up a revalidation system where a WordPress plugin sends webhooks to a Next.js endpoint, which validates the webhook secret and calls revalidateTag(), with a default cache duration (e.g., 1 hour).