@opinly/next 0.1.2 → 0.1.4

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[],
-  };
-};

package/src/components/blog-post/_helpers/reading-time.ts

@@ -1,28 +0,0 @@
-import { JSONContent } from "@tiptap/core";
-
-export const countWords = (content: JSONContent | undefined): number => {
-  if (!content?.content) return 0;
-
-  let wordCount = 0;
-
-  const countWords = (nodes: any[]) => {
-    for (const node of nodes) {
-      if (node.type === "text" && node.text) {
-        const words = node.text.trim().split(/\s+/).filter(Boolean);
-        wordCount += words.length;
-      }
-      if (node.content) countWords(node.content);
-    }
-  };
-
-  countWords(content.content);
-
-  return wordCount;
-};
-
-export function calculateReadingTime(content: JSONContent): number {
-  const wordCount = countWords(content.content);
-
-  const readingTimeMinutes = Math.ceil(wordCount / 200);
-  return readingTimeMinutes;
-}

package/src/components/blog-post/_types/blog-post.ts

@@ -1,6 +0,0 @@
-import type { OpinlyApiOutput } from "@opinly/api-types";
-
-export type BlogPostRes = Extract<
-  OpinlyApiOutput["content"]["postOrFolder"],
-  { type: "post" }
->["data"];

package/src/components/blog-post/_types/class-names.ts

@@ -1,10 +0,0 @@
-export type BlogComponentClassNames = {
-  paragraph?: string;
-  heading?: string;
-  image?: string;
-  bulletList?: string;
-  orderedList?: string;
-  listItem?: string;
-  link?: string;
-  container?: string;
-};

package/src/components/blog-post/index.tsx

@@ -1,126 +0,0 @@
-import React from "react";
-import { JSONContent } from "@tiptap/core";
-import Link from "next/link";
-import { cn } from "../../utils/merge";
-import { opinlyConfig } from "../../sdk-config";
-import { BlogPostRes } from "./_types/blog-post";
-import {
-  genBlogPostingJSONLD,
-  genBreadcrumbJSONLD,
-  genFaqJSONLD,
-} from "./_helpers/json-ld";
-import { BlogComponentClassNames } from "./_types/class-names";
-import { FAQS } from "./_components/faq";
-import { calculateReadingTime } from "./_helpers/reading-time";
-import { Content } from "./_components/content";
-import { TableOfContents } from "./_components/table-of-contents";
-import { BreadCrumbs } from "../bread-crumbs";
-import { formatDate } from "../../utils/dates";
-import Head from "next/head";
-import Script from "next/script";
-
-export const BlogPost = ({
-  post,
-  classNames = {},
-}: {
-  post: BlogPostRes;
-  classNames?: BlogComponentClassNames;
-  notFoundComponent?: React.ReactNode;
-}) => {
-  const content = post.content as JSONContent;
-
-  console.log("content", content);
-
-  return (
-    <>
-      {/* <Head>
-        <> */}
-      {post.faqs && (
-        <Script
-          strategy="beforeInteractive"
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(genFaqJSONLD(post.faqs)).replace(
-              /</g,
-              "\\u003c"
-            ),
-          }}
-        />
-      )}
-      <Script
-        strategy="beforeInteractive"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{
-          __html: JSON.stringify(genBlogPostingJSONLD(post)),
-        }}
-      />
-      <Script
-        strategy="beforeInteractive"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{
-          __html: JSON.stringify(genBreadcrumbJSONLD(post)),
-        }}
-      />
-      {/* </>
-      </Head> */}
-
-      <div className="max-w-7xl mx-auto px-4 py-24 flex items-start space-x-8">
-        <div className="flex flex-col gap-12 w-full">
-          <div className="bg-orange-600">
-            <BreadCrumbs
-              breadcrumbs={[
-                post.folder && {
-                  url: `${opinlyConfig.blogPrefix}/${post.folder.slug}`,
-                  name: post.folder.name,
-                },
-              ]}
-            />
-
-            <h1 className="text-4xl font-bold mb-2 leading-tight">
-              {post.title}
-            </h1>
-            <div className="text-sm mb-4">
-              Author:{" "}
-              <Link
-                href={`${opinlyConfig.blogPrefix}/authors/${post.author?.slug}`}
-                className="font-medium"
-              >
-                {post.author?.name}
-              </Link>{" "}
-              · {calculateReadingTime(content)} min read ·{" "}
-              {formatDate(post.firstPublishedAt as string) || "Today"}
-            </div>
-          </div>
-
-          <div
-            className={cn(
-              "flex flex-col-reverse md:flex-row mx-auto mt-10 gap-12 relative w-full ",
-              classNames.container
-            )}
-          >
-            <article className="w-full lg:w-2/3 order-2 lg:order-1 flex items-start space-x-4">
-              <div className="prose w-full">
-                <Content content={content} classNames={classNames} />
-                <FAQS faqs={post.faqs} />
-              </div>
-            </article>
-            <div className="block md:min-w-72 md:sticky md:top-20 md:self-start">
-              <TableOfContents
-                content={content}
-                author={post.author}
-                post={post}
-              />
-            </div>
-          </div>
-        </div>
-        {/* <div className="hidden md:block ">
-        <TableOfContents
-          content={content}
-          author={post.post.author}
-          post={post}
-        />
-      </div> */}
-      </div>
-    </>
-  );
-};

package/src/components/bread-crumbs.tsx

@@ -1,48 +0,0 @@
-import Link from "next/link";
-import { Fragment } from "react";
-import { opinlyConfig } from "../sdk-config";
-
-export const BreadCrumbs = ({
-  breadcrumbs,
-}: {
-  breadcrumbs?: (
-    | {
-        name: string;
-        url?: string;
-      }
-    | null
-    | undefined
-  )[];
-}) => {
-  return (
-    <nav className="text-sm text-orange-100 text-muted-foreground mb-4">
-      <ol className="list-reset flex space-x-2">
-        <Link href="/" className="font-bold">
-          {opinlyConfig.siteName}
-        </Link>
-        <span>/</span>
-        <Link href={opinlyConfig.blogPrefix} className="font-bold">
-          Blog
-        </Link>
-        {breadcrumbs?.map((breadcrumb, index) => {
-          if (!breadcrumb) {
-            return null;
-          }
-
-          return (
-            <Fragment key={index}>
-              <span>/</span>
-              {breadcrumb.url ? (
-                <Link href={breadcrumb.url} className="font-bold">
-                  {breadcrumb.name}
-                </Link>
-              ) : (
-                <span className="font-bold">{breadcrumb.name}</span>
-              )}
-            </Fragment>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-};

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

@@ -1,50 +0,0 @@
-import { Opinly } from "@opinly/backend";
-import { PostPreview } from "../post-preview";
-import { BreadCrumbs } from "../bread-crumbs";
-
-export const FolderPage = ({
-  folder,
-}: {
-  folder: Extract<
-    Awaited<ReturnType<Opinly["content"]["blog"]>>,
-    { type: "folder" }
-  >["data"];
-}) => {
-  console.log("folder", JSON.stringify(folder, null, 2));
-  return (
-    <div className="max-w-6xl mx-auto px-4 py-10">
-      <BreadCrumbs />
-
-      <h1 className="text-4xl font-bold mb-2">{folder.name}</h1>
-      <p className="text-muted-foreground max-w-2xl mb-8">
-        {folder.description || `Explore articles about ${folder.name}.`}
-      </p>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
-        {folder.posts.length === 0 && (
-          <div className="text-muted-foreground">No posts added yet</div>
-        )}
-        {folder.posts.map((post) => {
-          console.log("post.image", post.image);
-          return <PostPreview key={post.slug} post={post} />;
-        })}
-      </div>
-    </div>
-  );
-};
-
-function formatDate(dateStr: string) {
-  return new Date(dateStr).toLocaleDateString("en-GB", {
-    day: "2-digit",
-    month: "short",
-    year: "numeric",
-  });
-}
-
-function formatMinutes(description: string | null) {
-  // Fake estimate based on length of description
-  if (!description) return "5 min read";
-  const words = description.split(" ").length;
-  const mins = Math.ceil(words / 200);
-  return `${mins} min read`;
-}

package/src/components/home-page.tsx

@@ -1,65 +0,0 @@
-import Link from "next/link";
-
-import { Opinly } from "@opinly/backend";
-import { PostPreview } from "./post-preview";
-
-type HomePage = Extract<
-  Awaited<ReturnType<Opinly["content"]["blog"]>>,
-  { type: "home" }
->["data"];
-
-export const HomePage = ({
-  homePage,
-  page,
-}: {
-  homePage: HomePage;
-  page: number | null | undefined;
-}) => {
-  const { posts, folders, count } = homePage;
-
-  console.log("posts", JSON.stringify(posts, null, 2));
-
-  const currentPage = page;
-  const totalPages = Math.ceil(count / 10);
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 py-10">
-      {/* Posts Grid */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
-        {posts.map((post) => (
-          <PostPreview key={post.slug} post={post} />
-        ))}
-      </div>
-
-      {/* Pagination */}
-      <div className="flex justify-center items-center mt-10 gap-2">
-        {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
-          <Link
-            key={p}
-            href={`?page=${p}`}
-            className={`px-3 py-1 border rounded ${
-              p === currentPage
-                ? "bg-black text-white"
-                : "hover:bg-gray-100 text-gray-700"
-            }`}
-          >
-            {p}
-          </Link>
-        ))}
-      </div>
-
-      {/* Folder tags */}
-      <div className="flex flex-wrap gap-2 mb-10">
-        {folders.map((folder) => (
-          <Link
-            key={folder.slug}
-            href={`/blog/${folder.slug}`}
-            className="px-4 py-1 bg-gray-100 text-sm rounded-full hover:bg-gray-200"
-          >
-            {folder.title}
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-};