feat: Logseq Pro page (#32)

* feat: initial pro * feat: WIP pro page * feat: WIP pro page * feat: WIP plans components for the pro page * feat: WIP tweets components for the pro page * feat: WIP tweets components for the pro page * enhance(ux): scroll to page top when header nav link * feat: WIP plans components for the pro page * feat: WIP plans components for the pro page * feat: WIP plans QA components for the pro page * feat: footer components for the pro page * feat(mobile): WIP UI adaptation * feat(mobile): WIP UI adaptation * feat(mobile): WIP UI adaptation * feat(mobile): WIP UI adaptation * feat(mobile): WIP UI adaptation * feat(mobile): polish UI adaptation * fix(mobile): layout for pro page * feat(mobile): polish UI adaptation * enhance(ui): contact us button * feat(pro): support web user login * feat(pro): load user pro state * feat(pro): load auth user to global state * enhance(dev): tools for state * enhance: test mode payment * enhance(dev): pnpm instead of yarn * enhance(dev): pnpm instead of yarn * enhance(dev): pnpm instead of yarn * enhance(dev): pnpm instead of yarn * feat(ux): test payment * feat(ux): test payment * fix: remove debug * enhance: lemon flow * enhance: lemon flow * fix: remove debug * enhance: amplify ui * enhance: amplify ui * enhance: amplify ui * enhance: amplify ui * enhance(ui): better response layout * enhance(ui): better response layout * fix: encode payment email when checkout lemon order * enhance(login): routes & login flow * enhance: login link * feat(ui): modals * feat(ui): WIP student discount modal content * feat(ui): WIP student discount modal content * feat(ui): WIP student discount modal content * feat(ui): dropdown component * feat(ui): animation for modal * feat(ui): interactions for discount support * feat(ui): WIP account page * feat(ux): scroll to top for each router page transition * enhance: payment flow * enhance(ux): payment flow * enhance(ux): payment flow * enhance(ux): payment flow * enhance(ux): better routes for payment flow * enhance(ux): auth state * fix(pro): label text from condition * feat(ui): WIP pro account * feat(ui): WIP the new pro account components * feat(ui): WIP account components * feat(ui): WIP account components * feat(ui): WIP subscriptions components * feat(ui): WIP subscriptions components * feat(ui): WIP subscriptions components * feat(ui): WIP subscriptions components * enhance: cancel subscriptions * enhance(ux): refresh subscriptions * enhance(ux): modals * enhance(ui): support on trial * enhance(ux): discount student modals * enhance(ux): polish discount student modals * enhance(ui): polish cards of the subscriptions * enhance(ui): polish cards of the subscriptions * enhance(ux): more actions for the subscriptions management * enhance(ux): start trial flow for new user * feat(ui): change account password * feat(ui): change account password * feat(ui): change account password * feat(ui): delete account * fix(ux): incorrect navigation for sign out * enhance(ux): pagination for the old subscriptions list * feat(ux): open in Desktop for authencation * enhance(ui): polish details of modal content * feat(ui): get invoice of the subscription * feat(ui): get invoice of the subscription * feat(ux): keep nested account route when reload * enhance(ui): valid links * enhance(ui): polish button styles * enhance(ui): polish account plan card * enhance(dev): tests * enhance(mobile): layout of account pane * enhance(mobile): ui of account pane * enhance(mobile): ui of account pane * enhance(mobile): ui of account pane * enhance(mobile): ui of account pane * enhance(mobile): subscriptions cards * enhance(ui): lock body when there active modals * enhance(mobile): responsive layouts * enhance(mobile): responsive layouts * feat(account): delete user * feat: terms page * feat: test prod * feat: test prod * feat: test prod * feat: test prod * enhance(ui): text correction * feat: add privacy policy link * enhance: update privacy policy route * enhance: update terms&privacy policy * chore: remove pro link * chore: links * chore: invalid routes
logseq · Mar 11, 2024 · f0e10ff · f0e10ff
1 parent dd98a98
commit f0e10ff
Show file tree

Hide file tree

Showing 46 changed files with 21,143 additions and 1,566 deletions.
diff --git a/.markedrc b/.markedrc
@@ -0,0 +1,14 @@
+{
+  "marked": {
+    "breaks": true,
+    "pedantic": false,
+    "mangle": false,
+    "headerIds": false,
+    "gfm": true,
+    "tables": true,
+    "sanitize": false,
+    "smartLists": false,
+    "smartypants": false,
+    "xhtml": false
+  }
+}
diff --git a/.parcelrc b/.parcelrc
@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.md": [ "parcel-transformer-markdown", "..."]
+  }
+}
diff --git a/assets/global.css b/assets/global.css
@@ -94,13 +94,17 @@ body {
 
       &.app-link-active {
         @apply text-gray-300 font-semibold sm:opacity-100;
+
+        > * {
+          @apply opacity-100;
+        }
       }
     }
   }
 
   .right-group {
     &-inner {
-      @apply invisible absolute left-0 top-16 w-full
+      @apply invisible absolute left-0 top-[54px] w-full
       flex-col space-x-0 items-center px-2 pb-6 opacity-0 transition-opacity duration-300
       sm:flex sm:flex-row sm:top-0 sm:sticky sm:opacity-100 sm:visible
       sm:px-0 sm:space-x-6 sm:pb-0 sm:translate-y-0;
@@ -157,25 +161,26 @@ body {
 
 .app-logo-embossed {
   background: linear-gradient(to right, #0E2A35, #0E2A35) content-box content-box,
-              linear-gradient(to bottom, rgba(133,200,200,0.1), rgba(133,200,200,0), rgba(0,0,0,0.2)) border-box,
-              #0E2A35 border-box;
+  linear-gradient(to bottom, rgba(133, 200, 200, 0.1), rgba(133, 200, 200, 0), rgba(0, 0, 0, 0.2)) border-box,
+  #0E2A35 border-box;
   padding: 2px;
   display: grid;
   place-items: center;
   border-radius: 16px;
-  filter: drop-shadow(0px 4px 16px rgba(133, 200, 200, 0.2))
-          drop-shadow(0px 8px 6px rgba(133, 200, 200, 0.1));
+  filter: drop-shadow(0px 4px 16px rgba(133, 200, 200, 0.2)) drop-shadow(0px 8px 6px rgba(133, 200, 200, 0.1));
   transition: filter 300ms ease-out;
 
 }
 
+.app-terms {
+  padding-top: 80px;
+}
+
 .dockify-app-logo:hover .app-logo-embossed {
   cursor: pointer;
-  filter: drop-shadow(0px 4px 16px rgba(133, 200, 200, 0.3))
-          drop-shadow(0px 8px 6px rgba(133, 200, 200, 0.2));
+  filter: drop-shadow(0px 4px 16px rgba(133, 200, 200, 0.3)) drop-shadow(0px 8px 6px rgba(133, 200, 200, 0.2));
 }
 
-
 .app-privacy-banner {
   @apply fixed left-0 bottom-0 right-0 p-6 flex justify-center
   z-50 bg-logseq-300/10 backdrop-blur-5xl;
@@ -189,3 +194,67 @@ body {
     }
   }
 }
+
+.ui-modal {
+  @apply fixed w-screen h-screen flex justify-center
+  top-0 left-0 z-50 bg-black/50 overflow-auto py-10;
+
+  &.hidden {
+    @apply !hidden;
+  }
+
+  &-inner {
+    @apply relative m-auto;
+  }
+
+  &-content {
+    @apply relative bg-logseq-700 border border-logseq-600 rounded-xl
+    w-[90vw] max-w-[840px] min-h-[600px] p-6;
+  }
+
+  &-close {
+    @apply absolute top-6 right-6 opacity-60 hover:opacity-80
+    cursor-pointer active:opacity-50 select-none;
+  }
+
+  &.as-confirm {
+    .ui-modal-content {
+      @apply min-h-[180px] max-w-[700px];
+    }
+
+    .ui-modal-inner {
+      @apply top-[-50px] animate-in zoom-in duration-300;
+    }
+  }
+
+  &-container-locked {
+    overflow-y: hidden;
+  }
+}
+
+.ui-dropdown {
+  @apply relative;
+
+  .sub-items {
+    transform-origin: top;
+    transform: scaleY(0);
+    min-width: 270px;
+    display: flex;
+
+    &-inner {
+      @apply border bg-logseq-600 rounded-md overflow-hidden
+      border-logseq-400 p-1;
+
+      > a {
+        @apply select-none cursor-pointer rounded-md
+        pl-3 pr-2 py-1.5 hover:bg-logseq-400/80 transition-all;
+      }
+    }
+  }
+
+  &.is-active {
+    .sub-items {
+      transform: scaleY(1);
+    }
+  }
+}
diff --git a/index.html b/index.html
@@ -34,6 +34,7 @@
 </head>
 <body>
 <div id="root"></div>
-<script src="./src/main.tsx" type="module"></script>
+<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>
+<script src="./src/main.tsx" type="module" defer></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,39 +4,55 @@
   "description": "Logseq web site project.",
   "license": "MIT",
   "scripts": {
-    "dev": "parcel ./index.html --host 0.0.0.0 --public-url http://localhost:1234/",
+    "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",
     "dev:cloudflare": "wrangler2 dev"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "4.20221111.1",
+    "@cloudflare/workers-types": "4.20230807.0",
     "@types/cookie": "^0.5.1",
-    "@types/js-cookie": "^3.0.2",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
-    "parcel": "2.8.2",
-    "postcss": "8.4.20",
-    "postcss-nesting": "10.2.0",
+    "@types/js-cookie": "3.0.3",
+    "@types/react": "18.2.20",
+    "@types/react-dom": "18.2.7",
+    "buffer": "6.0.3",
+    "core-js-pure": "^3.32.1",
+    "events": "^3.1.0",
+    "parcel": "2.9.3",
+    "parcel-transformer-markdown": "^3.0.0",
+    "postcss": "8.4.27",
+    "postcss-nesting": "12.0.1",
     "process": "^0.11.10",
-    "tailwindcss": "3.2.4",
-    "tailwindcss-animate": "^1.0.5",
+    "prop-types": "^15.8.1",
+    "punycode": "2.3.0",
+    "querystring-es3": "^0.2.1",
+    "tailwindcss": "3.3.3",
+    "tailwindcss-animate": "1.0.6",
     "tailwindcss-border-gradient-radius": "^3.0.1",
     "typescript": "4.9.4",
-    "wrangler": "2.6.2"
+    "url": "^0.11.0",
+    "wrangler": "3.5.0"
   },
   "dependencies": {
-    "@hookstate/core": "4.0.0",
+    "@aws-amplify/ui": "^5.7.2",
+    "@aws-amplify/ui-react": "5.3.0",
+    "@hookstate/core": "4.0.1",
+    "@phosphor-icons/react": "2.0.10",
+    "aws-amplify": "5.3.7",
+    "camelcase": "8.0.0",
     "classnames": "2.3.2",
     "cookie": "^0.5.0",
-    "js-cookie": "^3.0.1",
-    "phosphor-react": "1.4.1",
-    "photoswipe": "5.3.4",
+    "copy-to-clipboard": "3.3.3",
+    "js-cookie": "3.0.5",
+    "photoswipe": "5.3.8",
     "platform-detect": "3.0.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-hot-toast": "^2.4.0",
-    "react-intersection-observer": "9.4.1",
-    "react-router-dom": "6.6.1",
-    "swiper": "8.4.5"
+    "react-avatar": "5.0.3",
+    "react-datepicker": "4.17.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "2.4.1",
+    "react-intersection-observer": "9.5.2",
+    "react-router-dom": "6.15.0",
+    "react-spinners": "0.13.8",
+    "swiper": "10.1.0"
   }
 }