15 | {TermsContent()}
16 |
17 | {/* global footer */}
18 |
26 | )
27 | }
--------------------------------------------------------------------------------
/src/components/Cards.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import cx from 'classnames'
3 |
4 | export const GlassCard = React.forwardRef
19 |
25 |
20 |
24 |
21 |
23 |
19 |
23 | )
24 | })
25 |
--------------------------------------------------------------------------------
/src/pages/User/PrivacyPolicy.tsx:
--------------------------------------------------------------------------------
1 | // @ts-ignore
2 | import html from './privacy_policy.md'
3 | import { LandingFooterNav } from '../Landing'
4 |
5 | export function PrivacyPolicyContent() {
6 | return (
7 | )
10 | }
11 |
12 | export function PrivacyPolicyPage() {
13 | return (
14 |
20 | {children}
21 |
22 |
15 | {PrivacyPolicyContent()}
16 |
17 | {/* global footer */}
18 |
26 | )
27 | }
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | export type IProInfo = {
2 | FileSyncExpireAt: number
3 | FileSyncGraphCountLimit: {
4 | 'current': number,
5 | 'free': number,
6 | 'pro': number,
7 | },
8 | FileSyncStorageLimit: {
9 | 'current': number,
10 | 'currentFormatted': string,
11 | 'free': number,
12 | 'freeFormatted': string,
13 | 'pro': number,
14 | 'proFormatted': string
15 | },
16 | ProUser: boolean
17 | UserGroups: 'alpha-tester' | string
18 |
19 | FreeTrialEndsAt: { ['LogseqPro']: string }
20 | LemonSubscriptionID: { ['LogseqPro']: string }
21 | LemonCustomerID: { ['LogseqPro']: string }
22 | LemonEndsAt: { ['LogseqPro']: string }
23 | LemonRenewsAt: { ['LogseqPro']: string }
24 | LemonStatus: { ['LogseqPro']: string }
25 | }
26 |
27 | declare global {
28 | interface Window {
29 | LemonSqueezy: any
30 | createLemonSqueezy: () => void
31 | }
32 | }
--------------------------------------------------------------------------------
/src/components/Modal.tsx:
--------------------------------------------------------------------------------
1 | import cx from 'classnames'
2 | import { XCircle } from '@phosphor-icons/react'
3 | import { useRef } from 'react'
4 |
5 | export function Modal (props: any) {
6 | const { id, visible, destroy, className, hasClose, children, onClick, ...rest } = props
7 | const refInner = useRef
19 |
25 |
20 |
24 |
21 |
23 | {
12 | if (target && refInner.current?.contains(target as any)) {
13 | return
14 | }
15 |
16 | destroy()
17 | }}
18 |
19 | {...rest}>
20 |
34 | )
35 | }
--------------------------------------------------------------------------------
/src/pages/Landing/index.ts:
--------------------------------------------------------------------------------
1 | import './index.css'
2 |
3 | import { HeadShowcase } from './HeadShowcase'
4 | import { TutorialShowcase } from './TutorialShowcase'
5 | import { TutorialTips } from './TutorialTips'
6 | import { LandingFooterDesc, LandingFooterNav } from './LandingFooterNav'
7 |
8 | const fullBgImageB: any = new URL('./assets/full-bg-text.png', import.meta.url)
9 | const fullBgImageBMobile: any = new URL('./assets/full-bg-text_mobile.png', import.meta.url)
10 |
11 | const promiseImages: any = {
12 | '00': new URL('./assets/promise-0-0.png', import.meta.url),
13 | '01': new URL('./assets/promise-0-1.png', import.meta.url),
14 | '10': new URL('./assets/promise-1-0.png', import.meta.url),
15 | '11': new URL('./assets/promise-1-1.png', import.meta.url),
16 | '20': new URL('./assets/promise-2-0.png', import.meta.url),
17 | '21': new URL('./assets/promise-2-1.png', import.meta.url),
18 | }
19 |
20 | export {
21 | HeadShowcase,
22 | TutorialShowcase,
23 | TutorialTips,
24 | LandingFooterNav,
25 | LandingFooterDesc,
26 | fullBgImageB,
27 | fullBgImageBMobile,
28 | promiseImages,
29 | }
30 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Logseq
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/components/Animations.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import { useInView } from 'react-intersection-observer'
3 |
4 | export function delay (ms = 1000) {
5 | return new Promise((resolve) => {
6 | setTimeout(resolve, ms)
7 | })
8 | }
9 |
10 | export function AnimateInTurnStage (
11 | props: any
12 | ) {
13 | let { ani, ticks, children, ...rest } = props
14 | const [turnState, setTurnState] = useState
21 |
30 |
31 | )}
32 |
33 |
22 | {children}
23 |
24 |
25 | {(hasClose !== false) && (
26 |
29 |
43 | {children}
44 |
45 | )
46 | }
--------------------------------------------------------------------------------
/src/pages/User/index.tsx:
--------------------------------------------------------------------------------
1 | import './index.css'
2 | import { LoginContent } from './Login'
3 | import { authConfig, useAppState } from '../../state'
4 | import { setupAuthConfigure } from './amplify'
5 | import { LandingFooterNav } from '../Landing'
6 | import { AccountContent } from './Account'
7 | import { useLocation } from 'react-router-dom'
8 |
9 | // setup amplify configures
10 | // setupAuthConfigure(authConfig)
11 |
12 | function UserEntryPage () {
13 | const appState = useAppState()
14 | const userInfo = appState.userInfo.get({ noproxy: true })
15 | const location = useLocation()
16 | const isLoginPath = location.pathname === '/login'
17 |
18 | let content = <>
19 |
20 | if (userInfo?.username && !isLoginPath) {
21 | content =
28 |
41 | )
42 | }
43 |
44 | export {
45 | UserEntryPage,
46 | }
47 |
--------------------------------------------------------------------------------
/.github/workflows/deploy-s3.yml:
--------------------------------------------------------------------------------
1 | name: Deploy
2 |
3 | on:
4 | push:
5 | branches: ["master"]
6 | workflow_dispatch:
7 |
8 | env:
9 | NODE_VERSION: "20"
10 | PUBLIC_URL: "https://logseq.com/"
11 |
12 | permissions:
13 | contents: read
14 |
15 | jobs:
16 | build:
17 | runs-on: ubuntu-latest
18 | steps:
19 | - uses: actions/checkout@v3
20 |
21 | - name: Set up Node.js
22 | uses: actions/setup-node@v3
23 | with:
24 | node-version: ${{ env.NODE_VERSION }}
25 | cache: "yarn"
26 |
27 | - name: yarn install, build
28 | run: |
29 | yarn install
30 | yarn build
31 |
32 | - name: Upload dist to S3
33 | run: aws s3 sync dist "s3://${{ env.AWS_S3_BUCKET }}" --delete
34 | env:
35 | AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
36 | AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
37 | AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
38 | AWS_REGION: us-east-1
39 |
40 | - name: Invalidate cache
41 | run: aws cloudfront create-invalidation --distribution-id "${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }}" --paths "/*"
42 | env:
43 | AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
44 | AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
45 | AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
46 | AWS_REGION: us-east-1
47 |
--------------------------------------------------------------------------------
/src/components/Buttons.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react'
2 | import cx from 'classnames'
3 |
4 | export interface ILSButtonProps extends Omit
29 | {content}
30 |
31 |
32 | {/* global footer */}
33 |
34 |
40 |
35 |
39 |
36 |
38 |
34 | {leftIcon && {leftIcon}}
35 | {children}
36 |
37 |
38 | {rightIcon && {rightIcon}}
39 |
40 | )
41 |
42 | if (asAnchor) {
43 | return (
44 |
45 | {inner}
46 | )
47 | }
48 |
49 | return (
50 |
53 | )
54 | })
55 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sites",
3 | "version": "0.0.1",
4 | "description": "Logseq web site project.",
5 | "license": "MIT",
6 | "scripts": {
7 | "dev": "rm -rf .parcel-cache && parcel ./index.html --public-url http://localhost:1234/",
8 | "build": "rm -rf ./dist && parcel build ./index.html --public-url $PUBLIC_URL && mkdir -p ./dist/public && cp -rf ./public/* ./dist/public",
9 | "dev:cloudflare": "wrangler2 dev"
10 | },
11 | "devDependencies": {
12 | "@cloudflare/workers-types": "4.20230807.0",
13 | "@types/cookie": "^0.5.1",
14 | "@types/js-cookie": "3.0.3",
15 | "@types/react": "18.2.20",
16 | "@types/react-dom": "18.2.7",
17 | "buffer": "6.0.3",
18 | "core-js-pure": "^3.32.1",
19 | "events": "^3.1.0",
20 | "parcel": "2.9.3",
21 | "parcel-transformer-markdown": "^3.0.0",
22 | "postcss": "8.4.27",
23 | "postcss-nesting": "12.0.1",
24 | "process": "^0.11.10",
25 | "prop-types": "^15.8.1",
26 | "punycode": "2.3.0",
27 | "querystring-es3": "^0.2.1",
28 | "tailwindcss": "3.3.3",
29 | "tailwindcss-animate": "1.0.6",
30 | "tailwindcss-border-gradient-radius": "^3.0.1",
31 | "typescript": "4.9.4",
32 | "url": "^0.11.0",
33 | "wrangler": "3.5.0"
34 | },
35 | "dependencies": {
36 | "@aws-amplify/ui": "^5.7.2",
37 | "@aws-amplify/ui-react": "5.3.0",
38 | "@hookstate/core": "4.0.1",
39 | "@phosphor-icons/react": "2.0.10",
40 | "aws-amplify": "5.3.7",
41 | "camelcase": "8.0.0",
42 | "classnames": "2.3.2",
43 | "cookie": "^0.5.0",
44 | "copy-to-clipboard": "3.3.3",
45 | "js-cookie": "3.0.5",
46 | "photoswipe": "5.3.8",
47 | "platform-detect": "3.0.1",
48 | "react": "18.2.0",
49 | "react-avatar": "5.0.3",
50 | "react-datepicker": "4.17.0",
51 | "react-dom": "^18.2.0",
52 | "react-hot-toast": "2.4.1",
53 | "react-intersection-observer": "9.5.2",
54 | "react-router-dom": "6.15.0",
55 | "react-spinners": "0.13.8",
56 | "swiper": "10.1.0"
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
1 | import { ExecutionContext } from '@cloudflare/workers-types'
2 | import cookie from 'cookie'
3 |
4 | export interface Env {
5 | // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
6 | // MY_KV_NAMESPACE: KVNamespace;
7 | //
8 | // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
9 | // MY_DURABLE_OBJECT: DurableObjectNamespace;
10 | //
11 | // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
12 | // MY_BUCKET: R2Bucket;
13 |
14 | ENVIRONMENT: string
15 | }
16 |
17 | declare const ENVIRONMENT: string
18 |
19 | export default {
20 | async fetch (
21 | request: Request,
22 | env: Env,
23 | ctx: ExecutionContext
24 | ): Promise
39 |
) : null
65 | }
66 |
67 | )
68 | }
69 |
--------------------------------------------------------------------------------
/src/pages/Landing/common.tsx:
--------------------------------------------------------------------------------
1 | import cx from 'classnames'
2 |
3 | // @ts-ignore
4 | import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js'
5 |
6 | export const imageS1: any = new URL('./assets/tutorials-1.png', import.meta.url)
7 | export const imageLogo: any = new URL('./assets/logo2.png', import.meta.url)
8 | export const imageLogoDots: any = new URL('./assets/logo-dots.svg', import.meta.url)
9 | export const imageProductHuntLogo: any = new URL('./assets/product_hunt_logo.png', import.meta.url)
10 |
11 | export function FloatGlassButton (
12 | props: any,
13 | ) {
14 | const { href, children, className, ...rest } = props
15 |
16 | if (href) {
17 | rest.onClick = () => {
18 | window?.open(
19 | href, '_blank'
20 | )
21 | }
22 | }
23 |
24 | return (
25 |
28 | )
29 | }
30 |
31 | export function AppLogo (
32 | props: any
33 | ) {
34 | const { className, ...rest } = props
35 |
36 | return (
37 |
38 |
40 |
64 |
41 | By clicking “Accept All Cookies”, you agree to the storing of
42 | cookies
43 | on
44 | your device to enhance site navigation, and analyze site usage.
45 | View our Privacy Policy for more.
50 |
51 |
52 |
53 |
55 |
57 |
62 |
63 |
62 |
63 | {({ user }: any) => {
64 | setTimeout(() => {
65 | applyLoginUser(user, { navigate, routeLocation, inComponent: true })
66 | }, 50)
67 | }}
68 |
69 |
)
70 | }
71 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 |
70 |
78 |
81 | }/>
82 | }/>
83 | }>
84 | }>
85 |
86 |
87 | {/* modals */}
88 | {modalsState.modals.get({ noproxy: true })?.map(m => {
89 | return (
90 | createPortal(
91 | modalsState.remove(m.id)}
94 | {...m.props}
95 | >
96 | {m.content} ,
97 | document.body))
98 | })}
99 |
100 |
101 | )
102 | }
103 |
--------------------------------------------------------------------------------
/src/components/Dropdown.tsx:
--------------------------------------------------------------------------------
1 | import React, { MutableRefObject, ReactElement, useEffect, useRef, useState } from 'react'
2 | import cx from 'classnames'
3 |
4 | type MenuDataItem = {
5 | key: string | number
6 | text?: string | ReactElement
7 | type?: string
8 | props?: Record
65 |
))
69 |
70 | return (
71 |
66 | {children}
67 |
68 |
75 |
78 | {children}
79 |
80 |
81 | {React.isValidElement(items) ? wrapSubItems(items) :
82 | (items?.length > 0 &&
83 | wrapSubItems(
84 | items.map((it: MenuDataItem, idx: number) => {
85 | const { className, ...rest } = it.props || {}
86 |
87 | if (it.render) return (
88 |
89 | {typeof it.render === 'function' ? (it.render(it)) : it.render}
90 | )
91 |
92 | return (
93 |
94 | {it.text}
95 |
96 | )
97 | }) as any))}
98 |
99 | )
100 | })
--------------------------------------------------------------------------------
/src/pages/Home.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | fullBgImageB, fullBgImageBMobile,
3 | HeadShowcase, LandingFooterDesc,
4 | LandingFooterNav, promiseImages,
5 | TutorialShowcase,
6 | TutorialTips,
7 | } from './Landing'
8 | import { AnimateInTurnStage } from '../components/Animations'
9 | import cx from 'classnames'
10 | import { DailyShowcase } from './Landing/DailyShowcase'
11 | import { useAppState } from '../state'
12 |
13 | export function HomePage () {
14 | const appState = useAppState()
15 |
16 | // useEffect(() => {
17 | // setTimeout(() => {
18 | // // @ts-ignore
19 | // particlesJS.load('particles-bg', './particlesjs-config.json', () => {
20 | // })
21 | // }, 1000)
22 | // }, [])
23 |
24 | return (
25 |
26 |
96 | )
97 | }
98 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | const colors = require('tailwindcss/colors')
2 |
3 | module.exports = {
4 | content: [
5 | './src/**/*.{html,js,ts,jsx,tsx}',
6 | ],
7 | theme: {
8 | extend: {
9 | colors: {
10 | 'logseq': {
11 | 50: '#b7d5d5',
12 | 100: '#8EC2C2',
13 | 200: '#2c7d8f',
14 | 300: '#266C7D',
15 | 400: '#195D6C',
16 | 500: '#094b5a',
17 | 600: '#023643',
18 | 700: '#002B36',
19 | 800: '#01222a',
20 | 900: '#01171d'
21 | },
22 | 'pro': {
23 | 50: '#F5FEFB',
24 | 100: '#cde9ff',
25 | 200: '#A6E0FA',
26 | 300: '#7ECDF6',
27 | 400: '#3CBAF3',
28 | 500: '#0EA5E9',
29 | 600: '#0C8DC7',
30 | 700: '#0A75A6',
31 | 800: '#085D84',
32 | 900: '#064662'
33 | }
34 | },
35 | fontSize: {
36 | '4xl': '2.4rem',
37 | '6xl': '4rem'
38 | },
39 | backdropBlur: {
40 | '4xl': '80px',
41 | '5xl': '100px'
42 | },
43 | backgroundImage: {
44 | 'radial': 'radial-gradient(var(--tw-gradient-stops))'
45 | },
46 | linearBorderGradients: ({ theme }) => ({
47 | colors: {
48 | 'yellow-purple-red': [
49 | colors.amber[400],
50 | colors.purple[500],
51 | colors.red[600]
52 | ],
53 |
54 | 'red-purple-blue': [
55 | colors.fuchsia[400],
56 | colors.purple[500],
57 | colors.blue[600]
58 | ],
59 |
60 | 'yellow-brown-yellow': [
61 | colors.yellow[400],
62 | colors.stone[300],
63 | colors.yellow[700]
64 | ],
65 |
66 | 'red-black-yellow': [
67 | colors.fuchsia[500],
68 | colors.stone[700],
69 | colors.yellow[400]
70 | ],
71 |
72 | 'green-black-cyan': [
73 | colors.green[500],
74 | colors.stone[500],
75 | colors.cyan[600]
76 | ],
77 |
78 | 'gray-white-gray': [
79 | colors.stone[400],
80 | colors.white,
81 | colors.stone[600]
82 | ],
83 | 'purple-white-red': [
84 | colors.red[300],
85 | colors.white,
86 | colors.purple[400]
87 | ],
88 | 'blue-white-green': [
89 | colors.blue[400],
90 | colors.white,
91 | colors.green[200]
92 | ],
93 | 'yellow-white-orange': [
94 | colors.yellow[200],
95 | colors.white,
96 | colors.orange[400]
97 | ],
98 | 'green-white-black': [
99 | colors.green[500],
100 | colors.white,
101 | colors.yellow[100]
102 | ],
103 |
104 | 'brown-white-blue': [
105 | colors.yellow[300],
106 | colors.white,
107 | colors.blue[400]
108 | ],
109 | 'gray-white-blue': [
110 | colors.stone[500],
111 | colors.white,
112 | colors.yellow[900]
113 | ]
114 | },
115 | background: theme('colors'),
116 | })
117 | },
118 | },
119 | plugins: [
120 | require('tailwindcss-animate'),
121 | require('tailwindcss-border-gradient-radius')
122 | ],
123 | }
124 |
--------------------------------------------------------------------------------
/src/components/utils.ts:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import cx from 'classnames'
3 | import Cookie from 'js-cookie'
4 |
5 | export type FunctionArguments
27 |
31 |
32 |
33 |
76 |
77 |
34 | {appState.sm.get() ?
35 | 
:
36 | 
37 | }
38 |
39 | {/* text slogan */}
40 |
43 | {(t: Array) => {
44 | return (
45 | <>
46 |
74 |
75 | 51 | Overwhelmed and constantly 53 | afraid of losing your 54 | thoughts? 55 |
56 | 57 |62 | Everyday you’re bombarded with information. 63 | Your non-connected notes lead to missing context when 64 | 65 | you need it. 66 | That gets future-you into trouble. 67 | 68 |
69 | 70 | ) 71 | }} 72 | 73 |
78 |
80 |
81 |
82 | {/* particles background */}
83 | {/**/}
84 |
85 |
95 |
86 |
88 |
89 |
90 |
94 |
91 |
93 | -
22 | {items.map(it => {
23 | const inner = (
24 | <>
25 | {it.label}
26 | {it.icon && <>
27 | {it.icon}
28 | (opens a new window)
29 | }
30 | )
31 |
32 | return (
33 |
-
37 | {it.link.startsWith('http')
38 | ?
39 | {inner}
41 | :
42 |
{ 45 | return cx('h-full flex items-center group transition-colors', 46 | isActive && 'app-link-active') 47 | }}>{inner} 48 | } 49 | 50 |
51 | )
52 | })}
53 |
127 |
175 | )
176 | }
177 |
--------------------------------------------------------------------------------
/assets/global.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | @apply text-gray-100 bg-logseq-800;
7 |
8 | &.is-nav-open {
9 | overflow: hidden;
10 | }
11 | }
12 |
13 | .app-container {
14 | @apply w-full flex-1 overflow-hidden;
15 | }
16 |
17 | .ani-slide-in-from-bottom {
18 | /* @apply animate-in fade-in-0 duration-1000 slide-in-from-bottom-14; */
19 | @apply animate-in fade-in-0 slide-in-from-bottom-14;
20 | animation-duration: 2s;
21 |
22 | visibility: visible !important;
23 | }
24 |
25 | .ani-slide-in-from-top {
26 | @apply animate-in fade-in-0 duration-1000 slide-in-from-top-14;
27 |
28 | visibility: visible !important;
29 | }
30 |
31 | .ani-slide-in-from-left {
32 | @apply animate-in fade-in-0 duration-1000 slide-in-from-left-14;
33 |
34 | visibility: visible !important;
35 | }
36 |
37 | .ani-slide-in-from-right {
38 | @apply animate-in fade-in-0 duration-1000 slide-in-from-right-14;
39 |
40 | visibility: visible !important;
41 | }
42 |
43 | .ani-zoom-in {
44 | @apply animate-in zoom-in duration-1000 fade-in-0;
45 |
46 | visibility: visible !important;
47 | }
48 |
49 | .ani-fade-in {
50 | @apply animate-in fade-in duration-1000;
51 |
52 | visibility: visible !important;
53 | }
54 |
55 | .glass-card {
56 | @apply bg-gradient-to-b from-white/20 to-logseq-800/5 rounded-md;
57 |
58 | visibility: hidden;
59 |
60 | &-inner {
61 | @apply bg-logseq-700/50 rounded-md p-3 w-full;
62 |
63 | margin: .5px;
64 | padding-top: 15px;
65 | }
66 | }
67 |
68 | .glass-btn {
69 | @apply backdrop-blur-sm bg-logseq-500/20 px-2 py-2 rounded-md border border-gray-500/30
70 | select-none active:opacity-70 cursor-pointer hover:border-gray-500/50 flex justify-center items-center;
71 | }
72 |
73 | .app-logo-link {
74 | display: inline-block;
75 | width: 32px;
76 | height: 32px;
77 | position: relative;
78 | right: -5px;
79 | top: 1px;
80 |
81 | border-radius: 8px;
82 | box-shadow: 0 4px 32px 0 rgba(133, 200, 200, 0.3);
83 | }
84 |
85 | .app-headbar {
86 | @apply w-full px-6 fixed bg-logseq-800/70 z-50;
87 | backdrop-filter: blur(70px);
88 |
89 | .links-group {
90 | @apply flex flex-1 space-x-8 whitespace-nowrap;
91 |
92 | a {
93 | @apply text-logseq-100 sm:text-[#A4B5B6] text-base sm:text-lg hover:text-gray-300;
94 |
95 | &.app-link-active {
96 | @apply text-gray-300 font-semibold sm:opacity-100;
97 |
98 | > * {
99 | @apply opacity-100;
100 | }
101 | }
102 | }
103 | }
104 |
105 | .right-group {
106 | &-inner {
107 | @apply invisible absolute left-0 top-[54px] w-full
108 | flex-col space-x-0 items-center px-2 pb-6 opacity-0 transition-opacity duration-300
109 | sm:flex sm:flex-row sm:top-0 sm:sticky sm:opacity-100 sm:visible
110 | sm:px-0 sm:space-x-6 sm:pb-0 sm:translate-y-0;
111 |
112 | z-index: -1;
113 |
114 | @screen sm {
115 | z-index: 1;
116 | }
117 | }
118 |
119 | &:before {
120 | @apply sm:hidden z-40;
121 |
122 | display: none;
123 | content: " ";
124 | height: 100vh;
125 | width: 100vw;
126 | background: rgba(7, 7, 7, 0.43);
127 | position: fixed;
128 | left: 0;
129 | top: 90px;
130 | }
131 |
132 | &.is-active {
133 | .right-group-inner {
134 | @apply visible flex opacity-100 z-40 bg-logseq-800 sm:bg-logseq-800/0;
135 | }
136 |
137 | &:before {
138 | @apply block sm:hidden;
139 | /* display: block; */
140 | }
141 | }
142 | }
143 | }
144 |
145 | .app-link-active {
146 | }
147 |
148 | .app-toaster {
149 | @apply !bg-logseq-500 !text-gray-100;
150 | }
151 |
152 | .app-logo {
153 | @apply flex items-center justify-center
154 | bg-logseq-700 overflow-hidden border-logseq-800
155 | shadow-2xl shadow-logseq-300 p-3 rounded-3xl;
156 |
157 | img {
158 | @apply translate-y-0.5;
159 | }
160 | }
161 |
162 | .app-logo-embossed {
163 | background: linear-gradient(to right, #0E2A35, #0E2A35) content-box content-box,
164 | linear-gradient(to bottom, rgba(133, 200, 200, 0.1), rgba(133, 200, 200, 0), rgba(0, 0, 0, 0.2)) border-box,
165 | #0E2A35 border-box;
166 | padding: 2px;
167 | display: grid;
168 | place-items: center;
169 | border-radius: 16px;
170 | filter: drop-shadow(0px 4px 16px rgba(133, 200, 200, 0.2)) drop-shadow(0px 8px 6px rgba(133, 200, 200, 0.1));
171 | transition: filter 300ms ease-out;
172 |
173 | }
174 |
175 | .app-terms {
176 | padding-top: 80px;
177 | }
178 |
179 | .dockify-app-logo:hover .app-logo-embossed {
180 | cursor: pointer;
181 | filter: drop-shadow(0px 4px 16px rgba(133, 200, 200, 0.3)) drop-shadow(0px 8px 6px rgba(133, 200, 200, 0.2));
182 | }
183 |
184 | .app-privacy-banner {
185 | @apply fixed left-0 bottom-0 right-0 p-6 flex justify-center
186 | z-50 bg-logseq-300/10 backdrop-blur-5xl;
187 |
188 | .r {
189 | @apply flex space-x-4 py-3
190 | justify-center sm:py-0;
191 |
192 | > button {
193 | @apply justify-center;
194 | }
195 | }
196 | }
197 |
198 | .ui-modal {
199 | @apply fixed w-screen h-screen flex justify-center
200 | top-0 left-0 z-50 bg-black/50 overflow-auto py-10;
201 |
202 | &.hidden {
203 | @apply !hidden;
204 | }
205 |
206 | &-inner {
207 | @apply relative m-auto;
208 | }
209 |
210 | &-content {
211 | @apply relative bg-logseq-700 border border-logseq-600 rounded-xl
212 | w-[90vw] max-w-[840px] min-h-[600px] p-6;
213 | }
214 |
215 | &-close {
216 | @apply absolute top-6 right-6 opacity-60 hover:opacity-80
217 | cursor-pointer active:opacity-50 select-none;
218 | }
219 |
220 | &.as-confirm {
221 | .ui-modal-content {
222 | @apply min-h-[180px] max-w-[700px];
223 | }
224 |
225 | .ui-modal-inner {
226 | @apply top-[-50px] animate-in zoom-in duration-300;
227 | }
228 | }
229 |
230 | &-container-locked {
231 | overflow-y: hidden;
232 | }
233 | }
234 |
235 | .ui-dropdown {
236 | @apply relative;
237 |
238 | .sub-items {
239 | transform-origin: top;
240 | transform: scaleY(0);
241 | min-width: 270px;
242 | display: flex;
243 |
244 | &-inner {
245 | @apply border bg-logseq-600 rounded-md overflow-hidden
246 | border-logseq-400 p-1;
247 |
248 | > a {
249 | @apply select-none cursor-pointer rounded-md
250 | pl-3 pr-2 py-1.5 hover:bg-logseq-400/80 transition-all;
251 | }
252 | }
253 | }
254 |
255 | &.is-active {
256 | .sub-items {
257 | transform: scaleY(1);
258 | }
259 | }
260 | }
261 |
--------------------------------------------------------------------------------
/src/pages/Landing/HeadShowcase.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ArrowSquareOut,
3 | CircleWavyQuestion,
4 | Play,
5 | } from '@phosphor-icons/react'
6 | import { Button } from '../../components/Buttons'
7 | import { GlassCard } from '../../components/Cards'
8 | import { WrapGlobalDownloadButton } from '../Downloads'
9 | import { useAppState } from '../../state'
10 | import cx from 'classnames'
11 | import { useCallback, useState } from 'react'
12 | import { openLiveDemo } from '../../components/utils'
13 |
14 | export function GlassCardRefs (props: any) {
15 | const { className, onRefMouseEnter, onRefMouseLeave, ...rest } = props
16 | return (
17 |
128 |
174 |
129 |
130 | 
131 |
132 |
133 |
136 |
137 |
138 |
141 |
142 | {rightActive ?
143 |
173 |
148 |
172 |
155 |
156 | {({ active, rightIconFn, leftIconFn }: any) => {
157 |
158 | return (
159 |
167 | )
168 | }}
169 |
170 |
171 |
19 |
31 |
20 |
30 |
21 |
22 | My notes on 📖Book / Intertwingled:
27 |
28 |
29 |
43 | Image
44 |
45 |
46 | Jessica
48 |
51 | 👥 Person
49 |👤 Jessica Albert
50 |
60 | Image
61 |
62 |
63 | Intertwingled
65 |
68 | 📖 Book
66 |👤 Peter Morville
67 |
77 |
107 |
78 |
106 |
79 | NOW
80 |
81 | Meeting with 👥 Jessica
87 |
88 |
89 |
90 | {/* children */}
91 |
92 |
105 |
93 |
104 |
94 |
95 | She mentioned her current read: 📖 Book/Intertwingled
101 |
102 |
103 |
127 |
209 | )
210 | }
211 |
--------------------------------------------------------------------------------
/src/pages/Pro/modals.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ArrowSquareOut,
3 | CaretLeft,
4 | Check, CheckSquareOffset, CopySimple,
5 | IdentificationBadge,
6 | Info, PaperPlaneTilt,
7 | Student,
8 | UserCirclePlus
9 | } from '@phosphor-icons/react'
10 | import copy from 'copy-to-clipboard'
11 | import { Dropdown } from '../../components/Dropdown'
12 | import toast from 'react-hot-toast'
13 | import { useNavigate } from 'react-router-dom'
14 | import { useAppState } from '../../state'
15 |
16 | export const discountStudentEmailTemplate = {
17 | subject: 'Logseq Pro Student Discount Request',
18 | body: `
19 | Instructions from the Logseq Team:
20 |
21 | Thank you for wanting to use Logseq Pro! Students and educational professionals can apply for a 50% discount on the monthly or annual Logseq Pro plan.
22 | To receive a discount coupon, please follow the steps below and answer the questions:
23 | Attach a photo/scan of your school ID. Please hide any personal information, but clearly show both your name and the expiry/validity date of the ID.
24 |
25 | 1. What is your full name?
26 | 2. What is your school's name?
27 | 3. What is your Logseq username?
28 | 4. What is your email address (the one you used to sign up for Logseq Pro)?
29 |
30 | Please answer all questions and attach a photo/scan of your school ID.
31 | Talk to you soon!
32 |
33 | — The Logseq team
34 | `
35 | }
36 |
37 | export function UnlockStudentDiscount (props: any) {
38 | const { close } = props || {}
39 | const navigate = useNavigate()
40 | const appState = useAppState()
41 | const supportEmail = 'support@logseq.com'
42 | const isLogged = !!appState.value.userInfo?.username
43 |
44 | return (
45 |
128 |
208 |
129 | {/* text layer*/}
130 |
207 |
131 | Connect your notes,
132 |
133 | increase understanding.
134 |
136 |
137 |
138 |
139 |
140 |
141 | {/* image layer */}
142 |
143 |
144 |
145 |
146 | {/* cards layer */}
147 |
148 |
176 |
177 | {/* action buttons */}
178 |
149 |
154 |
155 |
156 | : null}
161 |
162 |
163 | {appState.sm.get() ?
164 |
165 |
166 |
: null
167 | }
168 |
169 |
170 |
175 |
179 |
182 | {({ active, leftIconFn, rightIconFn }: any) => {
183 | const leftIcon = leftIconFn?.({ weight: 'bold', size: 18 })
184 | const rightIcon = rightIconFn?.({ size: 18 })
185 |
186 | return (
187 |
193 | )
194 | }}
195 |
196 |
197 |
205 |
206 |
46 |
51 | Maximize your academic potential with 50% off Logseq Pro.
52 | If you’re
55 |
56 |
190 | 47 | Unlock your student discount. 48 |
49 | 50 |
51 | Maximize your academic potential with 50% off Logseq Pro.
52 | If you’re
currently studying at a high school or university,
53 | here’s how you can take advantage:
54 |
55 |
56 | -
57 |
-
58 | 1
59 |
60 | 100 |Create a Logseq account
61 | 62 | Start by setting up your Logseq account at 63 | { 65 | close() 66 | navigate('/login') 67 | }} 68 | >https://logseq.com/login. 69 | 70 | 71 |73 |
76 | 77 | 99 |74 | Using a university email during this step speeds up your student discount approval. 75 |
101 |
102 | -
103 | 2
104 |
105 | Request your discount
106 |107 |189 |108 |123 | 124 |Already used a school email address for sign-up?
109 |Simply email us directly from that school/university email address to request your discount. Make 110 | sure to also mention the username you chose for your Logseq account.
111 | 112 |113 | 121 | 122 |125 |148 | ), 149 | props: { 150 | href: `mailto://${supportEmail}?subject=${encodeURIComponent(discountStudentEmailTemplate.subject)}&body=${encodeURIComponent(discountStudentEmailTemplate.body)}` 151 | } 152 | }, 153 | { 154 | text: ( 155 |Signed up with a non-educational email address?
126 |Email us a clear picture or scan of your valid student ID or other proof of student status. Mention 127 | both the email address and username you used for your Logseq account.
128 | 129 |133 | 134 | 135 |138 | 139 |136 | 137 |140 | 141 | Open email client 142 | 143 | 144 | Use our pre-filled template to request your student discount 145 | 146 |147 |156 |171 | ), 172 | props: { 173 | onClick () { 174 | copy(supportEmail) 175 | toast('copied!') 176 | } 177 | } 178 | }]} 179 | > 180 | 187 | 188 |157 | 158 |161 | 162 |159 | 160 |163 | 164 | Copy support email address 165 | 166 | 167 | Paste it into your preferred email platform and send your request 168 | 169 |170 |
191 |
202 |
203 |
204 | Please note:
192 |-
193 |
- 194 | Ensure your ID displays a visible expiry date. 195 | 196 |
-
197 | Feel free to blur out any sensitive information (beside your name and the university name);
198 | we only need to verify your student status. 199 |
200 |
207 |
208 | Once your status is verified, we’ll provide you with a unique discount code.
209 |
210 | Use this code when subscribing to Logseq Pro to get the discount.
212 |
23 | Communicate better. Stay on top of your
relationships, conversations, and meetings.
24 |
27 | “I mostly use it for work: keeping daily notes & meeting notes. It's the best solution I've found 28 | to managing my tasks 29 | (and I only use a fraction of the features there).” 30 |
31 | ) 32 | }, 33 | { 34 | label: 'Daily Plan', 35 | iconUrl: IconImageDailyPlan, 36 | descImgUrl: new URL('./assets/benefit-1.png', import.meta.url), 37 | refLink: 'https://discord.com/channels/725182569297215569/918889676071374889/1050520429258887320', 38 | refType: 'discord', 39 | userName: 'breadchris', 40 | desc: ( 41 |42 | Channel your attention, 43 | reduce stress. 44 |
), 45 | feedback: ( 46 |47 | “I used to hate taking notes. 48 | If I told my past self that I wouldn't just like taking notes, but that I would become addicted to it, I 49 | wouldn't believe it. 50 | Logseq has changed my life 🔥🔥🔥” 51 |
52 | ) 53 | }, 54 | { 55 | label: 'Journaling', 56 | iconUrl: IconImageJournals, 57 | descImgUrl: new URL('./assets/benefit-2.png', import.meta.url), 58 | refLink: 'https://discord.com/channels/725182569297215569/766475028978991104/965786173148627044', 59 | refType: 'discord', 60 | userName: 'Kiernan', 61 | desc: ( 62 |63 | Understand yourself better. 64 |
), 65 | feedback: ( 66 |67 | “Before Logseq, I didn't use to write a daily journal, now I feel that it has a great value!” 68 |
69 | ) 70 | }, 71 | { 72 | label: 'Data Control', 73 | iconUrl: IconImageDataControl, 74 | descImgUrl: new URL('./assets/benefit-3.png', import.meta.url), 75 | refLink: 'https://twitter.com/15777984/status/1522601138738151427', 76 | userName: '@b05crypto', 77 | desc: ( 78 |
79 | Do all this without lock-in.
80 | And without risking your privacy.
81 |
84 | “Logseq does tracking everything in my life 85 | better than any tool I've ever used, including Roam and I have control of my data.” 86 |
87 | ) 88 | } 89 | ] 90 | 91 | export function DailyShowcaseTabs( 92 | props: { activeShowcase: string, setActiveShowcase: any } 93 | ) { 94 | const { activeShowcase, setActiveShowcase } = props 95 | 96 | return (
97 | {showcases.map(it => {
98 | const labelId = slugify(it.label)
99 | return (
100 |
121 | )
122 | })}
123 |
)
124 | }
125 |
126 | export function DailyShowcaseSelect(
127 | props: { activeShowcase: string, setActiveShowcase: any }
128 | ) {
129 | const { activeShowcase, setActiveShowcase } = props
130 | const activeIndex: number = showcases.findIndex(it => it.label === activeShowcase)
131 | const activeItem: any = showcases[activeIndex]
132 |
133 | return (
134 |
135 |
165 | )
166 | }
167 |
168 | export function DailyShowcase() {
169 | const appState = useAppState()
170 | const [showcase, setShowcase] = useState(0)
171 | const [activeShowcase, setActiveShowcase] = useState(showcases[0].label)
172 | const [sizeCache, setSizeCache] = useState([0, 0])
173 | const [progress, setProgress] = useState(0)
174 | const bdRef = useRef
136 |
137 | 
138 |
139 |
140 |
159 |
160 |
161 |
162 |
163 |
164 |
212 |
215 | {(t: Array) => {
216 | return (
217 | <>
218 |
234 |
235 | {/* Tabs */}
236 | {appState.sm.get() ?
237 | :
240 | }
243 |
244 |
245 | {/* Panels */}
246 |
342 | )
343 | }
344 |
--------------------------------------------------------------------------------
/src/pages/Landing/LandingFooterNav.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ArrowSquareOut, CloudCheck, DeviceMobile, FileText,
3 | GithubLogo, Globe, HandWaving, Keyhole, Play,
4 | PuzzlePiece, ScribbleLoop, Swatches, TwitterLogo, UserCirclePlus
5 | } from '@phosphor-icons/react'
6 | import { Button } from '../../components/Buttons'
7 | import { AppLogoEmbossed, FloatGlassButton, imageProductHuntLogo } from './common'
8 | import { WrapGlobalDownloadButton } from '../Downloads'
9 | import { useAppState, useModalsState } from '../../state'
10 | import { openLiveDemo } from '../../components/utils'
11 | import { Link } from 'react-router-dom'
12 |
13 | export function FooterDescCard (props: any) {
14 | const { icon, title, desc } = props
15 | return (
16 | 221 | Logseq helps you 222 | turn this daily mess into structured information. 223 |
224 | 225 |227 | Gain clarity 228 | in your everyday life: 229 |
230 | 231 | ) 232 | }} 233 |
247 | {showcases.map(it => {
248 | if (it.label !== activeShowcase) {
249 | return null
250 | }
251 |
252 | const labelId = slugify(it.label)
253 |
254 | return (
255 |
341 |
256 |
338 | )
339 | })}
340 |
257 |
261 |
262 |
258 | {it.desc}
259 |
260 |
263 |
337 |
269 | 
{
271 | const { width, height } = e.target
272 | !sizeCache?.[0] && setSizeCache([width, height])
273 | }}
274 | style={{width: "100%", objectFit: "cover"}}
275 | />
276 |
277 |
293 |
294 | {
271 | const { width, height } = e.target
272 | !sizeCache?.[0] && setSizeCache([width, height])
273 | }}
274 | style={{width: "100%", objectFit: "cover"}}
275 | />
276 |
277 |
278 | {/* {*/}
280 | {/* const src = bdRef.current!.querySelector('img')?.getAttribute('src')!*/}
281 |
282 | {/* openLightbox([{ src, width: 1000, height: 596 }])*/}
283 | {/* }}*/}
284 | {/*>*/}
285 | {/*
292 |
295 |
336 |
296 |
335 |
297 |
307 |
308 |
300 |
305 |
306 |
309 |
334 |
310 | {it.feedback}
311 |
312 |
313 |
314 |
333 |
315 | User Feedback
316 | by{it.userName}
317 |
318 |
319 | Via
320 | {(it.refType === 'discord') ?
321 | (<>
329 |
330 |
331 |
332 |
17 |
28 | )
29 | }
30 |
31 | export function FeaturesBoards () {
32 | return (
33 |
18 |
27 |
19 | {icon}
20 |
21 |
22 |
23 |
26 | {title}
24 |{desc}
25 |
34 |
77 | )
78 | }
79 |
80 | export function FeaturesBoardsDL () {
81 | const appState = useAppState()
82 |
83 | const itemWhiteboard = (
84 |
35 |
53 |
54 |
36 |
52 |
37 |
40 | Always up-to-date notes
43 |
44 | With encrypted file syncing, you'll always have your
48 |
49 |
50 |
51 | Logseq Sync BETA
39 |
40 | Always up-to-date notes
41 | between all your devices.
42 |
43 |
44 | With encrypted file syncing, you'll always have your
notes
46 | backed up and securely available in real-time
on any device.
47 |
48 |
55 |
76 |
56 |
57 |
58 |
75 |
59 |
63 | A new canvas
66 |
67 |
68 | Place any of your thoughts from the knowledge base
72 |
73 |
74 | Whiteboards BETA
61 | 62 |
63 | A new canvas
64 | for your thoughts.
65 |
66 |
67 |
68 | Place any of your thoughts from the knowledge base
69 | or new ones next to each other on an infinite canvas
70 | to connect, associate and understand in new ways.
71 |
72 |
85 |
106 | )
107 |
108 | return (
109 |
86 |
105 |
87 |
93 | A new canvas
96 | ) : (
97 |
98 | A new canvas
99 | for your
101 | )}
102 |
103 |
104 | Whiteboards BETA
89 | 90 | {appState.sm.get() ? 91 | ( 92 |
93 | A new canvas
94 | for your thoughts.
95 |
96 | ) : (
97 |
98 | A new canvas
99 | for your
thoughts.
100 |
101 | )}
102 |
110 |
151 | )
152 | }
153 |
154 | export function LandingFooterDesc (props: {
155 | downloadsPage?: boolean,
156 | hideFeaturesSection?: boolean
157 | }) {
158 | const appState = useAppState()
159 |
160 | return (
161 |
111 |
112 |
144 |
145 | {!appState.sm.get() && (
146 |
113 |
124 |
125 | {appState.sm.get() && (itemWhiteboard)}
126 |
127 |
114 |
123 |
115 |
118 | Always up-to-date notes
121 |
122 | Logseq Sync BETA
117 |
118 | Always up-to-date notes
119 | between all your devices.
120 |
121 |
128 |
143 |
129 |
142 |
130 |
133 |
134 | Great knowledge is
135 |
140 |
141 | Real-time collaboration COMING SOON
132 |
133 |
134 | Great knowledge is
135 |
136 |
137 | a result of collaboration.
138 |
139 |
140 |
147 | {itemWhiteboard}
148 |
149 | )}
150 |
162 | {!props.hideFeaturesSection &&
163 | (
281 | )
282 | }
283 |
284 | export function LandingFooterNav () {
285 | const appState = useAppState()
286 |
287 | const links = (
288 |
164 | {props.downloadsPage ?
165 | <>
166 |
168 | Get ready for
171 |
172 |
)}
201 |
202 | {/* descriptions */}
203 | {!props.hideFeaturesSection &&
204 | (props.downloadsPage ?
205 | null :
206 |
168 | Get ready for
169 | knowledge work reimagined.
170 |
171 |
172 | 173 | 174 | By downloading Logseq, you are embarking on a journey. We are 175 | constantly trying to make it even more useful for all kinds of 176 | workflows. 177 | 178 | {' '} 179 | 180 | These exciting features are coming soon: 181 | 182 |
183 | 184 | : 185 | <> 186 |188 | A safe space for 189 | your thoughts. 190 |
191 | 192 |193 | Designed to store your 194 | interests, questions, ideas, favorite quotes, 195 | reminders, reading and meeting 196 | notes 197 | easily and future-proof: 198 |
199 | } 200 |
207 | {[
208 | [, 'Open source', 'Free forever for personal use'],
209 | [, 'Privacy first', 'You own your data locally forever'],
210 | [, 'Mobile apps', 'Available for iOS & Android'],
211 | [, 'Markdown files', 'Open your notes in other tools'],
212 | [, 'Strong community', (
213 |
214 |
215 | {appState.discord?.approximate_presence_count.get() || '-'} users online currently
216 | )],
217 | [, 'Localization', 'Translated in many languages'],
218 | [, '150+ Plugins', 'Extend functionality to your needs'],
219 | [, '30+ Themes', 'Customize look and feel'],
220 | ].map(([icon, title, desc]) => {
221 | if (typeof desc === 'string') {
222 | desc = ({desc})
223 | }
224 | return (
225 |
226 | )
227 | })}
228 |
)}
229 |
230 | {/* features */}
231 | {
232 | !props.hideFeaturesSection &&
233 | (props.downloadsPage ?
238 |
244 | By thinking and writing with Logseq, you'll
249 |
250 |
280 | 239 | Think faster, 240 | think better! 241 |
242 | 243 |
244 | By thinking and writing with Logseq, you'll
245 | gain confidence in what you know and
246 | stop worrying about forgetting
247 | anything.
248 |
249 |
250 |
251 |
254 | {({ active, leftIconFn, rightIconFn }: any) => {
255 | const leftIcon = leftIconFn?.({ weight: 'bold', size: 18 })
256 | const rightIcon = rightIconFn?.({ size: 18 })
257 |
258 | return (
259 |
266 | )
267 | }}
268 |
269 |
270 |
278 |
279 |
289 |
298 | )
299 |
300 | return (
301 | 290 | Privacy 291 | Terms 292 | Contact Us 293 |
294 |295 | © {(new Date()).getFullYear()} Logseq, Inc. 296 |
297 |
302 |
346 | )
347 | }
348 |
--------------------------------------------------------------------------------
/src/pages/Landing/TutorialTips.tsx:
--------------------------------------------------------------------------------
1 | import { AppLogoEmbossed, FloatGlassButton, openLightbox } from './common'
2 | import {
3 | ArrowCircleLeft,
4 | ArrowCircleRight, ChatsCircle, DiscordLogo,
5 | FrameCorners, MonitorPlay, Notebook, SignOut,
6 | StarFour, SignIn
7 | } from '@phosphor-icons/react'
8 | import { Button } from '../../components/Buttons'
9 | import { AnimateInTurnStage } from '../../components/Animations'
10 | import cx from 'classnames'
11 | import Swiper from 'swiper'
12 | import 'swiper/swiper-bundle.css'
13 |
14 | import 'photoswipe/dist/photoswipe.css'
15 | import { ReactNode, useEffect, useRef, useState } from 'react'
16 | import { useMounted } from '../../hooks'
17 | import { promiseImages } from './index'
18 | import { useAppState } from '../../state'
19 |
20 | export function TipSlideItem (props: {
21 | isSm: boolean,
22 | inActive: boolean,
23 | headEmoji: string,
24 | headTitle: string,
25 | content: ReactNode | string,
26 | tips: Array
303 |
329 |
330 |
304 |
308 |
309 |
310 |
316 |
317 |
318 |
319 |
325 |
326 |
327 |
328 |
331 | }
333 | rightIcon={
343 |
344 | {appState.sm.get() ? links : null}
345 |
113 | {/* Beginner */}
114 |
153 | )
154 | }
155 |
156 | export function TutorialTips () {
157 | const appState = useAppState()
158 | const swiperElRef = useRef115 | {headEmoji} 116 | 122 |
123 | 124 |125 | {content} 126 |
127 | 128 | 129 | updateActiveNum(0)} 130 | >1 133 | updateActiveNum(1)} 134 | >2 138 | 139 | 140 |141 | {tips.map((it, idx) => { 142 | if (activeTip.active !== idx) return 143 | 144 | return ( 145 | 146 | Tip {idx + 1}: 147 | {it} 148 | 149 | ) 150 | })} 151 |
152 |
183 |
186 | {(t: Array) => (<>
187 |
189 |
190 |
191 | Braindump everything into
192 |
193 |
194 |
203 |
204 | {appState.sm.get() ?
205 | null :
206 |
225 |
226 |
400 | )
401 | }
402 |
--------------------------------------------------------------------------------
/src/pages/Landing/TutorialShowcase.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ClockCounterClockwise,
3 | Brain,
4 | PencilLine,
5 | CaretDown,
6 | Binoculars,
7 | Books,
8 | CalendarCheck,
9 | Lightbulb,
10 | CheckCircle,
11 | Gauge,
12 | Browsers
13 | } from '@phosphor-icons/react'
14 | import { AnimateInTurnStage } from '../../components/Animations'
15 | import cx from 'classnames'
16 | import { useState } from 'react'
17 | import { useAppState } from '../../state'
18 | import { slugify, navigateTabs } from '../../components/utils'
19 |
20 | const featuresSlideItems = [
21 | {
22 | label: 'Students',
23 | icon: '🧑🎓',
24 | notes: [
25 | {
26 | icon:
189 |
190 |
191 | Braindump everything into
192 |
193 |
194 |
203 |
204 | {appState.sm.get() ?
205 | null :
206 | 207 | New ideas will pop up with time. 208 |
209 | } 210 | 211 | 212 |213 | Using Logseq helps you organize your thoughts and ideas 214 |
215 | 216 |217 | so that you can 218 | 219 | come up with new outputs more easily. 220 | 221 |
222 | ) 223 | } 224 |
227 |
355 |
356 | {/* more resources */}
357 |
228 |
332 |
333 |
229 |
289 |
290 |
230 | {/* 1 */}
231 | Get in the habit of writing {isSm ? null :
}thoughts down every day.} 237 | tips={[ 238 | 'Think in sections, use indentation.', 239 | 'Use links & hashtags.', 240 | ]} 241 | complete={() => { 242 | swiperRef.current?.slideNext() 243 | }} 244 | activeTipChanged={(tag) => { 245 | setActiveTipTag?.(`0${tag}`) 246 | }} 247 | 248 | /> 249 | 250 | {/* 2 */} 251 |Always find what you’re {isSm ? null :
} looking for.} 257 | tips={[ 258 | 'Use CMD-K to search with ease.', 259 | Go through linked references to find valuable information nuggets from the past., 260 | ]} 261 | complete={() => { 262 | swiperRef.current?.slideNext() 263 | }} 264 | activeTipChanged={(tag) => { 265 | setActiveTipTag?.(`1${tag}`) 266 | }} 267 | /> 268 | 269 | {/* 3 */} 270 |Create your own processes.}
276 | tips={[
277 | Use queries to generate tables of {isSm ? null :
} relevant information., 278 | 'Install plugins and customize the app around your workflow needs.', 279 | ]} 280 | complete={() => { 281 | swiperRef.current?.slideTo(0) 282 | }} 283 | activeTipChanged={(tag) => { 284 | setActiveTipTag?.(`2${tag}`) 285 | }} 286 | /> 287 |
288 | }thoughts down every day.} 237 | tips={[ 238 | 'Think in sections, use indentation.', 239 | 'Use links & hashtags.', 240 | ]} 241 | complete={() => { 242 | swiperRef.current?.slideNext() 243 | }} 244 | activeTipChanged={(tag) => { 245 | setActiveTipTag?.(`0${tag}`) 246 | }} 247 | 248 | /> 249 | 250 | {/* 2 */} 251 |
} looking for.} 257 | tips={[ 258 | 'Use CMD-K to search with ease.', 259 | Go through linked references to find valuable information nuggets from the past., 260 | ]} 261 | complete={() => { 262 | swiperRef.current?.slideNext() 263 | }} 264 | activeTipChanged={(tag) => { 265 | setActiveTipTag?.(`1${tag}`) 266 | }} 267 | /> 268 | 269 | {/* 3 */} 270 |
} relevant information., 278 | 'Install plugins and customize the app around your workflow needs.', 279 | ]} 280 | complete={() => { 281 | swiperRef.current?.slideTo(0) 282 | }} 283 | activeTipChanged={(tag) => { 284 | setActiveTipTag?.(`2${tag}`) 285 | }} 286 | /> 287 |
291 | {
293 | if (activeIndex == 0) {
294 | return swiperRef.current?.slideTo(2)
295 | }
296 |
297 | swiperRef.current?.slidePrev()
298 | }}
299 | >
300 |
301 |
302 |
303 |
329 |
330 |
331 |
305 | {Array(sidesLen).fill(0).map((_, i) => {
306 | return (
307 | {
312 | swiperRef.current?.slideTo(i)
313 | }}
314 | >
315 | )
316 | })}
317 |
318 |
319 | {
321 | if (activeIndex == 2) {
322 | return swiperRef.current?.slideTo(0)
323 | }
324 |
325 | swiperRef.current?.slideNext()
326 | }}
327 | >
328 |
334 | {*/}
342 | {/* const src = bdRef.current!.querySelector('img')?.getAttribute('src')!*/}
343 |
344 | {/* openLightbox([{ src, width: 900, height: 553 }])*/}
345 | {/* }}*/}
346 | {/*>*/}
347 | {/*
354 |
335 | 
337 |
338 |
339 | {/*
358 |
399 |
360 |
398 | A helpful community
361 | 362 |
363 |
396 |
397 |
364 |
372 |
373 |
375 |
376 | {appState.discord?.approximate_presence_count.get() || '-'}
377 | users online currently
378 |
379 |
380 |
381 |
382 |
390 |
392 | Feature requests, bugs, discussions
393 |
394 |
395 |
201 |
215 | )
216 | }
217 |
218 | export function TutorialFeaturesPanelHolder (
219 | props: { withoutLogo?: boolean }
220 | ) {
221 | return (
222 | 202 | 204 | {props.icon} 205 | 206 | 207 | {props.title} 208 | 209 |
210 | 211 |212 | {props.desc} 213 |
214 |
223 |
224 | )
225 | }
226 |
227 | export function TutorialFeaturesPanel (
228 | props: Partial<{ activeItem: typeof featuresSlideItems[number] }>
229 | ) {
230 | let inner = (
231 | <>
232 |
233 |
235 |
236 | {props.activeItem?.notes.map(it => {
237 | return
240 |
241 |
243 |
244 | )
245 |
246 | const labelId = slugify(props.activeItem?.label)
247 |
248 | return (
249 |
250 | {/*
277 | )
278 | }
279 |
280 | export function TutorialFeaturesSlide () {
281 | const [activeIndex, setActiveIndex] = useState(0)
282 | const activeItem = featuresSlideItems[activeIndex]
283 |
284 | return (
285 | */}
251 | {/* */}
252 | {/* 1*/}
253 | {/* 2*/}
254 | {/* */}
255 |
256 | {/*
*/}
260 |
261 | */} 257 | {/* Capturing and structuring class notes*/} 258 | {/*
*/} 259 | {/*
262 |
266 |
267 | {/*
263 | {inner}
264 |
265 | */}
268 | {/* */}
269 | {/* */}
275 | {/*
*/}
276 |
286 |
314 | )
315 | }
316 |
317 | export function TutorialFeaturesSelect () {
318 | const [activeIndex, setActiveIndex] = useState(0)
319 | const activeItem = featuresSlideItems[activeIndex]
320 |
321 | return (
322 |
287 | {/* Tabs */}
288 |
312 |
313 | -
289 | {featuresSlideItems.map((it, idx) => {
290 | const labelId = slugify(it.label)
291 |
292 | return (
293 |
- setActiveIndex(idx)}
297 | tabIndex={activeIndex === idx ? 0 : -1}
298 | role="tab"
299 | aria-controls={labelId}
300 | id={"tab-" + labelId}
301 | aria-selected={activeIndex === idx}
302 | onKeyDown={navigateTabs}>
303 | 304 | {it.icon}{it.label} 305 |306 | )
307 | })}
308 |
323 |
352 |
353 | )
354 | }
355 |
356 | export function TutorialShowcase (
357 | props: {},
358 | ) {
359 | const appState = useAppState()
360 |
361 | return (
362 |
324 |
325 | {activeItem.icon}
326 |
327 |
328 |
344 |
345 |
346 |
347 |
348 |
349 |
350 | {/* Panel */}
351 |
363 | {/* Head Slogan */}
364 |
367 | {(t: Array) => {
368 | return (
369 | <>
370 |
390 |
391 | {/* Head icons */}
392 |
409 | )
410 | }
411 |
--------------------------------------------------------------------------------
/src/state.ts:
--------------------------------------------------------------------------------
1 | import { hookstate, none, StateMethods, useHookstate } from '@hookstate/core'
2 | import { IProInfo } from './types'
3 |
4 | // @ts-ignore
5 | import os from 'platform-detect/os.mjs'
6 | import { ReactElement, useEffect } from 'react'
7 | import { useAuthenticator } from '@aws-amplify/ui-react'
8 | import { Auth } from 'aws-amplify'
9 | import toast from 'react-hot-toast'
10 | import {
11 | Location,
12 | NavigateFunction,
13 | useLocation,
14 | useNavigate,
15 | } from 'react-router-dom'
16 | import camelcase from 'camelcase'
17 | import { bytesFormat, isDateValid } from './components/utils'
18 |
19 | // export const isDev = process.env.NODE_ENV !== 'production'
20 | export const isDev = false // TODO: DEBUG
21 | export const authConfig = isDev ?
22 | {
23 | region: 'us-east-2',
24 | userPoolId: 'us-east-2_kAqZcxIeM',
25 | userPoolWebClientId: '1qi1uijg8b6ra70nejvbptis0q',
26 | oauthProviders: [],
27 | } : {
28 | region: 'us-east-1',
29 | userPoolId: 'us-east-1_dtagLnju8',
30 | userPoolWebClientId: '69cs1lgme7p8kbgld8n5kseii6',
31 | oauthProviders: []
32 | }
33 |
34 | function getAuthValueFromStorage(key: string) {
35 | const prefix = `CognitoIdentityServiceProvider.${authConfig.userPoolWebClientId}`
36 | const authUser = localStorage.getItem(
37 | `${prefix}.${authConfig.userPoolWebClientId}.LastAuthUser`)
38 | if (!authUser) return
39 |
40 | return localStorage.getItem(
41 | `${prefix}.${authConfig.userPoolWebClientId}.${authUser}.${key?.trim()}`)
42 | }
43 |
44 | export const checkSmBreakPoint = () => {
45 | return (
46 | visualViewport?.width ||
47 | document.documentElement.clientWidth
48 | ) <= 640
49 | }
50 |
51 | const defaultAppState = {
52 | isDev, os, isMobile: os.android || os.ios,
53 | sm: checkSmBreakPoint(),
54 | userInfo: {
55 | pending: false,
56 | username: null,
57 | signInUserSession: null,
58 | attributes: null,
59 | signOut: () => Promise.resolve(),
60 | },
61 | releases: {
62 | fetching: false,
63 | downloads: {}, // macos -> download url
64 | e: false,
65 | },
66 | discord: {
67 | guild: null,
68 | approximate_member_count: 0,
69 | approximate_presence_count: 0,
70 | },
71 | }
72 |
73 | const appState = hookstate(defaultAppState)
74 |
75 | export type IAppState = typeof appState
76 | export type IAppUserInfoState = typeof appState.userInfo
77 | export type IAppUserInfo = typeof defaultAppState.userInfo
78 |
79 | const proState =
80 | hookstateToday, 371 | everyone is 372 | a
373 |knowledge 375 | worker.
376 | 377 |
379 |
386 |
387 | )
388 | }}
389 | Logseq is the 380 | open toolbox 381 | for
382 |383 | workflows that deal with lots of information: 384 |
385 |-
393 |
- Task Management 394 |
- PDF Annotations 395 |
- Flashcards 396 |
- 397 | 398 | WhiteboardsNEW 399 | 400 | 401 |
166 |
205 |
206 | ) : (isIOS ? (
207 |
209 |
250 |
281 | )
282 | }
283 |
284 | export function HeadDownloadLinksTabs (
285 | props: { activeRelease: any, setActiveRelease: any }
286 | ) {
287 | const { activeRelease, setActiveRelease } = props
288 |
289 | return (
290 |
251 |
252 | {activeIcon}
253 |
254 |
255 |
275 |
276 |
277 |
278 |
279 |
280 | -
291 | {releases.map(([label, icon]: any) => {
292 | if (typeof icon === 'function') {
293 | icon = icon()
294 | }
295 |
296 | const isActive = activeRelease[0] === label
297 |
298 | return (
299 |
- { 302 | setActiveRelease([label, icon]) 303 | }} 304 | key={label} 305 | tabIndex={isActive ? 0 : -1} 306 | role="tab" 307 | aria-controls={label} 308 | id={'tab-' + label} 309 | aria-selected={isActive} 310 | onKeyDown={navigateTabs} 311 | > 312 | 313 | {icon} 314 | 315 | 316 | {label} 317 | 318 | 319 | ) 320 | })} 321 |
373 | : 
387 |
388 |
389 | )
390 | case 'MacOS':
391 | return (
392 |
394 |
426 | )
427 | case 'Linux':
428 | return (
429 |
395 |
405 |
406 | Most common in Macs
407 |
408 |
409 |
410 |
411 |
421 |
422 | Macs from November 2020 and later
423 |
424 |
425 |
431 |
432 | }
435 | className="w-full sm:w-auto bg-logseq-600 px-3 py-3 sm:px-6 sm:py-4"
436 | href={_getDownloadHref('linux')}
437 | asAnchor={true}
438 | >
439 | Download Linux release
440 |
441 |
442 |
443 | You are advised to use AppImageLauncher for proper desktop integration
445 |
446 |
447 | )
448 | default:
449 | return (
450 |
451 | }
454 | className="w-full bg-logseq-600 px-3 py-3 sm:px-6 sm:py-4"
455 | href={_getDownloadHref(label.toString().toLowerCase())}
456 | asAnchor={true}
457 | >
458 | Download {label} release
459 |
460 |
461 | )
462 | }
463 | }
464 |
465 | return (
466 |
467 |
512 | )
513 | }
514 |
515 | export function DownloadsPage () {
516 | return (
517 |
468 |
483 |
484 | 469 | Download 470 | the apps. 471 |
472 | 473 |475 | 476 | Collect your thoughts and get inspired. 477 | 478 | 479 | Your train-of-thought is waiting for you! 480 | 481 |
482 |
485 | {/* Tabs/Select */}
486 | {appState.sm.get() ?
487 |
502 |
503 |
499 | {resolvePanel(activeRelease as any)}
500 |
501 |
504 |
511 |
505 | .toLowerCase()]})
509 |
510 |
518 |
539 | )
540 | }
541 |
--------------------------------------------------------------------------------
519 |
523 |
524 |
520 |
522 |
525 | {/* particles background */}
526 | {/**/}
527 |
528 |
538 |
529 |
530 |
531 |
532 |
533 |
537 |
534 |
536 |