Merge pull request #20 from CalebBarnes/feat/archive-and-taxonomy-pag…

…ination

Feat/archive and taxonomy pagination

.nvmrc

@@ -1 +1 @@
-v18.18.2
+v18.19.0

apps/next-wordpress-starter/.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   }

apps/next-wordpress-starter/next.config.js

@@ -24,6 +24,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "tailwindui.com",
       },
+      {
+        protocol: "https",
+        hostname: "secure.gravatar.com",
+      },
     ],
   },
 
@@ -38,9 +42,20 @@ const nextConfig = {
 
   // logging: {
   //   fetches: {
-  //     fullUrl: true,
+  //     fullUrl: false,
   //   },
   // },
+  // reactStrictMode: false,
 };
 
+if (process.env.SINGLE_THREAD_BUILD === "true") {
+  // Single threaded builds for production during generateStaticParams and other functions to avoid rate limiting
+  // Only enable this if you are running into rate limiting issues while fetching a lot of posts in parallel
+  if (!nextConfig.experimental) {
+    nextConfig.experimental = {};
+  }
+  nextConfig.experimental.workerThreads = false;
+  nextConfig.experimental.cpus = 1;
+}
+
 module.exports = nextConfig;

apps/next-wordpress-starter/package.json

@@ -1,9 +1,9 @@
 {
-  "name": "next-wordpress-starter",
+  "name": "nextwp-starter",
   "version": "1.0.1",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -15,6 +15,7 @@
     "@nextwp/core": "0.0.1-beta.7",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "eslint": "^8.52.0",
@@ -37,6 +38,7 @@
     "@types/react-dom": "^18.2.14",
     "@vercel/style-guide": "^5.1.0",
     "autoprefixer": "^10.4.13",
+    "cross-env": "^7.0.3",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.5"

apps/next-wordpress-starter/src/app/[[...paths]]/page.tsx

@@ -6,6 +6,7 @@ export default function PageRoute(props: {
   params: RouteParams;
   searchParams?: SearchParams;
 }) {
+  console.log("PageRoute", props);
   return (
     <WordpressTemplate
       params={props.params}

apps/next-wordpress-starter/src/components/ui/badge.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

apps/next-wordpress-starter/src/templates/archive/blog.tsx

@@ -2,35 +2,40 @@ import Link from "next/link";
 import Image from "next/image";
 import { swapWpUrl } from "@nextwp/core/src/utils/swap-wp-url";
 import { getFeaturedImage } from "@nextwp/core/src/utils/get-featured-image";
-import Edges from "@/components/edges";
+import { stripWpUrl } from "@nextwp/core";
+import { Badge } from "@/components/ui/badge";
 import Button from "@/components/ui/button";
+import Edges from "@/components/edges";
 
 export default function PostArchive(props) {
-  // console.log(props);
   const {
-    // uri,
     data: {
-      posts,
+      items,
       page,
       prevPage,
       nextPage,
-      // totalItems,
+      totalItems,
       totalPages,
       currentPage,
     },
-    // archive,
   } = props;
 
-  // console.log({ items });
   return (
     <div>
-      <h1>items: {posts.length}</h1>
+      <div className="edges">
+        <div className="border shadow-lg p-5 inline-block rounded">
+          <h4>current page items: {items?.length}</h4>
+          <p>totalItems: {totalItems}</p>
+          <p>totalPages: {totalPages}</p>
+        </div>
+      </div>
 
       <Edges>
         <h1 className="mb-5">{page?.title?.rendered}</h1>
         <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-          {posts.map((post) => {
+          {items.map((post) => {
             const featuredImage = getFeaturedImage(post);
+
             return (
               <article
                 className="flex flex-col items-start justify-between"
@@ -53,12 +58,16 @@ export default function PostArchive(props) {
                     <time className="text-gray-500" dateTime={post.datetime}>
                       {post.date}
                     </time>
-                    {/* <a
-                      className="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"
-                      href={post.category.href}
-                    >
-                      {post.category.title}
-                    </a> */}
+
+                    {post?._embedded?.["wp:term"]?.map((tax) => {
+                      return tax?.map((term, index) => {
+                        return (
+                          <Link href={stripWpUrl(term.link)} key={index}>
+                            <Badge>{term.name}</Badge>
+                          </Link>
+                        );
+                      });
+                    })}
                   </div>
                   <div className="group relative">
                     <h3 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
@@ -75,60 +84,29 @@ export default function PostArchive(props) {
                     />
                   </div>
                   <div className="relative mt-8 flex items-center gap-x-4">
-                    <img
-                      alt=""
-                      className="h-10 w-10 rounded-full bg-gray-100"
-                      src={post?._embedded?.author?.[0]?.avatar_urls?.["96"]}
-                    />
-                    <div className="text-sm leading-6">
-                      <p className="font-semibold text-gray-900">
-                        {/* <a href={post.author}> */}
-                        <span className="absolute inset-0" />
-                        {post?._embedded?.author?.[0].name}
-                        {/* </a> */}
-                      </p>
-                      <p className="text-gray-600">{post.author.role}</p>
-                    </div>
+                    <Link href={stripWpUrl(post?._embedded?.author?.[0].link)}>
+                      <Image
+                        alt=""
+                        className="h-10 w-10 rounded-full bg-gray-100"
+                        height={40}
+                        quality={100}
+                        src={post?._embedded?.author?.[0]?.avatar_urls?.["96"]}
+                        width={40}
+                      />
+                      <div className="text-sm leading-6">
+                        <p className="font-semibold text-gray-900">
+                          <span className="absolute inset-0" />
+                          {post?._embedded?.author?.[0].name}
+                        </p>
+                        <p className="text-gray-600">{post.author.role}</p>
+                      </div>
+                    </Link>
                   </div>
                 </div>
               </article>
             );
           })}
         </div>
-        {/* <ul className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
-          {items?.map((item) => (
-            <li className="relative" key={item.id}>
-              <div className="group aspect-h-7 aspect-w-10 block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
-                {item?._embedded?.["wp:featuredmedia"]?.[0]?.source_url ? (
-                  <Image
-                    alt=""
-                    className="pointer-events-none object-cover group-hover:opacity-75"
-                    fill
-                    src={item?._embedded?.["wp:featuredmedia"]?.[0]?.source_url}
-                  />
-                ) : null}
-                <Link
-                  className="absolute inset-0 focus:outline-none"
-                  href={swapWpUrl(item.link)}
-                  type="button"
-                >
-                  <span className="sr-only">
-                    View details for {item.title.rendered}
-                  </span>
-                </Link>
-              </div>
-
-              <p className="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">
-                {item.title.rendered}
-              </p>
-              <div
-                className="truncate text-clip"
-                // className="pointer-events-none block text-sm font-medium text-gray-500"
-                dangerouslySetInnerHTML={{ __html: item.excerpt.rendered }}
-              />
-            </li>
-          ))}
-        </ul> */}
 
         <div className="flex justify-between gap-x-2 border-t pt-5 mt-5 items-center">
           <span className="text-sm">
@@ -138,36 +116,21 @@ export default function PostArchive(props) {
             <div>
               {prevPage ? (
                 <Button asChild>
-                  <Link href={`?page=${prevPage}`}>Prev page</Link>
+                  <Link href={prevPage}>Prev page</Link>
                 </Button>
               ) : null}
             </div>
 
             <div>
               {nextPage ? (
                 <Button asChild>
-                  <Link href={`?page=${nextPage}`}>Next page</Link>
+                  <Link href={nextPage}>Next page</Link>
                 </Button>
               ) : null}
             </div>
           </div>
         </div>
       </Edges>
-
-      {/* <p>totalPages: {totalPages}</p> */}
-      {/* <p>num items on this page: {items.length}</p> */}
-      {/* 
-      <pre>
-        <code>{JSON.stringify({ items }, null, 2)}</code>
-      </pre> */}
-      {/* 
-      <pre>
-        <code>{JSON.stringify({ page }, null, 2)}</code>
-      </pre>
-
-      <pre>
-        <code>{JSON.stringify({ archive }, null, 2)}</code>
-      </pre> */}
     </div>
   );
 }