diff --git a/api/imgproxy/index.js b/api/resolvers/imgproxy/index.js similarity index 86% rename from api/imgproxy/index.js rename to api/resolvers/imgproxy/index.js index 9c7dc7e3..e631f307 100644 --- a/api/imgproxy/index.js +++ b/api/resolvers/imgproxy/index.js @@ -1,5 +1,5 @@ import { createHmac } from 'node:crypto' -import { extractUrls } from '../../lib/md' +import { extractUrls } from '../../../lib/md' const IMGPROXY_URL = process.env.NEXT_PUBLIC_IMGPROXY_URL const IMGPROXY_SALT = process.env.IMGPROXY_SALT @@ -20,7 +20,7 @@ const createImageProxyUrl = url => { const b64Url = Buffer.from(url, 'utf-8').toString('base64url') const target = `${processingOptions}/${b64Url}` const signature = sign(target) - return `${IMGPROXY_URL}/${signature}${target}` + return `${IMGPROXY_URL}${signature}${target}` } const isImageURL = async url => { @@ -35,13 +35,13 @@ const isImageURL = async url => { } } -export const useImageProxy = async text => { +export const proxyImages = async text => { const urls = extractUrls(text) for (const url of urls) { if (url.startsWith(IMGPROXY_URL)) continue if (!(await isImageURL(url))) continue const proxyUrl = createImageProxyUrl(url) - text = text.replace(new RegExp(url, 'g'), proxyUrl) + text = text.replaceAll(url, proxyUrl) } return text } diff --git a/api/resolvers/item.js b/api/resolvers/item.js index 577ac3b1..4967a4d0 100644 --- a/api/resolvers/item.js +++ b/api/resolvers/item.js @@ -13,7 +13,7 @@ import { parse } from 'tldts' import uu from 'url-unshort' import { amountSchema, bountySchema, commentSchema, discussionSchema, jobSchema, linkSchema, pollSchema, ssValidate } from '../../lib/validate' import { sendUserNotification } from '../webPush' -import { useImageProxy } from '../imgproxy' +import { proxyImages } from './imgproxy' async function comments (me, models, id, sort) { let orderBy @@ -1251,8 +1251,8 @@ export const updateItem = async (parent, { id, data: { sub, title, url, text, bo } } - url = await useImageProxy(url) - text = await useImageProxy(text) + url = await proxyImages(url) + text = await proxyImages(text) const [item] = await serialize(models, models.$queryRaw( @@ -1286,8 +1286,8 @@ const createItem = async (parent, { sub, title, url, text, boost, forward, bount } } - url = await useImageProxy(url) - text = await useImageProxy(text) + url = await proxyImages(url) + text = await proxyImages(text) const [item] = await serialize( models, diff --git a/components/item.js b/components/item.js index c4b6ffe7..46bea74d 100644 --- a/components/item.js +++ b/components/item.js @@ -9,6 +9,7 @@ import PollIcon from '../svgs/bar-chart-horizontal-fill.svg' import BountyIcon from '../svgs/bounty-bag.svg' import ActionTooltip from './action-tooltip' import Flag from '../svgs/flag-fill.svg' +import ImageIcon from '../svgs/image-fill.svg' import { abbrNum } from '../lib/format' import ItemInfo from './item-info' @@ -22,6 +23,8 @@ export default function Item ({ item, rank, belowTitle, right, full, children }) const titleRef = useRef() const [pendingSats, setPendingSats] = useState(0) + const image = item.url && item.url.startsWith(process.env.NEXT_PUBLIC_IMGPROXY_URL) + return ( <> {rank @@ -39,16 +42,17 @@ export default function Item ({ item, rank, belowTitle, right, full, children }) {item.searchTitle ? : item.title} - {item.pollCost && } + {item.pollCost && } {item.bounty > 0 && - + } + {image && } - {item.url && + {item.url && !image && <> {/* eslint-disable-next-line */} { - return type === 'link' + return type === 'link' || type === 'image' }, ({ url }) => { urls.add(url) }) diff --git a/styles/item.module.css b/styles/item.module.css index adfdec21..a86c652c 100644 --- a/styles/item.module.css +++ b/styles/item.module.css @@ -94,6 +94,10 @@ margin-bottom: .5rem; } +.fullItemContainer img { + border-radius: .4rem; +} + .fullItemContainer:empty { margin: 0; } \ No newline at end of file diff --git a/svgs/image-fill.svg b/svgs/image-fill.svg new file mode 100644 index 00000000..8f87b570 --- /dev/null +++ b/svgs/image-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file