From 352a1271168dbbf9783799339da12874d5ecc963 Mon Sep 17 00:00:00 2001
From: data-miner00 <data-miner00@users.noreply.github.com>
Date: Sat, 23 Mar 2024 19:20:29 +0800
Subject: [PATCH 1/3] fix: Use image flag instead of emoji

---
 components/LanguageSwitcher.vue      | 24 ++++++++++++++++++++----
 public/images/flag-france.svg        |  1 +
 public/images/flag-united-states.svg |  1 +
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 public/images/flag-france.svg
 create mode 100644 public/images/flag-united-states.svg

diff --git a/components/LanguageSwitcher.vue b/components/LanguageSwitcher.vue
index b901183..27ebbd2 100644
--- a/components/LanguageSwitcher.vue
+++ b/components/LanguageSwitcher.vue
@@ -44,25 +44,41 @@ function closePopup() {
     </button>
     <div
       v-if="isPopupOpen"
-      class="absolute -bottom-36 right-0 flex flex-col items-stretch rounded"
+      class="absolute -bottom-40 right-0 flex flex-col items-stretch rounded"
     >
       <NuxtLink
         :to="switchLocalePath('fr')"
         @click="closePopup"
         class="language"
-        ><span class="block">🇫🇷</span> Français</NuxtLink
       >
+        <span class="block">
+          <NuxtImg
+            src="/images/flag-france.svg"
+            alt="The flag of France"
+            class="h-8"
+          />
+        </span>
+        <span class="block"> Français </span>
+      </NuxtLink>
       <NuxtLink
         :to="switchLocalePath('en')"
         @click="closePopup"
         class="language"
-        ><span class="block">🇺🇸</span> English</NuxtLink
       >
+        <span class="block">
+          <NuxtImg
+            src="/images/flag-united-states.svg"
+            alt="The flag of the States"
+            class="h-8"
+          />
+        </span>
+        <span class="block">English</span>
+      </NuxtLink>
     </div>
   </div>
 </template>
 
 <style scoped lang="sass">
 .language
-  @apply p-2 block hover:border-gray-200 dark:hover:border-slate-600 dark:hover:bg-slate-700 hover:bg-white border border-solid border-transparent rounded text-center
+  @apply p-2 flex flex-col items-center hover:border-gray-200 dark:hover:border-slate-600 dark:hover:bg-slate-700 hover:bg-white border border-solid border-transparent rounded text-center
 </style>
diff --git a/public/images/flag-france.svg b/public/images/flag-france.svg
new file mode 100644
index 0000000..2859bcf
--- /dev/null
+++ b/public/images/flag-france.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"><path d="m5 17h62v38h-62z" fill="#fff"/><path d="m5 17h21v38h-21z" fill="#1e50a0"/><path d="m46 17h21v38h-21z" fill="#d22f27"/><path d="m5 17h62v38h-62z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
\ No newline at end of file
diff --git a/public/images/flag-united-states.svg b/public/images/flag-united-states.svg
new file mode 100644
index 0000000..880e3e8
--- /dev/null
+++ b/public/images/flag-united-states.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"><path d="m5 17h62v38h-62z" fill="#fff"/><path d="m5 17h62v5h-62z" fill="#d22f27"/><path d="m5 26h62v4h-62z" fill="#d22f27"/><path d="m5 34h62v4h-62z" fill="#d22f27"/><path d="m5 17h32v21h-32z" fill="#1e50a0"/><path d="m5 42h62v4h-62z" fill="#d22f27"/><g fill="#fff"><circle cx="9.5" cy="22" r="1.75"/><circle cx="17.5" cy="22" r="1.75"/><circle cx="25.5" cy="22" r="1.75"/><circle cx="33.5" cy="22" r="1.75"/><circle cx="29.5" cy="26" r="1.75"/><circle cx="21.5" cy="26" r="1.75"/><circle cx="13.5" cy="26" r="1.75"/><circle cx="9.5" cy="30" r="1.75"/><circle cx="17.5" cy="30" r="1.75"/><circle cx="25.5" cy="30" r="1.75"/><circle cx="33.5" cy="30" r="1.75"/><circle cx="29.5" cy="34" r="1.75"/><circle cx="21.5" cy="34" r="1.75"/><circle cx="13.5" cy="34" r="1.75"/></g><path d="m5 50h62v5h-62z" fill="#d22f27"/><path d="m5 17h62v38h-62z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
\ No newline at end of file

From ea9fb56f8ec027febe6b6c19b92e66d8d09b22b5 Mon Sep 17 00:00:00 2001
From: data-miner00 <data-miner00@users.noreply.github.com>
Date: Sat, 23 Mar 2024 19:55:29 +0800
Subject: [PATCH 2/3] feat: Table of content on mobile

---
 components/TableOfContent.vue | 2 +-
 pages/[...slug].vue           | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/TableOfContent.vue b/components/TableOfContent.vue
index 5dd9813..65387cf 100644
--- a/components/TableOfContent.vue
+++ b/components/TableOfContent.vue
@@ -26,7 +26,7 @@ var scrollToTop = function () {
 
 <template>
   <aside
-    class="sticky top-[350px] bg-white dark:bg-slate-800 font-bold rounded-lg border border-solid border-gray-200 dark:border-gray-700 xl:w-[272px] text-sm transform -translate-y-60"
+    class="lg:sticky lg:top-[350px] bg-white dark:bg-slate-800 font-bold rounded-lg border border-solid border-gray-200 dark:border-gray-700 xl:w-[272px] text-sm transform lg:-translate-y-60"
     aria-label="Table of Content"
   >
     <header
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 902e9dd..04be2bc 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -83,9 +83,11 @@ onBeforeUnmount(() => {
       </li>
     </ul>
   </Landing>
-  <main class="mx-auto flex justify-center">
+  <main
+    class="mx-auto flex flex-col-reverse lg:flex-row justify-center px-6 lg:px-0"
+  >
     <article
-      class="prose prose-stone dark:prose-invert max-w-[90%] sm:max-w-[65ch] prose-pre:bg-gray-100 dark:prose-pre:bg-slate-700 dark:prose-pre:text-gray-50 prose-pre:border prose-pre:border-gray-200 dark:prose-pre:border-gray-700 prose-pre:border-solid prose-pre:rounded-lg prose-pre:text-slate-800 prose-headings:text-cyan-600 dark:prose-hr:border-gray-700 dark:prose-li:marker:text-gray-200 dark:prose-blockquote:border-gray-200 prose-headings:scroll-mt-24"
+      class="prose prose-stone dark:prose-invert sm:max-w-[65ch] prose-pre:bg-gray-100 dark:prose-pre:bg-slate-700 dark:prose-pre:text-gray-50 prose-pre:border prose-pre:border-gray-200 dark:prose-pre:border-gray-700 prose-pre:border-solid prose-pre:rounded-lg prose-pre:text-slate-800 prose-headings:text-cyan-600 dark:prose-hr:border-gray-700 dark:prose-li:marker:text-gray-200 dark:prose-blockquote:border-gray-200 prose-headings:scroll-mt-24"
     >
       <ContentRenderer :value="(data as Record<string, any> | undefined)">
         <template #empty>
@@ -112,7 +114,7 @@ onBeforeUnmount(() => {
         <div aria-hidden v-else />
       </div>
     </article>
-    <div v-if="toc" class="relative ml-10 hidden lg:block">
+    <div v-if="toc" class="relative lg:ml-10 lg:block">
       <TableOfContent :toc="toc.links" />
     </div>
   </main>

From 9bd7cb610e856ea507e7e02bac37af503eca0436 Mon Sep 17 00:00:00 2001
From: data-miner00 <data-miner00@users.noreply.github.com>
Date: Sat, 23 Mar 2024 20:09:20 +0800
Subject: [PATCH 3/3] fix: Add missing provider for Nuxt Image

---
 nuxt.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0ef749f..fc141fb 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -91,4 +91,7 @@ export default defineNuxtConfig({
       language: "en",
     },
   },
+  image: {
+    provider: "netlify", // Use your own provider!
+  },
 });