use better image sizes

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 {

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 */

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>