silberengel
/
jumble
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: support kind 20

imwald
codytseng 1 year ago
parent
4205e32d0f
commit
4343765aba
30 changed files with 1221 additions and 712 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 597
      package-lock.json
  2. 3
      package.json
  3. 44
      src/components/Content/index.tsx
  4. 35
      src/components/Image/index.tsx
  5. 43
      src/components/ImageCarousel/index.tsx
  6. 71
      src/components/ImageGallery/index.tsx
  7. 190
      src/components/Nip22ReplyNoteList/index.tsx
  8. 2
      src/components/Note/index.tsx
  9. 83
      src/components/NoteList/index.tsx
  10. 44
      src/components/NotificationList/index.tsx
  11. 48
      src/components/PictureContent/index.tsx
  12. 53
      src/components/PictureNote/index.tsx
  13. 31
      src/components/PictureNoteCard/index.tsx
  14. 41
      src/components/PostEditor/PostContent.tsx
  15. 6
      src/components/ProfileBanner/index.tsx
  16. 36
      src/components/SimpleMasonryGrid/index.tsx
  17. 3
      src/components/UserAvatar/index.tsx
  18. 10
      src/components/WebPreview/index.tsx
  19. 260
      src/components/ui/carousel.tsx
  20. 5
      src/constants.ts
  21. 7
      src/i18n/en.ts
  22. 7
      src/i18n/zh.ts
  23. 86
      src/lib/draft-event.ts
  24. 78
      src/lib/event.ts
  25. 2
      src/lib/link.ts
  26. 7
      src/lib/tag.ts
  27. 18
      src/lib/url.ts
  28. 28
      src/pages/secondary/NotePage/index.tsx
  29. 2
      src/pages/secondary/ProfilePage/index.tsx
  30. 1
      tailwind.config.js

597
package-lock.json generated
Unescape View File

@ -9,7 +9,6 @@ @@ -9,7 +9,6 @@
"version": "0.1.0",
"license": "MIT",
"dependencies": {
"@nextui-org/image": "^2.2.3",
"@noble/hashes": "^1.6.1",
"@radix-ui/react-alert-dialog": "^1.1.4",
"@radix-ui/react-avatar": "^1.1.2",
@ -29,7 +28,7 @@ @@ -29,7 +28,7 @@
"cmdk": "^1.0.0",
"dataloader": "^2.2.3",
"dayjs": "^1.11.13",
"framer-motion": "^11.15.0",
"embla-carousel-react": "^8.5.1",
"i18next": "^24.2.0",
"lru-cache": "^11.0.2",
"lucide-react": "^0.469.0",
@ -2105,57 +2104,6 @@ @@ -2105,57 +2104,6 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
},
"node_modules/@formatjs/ecma402-abstract": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.1.tgz",
"integrity": "sha512-Ip9uV+/MpLXWRk03U/GzeJMuPeOXpJBSB5V1tjA6kJhvqssye5J5LoYLc7Z5IAHb7nR62sRoguzrFiVCP/hnzw==",
"peer": true,
"dependencies": {
"@formatjs/fast-memoize": "2.2.5",
"@formatjs/intl-localematcher": "0.5.9",
"decimal.js": "10",
"tslib": "2"
}
},
"node_modules/@formatjs/fast-memoize": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.5.tgz",
"integrity": "sha512-6PoewUMrrcqxSoBXAOJDiW1m+AmkrAj0RiXnOMD59GRaswjXhm3MDhgepXPBgonc09oSirAJTsAggzAGQf6A6g==",
"peer": true,
"dependencies": {
"tslib": "2"
}
},
"node_modules/@formatjs/icu-messageformat-parser": {
"version": "2.9.7",
"resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.9.7.tgz",
"integrity": "sha512-cuEHyRM5VqLQobANOjtjlgU7+qmk9Q3fDQuBiRRJ3+Wp3ZoZhpUPtUfuimZXsir6SaI2TaAJ+SLo9vLnV5QcbA==",
"peer": true,
"dependencies": {
"@formatjs/ecma402-abstract": "2.3.1",
"@formatjs/icu-skeleton-parser": "1.8.11",
"tslib": "2"
}
},
"node_modules/@formatjs/icu-skeleton-parser": {
"version": "1.8.11",
"resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.11.tgz",
"integrity": "sha512-8LlHHE/yL/zVJZHAX3pbKaCjZKmBIO6aJY1mkVh4RMSEu/2WRZ4Ysvv3kKXJ9M8RJLBHdnk1/dUQFdod1Dt7Dw==",
"peer": true,
"dependencies": {
"@formatjs/ecma402-abstract": "2.3.1",
"tslib": "2"
}
},
"node_modules/@formatjs/intl-localematcher": {
"version": "0.5.9",
"resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.9.tgz",
"integrity": "sha512-8zkGu/sv5euxbjfZ/xmklqLyDGQSxsLqg8XOq88JW3cmJtzhCP8EtSJXlaKZnVO4beEaoiT9wj4eIoCQ9smwxA==",
"peer": true,
"dependencies": {
"tslib": "2"
}
},
"node_modules/@humanfs/core": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@ -2217,43 +2165,6 @@ @@ -2217,43 +2165,6 @@
"url": "https://github.com/sponsors/nzakas"
}
},
"node_modules/@internationalized/date": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.6.0.tgz",
"integrity": "sha512-+z6ti+CcJnRlLHok/emGEsWQhe7kfSmEW+/6qCzvKY67YPh7YOBfvc7+/+NXq+zJlbArg30tYpqLjNgcAYv2YQ==",
"peer": true,
"dependencies": {
"@swc/helpers": "^0.5.0"
}
},
"node_modules/@internationalized/message": {
"version": "3.1.6",
"resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.6.tgz",
"integrity": "sha512-JxbK3iAcTIeNr1p0WIFg/wQJjIzJt9l/2KNY/48vXV7GRGZSv3zMxJsce008fZclk2cDC8y0Ig3odceHO7EfNQ==",
"peer": true,
"dependencies": {
"@swc/helpers": "^0.5.0",
"intl-messageformat": "^10.1.0"
}
},
"node_modules/@internationalized/number": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.0.tgz",
"integrity": "sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==",
"peer": true,
"dependencies": {
"@swc/helpers": "^0.5.0"
}
},
"node_modules/@internationalized/string": {
"version": "3.2.5",
"resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.5.tgz",
"integrity": "sha512-rKs71Zvl2OKOHM+mzAFMIyqR5hI1d1O6BBkMK2/lkfg3fkmVh9Eeg0awcA8W2WqYqDOv6a86DIOlFpggwLtbuw==",
"peer": true,
"dependencies": {
"@swc/helpers": "^0.5.0"
}
},
"node_modules/@isaacs/cliui": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@ -2323,138 +2234,6 @@ @@ -2323,138 +2234,6 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@nextui-org/image": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/@nextui-org/image/-/image-2.2.3.tgz",
"integrity": "sha512-erd+c7uA4FRoOOdwS6di97VVJSBbs8mXv9cOY2kZHU830e2//TKlNaE4nC7xR9ApFEAtfXjoRzSyUCIlyXmD9Q==",
"dependencies": {
"@nextui-org/react-utils": "2.1.1",
"@nextui-org/shared-utils": "2.1.1",
"@nextui-org/use-image": "2.1.1"
},
"peerDependencies": {
"@nextui-org/system": ">=2.4.0",
"@nextui-org/theme": ">=2.4.0",
"react": ">=18 || >=19.0.0-rc.0",
"react-dom": ">=18 || >=19.0.0-rc.0"
}
},
"node_modules/@nextui-org/react-rsc-utils": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@nextui-org/react-rsc-utils/-/react-rsc-utils-2.1.1.tgz",
"integrity": "sha512-9uKH1XkeomTGaswqlGKt0V0ooUev8mPXtKJolR+6MnpvBUrkqngw1gUGF0bq/EcCCkks2+VOHXZqFT6x9hGkQQ==",
"peerDependencies": {
"react": ">=18 || >=19.0.0-rc.0"
}
},
"node_modules/@nextui-org/react-utils": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@nextui-org/react-utils/-/react-utils-2.1.1.tgz",
"integrity": "sha512-cN3Z0b2bV6Nf0CYD4imsGdXbHMQqad8KivltpBv1ItbI1/FSTAv9AHTKSzDE15hd/UwOGYt3Qm7I6tWzqov55w==",
"dependencies": {
"@nextui-org/react-rsc-utils": "2.1.1",
"@nextui-org/shared-utils": "2.1.1"
},
"peerDependencies": {
"react": ">=18 || >=19.0.0-rc.0"
}
},
"node_modules/@nextui-org/shared-utils": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@nextui-org/shared-utils/-/shared-utils-2.1.1.tgz",
"integrity": "sha512-qE8gZO63GqUX1ljOi/4PlwGzE84dhUS3zFIq+10/N6ePAaNjM4DwtL4ocucG3abCz4iRUueYKLIxTO2+eYyAfw=="
},
"node_modules/@nextui-org/system": {
"version": "2.4.4",
"resolved": "https://registry.npmjs.org/@nextui-org/system/-/system-2.4.4.tgz",
"integrity": "sha512-ldlUYq7VprTEC2s3LaMxQh7S7Xeyy6DYoKkOML9XHJBgSgVXCMr5QyoxvIkO2XRl5nu6KWn2QA1vjtj2xiMjRw==",
"peer": true,
"dependencies": {
"@internationalized/date": "3.6.0",
"@nextui-org/react-utils": "2.1.1",
"@nextui-org/system-rsc": "2.3.4",
"@react-aria/i18n": "3.12.4",
"@react-aria/overlays": "3.24.0",
"@react-aria/utils": "3.26.0",
"@react-stately/utils": "3.10.5",
"@react-types/datepicker": "3.9.0"
},
"peerDependencies": {
"framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
"react": ">=18 || >=19.0.0-rc.0",
"react-dom": ">=18 || >=19.0.0-rc.0"
}
},
"node_modules/@nextui-org/system-rsc": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/@nextui-org/system-rsc/-/system-rsc-2.3.4.tgz",
"integrity": "sha512-Y6OLFO7diYnUMe5ffDPt6sIqCaah7FOqRaJ3ZQ/We8gE8AgHnyNQxWllLtRzBqaCiIheHLo7dTMed1FFmb775A==",
"peer": true,
"dependencies": {
"@react-types/shared": "3.26.0",
"clsx": "^1.2.1"
},
"peerDependencies": {
"@nextui-org/theme": ">=2.4.0",
"react": ">=18 || >=19.0.0-rc.0"
}
},
"node_modules/@nextui-org/system-rsc/node_modules/clsx": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
"peer": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@nextui-org/theme": {
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/@nextui-org/theme/-/theme-2.4.3.tgz",
"integrity": "sha512-QH9ps5NpenWU966INdGbdvZOWWUEGqxrLM2vyqkSRq+A65YON4Jhg/x1xWcSX0SJECNhoNZLh5mt6jp3jH5k8Q==",
"peer": true,
"dependencies": {
"@nextui-org/shared-utils": "2.1.1",
"clsx": "^1.2.1",
"color": "^4.2.3",
"color2k": "^2.0.2",
"deepmerge": "4.3.1",
"flat": "^5.0.2",
"tailwind-merge": "^2.5.2",
"tailwind-variants": "^0.1.20"
},
"peerDependencies": {
"tailwindcss": ">=3.4.0"
}
},
"node_modules/@nextui-org/theme/node_modules/clsx": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
"peer": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@nextui-org/use-image": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@nextui-org/use-image/-/use-image-2.1.1.tgz",
"integrity": "sha512-Tsfy9pA4AQBAj7rFIEonB9L/hXGg7M5agaAZNBUVpdp47NjcEwLpcU2XncKh8AhkQku0p4JOyMC9usRGV3z06Q==",
"dependencies": {
"@nextui-org/use-safe-layout-effect": "2.1.1"
},
"peerDependencies": {
"react": ">=18 || >=19.0.0-rc.0"
}
},
"node_modules/@nextui-org/use-safe-layout-effect": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@nextui-org/use-safe-layout-effect/-/use-safe-layout-effect-2.1.1.tgz",
"integrity": "sha512-p0vezi2eujC3rxlMQmCLQlc8CNbp+GQgk6YcSm7Rk10isWVlUII5T1L3y+rcFYdgTPObCkCngPPciNQhD7Lf7g==",
"peerDependencies": {
"react": ">=18 || >=19.0.0-rc.0"
}
},
"node_modules/@noble/ciphers": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-0.5.3.tgz",
@ -3478,212 +3257,6 @@ @@ -3478,212 +3257,6 @@
"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
"integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
},
"node_modules/@react-aria/focus": {
"version": "3.19.0",
"resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.19.0.tgz",
"integrity": "sha512-hPF9EXoUQeQl1Y21/rbV2H4FdUR2v+4/I0/vB+8U3bT1CJ+1AFj1hc/rqx2DqEwDlEwOHN+E4+mRahQmlybq0A==",
"peer": true,
"dependencies": {
"@react-aria/interactions": "^3.22.5",
"@react-aria/utils": "^3.26.0",
"@react-types/shared": "^3.26.0",
"@swc/helpers": "^0.5.0",
"clsx": "^2.0.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-aria/i18n": {
"version": "3.12.4",
"resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.12.4.tgz",
"integrity": "sha512-j9+UL3q0Ls8MhXV9gtnKlyozq4aM95YywXqnmJtzT1rYeBx7w28hooqrWkCYLfqr4OIryv1KUnPiCSLwC2OC7w==",
"peer": true,
"dependencies": {
"@internationalized/date": "^3.6.0",
"@internationalized/message": "^3.1.6",
"@internationalized/number": "^3.6.0",
"@internationalized/string": "^3.2.5",
"@react-aria/ssr": "^3.9.7",
"@react-aria/utils": "^3.26.0",
"@react-types/shared": "^3.26.0",
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-aria/interactions": {
"version": "3.22.5",
"resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.5.tgz",
"integrity": "sha512-kMwiAD9E0TQp+XNnOs13yVJghiy8ET8L0cbkeuTgNI96sOAp/63EJ1FSrDf17iD8sdjt41LafwX/dKXW9nCcLQ==",
"peer": true,
"dependencies": {
"@react-aria/ssr": "^3.9.7",
"@react-aria/utils": "^3.26.0",
"@react-types/shared": "^3.26.0",
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-aria/overlays": {
"version": "3.24.0",
"resolved": "https://registry.npmjs.org/@react-aria/overlays/-/overlays-3.24.0.tgz",
"integrity": "sha512-0kAXBsMNTc/a3M07tK9Cdt/ea8CxTAEJ223g8YgqImlmoBBYAL7dl5G01IOj67TM64uWPTmZrOklBchHWgEm3A==",
"peer": true,
"dependencies": {
"@react-aria/focus": "^3.19.0",
"@react-aria/i18n": "^3.12.4",
"@react-aria/interactions": "^3.22.5",
"@react-aria/ssr": "^3.9.7",
"@react-aria/utils": "^3.26.0",
"@react-aria/visually-hidden": "^3.8.18",
"@react-stately/overlays": "^3.6.12",
"@react-types/button": "^3.10.1",
"@react-types/overlays": "^3.8.11",
"@react-types/shared": "^3.26.0",
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-aria/ssr": {
"version": "3.9.7",
"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
"integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
"peer": true,
"dependencies": {
"@swc/helpers": "^0.5.0"
},
"engines": {
"node": ">= 12"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-aria/utils": {
"version": "3.26.0",
"resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.26.0.tgz",
"integrity": "sha512-LkZouGSjjQ0rEqo4XJosS4L3YC/zzQkfRM3KoqK6fUOmUJ9t0jQ09WjiF+uOoG9u+p30AVg3TrZRUWmoTS+koQ==",
"peer": true,
"dependencies": {
"@react-aria/ssr": "^3.9.7",
"@react-stately/utils": "^3.10.5",
"@react-types/shared": "^3.26.0",
"@swc/helpers": "^0.5.0",
"clsx": "^2.0.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-aria/visually-hidden": {
"version": "3.8.18",
"resolved": "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.8.18.tgz",
"integrity": "sha512-l/0igp+uub/salP35SsNWq5mGmg3G5F5QMS1gDZ8p28n7CgjvzyiGhJbbca7Oxvaw1HRFzVl9ev+89I7moNnFQ==",
"peer": true,
"dependencies": {
"@react-aria/interactions": "^3.22.5",
"@react-aria/utils": "^3.26.0",
"@react-types/shared": "^3.26.0",
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-stately/overlays": {
"version": "3.6.12",
"resolved": "https://registry.npmjs.org/@react-stately/overlays/-/overlays-3.6.12.tgz",
"integrity": "sha512-QinvZhwZgj8obUyPIcyURSCjTZlqZYRRCS60TF8jH8ZpT0tEAuDb3wvhhSXuYA3Xo9EHLwvLjEf3tQKKdAQArw==",
"peer": true,
"dependencies": {
"@react-stately/utils": "^3.10.5",
"@react-types/overlays": "^3.8.11",
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-stately/utils": {
"version": "3.10.5",
"resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.5.tgz",
"integrity": "sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==",
"peer": true,
"dependencies": {
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-types/button": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.10.1.tgz",
"integrity": "sha512-XTtap8o04+4QjPNAshFWOOAusUTxQlBjU2ai0BTVLShQEjHhRVDBIWsI2B2FKJ4KXT6AZ25llaxhNrreWGonmA==",
"peer": true,
"dependencies": {
"@react-types/shared": "^3.26.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-types/calendar": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/@react-types/calendar/-/calendar-3.5.0.tgz",
"integrity": "sha512-O3IRE7AGwAWYnvJIJ80cOy7WwoJ0m8GtX/qSmvXQAjC4qx00n+b5aFNBYAQtcyc3RM5QpW6obs9BfwGetFiI8w==",
"peer": true,
"dependencies": {
"@internationalized/date": "^3.6.0",
"@react-types/shared": "^3.26.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-types/datepicker": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/@react-types/datepicker/-/datepicker-3.9.0.tgz",
"integrity": "sha512-dbKL5Qsm2MQwOTtVQdOcKrrphcXAqDD80WLlSQrBLg+waDuuQ7H+TrvOT0thLKloNBlFUGnZZfXGRHINpih/0g==",
"peer": true,
"dependencies": {
"@internationalized/date": "^3.6.0",
"@react-types/calendar": "^3.5.0",
"@react-types/overlays": "^3.8.11",
"@react-types/shared": "^3.26.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-types/overlays": {
"version": "3.8.11",
"resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.11.tgz",
"integrity": "sha512-aw7T0rwVI3EuyG5AOaEIk8j7dZJQ9m34XAztXJVZ/W2+4pDDkLDbJ/EAPnuo2xGYRGhowuNDn4tDju01eHYi+w==",
"peer": true,
"dependencies": {
"@react-types/shared": "^3.26.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-types/shared": {
"version": "3.26.0",
"resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.26.0.tgz",
"integrity": "sha512-6FuPqvhmjjlpEDLTiYx29IJCbCNWPlsyO+ZUmCUXzhUv2ttShOXfw8CmeHWHftT/b2KweAWuzqSlfeXPR76jpw==",
"peer": true,
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@rollup/plugin-node-resolve": {
"version": "15.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz",
@ -4103,15 +3676,6 @@ @@ -4103,15 +3676,6 @@
"string.prototype.matchall": "^4.0.6"
}
},
"node_modules/@swc/helpers": {
"version": "0.5.15",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
"integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
"peer": true,
"dependencies": {
"tslib": "^2.8.0"
}
},
"node_modules/@types/babel__core": {
"version": "7.20.5",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@ -5321,19 +4885,6 @@ @@ -5321,19 +4885,6 @@
}
}
},
"node_modules/color": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
"peer": true,
"dependencies": {
"color-convert": "^2.0.1",
"color-string": "^1.9.0"
},
"engines": {
"node": ">=12.5.0"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@ -5350,22 +4901,6 @@ @@ -5350,22 +4901,6 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"node_modules/color-string": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
"peer": true,
"dependencies": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
}
},
"node_modules/color2k": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz",
"integrity": "sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==",
"peer": true
},
"node_modules/commander": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@ -5525,12 +5060,6 @@ @@ -5525,12 +5060,6 @@
}
}
},
"node_modules/decimal.js": {
"version": "10.4.3",
"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
"integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
"peer": true
},
"node_modules/deep-is": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@ -5541,6 +5070,7 @@ @@ -5541,6 +5070,7 @@
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -5634,6 +5164,31 @@ @@ -5634,6 +5164,31 @@
"integrity": "sha512-Lf3++DumRE/QmweGjU+ZcKqQ+3bKkU/qjaKYhIJKEOhgIO9Xs6IiAQFkfFoj+RhgDk4LUeNsLo6plExHqSyu6Q==",
"dev": true
},
"node_modules/embla-carousel": {
"version": "8.5.1",
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.5.1.tgz",
"integrity": "sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A=="
},
"node_modules/embla-carousel-react": {
"version": "8.5.1",
"resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.5.1.tgz",
"integrity": "sha512-z9Y0K84BJvhChXgqn2CFYbfEi6AwEr+FFVVKm/MqbTQ2zIzO1VQri6w67LcfpVF0AjbhwVMywDZqY4alYkjW5w==",
"dependencies": {
"embla-carousel": "8.5.1",
"embla-carousel-reactive-utils": "8.5.1"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
}
},
"node_modules/embla-carousel-reactive-utils": {
"version": "8.5.1",
"resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.5.1.tgz",
"integrity": "sha512-n7VSoGIiiDIc4MfXF3ZRTO59KDp820QDuyBDGlt5/65+lumPHxX2JLz0EZ23hZ4eg4vZGUXwMkYv02fw2JVo/A==",
"peerDependencies": {
"embla-carousel": "8.5.1"
}
},
"node_modules/emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@ -6121,15 +5676,6 @@ @@ -6121,15 +5676,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/flat": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
"integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
"peer": true,
"bin": {
"flat": "cli.js"
}
},
"node_modules/flat-cache": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
@ -6186,32 +5732,6 @@ @@ -6186,32 +5732,6 @@
"url": "https://github.com/sponsors/rawify"
}
},
"node_modules/framer-motion": {
"version": "11.15.0",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz",
"integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==",
"dependencies": {
"motion-dom": "^11.14.3",
"motion-utils": "^11.14.3",
"tslib": "^2.4.0"
},
"peerDependencies": {
"@emotion/is-prop-valid": "*",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/is-prop-valid": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/fs-extra": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@ -6646,18 +6166,6 @@ @@ -6646,18 +6166,6 @@
"node": ">= 0.4"
}
},
"node_modules/intl-messageformat": {
"version": "10.7.10",
"resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.10.tgz",
"integrity": "sha512-hp7iejCBiJdW3zmOe18FdlJu8U/JsADSDiBPQhfdSeI8B9POtvPRvPh3nMlvhYayGMKLv6maldhR7y3Pf1vkpw==",
"peer": true,
"dependencies": {
"@formatjs/ecma402-abstract": "2.3.1",
"@formatjs/fast-memoize": "2.2.5",
"@formatjs/icu-messageformat-parser": "2.9.7",
"tslib": "2"
}
},
"node_modules/is-array-buffer": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@ -6675,12 +6183,6 @@ @@ -6675,12 +6183,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
"peer": true
},
"node_modules/is-async-function": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@ -7370,16 +6872,6 @@ @@ -7370,16 +6872,6 @@
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/motion-dom": {
"version": "11.14.3",
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
"integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA=="
},
"node_modules/motion-utils": {
"version": "11.14.3",
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
"integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ=="
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -8535,15 +8027,6 @@ @@ -8535,15 +8027,6 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
"peer": true,
"dependencies": {
"is-arrayish": "^0.3.1"
}
},
"node_modules/smob": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz",
@ -8855,32 +8338,6 @@ @@ -8855,32 +8338,6 @@
"url": "https://github.com/sponsors/dcastil"
}
},
"node_modules/tailwind-variants": {
"version": "0.1.20",
"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.1.20.tgz",
"integrity": "sha512-AMh7x313t/V+eTySKB0Dal08RHY7ggYK0MSn/ad8wKWOrDUIzyiWNayRUm2PIJ4VRkvRnfNuyRuKbLV3EN+ewQ==",
"peer": true,
"dependencies": {
"tailwind-merge": "^1.14.0"
},
"engines": {
"node": ">=16.x",
"pnpm": ">=7.x"
},
"peerDependencies": {
"tailwindcss": "*"
}
},
"node_modules/tailwind-variants/node_modules/tailwind-merge": {
"version": "1.14.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
"integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
"peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/dcastil"
}
},
"node_modules/tailwindcss": {
"version": "3.4.17",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",

3
package.json
Unescape View File

@ -19,7 +19,6 @@ @@ -19,7 +19,6 @@
"preview": "vite preview"
},
"dependencies": {
"@nextui-org/image": "^2.2.3",
"@noble/hashes": "^1.6.1",
"@radix-ui/react-alert-dialog": "^1.1.4",
"@radix-ui/react-avatar": "^1.1.2",
@ -39,7 +38,7 @@ @@ -39,7 +38,7 @@
"cmdk": "^1.0.0",
"dataloader": "^2.2.3",
"dayjs": "^1.11.13",
"framer-motion": "^11.15.0",
"embla-carousel-react": "^8.5.1",
"i18next": "^24.2.0",
"lru-cache": "^11.0.2",
"lucide-react": "^0.469.0",

44
src/components/Content/index.tsx
Unescape View File

@ -1,4 +1,6 @@ @@ -1,4 +1,6 @@
import { isNsfwEvent } from '@/lib/event'
import { isNsfwEvent, isPictureEvent } from '@/lib/event'
import { extractImetaUrlFromTag } from '@/lib/tag'
import { isImage, isVideo } from '@/lib/url'
import { cn } from '@/lib/utils'
import { Event } from 'nostr-tools'
import { memo } from 'react'
@ -14,6 +16,7 @@ import { @@ -14,6 +16,7 @@ import {
import ImageGallery from '../ImageGallery'
import VideoPlayer from '../VideoPlayer'
import WebPreview from '../WebPreview'
import { URL_REGEX } from '@/constants'
const Content = memo(
({
@ -25,7 +28,7 @@ const Content = memo( @@ -25,7 +28,7 @@ const Content = memo(
className?: string
size?: 'normal' | 'small'
}) => {
const { content, images, videos, embeddedNotes, lastNonMediaUrl } = preprocess(event.content)
const { content, images, videos, embeddedNotes, lastNonMediaUrl } = preprocess(event)
const isNsfw = isNsfwEvent(event)
const nodes = embedded(content, [
embeddedNormalUrlRenderer,
@ -39,7 +42,7 @@ const Content = memo( @@ -39,7 +42,7 @@ const Content = memo(
if (images.length) {
nodes.push(
<ImageGallery
className={`w-fit ${size === 'small' ? 'mt-1' : 'mt-2'}`}
className={`${size === 'small' ? 'mt-1' : 'mt-2'}`}
key={`image-gallery-${event.id}`}
images={images}
isNsfw={isNsfw}
@ -95,9 +98,9 @@ const Content = memo( @@ -95,9 +98,9 @@ const Content = memo(
Content.displayName = 'Content'
export default Content
function preprocess(content: string) {
const urlRegex = /(https?:\/\/[^\s"']+)/g
const urls = content.match(urlRegex) || []
function preprocess(event: Event) {
const content = event.content
const urls = content.match(URL_REGEX) || []
let lastNonMediaUrl: string | undefined
let c = content
@ -116,6 +119,15 @@ function preprocess(content: string) { @@ -116,6 +119,15 @@ function preprocess(content: string) {
}
})
if (isPictureEvent(event)) {
event.tags.forEach((tag) => {
const imageUrl = extractImetaUrlFromTag(tag)
if (imageUrl) {
images.push(imageUrl)
}
})
}
const embeddedNotes: string[] = []
const embeddedNoteRegex = /nostr:(note1[a-z0-9]{58}|nevent1[a-z0-9]+|naddr1[a-z0-9]+)/g
;(c.match(embeddedNoteRegex) || []).forEach((note) => {
@ -123,23 +135,7 @@ function preprocess(content: string) { @@ -123,23 +135,7 @@ function preprocess(content: string) {
embeddedNotes.push(note)
})
return { content: c, images, videos, embeddedNotes, lastNonMediaUrl }
}
c = c.replace(/\n{3,}/g, '\n\n').trim()
function isImage(url: string) {
try {
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.heic', '.svg']
return imageExtensions.some((ext) => new URL(url).pathname.toLowerCase().endsWith(ext))
} catch {
return false
}
}
function isVideo(url: string) {
try {
const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov']
return videoExtensions.some((ext) => new URL(url).pathname.toLowerCase().endsWith(ext))
} catch {
return false
}
return { content: c, images, videos, embeddedNotes, lastNonMediaUrl }
}

35
src/components/Image/index.tsx
Unescape View File

@ -0,0 +1,35 @@ @@ -0,0 +1,35 @@
import { Skeleton } from '@/components/ui/skeleton'
import { cn } from '@/lib/utils'
import { HTMLAttributes, useState } from 'react'
export default function Image({
src,
alt,
className = '',
classNames = {},
...props
}: HTMLAttributes<HTMLDivElement> & {
src: string
alt?: string
classNames?: {
wrapper?: string
}
}) {
const [isLoading, setIsLoading] = useState(true)
return (
<div className={cn('relative', classNames.wrapper ?? '')} {...props}>
{isLoading && <Skeleton className={cn('absolute inset-0', className)} />}
<img
src={src}
alt={alt}
className={cn(
'object-cover transition-opacity duration-700',
isLoading ? 'opacity-0' : 'opacity-100',
className
)}
onLoad={() => setIsLoading(false)}
/>
</div>
)
}

43
src/components/ImageCarousel/index.tsx
Unescape View File

@ -0,0 +1,43 @@ @@ -0,0 +1,43 @@
import { Carousel, CarouselContent, CarouselItem } from '@/components/ui/carousel'
import { useState } from 'react'
import Lightbox from 'yet-another-react-lightbox'
import Zoom from 'yet-another-react-lightbox/plugins/zoom'
import Image from '../Image'
import NsfwOverlay from '../NsfwOverlay'
export function ImageCarousel({ images, isNsfw = false }: { images: string[]; isNsfw?: boolean }) {
const [index, setIndex] = useState(-1)
const handlePhotoClick = (event: React.MouseEvent, current: number) => {
event.preventDefault()
setIndex(current)
}
return (
<>
<Carousel className="w-full">
<CarouselContent>
{images.map((url, index) => (
<CarouselItem key={index}>
<Image src={url} onClick={(e) => handlePhotoClick(e, index)} />
</CarouselItem>
))}
</CarouselContent>
</Carousel>
<Lightbox
index={index}
slides={images.map((src) => ({ src }))}
plugins={[Zoom]}
open={index >= 0}
close={() => setIndex(-1)}
controller={{
closeOnBackdropClick: true,
closeOnPullUp: true,
closeOnPullDown: true
}}
styles={{ toolbar: { paddingTop: '2.25rem' } }}
/>
{isNsfw && <NsfwOverlay className="rounded-lg" />}
</>
)
}

71
src/components/ImageGallery/index.tsx
Unescape View File

@ -1,9 +1,9 @@ @@ -1,9 +1,9 @@
import { Image } from '@nextui-org/image'
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
import { cn } from '@/lib/utils'
import { useState } from 'react'
import { useScreenSize } from '@/providers/ScreenSizeProvider'
import { ReactNode, useState } from 'react'
import Lightbox from 'yet-another-react-lightbox'
import Zoom from 'yet-another-react-lightbox/plugins/zoom'
import Image from '../Image'
import NsfwOverlay from '../NsfwOverlay'
export default function ImageGallery({
@ -17,32 +17,70 @@ export default function ImageGallery({ @@ -17,32 +17,70 @@ export default function ImageGallery({
isNsfw?: boolean
size?: 'normal' | 'small'
}) {
const { isSmallScreen } = useScreenSize()
const [index, setIndex] = useState(-1)
const handlePhotoClick = (event: React.MouseEvent, current: number) => {
event.stopPropagation()
event.preventDefault()
setIndex(current)
}
return (
<div className={cn('relative', className)} onClick={(e) => e.stopPropagation()}>
<ScrollArea className="w-full">
<div className="flex space-x-2">
{images.map((src, index) => (
let imageContent: ReactNode | null = null
if (images.length === 1) {
imageContent = (
<Image
key={index}
className={cn(
'rounded-lg cursor-pointer z-0 object-cover',
size === 'small' ? 'h-[15vh]' : 'h-[30vh]'
)}
className={cn('rounded-lg cursor-pointer', size === 'small' ? 'h-[15vh]' : 'h-[30vh]')}
src={images[0]}
onClick={(e) => handlePhotoClick(e, 0)}
/>
)
} else if (size === 'small') {
imageContent = (
<div className="grid grid-cols-4 gap-2">
{images.map((src, i) => (
<Image
key={i}
className="rounded-lg cursor-pointer aspect-square"
src={src}
onClick={(e) => handlePhotoClick(e, index)}
removeWrapper
onClick={(e) => handlePhotoClick(e, i)}
/>
))}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
)
} else if (isSmallScreen && (images.length === 2 || images.length === 4)) {
imageContent = (
<div className="grid grid-cols-2 gap-2">
{images.map((src, i) => (
<Image
key={i}
className="rounded-lg cursor-pointer aspect-square"
src={src}
onClick={(e) => handlePhotoClick(e, i)}
/>
))}
</div>
)
} else {
imageContent = (
<div className="grid grid-cols-3 gap-2">
{images.map((src, i) => (
<Image
key={i}
className="rounded-lg cursor-pointer aspect-square"
src={src}
onClick={(e) => handlePhotoClick(e, i)}
/>
))}
</div>
)
}
return (
<div className={cn('relative w-fit max-w-full', className)}>
{imageContent}
<div onClick={(e) => e.stopPropagation()}>
<Lightbox
index={index}
slides={images.map((src) => ({ src }))}
@ -56,6 +94,7 @@ export default function ImageGallery({ @@ -56,6 +94,7 @@ export default function ImageGallery({
}}
styles={{ toolbar: { paddingTop: '2.25rem' } }}
/>
</div>
{isNsfw && <NsfwOverlay className="rounded-lg" />}
</div>
)

190
src/components/Nip22ReplyNoteList/index.tsx
Unescape View File

@ -0,0 +1,190 @@ @@ -0,0 +1,190 @@
import { Separator } from '@/components/ui/separator'
import { COMMENT_EVENT_KIND } from '@/constants'
import { tagNameEquals } from '@/lib/tag'
import { cn } from '@/lib/utils'
import { useNostr } from '@/providers/NostrProvider'
import { useNoteStats } from '@/providers/NoteStatsProvider'
import client from '@/services/client.service'
import dayjs from 'dayjs'
import { Event as NEvent } from 'nostr-tools'
import { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ReplyNote from '../ReplyNote'
import { isCommentEvent } from '@/lib/event'
const LIMIT = 100
export default function Nip22ReplyNoteList({
event,
className
}: {
event: NEvent
className?: string
}) {
const { t } = useTranslation()
const { pubkey } = useNostr()
const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
const [until, setUntil] = useState<number | undefined>(() => dayjs().unix())
const [replies, setReplies] = useState<NEvent[]>([])
const [replyMap, setReplyMap] = useState<
Record<string, { event: NEvent; level: number; parent?: NEvent } | undefined>
>({})
const [loading, setLoading] = useState<boolean>(false)
const [highlightReplyId, setHighlightReplyId] = useState<string | undefined>(undefined)
const { updateNoteReplyCount } = useNoteStats()
const replyRefs = useRef<Record<string, HTMLDivElement | null>>({})
const bottomRef = useRef<HTMLDivElement | null>(null)
useEffect(() => {
const handleEventPublished = (data: Event) => {
const customEvent = data as CustomEvent<NEvent>
const evt = customEvent.detail
if (
isCommentEvent(evt) &&
evt.tags.some(([tagName, tagValue]) => tagName === 'E' && tagValue === event.id)
) {
onNewReply(evt)
}
}
client.addEventListener('eventPublished', handleEventPublished)
return () => {
client.removeEventListener('eventPublished', handleEventPublished)
}
}, [event])
useEffect(() => {
if (loading) return
const init = async () => {
setLoading(true)
setReplies([])
try {
const relayList = await client.fetchRelayList(event.pubkey)
const { closer, timelineKey } = await client.subscribeTimeline(
relayList.read.slice(0, 5),
{
'#E': [event.id],
kinds: [COMMENT_EVENT_KIND],
limit: LIMIT
},
{
onEvents: (evts, eosed) => {
setReplies(evts.reverse())
if (eosed) {
setLoading(false)
setUntil(evts.length >= LIMIT ? evts[evts.length - 1].created_at - 1 : undefined)
}
},
onNew: (evt) => {
onNewReply(evt)
}
}
)
setTimelineKey(timelineKey)
return closer
} catch {
setLoading(false)
}
return
}
const promise = init()
return () => {
promise.then((closer) => closer?.())
}
}, [event])
useEffect(() => {
updateNoteReplyCount(event.id, replies.length)
const replyMap: Record<string, { event: NEvent; level: number; parent?: NEvent } | undefined> =
{}
for (const reply of replies) {
const parentEventId = reply.tags.find(tagNameEquals('e'))?.[1]
if (parentEventId && parentEventId !== event.id) {
const parentReplyInfo = replyMap[parentEventId]
const level = parentReplyInfo ? parentReplyInfo.level + 1 : 1
replyMap[reply.id] = { event: reply, level, parent: parentReplyInfo?.event }
continue
}
replyMap[reply.id] = { event: reply, level: 1 }
continue
}
setReplyMap(replyMap)
}, [replies, event.id, updateNoteReplyCount])
const loadMore = async () => {
if (loading || !until || !timelineKey) return
setLoading(true)
const events = await client.loadMoreTimeline(timelineKey, until, LIMIT)
const olderReplies = events.reverse()
if (olderReplies.length > 0) {
setReplies((pre) => [...olderReplies, ...pre])
}
setUntil(events.length ? events[events.length - 1].created_at - 1 : undefined)
setLoading(false)
}
const onNewReply = (evt: NEvent) => {
setReplies((pre) => {
if (pre.some((reply) => reply.id === evt.id)) return pre
return [...pre, evt]
})
if (evt.pubkey === pubkey) {
setTimeout(() => {
if (bottomRef.current) {
bottomRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
}
highlightReply(evt.id, false)
}, 100)
}
}
const highlightReply = (eventId: string, scrollTo = true) => {
if (scrollTo) {
const ref = replyRefs.current[eventId]
if (ref) {
ref.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
}
}
setHighlightReplyId(eventId)
setTimeout(() => {
setHighlightReplyId((pre) => (pre === eventId ? undefined : pre))
}, 1500)
}
return (
<>
<div
className={`text-sm text-center text-muted-foreground ${!loading ? 'hover:text-foreground cursor-pointer' : ''}`}
onClick={loadMore}
>
{loading ? t('loading...') : until ? t('load more older replies') : null}
</div>
{replies.length > 0 && (loading || until) && <Separator className="my-2" />}
<div className={cn('mb-4', className)}>
{replies.map((reply) => {
const info = replyMap[reply.id]
return (
<div ref={(el) => (replyRefs.current[reply.id] = el)} key={reply.id}>
<ReplyNote
event={reply}
parentEvent={info?.parent}
onClickParent={highlightReply}
highlight={highlightReplyId === reply.id}
/>
</div>
)
})}
</div>
{replies.length === 0 && !loading && !until && (
<div className="text-sm text-center text-muted-foreground">{t('no replies')}</div>
)}
<div ref={bottomRef} />
</>
)
}

2
src/components/Note/index.tsx
Unescape View File

@ -62,7 +62,7 @@ export default function Note({ @@ -62,7 +62,7 @@ export default function Note({
)}
<Content className="mt-2" event={event} />
{!hideStats && (
<NoteStats className="mt-3 sm:mt-4" event={event} fetchIfNotExisting={fetchNoteStats} />
<NoteStats className="mt-3" event={event} fetchIfNotExisting={fetchNoteStats} />
)}
</div>
)

83
src/components/NoteList/index.tsx
Unescape View File

@ -1,8 +1,10 @@ @@ -1,8 +1,10 @@
import { Button } from '@/components/ui/button'
import { PICTURE_EVENT_KIND } from '@/constants'
import { useFetchRelayInfos } from '@/hooks'
import { isReplyNoteEvent } from '@/lib/event'
import { cn } from '@/lib/utils'
import { useNostr } from '@/providers/NostrProvider'
import { useScreenSize } from '@/providers/ScreenSizeProvider'
import client from '@/services/client.service'
import dayjs from 'dayjs'
import { Event, Filter, kinds } from 'nostr-tools'
@ -10,10 +12,14 @@ import { useEffect, useMemo, useRef, useState } from 'react' @@ -10,10 +12,14 @@ import { useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import PullToRefresh from 'react-simple-pull-to-refresh'
import NoteCard from '../NoteCard'
import PictureNoteCard from '../PictureNoteCard'
import SimpleMasonryGrid from '../SimpleMasonryGrid'
const NORMAL_RELAY_LIMIT = 100
const ALGO_RELAY_LIMIT = 500
type TListMode = 'posts' | 'postsAndReplies' | 'pictures'
export default function NoteList({
relayUrls,
filter = {},
@ -24,6 +30,7 @@ export default function NoteList({ @@ -24,6 +30,7 @@ export default function NoteList({
className?: string
}) {
const { t } = useTranslation()
const { isSmallScreen } = useScreenSize()
const { signEvent, checkLogin } = useNostr()
const { isFetching: isFetchingRelayInfo, areAlgoRelays } = useFetchRelayInfos([...relayUrls])
const [refreshCount, setRefreshCount] = useState(0)
@ -32,15 +39,23 @@ export default function NoteList({ @@ -32,15 +39,23 @@ export default function NoteList({
const [newEvents, setNewEvents] = useState<Event[]>([])
const [hasMore, setHasMore] = useState<boolean>(true)
const [refreshing, setRefreshing] = useState(true)
const [displayReplies, setDisplayReplies] = useState(false)
const [listMode, setListMode] = useState<TListMode>('posts')
const bottomRef = useRef<HTMLDivElement | null>(null)
const isPictures = useMemo(() => listMode === 'pictures', [listMode])
const noteFilter = useMemo(() => {
if (isPictures) {
return {
kinds: [PICTURE_EVENT_KIND],
limit: areAlgoRelays ? ALGO_RELAY_LIMIT : NORMAL_RELAY_LIMIT,
...filter
}
}
return {
kinds: [kinds.ShortTextNote, kinds.Repost],
kinds: [kinds.ShortTextNote, kinds.Repost, PICTURE_EVENT_KIND],
limit: areAlgoRelays ? ALGO_RELAY_LIMIT : NORMAL_RELAY_LIMIT,
...filter
}
}, [JSON.stringify(filter), areAlgoRelays])
}, [JSON.stringify(filter), areAlgoRelays, isPictures])
useEffect(() => {
if (isFetchingRelayInfo || relayUrls.length === 0) return
@ -151,16 +166,7 @@ export default function NoteList({ @@ -151,16 +166,7 @@ export default function NoteList({
return (
<div className={cn('space-y-2 sm:space-y-2', className)}>
<DisplayRepliesSwitch displayReplies={displayReplies} setDisplayReplies={setDisplayReplies} />
<div className="space-y-2 sm:space-y-2">
{newEvents.filter((event) => displayReplies || !isReplyNoteEvent(event)).length > 0 && (
<div className="flex justify-center w-full max-sm:mt-2">
<Button size="lg" onClick={showNewEvents}>
{t('show new notes')}
</Button>
</div>
)}
<ListModeSwitch listMode={listMode} setListMode={setListMode} />
<PullToRefresh
onRefresh={async () => {
setRefreshCount((count) => count + 1)
@ -168,15 +174,32 @@ export default function NoteList({ @@ -168,15 +174,32 @@ export default function NoteList({
}}
pullingContent=""
>
<div className="space-y-2 sm:space-y-2">
{newEvents.filter((event) => listMode !== 'posts' || !isReplyNoteEvent(event)).length >
0 && (
<div className="flex justify-center w-full max-sm:mt-2">
<Button size="lg" onClick={showNewEvents}>
{t('show new notes')}
</Button>
</div>
)}
{isPictures ? (
<SimpleMasonryGrid
className="px-2 sm:px-4"
columnCount={isSmallScreen ? 2 : 3}
items={events.map((event) => (
<PictureNoteCard key={event.id} className="w-full" event={event} />
))}
/>
) : (
<div>
{events
.filter((event) => displayReplies || !isReplyNoteEvent(event))
.filter((event) => listMode === 'postsAndReplies' || !isReplyNoteEvent(event))
.map((event) => (
<NoteCard key={event.id} className="w-full" event={event} />
))}
</div>
</PullToRefresh>
</div>
)}
<div className="text-center text-sm text-muted-foreground">
{hasMore || refreshing ? (
<div ref={bottomRef}>{t('loading...')}</div>
@ -191,15 +214,17 @@ export default function NoteList({ @@ -191,15 +214,17 @@ export default function NoteList({
)}
</div>
</div>
</PullToRefresh>
</div>
)
}
function DisplayRepliesSwitch({
displayReplies,
setDisplayReplies
function ListModeSwitch({
listMode,
setListMode
}: {
displayReplies: boolean
setDisplayReplies: (value: boolean) => void
listMode: TListMode
setListMode: (listMode: TListMode) => void
}) {
const { t } = useTranslation()
@ -207,20 +232,26 @@ function DisplayRepliesSwitch({ @@ -207,20 +232,26 @@ function DisplayRepliesSwitch({
<div>
<div className="flex">
<div
className={`w-1/2 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${displayReplies ? 'text-muted-foreground' : ''}`}
onClick={() => setDisplayReplies(false)}
className={`w-1/3 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${listMode === 'posts' ? '' : 'text-muted-foreground'}`}
onClick={() => setListMode('posts')}
>
{t('Notes')}
</div>
<div
className={`w-1/2 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${displayReplies ? '' : 'text-muted-foreground'}`}
onClick={() => setDisplayReplies(true)}
className={`w-1/3 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${listMode === 'postsAndReplies' ? '' : 'text-muted-foreground'}`}
onClick={() => setListMode('postsAndReplies')}
>
{t('Notes & Replies')}
</div>
<div
className={`w-1/3 text-center py-2 font-semibold clickable cursor-pointer rounded-lg ${listMode === 'pictures' ? '' : 'text-muted-foreground'}`}
onClick={() => setListMode('pictures')}
>
{t('Pictures')}
</div>
</div>
<div
className={`w-1/2 px-4 sm:px-6 transition-transform duration-500 ${displayReplies ? 'translate-x-full' : ''}`}
className={`w-1/3 px-4 sm:px-6 transition-transform duration-500 ${listMode === 'postsAndReplies' ? 'translate-x-full' : listMode === 'pictures' ? 'translate-x-[200%]' : ''} `}
>
<div className="w-full h-1 bg-primary rounded-full" />
</div>

44
src/components/NotificationList/index.tsx
Unescape View File

@ -1,3 +1,4 @@ @@ -1,3 +1,4 @@
import { COMMENT_EVENT_KIND, PICTURE_EVENT_KIND } from '@/constants'
import { useFetchEvent } from '@/hooks'
import { toNote } from '@/lib/link'
import { tagNameEquals } from '@/lib/tag'
@ -5,7 +6,7 @@ import { useSecondaryPage } from '@/PageManager' @@ -5,7 +6,7 @@ import { useSecondaryPage } from '@/PageManager'
import { useNostr } from '@/providers/NostrProvider'
import client from '@/services/client.service'
import dayjs from 'dayjs'
import { Heart, MessageCircle, Repeat } from 'lucide-react'
import { Heart, MessageCircle, Repeat, ThumbsUp } from 'lucide-react'
import { Event, kinds, nip19, validateEvent } from 'nostr-tools'
import { useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -41,7 +42,7 @@ export default function NotificationList() { @@ -41,7 +42,7 @@ export default function NotificationList() {
: relayList.read.concat(client.getDefaultRelayUrls()).slice(0, 4),
{
'#p': [pubkey],
kinds: [kinds.ShortTextNote, kinds.Repost, kinds.Reaction],
kinds: [kinds.ShortTextNote, kinds.Repost, kinds.Reaction, COMMENT_EVENT_KIND],
limit: LIMIT
},
{
@ -147,6 +148,9 @@ function NotificationItem({ notification }: { notification: Event }) { @@ -147,6 +148,9 @@ function NotificationItem({ notification }: { notification: Event }) {
if (notification.kind === kinds.Repost) {
return <RepostNotification notification={notification} />
}
if (notification.kind === COMMENT_EVENT_KIND) {
return <CommentNotification notification={notification} />
}
return null
}
@ -162,7 +166,9 @@ function ReactionNotification({ notification }: { notification: Event }) { @@ -162,7 +166,9 @@ function ReactionNotification({ notification }: { notification: Event }) {
: undefined
}, [notification])
const { event } = useFetchEvent(bech32Id)
if (!event || !bech32Id || event.kind !== kinds.ShortTextNote) return null
if (!event || !bech32Id || ![kinds.ShortTextNote, PICTURE_EVENT_KIND].includes(event.kind)) {
return null
}
return (
<div
@ -172,6 +178,7 @@ function ReactionNotification({ notification }: { notification: Event }) { @@ -172,6 +178,7 @@ function ReactionNotification({ notification }: { notification: Event }) {
<div className="flex gap-2 items-center flex-1">
<UserAvatar userId={notification.pubkey} size="small" />
<Heart size={24} className="text-red-400" />
<div>{notification.content === '+' ? <ThumbsUp size={14} /> : notification.content}</div>
<ContentPreview event={event} />
</div>
<div className="text-muted-foreground">
@ -228,8 +235,37 @@ function RepostNotification({ notification }: { notification: Event }) { @@ -228,8 +235,37 @@ function RepostNotification({ notification }: { notification: Event }) {
)
}
function CommentNotification({ notification }: { notification: Event }) {
const { push } = useSecondaryPage()
const rootEventId = notification.tags.find(tagNameEquals('E'))?.[1]
const rootPubkey = notification.tags.find(tagNameEquals('P'))?.[1]
const rootKind = notification.tags.find(tagNameEquals('K'))?.[1]
if (
!rootEventId ||
!rootPubkey ||
!rootKind ||
![kinds.ShortTextNote, PICTURE_EVENT_KIND].includes(parseInt(rootKind))
) {
return null
}
return (
<div
className="flex gap-2 items-center cursor-pointer py-2"
onClick={() => push(toNote({ id: rootEventId, pubkey: rootPubkey }))}
>
<UserAvatar userId={notification.pubkey} size="small" />
<MessageCircle size={24} className="text-blue-400" />
<ContentPreview event={notification} />
<div className="text-muted-foreground">
<FormattedTimestamp timestamp={notification.created_at} short />
</div>
</div>
)
}
function ContentPreview({ event }: { event?: Event }) {
if (!event || event.kind !== kinds.ShortTextNote) return null
if (!event) return null
return <div className="truncate flex-1 w-0">{event.content}</div>
}

48
src/components/PictureContent/index.tsx
Unescape View File

@ -0,0 +1,48 @@ @@ -0,0 +1,48 @@
import { extractImetaUrlFromTag } from '@/lib/tag'
import { cn } from '@/lib/utils'
import { Event } from 'nostr-tools'
import { memo, ReactNode } from 'react'
import {
embedded,
embeddedHashtagRenderer,
embeddedNormalUrlRenderer,
embeddedNostrNpubRenderer,
embeddedNostrProfileRenderer,
embeddedWebsocketUrlRenderer
} from '../Embedded'
import { ImageCarousel } from '../ImageCarousel'
import { isNsfwEvent } from '@/lib/event'
const PictureContent = memo(({ event, className }: { event: Event; className?: string }) => {
const images: string[] = []
event.tags.forEach((tag) => {
const imageUrl = extractImetaUrlFromTag(tag)
if (imageUrl) {
images.push(imageUrl)
}
})
const isNsfw = isNsfwEvent(event)
const nodes: ReactNode[] = [
<ImageCarousel key={`image-gallery-${event.id}`} images={images} isNsfw={isNsfw} />
]
nodes.push(
<div className="px-4">
{embedded(event.content, [
embeddedNormalUrlRenderer,
embeddedWebsocketUrlRenderer,
embeddedHashtagRenderer,
embeddedNostrNpubRenderer,
embeddedNostrProfileRenderer
])}
</div>
)
return (
<div className={cn('text-wrap break-words whitespace-pre-wrap space-y-2', className)}>
{nodes}
</div>
)
})
PictureContent.displayName = 'PictureContent'
export default PictureContent

53
src/components/PictureNote/index.tsx
Unescape View File

@ -0,0 +1,53 @@ @@ -0,0 +1,53 @@
import { getUsingClient } from '@/lib/event'
import { Event } from 'nostr-tools'
import { useMemo } from 'react'
import { FormattedTimestamp } from '../FormattedTimestamp'
import NoteStats from '../NoteStats'
import UserAvatar from '../UserAvatar'
import Username from '../Username'
import PictureContent from '../PictureContent'
export default function PictureNote({
event,
className,
hideStats = false,
fetchNoteStats = false
}: {
event: Event
className?: string
hideStats?: boolean
fetchNoteStats?: boolean
}) {
const usingClient = useMemo(() => getUsingClient(event), [event])
return (
<div className={className}>
<div className="px-4 flex items-center space-x-2">
<UserAvatar userId={event.pubkey} />
<div className="flex-1 w-0">
<div className="flex gap-2 items-center">
<Username
userId={event.pubkey}
className="font-semibold flex"
skeletonClassName="h-4"
/>
{usingClient && (
<div className="text-xs text-muted-foreground truncate">using {usingClient}</div>
)}
</div>
<div className="text-xs text-muted-foreground line-clamp-1">
<FormattedTimestamp timestamp={event.created_at} />
</div>
</div>
</div>
<PictureContent className="mt-2" event={event} />
{!hideStats && (
<NoteStats
className="px-4 mt-3 sm:mt-4"
event={event}
fetchIfNotExisting={fetchNoteStats}
/>
)}
</div>
)
}

31
src/components/PictureNoteCard/index.tsx
Unescape View File

@ -0,0 +1,31 @@ @@ -0,0 +1,31 @@
import { extractFirstPictureFromPictureEvent } from '@/lib/event'
import { toNote } from '@/lib/link'
import { cn } from '@/lib/utils'
import { useSecondaryPage } from '@/PageManager'
import { Event } from 'nostr-tools'
import Image from '../Image'
import UserAvatar from '../UserAvatar'
import Username from '../Username'
export default function PictureNoteCard({
event,
className
}: {
event: Event
className?: string
}) {
const { push } = useSecondaryPage()
const firstImage = extractFirstPictureFromPictureEvent(event)
if (!firstImage) return null
return (
<div className={cn('space-y-1 cursor-pointer', className)} onClick={() => push(toNote(event))}>
<Image className="rounded-lg w-full aspect-[6/8]" src={firstImage} />
<div className="line-clamp-2 px-2">{event.content}</div>
<div className="flex items-center gap-2 px-2">
<UserAvatar userId={event.pubkey} size="xSmall" />
<Username userId={event.pubkey} className="text-sm text-muted-foreground truncate" />
</div>
</div>
)
}

41
src/components/PostEditor/PostContent.tsx
Unescape View File

@ -4,16 +4,21 @@ import { Switch } from '@/components/ui/switch' @@ -4,16 +4,21 @@ import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import { StorageKey } from '@/constants'
import { useToast } from '@/hooks/use-toast'
import { createShortTextNoteDraftEvent } from '@/lib/draft-event'
import {
createCommentDraftEvent,
createPictureNoteDraftEvent,
createShortTextNoteDraftEvent
} from '@/lib/draft-event'
import { useNostr } from '@/providers/NostrProvider'
import client from '@/services/client.service'
import { ChevronDown, LoaderCircle } from 'lucide-react'
import { Event } from 'nostr-tools'
import { Event, kinds } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Mentions from './Mentions'
import Preview from './Preview'
import Uploader from './Uploader'
import { extractImagesFromContent } from '@/lib/event'
export default function PostContent({
defaultContent = '',
@ -31,12 +36,19 @@ export default function PostContent({ @@ -31,12 +36,19 @@ export default function PostContent({
const [posting, setPosting] = useState(false)
const [showMoreOptions, setShowMoreOptions] = useState(false)
const [addClientTag, setAddClientTag] = useState(false)
const [isPictureNote, setIsPictureNote] = useState(false)
const [hasImages, setHasImages] = useState(false)
const canPost = !!content && !posting
useEffect(() => {
setAddClientTag(window.localStorage.getItem(StorageKey.ADD_CLIENT_TAG) === 'true')
}, [])
useEffect(() => {
const { images } = extractImagesFromContent(content)
setHasImages(!!images && images.length > 0)
}, [content])
const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setContent(e.target.value)
}
@ -56,7 +68,15 @@ export default function PostContent({ @@ -56,7 +68,15 @@ export default function PostContent({
const relayList = await client.fetchRelayList(parentEvent.pubkey)
additionalRelayUrls.push(...relayList.read.slice(0, 5))
}
const draftEvent = await createShortTextNoteDraftEvent(content, {
if (isPictureNote && !hasImages) {
throw new Error(t('Picture note requires images'))
}
const draftEvent =
isPictureNote && !parentEvent && hasImages
? await createPictureNoteDraftEvent(content, { addClientTag })
: parentEvent && parentEvent.kind !== kinds.ShortTextNote
? await createCommentDraftEvent(content, parentEvent, { addClientTag })
: await createShortTextNoteDraftEvent(content, {
parentEvent,
addClientTag
})
@ -151,6 +171,21 @@ export default function PostContent({ @@ -151,6 +171,21 @@ export default function PostContent({
<div className="text-muted-foreground text-xs">
{t('Show others this was sent via Jumble')}
</div>
{!parentEvent && (
<>
<div className="flex items-center space-x-2">
<Label htmlFor="picture-note">{t('Picture note')}</Label>
<Switch
id="picture-note"
checked={isPictureNote}
onCheckedChange={setIsPictureNote}
/>
</div>
<div className="text-muted-foreground text-xs">
{t('A special note for picture-first clients like Olas')}
</div>
</>
)}
</div>
)}
<div className="flex gap-2 items-center justify-around sm:hidden">

6
src/components/ProfileBanner/index.tsx
Unescape View File

@ -1,7 +1,6 @@ @@ -1,7 +1,6 @@
import { Image } from '@nextui-org/image'
import { generateImageByPubkey } from '@/lib/pubkey'
import { cn } from '@/lib/utils'
import { useEffect, useMemo, useState } from 'react'
import Image from '../Image'
export default function ProfileBanner({
pubkey,
@ -27,9 +26,8 @@ export default function ProfileBanner({ @@ -27,9 +26,8 @@ export default function ProfileBanner({
<Image
src={bannerUrl}
alt={`${pubkey} banner`}
className={cn('z-0', className)}
className={className}
onError={() => setBannerUrl(defaultBanner)}
removeWrapper
/>
)
}

36
src/components/SimpleMasonryGrid/index.tsx
Unescape View File

@ -0,0 +1,36 @@ @@ -0,0 +1,36 @@
import { cn } from '@/lib/utils'
import { useMemo, ReactNode } from 'react'
export default function SimpleMasonryGrid({
items,
columnCount,
className
}: {
items: ReactNode[]
columnCount: 2 | 3
className?: string
}) {
const columns = useMemo(() => {
const newColumns: ReactNode[][] = Array.from({ length: columnCount }, () => [])
items.forEach((item, i) => {
newColumns[i % columnCount].push(item)
})
return newColumns
}, [items])
return (
<div
className={cn(
'grid',
columnCount === 2 ? 'grid-cols-2 gap-2' : 'grid-cols-3 gap-4',
className
)}
>
{columns.map((column, i) => (
<div key={i} className={columnCount === 2 ? 'space-y-2' : 'space-y-4'}>
{column}
</div>
))}
</div>
)
}

3
src/components/UserAvatar/index.tsx
Unescape View File

@ -14,6 +14,7 @@ const UserAvatarSizeCnMap = { @@ -14,6 +14,7 @@ const UserAvatarSizeCnMap = {
big: 'w-16 h-16',
normal: 'w-10 h-10',
small: 'w-7 h-7',
xSmall: 'w-5 h-5',
tiny: 'w-4 h-4'
}
@ -24,7 +25,7 @@ export default function UserAvatar({ @@ -24,7 +25,7 @@ export default function UserAvatar({
}: {
userId: string
className?: string
size?: 'large' | 'big' | 'normal' | 'small' | 'tiny'
size?: 'large' | 'big' | 'normal' | 'small' | 'xSmall' | 'tiny'
}) {
const { profile } = useFetchProfile(userId)
const defaultAvatar = useMemo(

10
src/components/WebPreview/index.tsx
Unescape View File

@ -1,8 +1,8 @@ @@ -1,8 +1,8 @@
import { useFetchWebMetadata } from '@/hooks/useFetchWebMetadata'
import { cn } from '@/lib/utils'
import { useScreenSize } from '@/providers/ScreenSizeProvider'
import { Image } from '@nextui-org/image'
import { useMemo } from 'react'
import Image from '../Image'
export default function WebPreview({
url,
@ -30,7 +30,7 @@ export default function WebPreview({ @@ -30,7 +30,7 @@ export default function WebPreview({
if (isSmallScreen && image) {
return (
<div className="rounded-lg border mt-2">
<Image src={image} className="rounded-t-lg object-cover w-full h-44" removeWrapper />
<Image src={image} className="rounded-t-lg w-full h-44" />
<div className="bg-muted p-2 w-full rounded-b-lg">
<div className="text-xs text-muted-foreground">{hostname}</div>
<div className="font-semibold line-clamp-1">{title}</div>
@ -48,11 +48,7 @@ export default function WebPreview({ @@ -48,11 +48,7 @@ export default function WebPreview({
}}
>
{image && (
<Image
src={image}
className={`rounded-l-lg object-cover ${size === 'normal' ? 'h-44' : 'h-24'}`}
removeWrapper
/>
<Image src={image} className={`rounded-l-lg ${size === 'normal' ? 'h-44' : 'h-24'}`} />
)}
<div className="flex-1 w-0 p-2">
<div className="text-xs text-muted-foreground">{hostname}</div>

260
src/components/ui/carousel.tsx
Unescape View File

@ -0,0 +1,260 @@ @@ -0,0 +1,260 @@
import * as React from "react"
import useEmblaCarousel, {
type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]
type CarouselProps = {
opts?: CarouselOptions
plugins?: CarouselPlugin
orientation?: "horizontal" | "vertical"
setApi?: (api: CarouselApi) => void
}
type CarouselContextProps = {
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
api: ReturnType<typeof useEmblaCarousel>[1]
scrollPrev: () => void
scrollNext: () => void
canScrollPrev: boolean
canScrollNext: boolean
} & CarouselProps
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
function useCarousel() {
const context = React.useContext(CarouselContext)
if (!context) {
throw new Error("useCarousel must be used within a <Carousel />")
}
return context
}
const Carousel = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
(
{
orientation = "horizontal",
opts,
setApi,
plugins,
className,
children,
...props
},
ref
) => {
const [carouselRef, api] = useEmblaCarousel(
{
...opts,
axis: orientation === "horizontal" ? "x" : "y",
},
plugins
)
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
const [canScrollNext, setCanScrollNext] = React.useState(false)
const onSelect = React.useCallback((api: CarouselApi) => {
if (!api) {
return
}
setCanScrollPrev(api.canScrollPrev())
setCanScrollNext(api.canScrollNext())
}, [])
const scrollPrev = React.useCallback(() => {
api?.scrollPrev()
}, [api])
const scrollNext = React.useCallback(() => {
api?.scrollNext()
}, [api])
const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === "ArrowLeft") {
event.preventDefault()
scrollPrev()
} else if (event.key === "ArrowRight") {
event.preventDefault()
scrollNext()
}
},
[scrollPrev, scrollNext]
)
React.useEffect(() => {
if (!api || !setApi) {
return
}
setApi(api)
}, [api, setApi])
React.useEffect(() => {
if (!api) {
return
}
onSelect(api)
api.on("reInit", onSelect)
api.on("select", onSelect)
return () => {
api?.off("select", onSelect)
}
}, [api, onSelect])
return (
<CarouselContext.Provider
value={{
carouselRef,
api: api,
opts,
orientation:
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev,
scrollNext,
canScrollPrev,
canScrollNext,
}}
>
<div
ref={ref}
onKeyDownCapture={handleKeyDown}
className={cn("relative", className)}
role="region"
aria-roledescription="carousel"
{...props}
>
{children}
</div>
</CarouselContext.Provider>
)
}
)
Carousel.displayName = "Carousel"
const CarouselContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const { carouselRef, orientation } = useCarousel()
return (
<div ref={carouselRef} className="overflow-hidden">
<div
ref={ref}
className={cn(
"flex",
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
className
)}
{...props}
/>
</div>
)
})
CarouselContent.displayName = "CarouselContent"
const CarouselItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const { orientation } = useCarousel()
return (
<div
ref={ref}
role="group"
aria-roledescription="slide"
className={cn(
"min-w-0 shrink-0 grow-0 basis-full",
orientation === "horizontal" ? "pl-4" : "pt-4",
className
)}
{...props}
/>
)
})
CarouselItem.displayName = "CarouselItem"
const CarouselPrevious = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
return (
<Button
ref={ref}
variant={variant}
size={size}
className={cn(
"absolute h-8 w-8 rounded-full",
orientation === "horizontal"
? "-left-12 top-1/2 -translate-y-1/2"
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
className
)}
disabled={!canScrollPrev}
onClick={scrollPrev}
{...props}
>
<ArrowLeft className="h-4 w-4" />
<span className="sr-only">Previous slide</span>
</Button>
)
})
CarouselPrevious.displayName = "CarouselPrevious"
const CarouselNext = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { orientation, scrollNext, canScrollNext } = useCarousel()
return (
<Button
ref={ref}
variant={variant}
size={size}
className={cn(
"absolute h-8 w-8 rounded-full",
orientation === "horizontal"
? "-right-12 top-1/2 -translate-y-1/2"
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
className
)}
disabled={!canScrollNext}
onClick={scrollNext}
{...props}
>
<ArrowRight className="h-4 w-4" />
<span className="sr-only">Next slide</span>
</Button>
)
})
CarouselNext.displayName = "CarouselNext"
export {
type CarouselApi,
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
}

5
src/constants.ts
Unescape View File

@ -14,3 +14,8 @@ export const BIG_RELAY_URLS = [ @@ -14,3 +14,8 @@ export const BIG_RELAY_URLS = [
]
export const SEARCHABLE_RELAY_URLS = ['wss://relay.nostr.band/', 'wss://search.nos.today/']
export const PICTURE_EVENT_KIND = 20
export const COMMENT_EVENT_KIND = 1111
export const URL_REGEX = /(https?:\/\/[^\s"']+)/g

7
src/i18n/en.ts
Unescape View File

@ -99,6 +99,11 @@ export default { @@ -99,6 +99,11 @@ export default {
Dark: 'Dark',
Temporary: 'Temporary',
'Choose a relay collection': 'Choose a relay collection',
'Switch account': 'Switch account'
'Switch account': 'Switch account',
Pictures: 'Pictures',
'Picture note': 'Picture note',
'A special note for picture-first clients like Olas':
'A special note for picture-first clients like Olas',
'Picture note requires images': 'Picture note requires images'
}
}

7
src/i18n/zh.ts
Unescape View File

@ -98,6 +98,11 @@ export default { @@ -98,6 +98,11 @@ export default {
Dark: '深色',
Temporary: '临时',
'Choose a relay collection': '选择一个服务器组',
'Switch account': '切换账户'
'Switch account': '切换账户',
Pictures: '图片',
'Picture note': '图片笔记',
'A special note for picture-first clients like Olas':
'一种可以在图片优先客户端 (如 Olas) 中显示的特殊笔记',
'Picture note requires images': '图片笔记需要有图片'
}
}

86
src/lib/draft-event.ts
Unescape View File

@ -1,7 +1,15 @@ @@ -1,7 +1,15 @@
import { COMMENT_EVENT_KIND, PICTURE_EVENT_KIND } from '@/constants'
import { TDraftEvent } from '@/types'
import dayjs from 'dayjs'
import { Event, kinds } from 'nostr-tools'
import { extractHashtags, extractMentions, getEventCoordinate, isReplaceable } from './event'
import {
extractCommentMentions,
extractHashtags,
extractImagesFromContent,
extractMentions,
getEventCoordinate,
isReplaceable
} from './event'
// https://github.com/nostr-protocol/nips/blob/master/25.md
export function createReactionDraftEvent(event: Event): TDraftEvent {
@ -73,3 +81,79 @@ export async function createShortTextNoteDraftEvent( @@ -73,3 +81,79 @@ export async function createShortTextNoteDraftEvent(
created_at: dayjs().unix()
}
}
export async function createPictureNoteDraftEvent(
content: string,
options: {
addClientTag?: boolean
} = {}
): Promise<TDraftEvent> {
const { pubkeys, quoteEventIds } = await extractMentions(content)
const hashtags = extractHashtags(content)
const { images, contentWithoutImages } = extractImagesFromContent(content)
if (!images || !images.length) {
throw new Error('No images found in content')
}
const tags = images
.map((image) => ['imeta', `url ${image}`])
.concat(pubkeys.map((pubkey) => ['p', pubkey]))
.concat(quoteEventIds.map((eventId) => ['q', eventId]))
.concat(hashtags.map((hashtag) => ['t', hashtag]))
if (options.addClientTag) {
tags.push(['client', 'jumble'])
}
return {
kind: PICTURE_EVENT_KIND,
content: contentWithoutImages,
tags,
created_at: dayjs().unix()
}
}
export async function createCommentDraftEvent(
content: string,
parentEvent: Event,
options: {
addClientTag?: boolean
} = {}
): Promise<TDraftEvent> {
const {
pubkeys,
quoteEventIds,
rootEventId,
rootEventKind,
rootEventPubkey,
parentEventId,
parentEventKind,
parentEventPubkey
} = await extractCommentMentions(content, parentEvent)
const hashtags = extractHashtags(content)
const tags = [
['E', rootEventId],
['K', rootEventKind.toString()],
['P', rootEventPubkey],
['e', parentEventId],
['k', parentEventKind.toString()],
['p', parentEventPubkey]
].concat(
pubkeys
.map((pubkey) => ['p', pubkey])
.concat(quoteEventIds.map((eventId) => ['q', eventId]))
.concat(hashtags.map((hashtag) => ['t', hashtag]))
)
if (options.addClientTag) {
tags.push(['client', 'jumble'])
}
return {
kind: COMMENT_EVENT_KIND,
content,
tags,
created_at: dayjs().unix()
}
}

78
src/lib/event.ts
Unescape View File

@ -1,6 +1,7 @@ @@ -1,6 +1,7 @@
import { COMMENT_EVENT_KIND, PICTURE_EVENT_KIND } from '@/constants'
import client from '@/services/client.service'
import { Event, kinds, nip19 } from 'nostr-tools'
import { isReplyETag, isRootETag, tagNameEquals } from './tag'
import { extractImetaUrlFromTag, isReplyETag, isRootETag, tagNameEquals } from './tag'
export function isNsfwEvent(event: Event) {
return event.tags.some(
@ -26,6 +27,14 @@ export function isReplyNoteEvent(event: Event) { @@ -26,6 +27,14 @@ export function isReplyNoteEvent(event: Event) {
return hasETag && !hasMarker
}
export function isCommentEvent(event: Event) {
return event.kind === COMMENT_EVENT_KIND
}
export function isPictureEvent(event: Event) {
return event.kind === PICTURE_EVENT_KIND
}
export function getParentEventId(event?: Event) {
return event?.tags.find(isReplyETag)?.[1]
}
@ -116,6 +125,54 @@ export async function extractMentions(content: string, parentEvent?: Event) { @@ -116,6 +125,54 @@ export async function extractMentions(content: string, parentEvent?: Event) {
}
}
export async function extractCommentMentions(content: string, parentEvent: Event) {
const pubkeySet = new Set<string>()
const quoteEventIdSet = new Set<string>()
const rootEventId = parentEvent.tags.find(tagNameEquals('E'))?.[1] ?? parentEvent.id
const rootEventKind = parentEvent.tags.find(tagNameEquals('K'))?.[1] ?? parentEvent.kind
const rootEventPubkey = parentEvent.tags.find(tagNameEquals('P'))?.[1] ?? parentEvent.pubkey
const parentEventId = parentEvent.id
const parentEventKind = parentEvent.kind
const parentEventPubkey = parentEvent.pubkey
const matches = content.match(
/nostr:(npub1[a-z0-9]{58}|nprofile1[a-z0-9]+|note1[a-z0-9]{58}|nevent1[a-z0-9]+)/g
)
for (const m of matches || []) {
try {
const id = m.split(':')[1]
const { type, data } = nip19.decode(id)
if (type === 'nprofile') {
pubkeySet.add(data.pubkey)
} else if (type === 'npub') {
pubkeySet.add(data)
} else if (['nevent', 'note', 'naddr'].includes(type)) {
const event = await client.fetchEvent(id)
if (event) {
pubkeySet.add(event.pubkey)
quoteEventIdSet.add(event.id)
}
}
} catch (e) {
console.error(e)
}
}
pubkeySet.add(parentEvent.pubkey)
return {
pubkeys: Array.from(pubkeySet),
quoteEventIds: Array.from(quoteEventIdSet),
rootEventId,
rootEventKind,
rootEventPubkey,
parentEventId,
parentEventKind,
parentEventPubkey
}
}
export function extractHashtags(content: string) {
const hashtags: string[] = []
const matches = content.match(/#[\p{L}\p{N}\p{M}]+/gu)
@ -127,3 +184,22 @@ export function extractHashtags(content: string) { @@ -127,3 +184,22 @@ export function extractHashtags(content: string) {
})
return hashtags
}
export function extractFirstPictureFromPictureEvent(event: Event) {
if (!isPictureEvent(event)) return null
for (const tag of event.tags) {
const url = extractImetaUrlFromTag(tag)
if (url) return url
}
return null
}
export function extractImagesFromContent(content: string) {
const images = content.match(/https?:\/\/[^\s"']+\.(jpg|jpeg|png|gif|webp|heic)/gi)
let contentWithoutImages = content
images?.forEach((url) => {
contentWithoutImages = contentWithoutImages.replace(url, '').trim()
})
contentWithoutImages = contentWithoutImages.replace(/\n{3,}/g, '\n\n').trim()
return { images, contentWithoutImages }
}

2
src/lib/link.ts
Unescape View File

@ -1,7 +1,7 @@ @@ -1,7 +1,7 @@
import { Event, nip19 } from 'nostr-tools'
export const toHome = () => '/'
export const toNote = (eventOrId: Event | string) => {
export const toNote = (eventOrId: Pick<Event, 'id' | 'pubkey'> | string) => {
if (typeof eventOrId === 'string') return `/notes/${eventOrId}`
const nevent = nip19.neventEncode({ id: eventOrId.id, author: eventOrId.pubkey })
return `/notes/${nevent}`

7
src/lib/tag.ts
Unescape View File

@ -13,3 +13,10 @@ export function isRootETag([tagName, , , marker]: string[]) { @@ -13,3 +13,10 @@ export function isRootETag([tagName, , , marker]: string[]) {
export function isMentionETag([tagName, , , marker]: string[]) {
return tagName === 'e' && marker === 'mention'
}
export function extractImetaUrlFromTag(tag: string[]) {
if (tag[0] !== 'imeta') return null
const urlItem = tag.find((item) => item.startsWith('url '))
const url = urlItem?.slice(4)
return url || null
}

18
src/lib/url.ts
Unescape View File

@ -18,3 +18,21 @@ export function normalizeUrl(url: string): string { @@ -18,3 +18,21 @@ export function normalizeUrl(url: string): string {
export function simplifyUrl(url: string): string {
return url.replace('wss://', '').replace('ws://', '').replace(/\/$/, '')
}
export function isImage(url: string) {
try {
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.heic', '.svg']
return imageExtensions.some((ext) => new URL(url).pathname.toLowerCase().endsWith(ext))
} catch {
return false
}
}
export function isVideo(url: string) {
try {
const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov']
return videoExtensions.some((ext) => new URL(url).pathname.toLowerCase().endsWith(ext))
} catch {
return false
}
}

28
src/pages/secondary/NotePage/index.tsx
Unescape View File

@ -1,5 +1,7 @@ @@ -1,5 +1,7 @@
import { useSecondaryPage } from '@/PageManager'
import Nip22ReplyNoteList from '@/components/Nip22ReplyNoteList'
import Note from '@/components/Note'
import PictureNote from '@/components/PictureNote'
import ReplyNoteList from '@/components/ReplyNoteList'
import UserAvatar from '@/components/UserAvatar'
import Username from '@/components/Username'
@ -8,14 +10,16 @@ import { Separator } from '@/components/ui/separator' @@ -8,14 +10,16 @@ import { Separator } from '@/components/ui/separator'
import { Skeleton } from '@/components/ui/skeleton'
import { useFetchEvent } from '@/hooks'
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
import { getParentEventId, getRootEventId } from '@/lib/event'
import { getParentEventId, getRootEventId, isPictureEvent } from '@/lib/event'
import { toNote } from '@/lib/link'
import { useScreenSize } from '@/providers/ScreenSizeProvider'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import NotFoundPage from '../NotFoundPage'
export default function NotePage({ id, index }: { id?: string; index?: number }) {
const { t } = useTranslation()
const { isSmallScreen } = useScreenSize()
const { event, isFetching } = useFetchEvent(id)
const parentEventId = useMemo(() => getParentEventId(event), [event])
const rootEventId = useMemo(() => getRootEventId(event), [event])
@ -31,6 +35,20 @@ export default function NotePage({ id, index }: { id?: string; index?: number }) @@ -31,6 +35,20 @@ export default function NotePage({ id, index }: { id?: string; index?: number })
}
if (!event) return <NotFoundPage />
if (isPictureEvent(event) && isSmallScreen) {
return (
<SecondaryPageLayout index={index} titlebarContent={t('Note')} displayScrollToTopButton>
<PictureNote key={`note-${event.id}`} event={event} fetchNoteStats />
<Separator className="mb-2 mt-4" />
<Nip22ReplyNoteList
key={`nip22-reply-note-list-${event.id}`}
event={event}
className="px-2"
/>
</SecondaryPageLayout>
)
}
return (
<SecondaryPageLayout index={index} titlebarContent={t('Note')} displayScrollToTopButton>
<div className="px-4">
@ -39,7 +57,15 @@ export default function NotePage({ id, index }: { id?: string; index?: number }) @@ -39,7 +57,15 @@ export default function NotePage({ id, index }: { id?: string; index?: number })
<Note key={`note-${event.id}`} event={event} fetchNoteStats />
</div>
<Separator className="mb-2 mt-4" />
{isPictureEvent(event) ? (
<Nip22ReplyNoteList
key={`nip22-reply-note-list-${event.id}`}
event={event}
className="px-2"
/>
) : (
<ReplyNoteList key={`reply-note-list-${event.id}`} event={event} className="px-2" />
)}
</SecondaryPageLayout>
)
}

2
src/pages/secondary/ProfilePage/index.tsx
Unescape View File

@ -67,7 +67,7 @@ export default function ProfilePage({ id, index }: { id?: string; index?: number @@ -67,7 +67,7 @@ export default function ProfilePage({ id, index }: { id?: string; index?: number
<ProfileBanner
banner={banner}
pubkey={pubkey}
className="w-full h-full object-cover rounded-lg"
className="w-full aspect-video object-cover rounded-lg"
/>
<Avatar className="w-24 h-24 absolute bottom-0 left-4 translate-y-1/2 border-4 border-background">
<AvatarImage src={avatar} className="object-cover object-center" />

1
tailwind.config.js
Unescape View File

@ -4,7 +4,6 @@ export default { @@ -4,7 +4,6 @@ export default {
content: [
'./index.html',
'./src/**/*.{ts,tsx}',
'./node_modules/@nextui-org/theme/dist/components/image.js'
],
theme: {
extend: {

Write Preview
Loading…
Cancel
Save