@alphasquad/saleor-template-advance 0.1.0

package/src/app/blog/[slug]/blogContentRenderer.tsx

@@ -0,0 +1,369 @@
+import React from "react";
+import Link from "next/link";
+
+export type EditorJsBlock = {
+  id: string;
+  type: string;
+  data: {
+    text?: string;
+    level?: number;
+    style?: "ordered" | "unordered";
+    items?: string[];
+    caption?: string;
+    alignment?: "left" | "center" | "right";
+  };
+};
+
+// Helper function to decode HTML entities
+function decodeHtmlEntities(text: string): string {
+  const textarea =
+    typeof document !== "undefined" ? document.createElement("textarea") : null;
+
+  if (textarea) {
+    textarea.innerHTML = text;
+    return textarea.value;
+  }
+
+  // Fallback for server-side rendering
+  return text
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&amp;/g, "&")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&nbsp;/g, " ");
+}
+
+// Helper function to make all anchor tags open in new tab
+function processAnchorsForNewTab(html: string): string {
+  // Match <a tags and add target="_blank" rel="noopener noreferrer"
+  return html.replace(
+    /<a\s+([^>]*?)>/gi,
+    (match, attributes) => {
+      // Check if target already exists
+      if (/target\s*=/i.test(attributes)) {
+        return match;
+      }
+      return `<a ${attributes} target="_blank" rel="noopener noreferrer">`;
+    }
+  );
+}
+
+// Helper function to check if text contains HTML table elements
+function isTableFragment(text: string): boolean {
+  const tablePatterns = [
+    /<table/i,
+    /<\/table>/i,
+    /<thead/i,
+    /<\/thead>/i,
+    /<tbody/i,
+    /<\/tbody>/i,
+    /<tr/i,
+    /<\/tr>/i,
+    /<td/i,
+    /<\/td>/i,
+    /<th/i,
+    /<\/th>/i,
+    /<colgroup/i,
+    /<\/colgroup>/i,
+    /<col/i,
+  ];
+  return tablePatterns.some((pattern) => pattern.test(text));
+}
+
+// Helper function to merge table fragments
+function mergeTableBlocks(blocks: EditorJsBlock[]): EditorJsBlock[] {
+  const merged: EditorJsBlock[] = [];
+  let tableBuffer: string[] = [];
+  let tableStartId: string | null = null;
+  let isInTable = false;
+
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i];
+    const text = block.data?.text || "";
+    const decodedText = decodeHtmlEntities(text);
+
+    // Check if this starts a table
+    if (/<table/i.test(decodedText)) {
+      isInTable = true;
+      tableStartId = block.id;
+    }
+
+    if (
+      block.type === "paragraph" &&
+      (isInTable || isTableFragment(decodedText))
+    ) {
+      // Start or continue accumulating table content
+      if (!tableStartId) {
+        tableStartId = block.id;
+        isInTable = true;
+      }
+
+      // Clean up individual fragments: remove <br> tags and preserve whitespace
+      const cleanedText = decodedText
+        .replace(/<br\s*\/?>/gi, "")
+        .replace(/^\s+|\s+$/g, ""); // Trim leading/trailing whitespace only
+
+      if (cleanedText) {
+        tableBuffer.push(cleanedText);
+      }
+
+      // Check if this closes the table
+      if (/<\/table>/i.test(decodedText)) {
+        isInTable = false;
+        // Create merged table block
+        const mergedHTML = tableBuffer.join("");
+        merged.push({
+          id: tableStartId || block.id,
+          type: "table",
+          data: {
+            text: mergedHTML,
+          },
+        });
+        tableBuffer = [];
+        tableStartId = null;
+      }
+    } else {
+      // If we have accumulated table content, create a merged block
+      if (tableBuffer.length > 0 && tableStartId) {
+        // Join without extra newlines to preserve HTML structure
+        const mergedHTML = tableBuffer.join("");
+        merged.push({
+          id: tableStartId,
+          type: "table",
+          data: {
+            text: mergedHTML,
+          },
+        });
+        tableBuffer = [];
+        tableStartId = null;
+        isInTable = false;
+      }
+      // Add the non-table block
+      merged.push(block);
+    }
+  }
+
+  // Handle any remaining table content
+  if (tableBuffer.length > 0 && tableStartId) {
+    const mergedHTML = tableBuffer.join("");
+    merged.push({
+      id: tableStartId,
+      type: "table",
+      data: {
+        text: mergedHTML,
+      },
+    });
+  }
+
+  return merged;
+}
+
+export default function BlogEditorRenderer({
+  content,
+}: {
+  content: string | null | undefined;
+}) {
+  let blocks: EditorJsBlock[] = [];
+  if (content) {
+    try {
+      const parsed = JSON.parse(content);
+      if (Array.isArray(parsed?.blocks)) {
+        blocks = parsed.blocks as EditorJsBlock[];
+      }
+    } catch (_) {}
+  }
+
+  if (!blocks.length) {
+    return (
+      <div className="w-full p-6">
+        <h2 className="text-xl font-semibold">Call for Availability</h2>
+      </div>
+    );
+  }
+
+  // Merge table fragments before rendering
+  const mergedBlocks = mergeTableBlocks(blocks);
+
+  const renderBlock = (block: EditorJsBlock) => {
+    const { type, data } = block;
+    const html = processAnchorsForNewTab(decodeHtmlEntities(data?.text || ""));
+
+    switch (type) {
+      case "table":
+        return (
+          <div
+            key={block.id}
+            className="table-wrapper my-6"
+            dangerouslySetInnerHTML={{ __html: data?.text || "" }}
+          />
+        );
+      case "header": {
+        const level = Math.min(Math.max(Number(data?.level) || 3, 1), 6);
+        return React.createElement(`h${level}`, {
+          key: block.id,
+          className: "text-2xl font-semibold leading-8 tracking-[-0.06px] my-6",
+          dangerouslySetInnerHTML: { __html: html },
+        });
+      }
+      case "list": {
+        const style = data?.style || "unordered";
+        const items = Array.isArray(data?.items) ? data.items : [];
+        const ListTag = style === "ordered" ? "ol" : "ul";
+        const listClassName =
+          style === "ordered"
+            ? "list-decimal list-inside my-4 space-y-2 text-lg leading-7 tracking-[-0.045px]"
+            : "list-disc list-inside my-4 space-y-2 text-lg leading-7 tracking-[-0.045px]";
+
+        return (
+          <ListTag key={block.id} className={listClassName}>
+            {items.map((item, idx) => (
+              <li
+                key={`${block.id}-${idx}`}
+                dangerouslySetInnerHTML={{ __html: processAnchorsForNewTab(decodeHtmlEntities(item)) }}
+              />
+            ))}
+          </ListTag>
+        );
+      }
+      case "quote": {
+        const alignment = data?.alignment || "left";
+        const alignmentClass = alignment === "center" ? "text-center" : alignment === "right" ? "text-right" : "text-left";
+        return (
+          <blockquote
+            key={block.id}
+            className={`my-6 pl-4 border-l-4 border-[var(--color-primary-600)] italic text-lg leading-7 text-[var(--color-secondary-700)] ${alignmentClass}`}
+          >
+            <p dangerouslySetInnerHTML={{ __html: html }} />
+            {data?.caption && data.caption !== data.text && (
+              <cite
+                className="block mt-2 text-sm not-italic text-[var(--color-secondary-500)]"
+                dangerouslySetInnerHTML={{ __html: processAnchorsForNewTab(decodeHtmlEntities(data.caption)) }}
+              />
+            )}
+          </blockquote>
+        );
+      }
+      case "paragraph":
+      default:
+        // Check if this paragraph contains table HTML that wasn't merged
+        if (isTableFragment(html)) {
+          return (
+            <div
+              key={block.id}
+              className="table-wrapper my-6"
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          );
+        }
+        return (
+          <p
+            key={block.id}
+            className="text-lg leading-7 tracking-[-0.045px] my-4"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        );
+    }
+  };
+
+  return (
+    <>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+          .editor-content a {
+            color: var(--color-primary-600);
+            text-decoration: underline;
+            transition: opacity 0.2s;
+          }
+        
+          .editor-content strong,
+          .editor-content b {
+            font-weight: 600;
+          }
+          .editor-content em,
+          .editor-content i {
+            font-style: italic;
+          }
+          .editor-content blockquote {
+            background-color: var(--color-secondary-50);
+            padding: 1rem 1.5rem;
+            border-radius: 0 0.5rem 0.5rem 0;
+          }
+          .editor-content img {
+            max-width: 100%;
+            width: 100%;
+            height: auto;
+            display: block;
+            margin: 1.5rem 0;
+            border-radius: 0.5rem;
+          }
+          .editor-content table {
+            width: 100% !important;
+            max-width: 100% !important;
+            border-collapse: collapse;
+            margin: 2rem 0;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            display: table;
+            table-layout: auto !important;
+          }
+          .editor-content .table-wrapper {
+            width: 100%;
+            overflow-x: auto;
+          }
+          .editor-content table col {
+            width: auto !important;
+          }
+          .editor-content table colgroup {
+            display: table-column-group;
+          }
+          .editor-content table thead {
+            background-color: var(--color-primary-600);
+            color: white;
+          }
+          .editor-content table th,
+          .editor-content table td {
+            padding: 1rem 1.5rem;
+            text-align: left;
+            border: 1px solid var(--color-secondary-300);
+            line-height: 1.6;
+          }
+          .editor-content table th {
+            font-weight: 600;
+            font-size: 1rem;
+          }
+          .editor-content table tbody tr:nth-child(even) {
+            background-color: var(--color-secondary-50);
+          }
+          .editor-content .table-header {
+            font-weight: 600;
+            font-size: 1.1rem;
+            padding: 1.25rem 1.5rem;
+          }
+          .editor-content .table-data {
+            font-size: 0.95rem;
+            padding: 0.875rem 1.25rem;
+          }
+          .ezo-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 2rem 0;
+          }
+          @media (max-width: 768px) {
+            .editor-content table {
+              font-size: 0.875rem;
+            }
+            .editor-content table th,
+            .editor-content table td {
+              padding: 0.75rem 1rem;
+            }
+          }
+        `,
+        }}
+      />
+      <div className="editor-content overflow-x-auto">
+        {mergedBlocks.map(renderBlock)}
+      </div>
+    </>
+  );
+}

package/src/app/blog/[slug]/layout.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next"
+import { getStoreName } from "@/app/utils/branding"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: `Blog Post - ${getStoreName()}`,
+    description: `Read this article with expert insights, tips, and advice from ${getStoreName()}'s team.`,
+  }
+}
+
+export default function BlogPostLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

package/src/app/blog/[slug]/page.tsx

@@ -0,0 +1,151 @@
+import React from "react"
+import type { Metadata } from "next"
+import Link from "next/link"
+import Breadcrumb from "@/app/components/reuseableUI/breadcrumb"
+import Heading from "@/app/components/reuseableUI/heading"
+import EditorRenderer from "@/app/components/richText/EditorRenderer"
+import { fetchBlogBySlug } from "@/graphql/queries/getBlogs"
+import { getStoreName } from "@/app/utils/branding"
+import {
+  generateBlogPostingSchema,
+  generateBreadcrumbSchema,
+} from "@/lib/schema"
+import { notFound } from "next/navigation"
+import { extractTextFromEditorJs } from "@/lib/seo/extractTextFromEditorJs"
+
+function truncate(input: string, maxLen: number): string {
+  const v = input.trim()
+  if (v.length <= maxLen) return v
+  return v.slice(0, Math.max(0, maxLen - 1)).trimEnd() + "…"
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}): Promise<Metadata> {
+  const { slug } = await params
+  const post = await fetchBlogBySlug(slug)
+
+  if (!post || !post.title) {
+    return {
+      title: `Blog Post Not Found - ${getStoreName()}`,
+    }
+  }
+
+  const desc =
+    truncate(extractTextFromEditorJs(post.content), 160) ||
+    `${post.title} - ${getStoreName()}`
+
+  return {
+    title: `${post.title} - ${getStoreName()}`,
+    description: desc,
+    alternates: {
+      canonical: `/blog/${slug}`,
+    },
+    openGraph: {
+      title: `${post.title} - ${getStoreName()}`,
+      description: desc,
+      type: "article",
+      url: `/blog/${slug}`,
+      images: [{ url: "/Logo.png" }],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: `${post.title} - ${getStoreName()}`,
+      description: desc,
+      images: ["/Logo.png"],
+    },
+  }
+}
+
+export default async function BlogPostPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+  const post = await fetchBlogBySlug(slug)
+
+  if (!post || !post.title) {
+    notFound()
+  }
+
+  // Format date if available
+  const formattedDate = post.created
+    ? new Date(post.created).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      })
+    : ""
+
+  // Generate schema.org structured data
+  const desc =
+    truncate(extractTextFromEditorJs(post.content), 200) ||
+    `${post.title} - ${getStoreName()}`
+
+  const blogSchema = generateBlogPostingSchema(
+    post.title,
+    desc,
+    `/blog/${slug}`,
+    post.created || new Date().toISOString(),
+    post.created || new Date().toISOString()
+  );
+
+  const breadcrumbSchema = generateBreadcrumbSchema([
+    { name: "Home", url: "/" },
+    { name: "Blog", url: "/blog" },
+    { name: post.title, url: `/blog/${slug}` },
+  ]);
+
+  return (
+    <main className="h-full w-full">
+      {/* Schema.org structured data */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(blogSchema) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+      <div className="container mx-auto max-w-[1276px]">
+        <div className="flex flex-col items-start w-full gap-8 px-4 md:px-6 py-12 md:py-16 lg:py-24">
+          <div className="flex flex-col items-start gap-5 w-full">
+            <Breadcrumb
+              items={[
+                { text: "Home", link: "/" },
+                { text: "BLOGS", link: "/blog" },
+                { text: post.title, link: `/blog/${post.slug}` },
+              ]}
+            />
+            <Heading as="h1" content={post.title} />
+            {formattedDate && (
+              <p className="text-sm text-[var(--color-secondary-500)]">
+                Published on {formattedDate}
+              </p>
+            )}
+          </div>
+
+          <div className="w-full flex flex-col items-start gap-6">
+            {/* Blog Content */}
+            <div className="w-full">
+              <EditorRenderer content={post.content} />
+            </div>
+
+            {/* Back to Blog Link */}
+            <div className="w-full pt-8 border-t border-[var(--color-secondary-200)]">
+              <Link
+                href="/blog"
+                className="text-[var(--color-primary-600)] hover:underline inline-flex items-center gap-2"
+              >
+                ← Back to all blogs
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}

package/src/app/blog/constant.tsx

@@ -0,0 +1,147 @@
+export const blogPosts = [
+  {
+    id: 1,
+    title: "The Future of Performance Exhaust Systems",
+    excerpt:
+      "Exploring the latest innovations in exhaust technology and what it means for car enthusiasts.",
+    date: "August 15, 2025",
+    readTime: "5 min read",
+    image: "/no-image-avail-large.png",
+    slug: "future-of-performance-exhaust-systems",
+  },
+  {
+    id: 2,
+    title: "Top 5 Exhaust Upgrades for Your Vehicle",
+    excerpt:
+      "Discover the best exhaust upgrades to enhance your vehicle's performance and sound.",
+    date: "July 28, 2025",
+    readTime: "4 min read",
+    image: "/no-image-avail-large.png",
+    slug: "top-5-exhaust-upgrades",
+  },
+  {
+    id: 3,
+    title: "Maintaining Your Exhaust System: A Complete Guide",
+    excerpt:
+      "Learn essential maintenance tips to keep your exhaust system in top condition.",
+    date: "July 10, 2025",
+    readTime: "6 min read",
+    image: "/no-image-avail-large.png",
+    slug: "exhaust-system-maintenance-guide",
+  },
+    {
+    id: 4,
+    title: "The Future of Performance Exhaust Systems",
+    excerpt:
+      "Exploring the latest innovations in exhaust technology and what it means for car enthusiasts.",
+    date: "August 15, 2025",
+    readTime: "5 min read",
+    image: "/no-image-avail-large.png",
+    slug: "future-of-performance-exhaust-systems",
+  },
+  {
+    id: 5,
+    title: "Top 5 Exhaust Upgrades for Your Vehicle",
+    excerpt:
+      "Discover the best exhaust upgrades to enhance your vehicle's performance and sound.",
+    date: "July 28, 2025",
+    readTime: "4 min read",
+    image: "/no-image-avail-large.png",
+    slug: "top-5-exhaust-upgrades",
+  },
+  {
+    id: 6,
+    title: "Maintaining Your Exhaust System: A Complete Guide",
+    excerpt:
+      "Learn essential maintenance tips to keep your exhaust system in top condition.",
+    date: "July 10, 2025",
+    readTime: "6 min read",
+    image: "/no-image-avail-large.png",
+    slug: "exhaust-system-maintenance-guide",
+  },
+    {
+    id: 7,
+    title: "The Future of Performance Exhaust Systems",
+    excerpt:
+      "Exploring the latest innovations in exhaust technology and what it means for car enthusiasts.",
+    date: "August 15, 2025",
+    readTime: "5 min read",
+    image: "/no-image-avail-large.png",
+    slug: "future-of-performance-exhaust-systems",
+  },
+  {
+    id: 8,
+    title: "Top 5 Exhaust Upgrades for Your Vehicle",
+    excerpt:
+      "Discover the best exhaust upgrades to enhance your vehicle's performance and sound.",
+    date: "July 28, 2025",
+    readTime: "4 min read",
+    image: "/no-image-avail-large.png",
+    slug: "top-5-exhaust-upgrades",
+  },
+  {
+    id: 9,
+    title: "Maintaining Your Exhaust System: A Complete Guide",
+    excerpt:
+      "Learn essential maintenance tips to keep your exhaust system in top condition.",
+    date: "July 10, 2025",
+    readTime: "6 min read",
+    image: "/no-image-avail-large.png",
+    slug: "exhaust-system-maintenance-guide",
+  },
+];
+
+export const BlogPostContent = {
+  title: "COMPONENTS OF THE BULKHEAD FITTING KIT",
+  description:
+    "This kit includes various parts that ensure a secure, leak-proof connection between the air supply line and the ARB differential. Here's a comprehensive overview of each component, along with their part numbers and roles in the assembly.",
+  subtitle:"6mm Banjo Bolt",
+  desc: "This kit comprises multiple components designed to ensure a secure and leak-free connection between the air supply line and the ARB differential. Below is a thorough overview of each part, their part numbers, and their functions in the assembly.",
+    components: [
+    {
+      id: 1,
+      title: "6MM BANJO BOLT",
+      description:
+        "The banjo bolt (Item #01) fastens the banjo elbow and washer to the differential body. This bolt is crucial for maintaining pressure and airflow to the differential.",
+    },
+    {
+      id: 2,
+      title: "6MM BANJO BOLT",
+      description:
+        "The banjo bolt (Item #01) secures the banjo elbow and washer to the differential body. This bolt is vital for ensuring proper pressure and airflow to the differential.",
+    },
+    {
+      id: 3,
+      title: "6MM BANJO BOLT",
+      description:
+        "The banjo bolt (Item #01) secures the banjo elbow and washer to the differential body. This bolt is essential for maintaining pressure and airflow to the differential.",
+    },
+    {
+      id: 4,
+      title: "6MM BANJO BOLT",
+      description:
+        "The banjo bolt (Item #01) fastens the banjo elbow and washer to the differential body. This bolt is key to ensuring proper pressure and airflow to the differential.",
+    },
+    {
+      id: 5,
+      title: "6MM BANJO BOLT",
+      description:
+        "The banjo bolt (Item #01) secures the banjo elbow and washer to the differential body. This bolt plays a vital role in maintaining pressure and airflow to the differential.",
+    },
+    {
+      id: 6,
+      title: "6MM BANJO BOLT",
+      description:
+        "The banjo bolt (Item #01) fastens the banjo elbow and washer to the differential body. This bolt is essential for ensuring pressure and airflow to the differential.",
+    },
+    {
+      id: 7,
+      title: "6MM BANJO BOLT",
+      specs: [
+        "External Tube Diameter: 6mm",
+        "Internal Tube Diameter: 3mm",
+        "Bulkhead Thread: 1/4\" NPT",
+      ],
+    },
+  ],
+};