feat: change all png to webp

we care about it in primoprod we care more now

components/index/services.vue

@@ -12,7 +12,7 @@
     </p>
     <!-- i could make this a list but god i'm so tired with nuxt -->
     <div class="flex justify-around flex-wrap gap-8 items-center">
-      <ServiceCard name="Gitea" href="https://git.eggworld.tk" img="gitea.png">
+      <ServiceCard name="Gitea" href="https://git.eggworld.tk" img="gitea.webp">
         Self-hosted GitHub
       </ServiceCard>
       <ServiceCard
@@ -25,25 +25,25 @@
       <ServiceCard
         name="Primoprod"
         href="https://primoprod.eggworld.tk"
-        img="primogem.png"
+        img="primogem.webp"
       >
         Wish simulator
       </ServiceCard>
       <ServiceCard
         name="Calibre"
         href="https://calibre.eggworld.tk"
-        img="calibre-web.png"
+        img="calibre-web.webp"
       >
         Kobo Cloud
       </ServiceCard>
-      <ServiceCard name="Plex" href="https://plex.eggworld.tk" img="plex.png">
+      <ServiceCard name="Plex" href="https://plex.eggworld.tk" img="plex.webp">
         Ad-filled media server
       </ServiceCard>
 
       <ServiceCard
         name="Jellyfin"
         href="https://jellyfin.eggworld.tk"
-        img="jellyfin.png"
+        img="jellyfin.webp"
       >
         FOSS media server
       </ServiceCard>
@@ -51,7 +51,7 @@
       <ServiceCard
         name="Minecraft"
         href="minecraft.eggworld.tk"
-        img="minecraft.png"
+        img="minecraft.webp"
         :unclickable="true"
       >
         Whitelisted

content/blog/2021/3-reasons-to-switch-to-linux.md

@@ -17,7 +17,7 @@ However, this article will largely focus on **desktop Linux**, which competes wi
 
 Perhaps the biggest feature of Linux is its ability to do whatever you want, however you want. After a *tiny* bit of tinkering, you'll be able to set up your computer exactly how you'd like it!
 
-::image{src=sway-desktop.png}
+::image{src=sway-desktop.webp}
 A terminal, an emulated Switch game, a game launcher, and a browser all automagically arranged by a tiling window manager. The currently playing song is in the top bar.
 ::
 

content/blog/2021/dark-mode.md

@@ -9,6 +9,6 @@ On the desktop, dark mode is an abomination that should be eradicated from appli
 
 Browsers, IDEs, and other applications must be freed from their shadowy chains and returned to light — where they truly belong.
 
-::image{src=light-discord.png}
+::image{src=light-discord.webp}
 Perfect.
 ::

content/blog/2021/primoprod-progress-report.md

@@ -34,12 +34,12 @@ At the time, coming from Python/Java, I opted in to the class components plugin
 
 The [first few commits](https://github.com/potatoeggy/primoprod/commit/ed9d94b61bf91ea9b82ac4d832dfb2b9ff2efc59) had me playing around until I was comfortable enough to introduce my very [first component](https://github.com/potatoeggy/primoprod/commit/fcbb4068dd3b018db2809ccfcc5381d4ea3ae727): the WishButton.
 
-::image{src=wish-button-emulated.png}
+::image{src=wish-button-emulated.webp}
 ::
 
 I'd say it turned out pretty well! Since I wanted to emulate Genshin's UI, I wanted to match it as closely as I could. These two buttons are made of an image inside of a div relatively positioned with text absolutely positioned inside. Original image for comparison:
 
-::image{src=wish-button-original.png}
+::image{src=wish-button-original.webp}
 ::
 
 There are still some differences between the texts since Genshin uses antialiasing, and the alignment and shadow of the icon beside the wish quantity is slightly off too, but I would consider this result to be acceptable.
@@ -58,7 +58,7 @@ See [GemCounter](https://github.com/potatoeggy/primoprod/blob/master/src/compone
 
 Although I had read up on [MDN's](https://developer.mozilla.org/en-US/) fantastic tutorials/documentation a fair bit and used flexboxes and `rem` everywhere, I apparently did not catch `box-sizing: border-box` and the margins and padding just did not arrange themselves how they should have.
 
-::image{src=mdn-box-sizing-tip.png}
+::image{src=mdn-box-sizing-tip.webp}
 ::
 
 :/ thanks MDN for letting me know
@@ -69,12 +69,12 @@ Although I had read up on [MDN's](https://developer.mozilla.org/en-US/) fantasti
 
 Designing the basic screen was pretty straightforward. For all its woes, pure CSS still works and is intuitive enough that my git history was only slightly too messy and I got my results.
 
-::image{src=primoprod-wishbanners.png}
+::image{src=primoprod-wishbanners.webp}
 ::
 
 Pretty good, right? Now, the design still isn't adaptive enough *since things get cut off for who knows why I thought flexboxes were supposed to solve all this* but for the most part it looks good enough. It appears I'll have to make a lot of exceptions for mobile devices…
 
-::image{src=primoprod-wishbanners-scaled.png}
+::image{src=primoprod-wishbanners-scaled.webp}
 ::
 
 With some help taken by examining the assets of https://genshin.thekima.com and https://gi-wish-simulator.uzairashraf.dev, I grabbed a static background image as well as the videos!
@@ -144,10 +144,10 @@ In fact, I consider those two to be 100% done unless I can find a way to apply a
 
 But it looks great!
 
-::image{src=itemdescriptionoverlay.png}
+::image{src=itemdescriptionoverlay.webp}
 ::
 
-::image{src=itemobtainoverlay.png}
+::image{src=itemobtainoverlay.webp}
 ::
 
 ## Wrapping up

content/blog/2022/primoprod-progress-report-2.md

@@ -14,7 +14,7 @@ This report will cover from where the previous left off to the present day: 21 A
 
 ## No more
 
-::image{src="primoprod-itemrevealscreen.png"}
+::image{src="primoprod-itemrevealscreen.webp"}
 ::
 
 It's done. The pull screen is done. The element/weapon icon was added to the pull. Audio syncs up (well enough). The only thing missing is all of the fancy effects like glow and particles.
@@ -23,7 +23,7 @@ Nah, this is good enough.
 
 ## Take this!
 
-::image{src="primoprod-questscreen.png"}
+::image{src="primoprod-questscreen.webp"}
 ::
 
 Until now, you had to manually edit the browser's `localStorage` to gain any currency. The quest screen makes primoprod finally usable as now you can make your own long-term "quests" that give 900 Primogems each as well as set four daily "tasks" that give 30 Primogems each plus 60 when all are done — if only the base game was this generous. These are editable and can have whatever title or description you want. The logic here went through several rewrites as the structure was finalised and an interface developed to the rest of primoprod. Dailies will automatically refresh themselves on the next day.
@@ -56,7 +56,7 @@ Sounds incredible, right? As it turns out, as you gain more experience with tech
 
 This is why [the shop](https://github.com/potatoeggy/primoprod/blob/master/src/components/ShopScreen.vue) and the [dialog to buy things from the shop](https://github.com/potatoeggy/primoprod/blob/master/src/components/ItemPurchaseOverlay.vue) are so nicely done! It reused most of my types and was admittedly much simpler than some of the other screens, but I only ran into one insurmountable problem: range styling.
 
-::image{src="primoprod-itempurchaseoverlay.png"}
+::image{src="primoprod-itempurchaseoverlay.webp"}
 ::
 
 *I wish I was actually this rich in the base game.*
@@ -127,7 +127,7 @@ Back to laptop compilation we go!
 
 Obviously, you aren't a *real* free and open source project if you don't have [pretty badges](https://github.com/potatoeggy/primoprod/blob/master/README.md) on your README. This was a major concern, so I copied Vue's style and now made primoprod a proper FOSS repo — build checkmark and badges and all!
 
-::image{src="primoprod-badges.png"}
+::image{src="primoprod-badges.webp"}
 ::
 
 ## Kids and their phones
@@ -140,7 +140,7 @@ ItemRevealScreen? What's that? Now [WishBanners](https://github.com/potatoeggy/p
 
 At last, though, we have a [proper mobile UI](https://github.com/potatoeggy/primoprod/pull/33).
 
-::image{src="mobile-primoprod.png"}
+::image{src="mobile-primoprod.webp"}
 ::
 
 Still some niggles to work out, but it looks "good enough"! With the completion of proper mobile orientation came the merging of the [Android branch](https://github.com/potatoeggy/primoprod/pull/32) made with [Capacitor.js](https://capacitorjs.com/), basically the mobile equivalent of Electron. It has even more niggles than the web version does.