Closing the Gap by Optimising External Images with Cloudflare Workers and Cloudinary

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event));  
});

async function handleRequest(event) {
  // Only handle this if its a GET request
  if (event.request.method === 'GET') {
      let response = await serveAsset(event);
      if (response.status > 399) {
          response = new Response(response.statusText, { status: response.status });
      }
      return response;
  }
  return new Response('Method not allowed', { status: 405 });
}

async function serveAsset(event) {
  
  // Check if the URL contains a remote URL in plaintext, or is base64 encoded
  const cdnUrl = new URL(event.request.url);
  const originalRemoteUrl = cdnUrl.pathname.split('/optimizer/').pop().startsWith('http') ?
                              cdnUrl.pathname.split('/optimizer/').pop().replace(':/', '://') :
                              atob(cdnUrl.pathname.split('/optimizer/').pop());

  if (originalRemoteUrl.indexOf(".jpg") > -1 ||
      originalRemoteUrl.indexOf(".png") > -1 ||
      originalRemoteUrl.indexOf(".gif") > -1 ||
      originalRemoteUrl.indexOf(".jpeg") > -1)
  { 
    // Only transcode .jpeg, .png or .gifs
    let originalRequest = new Request(originalRemoteUrl, {
      method: "HEAD",
      cf: { cacheEverything: true }
    });

    let originalResponse = await fetch(originalRequest);

    // As Cloudinary cannot handle more than 10mb source files, if it is bigger than this return a 404
    if (parseInt(originalResponse.headers.get('content-length')) > 10000000)
    {
        let tooLargeResponse = new Response('', {
          status: 404,
          statusText: 'Not Found'
        })
        return tooLargeResponse;
    }
    else
    {    
      // Otherwise get from Cloudinary and cache in Cloudflare 
      const cache = caches.default
      let response = await cache.match(event.request);
      if (!response)
      {
        const cloudinaryURL = `https://res.cloudinary.com/*your_identifier*/image/fetch/q_auto:good,f_auto/${originalRemoteUrl}`;

        response = await fetch(cloudinaryURL, { headers: event.request.headers })
        const headers = new Headers(response.headers);
        headers.set("cache-control", `public, max-age=7200`);
        headers.set("vary", "Accept");
        headers.set("X-Robots-Tag", "noindex");
        response = new Response(response.body, { ...response, headers });
        event.waitUntil(cache.put(event.request, response.clone()))
      }
      return response;
    }
  }
  else
  {
    // If not a .gif, .jpeg or .png, pass through the original file untouched
    let originalRequest = new Request(originalRemoteUrl, {
      method: "GET",
      cf: { cacheEverything: true }
    });
    
    return await fetch(originalRequest);
    
  }
}

using Microsoft.AspNetCore.Html;
using HtmlAgilityPack;
using NUglify.Helpers;
using Umbraco.Cms.Core.Strings;

namespace UmbracoScrub13.Extensions
{
    public static class TextExtensions
    {
        public static HtmlEncodedString ReplaceImages(this HtmlEncodedString htmlEncodedString)
        {
            return new HtmlEncodedString(htmlEncodedString.ToHtmlString().ReplaceImages());
        }

        public static HtmlString ReplaceImages(this HtmlString contentString)
        {
            return new HtmlString(contentString.Value);
        }

        public static string ReplaceImages(this string contentString)
        {
            // Search for external images and replace
            var baseUrl = "https://mydomain.com/optimizer/"; // Example only. This can be moved to config

            HtmlDocument htmlDocument = new HtmlDocument();
            htmlDocument.LoadHtml(contentString);

            htmlDocument
                .DocumentNode
                .Descendants("img")
                .Where(image => image.GetAttributeValue("src", "").StartsWith("http"))
                .ForEach(image =>
                {
                    var imageSrc = image.GetAttributeValue("src", "");
                    imageSrc = $"{baseUrl}{imageSrc}";
                    image.SetAttributeValue("src", imageSrc);
                });

            contentString = htmlDocument.DocumentNode.OuterHtml;

            return contentString;

        }
    }
}

@Model.MyPropertyName.ReplaceImages()

using Microsoft.Extensions.Options;
using Umbraco.Cms.Core.Blocks;
using Umbraco.Cms.Core.Configuration.Models;
using Umbraco.Cms.Core.Macros;
using Umbraco.Cms.Core.Models.PublishedContent;
using Umbraco.Cms.Core.Strings;
using Umbraco.Cms.Core.Templates;
using Umbraco.Cms.Core.Web;
using Umbraco.Cms.Core.DeliveryApi;
using Umbraco.Cms.Core.Serialization;
using Umbraco.Cms.Core.PropertyEditors;
using UmbracoScrub13.Extensions;
using Umbraco.Cms.Core.PropertyEditors.ValueConverters;

namespace UmbracoScrub13.PropertyValueConverters
{
    public class CustomRteMacroRenderingValueConverter : RteMacroRenderingValueConverter
    {
        public CustomRteMacroRenderingValueConverter(IUmbracoContextAccessor umbracoContextAccessor, IMacroRenderer macroRenderer, HtmlLocalLinkParser linkParser, HtmlUrlParser urlParser, HtmlImageSourceParser imageSourceParser) : base(umbracoContextAccessor, macroRenderer, linkParser, urlParser, imageSourceParser)
        {
        }

        public CustomRteMacroRenderingValueConverter(IUmbracoContextAccessor umbracoContextAccessor, IMacroRenderer macroRenderer, HtmlLocalLinkParser linkParser, HtmlUrlParser urlParser, HtmlImageSourceParser imageSourceParser, IApiRichTextElementParser apiRichTextElementParser, IApiRichTextMarkupParser apiRichTextMarkupParser, IOptionsMonitor<DeliveryApiSettings> deliveryApiSettingsMonitor) : base(umbracoContextAccessor, macroRenderer, linkParser, urlParser, imageSourceParser, apiRichTextElementParser, apiRichTextMarkupParser, deliveryApiSettingsMonitor)
        {
        }

        public CustomRteMacroRenderingValueConverter(IUmbracoContextAccessor umbracoContextAccessor, IMacroRenderer macroRenderer, HtmlLocalLinkParser linkParser, HtmlUrlParser urlParser, HtmlImageSourceParser imageSourceParser, IApiRichTextElementParser apiRichTextElementParser, IApiRichTextMarkupParser apiRichTextMarkupParser, IPartialViewBlockEngine partialViewBlockEngine, BlockEditorConverter blockEditorConverter, IJsonSerializer jsonSerializer, IApiElementBuilder apiElementBuilder, RichTextBlockPropertyValueConstructorCache constructorCache, ILogger<Umbraco.Cms.Core.PropertyEditors.ValueConverters.RteMacroRenderingValueConverter> logger, IOptionsMonitor<DeliveryApiSettings> deliveryApiSettingsMonitor) : base(umbracoContextAccessor, macroRenderer, linkParser, urlParser, imageSourceParser, apiRichTextElementParser, apiRichTextMarkupParser, partialViewBlockEngine, blockEditorConverter, jsonSerializer, apiElementBuilder, constructorCache, logger, deliveryApiSettingsMonitor)
        {
        }

        public override object ConvertIntermediateToObject(IPublishedElement owner, IPublishedPropertyType propertyType,
            PropertyCacheLevel referenceCacheLevel, object? inter, bool preview)
        {
            var html = (HtmlEncodedString)base.ConvertIntermediateToObject(owner, propertyType, referenceCacheLevel, inter, preview);

            return html.ReplaceImages();
        }

    }
}

using HeyRed.MarkdownSharp;
using Umbraco.Cms.Core;
using Umbraco.Cms.Core.Models.PublishedContent;
using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.Strings;
using Umbraco.Cms.Core.Templates;
using UmbracoScrub13.Extensions;

namespace UmbracoScrub13.PropertyValueConverters
{
    public class CustomMarkdownEditorValueConverter : PropertyValueConverterBase
    {
        private readonly HtmlLocalLinkParser _localLinkParser;
        private readonly HtmlUrlParser _urlParser;

        public CustomMarkdownEditorValueConverter(HtmlLocalLinkParser localLinkParser, HtmlUrlParser urlParser)
        {
            _localLinkParser = localLinkParser;
            _urlParser = urlParser;
        }
        public override bool IsConverter(IPublishedPropertyType propertyType)
            => propertyType.EditorAlias == Constants.PropertyEditors.Aliases.MarkdownEditor;

        public override Type GetPropertyValueType(IPublishedPropertyType propertyType)
            => typeof(IHtmlEncodedString);

        public override PropertyCacheLevel GetPropertyCacheLevel(IPublishedPropertyType propertyType)
            => PropertyCacheLevel.Element;

        public override object? ConvertSourceToIntermediate(IPublishedElement owner, IPublishedPropertyType propertyType, object? source, bool preview)
        {
            if (source == null)
            {
                return null;
            }

            var sourceString = source.ToString()!;

            // ensures string is parsed for {localLink} and URLs are resolved correctly
            sourceString = _localLinkParser.EnsureInternalLinks(sourceString, preview);
            sourceString = _urlParser.EnsureUrls(sourceString);

            return sourceString;
        }
        public override object ConvertIntermediateToObject(IPublishedElement owner, IPublishedPropertyType propertyType, PropertyCacheLevel referenceCacheLevel, object? inter, bool preview)
        {
            // convert markup to HTML for frontend rendering.
            // source should come from ConvertSource and be a string (or null) already
            var mark = new Markdown();
            var html = (inter == null ? string.Empty : mark.Transform((string)inter)).ReplaceImages();
            return new HtmlEncodedString(html);
        }
    }
}