@opinly/next 0.1.17 → 0.1.19

package/dist/components/blog-post/index.js

@@ -19,6 +19,7 @@ const BlogPost = ({
   classNames = {}
 }) => {
   const content = post.content;
+  console.log("is app router", !opinlyConfig.pagesRouter);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     post.faqs && /* @__PURE__ */ jsx(
       Script,
@@ -54,7 +55,7 @@ const BlogPost = ({
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto px-4 py-24 flex items-start space-x-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-12 w-full", children: [
-      /* @__PURE__ */ jsxs("div", { className: "bg-orange-600", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(
           BreadCrumbs,
           {
@@ -66,39 +67,42 @@ const BlogPost = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold mb-2 leading-tight", children: post.title }),
-        /* @__PURE__ */ jsxs("div", { className: "text-sm mb-4", children: [
-          "Author:",
-          " ",
-          /* @__PURE__ */ jsx(
-            Link,
-            {
-              href: `${opinlyConfig.blogPrefix}/authors/${post.author?.slug}`,
-              className: "font-medium",
-              children: post.author?.name
-            }
-          ),
-          " ",
-          "\xB7 ",
-          calculateReadingTime(content),
-          " min read \xB7",
-          " ",
-          formatDate(post.firstPublishedAt) || "Today"
+        /* @__PURE__ */ jsx("h1", { className: "text-op-heading text-4xl font-bold mb-2 leading-tight", children: post.title }),
+        /* @__PURE__ */ jsxs("div", { className: "text-sm mb-4 text-op-muted space-x-1", children: [
+          post.author && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Link,
+              {
+                href: `${opinlyConfig.blogPrefix}/authors/${post.author?.slug}`,
+                className: "font-medium",
+                children: post.author?.name
+              }
+            ),
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "text-op-muted", children: "\xB7" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            calculateReadingTime(content),
+            " min read ",
+            /* @__PURE__ */ jsx("span", { children: "\xB7" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: formatDate(post.firstPublishedAt) || "Today" })
         ] })
       ] }),
       /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
-            "flex flex-col-reverse md:flex-row mx-auto mt-10 gap-12 relative w-full ",
+            "flex md:space-x-12 flex-col mx-auto w-full",
+            "md:flex-row-reverse",
             classNames.container
           ),
           children: [
-            /* @__PURE__ */ jsx("article", { className: "w-full lg:w-2/3 order-2 lg:order-1 flex items-start space-x-4", children: /* @__PURE__ */ jsxs("div", { className: "prose w-full", children: [
+            /* @__PURE__ */ jsx("article", { className: "w-full md:w-3/4 order-2 md:order-1 flex items-start", children: /* @__PURE__ */ jsxs("div", { className: "prose w-full ", children: [
               /* @__PURE__ */ jsx(Content, { content, classNames }),
               /* @__PURE__ */ jsx(FAQS, { faqs: post.faqs })
             ] }) }),
-            /* @__PURE__ */ jsx("div", { className: "block md:min-w-72 md:sticky md:top-20 md:self-start", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "flex md:w-1/4 md:sticky md:top-20", children: /* @__PURE__ */ jsx(
               TableOfContents,
               {
                 content,

package/dist/components/blog-post/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/blog-post/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { JSONContent } from \"@tiptap/core\";\nimport Link from \"next/link\";\nimport { cn } from \"../../utils/merge\";\nimport { opinlyConfig } from \"../../utils/sdk-config\";\nimport { BlogPostRes } from \"./_types/blog-post\";\nimport {\n  genBlogPostingJSONLD,\n  genBreadcrumbJSONLD,\n  genFaqJSONLD,\n} from \"./_helpers/json-ld\";\nimport { BlogComponentClassNames } from \"./_types/class-names\";\nimport { FAQS } from \"./_components/faq\";\nimport { calculateReadingTime } from \"./_helpers/reading-time\";\nimport { Content } from \"./_components/content\";\nimport { TableOfContents } from \"./_components/table-of-contents\";\nimport { BreadCrumbs } from \"../bread-crumbs\";\nimport { formatDate } from \"../../utils/dates\";\nimport Script from \"next/script\";\n\nexport const BlogPost = ({\n  post,\n  classNames = {},\n}: {\n  post: BlogPostRes;\n  classNames?: BlogComponentClassNames;\n  notFoundComponent?: React.ReactNode;\n}) => {\n  const content = post.content as JSONContent;\n\n  return (\n    <>\n      {/* <Head>\n        <> */}\n      {post.faqs && (\n        <Script\n          strategy=\"beforeInteractive\"\n          type=\"application/ld+json\"\n          dangerouslySetInnerHTML={{\n            __html: JSON.stringify(genFaqJSONLD(post.faqs)).replace(\n              /</g,\n              \"\\\\u003c\"\n            ),\n          }}\n        />\n      )}\n      <Script\n        strategy=\"beforeInteractive\"\n        type=\"application/ld+json\"\n        dangerouslySetInnerHTML={{\n          __html: JSON.stringify(genBlogPostingJSONLD(post)),\n        }}\n      />\n      <Script\n        strategy=\"beforeInteractive\"\n        type=\"application/ld+json\"\n        dangerouslySetInnerHTML={{\n          __html: JSON.stringify(genBreadcrumbJSONLD(post)),\n        }}\n      />\n      {/* </>\n      </Head> */}\n\n      <div className=\"max-w-7xl mx-auto px-4 py-24 flex items-start space-x-8\">\n        <div className=\"flex flex-col gap-12 w-full\">\n          <div className=\"bg-orange-600\">\n            <BreadCrumbs\n              breadcrumbs={[\n                post.folder && {\n                  url: `${opinlyConfig.blogPrefix}/${post.folder.slug}`,\n                  name: post.folder.name,\n                },\n              ]}\n            />\n\n            <h1 className=\"text-4xl font-bold mb-2 leading-tight\">\n              {post.title}\n            </h1>\n            <div className=\"text-sm mb-4\">\n              Author:{\" \"}\n              <Link\n                href={`${opinlyConfig.blogPrefix}/authors/${post.author?.slug}`}\n                className=\"font-medium\"\n              >\n                {post.author?.name}\n              </Link>{\" \"}\n              · {calculateReadingTime(content)} min read ·{\" \"}\n              {formatDate(post.firstPublishedAt as string) || \"Today\"}\n            </div>\n          </div>\n\n          <div\n            className={cn(\n              \"flex flex-col-reverse md:flex-row mx-auto mt-10 gap-12 relative w-full \",\n              classNames.container\n            )}\n          >\n            <article className=\"w-full lg:w-2/3 order-2 lg:order-1 flex items-start space-x-4\">\n              <div className=\"prose w-full\">\n                <Content content={content} classNames={classNames} />\n                <FAQS faqs={post.faqs} />\n              </div>\n            </article>\n            <div className=\"block md:min-w-72 md:sticky md:top-20 md:self-start\">\n              <TableOfContents\n                content={content}\n                author={post.author}\n                post={post}\n              />\n            </div>\n          </div>\n        </div>\n        {/* <div className=\"hidden md:block \">\n        <TableOfContents\n          content={content}\n          author={post.post.author}\n          post={post}\n        />\n      </div> */}\n      </div>\n    </>\n  );\n};\n"],"mappings":"AA+BI,mBAII,KA2CI,YA/CR;AA7BJ,OAAO,UAAU;AACjB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAE7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY;AACrB,SAAS,4BAA4B;AACrC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,OAAO,YAAY;AAEZ,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,aAAa,CAAC;AAChB,MAIM;AACJ,QAAM,UAAU,KAAK;AAErB,SACE,iCAGG;AAAA,SAAK,QACJ;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAK;AAAA,QACL,yBAAyB;AAAA,UACvB,QAAQ,KAAK,UAAU,aAAa,KAAK,IAAI,CAAC,EAAE;AAAA,YAC9C;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAK;AAAA,QACL,yBAAyB;AAAA,UACvB,QAAQ,KAAK,UAAU,qBAAqB,IAAI,CAAC;AAAA,QACnD;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAK;AAAA,QACL,yBAAyB;AAAA,UACvB,QAAQ,KAAK,UAAU,oBAAoB,IAAI,CAAC;AAAA,QAClD;AAAA;AAAA,IACF;AAAA,IAIA,oBAAC,SAAI,WAAU,2DACb,+BAAC,SAAI,WAAU,+BACb;AAAA,2BAAC,SAAI,WAAU,iBACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa;AAAA,cACX,KAAK,UAAU;AAAA,gBACb,KAAK,GAAG,aAAa,UAAU,IAAI,KAAK,OAAO,IAAI;AAAA,gBACnD,MAAM,KAAK,OAAO;AAAA,cACpB;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEA,oBAAC,QAAG,WAAU,yCACX,eAAK,OACR;AAAA,QACA,qBAAC,SAAI,WAAU,gBAAe;AAAA;AAAA,UACpB;AAAA,UACR;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,GAAG,aAAa,UAAU,YAAY,KAAK,QAAQ,IAAI;AAAA,cAC7D,WAAU;AAAA,cAET,eAAK,QAAQ;AAAA;AAAA,UAChB;AAAA,UAAQ;AAAA,UAAI;AAAA,UACT,qBAAqB,OAAO;AAAA,UAAE;AAAA,UAAY;AAAA,UAC5C,WAAW,KAAK,gBAA0B,KAAK;AAAA,WAClD;AAAA,SACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,WAAW;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,aAAQ,WAAU,iEACjB,+BAAC,SAAI,WAAU,gBACb;AAAA,kCAAC,WAAQ,SAAkB,YAAwB;AAAA,cACnD,oBAAC,QAAK,MAAM,KAAK,MAAM;AAAA,eACzB,GACF;AAAA,YACA,oBAAC,SAAI,WAAU,uDACb;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,QAAQ,KAAK;AAAA,gBACb;AAAA;AAAA,YACF,GACF;AAAA;AAAA;AAAA,MACF;AAAA,OACF,GAQF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/blog-post/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { JSONContent } from \"@tiptap/core\";\nimport Link from \"next/link\";\nimport { cn } from \"../../utils/merge\";\nimport { opinlyConfig } from \"../../utils/sdk-config\";\nimport { BlogPostRes } from \"./_types/blog-post\";\nimport {\n  genBlogPostingJSONLD,\n  genBreadcrumbJSONLD,\n  genFaqJSONLD,\n} from \"./_helpers/json-ld\";\nimport { BlogComponentClassNames } from \"./_types/class-names\";\nimport { FAQS } from \"./_components/faq\";\nimport { calculateReadingTime } from \"./_helpers/reading-time\";\nimport { Content } from \"./_components/content\";\nimport { TableOfContents } from \"./_components/table-of-contents\";\nimport { BreadCrumbs } from \"../bread-crumbs\";\nimport { formatDate } from \"../../utils/dates\";\nimport Script from \"next/script\";\n\nexport const BlogPost = ({\n  post,\n  classNames = {},\n}: {\n  post: BlogPostRes;\n  classNames?: BlogComponentClassNames;\n  notFoundComponent?: React.ReactNode;\n}) => {\n  const content = post.content as JSONContent;\n\n  console.log(\"is app router\", !opinlyConfig.pagesRouter);\n\n  return (\n    <>\n      {post.faqs && (\n        <Script\n          strategy=\"beforeInteractive\"\n          type=\"application/ld+json\"\n          dangerouslySetInnerHTML={{\n            __html: JSON.stringify(genFaqJSONLD(post.faqs)).replace(\n              /</g,\n              \"\\\\u003c\"\n            ),\n          }}\n        />\n      )}\n      <Script\n        strategy=\"beforeInteractive\"\n        type=\"application/ld+json\"\n        dangerouslySetInnerHTML={{\n          __html: JSON.stringify(genBlogPostingJSONLD(post)),\n        }}\n      />\n      <Script\n        strategy=\"beforeInteractive\"\n        type=\"application/ld+json\"\n        dangerouslySetInnerHTML={{\n          __html: JSON.stringify(genBreadcrumbJSONLD(post)),\n        }}\n      />\n      <div className=\"max-w-7xl mx-auto px-4 py-24 flex items-start space-x-8\">\n        <div className=\"flex flex-col gap-12 w-full\">\n          <div>\n            <BreadCrumbs\n              breadcrumbs={[\n                post.folder && {\n                  url: `${opinlyConfig.blogPrefix}/${post.folder.slug}`,\n                  name: post.folder.name,\n                },\n              ]}\n            />\n\n            <h1 className=\"text-op-heading text-4xl font-bold mb-2 leading-tight\">\n              {post.title}\n            </h1>\n            <div className=\"text-sm mb-4 text-op-muted space-x-1\">\n              {post.author && (\n                <>\n                  <Link\n                    href={`${opinlyConfig.blogPrefix}/authors/${post.author?.slug}`}\n                    className=\"font-medium\"\n                  >\n                    {post.author?.name}\n                  </Link>{\" \"}\n                  <span className=\"text-op-muted\">·</span>\n                </>\n              )}\n              <span>\n                {calculateReadingTime(content)} min read <span>·</span>\n              </span>\n              <span>\n                {formatDate(post.firstPublishedAt as string) || \"Today\"}\n              </span>\n            </div>\n          </div>\n\n          <div\n            className={cn(\n              \"flex md:space-x-12 flex-col mx-auto w-full\",\n              \"md:flex-row-reverse\",\n              classNames.container\n            )}\n          >\n            <article className=\"w-full md:w-3/4 order-2 md:order-1 flex items-start\">\n              <div className=\"prose w-full \">\n                <Content content={content} classNames={classNames} />\n                <FAQS faqs={post.faqs} />\n              </div>\n            </article>\n            <div className=\"flex md:w-1/4 md:sticky md:top-20\">\n              <TableOfContents\n                content={content}\n                author={post.author}\n                post={post}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n};\n"],"mappings":"AAmCQ,SA0CQ,UA1CR,KA0CQ,YA1CR;AAjCR,OAAO,UAAU;AACjB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAE7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY;AACrB,SAAS,4BAA4B;AACrC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,OAAO,YAAY;AAEZ,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,aAAa,CAAC;AAChB,MAIM;AACJ,QAAM,UAAU,KAAK;AAErB,UAAQ,IAAI,iBAAiB,CAAC,aAAa,WAAW;AAEtD,SACE,iCACG;AAAA,SAAK,QACJ;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAK;AAAA,QACL,yBAAyB;AAAA,UACvB,QAAQ,KAAK,UAAU,aAAa,KAAK,IAAI,CAAC,EAAE;AAAA,YAC9C;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAK;AAAA,QACL,yBAAyB;AAAA,UACvB,QAAQ,KAAK,UAAU,qBAAqB,IAAI,CAAC;AAAA,QACnD;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAK;AAAA,QACL,yBAAyB;AAAA,UACvB,QAAQ,KAAK,UAAU,oBAAoB,IAAI,CAAC;AAAA,QAClD;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,SAAI,WAAU,2DACb,+BAAC,SAAI,WAAU,+BACb;AAAA,2BAAC,SACC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa;AAAA,cACX,KAAK,UAAU;AAAA,gBACb,KAAK,GAAG,aAAa,UAAU,IAAI,KAAK,OAAO,IAAI;AAAA,gBACnD,MAAM,KAAK,OAAO;AAAA,cACpB;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEA,oBAAC,QAAG,WAAU,yDACX,eAAK,OACR;AAAA,QACA,qBAAC,SAAI,WAAU,wCACZ;AAAA,eAAK,UACJ,iCACE;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM,GAAG,aAAa,UAAU,YAAY,KAAK,QAAQ,IAAI;AAAA,gBAC7D,WAAU;AAAA,gBAET,eAAK,QAAQ;AAAA;AAAA,YAChB;AAAA,YAAQ;AAAA,YACR,oBAAC,UAAK,WAAU,iBAAgB,kBAAC;AAAA,aACnC;AAAA,UAEF,qBAAC,UACE;AAAA,iCAAqB,OAAO;AAAA,YAAE;AAAA,YAAU,oBAAC,UAAK,kBAAC;AAAA,aAClD;AAAA,UACA,oBAAC,UACE,qBAAW,KAAK,gBAA0B,KAAK,SAClD;AAAA,WACF;AAAA,SACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA,WAAW;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,aAAQ,WAAU,uDACjB,+BAAC,SAAI,WAAU,iBACb;AAAA,kCAAC,WAAQ,SAAkB,YAAwB;AAAA,cACnD,oBAAC,QAAK,MAAM,KAAK,MAAM;AAAA,eACzB,GACF;AAAA,YACA,oBAAC,SAAI,WAAU,qCACb;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,QAAQ,KAAK;AAAA,gBACb;AAAA;AAAA,YACF,GACF;AAAA;AAAA;AAAA,MACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/bread-crumbs.cjs

@@ -38,7 +38,7 @@ var import_sdk_config = require("../utils/sdk-config");
 const BreadCrumbs = ({
   breadcrumbs
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "text-sm text-orange-100 text-muted-foreground mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ol", { className: "list-reset flex space-x-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "text-sm text-muted-foreground mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ol", { className: "list-reset flex space-x-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: "/", className: "font-bold", children: import_sdk_config.opinlyConfig.siteName }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "/" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: import_sdk_config.opinlyConfig.blogPrefix, className: "font-bold", children: "Blog" }),

package/dist/components/bread-crumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/bread-crumbs.tsx"],"sourcesContent":["import Link from \"next/link\";\nimport { Fragment } from \"react\";\nimport { opinlyConfig } from \"../utils/sdk-config\";\n\nexport const BreadCrumbs = ({\n  breadcrumbs,\n}: {\n  breadcrumbs?: (\n    | {\n        name: string;\n        url?: string;\n      }\n    | null\n    | undefined\n  )[];\n}) => {\n  return (\n    <nav className=\"text-sm text-orange-100 text-muted-foreground mb-4\">\n      <ol className=\"list-reset flex space-x-2\">\n        <Link href=\"/\" className=\"font-bold\">\n          {opinlyConfig.siteName}\n        </Link>\n        <span>/</span>\n        <Link href={opinlyConfig.blogPrefix} className=\"font-bold\">\n          Blog\n        </Link>\n        {breadcrumbs?.map((breadcrumb, index) => {\n          if (!breadcrumb) {\n            return null;\n          }\n\n          return (\n            <Fragment key={index}>\n              <span>/</span>\n              {breadcrumb.url ? (\n                <Link href={breadcrumb.url} className=\"font-bold\">\n                  {breadcrumb.name}\n                </Link>\n              ) : (\n                <span className=\"font-bold\">{breadcrumb.name}</span>\n              )}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBQ;AAnBR,kBAAiB;AACjB,mBAAyB;AACzB,wBAA6B;AAEtB,MAAM,cAAc,CAAC;AAAA,EAC1B;AACF,MASM;AACJ,SACE,4CAAC,SAAI,WAAU,sDACb,uDAAC,QAAG,WAAU,6BACZ;AAAA,gDAAC,YAAAA,SAAA,EAAK,MAAK,KAAI,WAAU,aACtB,yCAAa,UAChB;AAAA,IACA,4CAAC,UAAK,eAAC;AAAA,IACP,4CAAC,YAAAA,SAAA,EAAK,MAAM,+BAAa,YAAY,WAAU,aAAY,kBAE3D;AAAA,IACC,aAAa,IAAI,CAAC,YAAY,UAAU;AACvC,UAAI,CAAC,YAAY;AACf,eAAO;AAAA,MACT;AAEA,aACE,6CAAC,yBACC;AAAA,oDAAC,UAAK,eAAC;AAAA,QACN,WAAW,MACV,4CAAC,YAAAA,SAAA,EAAK,MAAM,WAAW,KAAK,WAAU,aACnC,qBAAW,MACd,IAEA,4CAAC,UAAK,WAAU,aAAa,qBAAW,MAAK;AAAA,WAPlC,KASf;AAAA,IAEJ,CAAC;AAAA,KACH,GACF;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../../src/components/bread-crumbs.tsx"],"sourcesContent":["import Link from \"next/link\";\nimport { Fragment } from \"react\";\nimport { opinlyConfig } from \"../utils/sdk-config\";\n\nexport const BreadCrumbs = ({\n  breadcrumbs,\n}: {\n  breadcrumbs?: (\n    | {\n        name: string;\n        url?: string;\n      }\n    | null\n    | undefined\n  )[];\n}) => {\n  return (\n    <nav className=\"text-sm text-muted-foreground mb-4\">\n      <ol className=\"list-reset flex space-x-2\">\n        <Link href=\"/\" className=\"font-bold\">\n          {opinlyConfig.siteName}\n        </Link>\n        <span>/</span>\n        <Link href={opinlyConfig.blogPrefix} className=\"font-bold\">\n          Blog\n        </Link>\n        {breadcrumbs?.map((breadcrumb, index) => {\n          if (!breadcrumb) {\n            return null;\n          }\n\n          return (\n            <Fragment key={index}>\n              <span>/</span>\n              {breadcrumb.url ? (\n                <Link href={breadcrumb.url} className=\"font-bold\">\n                  {breadcrumb.name}\n                </Link>\n              ) : (\n                <span className=\"font-bold\">{breadcrumb.name}</span>\n              )}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBQ;AAnBR,kBAAiB;AACjB,mBAAyB;AACzB,wBAA6B;AAEtB,MAAM,cAAc,CAAC;AAAA,EAC1B;AACF,MASM;AACJ,SACE,4CAAC,SAAI,WAAU,sCACb,uDAAC,QAAG,WAAU,6BACZ;AAAA,gDAAC,YAAAA,SAAA,EAAK,MAAK,KAAI,WAAU,aACtB,yCAAa,UAChB;AAAA,IACA,4CAAC,UAAK,eAAC;AAAA,IACP,4CAAC,YAAAA,SAAA,EAAK,MAAM,+BAAa,YAAY,WAAU,aAAY,kBAE3D;AAAA,IACC,aAAa,IAAI,CAAC,YAAY,UAAU;AACvC,UAAI,CAAC,YAAY;AACf,eAAO;AAAA,MACT;AAEA,aACE,6CAAC,yBACC;AAAA,oDAAC,UAAK,eAAC;AAAA,QACN,WAAW,MACV,4CAAC,YAAAA,SAAA,EAAK,MAAM,WAAW,KAAK,WAAU,aACnC,qBAAW,MACd,IAEA,4CAAC,UAAK,WAAU,aAAa,qBAAW,MAAK;AAAA,WAPlC,KASf;AAAA,IAEJ,CAAC;AAAA,KACH,GACF;AAEJ;","names":["Link"]}

package/dist/components/bread-crumbs.js

@@ -5,7 +5,7 @@ import { opinlyConfig } from "../utils/sdk-config";
 const BreadCrumbs = ({
   breadcrumbs
 }) => {
-  return /* @__PURE__ */ jsx("nav", { className: "text-sm text-orange-100 text-muted-foreground mb-4", children: /* @__PURE__ */ jsxs("ol", { className: "list-reset flex space-x-2", children: [
+  return /* @__PURE__ */ jsx("nav", { className: "text-sm text-muted-foreground mb-4", children: /* @__PURE__ */ jsxs("ol", { className: "list-reset flex space-x-2", children: [
     /* @__PURE__ */ jsx(Link, { href: "/", className: "font-bold", children: opinlyConfig.siteName }),
     /* @__PURE__ */ jsx("span", { children: "/" }),
     /* @__PURE__ */ jsx(Link, { href: opinlyConfig.blogPrefix, className: "font-bold", children: "Blog" }),

package/dist/components/bread-crumbs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/bread-crumbs.tsx"],"sourcesContent":["import Link from \"next/link\";\nimport { Fragment } from \"react\";\nimport { opinlyConfig } from \"../utils/sdk-config\";\n\nexport const BreadCrumbs = ({\n  breadcrumbs,\n}: {\n  breadcrumbs?: (\n    | {\n        name: string;\n        url?: string;\n      }\n    | null\n    | undefined\n  )[];\n}) => {\n  return (\n    <nav className=\"text-sm text-orange-100 text-muted-foreground mb-4\">\n      <ol className=\"list-reset flex space-x-2\">\n        <Link href=\"/\" className=\"font-bold\">\n          {opinlyConfig.siteName}\n        </Link>\n        <span>/</span>\n        <Link href={opinlyConfig.blogPrefix} className=\"font-bold\">\n          Blog\n        </Link>\n        {breadcrumbs?.map((breadcrumb, index) => {\n          if (!breadcrumb) {\n            return null;\n          }\n\n          return (\n            <Fragment key={index}>\n              <span>/</span>\n              {breadcrumb.url ? (\n                <Link href={breadcrumb.url} className=\"font-bold\">\n                  {breadcrumb.name}\n                </Link>\n              ) : (\n                <span className=\"font-bold\">{breadcrumb.name}</span>\n              )}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"mappings":"AAmBQ,cAaI,YAbJ;AAnBR,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAEtB,MAAM,cAAc,CAAC;AAAA,EAC1B;AACF,MASM;AACJ,SACE,oBAAC,SAAI,WAAU,sDACb,+BAAC,QAAG,WAAU,6BACZ;AAAA,wBAAC,QAAK,MAAK,KAAI,WAAU,aACtB,uBAAa,UAChB;AAAA,IACA,oBAAC,UAAK,eAAC;AAAA,IACP,oBAAC,QAAK,MAAM,aAAa,YAAY,WAAU,aAAY,kBAE3D;AAAA,IACC,aAAa,IAAI,CAAC,YAAY,UAAU;AACvC,UAAI,CAAC,YAAY;AACf,eAAO;AAAA,MACT;AAEA,aACE,qBAAC,YACC;AAAA,4BAAC,UAAK,eAAC;AAAA,QACN,WAAW,MACV,oBAAC,QAAK,MAAM,WAAW,KAAK,WAAU,aACnC,qBAAW,MACd,IAEA,oBAAC,UAAK,WAAU,aAAa,qBAAW,MAAK;AAAA,WAPlC,KASf;AAAA,IAEJ,CAAC;AAAA,KACH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/bread-crumbs.tsx"],"sourcesContent":["import Link from \"next/link\";\nimport { Fragment } from \"react\";\nimport { opinlyConfig } from \"../utils/sdk-config\";\n\nexport const BreadCrumbs = ({\n  breadcrumbs,\n}: {\n  breadcrumbs?: (\n    | {\n        name: string;\n        url?: string;\n      }\n    | null\n    | undefined\n  )[];\n}) => {\n  return (\n    <nav className=\"text-sm text-muted-foreground mb-4\">\n      <ol className=\"list-reset flex space-x-2\">\n        <Link href=\"/\" className=\"font-bold\">\n          {opinlyConfig.siteName}\n        </Link>\n        <span>/</span>\n        <Link href={opinlyConfig.blogPrefix} className=\"font-bold\">\n          Blog\n        </Link>\n        {breadcrumbs?.map((breadcrumb, index) => {\n          if (!breadcrumb) {\n            return null;\n          }\n\n          return (\n            <Fragment key={index}>\n              <span>/</span>\n              {breadcrumb.url ? (\n                <Link href={breadcrumb.url} className=\"font-bold\">\n                  {breadcrumb.name}\n                </Link>\n              ) : (\n                <span className=\"font-bold\">{breadcrumb.name}</span>\n              )}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"mappings":"AAmBQ,cAaI,YAbJ;AAnBR,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAEtB,MAAM,cAAc,CAAC;AAAA,EAC1B;AACF,MASM;AACJ,SACE,oBAAC,SAAI,WAAU,sCACb,+BAAC,QAAG,WAAU,6BACZ;AAAA,wBAAC,QAAK,MAAK,KAAI,WAAU,aACtB,uBAAa,UAChB;AAAA,IACA,oBAAC,UAAK,eAAC;AAAA,IACP,oBAAC,QAAK,MAAM,aAAa,YAAY,WAAU,aAAY,kBAE3D;AAAA,IACC,aAAa,IAAI,CAAC,YAAY,UAAU;AACvC,UAAI,CAAC,YAAY;AACf,eAAO;AAAA,MACT;AAEA,aACE,qBAAC,YACC;AAAA,4BAAC,UAAK,eAAC;AAAA,QACN,WAAW,MACV,oBAAC,QAAK,MAAM,WAAW,KAAK,WAAU,aACnC,qBAAW,MACd,IAEA,oBAAC,UAAK,WAAU,aAAa,qBAAW,MAAK;AAAA,WAPlC,KASf;AAAA,IAEJ,CAAC;AAAA,KACH,GACF;AAEJ;","names":[]}

package/dist/components/folder-page/index.cjs

@@ -24,20 +24,55 @@ module.exports = __toCommonJS(folder_page_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_post_preview = require("../post-preview");
 var import_bread_crumbs = require("../bread-crumbs");
+var import_next_seo = require("next-seo");
+var import_sdk_config = require("../../utils/sdk-config");
 const FolderPage = ({
   folder
 }) => {
-  console.log("folder", JSON.stringify(folder, null, 2));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-6xl mx-auto px-4 py-10", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bread_crumbs.BreadCrumbs, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-4xl font-bold mb-2", children: folder.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground max-w-2xl mb-8", children: folder.description || `Explore articles about ${folder.name}.` }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8", children: [
-      folder.posts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-muted-foreground", children: "No posts added yet" }),
-      folder.posts.map((post) => {
-        console.log("post.image", post.image);
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_post_preview.PostPreview, { post }, post.slug);
-      })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_next_seo.BreadcrumbJsonLd,
+      {
+        useAppDir: !import_sdk_config.opinlyConfig.pagesRouter,
+        itemListElements: [
+          {
+            position: 1,
+            name: import_sdk_config.opinlyConfig.siteName,
+            item: `${import_sdk_config.opinlyConfig.siteUrl}`
+          },
+          {
+            position: 2,
+            name: "Blog",
+            item: import_sdk_config.opinlyConfig.blogUrl
+          },
+          {
+            position: 3,
+            name: folder.name,
+            item: `${import_sdk_config.opinlyConfig.blogUrl}/${folder.slug}`
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-6xl mx-auto px-4 py-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_bread_crumbs.BreadCrumbs,
+        {
+          breadcrumbs: [
+            {
+              name: folder.name,
+              url: `${import_sdk_config.opinlyConfig.blogUrl}/${folder.slug}`
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-4xl font-bold mb-2", children: folder.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground max-w-2xl mb-8", children: folder.description || `Explore articles about ${folder.name}.` }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8", children: [
+        folder.posts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-muted-foreground", children: "No posts added yet" }),
+        folder.posts.map((post) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_post_preview.PostPreview, { post }, post.slug);
+        })
+      ] })
     ] })
   ] });
 };

package/dist/components/folder-page/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/folder-page/index.tsx"],"sourcesContent":["import { Opinly } from \"@opinly/backend\";\nimport { PostPreview } from \"../post-preview\";\nimport { BreadCrumbs } from \"../bread-crumbs\";\n\nexport const FolderPage = ({\n  folder,\n}: {\n  folder: Extract<\n    Awaited<ReturnType<Opinly[\"content\"][\"blog\"]>>,\n    { type: \"folder\" }\n  >[\"data\"];\n}) => {\n  console.log(\"folder\", JSON.stringify(folder, null, 2));\n  return (\n    <div className=\"max-w-6xl mx-auto px-4 py-10\">\n      <BreadCrumbs />\n\n      <h1 className=\"text-4xl font-bold mb-2\">{folder.name}</h1>\n      <p className=\"text-muted-foreground max-w-2xl mb-8\">\n        {folder.description || `Explore articles about ${folder.name}.`}\n      </p>\n\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\n        {folder.posts.length === 0 && (\n          <div className=\"text-muted-foreground\">No posts added yet</div>\n        )}\n        {folder.posts.map((post) => {\n          console.log(\"post.image\", post.image);\n          return <PostPreview key={post.slug} post={post} />;\n        })}\n      </div>\n    </div>\n  );\n};\n\nfunction formatDate(dateStr: string) {\n  return new Date(dateStr).toLocaleDateString(\"en-GB\", {\n    day: \"2-digit\",\n    month: \"short\",\n    year: \"numeric\",\n  });\n}\n\nfunction formatMinutes(description: string | null) {\n  // Fake estimate based on length of description\n  if (!description) return \"5 min read\";\n  const words = description.split(\" \").length;\n  const mins = Math.ceil(words / 200);\n  return `${mins} min read`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeM;AAdN,0BAA4B;AAC5B,0BAA4B;AAErB,MAAM,aAAa,CAAC;AAAA,EACzB;AACF,MAKM;AACJ,UAAQ,IAAI,UAAU,KAAK,UAAU,QAAQ,MAAM,CAAC,CAAC;AACrD,SACE,6CAAC,SAAI,WAAU,gCACb;AAAA,gDAAC,mCAAY;AAAA,IAEb,4CAAC,QAAG,WAAU,2BAA2B,iBAAO,MAAK;AAAA,IACrD,4CAAC,OAAE,WAAU,wCACV,iBAAO,eAAe,0BAA0B,OAAO,IAAI,KAC9D;AAAA,IAEA,6CAAC,SAAI,WAAU,wDACZ;AAAA,aAAO,MAAM,WAAW,KACvB,4CAAC,SAAI,WAAU,yBAAwB,gCAAkB;AAAA,MAE1D,OAAO,MAAM,IAAI,CAAC,SAAS;AAC1B,gBAAQ,IAAI,cAAc,KAAK,KAAK;AACpC,eAAO,4CAAC,mCAA4B,QAAX,KAAK,IAAkB;AAAA,MAClD,CAAC;AAAA,OACH;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW,SAAiB;AACnC,SAAO,IAAI,KAAK,OAAO,EAAE,mBAAmB,SAAS;AAAA,IACnD,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AACH;AAEA,SAAS,cAAc,aAA4B;AAEjD,MAAI,CAAC,YAAa,QAAO;AACzB,QAAM,QAAQ,YAAY,MAAM,GAAG,EAAE;AACrC,QAAM,OAAO,KAAK,KAAK,QAAQ,GAAG;AAClC,SAAO,GAAG,IAAI;AAChB;","names":[]}
+{"version":3,"sources":["../../../src/components/folder-page/index.tsx"],"sourcesContent":["import { Opinly } from \"@opinly/backend\";\nimport { PostPreview } from \"../post-preview\";\nimport { BreadCrumbs } from \"../bread-crumbs\";\nimport { BreadcrumbJsonLd } from \"next-seo\";\nimport { opinlyConfig } from \"../../utils/sdk-config\";\n\nexport const FolderPage = ({\n  folder,\n}: {\n  folder: Extract<\n    Awaited<ReturnType<Opinly[\"content\"][\"blog\"]>>,\n    { type: \"folder\" }\n  >[\"data\"];\n}) => {\n  return (\n    <>\n      <BreadcrumbJsonLd\n        useAppDir={!opinlyConfig.pagesRouter}\n        itemListElements={[\n          {\n            position: 1,\n            name: opinlyConfig.siteName,\n            item: `${opinlyConfig.siteUrl}`,\n          },\n          {\n            position: 2,\n            name: \"Blog\",\n            item: opinlyConfig.blogUrl,\n          },\n          {\n            position: 3,\n            name: folder.name,\n            item: `${opinlyConfig.blogUrl}/${folder.slug}`,\n          },\n        ]}\n      />\n\n      <div className=\"max-w-6xl mx-auto px-4 py-10\">\n        <BreadCrumbs\n          breadcrumbs={[\n            {\n              name: folder.name,\n              url: `${opinlyConfig.blogUrl}/${folder.slug}`,\n            },\n          ]}\n        />\n\n        <h1 className=\"text-4xl font-bold mb-2\">{folder.name}</h1>\n        <p className=\"text-muted-foreground max-w-2xl mb-8\">\n          {folder.description || `Explore articles about ${folder.name}.`}\n        </p>\n\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\n          {folder.posts.length === 0 && (\n            <div className=\"text-muted-foreground\">No posts added yet</div>\n          )}\n          {folder.posts.map((post) => {\n            return <PostPreview key={post.slug} post={post} />;\n          })}\n        </div>\n      </div>\n    </>\n  );\n};\n\nfunction formatDate(dateStr: string) {\n  return new Date(dateStr).toLocaleDateString(\"en-GB\", {\n    day: \"2-digit\",\n    month: \"short\",\n    year: \"numeric\",\n  });\n}\n\nfunction formatMinutes(description: string | null) {\n  // Fake estimate based on length of description\n  if (!description) return \"5 min read\";\n  const words = description.split(\" \").length;\n  const mins = Math.ceil(words / 200);\n  return `${mins} min read`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI;AAdJ,0BAA4B;AAC5B,0BAA4B;AAC5B,sBAAiC;AACjC,wBAA6B;AAEtB,MAAM,aAAa,CAAC;AAAA,EACzB;AACF,MAKM;AACJ,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,+BAAa;AAAA,QACzB,kBAAkB;AAAA,UAChB;AAAA,YACE,UAAU;AAAA,YACV,MAAM,+BAAa;AAAA,YACnB,MAAM,GAAG,+BAAa,OAAO;AAAA,UAC/B;AAAA,UACA;AAAA,YACE,UAAU;AAAA,YACV,MAAM;AAAA,YACN,MAAM,+BAAa;AAAA,UACrB;AAAA,UACA;AAAA,YACE,UAAU;AAAA,YACV,MAAM,OAAO;AAAA,YACb,MAAM,GAAG,+BAAa,OAAO,IAAI,OAAO,IAAI;AAAA,UAC9C;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IAEA,6CAAC,SAAI,WAAU,gCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,YACX;AAAA,cACE,MAAM,OAAO;AAAA,cACb,KAAK,GAAG,+BAAa,OAAO,IAAI,OAAO,IAAI;AAAA,YAC7C;AAAA,UACF;AAAA;AAAA,MACF;AAAA,MAEA,4CAAC,QAAG,WAAU,2BAA2B,iBAAO,MAAK;AAAA,MACrD,4CAAC,OAAE,WAAU,wCACV,iBAAO,eAAe,0BAA0B,OAAO,IAAI,KAC9D;AAAA,MAEA,6CAAC,SAAI,WAAU,wDACZ;AAAA,eAAO,MAAM,WAAW,KACvB,4CAAC,SAAI,WAAU,yBAAwB,gCAAkB;AAAA,QAE1D,OAAO,MAAM,IAAI,CAAC,SAAS;AAC1B,iBAAO,4CAAC,mCAA4B,QAAX,KAAK,IAAkB;AAAA,QAClD,CAAC;AAAA,SACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW,SAAiB;AACnC,SAAO,IAAI,KAAK,OAAO,EAAE,mBAAmB,SAAS;AAAA,IACnD,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AACH;AAEA,SAAS,cAAc,aAA4B;AAEjD,MAAI,CAAC,YAAa,QAAO;AACzB,QAAM,QAAQ,YAAY,MAAM,GAAG,EAAE;AACrC,QAAM,OAAO,KAAK,KAAK,QAAQ,GAAG;AAClC,SAAO,GAAG,IAAI;AAChB;","names":[]}

package/dist/components/folder-page/index.js

@@ -1,20 +1,55 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { PostPreview } from "../post-preview";
 import { BreadCrumbs } from "../bread-crumbs";
+import { BreadcrumbJsonLd } from "next-seo";
+import { opinlyConfig } from "../../utils/sdk-config";
 const FolderPage = ({
   folder
 }) => {
-  console.log("folder", JSON.stringify(folder, null, 2));
-  return /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-4 py-10", children: [
-    /* @__PURE__ */ jsx(BreadCrumbs, {}),
-    /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold mb-2", children: folder.name }),
-    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-2xl mb-8", children: folder.description || `Explore articles about ${folder.name}.` }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8", children: [
-      folder.posts.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "No posts added yet" }),
-      folder.posts.map((post) => {
-        console.log("post.image", post.image);
-        return /* @__PURE__ */ jsx(PostPreview, { post }, post.slug);
-      })
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BreadcrumbJsonLd,
+      {
+        useAppDir: !opinlyConfig.pagesRouter,
+        itemListElements: [
+          {
+            position: 1,
+            name: opinlyConfig.siteName,
+            item: `${opinlyConfig.siteUrl}`
+          },
+          {
+            position: 2,
+            name: "Blog",
+            item: opinlyConfig.blogUrl
+          },
+          {
+            position: 3,
+            name: folder.name,
+            item: `${opinlyConfig.blogUrl}/${folder.slug}`
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-4 py-10", children: [
+      /* @__PURE__ */ jsx(
+        BreadCrumbs,
+        {
+          breadcrumbs: [
+            {
+              name: folder.name,
+              url: `${opinlyConfig.blogUrl}/${folder.slug}`
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold mb-2", children: folder.name }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-2xl mb-8", children: folder.description || `Explore articles about ${folder.name}.` }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8", children: [
+        folder.posts.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "No posts added yet" }),
+        folder.posts.map((post) => {
+          return /* @__PURE__ */ jsx(PostPreview, { post }, post.slug);
+        })
+      ] })
     ] })
   ] });
 };

package/dist/components/folder-page/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/folder-page/index.tsx"],"sourcesContent":["import { Opinly } from \"@opinly/backend\";\nimport { PostPreview } from \"../post-preview\";\nimport { BreadCrumbs } from \"../bread-crumbs\";\n\nexport const FolderPage = ({\n  folder,\n}: {\n  folder: Extract<\n    Awaited<ReturnType<Opinly[\"content\"][\"blog\"]>>,\n    { type: \"folder\" }\n  >[\"data\"];\n}) => {\n  console.log(\"folder\", JSON.stringify(folder, null, 2));\n  return (\n    <div className=\"max-w-6xl mx-auto px-4 py-10\">\n      <BreadCrumbs />\n\n      <h1 className=\"text-4xl font-bold mb-2\">{folder.name}</h1>\n      <p className=\"text-muted-foreground max-w-2xl mb-8\">\n        {folder.description || `Explore articles about ${folder.name}.`}\n      </p>\n\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\n        {folder.posts.length === 0 && (\n          <div className=\"text-muted-foreground\">No posts added yet</div>\n        )}\n        {folder.posts.map((post) => {\n          console.log(\"post.image\", post.image);\n          return <PostPreview key={post.slug} post={post} />;\n        })}\n      </div>\n    </div>\n  );\n};\n\nfunction formatDate(dateStr: string) {\n  return new Date(dateStr).toLocaleDateString(\"en-GB\", {\n    day: \"2-digit\",\n    month: \"short\",\n    year: \"numeric\",\n  });\n}\n\nfunction formatMinutes(description: string | null) {\n  // Fake estimate based on length of description\n  if (!description) return \"5 min read\";\n  const words = description.split(\" \").length;\n  const mins = Math.ceil(words / 200);\n  return `${mins} min read`;\n}\n"],"mappings":"AAeM,cAOA,YAPA;AAdN,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAErB,MAAM,aAAa,CAAC;AAAA,EACzB;AACF,MAKM;AACJ,UAAQ,IAAI,UAAU,KAAK,UAAU,QAAQ,MAAM,CAAC,CAAC;AACrD,SACE,qBAAC,SAAI,WAAU,gCACb;AAAA,wBAAC,eAAY;AAAA,IAEb,oBAAC,QAAG,WAAU,2BAA2B,iBAAO,MAAK;AAAA,IACrD,oBAAC,OAAE,WAAU,wCACV,iBAAO,eAAe,0BAA0B,OAAO,IAAI,KAC9D;AAAA,IAEA,qBAAC,SAAI,WAAU,wDACZ;AAAA,aAAO,MAAM,WAAW,KACvB,oBAAC,SAAI,WAAU,yBAAwB,gCAAkB;AAAA,MAE1D,OAAO,MAAM,IAAI,CAAC,SAAS;AAC1B,gBAAQ,IAAI,cAAc,KAAK,KAAK;AACpC,eAAO,oBAAC,eAA4B,QAAX,KAAK,IAAkB;AAAA,MAClD,CAAC;AAAA,OACH;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW,SAAiB;AACnC,SAAO,IAAI,KAAK,OAAO,EAAE,mBAAmB,SAAS;AAAA,IACnD,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AACH;AAEA,SAAS,cAAc,aAA4B;AAEjD,MAAI,CAAC,YAAa,QAAO;AACzB,QAAM,QAAQ,YAAY,MAAM,GAAG,EAAE;AACrC,QAAM,OAAO,KAAK,KAAK,QAAQ,GAAG;AAClC,SAAO,GAAG,IAAI;AAChB;","names":[]}
+{"version":3,"sources":["../../../src/components/folder-page/index.tsx"],"sourcesContent":["import { Opinly } from \"@opinly/backend\";\nimport { PostPreview } from \"../post-preview\";\nimport { BreadCrumbs } from \"../bread-crumbs\";\nimport { BreadcrumbJsonLd } from \"next-seo\";\nimport { opinlyConfig } from \"../../utils/sdk-config\";\n\nexport const FolderPage = ({\n  folder,\n}: {\n  folder: Extract<\n    Awaited<ReturnType<Opinly[\"content\"][\"blog\"]>>,\n    { type: \"folder\" }\n  >[\"data\"];\n}) => {\n  return (\n    <>\n      <BreadcrumbJsonLd\n        useAppDir={!opinlyConfig.pagesRouter}\n        itemListElements={[\n          {\n            position: 1,\n            name: opinlyConfig.siteName,\n            item: `${opinlyConfig.siteUrl}`,\n          },\n          {\n            position: 2,\n            name: \"Blog\",\n            item: opinlyConfig.blogUrl,\n          },\n          {\n            position: 3,\n            name: folder.name,\n            item: `${opinlyConfig.blogUrl}/${folder.slug}`,\n          },\n        ]}\n      />\n\n      <div className=\"max-w-6xl mx-auto px-4 py-10\">\n        <BreadCrumbs\n          breadcrumbs={[\n            {\n              name: folder.name,\n              url: `${opinlyConfig.blogUrl}/${folder.slug}`,\n            },\n          ]}\n        />\n\n        <h1 className=\"text-4xl font-bold mb-2\">{folder.name}</h1>\n        <p className=\"text-muted-foreground max-w-2xl mb-8\">\n          {folder.description || `Explore articles about ${folder.name}.`}\n        </p>\n\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\n          {folder.posts.length === 0 && (\n            <div className=\"text-muted-foreground\">No posts added yet</div>\n          )}\n          {folder.posts.map((post) => {\n            return <PostPreview key={post.slug} post={post} />;\n          })}\n        </div>\n      </div>\n    </>\n  );\n};\n\nfunction formatDate(dateStr: string) {\n  return new Date(dateStr).toLocaleDateString(\"en-GB\", {\n    day: \"2-digit\",\n    month: \"short\",\n    year: \"numeric\",\n  });\n}\n\nfunction formatMinutes(description: string | null) {\n  // Fake estimate based on length of description\n  if (!description) return \"5 min read\";\n  const words = description.split(\" \").length;\n  const mins = Math.ceil(words / 200);\n  return `${mins} min read`;\n}\n"],"mappings":"AAeI,mBACE,KAoCE,YArCJ;AAdJ,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAEtB,MAAM,aAAa,CAAC;AAAA,EACzB;AACF,MAKM;AACJ,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,aAAa;AAAA,QACzB,kBAAkB;AAAA,UAChB;AAAA,YACE,UAAU;AAAA,YACV,MAAM,aAAa;AAAA,YACnB,MAAM,GAAG,aAAa,OAAO;AAAA,UAC/B;AAAA,UACA;AAAA,YACE,UAAU;AAAA,YACV,MAAM;AAAA,YACN,MAAM,aAAa;AAAA,UACrB;AAAA,UACA;AAAA,YACE,UAAU;AAAA,YACV,MAAM,OAAO;AAAA,YACb,MAAM,GAAG,aAAa,OAAO,IAAI,OAAO,IAAI;AAAA,UAC9C;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IAEA,qBAAC,SAAI,WAAU,gCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,YACX;AAAA,cACE,MAAM,OAAO;AAAA,cACb,KAAK,GAAG,aAAa,OAAO,IAAI,OAAO,IAAI;AAAA,YAC7C;AAAA,UACF;AAAA;AAAA,MACF;AAAA,MAEA,oBAAC,QAAG,WAAU,2BAA2B,iBAAO,MAAK;AAAA,MACrD,oBAAC,OAAE,WAAU,wCACV,iBAAO,eAAe,0BAA0B,OAAO,IAAI,KAC9D;AAAA,MAEA,qBAAC,SAAI,WAAU,wDACZ;AAAA,eAAO,MAAM,WAAW,KACvB,oBAAC,SAAI,WAAU,yBAAwB,gCAAkB;AAAA,QAE1D,OAAO,MAAM,IAAI,CAAC,SAAS;AAC1B,iBAAO,oBAAC,eAA4B,QAAX,KAAK,IAAkB;AAAA,QAClD,CAAC;AAAA,SACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW,SAAiB;AACnC,SAAO,IAAI,KAAK,OAAO,EAAE,mBAAmB,SAAS;AAAA,IACnD,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AACH;AAEA,SAAS,cAAc,aAA4B;AAEjD,MAAI,CAAC,YAAa,QAAO;AACzB,QAAM,QAAQ,YAAY,MAAM,GAAG,EAAE;AACrC,QAAM,OAAO,KAAK,KAAK,QAAQ,GAAG;AAClC,SAAO,GAAG,IAAI;AAChB;","names":[]}

package/dist/components/home-page/folders.cjs

@@ -36,7 +36,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_link = __toESM(require("next/link"), 1);
 var import_post_preview = require("../post-preview");
 var import_lucide_react = require("lucide-react");
-var import_react = require("react");
 const HomePageFoldersSkeleton = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: Array(2).fill(null).map((_, sectionIdx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-4 mb-5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "animate-pulse space-y-2", children: [
@@ -49,13 +48,14 @@ const HomePageFoldersSkeleton = () => {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-5 w-3/4 bg-gray-200 dark:bg-gray-700 rounded" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-full bg-gray-200 dark:bg-gray-700 rounded" })
       ] }, postIdx)),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center items-center animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-48 bg-gray-200 dark:bg-gray-700 rounded" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center items-center animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-48 bg-gray-200 text-op-heading rounded" }) })
     ] })
   ] }, sectionIdx)) });
 };
-const HomePageFoldersServer = async ({ client }) => {
-  const folders = await client.client.content.homePageFolders.query();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: folders.map((folder) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-4 ", children: [
+const HomePageFolders = ({
+  folders
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-10 mt-20", children: folders.map((folder) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2 mb-20", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_link.default,
@@ -66,10 +66,23 @@ const HomePageFoldersServer = async ({ client }) => {
         },
         folder.slug
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-gray-500", children: folder.description })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-op-muted", children: folder.description })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10 mb-20", children: [
-      folder.posts.filter((post) => post !== null).map((post) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_post_preview.PostPreview, { post }, post.slug)),
+      folder.posts.filter((post) => post !== null).map((post) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_post_preview.PostPreview,
+        {
+          post: {
+            ...post,
+            folder: {
+              name: folder.title,
+              slug: folder.slug,
+              description: folder.description || ""
+            }
+          }
+        },
+        post.slug
+      )),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center w-full h-full items-center ", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_link.default,
         {
@@ -87,9 +100,6 @@ const HomePageFoldersServer = async ({ client }) => {
     ] })
   ] })) });
 };
-const HomePageFolders = ({ client }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HomePageFoldersSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HomePageFoldersServer, { client }) });
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   HomePageFolders,

package/dist/components/home-page/folders.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/home-page/folders.tsx"],"sourcesContent":["import Link from \"next/link\";\nimport { PostPreview } from \"../post-preview\";\nimport { ArrowRight } from \"lucide-react\";\nimport { Opinly } from \"@opinly/backend\";\nimport { Suspense } from \"react\";\n\nexport const HomePageFoldersSkeleton = () => {\n  return (\n    <>\n      {Array(2) // render 2 folder sections\n        .fill(null)\n        .map((_, sectionIdx) => (\n          <div key={sectionIdx} className=\"space-y-4 mb-5\">\n            {/* Folder title + description */}\n            <div className=\"animate-pulse space-y-2\">\n              <div className=\"h-8 w-1/3 bg-gray-200 dark:bg-gray-700 rounded\" />\n              <div className=\"h-4 w-1/2 bg-gray-200 dark:bg-gray-700 rounded\" />\n            </div>\n\n            {/* Posts grid */}\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10\">\n              {Array(3) // 3 post placeholders\n                .fill(null)\n                .map((__, postIdx) => (\n                  <div key={postIdx} className=\"animate-pulse space-y-3\">\n                    {/* Image */}\n                    <div className=\"w-full h-48 bg-gray-200 dark:bg-gray-700 rounded-lg\" />\n                    {/* Title bar */}\n                    <div className=\"h-5 w-3/4 bg-gray-200 dark:bg-gray-700 rounded\" />\n                    {/* Description line */}\n                    <div className=\"h-4 w-full bg-gray-200 dark:bg-gray-700 rounded\" />\n                  </div>\n                ))}\n\n              {/* “View all” link */}\n              <div className=\"flex justify-center items-center animate-pulse\">\n                <div className=\"h-4 w-48 bg-gray-200 dark:bg-gray-700 rounded\" />\n              </div>\n            </div>\n          </div>\n        ))}\n    </>\n  );\n};\n\nconst HomePageFoldersServer = async ({ client }: { client: Opinly }) => {\n  const folders = await client.client.content.homePageFolders.query();\n\n  return (\n    <>\n      {folders.map((folder) => (\n        <div className=\"space-y-4 \">\n          <div className=\"flex flex-col gap-2 mb-20\">\n            <Link\n              key={folder.slug}\n              href={`/blog/${folder.slug}`}\n              className=\"text-3xl\"\n            >\n              {folder.title}\n            </Link>\n            <p className=\"text-sm text-gray-500\">{folder.description}</p>\n          </div>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10 mb-20\">\n            {folder.posts\n              .filter((post) => post !== null)\n              .map((post) => (\n                <PostPreview key={post.slug} post={post as any} />\n              ))}\n            <div className=\"flex justify-center w-full h-full items-center \">\n              <Link\n                href={`/blog/${folder.slug}`}\n                className=\"flex items-center gap-2\"\n              >\n                <span>View all posts in {folder.title}</span>\n                <ArrowRight className=\"w-4 h-4\" />\n              </Link>\n            </div>\n          </div>\n        </div>\n      ))}\n    </>\n  );\n};\n\nexport const HomePageFolders = ({ client }: { client: Opinly }) => {\n  return (\n    <Suspense fallback={<HomePageFoldersSkeleton />}>\n      <HomePageFoldersServer client={client} />\n    </Suspense>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQI;AARJ,kBAAiB;AACjB,0BAA4B;AAC5B,0BAA2B;AAE3B,mBAAyB;AAElB,MAAM,0BAA0B,MAAM;AAC3C,SACE,2EACG,gBAAM,CAAC,EACL,KAAK,IAAI,EACT,IAAI,CAAC,GAAG,eACP,6CAAC,SAAqB,WAAU,kBAE9B;AAAA,iDAAC,SAAI,WAAU,2BACb;AAAA,kDAAC,SAAI,WAAU,kDAAiD;AAAA,MAChE,4CAAC,SAAI,WAAU,kDAAiD;AAAA,OAClE;AAAA,IAGA,6CAAC,SAAI,WAAU,yDACZ;AAAA,YAAM,CAAC,EACL,KAAK,IAAI,EACT,IAAI,CAAC,IAAI,YACR,6CAAC,SAAkB,WAAU,2BAE3B;AAAA,oDAAC,SAAI,WAAU,uDAAsD;AAAA,QAErE,4CAAC,SAAI,WAAU,kDAAiD;AAAA,QAEhE,4CAAC,SAAI,WAAU,mDAAkD;AAAA,WANzD,OAOV,CACD;AAAA,MAGH,4CAAC,SAAI,WAAU,kDACb,sDAAC,SAAI,WAAU,iDAAgD,GACjE;AAAA,OACF;AAAA,OA1BQ,UA2BV,CACD,GACL;AAEJ;AAEA,MAAM,wBAAwB,OAAO,EAAE,OAAO,MAA0B;AACtE,QAAM,UAAU,MAAM,OAAO,OAAO,QAAQ,gBAAgB,MAAM;AAElE,SACE,2EACG,kBAAQ,IAAI,CAAC,WACZ,6CAAC,SAAI,WAAU,cACb;AAAA,iDAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UAEC,MAAM,SAAS,OAAO,IAAI;AAAA,UAC1B,WAAU;AAAA,UAET,iBAAO;AAAA;AAAA,QAJH,OAAO;AAAA,MAKd;AAAA,MACA,4CAAC,OAAE,WAAU,yBAAyB,iBAAO,aAAY;AAAA,OAC3D;AAAA,IACA,6CAAC,SAAI,WAAU,+DACZ;AAAA,aAAO,MACL,OAAO,CAAC,SAAS,SAAS,IAAI,EAC9B,IAAI,CAAC,SACJ,4CAAC,mCAA4B,QAAX,KAAK,IAAyB,CACjD;AAAA,MACH,4CAAC,SAAI,WAAU,mDACb;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UACC,MAAM,SAAS,OAAO,IAAI;AAAA,UAC1B,WAAU;AAAA,UAEV;AAAA,yDAAC,UAAK;AAAA;AAAA,cAAmB,OAAO;AAAA,eAAM;AAAA,YACtC,4CAAC,kCAAW,WAAU,WAAU;AAAA;AAAA;AAAA,MAClC,GACF;AAAA,OACF;AAAA,KACF,CACD,GACH;AAEJ;AAEO,MAAM,kBAAkB,CAAC,EAAE,OAAO,MAA0B;AACjE,SACE,4CAAC,yBAAS,UAAU,4CAAC,2BAAwB,GAC3C,sDAAC,yBAAsB,QAAgB,GACzC;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../../../src/components/home-page/folders.tsx"],"sourcesContent":["import Link from \"next/link\";\nimport { PostPreview } from \"../post-preview\";\nimport { ArrowRight } from \"lucide-react\";\nimport { Opinly } from \"@opinly/backend\";\n\nexport const HomePageFoldersSkeleton = () => {\n  return (\n    <>\n      {Array(2) // render 2 folder sections\n        .fill(null)\n        .map((_, sectionIdx) => (\n          <div key={sectionIdx} className=\"space-y-4 mb-5\">\n            {/* Folder title + description */}\n            <div className=\"animate-pulse space-y-2\">\n              <div className=\"h-8 w-1/3 bg-gray-200 dark:bg-gray-700 rounded\" />\n              <div className=\"h-4 w-1/2 bg-gray-200 dark:bg-gray-700 rounded\" />\n            </div>\n\n            {/* Posts grid */}\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10\">\n              {Array(3) // 3 post placeholders\n                .fill(null)\n                .map((__, postIdx) => (\n                  <div key={postIdx} className=\"animate-pulse space-y-3\">\n                    {/* Image */}\n                    <div className=\"w-full h-48 bg-gray-200 dark:bg-gray-700 rounded-lg\" />\n                    {/* Title bar */}\n                    <div className=\"h-5 w-3/4 bg-gray-200 dark:bg-gray-700 rounded\" />\n                    {/* Description line */}\n                    <div className=\"h-4 w-full bg-gray-200 dark:bg-gray-700 rounded\" />\n                  </div>\n                ))}\n\n              {/* “View all” link */}\n              <div className=\"flex justify-center items-center animate-pulse\">\n                <div className=\"h-4 w-48 bg-gray-200 text-op-heading rounded\" />\n              </div>\n            </div>\n          </div>\n        ))}\n    </>\n  );\n};\n\nexport const HomePageFolders = ({\n  folders,\n}: {\n  folders: Extract<\n    Awaited<ReturnType<Opinly[\"content\"][\"blog\"]>>,\n    { type: \"home\" }\n  >[\"data\"][\"folders\"];\n}) => {\n  return (\n    <div className=\"flex flex-col gap-10 mt-20\">\n      {folders.map((folder) => (\n        <div className=\"space-y-4\">\n          <div className=\"flex flex-col gap-2 mb-20\">\n            <Link\n              key={folder.slug}\n              href={`/blog/${folder.slug}`}\n              className=\"text-3xl\"\n            >\n              {folder.title}\n            </Link>\n            <p className=\"text-sm text-op-muted\">{folder.description}</p>\n          </div>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10 mb-20\">\n            {folder.posts\n              .filter((post) => post !== null)\n              .map((post) => (\n                <PostPreview\n                  key={post.slug}\n                  post={{\n                    ...post,\n                    folder: {\n                      name: folder.title,\n                      slug: folder.slug,\n                      description: folder.description || \"\",\n                    },\n                  }}\n                />\n              ))}\n            <div className=\"flex justify-center w-full h-full items-center \">\n              <Link\n                href={`/blog/${folder.slug}`}\n                className=\"flex items-center gap-2\"\n              >\n                <span>View all posts in {folder.title}</span>\n                <ArrowRight className=\"w-4 h-4\" />\n              </Link>\n            </div>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOI;AAPJ,kBAAiB;AACjB,0BAA4B;AAC5B,0BAA2B;AAGpB,MAAM,0BAA0B,MAAM;AAC3C,SACE,2EACG,gBAAM,CAAC,EACL,KAAK,IAAI,EACT,IAAI,CAAC,GAAG,eACP,6CAAC,SAAqB,WAAU,kBAE9B;AAAA,iDAAC,SAAI,WAAU,2BACb;AAAA,kDAAC,SAAI,WAAU,kDAAiD;AAAA,MAChE,4CAAC,SAAI,WAAU,kDAAiD;AAAA,OAClE;AAAA,IAGA,6CAAC,SAAI,WAAU,yDACZ;AAAA,YAAM,CAAC,EACL,KAAK,IAAI,EACT,IAAI,CAAC,IAAI,YACR,6CAAC,SAAkB,WAAU,2BAE3B;AAAA,oDAAC,SAAI,WAAU,uDAAsD;AAAA,QAErE,4CAAC,SAAI,WAAU,kDAAiD;AAAA,QAEhE,4CAAC,SAAI,WAAU,mDAAkD;AAAA,WANzD,OAOV,CACD;AAAA,MAGH,4CAAC,SAAI,WAAU,kDACb,sDAAC,SAAI,WAAU,gDAA+C,GAChE;AAAA,OACF;AAAA,OA1BQ,UA2BV,CACD,GACL;AAEJ;AAEO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AACF,MAKM;AACJ,SACE,4CAAC,SAAI,WAAU,8BACZ,kBAAQ,IAAI,CAAC,WACZ,6CAAC,SAAI,WAAU,aACb;AAAA,iDAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UAEC,MAAM,SAAS,OAAO,IAAI;AAAA,UAC1B,WAAU;AAAA,UAET,iBAAO;AAAA;AAAA,QAJH,OAAO;AAAA,MAKd;AAAA,MACA,4CAAC,OAAE,WAAU,yBAAyB,iBAAO,aAAY;AAAA,OAC3D;AAAA,IACA,6CAAC,SAAI,WAAU,+DACZ;AAAA,aAAO,MACL,OAAO,CAAC,SAAS,SAAS,IAAI,EAC9B,IAAI,CAAC,SACJ;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,YACJ,GAAG;AAAA,YACH,QAAQ;AAAA,cACN,MAAM,OAAO;AAAA,cACb,MAAM,OAAO;AAAA,cACb,aAAa,OAAO,eAAe;AAAA,YACrC;AAAA,UACF;AAAA;AAAA,QARK,KAAK;AAAA,MASZ,CACD;AAAA,MACH,4CAAC,SAAI,WAAU,mDACb;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UACC,MAAM,SAAS,OAAO,IAAI;AAAA,UAC1B,WAAU;AAAA,UAEV;AAAA,yDAAC,UAAK;AAAA;AAAA,cAAmB,OAAO;AAAA,eAAM;AAAA,YACtC,4CAAC,kCAAW,WAAU,WAAU;AAAA;AAAA;AAAA,MAClC,GACF;AAAA,OACF;AAAA,KACF,CACD,GACH;AAEJ;","names":["Link"]}

package/dist/components/home-page/folders.d.cts

@@ -2,8 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Opinly } from '@opinly/backend';
 
 declare const HomePageFoldersSkeleton: () => react_jsx_runtime.JSX.Element;
-declare const HomePageFolders: ({ client }: {
-    client: Opinly;
+declare const HomePageFolders: ({ folders, }: {
+    folders: Extract<Awaited<ReturnType<Opinly["content"]["blog"]>>, {
+        type: "home";
+    }>["data"]["folders"];
 }) => react_jsx_runtime.JSX.Element;
 
 export { HomePageFolders, HomePageFoldersSkeleton };

package/dist/components/home-page/folders.d.ts

@@ -2,8 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Opinly } from '@opinly/backend';
 
 declare const HomePageFoldersSkeleton: () => react_jsx_runtime.JSX.Element;
-declare const HomePageFolders: ({ client }: {
-    client: Opinly;
+declare const HomePageFolders: ({ folders, }: {
+    folders: Extract<Awaited<ReturnType<Opinly["content"]["blog"]>>, {
+        type: "home";
+    }>["data"]["folders"];
 }) => react_jsx_runtime.JSX.Element;
 
 export { HomePageFolders, HomePageFoldersSkeleton };

package/dist/components/home-page/folders.js

@@ -2,7 +2,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { PostPreview } from "../post-preview";
 import { ArrowRight } from "lucide-react";
-import { Suspense } from "react";
 const HomePageFoldersSkeleton = () => {
   return /* @__PURE__ */ jsx(Fragment, { children: Array(2).fill(null).map((_, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: "space-y-4 mb-5", children: [
     /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-2", children: [
@@ -15,13 +14,14 @@ const HomePageFoldersSkeleton = () => {
         /* @__PURE__ */ jsx("div", { className: "h-5 w-3/4 bg-gray-200 dark:bg-gray-700 rounded" }),
         /* @__PURE__ */ jsx("div", { className: "h-4 w-full bg-gray-200 dark:bg-gray-700 rounded" })
       ] }, postIdx)),
-      /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-48 bg-gray-200 dark:bg-gray-700 rounded" }) })
+      /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-48 bg-gray-200 text-op-heading rounded" }) })
     ] })
   ] }, sectionIdx)) });
 };
-const HomePageFoldersServer = async ({ client }) => {
-  const folders = await client.client.content.homePageFolders.query();
-  return /* @__PURE__ */ jsx(Fragment, { children: folders.map((folder) => /* @__PURE__ */ jsxs("div", { className: "space-y-4 ", children: [
+const HomePageFolders = ({
+  folders
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-10 mt-20", children: folders.map((folder) => /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 mb-20", children: [
       /* @__PURE__ */ jsx(
         Link,
@@ -32,10 +32,23 @@ const HomePageFoldersServer = async ({ client }) => {
         },
         folder.slug
       ),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: folder.description })
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-op-muted", children: folder.description })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10 mb-20", children: [
-      folder.posts.filter((post) => post !== null).map((post) => /* @__PURE__ */ jsx(PostPreview, { post }, post.slug)),
+      folder.posts.filter((post) => post !== null).map((post) => /* @__PURE__ */ jsx(
+        PostPreview,
+        {
+          post: {
+            ...post,
+            folder: {
+              name: folder.title,
+              slug: folder.slug,
+              description: folder.description || ""
+            }
+          }
+        },
+        post.slug
+      )),
       /* @__PURE__ */ jsx("div", { className: "flex justify-center w-full h-full items-center ", children: /* @__PURE__ */ jsxs(
         Link,
         {
@@ -53,9 +66,6 @@ const HomePageFoldersServer = async ({ client }) => {
     ] })
   ] })) });
 };
-const HomePageFolders = ({ client }) => {
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(HomePageFoldersSkeleton, {}), children: /* @__PURE__ */ jsx(HomePageFoldersServer, { client }) });
-};
 export {
   HomePageFolders,
   HomePageFoldersSkeleton

package/dist/components/home-page/folders.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/home-page/folders.tsx"],"sourcesContent":["import Link from \"next/link\";\nimport { PostPreview } from \"../post-preview\";\nimport { ArrowRight } from \"lucide-react\";\nimport { Opinly } from \"@opinly/backend\";\nimport { Suspense } from \"react\";\n\nexport const HomePageFoldersSkeleton = () => {\n  return (\n    <>\n      {Array(2) // render 2 folder sections\n        .fill(null)\n        .map((_, sectionIdx) => (\n          <div key={sectionIdx} className=\"space-y-4 mb-5\">\n            {/* Folder title + description */}\n            <div className=\"animate-pulse space-y-2\">\n              <div className=\"h-8 w-1/3 bg-gray-200 dark:bg-gray-700 rounded\" />\n              <div className=\"h-4 w-1/2 bg-gray-200 dark:bg-gray-700 rounded\" />\n            </div>\n\n            {/* Posts grid */}\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10\">\n              {Array(3) // 3 post placeholders\n                .fill(null)\n                .map((__, postIdx) => (\n                  <div key={postIdx} className=\"animate-pulse space-y-3\">\n                    {/* Image */}\n                    <div className=\"w-full h-48 bg-gray-200 dark:bg-gray-700 rounded-lg\" />\n                    {/* Title bar */}\n                    <div className=\"h-5 w-3/4 bg-gray-200 dark:bg-gray-700 rounded\" />\n                    {/* Description line */}\n                    <div className=\"h-4 w-full bg-gray-200 dark:bg-gray-700 rounded\" />\n                  </div>\n                ))}\n\n              {/* “View all” link */}\n              <div className=\"flex justify-center items-center animate-pulse\">\n                <div className=\"h-4 w-48 bg-gray-200 dark:bg-gray-700 rounded\" />\n              </div>\n            </div>\n          </div>\n        ))}\n    </>\n  );\n};\n\nconst HomePageFoldersServer = async ({ client }: { client: Opinly }) => {\n  const folders = await client.client.content.homePageFolders.query();\n\n  return (\n    <>\n      {folders.map((folder) => (\n        <div className=\"space-y-4 \">\n          <div className=\"flex flex-col gap-2 mb-20\">\n            <Link\n              key={folder.slug}\n              href={`/blog/${folder.slug}`}\n              className=\"text-3xl\"\n            >\n              {folder.title}\n            </Link>\n            <p className=\"text-sm text-gray-500\">{folder.description}</p>\n          </div>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10 mb-20\">\n            {folder.posts\n              .filter((post) => post !== null)\n              .map((post) => (\n                <PostPreview key={post.slug} post={post as any} />\n              ))}\n            <div className=\"flex justify-center w-full h-full items-center \">\n              <Link\n                href={`/blog/${folder.slug}`}\n                className=\"flex items-center gap-2\"\n              >\n                <span>View all posts in {folder.title}</span>\n                <ArrowRight className=\"w-4 h-4\" />\n              </Link>\n            </div>\n          </div>\n        </div>\n      ))}\n    </>\n  );\n};\n\nexport const HomePageFolders = ({ client }: { client: Opinly }) => {\n  return (\n    <Suspense fallback={<HomePageFoldersSkeleton />}>\n      <HomePageFoldersServer client={client} />\n    </Suspense>\n  );\n};\n"],"mappings":"AAQI,mBAOU,KADF,YANR;AARJ,OAAO,UAAU;AACjB,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAE3B,SAAS,gBAAgB;AAElB,MAAM,0BAA0B,MAAM;AAC3C,SACE,gCACG,gBAAM,CAAC,EACL,KAAK,IAAI,EACT,IAAI,CAAC,GAAG,eACP,qBAAC,SAAqB,WAAU,kBAE9B;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,WAAU,kDAAiD;AAAA,MAChE,oBAAC,SAAI,WAAU,kDAAiD;AAAA,OAClE;AAAA,IAGA,qBAAC,SAAI,WAAU,yDACZ;AAAA,YAAM,CAAC,EACL,KAAK,IAAI,EACT,IAAI,CAAC,IAAI,YACR,qBAAC,SAAkB,WAAU,2BAE3B;AAAA,4BAAC,SAAI,WAAU,uDAAsD;AAAA,QAErE,oBAAC,SAAI,WAAU,kDAAiD;AAAA,QAEhE,oBAAC,SAAI,WAAU,mDAAkD;AAAA,WANzD,OAOV,CACD;AAAA,MAGH,oBAAC,SAAI,WAAU,kDACb,8BAAC,SAAI,WAAU,iDAAgD,GACjE;AAAA,OACF;AAAA,OA1BQ,UA2BV,CACD,GACL;AAEJ;AAEA,MAAM,wBAAwB,OAAO,EAAE,OAAO,MAA0B;AACtE,QAAM,UAAU,MAAM,OAAO,OAAO,QAAQ,gBAAgB,MAAM;AAElE,SACE,gCACG,kBAAQ,IAAI,CAAC,WACZ,qBAAC,SAAI,WAAU,cACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,SAAS,OAAO,IAAI;AAAA,UAC1B,WAAU;AAAA,UAET,iBAAO;AAAA;AAAA,QAJH,OAAO;AAAA,MAKd;AAAA,MACA,oBAAC,OAAE,WAAU,yBAAyB,iBAAO,aAAY;AAAA,OAC3D;AAAA,IACA,qBAAC,SAAI,WAAU,+DACZ;AAAA,aAAO,MACL,OAAO,CAAC,SAAS,SAAS,IAAI,EAC9B,IAAI,CAAC,SACJ,oBAAC,eAA4B,QAAX,KAAK,IAAyB,CACjD;AAAA,MACH,oBAAC,SAAI,WAAU,mDACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,SAAS,OAAO,IAAI;AAAA,UAC1B,WAAU;AAAA,UAEV;AAAA,iCAAC,UAAK;AAAA;AAAA,cAAmB,OAAO;AAAA,eAAM;AAAA,YACtC,oBAAC,cAAW,WAAU,WAAU;AAAA;AAAA;AAAA,MAClC,GACF;AAAA,OACF;AAAA,KACF,CACD,GACH;AAEJ;AAEO,MAAM,kBAAkB,CAAC,EAAE,OAAO,MAA0B;AACjE,SACE,oBAAC,YAAS,UAAU,oBAAC,2BAAwB,GAC3C,8BAAC,yBAAsB,QAAgB,GACzC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/home-page/folders.tsx"],"sourcesContent":["import Link from \"next/link\";\nimport { PostPreview } from \"../post-preview\";\nimport { ArrowRight } from \"lucide-react\";\nimport { Opinly } from \"@opinly/backend\";\n\nexport const HomePageFoldersSkeleton = () => {\n  return (\n    <>\n      {Array(2) // render 2 folder sections\n        .fill(null)\n        .map((_, sectionIdx) => (\n          <div key={sectionIdx} className=\"space-y-4 mb-5\">\n            {/* Folder title + description */}\n            <div className=\"animate-pulse space-y-2\">\n              <div className=\"h-8 w-1/3 bg-gray-200 dark:bg-gray-700 rounded\" />\n              <div className=\"h-4 w-1/2 bg-gray-200 dark:bg-gray-700 rounded\" />\n            </div>\n\n            {/* Posts grid */}\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10\">\n              {Array(3) // 3 post placeholders\n                .fill(null)\n                .map((__, postIdx) => (\n                  <div key={postIdx} className=\"animate-pulse space-y-3\">\n                    {/* Image */}\n                    <div className=\"w-full h-48 bg-gray-200 dark:bg-gray-700 rounded-lg\" />\n                    {/* Title bar */}\n                    <div className=\"h-5 w-3/4 bg-gray-200 dark:bg-gray-700 rounded\" />\n                    {/* Description line */}\n                    <div className=\"h-4 w-full bg-gray-200 dark:bg-gray-700 rounded\" />\n                  </div>\n                ))}\n\n              {/* “View all” link */}\n              <div className=\"flex justify-center items-center animate-pulse\">\n                <div className=\"h-4 w-48 bg-gray-200 text-op-heading rounded\" />\n              </div>\n            </div>\n          </div>\n        ))}\n    </>\n  );\n};\n\nexport const HomePageFolders = ({\n  folders,\n}: {\n  folders: Extract<\n    Awaited<ReturnType<Opinly[\"content\"][\"blog\"]>>,\n    { type: \"home\" }\n  >[\"data\"][\"folders\"];\n}) => {\n  return (\n    <div className=\"flex flex-col gap-10 mt-20\">\n      {folders.map((folder) => (\n        <div className=\"space-y-4\">\n          <div className=\"flex flex-col gap-2 mb-20\">\n            <Link\n              key={folder.slug}\n              href={`/blog/${folder.slug}`}\n              className=\"text-3xl\"\n            >\n              {folder.title}\n            </Link>\n            <p className=\"text-sm text-op-muted\">{folder.description}</p>\n          </div>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10 mb-20\">\n            {folder.posts\n              .filter((post) => post !== null)\n              .map((post) => (\n                <PostPreview\n                  key={post.slug}\n                  post={{\n                    ...post,\n                    folder: {\n                      name: folder.title,\n                      slug: folder.slug,\n                      description: folder.description || \"\",\n                    },\n                  }}\n                />\n              ))}\n            <div className=\"flex justify-center w-full h-full items-center \">\n              <Link\n                href={`/blog/${folder.slug}`}\n                className=\"flex items-center gap-2\"\n              >\n                <span>View all posts in {folder.title}</span>\n                <ArrowRight className=\"w-4 h-4\" />\n              </Link>\n            </div>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":"AAOI,mBAOU,KADF,YANR;AAPJ,OAAO,UAAU;AACjB,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAGpB,MAAM,0BAA0B,MAAM;AAC3C,SACE,gCACG,gBAAM,CAAC,EACL,KAAK,IAAI,EACT,IAAI,CAAC,GAAG,eACP,qBAAC,SAAqB,WAAU,kBAE9B;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,WAAU,kDAAiD;AAAA,MAChE,oBAAC,SAAI,WAAU,kDAAiD;AAAA,OAClE;AAAA,IAGA,qBAAC,SAAI,WAAU,yDACZ;AAAA,YAAM,CAAC,EACL,KAAK,IAAI,EACT,IAAI,CAAC,IAAI,YACR,qBAAC,SAAkB,WAAU,2BAE3B;AAAA,4BAAC,SAAI,WAAU,uDAAsD;AAAA,QAErE,oBAAC,SAAI,WAAU,kDAAiD;AAAA,QAEhE,oBAAC,SAAI,WAAU,mDAAkD;AAAA,WANzD,OAOV,CACD;AAAA,MAGH,oBAAC,SAAI,WAAU,kDACb,8BAAC,SAAI,WAAU,gDAA+C,GAChE;AAAA,OACF;AAAA,OA1BQ,UA2BV,CACD,GACL;AAEJ;AAEO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AACF,MAKM;AACJ,SACE,oBAAC,SAAI,WAAU,8BACZ,kBAAQ,IAAI,CAAC,WACZ,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,SAAS,OAAO,IAAI;AAAA,UAC1B,WAAU;AAAA,UAET,iBAAO;AAAA;AAAA,QAJH,OAAO;AAAA,MAKd;AAAA,MACA,oBAAC,OAAE,WAAU,yBAAyB,iBAAO,aAAY;AAAA,OAC3D;AAAA,IACA,qBAAC,SAAI,WAAU,+DACZ;AAAA,aAAO,MACL,OAAO,CAAC,SAAS,SAAS,IAAI,EAC9B,IAAI,CAAC,SACJ;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,YACJ,GAAG;AAAA,YACH,QAAQ;AAAA,cACN,MAAM,OAAO;AAAA,cACb,MAAM,OAAO;AAAA,cACb,aAAa,OAAO,eAAe;AAAA,YACrC;AAAA,UACF;AAAA;AAAA,QARK,KAAK;AAAA,MASZ,CACD;AAAA,MACH,oBAAC,SAAI,WAAU,mDACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,SAAS,OAAO,IAAI;AAAA,UAC1B,WAAU;AAAA,UAEV;AAAA,iCAAC,UAAK;AAAA;AAAA,cAAmB,OAAO;AAAA,eAAM;AAAA,YACtC,oBAAC,cAAW,WAAU,WAAU;AAAA;AAAA;AAAA,MAClC,GACF;AAAA,OACF;AAAA,KACF,CACD,GACH;AAEJ;","names":[]}

package/dist/components/home-page/index.cjs

@@ -22,19 +22,17 @@ __export(home_page_exports, {
 });
 module.exports = __toCommonJS(home_page_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_top_posts = require("./top-posts");
 var import_folders = require("./folders");
 var import_pagination = require("./pagination");
 const HomePage = ({
-  searchParams,
-  client
+  data
 }) => {
-  const parsedPage = searchParams.page ? parseInt(searchParams.page) : 1;
+  console.log("rendering home page inner", data);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-7xl mx-auto px-4 py-10", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_top_posts.TopPosts, { client, page: parsedPage }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center items-center mt-10 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pagination.HomePagePagination, { client, page: parsedPage }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-10 mt-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_folders.HomePageFolders, { client }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_top_posts.TopPosts, { posts: data.posts }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pagination.HomePagePagination, { count: data.count, page: data.page }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_folders.HomePageFolders, { folders: data.folders })
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/home-page/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/home-page/index.tsx"],"sourcesContent":["import Link from \"next/link\";\nimport { Opinly } from \"@opinly/backend\";\nimport { Suspense } from \"react\";\nimport { TopPosts } from \"./top-posts\";\nimport { HomePageFolders } from \"./folders\";\nimport { cn } from \"../../utils/merge\";\nimport { HomePagePagination } from \"./pagination\";\n\nexport const HomePage = ({\n  searchParams,\n  client,\n}: {\n  client: Opinly;\n  searchParams: { page?: string };\n}) => {\n  const parsedPage = searchParams.page ? parseInt(searchParams.page) : 1;\n\n  return (\n    <div className=\"max-w-7xl mx-auto px-4 py-10\">\n      {/* Posts Grid */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10\">\n        <TopPosts client={client} page={parsedPage} />\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex justify-center items-center mt-10 gap-2\">\n        <HomePagePagination client={client} page={parsedPage} />\n      </div>\n\n      {/* Folder tags */}\n      <div className=\"flex flex-col gap-10 mt-20\">\n        <Suspense>\n          <HomePageFolders client={client} />\n        </Suspense>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBI;AAhBJ,mBAAyB;AACzB,uBAAyB;AACzB,qBAAgC;AAEhC,wBAAmC;AAE5B,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,aAAa,aAAa,OAAO,SAAS,aAAa,IAAI,IAAI;AAErE,SACE,6CAAC,SAAI,WAAU,gCAEb;AAAA,gDAAC,SAAI,WAAU,yDACb,sDAAC,6BAAS,QAAgB,MAAM,YAAY,GAC9C;AAAA,IAGA,4CAAC,SAAI,WAAU,gDACb,sDAAC,wCAAmB,QAAgB,MAAM,YAAY,GACxD;AAAA,IAGA,4CAAC,SAAI,WAAU,8BACb,sDAAC,yBACC,sDAAC,kCAAgB,QAAgB,GACnC,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/home-page/index.tsx"],"sourcesContent":["import { Opinly } from \"@opinly/backend\";\nimport { TopPosts } from \"./top-posts\";\nimport { HomePageFolders } from \"./folders\";\nimport { HomePagePagination } from \"./pagination\";\n\nexport const HomePage = ({\n  data,\n}: {\n  data: Extract<\n    Awaited<ReturnType<Opinly[\"content\"][\"blog\"]>>,\n    { type: \"home\" }\n  >[\"data\"];\n}) => {\n  console.log(\"rendering home page inner\", data);\n\n  return (\n    <div className=\"max-w-7xl mx-auto px-4 py-10\">\n      <TopPosts posts={data.posts} />\n      <HomePagePagination count={data.count} page={data.page} />\n      <HomePageFolders folders={data.folders} />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBI;AAfJ,uBAAyB;AACzB,qBAAgC;AAChC,wBAAmC;AAE5B,MAAM,WAAW,CAAC;AAAA,EACvB;AACF,MAKM;AACJ,UAAQ,IAAI,6BAA6B,IAAI;AAE7C,SACE,6CAAC,SAAI,WAAU,gCACb;AAAA,gDAAC,6BAAS,OAAO,KAAK,OAAO;AAAA,IAC7B,4CAAC,wCAAmB,OAAO,KAAK,OAAO,MAAM,KAAK,MAAM;AAAA,IACxD,4CAAC,kCAAgB,SAAS,KAAK,SAAS;AAAA,KAC1C;AAEJ;","names":[]}