✨ Post embed image

app/composables/useMarkdownProcessor.ts

@@ -1,24 +1,32 @@
-import { createMarkdownExit } from "markdown-exit"
+import {
+  createMarkdownExit,
+  type PluginWithParams
+} from "markdown-exit"
 // @ts-ignore
 import texmath from "markdown-it-texmath"
 import katex from "katex"
 
 export function useMarkdownProcessor() {
+  const serverUrl = useSolarNetworkUrl()
+
   const processor = createMarkdownExit({
     breaks: true,
     html: true,
     linkify: true,
     typographer: true
+  })
     // @ts-ignore
-  }).use(texmath, {
+    .use(texmath, {
       engine: katex,
       delimiters: "dollars",
       katexOptions: { macros: { "\\RR": "\\mathbb{R}" } }
     })
+    .use(imgSolarNetworkPlugin, { serverUrl: serverUrl })
 
+  // Keep the empty lines
   const defaultParagraphRenderer =
     processor.renderer.rules.paragraph_open ||
-    ((tokens, idx, options, env, self) =>
+    ((tokens, idx, options, _env, self) =>
       self.renderToken(tokens, idx, options))
   processor.renderer.rules.paragraph_open = function (
     tokens,
@@ -53,3 +61,32 @@ export function useMarkdownProcessor() {
     render: (content: string) => processor.render(content)
   }
 }
+
+const imgSolarNetworkPlugin: PluginWithParams = (
+  md,
+  { serverUrl }: { serverUrl: string }
+) => {
+  const originalImageRender = md.renderer.rules.image!
+
+  md.renderer.rules.image = (
+    tokens,
+    index,
+    options,
+    env,
+    self
+  ): Promise<string> | string => {
+    tokens[index]!.attrSet("loading", "lazy")
+
+    const ogSrc = tokens[index]!.attrGet("src")
+    if (ogSrc && ogSrc.startsWith("solian://files/")) {
+      const newSrc = ogSrc.replace(
+        "solian://files/",
+        serverUrl + "/drive/files/"
+      )
+      tokens[index]!.attrSet("src", newSrc)
+      tokens[index]!.attrSet("class", "prose-img-solar-network")
+    }
+
+    return originalImageRender(tokens, index, options, env, self)
+  }
+}

app/pages/posts/[id].vue

@@ -68,10 +68,15 @@
             </article>
 
             <!-- Attachments within Content Section -->
-            <attachment-list :attachments="post.attachments || []" />
+            <attachment-list v-if="post.type != 1" :attachments="post.attachments || []" />
           </v-card>
 
-          <v-card title="Replies" prepend-icon="mdi-comment-text-multiple" color="transparent" flat>
+          <v-card
+            title="Replies"
+            prepend-icon="mdi-comment-text-multiple"
+            color="transparent"
+            flat
+          >
             <replies-list :params="{ postId: post.id }" />
           </v-card>
         </div>
@@ -90,7 +95,7 @@
                 <v-chip
                   v-for="category in post.categories"
                   :key="category.id"
-                  prepend-icon="mdi-tshape"
+                  prepend-icon="mdi-shape"
                   rounded
                 >
                   {{ category.slug }}
@@ -248,4 +253,30 @@ function handleReaction(symbol: string, attitude: number, delta: number) {
   post.value.reactionsCount = reactions
   post.value.reactionsMade = reactionsMade
 }
+
+onMounted(() => {
+  setTimeout(() => makeEmbedImageClickable(), 100)
+})
+
+function makeEmbedImageClickable() {
+  const elements = document.getElementsByClassName("prose-img-solar-network")
+  let count = 0;
+  for (const element of elements) {
+    if (element instanceof HTMLImageElement) {
+      count += 1;
+      element.addEventListener("click", (evt) => {
+        const targetImg = evt.target as HTMLImageElement
+        window.open("/files/" + targetImg.src.split("/").findLast((_) => true))
+      })
+      element.style['cursor'] = 'pointer';
+    }
+  }
+  console.log(`[Article] Made ${count} image(s) clickable in the article.`);
+}
 </script>
+
+<style>
+.prose-img-solar-network img {
+  border-radius: 8px;
+}
+</style>