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