cms页面分组

.env.example

@@ -9,9 +9,9 @@ NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_SITE_URL=http://localhost:3001
 
 # Bagisto API Configuration
-# 后端接口域名
+# 后端接口域名 测试站 https://sisbridal.com/
 NEXT_PUBLIC_BAGISTO_ENDPOINT=https://your-bagisto-instance.com
-# 后端接口需要的key
+# 后端接口需要的key 测试站  pk_storefront_5JHJ7e8Vb10aCmlTexi5OaaFRqPYsrOy
 NEXT_PUBLIC_BAGISTO_STOREFRONT_KEY=your_storefront_key_here
 
 # NextAuth Configuration 测试环境和生产环境要写实际部署的域名
@@ -19,7 +19,7 @@ NEXTAUTH_URL=http://localhost:3001
 # NextAuth 使用 secret（下面的值）对 session中的token 对象进行 签名 + 加密，生成一个 JWT 字符串，解密这个JWT字符串就可以还原token对象。
 NEXTAUTH_SECRET=9jstKgQ1Q22PlDDhPtXTZ6G4MEzHGDJIkebcd/5UyZ4=
 
-# paypal client id
+# paypal client id 测试站 AXSFRWCfsqKWU2OuXAirHm5FG7U3J4KlYOpP4NvvJ9hQzK10SWMrHqotwnvQhjznf9A-stXrtVmrHBQR
 PAYPAL_SANDBOX_CLIENT_ID=
 PAYPAL_PRODUCTION_CLIENT_ID=
 

src/app/(public)/(cms)/[slug]/_components/CMSContent.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+
+export default function CmsContent({
+    html,
+}: {
+    html: string;
+}) {
+    return (
+        <div
+            className="cms-content"
+            dangerouslySetInnerHTML={{
+                __html: html,
+            }}
+        />
+    );
+}
+
+

src/app/(public)/(cms)/[slug]/page.tsx

@@ -0,0 +1,28 @@
+import { notFound } from "next/navigation";
+import { getPage } from "@utils/bagisto";
+import type { PageData } from "@/types/theme/theme-customization";
+import CmsContent from "./_components/CMSContent";
+
+
+export default async function Page({
+    params,
+}: {
+    params: Promise<{ slug: string }>;
+}) {
+    const { slug: pageParams } = await params;
+    const pageDataArray: PageData[] = await getPage({ urlKey: pageParams });
+    if (!pageDataArray?.length) return notFound();
+    const pageData = pageDataArray?.[0]?.translation;
+
+    return (
+        <div className="my-6 px-4 mx-auto">
+
+            <h1 className="relative pb-4 text-2xl text-center font-bold leading-8 mb-6 after:absolute after:left-1/2 after:-bottom-1 after:-translate-x-1/2 after:w-20 after:h-1 after:bg-black">
+                {pageData?.pageTitle}
+            </h1>
+            <CmsContent html={pageData?.htmlContent || ""} />
+
+        
+        </div>
+    );
+}

src/app/(public)/[page]/page.tsx

@@ -1,35 +0,0 @@
-import { notFound } from "next/navigation";
-import Prose from "@components/theme/search/Prose";
-import { getPage } from "@utils/bagisto";
-import type { PageData } from "@/types/theme/theme-customization";
-
-
-export default async function Page({
-  params,
-}: {
-  params: Promise<{ page: string }>;
-}) {
-  const { page: pageParams } = await params;
-  const pageDataArray: PageData[] = await getPage({ urlKey: pageParams });
-  if (!pageDataArray?.length) return notFound();
-  const pageData = pageDataArray?.[0]?.translation;
-
-  return (
-    <div className="my-4 flex flex-col justify-between p-4">
-      <div className="flex flex-col gap-4 mx-auto">
-        <h1 className="text-2xl md:text-3xl font-bold">{pageData?.pageTitle}</h1>
-        <Prose className="mb-8" html={pageData?.htmlContent || ""} />
-      <p className="text-sm italic">
-        {`This document was last updated on ${new Intl.DateTimeFormat(
-          undefined,
-          {
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-          },
-        )?.format(new Date(pageDataArray?.[0]?.updatedAt || "---"))}.`}
-      </p>
-      </div>
-    </div>
-  );
-}

src/app/(public)/layout.tsx

@@ -8,12 +8,12 @@ export default async function PublicLayout({
   children: ReactNode;
 }) {
   return (
-    <main>
+    <>
       <Navbar />
       <div className="mx-auto min-h-[calc(100vh-580px)] w-full">
         {children}
       </div>
       <Footer />
-    </main>
+    </>
   );
 }

src/app/globals.css

@@ -43,6 +43,8 @@
 @custom-variant dark (&:is(.dark *));
 
 
+@import "../assets/styles/cms-content.css" layer(components);
+
 /* =========================================================
  * Tailwind theme tokens
  *

src/assets/styles/cms-content.css

@@ -0,0 +1,22 @@
+.cms-content h2{
+    font-size: 1.125rem;
+    font-weight: 500;
+    margin: 1rem 0;
+}
+.cms-content p{
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+    margin-top: 0.875rem;
+}
+.cms-content ul{
+    margin-top: 0.75rem;
+}
+.cms-content ul li {
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+}
+.cms-content img{
+    display: block;
+    width: 100%;
+    height: auto;
+}

src/components/theme/search/CategoryDetail.tsx

@@ -1,57 +0,0 @@
-import { type FC } from "react";
-import type { FunctionComponent } from "react";
-import clsx from "clsx";
-import Link from "next/link";
-
-interface TextProps {
-  html: string;
-  className?: string;
-}
-
-export const CategoryDetail: FC<{
-  categoryItem: {
-    description: string;
-    name: string;
-  };
-}> = ({ categoryItem }) => {
-  if (!categoryItem) return null;
-
-  return (
-    <div className="px-4 w-full max-w-screen-2xl mt-8 md:mt-14 mx-auto mb-0 sm:mb-10">
-      <div className="flex flex-col lg:flex-row justify-between gap-4 md:gap-8 lg:gap-20 items-start">
-        <div className=" flex-col gap-3 shrink-0">
-          <Link href="/" className="hidden lg:flex w-fit text-sm font-medium text-nowrap relative text-neutral-500 before:absolute before:bottom-0 before:left-0 before:h-px before:w-0 before:bg-current before:transition-all before:duration-300 before:content-[''] hover:text-black hover:before:w-full dark:text-neutral-400 dark:hover:text-neutral-300">
-            Home /
-          </Link>
-          <h1 className="text-xl md:text-3xl font-bold tracking-tight text-black dark:text-white capitalize">
-            {categoryItem.name}
-          </h1>
-        </div>
-
-        <div className="w-full md:max-w-2xl lg:max-w-3xl">
-          {categoryItem.description && (
-            <Prose
-              className="w-full text-base text-gray-600 dark:text-gray-300"
-              html={categoryItem.description}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-
-const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
-  return (
-    <div
-      dangerouslySetInnerHTML={{ __html: html as string }}
-      className={clsx(
-        "prose prose-h1:text-[24px]",
-        className
-      )}
-
-    />
-  );
-};
-export default Prose;

src/components/theme/search/Prose.tsx

@@ -1,22 +0,0 @@
-import type { FunctionComponent } from "react";
-
-import clsx from "clsx";
-
-interface TextProps {
-  html: string;
-  className?: string;
-}
-
-const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
-  return (
-    <div
-      dangerouslySetInnerHTML={{ __html: html as string }}
-      className={clsx(
-        "prose mx-auto max-w-6xl lg:px-0 text-base leading-7 prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:break-all prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 ",
-        className
-      )}
-    />
-  );
-};
-
-export default Prose;

src/components/theme/search/not-found.tsx

@@ -1,19 +0,0 @@
-import { EventButton } from '@components/common/button/EventButton';
-import NotFoundIcon from '@components/common/icons/NotFoundIcon';
-const NotFound = ({ msg }: { msg: string }) => {
-  return (
-    <div className="my-12 px-4 flex flex-col flex-wrap items-center justify-center gap-y-4">
-      <div>
-        <NotFoundIcon />
-      </div>
-
-      <h1 className="mt-4 font-outfit text-2xl sm:text-3xl lg:text-4xl font-semibold">
-        Oops!, No products available in this category
-      </h1>
-      <p className="text-black/60 dark:text-white">{msg}</p>
-      <EventButton buttonName="Back to Home" redirect="/" />
-    </div>
-  );
-};
-
-export default NotFound;