@opinly/next 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   HomePage: () => HomePage,
   OpinlyBlog: () => OpinlyBlog
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/components/blog-post/index.tsx
 var import_link5 = __toESM(require("next/link"), 1);
@@ -80,8 +80,7 @@ function replaceImageNameSpace(fileKey) {
 
 // src/components/blog-post/_helpers/json-ld.ts
 function generateArticleBodyHtml(content) {
-  if (!content?.content)
-    return "";
+  if (!content?.content) return "";
   let htmlString = "";
   content.content.forEach((node) => {
     switch (node.type) {
@@ -101,6 +100,14 @@ function generateArticleBodyHtml(content) {
       case "listItem":
         htmlString += `<li>${generateChildrenHtml(node.content)}</li>`;
         break;
+      // Add other node types if they contain text content relevant for articleBody
+      // For images, you might just skip them or include an <img> tag if semantic
+      // For example:
+      // case "image":
+      //   if (node.attrs?.src) {
+      //     htmlString += `<img src="${replaceImageHostname(node.attrs.src, opinlyConfig.imagesPrefix)}" alt="${node.attrs?.alt || ''}" />`;
+      //   }
+      //   break;
       default:
         break;
     }
@@ -108,18 +115,15 @@ function generateArticleBodyHtml(content) {
   return htmlString;
 }
 function generateChildrenHtml(nodes) {
-  if (!nodes)
-    return "";
+  if (!nodes) return "";
   let childrenHtml = "";
   nodes.forEach((child) => {
     if (child.type === "text") {
       let text = child.text || "";
       if (child.marks) {
         child.marks.forEach((mark) => {
-          if (mark.type === "bold")
-            text = `<strong>${text}</strong>`;
-          if (mark.type === "italic")
-            text = `<em>${text}</em>`;
+          if (mark.type === "bold") text = `<strong>${text}</strong>`;
+          if (mark.type === "italic") text = `<em>${text}</em>`;
           if (mark.type === "link" && mark.attrs?.href) {
             text = `<a href="${mark.attrs.href}">${text}</a>`;
           }
@@ -213,8 +217,7 @@ var genBreadcrumbJSONLD = (post) => {
 // src/components/blog-post/_components/faq.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var FAQS = ({ faqs }) => {
-  if (!faqs)
-    return null;
+  if (!faqs) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg font-semibold mb-2", children: "FAQS" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: faqs.map((faq) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
@@ -226,8 +229,7 @@ var FAQS = ({ faqs }) => {
 
 // src/components/blog-post/_helpers/reading-time.ts
 var countWords = (content) => {
-  if (!content?.content)
-    return 0;
+  if (!content?.content) return 0;
   let wordCount = 0;
   const countWords2 = (nodes) => {
     for (const node of nodes) {
@@ -235,8 +237,7 @@ var countWords = (content) => {
         const words = node.text.trim().split(/\s+/).filter(Boolean);
         wordCount += words.length;
       }
-      if (node.content)
-        countWords2(node.content);
+      if (node.content) countWords2(node.content);
     }
   };
   countWords2(content.content);
@@ -252,8 +253,7 @@ function calculateReadingTime(content) {
 var import_link = __toESM(require("next/link"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function renderTiptapContent(content, classNames) {
-  if (!content?.content)
-    return [];
+  if (!content?.content) return [];
   return content.content.map((node, index) => {
     switch (node.type) {
       case "paragraph":
@@ -316,17 +316,14 @@ var Content = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "prose min-w-full", children: renderTiptapContent(content, classNames) });
 };
 function renderChildren(nodes, classNames) {
-  if (!nodes)
-    return [];
+  if (!nodes) return [];
   return nodes.map((child, idx) => {
     if (child.type === "text") {
       let text = child.text;
       if (child.marks) {
         child.marks.forEach((mark) => {
-          if (mark.type === "bold")
-            text = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: text }, idx);
-          if (mark.type === "italic")
-            text = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { children: text }, idx);
+          if (mark.type === "bold") text = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: text }, idx);
+          if (mark.type === "italic") text = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { children: text }, idx);
           if (mark.type === "link")
             text = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_link.default,
@@ -351,8 +348,7 @@ var import_image = __toESM(require("next/image"), 1);
 // src/components/blog-post/_helpers/extract-headings.ts
 function extractHeadings(content) {
   const headings = [];
-  if (!content?.content)
-    return headings;
+  if (!content?.content) return headings;
   const walk = (nodes) => {
     for (const node of nodes) {
       if (node.type === "heading" && node.content?.[0]?.text) {
@@ -360,8 +356,7 @@ function extractHeadings(content) {
         const slug = text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
         headings.push({ text, slug });
       }
-      if (node.content)
-        walk(node.content);
+      if (node.content) walk(node.content);
     }
   };
   walk(content.content);

package/dist/index.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Opinly } from '@opinly/backend';
+
+declare const OpinlyBlog: ({ blog, page, }: {
+    blog: Awaited<ReturnType<Opinly["content"]["blog"]>>;
+    page: number | null | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+type HomePage = Extract<Awaited<ReturnType<Opinly["content"]["blog"]>>, {
+    type: "home";
+}>["data"];
+declare const HomePage: ({ homePage, page, }: {
+    homePage: HomePage;
+    page: number | null | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+export { HomePage, OpinlyBlog };

package/dist/index.js

@@ -43,8 +43,7 @@ function replaceImageNameSpace(fileKey) {
 
 // src/components/blog-post/_helpers/json-ld.ts
 function generateArticleBodyHtml(content) {
-  if (!content?.content)
-    return "";
+  if (!content?.content) return "";
   let htmlString = "";
   content.content.forEach((node) => {
     switch (node.type) {
@@ -64,6 +63,14 @@ function generateArticleBodyHtml(content) {
       case "listItem":
         htmlString += `<li>${generateChildrenHtml(node.content)}</li>`;
         break;
+      // Add other node types if they contain text content relevant for articleBody
+      // For images, you might just skip them or include an <img> tag if semantic
+      // For example:
+      // case "image":
+      //   if (node.attrs?.src) {
+      //     htmlString += `<img src="${replaceImageHostname(node.attrs.src, opinlyConfig.imagesPrefix)}" alt="${node.attrs?.alt || ''}" />`;
+      //   }
+      //   break;
       default:
         break;
     }
@@ -71,18 +78,15 @@ function generateArticleBodyHtml(content) {
   return htmlString;
 }
 function generateChildrenHtml(nodes) {
-  if (!nodes)
-    return "";
+  if (!nodes) return "";
   let childrenHtml = "";
   nodes.forEach((child) => {
     if (child.type === "text") {
       let text = child.text || "";
       if (child.marks) {
         child.marks.forEach((mark) => {
-          if (mark.type === "bold")
-            text = `<strong>${text}</strong>`;
-          if (mark.type === "italic")
-            text = `<em>${text}</em>`;
+          if (mark.type === "bold") text = `<strong>${text}</strong>`;
+          if (mark.type === "italic") text = `<em>${text}</em>`;
           if (mark.type === "link" && mark.attrs?.href) {
             text = `<a href="${mark.attrs.href}">${text}</a>`;
           }
@@ -176,8 +180,7 @@ var genBreadcrumbJSONLD = (post) => {
 // src/components/blog-post/_components/faq.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var FAQS = ({ faqs }) => {
-  if (!faqs)
-    return null;
+  if (!faqs) return null;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-2", children: "FAQS" }),
     /* @__PURE__ */ jsx("ul", { children: faqs.map((faq) => /* @__PURE__ */ jsxs("li", { children: [
@@ -189,8 +192,7 @@ var FAQS = ({ faqs }) => {
 
 // src/components/blog-post/_helpers/reading-time.ts
 var countWords = (content) => {
-  if (!content?.content)
-    return 0;
+  if (!content?.content) return 0;
   let wordCount = 0;
   const countWords2 = (nodes) => {
     for (const node of nodes) {
@@ -198,8 +200,7 @@ var countWords = (content) => {
         const words = node.text.trim().split(/\s+/).filter(Boolean);
         wordCount += words.length;
       }
-      if (node.content)
-        countWords2(node.content);
+      if (node.content) countWords2(node.content);
     }
   };
   countWords2(content.content);
@@ -215,8 +216,7 @@ function calculateReadingTime(content) {
 import Link from "next/link";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function renderTiptapContent(content, classNames) {
-  if (!content?.content)
-    return [];
+  if (!content?.content) return [];
   return content.content.map((node, index) => {
     switch (node.type) {
       case "paragraph":
@@ -279,17 +279,14 @@ var Content = ({
   return /* @__PURE__ */ jsx2("div", { className: "prose min-w-full", children: renderTiptapContent(content, classNames) });
 };
 function renderChildren(nodes, classNames) {
-  if (!nodes)
-    return [];
+  if (!nodes) return [];
   return nodes.map((child, idx) => {
     if (child.type === "text") {
       let text = child.text;
       if (child.marks) {
         child.marks.forEach((mark) => {
-          if (mark.type === "bold")
-            text = /* @__PURE__ */ jsx2("strong", { children: text }, idx);
-          if (mark.type === "italic")
-            text = /* @__PURE__ */ jsx2("em", { children: text }, idx);
+          if (mark.type === "bold") text = /* @__PURE__ */ jsx2("strong", { children: text }, idx);
+          if (mark.type === "italic") text = /* @__PURE__ */ jsx2("em", { children: text }, idx);
           if (mark.type === "link")
             text = /* @__PURE__ */ jsx2(
               Link,
@@ -314,8 +311,7 @@ import Image from "next/image";
 // src/components/blog-post/_helpers/extract-headings.ts
 function extractHeadings(content) {
   const headings = [];
-  if (!content?.content)
-    return headings;
+  if (!content?.content) return headings;
   const walk = (nodes) => {
     for (const node of nodes) {
       if (node.type === "heading" && node.content?.[0]?.text) {
@@ -323,8 +319,7 @@ function extractHeadings(content) {
         const slug = text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
         headings.push({ text, slug });
       }
-      if (node.content)
-        walk(node.content);
+      if (node.content) walk(node.content);
     }
   };
   walk(content.content);

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@opinly/next",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "private": false,
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "devDependencies": {
     "@tsconfig/next": "^2.0.3",
     "@types/node": "^20.0.0",
@@ -25,11 +28,14 @@
     "react-syntax-highlighter": "^15.6.1",
     "schema-dts": "^1.1.5",
     "tailwind-merge": "^1.14.0",
-    "@opinly/backend": "0.1.2"
+    "@opinly/backend": "0.1.4"
   },
   "engines": {
     "node": ">=16"
   },
+  "files": [
+    "dist/**"
+  ],
   "publishConfig": {
     "access": "public"
   },

package/.turbo/turbo-lint.log

@@ -1,14 +0,0 @@
-
-
-> @opinly/next@ lint /Users/kieronmckenna/repos/opinly/packages/sdks/next
-> eslint src/
-
-
-Oops! Something went wrong! :(
-
-ESLint: 8.29.0
-
-No files matching the pattern "src/" were found.
-Please check for typing mistakes in the pattern.
-
- ELIFECYCLE  Command failed with exit code 2.

package/CHANGELOG.md

@@ -1,21 +0,0 @@
-# @opinly/next
-
-## 0.1.2
-
-### Patch Changes
-
-- more tsconfig changes
-- Updated dependencies
-  - @opinly/backend@0.1.2
-
-## 0.1.1
-
-### Patch Changes
-
-- updating tsconfigs
-
-## 0.1.0
-
-### Minor Changes
-
-- broke out sdks from internal use

package/src/components/author-page/index.tsx

@@ -1,62 +0,0 @@
-import { Opinly } from "@opinly/backend";
-import Image from "next/image";
-import { opinlyConfig } from "../../sdk-config";
-import { replaceImageNameSpace } from "../../utils/images";
-import { PostPreview } from "../post-preview";
-import { BreadCrumbs } from "../bread-crumbs";
-
-export const AuthorPage = ({
-  author,
-}: {
-  author: Extract<
-    Awaited<ReturnType<Opinly["content"]["blog"]>>,
-    { type: "author" }
-  >["data"];
-}) => {
-  return (
-    <div className="max-w-5xl mx-auto px-4 py-10">
-      <BreadCrumbs
-        breadcrumbs={[
-          {
-            name: "Authors",
-            url: `${opinlyConfig.blogPrefix}/authors`,
-          },
-        ]}
-      />
-      {/* Author Header */}
-      <div className="flex items-center gap-6 mb-10">
-        {author.image.fileKey && (
-          <Image
-            src={`${opinlyConfig.imagesPrefix}/${replaceImageNameSpace(author.image.fileKey)}`}
-            alt={author.image.alt || author.name}
-            width={150}
-            height={150}
-            className="rounded-full border"
-          />
-        )}
-        <div>
-          <h1 className="text-3xl font-bold mb-1">{author.name}</h1>
-          {author.bio && (
-            <p className="text-muted-foreground text-base max-w-2xl">
-              {author.bio}
-            </p>
-          )}
-        </div>
-      </div>
-
-      {/* Posts Grid */}
-      <h2 className="text-xl font-semibold mb-6">Posts by {author.name}</h2>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
-        {author.posts && author.posts.length > 0 ? (
-          author.posts.map(
-            (post) => post && <PostPreview key={post.slug} post={post} />
-          )
-        ) : (
-          <div className="text-muted-foreground col-span-full">
-            No posts yet.
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/authors-page/index.tsx

@@ -1,90 +0,0 @@
-import type { Opinly } from "@opinly/backend";
-import Image from "next/image";
-import { opinlyConfig } from "../../sdk-config";
-import { replaceImageNameSpace } from "../../utils/images";
-import { PostPreview } from "../post-preview";
-import { BreadCrumbs } from "../bread-crumbs";
-import Link from "next/link";
-
-export const AuthorsPage = ({
-  authors,
-}: {
-  authors: Extract<
-    Awaited<ReturnType<Opinly["content"]["blog"]>>,
-    { type: "authors" }
-  >["data"];
-}) => {
-  return (
-    <div className="max-w-5xl mx-auto px-4 py-10">
-      <BreadCrumbs
-        breadcrumbs={[
-          {
-            name: "Authors",
-          },
-        ]}
-      />
-      <h1 className="text-3xl font-bold mb-10">Authors</h1>
-      <div className="space-y-16">
-        {authors.map((author, idx) => {
-          const authorSlug = `${opinlyConfig.blogPrefix}/authors/${author.slug}`;
-
-          return (
-            <div
-              key={author.name + idx}
-              className="rounded-lg p-6 flex flex-col gap-6"
-            >
-              <div className="flex items-center gap-6 mb-4">
-                {author.image?.fileKey && (
-                  <Link href={authorSlug}>
-                    <Image
-                      src={`${opinlyConfig.imagesPrefix}/${replaceImageNameSpace(author.image.fileKey)}`}
-                      alt={author.image.alt || author.name}
-                      width={100}
-                      height={100}
-                      className="rounded-full border"
-                    />
-                  </Link>
-                )}
-                <div>
-                  <Link href={authorSlug}>
-                    <h2 className="text-2xl font-semibold mb-1">
-                      {author.name}
-                    </h2>
-                  </Link>
-
-                  {author.bio && (
-                    <p className="text-muted-foreground text-base max-w-2xl">
-                      {author.bio}
-                    </p>
-                  )}
-                </div>
-              </div>
-              <div>
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-4">
-                  {author.posts && author.posts.length > 0 ? (
-                    author.posts.map(
-                      (post) =>
-                        post && <PostPreview key={post.slug} post={post} />
-                    )
-                  ) : (
-                    <div className="text-muted-foreground col-span-full">
-                      No posts yet.
-                    </div>
-                  )}
-                </div>
-                <div className="flex justify-end">
-                  <Link
-                    href={`${opinlyConfig.blogPrefix}/authors/${author.slug}`}
-                    className="text-bold"
-                  >
-                    View more posts from {author.name}
-                  </Link>
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};

package/src/components/blog-post/_components/content.tsx

@@ -1,141 +0,0 @@
-import type { JSONContent } from "@tiptap/core";
-import { BlogComponentClassNames } from "../_types/class-names";
-import { cn } from "../../../utils/merge";
-import Link from "next/link";
-import { JSX } from "react";
-
-function renderTiptapContent(
-  content: JSONContent,
-  classNames: BlogComponentClassNames
-): React.ReactNode[] {
-  if (!content?.content) return [];
-
-  return content.content
-    .map((node, index) => {
-      switch (node.type) {
-        case "paragraph":
-          return (
-            <p key={index} className={classNames.paragraph || "mb-4"}>
-              {renderChildren(node.content, classNames)}
-            </p>
-          );
-        case "heading": {
-          const text = node.content?.[0]?.text ?? "";
-          const slug = text
-            .toLowerCase()
-            .replace(/[^a-z0-9]+/g, "-")
-            .replace(/^-+|-+$/g, "");
-          const Tag = `h${
-            node.attrs?.level || 1
-          }` as keyof JSX.IntrinsicElements;
-          return (
-            <Tag
-              key={index}
-              id={slug}
-              className={
-                classNames.heading || "mt-8 mb-4 font-bold text-gray-800"
-              }
-            >
-              {renderChildren(node.content, classNames)}
-            </Tag>
-          );
-        }
-        case "image":
-          return (
-            <div
-              key={index}
-              className={cn(
-                "relative w-full max-w-[800px] my-6",
-                classNames.image
-              )}
-              style={{ aspectRatio: "2 / 1" }}
-            >
-              {/* <Image
-                src={replaceImageHostname(
-                  node.attrs?.src || "",
-                  opinlyConfig.imagesPrefix
-                )}
-                alt={node.attrs?.alt || ""}
-                fill
-                className="object-contain rounded-lg"
-                sizes="(max-width: 800px) 100vw, 800px"
-              /> */}
-            </div>
-          );
-        case "bulletList":
-          return (
-            <ul
-              key={index}
-              className={classNames.bulletList || "list-disc pl-6 my-4"}
-            >
-              {renderChildren(node.content, classNames)}
-            </ul>
-          );
-        case "orderedList":
-          return (
-            <ol
-              key={index}
-              className={classNames.orderedList || "list-decimal pl-6 my-4"}
-            >
-              {renderChildren(node.content, classNames)}
-            </ol>
-          );
-        case "listItem":
-          return (
-            <li key={index} className={classNames.listItem || "my-1"}>
-              {renderChildren(node.content, classNames)}
-            </li>
-          );
-        default:
-          return null;
-      }
-    })
-    .filter(Boolean);
-}
-
-export const Content = ({
-  content,
-  classNames,
-}: {
-  content: JSONContent;
-  classNames: BlogComponentClassNames;
-}) => {
-  return (
-    <div className="prose min-w-full">
-      {renderTiptapContent(content, classNames)}
-    </div>
-  );
-};
-
-function renderChildren(
-  nodes: JSONContent["content"] | undefined,
-  classNames: BlogComponentClassNames
-): JSX.Element[] {
-  if (!nodes) return [];
-
-  return nodes
-    .map((child, idx) => {
-      if (child.type === "text") {
-        let text: React.ReactNode = child.text;
-        if (child.marks) {
-          child.marks.forEach((mark) => {
-            if (mark.type === "bold") text = <strong key={idx}>{text}</strong>;
-            if (mark.type === "italic") text = <em key={idx}>{text}</em>;
-            if (mark.type === "link")
-              text = (
-                <Link
-                  key={idx}
-                  href={mark.attrs?.href}
-                  className={classNames.link || "text-blue-600 underline"}
-                >
-                  {text}
-                </Link>
-              );
-          });
-        }
-        return <span key={idx}>{text}</span>;
-      }
-      return null;
-    })
-    .filter(Boolean) as JSX.Element[];
-}

package/src/components/blog-post/_components/faq.tsx

@@ -1,18 +0,0 @@
-import { BlogPostRes } from "../_types/blog-post";
-
-export const FAQS = ({ faqs }: { faqs: BlogPostRes["faqs"] }) => {
-  if (!faqs) return null;
-  return (
-    <div>
-      <h2 className="text-lg font-semibold mb-2">FAQS</h2>
-      <ul>
-        {faqs.map((faq) => (
-          <li key={faq.question}>
-            <h3 className="text-lg font-semibold mb-2">{faq.question}</h3>
-            <p className="text-sm text-gray-700">{faq.answer}</p>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};