imageloader

components/meta.js

@@ -131,7 +131,14 @@ export default function Meta({ seo, articleJsonLd, productJsonLd }) {
         />
       )} */}
       {/* {typeof window &&<script type="text/javascript" async="async" dangerouslySetInnerHTML={{ __html: `var _paq = window._paq = window._paq || []; _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]);  function embedTrackingCode() { var u="https://analytics.prototypr.io/";    _paq.push(["setTrackerUrl", u+"matomo.php"]);    _paq.push(["setSiteId", "1"]);     var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";    g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);     }  if (window.addEventListener) { window.addEventListener("load", embedTrackingCode, false);  } else if (window.attachEvent) {  window.attachEvent("onload",embedTrackingCode);  } else { embedTrackingCode(); }` }} />} */}
-      {typeof window &&<script type="text/javascript" async="async" dangerouslySetInnerHTML={{ __html: `window.GUMLET_CONFIG={hosts:[{current:"prototypr-media.sfo2.digitaloceanspaces.com",gumlet:"prototyprio.gumlet.io"}], lazy_load: true,srcset: true},d=document,s=d.createElement("script"),s.src="https://cdn.gumlet.com/gumlet.js/2.1/gumlet.min.js",s.async=1,d.getElementsByTagName("head")[0].appendChild(s);` }} />}
+
+
+      {/* gumlet */}
+      {/* don't need this - using gumletloader and the loader in next config - this is for js only */}
+      {/* {typeof window &&<script type="text/javascript" async="async" dangerouslySetInnerHTML={{ __html: `window.GUMLET_CONFIG={hosts:[{current:"prototypr-media.sfo2.digitaloceanspaces.com",gumlet:"prototyprio.gumlet.io"}], lazy_load: true,srcset: true},d=document,s=d.createElement("script"),s.src="https://cdn.gumlet.com/gumlet.js/2.1/gumlet.min.js",s.async=1,d.getElementsByTagName("head")[0].appendChild(s);` }} />} */}
+      {/* <script type="text/javascript" async="async" dangerouslySetInnerHTML={{ __html: `window.GUMLET_CONFIG={hosts:[{current:"prototypr-media.sfo2.digitaloceanspaces.com",gumlet:"prototyprio.gumlet.io"}], lazy_load: true,srcset: true},d=document,s=d.createElement("script"),s.src="https://cdn.gumlet.com/gumlet.js/2.1/gumlet.min.js",s.async=1,d.getElementsByTagName("head")[0].appendChild(s);` }} /> */}
+
+
       {/* CODEPEN AND TWITTER EMBED */}
       {typeof window &&<script defer async="async" src="https://static.codepen.io/assets/embed/ei.js"></script>}
       {typeof window &&<script defer async="async" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>}

components/toolbox/HeroCardSectionNews.js

@@ -24,7 +24,7 @@ const HeroCardSection = ({ logo, post, tags, featuredImage, faviconUrl, domain,
         width={400}
         height={400}
         loader={gumletLoader}
-        placeholder="blur"
+        // placeholder="blur"
         priority={true}
         objectFit="cover"
         key={featuredImage}

components/v4/layout/NewsPageFeatured.js

@@ -1,7 +1,4 @@
-import Button from "@/components/Primitives/Button";
-import Link from "next/link";
-import Image from "next/image";
-import { LinkIcon } from "@/components/icons";
+
 import HeroCardSection from "@/components/toolbox/HeroCardSectionNews";
 
 const NewsPageFeatured = ({

lib/gumletPostContentLoader.js

@@ -0,0 +1,47 @@
+import { JSDOM } from "jsdom";
+
+const imageHost = "prototypr-media.sfo2.digitaloceanspaces.com";
+const gumletHost = "prototyprio.gumlet.io";
+
+/**
+ * replace imageHost with gumletHost
+ * used for post content
+ * @param {*} htmlString
+ * @param {*} imageUrlToMatch
+ * @returns
+ */
+const gumletPostContentLoader = htmlString => {
+  const dom = new JSDOM(htmlString);
+  const document = dom.window.document;
+  // Get all image elements
+  const images = document.querySelectorAll("img");
+
+  for (let i = 0; i < images.length; i++) {
+    //if image src has imageHost, replace it with gumletHost
+    if (images[i].src.indexOf(imageHost) > -1) {
+      const imgSrc = images[i].src.replace(imageHost, gumletHost);
+      //remove src attribute and rely on srcset
+      images[i].removeAttribute("src")
+      //set to lazy load image
+      images[i].setAttribute("loading", "lazy");
+      //add srcset
+      const srcset = generateSrcset(imgSrc);
+      images[i].setAttribute("srcset", srcset);
+    }
+  }
+
+  // Serialize the DOM back to a string and return it
+  return dom.serialize();
+};
+
+export default gumletPostContentLoader;
+
+const generateSrcset = url => {
+  const widths = [
+    30, 50, 70, 100, 128, 160, 200, 240, 300, 320, 330, 360, 376, 400, 480, 576,
+    600, 640, 700, 720, 768, 800, 900, 940, 1000, 1024, 1080, 1100, 1140, 1200,
+    1242, 1300, 1400, 1440, 1500, 1536, 1600, 1700, 1800, 1880, 1920, 2000,
+    2048, 2100, 2208, 2280, 2400, 2500, 2560, 2600, 2732, 2800, 2880, 1440,
+  ];
+  return widths.map(width => `${url}?w=${width}&q=75&format=avif&compress=true&dpr=1 ${width}w`).join(",");
+};

pages/news/[slug].js

@@ -15,6 +15,8 @@ import SignupSidebar from "@/components/newsletter/SignupSidebar";
 import Spinner from "@/components/atom/Spinner/Spinner";
 import isoToReadableDate from "@/lib/utils/isoToReadableDate";
 import SocialShare from "@/components/SocialShare";
+import Image from "next/image";
+import gumletLoader from "@/lib/imageloader";
 
 const Footer = dynamic(() => import("@/components/footer"));
 
@@ -429,7 +431,10 @@ export default function Post({
                                 </div>:null} */}
                             </div>
                             <div className="relative flex-none group-hover:scale-[1.02] w-[64px] h-[64px] order-first transition transition-all duration-400">
-                              <img
+                              <Image
+                                loader={gumletLoader}
+                                width={100}
+                                height={100}
                                 className="rounded-lg z-10 h-full w-full object-cover"
                                 src={_ogImage}
                               />
@@ -505,6 +510,15 @@ export async function getStaticProps({
 
   //filter the content for posts before 2022
   if (new Date(postData.attributes.date) < new Date("2024-01-01")) {
+    if (postData.attributes.content?.length) {
+      const gumletPostContentLoaderModule = await import("@/lib/gumletPostContentLoader");
+      const gumletPostContentLoader = gumletPostContentLoaderModule.default;
+
+      let html = gumletPostContentLoader(postData.attributes.content);
+      if (html) {
+        postData.attributes.content = html;
+      }
+    }
     // postData.attributes.content = postData.attributes.content.replace(
     //truncate the content to 400 characters
     postData.attributes.content =

pages/post/[slug].js

@@ -419,6 +419,9 @@ export async function getStaticProps({ params, preview = null, locale }) {
   const removeFirstImageIfMatchModule = await import("@/lib/removeFirstImage");
   const removeFirstImageIfMatch = removeFirstImageIfMatchModule.default;
 
+  const gumletPostContentLoaderModule = await import("@/lib/gumletPostContentLoader");
+  const gumletPostContentLoader = gumletPostContentLoaderModule.default;
+
   const post = data?.posts?.data[0];
   const image = post?.attributes?.seo?.opengraphImage
     ? post?.attributes?.seo?.opengraphImage
@@ -431,6 +434,7 @@ export async function getStaticProps({ params, preview = null, locale }) {
           : "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png";
 
   let html = removeFirstImageIfMatch(post?.attributes?.content, image);
+  html = gumletPostContentLoader(html);
 
   return {
     props: {

pages/toolbox/[slug].js

@@ -559,6 +559,19 @@ export async function getStaticProps({ params, preview = null, locale }) {
     layout = 2;
   }
 
+  /**
+   * replace images with gumlet loader
+   */
+  if (postData.attributes.content?.length) {
+    const gumletPostContentLoaderModule = await import("@/lib/gumletPostContentLoader");
+    const gumletPostContentLoader = gumletPostContentLoaderModule.default;
+
+    let html = gumletPostContentLoader(postData.attributes.content);
+    if (html) {
+      postData.attributes.content = html;
+    }
+  }
+
   const logo = getToolboxLogo({ post: postData });
   const { featuredImage, base64 } = await getToolboxFeaturedImage({
     post: postData,