From 8c6b701c87931ea54edaa2597f308d3311fa6076 Mon Sep 17 00:00:00 2001
From: samipe <sami_kolari@hotmail.com>
Date: Thu, 25 Apr 2024 15:49:37 +0300
Subject: [PATCH] news picture prefers-color-scheme support

---
 src/components/News.vue    | 16 +++++++++++++---
 src/js/contentfulClient.js |  3 ++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/News.vue b/src/components/News.vue
index 9f1c094f..177949bc 100644
--- a/src/components/News.vue
+++ b/src/components/News.vue
@@ -21,7 +21,13 @@
         :key="entry.id"
         class="flex border-bottom-bg p-medium">
         <div class="col-sm-3 pr-xsmall">
-          <img v-if="entry.image" :src="`${entry.image.file.url}${imgUrlParams}`" class="main block" />
+          <picture v-if="entry.image?.file?.url" class="main block">
+            <source :srcset="`${entry.image?.file?.url}${imgUrlParams}`" media="(prefers-color-scheme: light)"/>
+            <source v-if="entry.imageDark" :srcset="`${entry.imageDark.file?.url}${imgUrlParams}`" media="(prefers-color-scheme: dark)"/>
+            <!-- fallback -->
+            <img :src="`${entry.image?.file?.url}${imgUrlParams}`"/>
+          </picture>
+          <robot-icon v-else size="1.75rem" style="float: right"/>
         </div>
         <div class="col-sm-9 pl-xsmall">
           <a v-if="entry.link" :href="entry.link" target="blank" class="mb-none line-height-1">
@@ -42,7 +48,11 @@
 <script>
 import { getNews } from '../js/contentfulClient'
 import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
+import { RobotIcon } from './icons'
 export default {
+  components: {
+    RobotIcon
+  },
   data: () => ({
     expanded: false,
     news: [],
@@ -103,10 +113,10 @@ export default {
   }
   @media (prefers-color-scheme: dark) {
     .inner-news-container:not(.expanded)::after {
-    background: linear-gradient(transparent 80%, #1a1a1a 100%);
+      background: linear-gradient(transparent 80%, #1a1a1a 100%);
     }
   }
-  img.main {
+  picture.main, picture img {
     width: 100%;
     border-radius: 0.25rem;
   }
diff --git a/src/js/contentfulClient.js b/src/js/contentfulClient.js
index e4ffd09f..f60991d0 100644
--- a/src/js/contentfulClient.js
+++ b/src/js/contentfulClient.js
@@ -27,7 +27,8 @@ export const getNews = async() => {
     })
     .then(({ items }) => items.map(({ fields }) => ({
       ...fields,
-      image: fields.image?.fields
+      image: fields.image?.fields,
+      imageDark: fields.imageDark?.fields // optional, for darkmode, eg white text variant
     })))
   return items
 }