fix: product page (#63)

* fix: product page

* fix: upgrade nextjs

* fix: support catrgory name for url slug

* fix: upgrade node version

Author: qinluhe

.github/workflows/test.yml

@@ -2,7 +2,7 @@ name: Test
 on: [ pull_request ]
 
 env:
-  NODE_VERSION: "18.16.0"
+  NODE_VERSION: "20.12.0"
   PNPM_VERSION: "8.5.0"
 
 concurrency:

Dockerfile

@@ -1,5 +1,5 @@
 # Use the official Node.js image as a base image
-FROM node:18
+FROM node:20
 
 RUN apt-get update && apt-get install -y supervisor
 

app/layout.tsx

@@ -1,12 +1,19 @@
 import './globals.scss';
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import Favicon from '../public/appflowy.svg';
 import OpenGraph from '../public/images/og-image.png';
 import App from '@/components/layout/app';
 import { getGitData } from '@/lib/get-git';
 import { getUAFromServer } from '@/lib/get-os';
 import process from 'process';
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
 export const metadata: Metadata = {
   title: 'AppFlowy.IO',
   description: 'AppFlowy is an AI collaborative workspace where you achieve more without losing control of your data',
@@ -16,7 +23,6 @@ export const metadata: Metadata = {
       url: Favicon.src,
     },
   ],
-  viewport: 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no',
   openGraph:
     process.env.NODE_ENV === 'development'
       ? undefined

app/templates/[category_id]/[id]/page.tsx renamed to app/templates/[category_name]/[id]/page.tsx

@@ -10,13 +10,14 @@ import { CategoryIcon } from '@/components/template-center/icons';
 import RelatedTemplates from '@/components/template-center/template/related-templates';
 import Share from '@/components/template-center/template/share';
 import TemplateSection from '@/components/template-center/template/template-section';
+import { slugify } from '@/components/template-center/utils';
 import { getTemplateById } from '@/lib/templateAPI';
 import Link from 'next/link';
 import React from 'react';
 import '@/styles/template.scss';
 import { notFound } from 'next/navigation';
 
-async function Page({ params }: { params: { id: string; category_id: string } }) {
+async function Page({ params }: { params: { id: string; category_name: string } }) {
   const id = params.id;
 
   let data = null;
@@ -30,7 +31,7 @@ async function Page({ params }: { params: { id: string; category_id: string } })
 
   return (
     <div className={'template-center'}>
-      <TemplateSection template={data} categoryId={params.category_id} />
+      <TemplateSection template={data} categoryName={params.category_name} />
       <div
         className={
           'flex w-full flex-col items-center gap-[70px] bg-white  px-[170px] py-[110px] max-lg:gap-[10vh] max-lg:px-[8vw]  max-lg:py-[10vh]'
@@ -46,7 +47,7 @@ async function Page({ params }: { params: { id: string; category_id: string } })
               <div className={'title'}>Category</div>
               {data.categories.map((category) => (
                 <Link
-                  href={`/templates/${category.id}`}
+                  href={`/templates/${slugify(category.name)}`}
                   style={{
                     backgroundColor: category.bg_color,
                   }}

app/templates/[category_id]/page.tsx renamed to app/templates/[category_name]/page.tsx

@@ -2,33 +2,35 @@ import CategoryTemplatesHeader from '@/components/template-center/category-templ
 import Sidebar from '@/components/template-center/sidebar';
 import TemplateList from '@/components/template-center/template-list';
 import { TemplatesProvider } from '@/components/template-center/templates-context';
+import { slugify } from '@/components/template-center/utils';
 import { getCategories, getCategoryTemplateList } from '@/lib/templateAPI';
 import { notFound } from 'next/navigation';
 import React from 'react';
 import Community from '@/components/template-center/community';
 
 import '@/styles/template.scss';
 
-async function Page({ params }: { params: { category_id: string } }) {
-  const id = params.category_id;
+async function Page({ params }: { params: { category_name: string } }) {
+  const name = params.category_name;
 
   let data = null;
 
   try {
-    data = await getData(id);
+    data = await getData(name);
   } catch (error) {
     console.error(error);
     notFound();
   }
 
-  const categories = await getCategories();
-  const category = categories.find((item) => item.id === id);
-
   return (
     <div className={'template-center'}>
       <div className={'main'}>
-        <TemplatesProvider selectedCategoryId={id} categoryTemplates={data} categories={categories}>
-          <CategoryTemplatesHeader category={category} />
+        <TemplatesProvider
+          selectedCategoryId={data.category.id}
+          categoryTemplates={data.data}
+          categories={data.categories}
+        >
+          <CategoryTemplatesHeader category={data.category} />
           <div className={'content'}>
             <Sidebar />
             <TemplateList />
@@ -44,12 +46,19 @@ export const revalidate = 10;
 
 export default Page;
 
-async function getData(id: string) {
-  const data = await getCategoryTemplateList(id);
+async function getData(name: string) {
+  const categories = await getCategories();
+  const category = categories.find((item) => slugify(item.name) === name);
+
+  if (!category) {
+    throw new Error(`Failed to fetch category ${name}`);
+  }
+
+  const data = await getCategoryTemplateList(category.id);
 
   if (!data) {
-    throw new Error(`Failed to fetch category data ${id}`);
+    throw new Error(`Failed to fetch category data ${category.id}`);
   }
 
-  return data;
+  return { data, category, categories };
 }

components/product/ai-examples.tsx

@@ -11,7 +11,7 @@ import MuiTab from '@mui/material/Tab';
 import MuiTabs from '@mui/material/Tabs';
 import { useInView } from 'framer-motion';
 import Image from 'next/image';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 function AiExamples() {
   const [value, setValue] = React.useState('write');
@@ -30,18 +30,25 @@ function AiExamples() {
   const ref = React.useRef<HTMLDivElement>(null);
   const inView = useInView(ref);
 
-  useAutoPlay({
+  const { start, stop } = useAutoPlay({
     options: tabOptions,
     onChange: setValue,
-    play: inView,
-    defaultOption: 'write',
   });
 
+  useEffect(() => {
+    if (!inView) {
+      stop();
+    } else {
+      start();
+    }
+  }, [inView, start, stop]);
+
   return (
     <div ref={ref} className={'ai-examples'}>
       <MuiTabs value={value} onChange={handleChange}>
         {tabOptions.map((tab) => (
           <MuiTab
+            onClick={() => start()}
             className={`ai-example-tab ${value === tab.value ? 'selected' : ''}`}
             key={tab.value}
             value={tab.value}

components/product/ai-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 function AutomateIcon() {
   return (
     <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
-      <g opacity='0.6'>
+      <g opacity='1'>
         <path
           d='M10.3117 5.95425C7.90846 5.95425 5.95347 7.90924 5.95347 10.3125C5.95347 12.7158 7.90846 14.6707 10.3117 14.6707C12.715 14.6707 14.67 12.7158 14.67 10.3125C14.67 7.90924 12.715 5.95425 10.3117 5.95425ZM10.3117 13.4255C8.59488 13.4255 7.19869 12.0293 7.19869 10.3125C7.19869 8.59566 8.59488 7.19947 10.3117 7.19947C12.0286 7.19947 13.4248 8.59566 13.4248 10.3125C13.4248 12.0293 12.0286 13.4255 10.3117 13.4255Z'
           fill='currentColor'

components/product/automate-icon.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+
+export function TemplateIcon() {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
+      <g opacity='1'>
+        <path
+          d='M10.4469 2.8263L10.3987 2.81336L10.3857 2.86166L8.66025 9.30116L8.64731 9.34946L8.69561 9.3624L10.2392 9.776L10.2763 9.78593L10.2954 9.75271L11.1005 8.35836C11.7227 7.28058 13.2784 7.28058 13.9006 8.35836L15.2183 10.6407L15.2787 10.7452L15.3099 10.6286L16.9218 4.613L16.9348 4.5647L16.8865 4.55176L10.4469 2.8263ZM16.203 12.2648L16.1716 12.2918L16.1923 12.3277L18.2307 15.8584C18.853 16.9361 18.0752 18.2834 16.8307 18.2834H8.17041C7.22595 18.2834 6.54962 17.5072 6.55126 16.6611L6.55136 16.6087L6.49899 16.611C6.41664 16.6148 6.33381 16.6167 6.25053 16.6167C3.2866 16.6167 0.883862 14.214 0.883862 11.25C0.883862 8.2861 3.2866 5.88336 6.25053 5.88336C6.80273 5.88336 7.33536 5.96674 7.83657 6.12157L7.88618 6.1369L7.89962 6.08674L8.87243 2.45618C9.10352 1.59374 9.99 1.08193 10.8524 1.31302L17.2919 3.03848C18.1544 3.26957 18.6662 4.15605 18.4351 5.01848L16.7096 11.458C16.6222 11.7842 16.4411 12.0602 16.203 12.2648ZM9.43271 11.247L9.46529 11.1906L9.40235 11.1737L8.29013 10.8757C7.42769 10.6446 6.91588 9.75812 7.14697 8.89568L7.46769 7.69872L7.47994 7.65301L7.43497 7.63827C7.06218 7.51609 6.66402 7.45003 6.25053 7.45003C4.15185 7.45003 2.45053 9.15135 2.45053 11.25C2.45053 13.3487 4.15185 15.05 6.25053 15.05C6.61697 15.05 6.97138 14.9981 7.30677 14.9013L7.32613 14.8957L7.3362 14.8783L9.43271 11.247ZM16.9173 16.7167L16.874 16.6417L12.5438 9.14169L12.5005 9.06669L12.4572 9.14169L8.12711 16.6417L8.08381 16.7167H8.17041H16.8307H16.9173Z'
+          fill='currentColor'
+          stroke='currentColor'
+          strokeWidth='0.1'
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function KanbanIcon() {
+  return (
+    <svg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g opacity='1'>
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M8.625 2.5C9.31536 2.5 9.875 3.05964 9.875 3.75V16.25C9.875 16.9404 9.31536 17.5 8.625 17.5H5.5C4.80964 17.5 4.25 16.9404 4.25 16.25V3.75C4.25 3.05964 4.80964 2.5 5.5 2.5H8.625ZM8.625 16.25V3.75H5.5V16.25H8.625Z'
+          fill='currentColor'
+        />
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M15.5 2.5C16.1904 2.5 16.75 3.05964 16.75 3.75V16.25C16.75 16.9404 16.1904 17.5 15.5 17.5H12.375C11.6846 17.5 11.125 16.9404 11.125 16.25V3.75C11.125 3.05964 11.6846 2.5 12.375 2.5H15.5ZM15.5 16.25V3.75H12.375V16.25H15.5Z'
+          fill='currentColor'
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function ProjectsIcon() {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'>
+      <g opacity='1'>
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M8.38714 3.42857H16.3929C17.3199 3.42857 18.0714 4.18009 18.0714 5.10714V6.99608H8.38714V3.42857ZM8.38714 8.42465H18.0714V12.5742H8.38714V8.42465ZM6.95857 12.5742V8.42465H2.92857V12.5742H6.95857ZM2.92857 14.0028H6.95857V17.5714H4.60714C3.68009 17.5714 2.92857 16.8199 2.92857 15.8929V14.0028ZM8.38714 14.0028H18.0714V15.8929C18.0714 16.8199 17.3199 17.5714 16.3929 17.5714H8.38714V14.0028ZM6.95857 3.42857V6.99608H2.92857V5.10714C2.92857 4.18009 3.68009 3.42857 4.60714 3.42857H6.95857ZM1.5 5.10714C1.5 3.39112 2.89112 2 4.60714 2H16.3929C18.1089 2 19.5 3.39112 19.5 5.10714V15.8929C19.5 17.6089 18.1089 19 16.3929 19H4.60714C2.89112 19 1.5 17.6089 1.5 15.8929V5.10714Z'
+          fill='currentColor'
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function AiIcon() {
+  return (
+    <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g opacity='1'>
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M8.03559 3.91001C8.24508 3.76431 8.49414 3.68622 8.74931 3.68622C9.00448 3.68622 9.25353 3.76431 9.46302 3.91001C9.67251 4.0557 9.83239 4.26202 9.92118 4.50124L9.92169 4.50261L11.4217 8.57292L11.4235 8.57578L11.4263 8.57758L15.498 10.0781C15.7373 10.1669 15.9436 10.3268 16.0893 10.5363C16.235 10.7458 16.3131 10.9948 16.3131 11.25C16.3131 11.5051 16.235 11.7542 16.0893 11.9637C15.9436 12.1732 15.7373 12.3331 15.498 12.4219L15.4967 12.4224L11.4264 13.9224L11.4235 13.9242L11.4217 13.927L9.92169 17.9973L9.92118 17.9987C9.83239 18.2379 9.6725 18.4443 9.46302 18.59C9.25353 18.7356 9.00448 18.8137 8.74931 18.8137C8.49414 18.8137 8.24508 18.7356 8.03559 18.59C7.82611 18.4443 7.66623 18.2379 7.57743 17.9987L7.57692 17.9973L6.07692 13.927L6.07511 13.9242L6.07383 13.9231L6.07228 13.9224L2.00194 12.4224L2.00057 12.4219C1.76134 12.3331 1.55503 12.1732 1.40933 11.9637C1.26364 11.7542 1.18555 11.5051 1.18555 11.25C1.18555 10.9948 1.26364 10.7458 1.40933 10.5363C1.55503 10.3268 1.76134 10.1669 2.00057 10.0781L2.00194 10.0776L6.07225 8.5776L6.07511 8.57578L6.07691 8.57295L7.57692 4.50261L7.57743 4.50124C7.66623 4.26202 7.82611 4.0557 8.03559 3.91001ZM10.2488 13.4948C10.3117 13.324 10.4109 13.169 10.5396 13.0403C10.6683 12.9116 10.8234 12.8124 10.9941 12.7495L15.0631 11.25L10.9942 9.7505C10.8234 9.68758 10.6683 9.58834 10.5396 9.45966C10.4109 9.33098 10.3117 9.17592 10.2488 9.00516L8.74931 4.93622L7.24983 9.00513C7.1869 9.17588 7.08767 9.33098 6.95899 9.45966C6.83031 9.58834 6.67524 9.68756 6.50449 9.75049L2.43555 11.25L6.50446 12.7495C6.67521 12.8124 6.83031 12.9116 6.95899 13.0403C7.08767 13.169 7.18689 13.324 7.24981 13.4948L8.74931 17.5637L10.2488 13.4948Z'
+          fill='currentColor'
+        />
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M13.7493 0.625C14.0945 0.625 14.3743 0.904822 14.3743 1.25V5C14.3743 5.34518 14.0945 5.625 13.7493 5.625C13.4042 5.625 13.1243 5.34518 13.1243 5V1.25C13.1243 0.904822 13.4042 0.625 13.7493 0.625Z'
+          fill='currentColor'
+        />
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M11.2493 3.125C11.2493 2.77982 11.5292 2.5 11.8743 2.5H15.6243C15.9695 2.5 16.2493 2.77982 16.2493 3.125C16.2493 3.47018 15.9695 3.75 15.6243 3.75H11.8743C11.5292 3.75 11.2493 3.47018 11.2493 3.125Z'
+          fill='currentColor'
+        />
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M17.4993 5C17.8445 5 18.1243 5.27982 18.1243 5.625V8.125C18.1243 8.47018 17.8445 8.75 17.4993 8.75C17.1542 8.75 16.8743 8.47018 16.8743 8.125V5.625C16.8743 5.27982 17.1542 5 17.4993 5Z'
+          fill='currentColor'
+        />
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M15.6243 6.875C15.6243 6.52982 15.9042 6.25 16.2493 6.25H18.7493C19.0945 6.25 19.3743 6.52982 19.3743 6.875C19.3743 7.22018 19.0945 7.5 18.7493 7.5H16.2493C15.9042 7.5 15.6243 7.22018 15.6243 6.875Z'
+          fill='currentColor'
+        />
+      </g>
+    </svg>
+  );
+}