feat(images): better layout

src/images.ts

@@ -28,7 +28,10 @@ export const images = async (doc: Document) => {
   //Fix images link
   data.imgs.forEach(el => (el.url.includes('cdn.vox-cdn.com') ? (el.url = 'https://cdn.vox-cdn.com' + el.url.split('cdn.vox-cdn.com')[2]) : null))
   data.imgs.forEach(el => (el.url.includes('play-lh.googleusercontent.com') ? (el.url = el.url.split('\\')[0]) : null))
-  data.imgs.forEach(el => (el.url.includes('\u003d') ? (el.url = el.url.replace('\u003d', '=')) : null)) //TODO: Find why it's not working
+  data.imgs.forEach(el => el.url.replace('\u003d', '=')) //TODO: Find why it's not working
+  data.imgs.forEach(el => (el.url = el.url.split('/revision/latest')[0]))
+
+  //TODO: optimize images (see https://www.industrialempathy.com/posts/image-optimizations)
 
   return await renderFile('./views/images.hbs', data)
 }

views/images.hbs

@@ -125,19 +125,13 @@
       justify-content: space-between;
     }
 
-    article {
-      background: var(--gray);
-      border-radius: 25px;
-      padding: .5rem .5rem 1rem .5rem;
-      border: 0.5px solid var(--border);
-      margin: .5rem;
-    }
-
-    article>img {
+    img {
       height: 8vw;
+      width: 100;
       border-radius: 5px;
       display: block;
       margin: .75rem auto;
+      content-visibility: auto;
     }
 
     .title {
@@ -178,14 +172,8 @@
   </header>
   <main>
     {{#imgs}}
-      <article>
-        <img loading="lazy" src={{url}}
-          alt={{title}}>
-        <a href="#" class="title">{{title}}</a>
-        <br>
-        <a href="#"
-          class="subtitle">{{subtitle}}</a>
-      </article>
+      <img loading="lazy" src={{url}}
+        alt={{title}}>
     {{/imgs}}
   </main>
   <nav>