From 6c04e03cf5785397cdea6da767c81a6f135f798d Mon Sep 17 00:00:00 2001
From: Tristan Lee
This image is bundled as part of the project, served from an Edgio static asset origin, and processed by the image optimizer.
+These images are fetched from Wikipedia, proxied through Edgio and processed by the image optimizer.
+', '') - - // To send the response to the client with the new HTML but the same headers as the origin response: - return new Response(newHtml, { - ...resp, - headers: { - ...resp.headers, - 'x-edge-function': 'main.js', - }, - }) - - // Or you can just return the original response to the client - // return resp -} diff --git a/examples/v7-image-optimization/edgio.config.js b/examples/v7-image-optimization/edgio.config.js index 462849f0a..a10156d99 100644 --- a/examples/v7-image-optimization/edgio.config.js +++ b/examples/v7-image-optimization/edgio.config.js @@ -7,7 +7,7 @@ module.exports = { origins: [ { - name: 'origin', + name: 'wiki', override_host_header: 'en.wikipedia.org', hosts: [ { @@ -21,7 +21,7 @@ module.exports = { }, }, { - name: 'upload', + name: 'wikiupload', override_host_header: 'upload.wikimedia.org', hosts: [ { diff --git a/examples/v7-image-optimization/edgio/homeHandler.js b/examples/v7-image-optimization/edgio/homeHandler.js new file mode 100644 index 000000000..f55a4fe53 --- /dev/null +++ b/examples/v7-image-optimization/edgio/homeHandler.js @@ -0,0 +1,178 @@ +import * as cheerio from 'cheerio'; +import urlParse from 'url-parse'; +import fetch from 'node-fetch'; + +export default async function (req, res) { + const resp = await fetch('https://en.wikipedia.org'); + const html = await resp.text(); + const $ = cheerio.load(html); + + const wikimediaImages = []; + $('img').each((index, element) => { + const src = $(element).attr('src'); + if (src.includes('wikimedia') && wikimediaImages.length < 5) { + const url = urlParse(`https:${src}`); + const { pathname } = url; + wikimediaImages.push(pathname); + } + }); + + const imageCards = generateImageCards(wikimediaImages); + const newHtml = createHtml(imageCards); + + res.setHeader('Content-Type', 'text/html'); + res.body = newHtml; +} + +const optimizations = [ + { + optimization: 'format=webp', + description: 'Optimized to WebP format', + }, + { + optimization: 'pad=45&bg-color=000000', + description: 'Padded with black background', + }, + { + optimization: 'rotate=90&height=262', + description: 'Rotated 90 degrees and resized', + }, + { + optimization: 'quality=5', + description: 'Quality Adjusted to 5%', + }, + { + optimization: 'blur=20', + description: 'Blur Filter Applied', + }, + { + optimization: 'width=200&height=200', + description: 'Resized to 200x200', + }, +]; + +const generateImageCards = (wikimediaImages) => { + const demoImageCards = optimizations + .map( + ({ optimization, description }) => ` +
${description} using:
?${optimization}
+ + ` + ) + .join(''); + + const wikimediaImageCards = wikimediaImages + .map((src, index) => { + const { optimization, description } = + optimizations[index % optimizations.length]; + return ` +
${description} using:
?${optimization}
+ + `; + }) + .join(''); + + return { demoImageCards, wikimediaImageCards }; +}; + +const createHtml = ({ demoImageCards, wikimediaImageCards }) => ` + + +
+ + +
+ + +
+