Adds featured-sponsors-darkmode.svg to fix darkmode sponsors on ddev/…

…ddev (#134)

README.md

@@ -134,7 +134,7 @@ It’s used to display sponsor details in a few places:
 
 1. The [homepage](https://ddev.com) “Featured Sponsors” list.
 2. The leading bubbles on the [Support DDEV page](https://ddev.com/support-ddev/)’s “Sponsor Development” grid.
-3. The [procedurally-generated](https://github.com/ddev/ddev.com-front-end/blob/main/src/pages/resources/featured-sponsors.svg.js) featured sponsors [SVG](https://ddev.com/resources/featured-sponsors.svg) used in the [main project readme](https://github.com/ddev/ddev#wonderful-sponsors).
+3. The [procedurally-generated](https://github.com/ddev/ddev.com-front-end/blob/main/src/pages/resources/featured-sponsors.svg.js) featured sponsors [light](https://ddev.com/resources/featured-sponsors.svg) and [dark](https://ddev.com/resources/featured-sponsors-darkmode.svg) SVG images used in the [main project readme](https://github.com/ddev/ddev#wonderful-sponsors).
 
 If you’re adding a new item to the array, choose whichever position it should appear in and use the following format:
 

src/components/FeaturedSponsors.astro

@@ -7,16 +7,15 @@ import featuredSponsors from "../featured-sponsors.json"
  * you need to add one.
  */
 const nudges = {
-  "Platform.sh": "mt-12 h-11 dark:invert",
+  "Platform.sh": "mt-12 h-11",
   Tag1: "h-9",
   "Oliver Wand": "h-12 w-12",
-  DrupalEasy: "h-10 dark:invert",
-  b13: "dark:invert",
+  DrupalEasy: "h-10",
   "Redfin Solutions": "h-16 w-16",
   MacStadium: "h-15",
   Lullabot: "h-9",
   "Craft CMS": "h-11",
-  undpaul: "h-9 dark:invert",
+  undpaul: "h-9",
   "1xINTERNET": "h-11",
 }
 

src/featured-sponsors.json

@@ -3,7 +3,7 @@
     "name": "Platform.sh",
     "type": "major",
     "logo": "/logos/platform.sh.svg",
-    "darklogo": "/logos/platform.sh.svg",
+    "darklogo": "/logos/platform.sh-darkmode.svg",
     "squareLogo": "/logos/platform.sh-square.svg",
     "url": "https://platform.sh"
   },
@@ -55,7 +55,7 @@
     "name": "b13",
     "type": "standard",
     "logo": "/logos/b13.svg",
-    "darklogo": "/logos/b13.svg",
+    "darklogo": "/logos/b13-darkmode.svg",
     "squareLogo": "/logos/b13.svg",
     "url": "https://b13.com/",
     "github": "b13"
@@ -91,7 +91,7 @@
     "name": "DrupalEasy",
     "type": "standard",
     "logo": "/logos/drupaleasy.png",
-    "darklogo": "/logos/drupaleasy.png",
+    "darklogo": "/logos/drupaleasy-darkmode.png",
     "squareLogo": "/logos/drupaleasy-square.svg",
     "url": "https://www.drupaleasy.com/",
     "github": "drupaleasy"
@@ -153,7 +153,7 @@
     "name": "undpaul",
     "type": "standard",
     "logo": "/logos/undpaul.svg",
-    "darklogo": "/logos/undpaul.svg",
+    "darklogo": "/logos/undpaul-darkmode.svg",
     "squareLogo": "/logos/undpaul-square.svg",
     "url": "https://undpaul.de",
     "github": "undpaul"

src/pages/resources/featured-sponsors-darkmode.svg.js

@@ -0,0 +1,124 @@
+import featuredSponsors from "../../featured-sponsors.json"
+import sizeOf from "image-size"
+import base64Img from "base64-img"
+
+const baseUrl = import.meta.env.SITE
+
+// Width of the composed SVG
+const overallWidth = 814
+// Maximum height a darklogo may have
+const maxHeight = 50
+// Maximum width a darklogo may have
+const maxWidth = 200
+// Horizontal padding between darklogos
+const xPadding = 40
+// Vertical padding between rows of darklogos
+const yPadding = 20
+
+/**
+ * Build an SVG response body with rows of evenly-spaced sponsor darklogos wrapped in anchors.
+ * @returns string
+ */
+const buildResponse = () => {
+  let images = []
+  let totalHeight = 0
+  let currentX = 0
+  let currentY = 0
+  let rowCount = 1
+
+  featuredSponsors.map((sponsor, index) => {
+    const dimensions = sizeOf("./public/" + sponsor.darklogo)
+
+    let [w, h] = getScaledImageDimensions(dimensions.width, dimensions.height)
+
+    if (currentX + w + xPadding > overallWidth) {
+      currentX = 0
+      currentY += maxHeight + yPadding
+      rowCount += 1
+    }
+
+    let yOffset = (maxHeight - h) / 2
+
+    images.push({
+      href: baseUrl + sponsor.darklogo,
+      path: `./public/${sponsor.darklogo}`,
+      x: currentX,
+      y: currentY + yOffset,
+      height: h,
+      width: w,
+      url: sponsor.url,
+    })
+
+    currentX += w + xPadding
+  })
+
+  totalHeight = (maxHeight + yPadding) * rowCount
+
+  let response = `
+    <svg
+      width="${overallWidth}"
+      height="${totalHeight}"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+  `
+
+  images.map((image) => {
+    response += `
+      <a xlink:href="${image.url}" target="_blank">
+        <image href="${base64Img.base64Sync(image.path)}" x="${image.x}" y="${image.y}" height="${image.height}" width="${image.width}" />
+      </a>
+    `
+  })
+
+  response += `</svg>`
+
+  return response;
+}
+
+/**
+ * Take the original width and height of an image and proportionally scale it
+ * for optical balance in this layout.
+ * @param {*} width
+ * @param {*} height
+ * @returns [w, h]
+ */
+const getScaledImageDimensions = (width, height) => {
+  let h = height
+  let w = width
+  const ratio = w / h
+
+  if (ratio < 1) {
+    h = maxHeight
+    w = (maxHeight / height) * width
+  }
+
+  if (ratio === 1) {
+    h = maxHeight
+    w = maxHeight
+  }
+
+  if (ratio > 1) {
+    h = maxHeight
+    w = (maxHeight / height) * width
+  }
+
+  if (ratio > 2) {
+    h = maxHeight * 0.75
+    w = ((maxHeight * 0.75) / height) * width
+  }
+
+  if (ratio > 3) {
+    w = maxWidth
+    h = (maxWidth / width) * height
+  }
+
+  return [w, h];
+}
+
+export async function get({ params, request }) {
+  return {
+    body: buildResponse(),
+  }
+}