From dd5ac3a2b47d35d40cd9bf430e33ce749424f6df Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Mon, 13 Mar 2023 21:42:44 +1000
Subject: [PATCH] use better image sizes

---
 resources/js/components/SMHTML.vue  | 20 ++++++++++++++++++--
 resources/js/components/SMInput.vue |  3 ++-
 resources/js/components/SMPanel.vue |  5 +++--
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/SMHTML.vue b/resources/js/components/SMHTML.vue
index 1cda9d5..2dd85d1 100644
--- a/resources/js/components/SMHTML.vue
+++ b/resources/js/components/SMHTML.vue
@@ -21,14 +21,30 @@ const props = defineProps({
 const computedContent = computed(() => {
     let html = "";
 
-    const regex = new RegExp(
+    // Convert local links to router-links
+    const regexHref = new RegExp(
         `<a ([^>]*?)href="${
             (import.meta as ImportMetaExtras).env.APP_URL
         }(.*?>.*?)</a>`,
         "ig"
     );
+    html = props.html.replace(regexHref, '<router-link $1to="$2</router-link>');
 
-    html = props.html.replace(regex, '<router-link $1to="$2</router-link>');
+    // Update local images to use at most the large size
+    const regexImg = new RegExp(
+        `<img ([^>]*?)src="${
+            (import.meta as ImportMetaExtras).env.APP_URL
+        }/uploads/([^"]*?)"`,
+        "ig"
+    );
+    html = html.replace(
+        regexImg,
+        `<img $1src="${
+            (import.meta as ImportMetaExtras).env.APP_URL
+        }/uploads/$2?size=large"`
+    );
+
+    // Sanitize HTML
     html = DOMPurify.sanitize(html);
 
     return {
diff --git a/resources/js/components/SMInput.vue b/resources/js/components/SMInput.vue
index b77c4a5..ba64435 100644
--- a/resources/js/components/SMInput.vue
+++ b/resources/js/components/SMInput.vue
@@ -91,6 +91,7 @@ import { computed, inject, ref, useSlots, watch } from "vue";
 import { openDialog } from "vue3-promise-dialog";
 import { api } from "../helpers/api";
 import { MediaResponse } from "../helpers/api.types";
+import { imageMedium } from "../helpers/image";
 import { toTitleCase } from "../helpers/string";
 import { isEmpty } from "../helpers/utils";
 import { isUUID } from "../helpers/uuid";
@@ -240,7 +241,7 @@ watch(
                     const data = result.data as MediaResponse;
 
                     if (data && data.medium) {
-                        mediaUrl.value = data.medium.url;
+                        mediaUrl.value = imageMedium(data.medium.url);
                     }
                 } catch (error) {
                     /* empty */
diff --git a/resources/js/components/SMPanel.vue b/resources/js/components/SMPanel.vue
index 6ee2e9f..e7ac81c 100644
--- a/resources/js/components/SMPanel.vue
+++ b/resources/js/components/SMPanel.vue
@@ -60,7 +60,7 @@ import { computed, onMounted, reactive, ref, watch } from "vue";
 import { api } from "../helpers/api";
 import { MediaResponse } from "../helpers/api.types";
 import { SMDate } from "../helpers/datetime";
-import { imageLoad } from "../helpers/image";
+import { imageLoad, imageMedium } from "../helpers/image";
 import {
     excerpt,
     replaceHtmlEntites,
@@ -251,7 +251,8 @@ onMounted(async () => {
 watch(
     () => imageUrl.value,
     (value) => {
-        styleObject["backgroundImage"] = `url('${value}')`;
+        const url = imageMedium(value);
+        styleObject["backgroundImage"] = `url('${url}')`;
     }
 );
 </script>