npm - @opinly/next - Versions diffs - 0.1.2 - Mend

@opinly/next 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/.turbo/turbo-lint.log +14 -0
package/CHANGELOG.md +21 -0
package/dist/index.cjs +876 -0
package/dist/index.d.ts +17 -0
package/dist/index.js +838 -0
package/dist/index.mjs +838 -0
package/package.json +41 -0
package/src/components/author-page/_helpers/json-ld.ts +0 -0
package/src/components/author-page/index.tsx +62 -0
package/src/components/authors-page/index.tsx +90 -0
package/src/components/blog-post/_components/content.tsx +141 -0
package/src/components/blog-post/_components/faq.tsx +18 -0
package/src/components/blog-post/_components/share.tsx +48 -0
package/src/components/blog-post/_components/table-of-contents.tsx +63 -0
package/src/components/blog-post/_helpers/calc-reading-time.ts +0 -0
package/src/components/blog-post/_helpers/extract-headings.ts +25 -0
package/src/components/blog-post/_helpers/json-ld.ts +176 -0
package/src/components/blog-post/_helpers/reading-time.ts +28 -0
package/src/components/blog-post/_types/blog-post.ts +6 -0
package/src/components/blog-post/_types/class-names.ts +10 -0
package/src/components/blog-post/index.tsx +126 -0
package/src/components/bread-crumbs.tsx +48 -0
package/src/components/folder-page/index.tsx +50 -0
package/src/components/home-page.tsx +65 -0
package/src/components/not-found.tsx +36 -0
package/src/components/opinly-blog.tsx +37 -0
package/src/components/post-preview.tsx +73 -0
package/src/index.ts +2 -0
package/src/sdk-config.ts +37 -0
package/src/utils/dates.ts +6 -0
package/src/utils/generate-metadata.ts +54 -0
package/src/utils/images.ts +7 -0
package/src/utils/merge.ts +6 -0
package/sst-env.d.ts +9 -0
package/tsconfig.json +19 -0

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

@@ -0,0 +1,28 @@
+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 ADDED Viewed

@@ -0,0 +1,6 @@
+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 ADDED Viewed

@@ -0,0 +1,10 @@
+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 ADDED Viewed

@@ -0,0 +1,126 @@
+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 ADDED Viewed

@@ -0,0 +1,48 @@
+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 ADDED Viewed

@@ -0,0 +1,50 @@
+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 ADDED Viewed

@@ -0,0 +1,65 @@
+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>
+  );
+};

package/src/components/not-found.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+import Link from "next/link";
+export const OpinlyNotFound = () => {
+  return (
+    <>
+      <div className="bg-orange-600 py-10">
+        <div className="max-w-7xl mx-auto px-4">
+          <h1 className="text-4xl font-bold mb-2 leading-tight text-white">
+            Post Not Found
+          </h1>
+          <div className="text-sm mb-4 text-orange-100">
+            The post you're looking for doesn't exist or has been removed.
+          </div>
+        </div>
+      </div>
+      <div className="flex max-w-7xl mx-auto mt-10 gap-12">
+        <article className="w-2/3">
+          <div className="prose max-w-none">
+            <p className="text-gray-600">You can try:</p>
+            <ul className="list-disc pl-6 my-4">
+              <li>Checking the URL for typos</li>
+              <li>
+                Returning to the{" "}
+                <Link href="/blog" className="text-blue-600 underline">
+                  blog homepage
+                </Link>
+              </li>
+              <li>Using the search function to find what you're looking for</li>
+            </ul>
+          </div>
+        </article>
+      </div>
+    </>
+  );
+};

package/src/components/opinly-blog.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import { BlogPost } from "./blog-post";
+import { FolderPage } from "./folder-page";
+import { Opinly } from "@opinly/backend";
+import { HomePage } from "./home-page";
+import { AuthorPage } from "./author-page";
+import { OpinlyNotFound } from "./not-found";
+import { AuthorsPage } from "./authors-page";
+export const OpinlyBlog = ({
+  blog,
+  page,
+}: {
+  blog: Awaited<ReturnType<Opinly["content"]["blog"]>>;
+  page: number | null | undefined;
+}) => {
+  if (blog.type === "not-found") {
+    return <OpinlyNotFound />;
+  }
+  if (blog.type === "home") {
+    return <HomePage homePage={blog.data} page={page} />;
+  }
+  if (blog.type === "post") {
+    return <BlogPost post={blog.data} />;
+  }
+  if (blog.type === "author") {
+    return <AuthorPage author={blog.data} />;
+  }
+  if (blog.type === "authors") {
+    return <AuthorsPage authors={blog.data} />;
+  }
+  return <FolderPage folder={blog.data} />;
+};

package/src/components/post-preview.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+import { Opinly } from "@opinly/backend";
+import Link from "next/link";
+import Image from "next/image";
+import { opinlyConfig } from "../sdk-config";
+import { replaceImageNameSpace } from "../utils/images";
+import { formatDate } from "../utils/dates";
+export const PostPreview = ({
+  post,
+}: {
+  post: Extract<
+    Awaited<ReturnType<Opinly["content"]["blog"]>>,
+    { type: "home" }
+  >["data"]["posts"][number];
+}) => {
+  const postSlug = `${opinlyConfig.blogPrefix}/${post.folder?.slug ? `${post.folder.slug}/` : ""}${post.slug}`;
+  return (
+    <div>
+      {post.image?.fileKey && (
+        <Link key={post.slug} href={postSlug} className="group">
+          <div className="relative w-full h-48 mb-4">
+            <Image
+              src={`${opinlyConfig.imagesPrefix}/${replaceImageNameSpace(post.image.fileKey)}`}
+              alt={post.title}
+              fill
+              className="object-cover rounded-lg"
+            />
+          </div>
+        </Link>
+      )}
+      <div className="text-sm text-muted-foreground mb-1">
+        {post.folder?.name && (
+          <>
+            <Link
+              href={`${opinlyConfig.blogPrefix}/${post.folder.slug}`}
+              className="hover:underline"
+            >
+              {post.folder.name}
+            </Link>
+            <span className="mx-1">·</span>
+          </>
+        )}{" "}
+        {formatDate(post.firstPublishedAt as string)}
+      </div>
+      <Link key={post.slug} href={postSlug} className="group">
+        <h2 className="text-lg font-semibold leading-snug group-hover:underline">
+          {post.title}
+        </h2>
+      </Link>
+      {post.description && (
+        <p className="text-sm text-gray-600 mt-1 line-clamp-2">
+          {post.description}
+        </p>
+      )}
+      <div className="text-xs text-gray-500 mt-2">
+        {post.author && (
+          <>
+            <Link
+              href={`${opinlyConfig.blogPrefix}/authors/${post.author.slug}`}
+              className="font-medium hover:underline"
+            >
+              {post.author?.name}
+            </Link>{" "}
+            <span className="mx-1">·</span>
+          </>
+        )}{" "}
+        {formatDate(post.firstPublishedAt as string)}
+      </div>
+    </div>
+  );
+};

package/src/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./components/opinly-blog";
2	+ export * from "./components/home-page";

package/src/sdk-config.ts ADDED Viewed

@@ -0,0 +1,37 @@
+const siteUrl = process.env.OPINLY_SITE_URL;
+const opinlyEnvVars = {
+  OPINLY_IMAGES_PREFIX: process.env.OPINLY_IMAGES_PREFIX as string,
+  OPINLY_SITE_URL: process.env.OPINLY_SITE_URL as string,
+  OPINLY_BLOG_PREFIX: process.env.OPINLY_BLOG_PREFIX as string,
+  OPINLY_CDN_URL: process.env.OPINLY_CDN_URL as string,
+  OPINLY_SITE_NAME: process.env.OPINLY_SITE_NAME as string,
+};
+Object.entries(opinlyEnvVars).forEach(([key, value]) => {
+  if (!value) {
+    throw new Error(`OPINLY ERROR: env var ${key} is not set`);
+  }
+});
+export let opinlyConfig: {
+  cdnUrl: string;
+  imagesPrefix: string;
+  imagesUrl: string;
+  siteUrl: string;
+  blogPrefix: string;
+  blogUrl: string;
+  siteName: string;
+} = {
+  cdnUrl: process.env.OPINLY_CDN_URL || "https://cdn.opinly.ai",
+  siteUrl: process.env.OPINLY_SITE_URL as string,
+  imagesPrefix: process.env.OPINLY_IMAGES_PREFIX as string,
+  imagesUrl: `${process.env.OPINLY_SITE_URL as string}${process.env.OPINLY_IMAGES_PREFIX as string}`,
+  blogPrefix: process.env.OPINLY_BLOG_PREFIX as string,
+  blogUrl: `${process.env.OPINLY_SITE_URL as string}${process.env.OPINLY_BLOG_PREFIX as string}`,
+  siteName: process.env.OPINLY_SITE_NAME as string,
+};
+export function setOpinlyConfig(newConfig: typeof opinlyConfig) {
+  opinlyConfig = { ...opinlyConfig, ...newConfig };
+}

package/src/utils/dates.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export const formatDate = (iso: string) =>
+  new Date(iso).toLocaleDateString("en-US", {
+    month: "short",
+    day: "2-digit",
+    year: "numeric",
+  });

package/src/utils/generate-metadata.ts ADDED Viewed

@@ -0,0 +1,54 @@
+import { Opinly, OpinlyApiOutput, OpinlyPageProps } from "@opinly/backend";
+import type { Metadata, ResolvingMetadata } from "next";
+import { opinlyConfig } from "../sdk-config";
+type BlogPost = Extract<
+  OpinlyApiOutput["content"]["postOrFolder"],
+  { type: "post" }
+>["data"];
+export const generateMetadata = async (
+  client: Opinly,
+  params: OpinlyPageProps,
+  parent: ResolvingMetadata
+): Promise<Metadata> => {
+  const blog = await client.content.blog(params);
+  if (blog.type === "not-found") {
+    return parent as Metadata;
+  }
+  const previousImages = (await parent).openGraph?.images || [];
+  if (blog.type === "post") {
+    const openGraphImageKey = blog.data?.titleFile?.fileKey;
+    const images = openGraphImageKey
+      ? [`${opinlyConfig.imagesUrl}/${openGraphImageKey}`, ...previousImages]
+      : previousImages;
+    return {
+      ...(parent as Metadata),
+      title: blog.data.title,
+      openGraph: {
+        images: images,
+        type: "article",
+        authors: blog.data.author && [
+          `${opinlyConfig.blogUrl}/authors/${blog.data.author.slug}`,
+        ],
+      },
+      // keywords: [blog.data.keywords],
+      authors: blog.data.author && [
+        {
+          name: blog.data.author.name,
+          url: `${opinlyConfig.blogUrl}/authors/${blog.data.author.slug}`,
+        },
+      ],
+      other: {},
+    };
+  }
+  return parent as Metadata;
+};

package/src/utils/images.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export function replaceImageNameSpace(fileKey: string) {
+  const pathParts = fileKey.split("/").filter(Boolean);
+  if (pathParts.length > 1) {
+    pathParts.shift();
+  }
+  return pathParts.join("/");
+}

package/src/utils/merge.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};

package/sst-env.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/* This file is auto-generated by SST. Do not edit. */
+/* tslint:disable */
+/* eslint-disable */
+/* deno-fmt-ignore-file */
+/// <reference path="../../../sst-env.d.ts" />
+import "sst"
+export {}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "extends": ["../../tsconfig.base.json", "@tsconfig/next/tsconfig.json"],
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}