@opinly/next 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opinly/next",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "private": false,
   "devDependencies": {
@@ -25,11 +25,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.3"
   },
   "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>
-  );
-};

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

@@ -1,48 +0,0 @@
-import { Facebook, Linkedin, Mail, Twitter } from "lucide-react";
-import Link from "next/link";
-import { opinlyConfig } from "../../../sdk-config";
-import { BlogPostRes } from "../_types/blog-post";
-
-export const Share = ({ post }: { post: BlogPostRes }) => {
-  const postUrl = encodeURIComponent(`${opinlyConfig.blogUrl}/${post.slug}`);
-  return (
-    <div className="flex gap-2 mb-6">
-      <Link
-        href={`https://linkedin.com/sharing/share-offsite?url=${postUrl}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="border p-1 rounded flex items-center justify-center w-8 h-8"
-      >
-        <span className="sr-only">Share on LinkedIn</span>
-        <Linkedin className="w-4 h-4" />
-      </Link>
-      <Link
-        href={`https://twitter.com/intent/tweet?url=${postUrl}&text=${encodeURIComponent(
-          `Check out this article by ${post.author?.name}`
-        )}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="border p-1 rounded flex items-center justify-center w-8 h-8"
-      >
-        <span className="sr-only">Share on Twitter</span>
-        <Twitter />
-      </Link>
-      <Link
-        href={`https://facebook.com/sharer/sharer.php?u=${postUrl}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="border p-1 rounded flex items-center justify-center w-8 h-8"
-      >
-        <span className="sr-only">Share on Facebook</span>
-        <Facebook />
-      </Link>
-      <Link
-        href={`mailto:?body=${encodeURIComponent(`${post.title}\n${postUrl}`)}`}
-        className="border p-1 rounded flex items-center justify-center w-8 h-8"
-      >
-        <span className="sr-only">Share via Email</span>
-        <Mail className="w-4 h-4" />
-      </Link>
-    </div>
-  );
-};

package/src/components/blog-post/_components/table-of-contents.tsx

@@ -1,63 +0,0 @@
-import { JSONContent } from "@tiptap/core";
-import { BlogPostRes } from "../_types/blog-post";
-import { cn } from "../../../utils/merge";
-import Image from "next/image";
-import { opinlyConfig } from "../../../sdk-config";
-import { replaceImageNameSpace } from "../../../utils/images";
-import { extractHeadings } from "../_helpers/extract-headings";
-import { Share } from "./share";
-import Link from "next/link";
-
-type TableOfContentsProps = {
-  content: JSONContent;
-  author: BlogPostRes["author"] | null;
-  post: BlogPostRes;
-};
-
-export const TableOfContents = ({
-  content,
-  author,
-  post,
-}: TableOfContentsProps) => {
-  return (
-    <aside className={cn("w-full lg:w-1/3 lg:sticky lg:top-20 lg:self-start")}>
-      {author && (
-        <div className="w-full mb-6 border p-4 rounded-md text-sm">
-          <div className="flex items-center gap-3 mb-3">
-            {author.fileKey && (
-              <Image
-                src={`${opinlyConfig.imagesPrefix}/${replaceImageNameSpace(author.fileKey)}`}
-                alt={author.name}
-                width={48}
-                height={48}
-                className="rounded-full"
-              />
-            )}
-            <div>
-              <Link
-                href={`${opinlyConfig.blogPrefix}/authors/${author.slug}`}
-                className="text-xs uppercase text-muted-foreground font-medium"
-              >
-                {author.name}
-              </Link>
-              <div className="text-muted-foreground text-sm">{author.bio}</div>
-            </div>
-          </div>
-        </div>
-      )}
-      <Share post={post} />
-      <div className="border-l-4 border-opinlyAccent pl-4 mb-4">
-        <h2 className="text-lg font-semibold mb-2">TABLE OF CONTENTS</h2>
-        <ul className="text-sm text-gray-700 space-y-1">
-          {(extractHeadings(content) || []).map((heading) => (
-            <li key={heading.slug}>
-              <a href={`#${heading.slug}`} className="hover:underline">
-                {heading.text}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </aside>
-  );
-};

package/src/components/blog-post/_helpers/extract-headings.ts

@@ -1,25 +0,0 @@
-import { JSONContent } from "@tiptap/core";
-
-export function extractHeadings(
-  content: JSONContent
-): { text: string; slug: string }[] {
-  const headings: { text: string; slug: string }[] = [];
-  if (!content?.content) return headings;
-
-  const walk = (nodes: any[]) => {
-    for (const node of nodes) {
-      if (node.type === "heading" && node.content?.[0]?.text) {
-        const text = node.content[0].text;
-        const slug = text
-          .toLowerCase()
-          .replace(/[^a-z0-9]+/g, "-")
-          .replace(/^-+|-+$/g, "");
-        headings.push({ text, slug });
-      }
-      if (node.content) walk(node.content);
-    }
-  };
-
-  walk(content.content);
-  return headings;
-}

package/src/components/blog-post/_helpers/json-ld.ts

@@ -1,176 +0,0 @@
-import {
-  BlogPosting,
-  BreadcrumbList,
-  FAQPage,
-  WithContext,
-  ListItem,
-} from "schema-dts";
-import { BlogPostRes } from "../_types/blog-post";
-import { opinlyConfig } from "../../../sdk-config";
-import { JSONContent } from "@tiptap/core";
-import { replaceImageNameSpace } from "../../../utils/images";
-
-// Add this function somewhere in your BlogPost component file
-export function generateArticleBodyHtml(content: JSONContent): string {
-  if (!content?.content) return "";
-
-  let htmlString = "";
-
-  content.content.forEach((node) => {
-    switch (node.type) {
-      case "paragraph":
-        htmlString += `<p>${generateChildrenHtml(node.content)}</p>`;
-        break;
-      case "heading":
-        const headingLevel = node.attrs?.level || 1;
-        htmlString += `<h${headingLevel}>${generateChildrenHtml(node.content)}</h${headingLevel}>`;
-        break;
-      case "bulletList":
-        htmlString += `<ul>${generateChildrenHtml(node.content)}</ul>`;
-        break;
-      case "orderedList":
-        htmlString += `<ol>${generateChildrenHtml(node.content)}</ol>`;
-        break;
-      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:
-        // Handle other block types or just ignore them for articleBody
-        break;
-    }
-  });
-
-  return htmlString;
-}
-
-function generateChildrenHtml(
-  nodes: JSONContent["content"] | undefined
-): string {
-  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 === "link" && mark.attrs?.href) {
-            text = `<a href="${mark.attrs.href}">${text}</a>`;
-          }
-        });
-      }
-      childrenHtml += text;
-    }
-    // If you have nested content within child nodes, you might need a recursive call here
-    // For example, if a list item can contain paragraphs
-    // if (child.content) {
-    //   childrenHtml += generateChildrenHtml(child.content);
-    // }
-  });
-  return childrenHtml;
-}
-
-export const genFaqJSONLD = (
-  faqs: NonNullable<BlogPostRes["faqs"]>
-): WithContext<FAQPage> => {
-  return {
-    "@context": "https://schema.org",
-    "@type": "FAQPage",
-    mainEntity: faqs.map((faq) => ({
-      "@type": "Question",
-      name: faq.question,
-      acceptedAnswer: {
-        "@type": "Answer",
-        text: faq.answer,
-      },
-    })),
-  };
-};
-
-export const genBlogPostingJSONLD = (
-  post: BlogPostRes
-): WithContext<BlogPosting> => {
-  return {
-    "@context": "https://schema.org",
-    "@type": "BlogPosting",
-    headline: post.title,
-    description: post.description || undefined,
-    url: `${opinlyConfig.blogUrl}/${post.folder ? `${post.folder.slug + "/"}${post.slug}` : post.slug}`,
-    datePublished: post.firstPublishedAt || undefined,
-    dateModified: post.modifiedAt || undefined,
-    image: post.titleFile?.fileKey
-      ? {
-          "@type": "ImageObject",
-          url: `${opinlyConfig.imagesUrl}/${replaceImageNameSpace(post.titleFile.fileKey)}`,
-        }
-      : undefined,
-    author: post.author
-      ? {
-          "@type": "Person",
-          name: post.author.name,
-          url: `${opinlyConfig.blogUrl}/author/${post.author.slug}`,
-          description: post.author.bio || undefined,
-        }
-      : undefined,
-    isAccessibleForFree: true,
-    articleBody: generateArticleBodyHtml(post.content as JSONContent),
-  };
-};
-
-export const genBreadcrumbJSONLD = (
-  post: BlogPostRes
-): WithContext<BreadcrumbList> => {
-  const itemListElement = [
-    {
-      "@type": "ListItem",
-      position: 1,
-      name: "Company Name",
-      item: opinlyConfig.siteUrl,
-    },
-    {
-      "@type": "ListItem",
-      position: 2,
-      name: post.folder?.name || "Blog",
-      item: `${opinlyConfig.blogUrl}/blog`,
-    },
-  ];
-
-  if (post.folder) {
-    itemListElement.push({
-      "@type": "ListItem",
-      position: 3,
-      name: post.folder.name,
-      item: `${opinlyConfig.blogUrl}/blog/${post.folder.slug}`,
-    });
-
-    itemListElement.push({
-      "@type": "ListItem",
-      position: 4,
-      name: post.title,
-      item: `${opinlyConfig.blogUrl}/blog/${post.folder.slug}/${post.slug}`,
-    });
-  } else {
-    itemListElement.push({
-      "@type": "ListItem",
-      position: 3,
-      name: post.title,
-      item: `${opinlyConfig.blogUrl}/blog/${post.slug}`,
-    });
-  }
-
-  return {
-    "@context": "https://schema.org",
-    "@type": "BreadcrumbList",
-    itemListElement: itemListElement as ListItem[],
-  };
-};