@alphasquad/saleor-template-advance 0.1.0

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

@@ -0,0 +1,159 @@
+import BlogEditorRenderer from "@/app/blog/[slug]/blogContentRenderer";
+import Breadcrumb from "@/app/components/reuseableUI/breadcrumb";
+import Heading from "@/app/components/reuseableUI/heading";
+import { getStoreName } from "@/app/utils/branding";
+import { fetchBlogBySlug } from "@/graphql/queries/getBlogs";
+import {
+  generateBlogPostingSchema,
+  generateBreadcrumbSchema,
+} from "@/lib/schema";
+import type { Metadata } from "next";
+import Link from "next/link";
+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: `Content Page Not Found - ${getStoreName()}`,
+    };
+  }
+
+  const desc =
+    truncate(extractTextFromEditorJs(post.content), 160) ||
+    `${post.title} - ${getStoreName()}`;
+
+  return {
+    title: `${post.title} - ${getStoreName()}`,
+    description: desc,
+    alternates: {
+      canonical: `/content/${slug}`,
+    },
+    openGraph: {
+      title: `${post.title} - ${getStoreName()}`,
+      description: desc,
+      type: "article",
+      url: `/content/${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,
+    `/content/${slug}`,
+    post.created || new Date().toISOString(),
+    post.created || new Date().toISOString()
+  );
+
+  const breadcrumbSchema = generateBreadcrumbSchema([
+    { name: "Home", url: "/" },
+    { name: "Content", url: "/content" },
+    { name: post.title, url: `/content/${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: "CONTENT", link: "/content" },
+                { text: post.title, link: `/content/${post.slug}` },
+              ]}
+            />
+            <Heading as="h1" content={post.title} />
+            {post?.metadata?.filter((item) => item?.key === "topic")[0]
+              ?.value && (
+              <span className="w-fit text-xs font-medium text-[var(--color-primary-600)] bg-[var(--color-primary-100)] px-2 py-1 rounded-full">
+                {
+                  post?.metadata?.filter((item) => item?.key === "topic")[0]
+                    ?.value
+                }
+              </span>
+            )}
+            {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">
+              <BlogEditorRenderer content={post.content} />
+            </div>
+
+            {/* Back to Blog Link */}
+            <div className="w-full pt-8 border-t border-[var(--color-secondary-200)]">
+              <Link
+                href="/content"
+                className="text-[var(--color-primary-600)] hover:underline inline-flex items-center gap-2"
+              >
+                ← Back to all content
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/app/content/layout.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from "next"
+import { getStoreName } from "@/app/utils/branding"
+
+export const metadata: Metadata = {
+  title: `Content - ${getStoreName()}`,
+  description: `Check out our latest content and articles to stay updated with the newest trends and insights.`,
+  alternates: {
+    canonical: "/content",
+  },
+  openGraph: {
+    title: `Content - ${getStoreName()}`,
+    description: `Check out our latest content and articles to stay updated with the newest trends and insights.`,
+    type: "website",
+    url: "/content",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Content - ${getStoreName()}`,
+    description: `Check out our latest content and articles to stay updated with the newest trends and insights.`,
+    images: ["/Logo.png"],
+  },
+}
+
+export default function BlogLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

package/src/app/content/page.tsx

@@ -0,0 +1,88 @@
+import { getStoreName } from "@/app/utils/branding";
+import { fetchContentPages } from "@/graphql/queries/getContentPage";
+import {
+  generateBreadcrumbSchema,
+  generateCollectionPageSchema,
+} from "@/lib/schema";
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import BlogList from "../components/blog/BlogList";
+import Breadcrumb from "../components/reuseableUI/breadcrumb";
+import Heading from "../components/reuseableUI/heading";
+
+export const metadata: Metadata = {
+  title: `Content - ${getStoreName()}`,
+  description:
+    "Read our latest articles, news, and insights about our products and services.",
+  alternates: {
+    canonical: "/content",
+  },
+  openGraph: {
+    title: `Content - ${getStoreName()}`,
+    description:
+      "Read our latest articles, news, and insights about our products and services.",
+    type: "website",
+    url: "/content",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Content - ${getStoreName()}`,
+    description:
+      "Read our latest articles, news, and insights about our products and services.",
+    images: ["/Logo.png"],
+  },
+};
+
+export default async function BlogPage() {
+  // Fetch blog posts from CMS
+  const content = await fetchContentPages();
+
+  // Generate schema.org structured data
+  const collectionSchema = generateCollectionPageSchema(
+    "Content",
+    "Read our latest articles, news, and insights about our products and services.",
+    "/content"
+  );
+
+  const breadcrumbSchema = generateBreadcrumbSchema([
+    { name: "Home", url: "/" },
+    { name: "Content", url: "/content" },
+  ]);
+
+  return (
+    <main className="h-full w-full">
+      {/* Schema.org structured data */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionSchema) }}
+      />
+      <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-16 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: "CONTENT", link: "/content" },
+              ]}
+            />
+
+            <Heading
+              as="h1"
+              content="Content"
+              className="!text-[var(--color-primary-600)]"
+            />
+          </div>
+
+          <Suspense fallback={<div>Loading contents...</div>}>
+            <BlogList blogs={content} pageRoute={"content"} pageSize={9} />
+          </Suspense>
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/app/core-policies/page.tsx

@@ -0,0 +1,55 @@
+import AncillaryContent from "@/app/components/ancillary/AncillaryContent";
+import ContentSkeleton from "@/app/components/skeletons/ContentSkeleton";
+import { getStoreName } from "@/app/utils/branding";
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import Breadcrumb from "../components/reuseableUI/breadcrumb";
+import Heading from "../components/reuseableUI/heading";
+
+export const metadata: Metadata = {
+  title: `Core Policies - ${getStoreName()}`,
+  description: `Core policies of ${getStoreName()} including terms, privacy, and more.`,
+  alternates: {
+    canonical: "/core-policies",
+  },
+  openGraph: {
+    title: `Core Policies - ${getStoreName()}`,
+    description: `Core policies of ${getStoreName()} including terms, privacy, and more.`,
+    type: "website",
+    url: "/core-policies",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Core Policies - ${getStoreName()}`,
+    description: `Core policies of ${getStoreName()} including terms, privacy, and more.`,
+    images: ["/Logo.png"],
+  },
+};
+
+export default function CorePoliciesPage() {
+
+  return (
+    <main className="h-full w-full">
+      <div className="container mx-auto max-w-[1276px]">
+        <div className="flex flex-col items-start w-full px-4 md:px-6 py-12 md:py-16 lg:py-24">
+          <div className="flex flex-col items-start gap-5 mb-6 w-full">
+            <Breadcrumb
+              items={[
+                { text: "Home", link: "/" },
+                { text: "Core Policies", link: "/core-policies" },
+              ]}
+            />
+            <Heading as="h1" content="Core Policies" />
+          </div>
+
+          <section className="w-full">
+            <Suspense fallback={<ContentSkeleton />}>
+              <AncillaryContent slug="core-policies" />
+            </Suspense>
+          </section>
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/app/discounts/page.tsx

@@ -0,0 +1,54 @@
+import AncillaryContent from "@/app/components/ancillary/AncillaryContent";
+import ContentSkeleton from "@/app/components/skeletons/ContentSkeleton";
+import { getStoreName } from "@/app/utils/branding";
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import Breadcrumb from "../components/reuseableUI/breadcrumb";
+import Heading from "../components/reuseableUI/heading";
+
+export const metadata: Metadata = {
+  title: `Discount - ${getStoreName()}`,
+  description: `Discount ${getStoreName()} products and special offers. Save on top-quality items with exclusive deals and promotions.`,
+  alternates: {
+    canonical: "/discounts",
+  },
+  openGraph: {
+    title: `Discount - ${getStoreName()}`,
+    description: `Discount ${getStoreName()} products and special offers. Save on top-quality items with exclusive deals and promotions.`,
+    type: "website",
+    url: "/discounts",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Discount - ${getStoreName()}`,
+    description: `Discount ${getStoreName()} products and special offers. Save on top-quality items with exclusive deals and promotions.`,
+    images: ["/Logo.png"],
+  },
+};
+
+export default function DiscountsPage() {
+  return (
+    <main className="h-full w-full">
+      <div className="container mx-auto max-w-[1276px]">
+        <div className="flex flex-col items-start w-full px-4 md:px-6 py-12 md:py-16 lg:py-24">
+          <div className="flex flex-col items-start gap-5 mb-6 w-full">
+            <Breadcrumb
+              items={[
+                { text: "Home", link: "/" },
+                { text: "Discounts", link: "/discounts" },
+              ]}
+            />
+            <Heading as="h1" content="Discounts" />
+          </div>
+
+          <section className="w-full">
+            <Suspense fallback={<ContentSkeleton />}>
+              <AncillaryContent slug="discounts" />
+            </Suspense>
+          </section>
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/app/frequently-asked-questions/page.tsx

@@ -0,0 +1,57 @@
+import { Suspense } from "react";
+import type { Metadata } from "next";
+import Link from "next/link";
+import AncillaryContent from "@/app/components/ancillary/AncillaryContent";
+import ContentSkeleton from "@/app/components/skeletons/ContentSkeleton";
+import { getStoreName } from "@/app/utils/branding";
+import Breadcrumb from "../components/reuseableUI/breadcrumb";
+import Heading from "../components/reuseableUI/heading";
+
+export const metadata: Metadata = {
+  title: `FAQ - ${getStoreName()}`,
+  description: `Find answers to frequently asked questions about ordering, shipping, returns, and product compatibility at ${getStoreName()}.`,
+  alternates: {
+    canonical: "/frequently-asked-questions",
+  },
+  openGraph: {
+    title: `FAQ - ${getStoreName()}`,
+    description: `Find answers to frequently asked questions about ordering, shipping, returns, and product compatibility at ${getStoreName()}.`,
+    type: "website",
+    url: "/frequently-asked-questions",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `FAQ - ${getStoreName()}`,
+    description: `Find answers to frequently asked questions about ordering, shipping, returns, and product compatibility at ${getStoreName()}.`,
+    images: ["/Logo.png"],
+  },
+};
+
+export default function FAQPage() {
+  const derivedTitle = "FAQS";
+
+  return (
+    <main className="h-full w-full">
+      <div className="container mx-auto max-w-[1276px]">
+        <div className="flex flex-col items-start w-full px-4 md:px-6 py-12 md:py-16 lg:py-24">
+          <div className="flex flex-col items-start gap-5 mb-6 w-full">
+            <Breadcrumb
+              items={[
+                { text: "Home", link: "/" },
+                { text: "FAQS", link: "/frequently-asked-questions" },
+              ]}
+            />
+            <Heading as="h1" content={derivedTitle} />
+          </div>
+
+          <section className="w-full">
+            <Suspense fallback={<ContentSkeleton />}>
+              <AncillaryContent slug="frequently-asked-questions" />
+            </Suspense>
+          </section>
+        </div>
+      </div>
+    </main>
+  );
+}