Merge pull request #21 from data-miner00/dev

Minor updates

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>

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

nuxt.config.ts

@@ -91,4 +91,7 @@ export default defineNuxtConfig({
       language: "en",
     },
   },
+  image: {
+    provider: "netlify", // Use your own provider!
+  },
 });

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>