Recommendations

danmindru · Nov 17, 2024 · 099670b · 099670b
1 parent e168acc
commit 099670b
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 34 deletions.
diff --git a/shipixen/components/shared/InteractiveStatCard.tsx b/shipixen/components/shared/InteractiveStatCard.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import Link from 'next/link';
 
 const Wrapper = ({
   children,
@@ -14,11 +15,7 @@ const Wrapper = ({
   }
 
   return (
-    <a
-      className="w-full h-full flex flex-col items-stretch"
-      href={href}
-      target="_blank"
-    >
+    <Link className="w-full h-full flex flex-col items-stretch" href={href}>
       <div
         className={clsx(
           'w-full h-full !absolute top-0 left-0 fancy-glass',
@@ -33,7 +30,7 @@ const Wrapper = ({
       <div className="z-10 w-full h-full flex items-center justify-center rounded-lg">
         {children}
       </div>
-    </a>
+    </Link>
   );
 };
 

diff --git a/shipixen/layouts/ProductLayout.tsx b/shipixen/layouts/ProductLayout.tsx
@@ -1,7 +1,12 @@
 import { cn } from '@/lib/utils';
 import { ReactNode } from 'react';
 import { ExternalLinkIcon } from 'lucide-react';
-import { CoreContent } from '@shipixen/pliny/utils/contentlayer';
+import {
+  CoreContent,
+  allCoreContent,
+} from '@shipixen/pliny/utils/contentlayer';
+import { allBlogs } from 'shipixen-contentlayer/generated';
+
 import type { Blog, Authors } from 'shipixen-contentlayer/generated';
 import Link from '@/components/shared/Link';
 import Header from '@/components/shared/Header';
@@ -11,6 +16,7 @@ import { siteConfig } from '@/data/config/site.settings';
 import ScrollTop from '@/components/shared/ScrollTop';
 import { hashStringToColor } from '@/components/shared/util/hash-string-color';
 import clsx from 'clsx';
+import { PostItem } from '@/components/blog/home/PostItem'; // Import PostItem
 
 const postDateTemplate: Intl.DateTimeFormatOptions = {
   weekday: 'long',
@@ -23,24 +29,40 @@ interface LayoutProps {
   className?: string;
   content: CoreContent<Blog>;
   authorDetails: CoreContent<Authors>[];
-  next?: { path: string; title: string };
-  prev?: { path: string; title: string };
   children: ReactNode;
 }
 
 export default function PostLayout({
   className,
   content,
   authorDetails,
-  next,
-  prev,
   children,
 }: LayoutProps) {
-  const { path, slug, date, title, tags, logo, website } = content;
+  const { path, slug, date, title, tags, logo, website, category } = content;
   const firstImage = content.images?.[0];
   const tintColor = hashStringToColor(title);
   const fallbackImage = '/static/images/logo.png';
 
+  const allProducts = allCoreContent(allBlogs);
+
+  const getRecommendedProducts = () => {
+    const sameCategoryProducts = allProducts.filter(
+      (product) => product.category === category && product.slug !== slug,
+    );
+    const otherProducts = allProducts.filter(
+      (product) => product.category !== category && product.slug !== slug,
+    );
+
+    const recommendations = [
+      ...sameCategoryProducts.slice(0, 5),
+      ...otherProducts.slice(0, 10 - sameCategoryProducts.length),
+    ];
+
+    return recommendations;
+  };
+
+  const recommendedProducts = getRecommendedProducts();
+
   return (
     <div className="flex flex-col w-full items-center">
       <Header />
@@ -154,30 +176,20 @@ export default function PostLayout({
                   </a>
                 </div>
               )}
-              {(next || prev) && (
-                <div className="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
-                  {prev && prev.path && (
-                    <div>
-                      <h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
-                        Previous Deal
-                      </h2>
-                      <div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
-                        <Link href={`/${prev.path}`}>{prev.title}</Link>
-                      </div>
-                    </div>
-                  )}
-                  {next && next.path && (
-                    <div>
-                      <h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
-                        Next Deal
-                      </h2>
-                      <div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
-                        <Link href={`/${next.path}`}>{next.title}</Link>
-                      </div>
+
+              <div className="py-4 xl:py-8">
+                <h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                  Recommended Products
+                </h2>
+                <div className="flex flex-wrap">
+                  {recommendedProducts.map((product) => (
+                    <div key={product.slug} className="w-full p-2">
+                      <PostItem post={product} showImage={true} />{' '}
+                      {/* Use PostItem */}
                     </div>
-                  )}
+                  ))}
                 </div>
-              )}
+              </div>
 
               <div className="flex pt-4 xl:pt-8">
                 <Link

diff --git a/shipixen/scripts/parse-app-info.js b/shipixen/scripts/parse-app-info.js
@@ -273,6 +273,14 @@ ${app.description}
 ${app.deal}
 `;
 
+  if (app.metaTitle || app.metaDescription) {
+    mdxContent += `## Product Details
+${app.metaTitle || ''}
+
+${app.metaDescription || ''}
+`;
+  }
+
   const markdownOutputPath = path.join(
     markdownDir,
     `${sanitizeName(app.name)}.mdx`,