🐛 Fix loading attachment via solink in post

package.json

@@ -31,6 +31,7 @@
     "rehype-sanitize": "^6.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
     "unified": "^11.0.5",

src/pages/posts/[...id].tsx

@@ -25,6 +25,7 @@ import rehypeStringify from 'rehype-stringify'
 import remarkBreaks from 'remark-breaks'
 import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
+import remarkGfm from 'remark-gfm'
 
 import CloseIcon from '@mui/icons-material/Close'
 
@@ -37,7 +38,16 @@ export const getServerSideProps = (async (context) => {
       if (post.type != 'article') {
         processor = processor.use(remarkBreaks)
       }
-      const out = await processor.use(remarkRehype).use(rehypeSanitize).use(rehypeStringify).process(post.body.content)
+      post.body.content = post.body.content.replace(
+        /!\[.*?\]\(solink:\/\/attachments\/([\w-]+)\)/g,
+        '![alt](https://api.sn.solsynth.dev/cgi/uc/attachments/$1)',
+      )
+      const out = await processor
+        .use(remarkRehype)
+        .use(remarkGfm)
+        .use(rehypeSanitize)
+        .use(rehypeStringify)
+        .process(post.body.content)
       post.body.rawContent = post.body.content
       post.body.content = String(out)
     }
@@ -102,6 +112,13 @@ export default function Post({ post, attachments }: InferGetServerSidePropsType<
     return null
   }, [post])
 
+  const displayableAttachments = useMemo(() => {
+    if (post.type == 'article') {
+      return attachments.filter((a) => !a.mimetype.startsWith('image'))
+    }
+    return attachments
+  }, [post])
+
   const [openAppHint, setOpenAppHint] = useState<boolean>()
 
   useEffect(() => {
@@ -203,7 +220,7 @@ export default function Post({ post, attachments }: InferGetServerSidePropsType<
           {post.body.content && <div dangerouslySetInnerHTML={{ __html: post.body.content }} />}
         </Box>
 
-        {attachments && (
+        {displayableAttachments && (
           <Grid
             container
             spacing={2}
@@ -215,7 +232,7 @@ export default function Post({ post, attachments }: InferGetServerSidePropsType<
               lg: Math.min(4, attachments.length),
             }}
           >
-            {attachments.map((a) => (
+            {displayableAttachments.map((a) => (
               <Grid size={1} key={a.id}>
                 <AttachmentItem item={a} />
               </Grid>

src/pages/posts/index.tsx

@@ -37,6 +37,10 @@ export const getServerSideProps = (async (context) => {
         if (post.type != 'article') {
           processor = processor.use(remarkBreaks)
         }
+        post.body.content = post.body.content.replace(
+          /!\[.*?\]\(solink:\/\/attachments\/([\w-]+)\)/g,
+          '![alt](https://api.sn.solsynth.dev/cgi/uc/attachments/$1)',
+        )
         const out = await processor
           .use(remarkRehype)
           .use(rehypeSanitize)
@@ -47,6 +51,9 @@ export const getServerSideProps = (async (context) => {
       }
       if (post.body.attachments) {
         post.attachments = await listAttachment(post.body.attachments)
+        if (post.type == 'article') {
+          post.attachments = post.attachments.filter((a) => !a.mimetype.startsWith('image'))
+        }
       }
       posts[idx] = post
     }

src/styles/globals.css

@@ -36,3 +36,7 @@
     width: 100%;
   }
 }
+
+.prose img {
+  border-radius: 8px;
+}