Update landing page links and features

Author: tiensonqin

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "rm -rf .parcel-cache && parcel ./index.html --public-url http://localhost:1234/",
     "build": "rm -rf ./dist && parcel build ./index.html --public-url $PUBLIC_URL && mkdir -p ./dist/public && cp -rf ./public/* ./dist/public",
+    "test:landing-web-app": "rm -rf .parcel-cache && PUBLIC_URL=/ npm run build && node --test test/landing-web-app.test.mjs",
     "dev:cloudflare": "wrangler2 dev"
   },
   "devDependencies": {

src/pages/Landing/HeadShowcase.tsx

@@ -198,9 +198,9 @@ export function HeadShowcase () {
               leftIcon={<Play size={18} weight={'duotone'}/>}
               rightIcon={<ArrowSquareOut size={18} className={'opacity-70'}/>}
               className={'bg-logseq-600'}
-              href={"https://demo.logseq.com"}
+              href={"https://app.logseq.com"}
             >
-              Live Demo
+              Web app
             </Button>
           </div>
         </div>

src/pages/Landing/LandingFooterNav.tsx

@@ -1,7 +1,7 @@
 import {
   ArrowSquareOut, CloudCheck, DeviceMobile, FileText,
   GithubLogo, Globe, HandWaving, Keyhole, Play,
-  PuzzlePiece, ScribbleLoop, Swatches, TwitterLogo, UserCirclePlus
+  PuzzlePiece, Swatches, TwitterLogo, UserCirclePlus
 } from '@phosphor-icons/react'
 import { Button } from '../../components/Buttons'
 import { AppLogoEmbossed, FloatGlassButton, imageProductHuntLogo } from './common'
@@ -50,61 +50,11 @@ export function FeaturesBoards () {
           <div className="r img-wrap flex-1 hidden sm:block"></div>
         </div>
       </div>
-
-      <div className="board-item hidden sm:block">
-        <div className="inner whiteboard">
-          <div className="l img-wrap flex-1 hidden sm:flex"></div>
-
-          <div className="r info-wrap flex-1">
-            <strong><ScribbleLoop size={38} weight={'duotone'}/></strong>
-            <h1>Whiteboards <sup>BETA</sup></h1>
-
-            <h2>
-              <span>A new canvas</span> <br/>
-              <span className="text-logseq-50/80">for your thoughts.</span>
-            </h2>
-
-            <h3 className="hidden sm:block">
-              <span className="text-logseq-50/80">Place any of your thoughts from the knowledge base <br/>
-              or new ones next to each other on an infinite canvas</span> <br/>
-              <span>to connect, associate and understand in new ways.</span>
-            </h3>
-          </div>
-
-        </div>
-      </div>
     </div>
   )
 }
 
 export function FeaturesBoardsDL () {
-  const appState = useAppState()
-
-  const itemWhiteboard = (
-    <div className="board-item whiteboard flex-1">
-      <div className="inner">
-        <div className="r info-wrap flex-1">
-          <strong><ScribbleLoop size={38} weight={'duotone'}/></strong>
-          <h1>Whiteboards <sup>BETA</sup></h1>
-
-          {appState.sm.get() ?
-            (
-              <h2>
-                <span>A new canvas </span> <br/>
-                <span className="text-logseq-50/80">for your thoughts.</span>
-              </h2>
-            ) : (
-              <h2>
-                <span>A new canvas </span>
-                <span className="text-logseq-50/80">for your<br/>thoughts.</span>
-              </h2>
-            )}
-        </div>
-
-      </div>
-    </div>
-  )
-
   return (
     <div className={'app-features-boards dl-page hidden sm:block'}>
       <div className="board-item-wrap">
@@ -122,13 +72,11 @@ export function FeaturesBoardsDL () {
           </div>
         </div>
 
-        {appState.sm.get() && (itemWhiteboard)}
-
         <div className="board-item rtc-collaboration">
           <div className="inner">
             <div className="l info-wrap flex-1">
               <strong><UserCirclePlus size={38} weight={'duotone'}/></strong>
-              <h1>Real-time collaboration<sup> COMING SOON</sup></h1>
+              <h1>Real-time collaboration</h1>
               <h2>
                 <span className="text-logseq-50/80">
                   Great knowledge is
@@ -141,12 +89,6 @@ export function FeaturesBoardsDL () {
           </div>
         </div>
       </div>
-
-      {!appState.sm.get() && (
-        <div className="board-item-wrap flex w-full">
-          {itemWhiteboard}
-        </div>
-      )}
     </div>
   )
 }
@@ -271,9 +213,9 @@ export function LandingFooterDesc (props: {
             leftIcon={<Play size={18} weight={'duotone'}/>}
             rightIcon={<ArrowSquareOut size={18} className={'opacity-70'}/>}
             className={'w-full bg-logseq-600 mt-4 sm:w-auto sm:mt-0'}
-            href={'https://demo.logseq.com'}
+            href={'https://app.logseq.com'}
           >
-            Live Demo
+            Web app
           </Button>
         </div>
       </div>
@@ -287,6 +229,7 @@ export function LandingFooterNav () {
   const links = (
     <div className="links flex flex-col justify-center">
       <p className="flex space-x-4 text-xs text-gray-300/90 pb-1">
+        <a href="https://logseq.io/p/NX4mc_ggEV" target="_blank" rel="noreferrer">Roadmap</a>
         <Link to={"/privacy-policy"}>Privacy</Link>
         <Link to={"/terms"}>Terms</Link>
         <a href="mailto:hi@logseq.com">Contact Us</a>

src/pages/Landing/TutorialShowcase.tsx

@@ -393,11 +393,6 @@ export function TutorialShowcase (
         <li>Task Management</li>
         <li>PDF Annotations</li>
         <li>Flashcards</li>
-        <li>
-          <span className="relative">
-            Whiteboards<sup>NEW</sup>
-          </span>
-        </li>
       </ul>
 
       {/* Tutorial Features Slide/Select */}

src/pages/Landing/index.css

@@ -1055,23 +1055,6 @@ h1, h2, h3 {
         }
       }
 
-      &.whiteboard {
-        @apply pt-4 pb-5
-        sm:pt-10 sm:pb-12;
-
-        > .img-wrap {
-          @apply -mb-12 -ml-16;
-
-          background-image: url("./assets/whiteboard-demo.png");
-          background-position-x: left;
-          background-position-y: bottom;
-          border-radius: 22px;
-        }
-
-        > .r {
-          @apply sm:pl-16;
-        }
-      }
     }
   }
 
@@ -1123,31 +1106,6 @@ h1, h2, h3 {
           }
         }
       }
-
-      &.whiteboard {
-        @apply flex;
-
-        > .inner {
-          @apply pt-4 flex flex-1 pb-20 -mx-4 -mt-4
-          sm:pt-10 sm:-mx-8 sm:-mb-2 sm:px-8;
-
-          border-radius: 1em;
-          overflow: hidden;
-          background-image: url("./assets/whiteboard-demo-small.png");
-          background-repeat: no-repeat;
-          background-size: 100%;
-          background-position: bottom;
-
-          @screen sm {
-            background-size: contain;
-            background-image: url("./assets/whiteboard_canvas_fadeout.png");
-          }
-
-          > .r {
-            @apply px-4 py-4 sm:px-0 sm:py-0;
-          }
-        }
-      }
     }
   }
 }

test/landing-web-app.test.mjs

@@ -0,0 +1,46 @@
+import assert from 'node:assert/strict'
+import { readdir, readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import test from 'node:test'
+
+async function collectAssets (directory) {
+  const entries = await readdir(directory, { withFileTypes: true })
+  const assets = await Promise.all(entries.map(async entry => {
+    const path = join(directory, entry.name)
+
+    if (entry.isDirectory()) return collectAssets(path)
+    if (/\.(?:html|js)$/.test(entry.name)) return readFile(path, 'utf8')
+    return []
+  }))
+
+  return assets.flat()
+}
+
+test('landing page links to the Logseq web app', async () => {
+  const assets = await collectAssets(fileURLToPath(new URL('../dist/', import.meta.url)))
+  const output = assets.join('\n')
+
+  assert.match(output, /https:\/\/app\.logseq\.com/)
+  assert.match(output, /Web app/)
+  assert.doesNotMatch(output, /https:\/\/demo\.logseq\.com/)
+  assert.doesNotMatch(output, /Live Demo/)
+})
+
+test('landing page omits the Whiteboards feature', async () => {
+  const assets = await collectAssets(fileURLToPath(new URL('../dist/', import.meta.url)))
+  const output = assets.join('\n')
+
+  assert.doesNotMatch(output, /Whiteboards/)
+  assert.match(output, /Logseq Sync/)
+  assert.match(output, /Real-time collaboration/)
+  assert.doesNotMatch(output, /COMING SOON/)
+})
+
+test('landing page links to the public roadmap', async () => {
+  const assets = await collectAssets(fileURLToPath(new URL('../dist/', import.meta.url)))
+  const output = assets.join('\n')
+
+  assert.match(output, /Roadmap/)
+  assert.match(output, /https:\/\/logseq\.io\/p\/NX4mc_ggEV/)
+})