diff --git a/package.json b/package.json index efefbd8835..5905444ec7 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "react-dom": "18.2.0", "react-intersection-observer": "9.4.4", "react-toastify": "9.1.3", + "react-wrap-balancer": "1.0.0", "rehype-autolink-headings": "6.1.1", "rehype-infer-description-meta": "1.1.0", "rehype-katex": "6.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 77855c9b3e..d53cba6e0e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -85,7 +85,7 @@ dependencies: version: 6.1.1 next: specifier: 13.4.5 - version: 13.4.5(@babel/core@7.21.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.4.5(@babel/core@7.22.5)(react-dom@18.2.0)(react@18.2.0) next-themes: specifier: 0.2.1 version: 0.2.1(next@13.4.5)(react-dom@18.2.0)(react@18.2.0) @@ -101,6 +101,9 @@ dependencies: react-toastify: specifier: 9.1.3 version: 9.1.3(react-dom@18.2.0)(react@18.2.0) + react-wrap-balancer: + specifier: 1.0.0 + version: 1.0.0(react@18.2.0) rehype-autolink-headings: specifier: 6.1.1 version: 6.1.1 @@ -314,6 +317,7 @@ packages: dependencies: '@jridgewell/gen-mapping': 0.1.1 '@jridgewell/trace-mapping': 0.3.17 + dev: true /@ampproject/remapping@2.2.1: resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==} @@ -321,29 +325,28 @@ packages: dependencies: '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.18 - dev: true /@babel/code-frame@7.21.4: resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==} engines: {node: '>=6.9.0'} dependencies: '@babel/highlight': 7.18.6 + dev: true /@babel/code-frame@7.22.5: resolution: {integrity: sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==} engines: {node: '>=6.9.0'} dependencies: '@babel/highlight': 7.22.5 - dev: true /@babel/compat-data@7.21.7: resolution: {integrity: sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==} engines: {node: '>=6.9.0'} + dev: true /@babel/compat-data@7.22.5: resolution: {integrity: sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==} engines: {node: '>=6.9.0'} - dev: true /@babel/core@7.21.0: resolution: {integrity: sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA==} @@ -366,6 +369,7 @@ packages: semver: 6.3.0 transitivePeerDependencies: - supports-color + dev: true /@babel/core@7.22.5: resolution: {integrity: sha512-SBuTAjg91A3eKOvD+bPEz3LlhHZRNu1nFOVts9lzDJTXshHTjII0BAtDS3Y2DAkdZdDKWVZGVwkDfc4Clxn1dg==} @@ -388,7 +392,6 @@ packages: semver: 6.3.0 transitivePeerDependencies: - supports-color - dev: true /@babel/generator@7.21.1: resolution: {integrity: sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==} @@ -408,6 +411,7 @@ packages: '@jridgewell/gen-mapping': 0.3.2 '@jridgewell/trace-mapping': 0.3.17 jsesc: 2.5.2 + dev: true /@babel/generator@7.22.5: resolution: {integrity: sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==} @@ -417,7 +421,6 @@ packages: '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.18 jsesc: 2.5.2 - dev: true /@babel/helper-annotate-as-pure@7.18.6: resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==} @@ -438,6 +441,7 @@ packages: browserslist: 4.21.7 lru-cache: 5.1.1 semver: 6.3.0 + dev: true /@babel/helper-compilation-targets@7.22.5(@babel/core@7.22.5): resolution: {integrity: sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==} @@ -451,7 +455,6 @@ packages: browserslist: 4.21.7 lru-cache: 5.1.1 semver: 6.3.0 - dev: true /@babel/helper-create-class-features-plugin@7.21.0(@babel/core@7.21.0): resolution: {integrity: sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==} @@ -475,11 +478,11 @@ packages: /@babel/helper-environment-visitor@7.21.5: resolution: {integrity: sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==} engines: {node: '>=6.9.0'} + dev: true /@babel/helper-environment-visitor@7.22.5: resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==} engines: {node: '>=6.9.0'} - dev: true /@babel/helper-function-name@7.21.0: resolution: {integrity: sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==} @@ -487,6 +490,7 @@ packages: dependencies: '@babel/template': 7.20.7 '@babel/types': 7.21.5 + dev: true /@babel/helper-function-name@7.22.5: resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==} @@ -494,20 +498,19 @@ packages: dependencies: '@babel/template': 7.22.5 '@babel/types': 7.22.5 - dev: true /@babel/helper-hoist-variables@7.18.6: resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.21.5 + dev: true /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.22.5 - dev: true /@babel/helper-member-expression-to-functions@7.21.0: resolution: {integrity: sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==} @@ -521,13 +524,13 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.21.5 + dev: true /@babel/helper-module-imports@7.22.5: resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.22.5 - dev: true /@babel/helper-module-transforms@7.21.5: resolution: {integrity: sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==} @@ -543,6 +546,7 @@ packages: '@babel/types': 7.21.5 transitivePeerDependencies: - supports-color + dev: true /@babel/helper-module-transforms@7.22.5: resolution: {integrity: sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==} @@ -558,7 +562,6 @@ packages: '@babel/types': 7.22.5 transitivePeerDependencies: - supports-color - dev: true /@babel/helper-optimise-call-expression@7.18.6: resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==} @@ -591,13 +594,13 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.21.5 + dev: true /@babel/helper-simple-access@7.22.5: resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.22.5 - dev: true /@babel/helper-skip-transparent-expression-wrappers@7.20.0: resolution: {integrity: sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==} @@ -611,40 +614,40 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.21.5 + dev: true /@babel/helper-split-export-declaration@7.22.5: resolution: {integrity: sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.22.5 - dev: true /@babel/helper-string-parser@7.21.5: resolution: {integrity: sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==} engines: {node: '>=6.9.0'} + dev: true /@babel/helper-string-parser@7.22.5: resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==} engines: {node: '>=6.9.0'} - dev: true /@babel/helper-validator-identifier@7.19.1: resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==} engines: {node: '>=6.9.0'} + dev: true /@babel/helper-validator-identifier@7.22.5: resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==} engines: {node: '>=6.9.0'} - dev: true /@babel/helper-validator-option@7.21.0: resolution: {integrity: sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==} engines: {node: '>=6.9.0'} + dev: true /@babel/helper-validator-option@7.22.5: resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==} engines: {node: '>=6.9.0'} - dev: true /@babel/helpers@7.21.5: resolution: {integrity: sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==} @@ -655,6 +658,7 @@ packages: '@babel/types': 7.21.5 transitivePeerDependencies: - supports-color + dev: true /@babel/helpers@7.22.5: resolution: {integrity: sha512-pSXRmfE1vzcUIDFQcSGA5Mr+GxBV9oiRKDuDxXvWQQBCh8HoIjs/2DlDB7H8smac1IVrB9/xdXj2N3Wol9Cr+Q==} @@ -665,7 +669,6 @@ packages: '@babel/types': 7.22.5 transitivePeerDependencies: - supports-color - dev: true /@babel/highlight@7.18.6: resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==} @@ -674,6 +677,7 @@ packages: '@babel/helper-validator-identifier': 7.19.1 chalk: 2.4.2 js-tokens: 4.0.0 + dev: true /@babel/highlight@7.22.5: resolution: {integrity: sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==} @@ -682,7 +686,6 @@ packages: '@babel/helper-validator-identifier': 7.22.5 chalk: 2.4.2 js-tokens: 4.0.0 - dev: true /@babel/parser@7.21.8: resolution: {integrity: sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==} @@ -690,6 +693,7 @@ packages: hasBin: true dependencies: '@babel/types': 7.21.5 + dev: true /@babel/parser@7.22.5: resolution: {integrity: sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==} @@ -697,7 +701,6 @@ packages: hasBin: true dependencies: '@babel/types': 7.22.5 - dev: true /@babel/plugin-syntax-jsx@7.18.6(@babel/core@7.21.0): resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==} @@ -761,6 +764,7 @@ packages: '@babel/code-frame': 7.21.4 '@babel/parser': 7.21.8 '@babel/types': 7.21.5 + dev: true /@babel/template@7.22.5: resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==} @@ -769,7 +773,6 @@ packages: '@babel/code-frame': 7.22.5 '@babel/parser': 7.22.5 '@babel/types': 7.22.5 - dev: true /@babel/traverse@7.21.5: resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==} @@ -787,6 +790,7 @@ packages: globals: 11.12.0 transitivePeerDependencies: - supports-color + dev: true /@babel/traverse@7.22.5: resolution: {integrity: sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==} @@ -804,7 +808,6 @@ packages: globals: 11.12.0 transitivePeerDependencies: - supports-color - dev: true /@babel/types@7.21.5: resolution: {integrity: sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==} @@ -813,6 +816,7 @@ packages: '@babel/helper-string-parser': 7.21.5 '@babel/helper-validator-identifier': 7.19.1 to-fast-properties: 2.0.0 + dev: true /@babel/types@7.22.5: resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==} @@ -821,7 +825,6 @@ packages: '@babel/helper-string-parser': 7.22.5 '@babel/helper-validator-identifier': 7.22.5 to-fast-properties: 2.0.0 - dev: true /@clerk/backend@0.23.0: resolution: {integrity: sha512-2s8tRAL9nB+aQQUofrFCDGlz2Kv7pP+lR5CvQdMKTL9nPTlUBcvYFinjO3s6q3A7dwSk81erLKwYEXZEKA8R1w==} @@ -876,7 +879,7 @@ packages: '@clerk/clerk-react': 4.20.0(react@18.2.0) '@clerk/clerk-sdk-node': 4.10.6 '@clerk/types': 3.42.0 - next: 13.4.5(@babel/core@7.21.0)(react-dom@18.2.0)(react@18.2.0) + next: 13.4.5(@babel/core@7.22.5)(react-dom@18.2.0)(react@18.2.0) path-to-regexp: 6.2.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -1645,6 +1648,7 @@ packages: dependencies: '@jridgewell/set-array': 1.1.2 '@jridgewell/sourcemap-codec': 1.4.14 + dev: true /@jridgewell/gen-mapping@0.3.2: resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==} @@ -2387,7 +2391,7 @@ packages: '@sentry/utils': 7.55.2 '@sentry/webpack-plugin': 1.20.0 chalk: 3.0.0 - next: 13.4.5(@babel/core@7.21.0)(react-dom@18.2.0)(react@18.2.0) + next: 13.4.5(@babel/core@7.22.5)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 rollup: 2.78.0 stacktrace-parser: 0.1.10 @@ -6276,12 +6280,12 @@ packages: react: '*' react-dom: '*' dependencies: - next: 13.4.5(@babel/core@7.21.0)(react-dom@18.2.0)(react@18.2.0) + next: 13.4.5(@babel/core@7.22.5)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) dev: false - /next@13.4.5(@babel/core@7.21.0)(react-dom@18.2.0)(react@18.2.0): + /next@13.4.5(@babel/core@7.22.5)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-pfNsRLVM9e5Y1/z02VakJRfD6hMQkr24FaN2xc9GbcZDBxoOgiNAViSg5cXwlWCoMhtm4U315D7XYhgOr96Q3Q==} engines: {node: '>=16.8.0'} hasBin: true @@ -6306,7 +6310,7 @@ packages: postcss: 8.4.14 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - styled-jsx: 5.1.1(@babel/core@7.21.0)(react@18.2.0) + styled-jsx: 5.1.1(@babel/core@7.22.5)(react@18.2.0) watchpack: 2.4.0 zod: 3.21.4 optionalDependencies: @@ -7298,6 +7302,14 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /react-wrap-balancer@1.0.0(react@18.2.0): + resolution: {integrity: sha512-yjDH+I8WGyDfh95gKhX/6ckfSBAltwQkxiYxtLPlyIRQNUVSjvz1uHR6Hpy+zHyOkJQw6GEC5RPglA41QXvzyw==} + peerDependencies: + react: '>=16.8.0 || ^17.0.0 || ^18' + dependencies: + react: 18.2.0 + dev: false + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -7998,7 +8010,7 @@ packages: inline-style-parser: 0.1.1 dev: false - /styled-jsx@5.1.1(@babel/core@7.21.0)(react@18.2.0): + /styled-jsx@5.1.1(@babel/core@7.22.5)(react@18.2.0): resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==} engines: {node: '>= 12.0.0'} peerDependencies: @@ -8011,7 +8023,7 @@ packages: babel-plugin-macros: optional: true dependencies: - '@babel/core': 7.21.0 + '@babel/core': 7.22.5 client-only: 0.0.1 react: 18.2.0 dev: false diff --git a/src/app/notes/Paper.tsx b/src/app/notes/Paper.tsx new file mode 100644 index 0000000000..f6cea61f29 --- /dev/null +++ b/src/app/notes/Paper.tsx @@ -0,0 +1,16 @@ +import clsx from 'clsx' + +export const Paper: Component = ({ children }) => { + return ( +
+ {children} +
+ ) +} diff --git a/src/app/notes/[id]/layout.tsx b/src/app/notes/[id]/layout.tsx index 0d85ee266a..61a5439d48 100644 --- a/src/app/notes/[id]/layout.tsx +++ b/src/app/notes/[id]/layout.tsx @@ -1,8 +1,12 @@ +import RemoveMarkdown from 'remove-markdown' import type { Metadata } from 'next' +import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' import { queries } from '~/queries/definition' import { getQueryClient } from '~/utils/query-client.server' +import { Paper } from '../Paper' + export const generateMetadata = async ({ params, }: { @@ -14,9 +18,30 @@ export const generateMetadata = async ({ const { data } = await getQueryClient().fetchQuery( queries.note.byNid(params.id), ) + const { title, images } = data + const description = RemoveMarkdown(data.text).slice(0, 100) + const ogImage = images?.length + ? { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + url: images[0].src!, + } + : undefined return { - title: data.title, - } + title, + description, + openGraph: { + title, + description, + images: ogImage, + type: 'article', + }, + twitter: { + images: ogImage, + title, + description, + card: 'summary_large_image', + }, + } satisfies Metadata } catch { return {} } @@ -28,5 +53,9 @@ export default async ( }>, ) => { await getQueryClient().prefetchQuery(queries.note.byNid(props.params.id)) - return <>{props.children} + return ( + + {props.children} + + ) } diff --git a/src/app/notes/[id]/loading.tsx b/src/app/notes/[id]/loading.tsx new file mode 100644 index 0000000000..80b0c91211 --- /dev/null +++ b/src/app/notes/[id]/loading.tsx @@ -0,0 +1,3 @@ +import { Loading } from '~/components/ui/loading' + +export default () => diff --git a/src/app/notes/[id]/page.tsx b/src/app/notes/[id]/page.tsx index b6e057482e..4068607a5a 100644 --- a/src/app/notes/[id]/page.tsx +++ b/src/app/notes/[id]/page.tsx @@ -1,6 +1,7 @@ 'use client' import { useEffect } from 'react' +import { Balancer } from 'react-wrap-balancer' import dayjs from 'dayjs' import { useParams } from 'next/navigation' @@ -36,7 +37,7 @@ const PageImpl = () => { }, [note?.nid, note?.title, note?.topic?.name]) if (!note) { - return + return } // const mardownResult = parseMarkdown(note.text ?? '') @@ -53,21 +54,19 @@ const PageImpl = () => { return (
-
-
- - - -
-

- {data?.data?.title} +

+ {note.title}

+ + + +
- + diff --git a/src/app/notes/error.tsx b/src/app/notes/error.tsx index 1f635a0993..211a08f40c 100644 --- a/src/app/notes/error.tsx +++ b/src/app/notes/error.tsx @@ -1,5 +1,7 @@ 'use client' +import { Paper } from './Paper' + const isRequestError = (error: Error) => { return error.message.startsWith(`Request failed with status code`) } @@ -25,16 +27,18 @@ export default ({ error, reset }: { error: Error; reset: () => void }) => { ) } return ( -
-

Something went wrong!

- -
+ +
+

Something went wrong!

+ +
+
) } diff --git a/src/app/notes/layout.tsx b/src/app/notes/layout.tsx index 880b1c2196..69ab4d5a7e 100644 --- a/src/app/notes/layout.tsx +++ b/src/app/notes/layout.tsx @@ -17,16 +17,7 @@ export default async (props: PropsWithChildren) => { > -
- {props.children} -
+ {props.children} diff --git a/src/app/notes/page.tsx b/src/app/notes/page.tsx index 99983cd3f9..80b7382be4 100644 --- a/src/app/notes/page.tsx +++ b/src/app/notes/page.tsx @@ -8,6 +8,8 @@ import { Loading } from '~/components/ui/loading' import { queries } from '~/queries/definition' import { apiClient } from '~/utils/request' +import { Paper } from './Paper' + export default () => { const { data } = useQuery( ['note', 'latest'], @@ -36,5 +38,9 @@ export default () => { } }, [data]) - return + return ( + + + + ) } diff --git a/src/components/layout/header/config.ts b/src/components/layout/header/config.ts index d31e4368bd..0df5e1b2d3 100644 --- a/src/components/layout/header/config.ts +++ b/src/components/layout/header/config.ts @@ -34,25 +34,21 @@ export const headerMenuConfig: IHeaderMenu[] = [ subMenu: [], }, { - title: '文', + title: '水文', path: '/posts', type: 'Post', subMenu: [], icon: h(IcTwotoneSignpost), }, { - title: '记', + title: '手记', type: 'Note', path: '/notes', icon: h(FaSolidFeatherAlt), }, + { - title: '言', - path: '/says', - icon: h(FaSolidComments), - }, - { - title: '览', + title: '速览', icon: h(FaSolidHistory), path: '/timeline', subMenu: [ @@ -74,25 +70,30 @@ export const headerMenuConfig: IHeaderMenu[] = [ ], }, { - title: '友', + title: '友链', icon: h(FaSolidUserFriends), path: '/friends', }, { - title: '诉', + title: '之言', icon: h(FaSolidComment), path: '/recently', }, { - title: '码', + title: '项目', icon: h(MdiFlask), path: '/projects', }, { - title: '趣', + title: '其他', icon: h(FaSolidCircleNotch), path: '/favorite/music', subMenu: [ + { + title: '一言', + path: '/says', + icon: h(FaSolidComments), + }, { title: '听歌', icon: h(RiNeteaseCloudMusicLine), diff --git a/src/components/layout/header/internal/HeaderContent.tsx b/src/components/layout/header/internal/HeaderContent.tsx index 7eef7f733e..51843d5c88 100644 --- a/src/components/layout/header/internal/HeaderContent.tsx +++ b/src/components/layout/header/internal/HeaderContent.tsx @@ -52,6 +52,7 @@ const ForDesktop: Component = ({ className }) => { ) const { config: headerMenuConfig } = useHeaderConfig() + const pathname = usePathname() return ( { >
    {headerMenuConfig.map((section) => { - return + return ( + + ) })}
@@ -77,17 +87,18 @@ const ForDesktop: Component = ({ className }) => { const HeaderMenuItem = memo<{ section: IHeaderMenu -}>(({ section }) => { - const pathname = usePathname() + isActive: boolean +}>(({ section, isActive }) => { const href = section.path - const isActive = pathname === href || pathname.startsWith(`${href}/`) + return ( ) }) +HeaderMenuItem.displayName = 'HeaderMenuItem' const MenuPopover: Component<{ subMenu: IHeaderMenu['subMenu'] @@ -143,6 +155,7 @@ const MenuPopover: Component<{ ) }) +MenuPopover.displayName = 'MenuPopover' function AnimatedItem({ href, diff --git a/src/components/ui/loading/index.tsx b/src/components/ui/loading/index.tsx index 4462fb367b..a6026dc52e 100644 --- a/src/components/ui/loading/index.tsx +++ b/src/components/ui/loading/index.tsx @@ -1,6 +1,5 @@ import React from 'react' -import { useIsClient } from '~/hooks/common/use-is-client' import { clsxm } from '~/utils/helper' export type LoadingProps = { @@ -14,8 +13,6 @@ export const Loading: Component = ({ className, useDefaultLoadingText = false, }) => { - const isClient = useIsClient() - if (!isClient) return null const nextLoadingText = useDefaultLoadingText ? defaultLoadingText : loadingText diff --git a/src/components/ui/markdown/renderers/paragraph.tsx b/src/components/ui/markdown/renderers/paragraph.tsx index 0f3fe2c775..5c09ac860f 100644 --- a/src/components/ui/markdown/renderers/paragraph.tsx +++ b/src/components/ui/markdown/renderers/paragraph.tsx @@ -8,7 +8,7 @@ export const MParagraph: FC< const { children, ...other } = props const { className, ...rest } = other return ( -

+

{children}

) diff --git a/src/components/ui/transition/BottomToUpTransitionView.tsx b/src/components/ui/transition/BottomToUpTransitionView.tsx index eecc098b92..c23e67a133 100644 --- a/src/components/ui/transition/BottomToUpTransitionView.tsx +++ b/src/components/ui/transition/BottomToUpTransitionView.tsx @@ -4,7 +4,7 @@ import { createTransitionView } from './factor' export const BottomToUpTransitionView = createTransitionView({ from: { - translateY: '3rem', + translateY: 50, opacity: 0, }, to: { diff --git a/src/hooks/common/use-is-client.ts b/src/hooks/common/use-is-client.ts index 6d2c465622..fc5066bb33 100644 --- a/src/hooks/common/use-is-client.ts +++ b/src/hooks/common/use-is-client.ts @@ -1,3 +1,5 @@ +'use client' + import { useEffect, useState } from 'react' export const useIsClient = () => {