feat(icons): get medium sized icon

inframanufaktur · Oct 24, 2022 · 26a6219 · 26a6219
1 parent 1474a6c
commit 26a6219
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/_src/_data/_utils/img.js b/_src/_data/_utils/img.js
@@ -10,16 +10,34 @@ const supportedFormats = new Map([
 
 const getFileExtension = (fileName) => fileName.split('.').pop()
 
-async function makeIcon(icon) {
-  const format = supportedFormats.get(getFileExtension(icon.href.pathname))
+/**
+ *
+ *
+ * @param {Array} icons
+ * @return {String}
+ */
+async function makeIcon(icons) {
+  const sized = icons.filter(({ sizes }) => sizes !== null)
+  let icon = null
+  let width = null
+
+  if (sized.length) {
+    icon = sized.sort((a, b) => a.sizes.localeCompare(b.sizes))[
+      Math.ceil(sized.length / 2)
+    ]
+    width = parseInt(icon.sizes)
+  } else {
+    icon = icons[0]
+  }
 
-  if (!format) {
-    icon.parsedIcon = icon.href.href
+  const format = supportedFormats.get(getFileExtension(icon.url.pathname))
 
-    return icon
+  if (!format) {
+    return icon.url.href
   }
-  const parsed = await Image(icon.href.href, {
-    width: [null],
+
+  const parsed = await Image(icon.url.href, {
+    width: [width],
     formats: [format],
     urlPath: '/icons/',
     outputDir: './dist/icons/',
@@ -28,9 +46,7 @@ async function makeIcon(icon) {
     },
   })
 
-  icon.parsedIcon = parsed[format][0].url
-
-  return icon
+  return parsed[format][0].url
 }
 
 module.exports = { makeIcon }
diff --git a/_src/_data/feeds.js b/_src/_data/feeds.js
@@ -44,8 +44,8 @@ module.exports = async function () {
       console.groupEnd()
     }
 
-    if (content.meta.icon) {
-      content.meta.icon = await makeIcon(content.meta.icon)
+    if (content.meta.icons.length) {
+      content.meta.parsedIcon = await makeIcon(content.meta.icons)
     }
 
     for (const post of content.posts) {

diff --git a/_src/index.11ty.js b/_src/index.11ty.js
@@ -12,8 +12,8 @@ module.exports = class Homepage {
             (feed) =>
               `<li style="display: flex; align-items: center;">
                 ${
-                  feed.data.feed.meta.icon
-                    ? `<img src="${feed.data.feed.meta.icon.parsedIcon}" alt="" style="display: inline-block; width: 1rem; margin-right: 0.5rem;"/>`
+                  feed.data.feed.meta.parsedIcon
+                    ? `<img src="${feed.data.feed.meta.parsedIcon}" alt="" style="display: inline-block; width: 1rem; margin-right: 0.5rem;"/>`
                     : ''
                 }
                 <a href="${feed.data.permalink}">${