Add New Detail Type :: Image

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -21,6 +21,13 @@
                 </a>
               </div>
             </template>
+            <template v-else-if="detail.type === 'image'">
+              <div class="tooltip tooltip-primary tooltip-right" :data-tip="detail.href">
+                <a class="btn btn-primary btn-xs" :href="detail.href" target="_blank">
+                  <img :src="detail.href" class="w-6 h-6">
+                </a>
+              </div>
+            </template>
             <template v-else-if="detail.type === 'markdown'">
               <ClientOnly>
                 <Markdown :source="detail.text" />

frontend/components/global/DetailsSection/types.ts

@@ -33,7 +33,13 @@ export type Detail = BaseDetail & {
   copyable?: boolean;
 };
 
-export type AnyDetail = DateDetail | CurrencyDetail | LinkDetail | MarkdownDetail | Detail;
+type ImageDetail = BaseDetail & {
+  type: "image";
+  text: string;
+  href: string;
+};
+
+export type AnyDetail = DateDetail | CurrencyDetail | LinkDetail | MarkdownDetail | Detail | ImageDetail;
 
 export type Details = Array<Detail | AnyDetail>;
 
@@ -46,6 +52,8 @@ export function filterZeroValues(details: Details): Details {
         return !!detail.text;
       case "link":
         return !!detail.text && !!detail.href;
+      case "image":
+        return !!detail.text && !!detail.href;
       case undefined:
       case "text":
       case "markdown":

frontend/composables/utils.ts

@@ -38,7 +38,12 @@ export function fmtCurrency(value: number | string, currency = "USD", locale = "
   return formatter.format(value);
 }
 
+export function isImage(url: string) {
+  return /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url);
+}
+
 export type MaybeUrlResult = {
+  isImage: boolean,
   isUrl: boolean;
   url: string;
   text: string;
@@ -46,6 +51,7 @@ export type MaybeUrlResult = {
 
 export function maybeUrl(str: string): MaybeUrlResult {
   const result: MaybeUrlResult = {
+    isImage: isImage(str),
     isUrl: str.startsWith("http://") || str.startsWith("https://"),
     url: "",
     text: "",

frontend/pages/item/[id]/index.vue

@@ -186,7 +186,14 @@
          * Support Special URL Syntax
          */
         const url = maybeUrl(field.textValue);
-        if (url.isUrl) {
+        if (url.isImage) {
+          return {
+            type: "image",
+            name: field.name,
+            text: url.text,
+            href: url.url,
+          } as AnyDetail;
+        } else {
           return {
             type: "link",
             name: field.name,