feat: support web entry

AppFlowy-IO · Dec 30, 2024 · 7c41602 · 7c41602
1 parent 432691c
commit 7c41602
Show file tree

Hide file tree

Showing 14 changed files with 90 additions and 70 deletions.
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -104,6 +104,7 @@ async function getData(slug: string) {
   try {
     const post = await getPostData(slug);
     const relatedPosts = await getRelatedPosts(post);
+
     return { post, relatedPosts };
   } catch (error) {
     notFound();

diff --git a/components/blog/articles.tsx b/components/blog/articles.tsx
@@ -22,6 +22,7 @@ function Articles({ posts }: { posts: PostData[] }) {
     if (selectedCategory || searchValue) {
       return [];
     }
+
     return posts.filter((post) => post.pinned).sort((a, b) => a.pinned - b.pinned);
   }, [posts, searchValue, selectedCategory]);
 

diff --git a/components/blog/link.tsx b/components/blog/link.tsx
@@ -13,6 +13,7 @@ function Link({
       onClick={() => {
         if ('href' in props) {
           const href = props.href as string;
+
           window.open(href, '_blank');
         }
       }}

diff --git a/components/blog/outline.tsx b/components/blog/outline.tsx
@@ -33,6 +33,7 @@ function Outline({ post }: { post: PostData }) {
 
     if (!sidebar || !container) return;
     const contanerWidth = container.getBoundingClientRect().width;
+
     sidebar.style.width = `${contanerWidth}px`;
     const handleScroll = () => {
       fixSidebarOnScroll({

diff --git a/components/blog/subscriber.tsx b/components/blog/subscriber.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 
 function Subscriber() {
   const { email, setEmail, handleSubscribe } = useSubscriber();
+
   return (
     <div className={'flex flex-col gap-10'}>
       <div className={'flex items-center gap-[10px] max-md:flex-col max-md:gap-5'}>

diff --git a/components/layout/nav/navbar-popover.tsx b/components/layout/nav/navbar-popover.tsx
@@ -41,10 +41,18 @@ function NavbarPopover({
                 )}
                 <div className={'item-content'}>
                   <div className={'item-name'}>{item.name}</div>
-                  <div className={'item-desc'}>{item.desc}</div>
+                  {item.desc && <div className={'item-desc'}>{item.desc}</div>}
                 </div>
               </Link>
             ))}
+            {group.name === 'Download' && (
+              <div className={'w-full overflow-hidden whitespace-pre-wrap px-4 text-sm text-gray-400'}>
+                AppFlowy is now in{' '}
+                <Link className={'hover:text-primary underline'} href={'https://appflowy.com'}>
+                  your browser
+                </Link>
+              </div>
+            )}
           </div>
         ))}
       </div>

diff --git a/components/layout/nav/navbar.tsx b/components/layout/nav/navbar.tsx
@@ -70,7 +70,7 @@ function Navbar() {
                 type: 'click',
               });
             }}
-            href={'/download'}
+            href={'https://appflowy.com'}
           >
             <button className={'download-btn download-free-btn'}>{'Start for free'}</button>
           </Link>

diff --git a/components/product/get-start.tsx b/components/product/get-start.tsx
@@ -17,8 +17,8 @@ function GetStart() {
           <Link className={'download-btn'} href={'/download'}>
             Download
           </Link>
-          <Link className={'live-demo-btn'} href={'/templates'}>
-            Templates
+          <Link className={'live-demo-btn'} href={'https://appflowy.com'}>
+            Try for free
           </Link>
         </div>
       </div>

diff --git a/components/product/main-download.tsx b/components/product/main-download.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import HeroDesc from '@/components/shared/hero-desc';
+import { Button } from '@/components/ui/button';
 import { useClient } from '@/lib/hooks/use-client';
 import { useDownload } from '@/lib/hooks/use-download';
 import React, { useEffect, useMemo, useRef } from 'react';
@@ -11,7 +12,7 @@ import LinuxBtnGroup from '@/components/shared/linux-btn-group';
 function MainDownload({ showDesc = true }: { showDesc?: boolean }) {
   const { downloadOS, getOsDownloadLink } = useDownload();
   const ref = useRef(null);
-  const { os, isClient, isLinux } = useClient();
+  const { os, isClient, isLinux, isMobile } = useClient();
   const inView = useInView(ref, {
     once: true,
   });
@@ -35,26 +36,45 @@ function MainDownload({ showDesc = true }: { showDesc?: boolean }) {
   }, [isClient, inView]);
   return (
     <div className={'main-download'}>
-      {isLinux ? (
-        <LinuxBtnGroup title={'Download for Linux'} />
-      ) : (
-        <button
-          onClick={() => {
-            const link = getOsDownloadLink();
-
-            if (!link) return;
-
-            collectEvent(EventName.homePageDownloadBtn, {
-              type: 'click',
-            });
-
-            downloadOS();
-          }}
-          className={'col download-btn gap-0 bg-[#8427E0] '}
-        >
-          <div className={'title'}>{`Download for ${name}`}</div>
-        </button>
-      )}
+      <div className={'flex w-full items-center justify-center gap-4 max-sm:flex-col'}>
+        {isLinux ? (
+          <LinuxBtnGroup title={'Download for Linux'} />
+        ) : (
+          <button
+            onClick={() => {
+              const link = getOsDownloadLink();
+
+              if (!link) return;
+
+              collectEvent(EventName.homePageDownloadBtn, {
+                type: 'click',
+              });
+
+              downloadOS();
+            }}
+            className={'col download-btn gap-0 bg-[#8427E0] '}
+          >
+            <div className={'title'}>{`Download for ${name}`}</div>
+          </button>
+        )}
+        {!isMobile && (
+          <Button
+            onClick={() => {
+              collectEvent(EventName.homePageTryForFreeBtn, {
+                type: 'click',
+              });
+
+              window.open('https://appflowy.com', '_current');
+            }}
+            className={'flex-1'}
+            size={'2xl'}
+            variant={'accent'}
+          >
+            Try for free
+          </Button>
+        )}
+      </div>
+
       {showDesc && <HeroDesc inView={inView} />}
     </div>
   );

diff --git a/components/shared/hero-desc.tsx b/components/shared/hero-desc.tsx
@@ -29,7 +29,7 @@ function HeroDesc({ inView }: { inView?: boolean }) {
   };
 
   return (
-    <div className={'hero-desc text-primary text-[12px]'}>
+    <div className={'hero-desc text-primary flex justify-center text-[12px]'}>
       <Link
         onClick={() => onClick(EventName.homePageWhatIsNewLink)}
         href={'/what-is-new'}

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -1,59 +1,49 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        accent: 'bg-white text-accent-foreground shadow-sm hover:bg-accent',
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        '2xl': 'h-[56px] px-12 text-base rounded-[16px] max-sm:py-[18px]',
+        icon: 'h-9 w-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
-)
+);
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : 'button';
 
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
   }
-)
+);
 
-Button.displayName = "Button"
+Button.displayName = 'Button';
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/cypress/e2e/navigation.cy.ts b/cypress/e2e/navigation.cy.ts
@@ -21,7 +21,7 @@ describe('Navigation', () => {
       cy.get('@menu').trigger('mouseover');
       // Ensure that the popover element is visible
       cy.get('.popover-paper').should('be.visible');
-      
+
       cy.get('.popover-paper').trigger('mouseover');
       // Ensure that the popover element is still visible
       cy.wait(300);
@@ -46,12 +46,6 @@ describe('Navigation', () => {
     // Ensure that the notification bar is no longer visible
     cy.get('.banner').not('exist');
   });
-
-  it('clicking the download for free button should navigate to the download page', () => {
-    cy.get('.navbar-btn-download').click();
-    // Wait for the page to navigate to /download
-    cy.url().should('include', '/download');
-  });
 });
 
 // Prevent TypeScript from reading file as legacy script

diff --git a/lib/collect.ts b/lib/collect.ts
@@ -1,5 +1,6 @@
 export enum EventName {
   homePageDownloadBtn = 'home_page_download_btn',
+  homePageTryForFreeBtn = 'home_page_try_for_free_btn',
   homePageWhatIsNewLink = 'home_page_what_is_new_link',
   homePageGetTemplatesLink = 'home_page_get_templates_link',
   homePageMorePlatformsLink = 'home_page_more_platforms_link',
@@ -36,6 +37,7 @@ export function collectEvent(
 export function collectEvent(
   eventName:
     | EventName.homePageDownloadBtn
+    | EventName.homePageTryForFreeBtn
     | EventName.navigatorGithubBtn
     | EventName.navigatorStartForFreeBtn
     | EventName.homePageGetStartedBtn

diff --git a/lib/posts.ts b/lib/posts.ts
@@ -58,6 +58,7 @@ export async function getPostData(slug: string): Promise<PostData> {
   if (!fileName) {
     throw new Error('Post not found');
   }
+
   return getPostByFilename(fileName);
 }
-Original file line number
+Diff line change
@@ Expand Up @@
       if (!fileName) {
         throw new Error('Post not found');
       }
       return getPostByFilename(fileName);
     }
@@ Expand Down @@