chore: migrate domain from appflowy.io to appflowy.com

AppFlowy-IO · Jan 23, 2025 · 0be9233 · 0be9233
1 parent c704231
commit 0be9233
Show file tree

Hide file tree

Showing 28 changed files with 717 additions and 363 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -1,10 +1,21 @@
+import { Metadata } from 'next';
 import React from 'react';
 import '@/styles/about.scss';
 import Missions from '@/components/about/missions';
 import Community from '@/components/about/community';
 import OurValues from '@/components/about/our-values';
 import OurInvestors from '@/components/about/our-investors';
 
+const site_url = process.env.NEXT_PUBLIC_SITE_BASE_URL;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    alternates: {
+      canonical: `${site_url}/about`,
+    },
+  };
+}
+
 function Page() {
   return (
     <div className={'about'}>

diff --git a/app/appflowy-blocks/page.tsx b/app/appflowy-blocks/page.tsx
@@ -1,22 +1,39 @@
+import { Metadata } from 'next';
 import React from 'react';
 import { blocksPageConfig } from '@/lib/config/pages';
 import '@/styles/blocks.scss';
 
 import AppflowyBlocks from '@/components/blocks/appflowy-blocks';
 
+const site_url = process.env.NEXT_PUBLIC_SITE_BASE_URL;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    alternates: {
+      canonical: `${site_url}/appflowy-about`,
+    },
+  };
+}
+
 function Page() {
   return (
     <div className={'blocks-page'}>
       <div className={'ellipse'} />
       <div className={'title'}>
         {blocksPageConfig.title}
         <div className={'line'}>
-          <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 250 15' fill='none'>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="100%"
+            height="100%"
+            viewBox="0 0 250 15"
+            fill="none"
+          >
             <path
-              d='M2.19074 10.2774C17.3157 7.48174 52.0933 2.22644 70.2045 3.57083C88.3157 4.91522 69.9207 10.2064 58.4593 12.684C103.292 7.47885 204.017 -1.67495 248.251 3.35077'
-              stroke='#9327FF'
-              strokeWidth='3'
-              strokeLinecap='square'
+              d="M2.19074 10.2774C17.3157 7.48174 52.0933 2.22644 70.2045 3.57083C88.3157 4.91522 69.9207 10.2064 58.4593 12.684C103.292 7.47885 204.017 -1.67495 248.251 3.35077"
+              stroke="#9327FF"
+              strokeWidth="3"
+              strokeLinecap="square"
             />
           </svg>
         </div>

diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -21,7 +21,7 @@ interface Props {
   params: { slug: string };
 }
 
-const site_url = process.env.ENVIRONMENT === 'test' ? 'https://test.appflowy.io' : 'https://appflowy.io';
+const site_url = process.env.NEXT_PUBLIC_SITE_BASE_URL!;
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const post = await getPostData(params.slug);
@@ -106,7 +106,7 @@ async function getData(slug: string) {
     const relatedPosts = await getRelatedPosts(post);
 
     return { post, relatedPosts };
-  } catch (error) {
+  } catch(error) {
     notFound();
   }
 }
@@ -122,7 +122,7 @@ export default async function BlogPost({ params }: { params: { slug: string } })
           'pb-[170px] pt-[170px]',
           'max-xl:px-14',
           'max-md:px-8 max-md:pb-[150px]',
-          'max-sm:px-6 max-sm:pb-[100px]'
+          'max-sm:px-6 max-sm:pb-[100px]',
         )}
       >
         <Link
@@ -142,18 +142,18 @@ export default async function BlogPost({ params }: { params: { slug: string } })
               'blog-container col-span-12 flex max-w-full flex-1 flex-grow flex-col overflow-hidden overflow-x-hidden max-md:mb-6 '
             }
           >
-            <CardHeader className='blog-header flex w-full flex-col gap-5 p-0'>
-              <div className='flex w-full flex-col justify-start gap-5'>
+            <CardHeader className="blog-header flex w-full flex-col gap-5 p-0">
+              <div className="flex w-full flex-col justify-start gap-5">
                 {post.categories && (
-                  <div className='flex w-full flex-wrap gap-2  max-sm:justify-center'>
+                  <div className="flex w-full flex-wrap gap-2  max-sm:justify-center">
                     {post.categories.map((tag) => (
                       <Badge
                         style={{
                           borderColor: 'transparent',
                           background: stringToColor(tag, colorArrayTint),
                         }}
                         key={tag}
-                        variant='outline'
+                        variant="outline"
                       >
                         {tag}
                       </Badge>
@@ -165,39 +165,45 @@ export default async function BlogPost({ params }: { params: { slug: string } })
                     'whitespace-pre-wrap break-words text-left font-medium',
                     'text-4xl !leading-[120%] sm:text-5xl md:text-6xl lg:text-[58px]',
                     'leading-tight',
-                    'max-sm:text-center'
+                    'max-sm:text-center',
                   )}
                 >
                   {post.title}
                 </CardTitle>
               </div>
-              <div className='flex flex-col gap-6 text-sm text-gray-600'>
-                <div className='flex flex-wrap items-center gap-x-4 gap-y-2 max-sm:justify-center'>
+              <div className="flex flex-col gap-6 text-sm text-gray-600">
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-2 max-sm:justify-center">
                   <Link
                     href={post.author_url}
-                    className='flex max-w-[200px]  items-center gap-3 truncate max-sm:mb-4 max-sm:w-full max-sm:max-w-full max-sm:justify-center'
+                    className="flex max-w-[200px]  items-center gap-3 truncate max-sm:mb-4 max-sm:w-full max-sm:max-w-full max-sm:justify-center"
                   >
-                    <Avatar className='h-10 w-10 border'>
-                      <AvatarImage src={post.author_image_url} alt={post.author} />
+                    <Avatar className="h-10 w-10 border">
+                      <AvatarImage
+                        src={post.author_image_url}
+                        alt={post.author}
+                      />
                       <AvatarFallback>{post.author.substring(0, 2).toUpperCase()}</AvatarFallback>
                     </Avatar>
-                    <span className='font-medium'>{post.author}</span>
+                    <span className="font-medium">{post.author}</span>
                   </Link>
                   <div className={'max-sm:hidden'}>
                     <Circle />
                   </div>
 
-                  <div className='flex items-center'>
-                    <time className={''} dateTime={post.date}>
+                  <div className="flex items-center">
+                    <time
+                      className={''}
+                      dateTime={post.date}
+                    >
                       {formatDate(new Date(post.date))}
                     </time>
                   </div>
                   <div>
                     <Circle />
                   </div>
 
-                  <div className='flex items-center'>
-                    <TimerIcon className='text-primary mr-2 h-4 w-4' />
+                  <div className="flex items-center">
+                    <TimerIcon className="text-primary mr-2 h-4 w-4" />
                     <span>{post.reading_time} min read</span>
                   </div>
                 </div>
@@ -244,7 +250,10 @@ export default async function BlogPost({ params }: { params: { slug: string } })
         )}
       </div>
 
-      <Script id='ld-json' type='application/ld+json'>
+      <Script
+        id="ld-json"
+        type="application/ld+json"
+      >
         {JSON.stringify(generateListSchema(params.slug, post, site_url))}
       </Script>
     </>

diff --git a/app/blog/feed.xml/route.ts b/app/blog/feed.xml/route.ts
@@ -1,7 +1,7 @@
 import { getAllPosts } from '@/lib/posts';
 import RSS from 'rss';
 
-const site_url = process.env.ENVIRONMENT === 'test' ? 'https://test.appflowy.io' : 'https://appflowy.io';
+const site_url = process.env.NEXT_PUBLIC_SITE_BASE_URL!;
 
 export async function GET() {
   const posts = getAllPosts();
@@ -27,9 +27,9 @@ export async function GET() {
       categories: post.categories,
       enclosure: post.thumb_image
         ? {
-            url: post.thumb_image.startsWith('http') ? post.thumb_image : `${site_url}${post.thumb_image}`,
-            type: 'image/jpeg', // Adjust based on your image type
-          }
+          url: post.thumb_image.startsWith('http') ? post.thumb_image : `${site_url}${post.thumb_image}`,
+          type: 'image/jpeg', // Adjust based on your image type
+        }
         : undefined,
     });
   });

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import OpenGraphImage from '../../public/images/og-image.png';
 import { getAllPosts, PostData } from '@/lib/posts';
 
-const site_url = process.env.ENVIRONMENT === 'test' ? 'https://test.appflowy.io' : 'https://appflowy.io';
+const site_url = process.env.NEXT_PUBLIC_SITE_BASE_URL!;
 const name = 'AppFlowy Blog | In the Flow';
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -94,7 +94,10 @@ function Blog() {
 
   return (
     <>
-      <Script id='ld-json' type='application/ld+json'>
+      <Script
+        id="ld-json"
+        type="application/ld+json"
+      >
         {JSON.stringify(listSchema)}
       </Script>
       <div
@@ -103,7 +106,7 @@ function Blog() {
           'flex flex-col items-center px-[100px] pb-[32px] pt-[161px]',
           'max-xl:px-14',
           'max-md:px-8',
-          'max-sm:px-6 max-sm:pb-[16px] max-sm:pt-[120px]'
+          'max-sm:px-6 max-sm:pb-[16px] max-sm:pt-[120px]',
         )}
       >
         <div className={'flex w-full max-w-[1100px] flex-col'}>
@@ -112,7 +115,7 @@ function Blog() {
             <span
               className={cn(
                 'relative -right-5 top-[-25px] text-[28px] font-normal',
-                'max-md:-right-2 max-md:top-[-4vw] max-md:text-base'
+                'max-md:-right-2 max-md:top-[-4vw] max-md:text-base',
               )}
             >
               Blog

diff --git a/app/compare/notion-vs-appflowy/page.tsx b/app/compare/notion-vs-appflowy/page.tsx
@@ -14,7 +14,7 @@ import React from 'react';
 import Image from 'next/image';
 import 'styles/vs-notion.scss';
 
-const site_url = process.env.ENVIRONMENT === 'test' ? 'https://test.appflowy.io' : 'https://appflowy.io';
+const site_url = process.env.NEXT_PUBLIC_SITE_BASE_URL;
 const title = 'Notion vs AppFlowy | The #1 Open Source Notion Alternative is AppFlowy';
 const description = 'Open source, fast, offline support, self-hosting';
 
@@ -102,27 +102,35 @@ function generateListSchema() {
 }
 
 const points = ['Offline mode', 'Self-hosting', 'AI model selection', 'Customization', 'Native mobile and desktop apps'];
-const environment = process.env.ENVIRONMENT || 'development';
 
-let importBaseURL: string = 'https://appflowy.com';
-
-if (environment === 'test') {
-  importBaseURL = 'https://test.appflowy.com';
-}
+const importBaseURL: string = `${process.env.NEXT_PUBLIC_SITE_BASE_URL}/app`;
 
 function Page() {
   return (
     <>
-      <Script id='ld-json' type='application/ld+json'>
+      <Script
+        id="ld-json"
+        type="application/ld+json"
+      >
         {JSON.stringify(generateListSchema())}
       </Script>
       <div className={'vs-notion-page'}>
         <div className={'af-container'}>
           <div className={'af-box section-1'}>
             <div className={'flex items-center justify-center gap-2'}>
-              <Image src={AppFlowyImage} alt={'AppFlowy'} width={56} height={56} />
+              <Image
+                src={AppFlowyImage}
+                alt={'AppFlowy'}
+                width={56}
+                height={56}
+              />
               <span className={'text-sm font-semibold'}>vs</span>
-              <Image src={NotionImage} alt={'Notion'} width={56} height={56} />
+              <Image
+                src={NotionImage}
+                alt={'Notion'}
+                width={56}
+                height={56}
+              />
             </div>
             <div className={'main-content'}>
               <h1>
@@ -142,7 +150,12 @@ function Page() {
             </h2>
             <div className={'cards'}>
               <div className={'card'}>
-                <Image src={Object1} alt={'AI model selection'} width={151} height={121} />
+                <Image
+                  src={Object1}
+                  alt={'AI model selection'}
+                  width={151}
+                  height={121}
+                />
                 <div className={'card-title'}>
                   AI model selection
                   <div className={'card-desc'}>
@@ -152,7 +165,12 @@ function Page() {
                 </div>
               </div>
               <div className={'card'}>
-                <Image src={Object2} alt={'Available everywhere'} width={151} height={121} />
+                <Image
+                  src={Object2}
+                  alt={'Available everywhere'}
+                  width={151}
+                  height={121}
+                />
 
                 <div className={'card-title'}>
                   Available everywhere
@@ -161,7 +179,12 @@ function Page() {
               </div>
 
               <div className={'card'}>
-                <Image src={Object3} alt={'100% offline mode'} width={189} height={121} />
+                <Image
+                  src={Object3}
+                  alt={'100% offline mode'}
+                  width={189}
+                  height={121}
+                />
 
                 <div className={'card-title'}>
                   100% offline mode
@@ -175,9 +198,9 @@ function Page() {
               }
             >
               <div className={'flex w-full items-center justify-between'}>
-                <div className='w-1/2 px-[48px] py-6 text-[#58585a] max-md:px-4 max-md:py-4'>Compare features</div>
-                <div className='w-1/4 px-[48px] py-6 text-center text-[#58585a] max-md:px-4 max-md:py-4'>Notion</div>
-                <div className='w-1/4 px-[48px] py-6 text-center text-[#58585a] max-md:px-4 max-md:py-4'>AppFlowy</div>
+                <div className="w-1/2 px-[48px] py-6 text-[#58585a] max-md:px-4 max-md:py-4">Compare features</div>
+                <div className="w-1/4 px-[48px] py-6 text-center text-[#58585a] max-md:px-4 max-md:py-4">Notion</div>
+                <div className="w-1/4 px-[48px] py-6 text-center text-[#58585a] max-md:px-4 max-md:py-4">AppFlowy</div>
               </div>
               {points.map((point) => (
                 <div
@@ -186,12 +209,22 @@ function Page() {
                     'flex w-full items-center justify-between rounded-[15px] border border-gray-100 bg-white text-[24px] max-lg:text-base max-md:text-sm'
                   }
                 >
-                  <div className='w-1/2 px-[48px] py-10 font-medium text-black max-md:px-4 max-md:py-5'>{point}</div>
-                  <div className='flex w-1/4 items-center justify-center px-[48px] py-6 max-md:px-4 max-md:py-5'>
-                    <Image src={CloseImage} alt={'Close'} width={20} height={20} />
+                  <div className="w-1/2 px-[48px] py-10 font-medium text-black max-md:px-4 max-md:py-5">{point}</div>
+                  <div className="flex w-1/4 items-center justify-center px-[48px] py-6 max-md:px-4 max-md:py-5">
+                    <Image
+                      src={CloseImage}
+                      alt={'Close'}
+                      width={20}
+                      height={20}
+                    />
                   </div>
-                  <div className='flex w-1/4 items-center justify-center px-[48px] py-6 max-md:px-4 max-md:py-5'>
-                    <Image src={RightImage} alt={'Right'} width={26} height={16} />
+                  <div className="flex w-1/4 items-center justify-center px-[48px] py-6 max-md:px-4 max-md:py-5">
+                    <Image
+                      src={RightImage}
+                      alt={'Right'}
+                      width={26}
+                      height={16}
+                    />
                   </div>
                 </div>
               ))}