degmods/degmods.com
5
0
Fork 0
Code Issues 13 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add image gallery #28

Merged
freakoverse merged 1 commits from staging into master 2024-08-29 18:15:18 +00:00
Conversation 0 Commits 1 Files Changed 3 +86 -42
3 changed files with 86 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0b2e5c29d5 - Show all commits

21
package-lock.json generated
View File

@ -21,6 +21,7 @@
"date-fns": "3.6.0",
"dompurify": "3.1.6",
"file-saver": "2.0.5",
"fslightbox-react": "1.7.6",
"lodash": "4.17.21",
"nostr-login": "1.5.2",
"nostr-tools": "2.7.1",
@ -39,6 +40,7 @@
"devDependencies": {
"@types/dompurify": "3.0.5",
"@types/file-saver": "2.0.7",
"@types/fslightbox-react": "1.7.7",
"@types/lodash": "4.17.7",
"@types/papaparse": "5.3.14",
"@types/react": "^18.3.3",
@ -1929,6 +1931,15 @@
"resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.33.tgz",
"integrity": "sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g=="
},
"node_modules/@types/fslightbox-react": {
"version": "1.7.7",
"resolved": "https://registry.npmjs.org/@types/fslightbox-react/-/fslightbox-react-1.7.7.tgz",
"integrity": "sha512-pp9Y7/+L4NFlMp+PdESx66EG0/m70aqg81FNlLP08dGWvRRSvNJFv08Jc91IEQkbh/C1PpokCekNCWZqpWxiyQ==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/lodash": {
"version": "4.17.7",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
@ -3352,6 +3363,16 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/fslightbox-react": {
"version": "1.7.6",
"resolved": "https://registry.npmjs.org/fslightbox-react/-/fslightbox-react-1.7.6.tgz",
"integrity": "sha512-7LN2GZRLHo2vZGKdH+BZDJUoUDkCRCLlZ5hOwtLtZplmGZQ9nqzpG54cTax7XNjbYGTWLT6BHdMiL5zOEhiRlA==",
"peerDependencies": {
"prop-types": ">=15.6.2",
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/gensync": {
"version": "1.0.0-beta.2",
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",

2
package.json
View File

@ -23,6 +23,7 @@
"date-fns": "3.6.0",
"dompurify": "3.1.6",
"file-saver": "2.0.5",
"fslightbox-react": "1.7.6",
"lodash": "4.17.21",
"nostr-login": "1.5.2",
"nostr-tools": "2.7.1",
@ -41,6 +42,7 @@
"devDependencies": {
"@types/dompurify": "3.0.5",
"@types/file-saver": "2.0.7",
"@types/fslightbox-react": "1.7.7",
"@types/lodash": "4.17.7",
"@types/papaparse": "5.3.14",
"@types/react": "^18.3.3",

105
src/pages/innerMod.tsx
View File

@ -51,6 +51,7 @@ import {
unformatNumber,
signAndPublish
} from '../utils'
import FsLightbox from 'fslightbox-react'
export const InnerModPage = () => {
const { naddr } = useParams()
@ -935,6 +936,18 @@ const Body = ({
const postBodyRef = useRef<HTMLDivElement>(null)
const viewFullPostBtnRef = useRef<HTMLDivElement>(null)
const [lightBoxController, setLightBoxController] = useState({
toggler: false,
slide: 1
})
const openLightBoxOnSlide = (slide: number) => {
setLightBoxController((prev) => ({
toggler: !prev.toggler,
slide
}))
}
const viewFullPost = () => {
if (postBodyRef.current && viewFullPostBtnRef.current) {
postBodyRef.current.style.maxHeight = 'unset'
@ -950,52 +963,60 @@ const Body = ({
})
return (
<div className='IBMSMSMBSSPost'>
<div
className='IBMSMSMBSSPostPicture'
style={{
background: `url(${featuredImageUrl}) center / cover no-repeat`
}}
></div>
<div className='IBMSMSMBSSPostInside'>
<div className='IBMSMSMBSSPostTitle'>
<h1 className='IBMSMSMBSSPostTitleHeading'>{title}</h1>
</div>
<>
<div className='IBMSMSMBSSPost'>
<div
ref={postBodyRef}
className='IBMSMSMBSSPostBody'
style={{ maxHeight: '250px', padding: '0 10px' }}
>
<EditorContent editor={editor} />
<div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
<p onClick={viewFullPost}>View</p>
className='IBMSMSMBSSPostPicture'
style={{
background: `url(${featuredImageUrl}) center / cover no-repeat`
}}
></div>
<div className='IBMSMSMBSSPostInside'>
<div className='IBMSMSMBSSPostTitle'>
<h1 className='IBMSMSMBSSPostTitleHeading'>{title}</h1>
</div>
<div
ref={postBodyRef}
className='IBMSMSMBSSPostBody'
style={{ maxHeight: '250px', padding: '0 10px' }}
>
<EditorContent editor={editor} />
<div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
<p onClick={viewFullPost}>View</p>
</div>
</div>
<div className='IBMSMSMBSSShots'>
{screenshotsUrls.map((url, index) => (
<img
className='IBMSMSMBSSShotsImg'
src={url}
alt={`ScreenShot-${index}`}
key={url}
onClick={() => openLightBoxOnSlide(index + 1)}
/>
))}
</div>
<div className='IBMSMSMBSSTags'>
{nsfw && (
<div className='IBMSMSMBSSTagsTag IBMSMSMBSSTagsTagNSFW'>
<p>NSFW</p>
</div>
)}
{tags.map((tag, index) => (
<a className='IBMSMSMBSSTagsTag' href='#' key={`tag-${index}`}>
{tag}
</a>
))}
</div>
</div>
<div className='IBMSMSMBSSShots'>
{screenshotsUrls.map((url, index) => (
<img
className='IBMSMSMBSSShotsImg'
src={url}
alt={`ScreenShot-${index}`}
key={`ScreenShot-${index}`}
/>
))}
</div>
<div className='IBMSMSMBSSTags'>
{nsfw && (
<div className='IBMSMSMBSSTagsTag IBMSMSMBSSTagsTagNSFW'>
<p>NSFW</p>
</div>
)}
{tags.map((tag, index) => (
<a className='IBMSMSMBSSTagsTag' href='#' key={`tag-${index}`}>
{tag}
</a>
))}
</div>
</div>
</div>
<FsLightbox
toggler={lightBoxController.toggler}
sources={screenshotsUrls}
slide={lightBoxController.slide}
/>
</>
)
}