Only show skeletons on special dates

src/App.svelte

@@ -9,12 +9,12 @@
     import Links from "./lib/routes/Links.svelte";
     import FirstPost from "./lib/posts/FirstPost.svelte";
     import NotFound from "./lib/routes/NotFound.svelte";
+    import Skeletons from "./lib/Skeletons.svelte";
 </script>
 
 <Router>
     <h1>sofi web</h1>
-    <img class="left-skeleton" alt="Esqueleto" src="/assets/skeleton.gif" />
-    <img class="right-skeleton" alt="Esqueleto" src="/assets/skeleton.gif" />
+    <Skeletons/>
     <div>
         <nav>
             <Navbar/>
@@ -63,25 +63,4 @@
             width: 90%;
         }
     }
-
-    img {
-        width: 200px;
-        position: fixed;
-        bottom: -10px;
-    }
-
-    .left-skeleton {
-        left: -10px;
-    }
-
-    .right-skeleton {
-        right: -10px;
-    }
-
-    @media only screen and (max-width: 1000px) {
-        img {
-            width: 70px;
-            top: 0;
-        }
-    }
 </style>

src/lib/Skeletons.svelte

@@ -0,0 +1,48 @@
+<script>
+    let _date = new Date()
+
+    const two_digits = (input) => {
+        if (input < 10) {
+            return `0${input}`
+        } else {
+            return `${input}`
+        }
+    }
+
+    let date = `${two_digits(_date.getUTCDay() + 1)}-${two_digits(_date.getUTCMonth() + 1)}-${two_digits(_date.getUTCFullYear())}`
+</script>
+
+{#if date.startsWith("23-12")}
+    <img class="left" alt="Esqueleto" src="/assets/skeletons/christmas.gif" />
+    <img class="right flip" alt="Esqueleto" src="/assets/skeletons/christmas.gif" />
+{:else if date.startsWith("31-10")}
+    <img class="left" alt="Esqueleto" src="/assets/skeletons/default.gif" />
+    <img class="right" alt="Esqueleto" src="/assets/skeletons/default.gif" />
+{/if}
+
+<style>
+    img {
+        width: 200px;
+        position: fixed;
+        bottom: -10px;
+    }
+
+    .left {
+        left: -10px;
+    }
+
+    .right {
+        right: -10px;
+    }
+
+    .flip {
+        transform: scaleX(-1);
+    }
+
+    @media only screen and (max-width: 1000px) {
+        img {
+            width: 70px;
+            top: 0;
+        }
+    }
+</style>