From 3bc334f0f3059b4ffe31f08ca759092b02513017 Mon Sep 17 00:00:00 2001
From: eggy <danielchen04@hotmail.ca>
Date: Fri, 29 Dec 2023 17:34:57 -0500
Subject: [PATCH] chore: use builtin proseimg over custom element

---
 .../content/{image.vue => ProseImg.vue}       |  8 ++++---
 .../blog/2021/3-reasons-to-switch-to-linux.md | 21 +++++++----------
 content/blog/2021/dark-mode.md                |  4 +---
 .../blog/2021/primoprod-progress-report.md    | 23 ++++++-------------
 content/blog/2022/github-for-dummies.md       | 11 +++------
 content/blog/2022/how-to-emulate.md           |  4 +---
 .../blog/2022/primoprod-progress-report-2.md  | 18 +++++----------
 content/blog/2023/sunsetting-eifueo.md        |  8 ++-----
 package.json                                  |  1 +
 yarn.lock                                     |  5 ++++
 10 files changed, 39 insertions(+), 64 deletions(-)
 rename components/content/{image.vue => ProseImg.vue} (53%)

diff --git a/components/content/image.vue b/components/content/ProseImg.vue
similarity index 53%
rename from components/content/image.vue
rename to components/content/ProseImg.vue
index ed62c79..0e4db9d 100644
--- a/components/content/image.vue
+++ b/components/content/ProseImg.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const props = defineProps<{ src: string }>();
+const props = withDefaults(defineProps<{ src: string; alt?: string }>(), {
+  alt: "",
+});
 
 const src = props.src;
 const imgSrc =
@@ -10,7 +12,7 @@ const imgSrc =
 
 <template>
   <figure class="flex flex-col items-center">
-    <img :src="imgSrc" class="drop-shadow-lg" />
-    <figcaption class="text-center m-0"><slot /></figcaption>
+    <img :src="imgSrc" class="drop-shadow-lg" :alt="alt" />
+    <figcaption class="text-center" v-if="alt">{{ alt }}</figcaption>
   </figure>
 </template>
diff --git a/content/blog/2021/3-reasons-to-switch-to-linux.md b/content/blog/2021/3-reasons-to-switch-to-linux.md
index 6a6dea8..148fd08 100644
--- a/content/blog/2021/3-reasons-to-switch-to-linux.md
+++ b/content/blog/2021/3-reasons-to-switch-to-linux.md
@@ -13,13 +13,11 @@ First, what is Linux? At its heart, it is a [kernel](https://en.wikipedia.org/wi
 
 However, this article will largely focus on **desktop Linux**, which competes with other operating systems such as Windows and macOS.
 
-# Complete freedom
+## Complete freedom
 
 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.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.
-::
+![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.](sway-desktop.webp)
 
 Or, if you aren't the type to spend hours fiddling every little thing, you can choose from a variety of existing default desktop interfaces.
 
@@ -33,8 +31,7 @@ Or Plasma's endless customisation:
 
 ![](https://upload.wikimedia.org/wikipedia/commons/9/94/KDE_Plasma_5.21_Breeze_Twilight_screenshot.png)
 
-::image{src=https://www.omgubuntu.co.uk/wp-content/uploads/2019/07/kde-plasma-desktop.jpg}
-::
+![](https://www.omgubuntu.co.uk/wp-content/uploads/2019/07/kde-plasma-desktop.jpg)
 
 And this is only the beginning — it's not just appearance you have control over, although both GNOME and Plasma also come with their assortment of applications that have designs that perfectly mesh with the desktop, with global theming letting you click a single button in your settings menu to change colours or styles across all your apps.
 
@@ -42,7 +39,7 @@ Don't like your file manager? Swap it out for one of the dozens out there. Don't
 
 **You can do anything.**
 
-# The package manager
+## The package manager
 
 Speaking of the update manager…
 
@@ -56,22 +53,20 @@ Here are just a couple of the graphical stores available:
 
 GNOME Software for GNOME:
 
-::image{src=https://www.omgubuntu.co.uk/wp-content/uploads/2021/02/gnome-software-refresh.jpg}
-::
+![](https://www.omgubuntu.co.uk/wp-content/uploads/2021/02/gnome-software-refresh.jpg)
 
 Discover for Plasma:
 
-::image{src=https://userbase.kde.org/images.userbase/thumb/2/2d/Discoverappfocus.png/500px-Discoverappfocus.png}
-::
+![](https://userbase.kde.org/images.userbase/thumb/2/2d/Discoverappfocus.png/500px-Discoverappfocus.png)
 
 By contrast, the Microsoft Store was (is) a complete and utter mess that is nowhere near the integration and experience Linux has had for decades.
 
-# Open source
+## Open source
 
 Not only that, desktop Linux was built by thousands of volunteers, each contributing their own code to make the best product they can. Because it's completely open source (anyone can see or edit the source code), it's inherently more secure as simply more people are looking at it to fix issues and squash bugs.
 
 Learning Linux is a great opportunity to jump into learning more about computers because of the knowledge you gain over time of how your computer works on a fundamental level as you inevitably start troubleshooting *when* something breaks. And perhaps you'll be the one to contribute back upstream to the project too, if you fix a bug or add a new feature, and have your own code distributed around to millions of other users.
 
-# Try it now!
+## Try it now!
 
 With dozens of well-maintained versions of Linux operating systems out there, you'll be sure to find one that suits your needs. To try GNOME, [Pop!_OS](https://pop.system76.com/) or [Fedora](https://getfedora.org/en/workstation/download/) provide a seamless out-of-the-box experience. To try Plasma, [Kubuntu](https://kubuntu.org/) is a fantastic starting point. To get a macOS-like feel, [Elementary OS](https://elementary.io/) gives you that Apple vibe while, like every other Linux OS, is completely free of charge, and lets you try it out before you decide to install it.
diff --git a/content/blog/2021/dark-mode.md b/content/blog/2021/dark-mode.md
index f87f3b3..e39bb4c 100644
--- a/content/blog/2021/dark-mode.md
+++ b/content/blog/2021/dark-mode.md
@@ -9,6 +9,4 @@ 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.webp}
-Perfect.
-::
+![Perfect.](light-discord.webp)
\ No newline at end of file
diff --git a/content/blog/2021/primoprod-progress-report.md b/content/blog/2021/primoprod-progress-report.md
index 3731f0b..df83158 100644
--- a/content/blog/2021/primoprod-progress-report.md
+++ b/content/blog/2021/primoprod-progress-report.md
@@ -35,13 +35,11 @@ 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.webp}
-::
+![](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.webp}
-::
+![](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.
 
@@ -59,10 +57,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.webp}
-::
-
-:/ thanks MDN for letting me know
+![:/ thanks MDN for letting me know](src=mdn-box-sizing-tip.webp)
 
 [Some foreshadowing](https://github.com/potatoeggy/primoprod/blob/master/src/components/ItemRevealScreen.vue#L224)
 
@@ -70,13 +65,11 @@ 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.webp}
-::
+![](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.webp}
-::
+![](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!
 
@@ -145,11 +138,9 @@ 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.webp}
-::
+![](itemdescriptionoverlay.webp)
 
-::image{src=itemobtainoverlay.webp}
-::
+![](itemobtainoverlay.webp)
 
 ## Wrapping up
 
diff --git a/content/blog/2022/github-for-dummies.md b/content/blog/2022/github-for-dummies.md
index 1d95acf..4b2ad71 100644
--- a/content/blog/2022/github-for-dummies.md
+++ b/content/blog/2022/github-for-dummies.md
@@ -13,10 +13,7 @@ Ever been linked to a GitHub page to download something and couldn't figure out
 
 <!-- more -->
 
-::image{src="https://lh4.googleusercontent.com/u03FMDrVGVaU7x0ojxnNTAnM6_sPaSsnP1R6pZDJaTH95xqiH8LQKBN4OTZoU0Bigf6seLcCcDtSkuxcMwuLqLrCQH2fs6QsUZFyw58DN26sdbJcmMjXrhWjRQg6aoSzu-gBzib3gz20s0uFi_9h5k7QpgbohXqNkXw2pXPfPu4j3VibM_MNlHBK"}
-
-What do all these words mean? Issues? Pull requests? Actions? Projects? Releases?
-::
+![What do all these words mean? Issues? Pull requests? Actions? Projects? Releases?](https://lh4.googleusercontent.com/u03FMDrVGVaU7x0ojxnNTAnM6_sPaSsnP1R6pZDJaTH95xqiH8LQKBN4OTZoU0Bigf6seLcCcDtSkuxcMwuLqLrCQH2fs6QsUZFyw58DN26sdbJcmMjXrhWjRQg6aoSzu-gBzib3gz20s0uFi_9h5k7QpgbohXqNkXw2pXPfPu4j3VibM_MNlHBK)
 
 ### The README and wiki
 
@@ -28,9 +25,7 @@ If that doesn't work, check out the project's wiki if they have one, located in
 
 Now, if neither the README nor wiki have any hints to finding the link you want, you can go to the *Releases* section of the project, which on a desktop browser is in the right sidebar, while on mobile is located at the very bottom of the page.
 
-::image{src="https://lh4.googleusercontent.com/v6G-c31NECe6ZJZhe2YSQXocQ4eCBJhYuXjNWSmECm5QQcSKaMWLpxe_roIkIonkMfUcDK4UtuqQEegVXCD1sAwHQnkssxOEk3uUrnQaMbhXL8zyeXdi0nUNv_QTKFsD5ZAUDJijHv_dc5wdTOEjggZipsIStM3vwaiabiNQ8XUY5bolApOupOwd"}
-In this case, clicking one of the "primoprod" assets with the file extension for your device will get you a runnable program.
-::
+![In this case, clicking one of the "primoprod" assets with the file extension for your device will get you a runnable program.](https://lh4.googleusercontent.com/v6G-c31NECe6ZJZhe2YSQXocQ4eCBJhYuXjNWSmECm5QQcSKaMWLpxe_roIkIonkMfUcDK4UtuqQEegVXCD1sAwHQnkssxOEk3uUrnQaMbhXL8zyeXdi0nUNv_QTKFsD5ZAUDJijHv_dc5wdTOEjggZipsIStM3vwaiabiNQ8XUY5bolApOupOwd)
 
 Releases are the "official" way for projects to upload stable versions of their program to send to others. In the "Assets" section of a release, clicking the link that is not labeled "Source code" will get you a runnable version of the program.
 
@@ -46,7 +41,7 @@ If that doesn't work, right-click the page that clicking "Raw" or "View Raw" ope
 
 Trouble in paradise? If none of the above options worked, you can always file a new issue in the "Issues" tab of the project, where you can report bugs and ask questions directly to the project owner.
 
-![img](https://lh6.googleusercontent.com/l7mlo6OTPsAi17WcYgLeZ39aVp65D_24Kz4PMYOgKArwxJcz4jRcTCtud9UtChEUiUdnVR8sR7_6TvQJAAL2mFcKecLK-hhPvr7De_tPqrvh_mbaNCfVisD2yBn2icaXSl0eFDD4cIHKOzPKOM--2hruiM6qHkC6foW-6Pu63pU9c6FZOid10WXN)
+![](https://lh6.googleusercontent.com/l7mlo6OTPsAi17WcYgLeZ39aVp65D_24Kz4PMYOgKArwxJcz4jRcTCtud9UtChEUiUdnVR8sR7_6TvQJAAL2mFcKecLK-hhPvr7De_tPqrvh_mbaNCfVisD2yBn2icaXSl0eFDD4cIHKOzPKOM--2hruiM6qHkC6foW-6Pu63pU9c6FZOid10WXN)
 
 Remember to read the project's issue guidelines, as some of them have a dedicated support forum or Discord to send help requests to.
 
diff --git a/content/blog/2022/how-to-emulate.md b/content/blog/2022/how-to-emulate.md
index e267847..12d2b09 100644
--- a/content/blog/2022/how-to-emulate.md
+++ b/content/blog/2022/how-to-emulate.md
@@ -19,9 +19,7 @@ Introducing…emulation!
 
 ### TIL converting games to Australian birds will preserve them.
 
-::image{src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Emu_1_-_Tidbinbilla.jpg"}
-(Wikipedia Commons, public domain)
-::
+![(Wikipedia Commons, public domain)](https://upload.wikimedia.org/wikipedia/commons/9/9d/Emu_1_-_Tidbinbilla.jpg)
 
 Though *emu* and *emulation* share three letters, the only other similarity they have is that large entities have tried and failed miserably to stamp them out in the past. Emulation is the process of one system (such as a phone or computer) imitating another one (such as a video game console) to run programs designed for that system. Emus will now forever ravage the Australian wilderness, and emulation has been ruled to be legal in at least the United States.
 
diff --git a/content/blog/2022/primoprod-progress-report-2.md b/content/blog/2022/primoprod-progress-report-2.md
index 6c94374..1551ed4 100644
--- a/content/blog/2022/primoprod-progress-report-2.md
+++ b/content/blog/2022/primoprod-progress-report-2.md
@@ -15,8 +15,7 @@ This report will cover from where the previous left off to the present day: 21 A
 
 ## No more
 
-::image{src="primoprod-itemrevealscreen.webp"}
-::
+![](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.
 
@@ -24,8 +23,7 @@ Nah, this is good enough.
 
 ## Take this!
 
-::image{src="primoprod-questscreen.webp"}
-::
+![](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.
 
@@ -57,8 +55,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.webp"}
-::
+![](primoprod-itempurchaseoverlay.webp)
 
 *I wish I was actually this rich in the base game.*
 
@@ -68,8 +65,7 @@ As you can see, the slider looks very out of place. Why? That's because [only Fi
 
 Up until now, only one banner was supported. This was finally fixed in November with the addition of [banner headers](https://github.com/potatoeggy/primoprod/pull/25) to match the base game. Now, you can simultaneously roll for Qiqi on *both* banners!
 
-::image{src="selected-wanderlust-invocation.webp"}
-::
+![](selected-wanderlust-invocation.webp)
 
 On a side note, did you know that Vue puts all of their reactive things into Proxies? This means you can't simply `console.log(obj)` without going through five more clicks to find what you actually want. No, no. To properly print out the actual object, you have to *copy its contents to a clean, non-reactive Object* for this to work. Why??
 
@@ -128,8 +124,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.webp"}
-::
+![](primoprod-badges.webp)
 
 ## Kids and their phones
 
@@ -141,8 +136,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.webp"}
-::
+![](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.
 
diff --git a/content/blog/2023/sunsetting-eifueo.md b/content/blog/2023/sunsetting-eifueo.md
index 456ae22..5b66b12 100644
--- a/content/blog/2023/sunsetting-eifueo.md
+++ b/content/blog/2023/sunsetting-eifueo.md
@@ -36,9 +36,7 @@ This is perhaps the biggest reason, and I have to say that I'm quite disappointe
 
 High school had many courses that were "expression"-focused, and those were the courses that Eifueo excelled in. English, chemistry, and history all were less about getting the answer or precise process correct, and more about how well you can bullshit your way out of it. Even math was pretty easy to apply a shallow formula and get the right answer.
 
-::image{src=thanks-192-ta.webp}
-We love nice TAs!
-::
+![We love nice TAs!](thanks-192-ta.webp)
 
 Unfortunately, the physics courses are antithetical to everything Eifueo stands for. They have a rigid structure that you can't bullshit your way out of but are also flexible enough that you can't simply apply a formula. The best way to get good is simply to do more problems.
 
@@ -52,6 +50,4 @@ o7  It has served me well.
 
 
 
-::image{src=assessment-art.webp}
-At this rate, I'm going to be an expert in perspective art!
-::
\ No newline at end of file
+![At this rate, I'm going to be an expert in perspective art!](src=assessment-art.webp)
\ No newline at end of file
diff --git a/package.json b/package.json
index 6726336..45b133a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@types/node": "^20.2.5",
     "dayjs": "^1.11.7",
     "nuxt": "3.5.2",
+    "prettier": "^3.1.1",
     "reading-time": "^2.0.0-1",
     "rehype-katex": "^6.0.3",
     "remark-math": "^5.1.1",
diff --git a/yarn.lock b/yarn.lock
index b78c63f..d928ff6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5507,6 +5507,11 @@ postcss@^8.4.23, postcss@^8.4.24:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+prettier@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848"
+  integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==
+
 pretty-bytes@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.1.0.tgz#1d1cc9aae1939012c74180b679da6684616bf804"