feat: open image externally and add summary style

menthorlabs · Jan 29, 2024 · e73de8a · e73de8a
1 parent 421a707
commit e73de8a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/apps/app/components/content/ProseImg.vue b/apps/app/components/content/ProseImg.vue
@@ -27,13 +27,15 @@ const refinedSrc = computed(() => {
 </script>
 
 <template>
-  <nuxt-img
-    format="webp"
-    quality="80"
-    :src="refinedSrc"
-    :alt="alt"
-    :width="width"
-    :height="height"
-    densities="x1 x1"
-  />
+  <nuxt-link external target="_blank" :to="refinedSrc">
+    <nuxt-img
+      format="webp"
+      quality="80"
+      :src="refinedSrc"
+      :alt="alt"
+      :width="width"
+      :height="height"
+      densities="x1 x1"
+    />
+  </nuxt-link>
 </template>
diff --git a/packages/assets/styles/content.css b/packages/assets/styles/content.css
@@ -16,6 +16,14 @@
     @apply text-zinc-800 mb-4;
   }
 
+  #nuxt_content details {
+    @apply text-zinc-800 mb-4;
+  }
+
+  #nuxt_content summary {
+    @apply mb-2;
+  }
+
   #nuxt_content ul {
     @apply text-zinc-800 mb-4;
   }
@@ -24,7 +32,7 @@
     @apply text-zinc-800 mb-4;
   }
 
-  #nuxt_content code .line {
+  #nuxt_content pre {
     @apply px-4;
   }
 
@@ -47,4 +55,8 @@
   #nuxt_content kbd {
     @apply border border-zinc-200 rounded-md py-[3px] px-[5px] text-xs bg-zinc-50;
   }
+
+  #nuxt_content img {
+    @apply mb-4;
+  }
 }