Merge pull request #30 from data-miner00/minifix

Minifix

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Chong Mum Khong
+Copyright (c) 2024 Chong Mum Khong
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -39,6 +39,7 @@
       <a href="#about-the-project">About The Project</a>
       <ul>
         <li><a href="#built-with">Built With</a></li>
+        <li><a href="#features">Features</a></li>
       </ul>
     </li>
     <li>
@@ -112,6 +113,8 @@ This template currently offers the following features. For more info, please rea
 - Vue utilities
   - Powerful hooks (`@vueuse/core`)
   - Animation (`@vueuse/motion`)
+- 404 Page (the `/resource` url does not exist)
+- Ultra-fast loading speed
 - Support for Node 18 and Node 20
 - Typo checking (need to install from [crates-ci/typos](https://github.com/crate-ci/typos))
 - Sass support (although I don't remember using it 😁)

components/LanguageSwitcher.vue

@@ -12,6 +12,7 @@ function closePopup() {
     <button
       @click="() => (isPopupOpen = !isPopupOpen)"
       class="flex ml-2 items-center justify-between px-2 py-2 bg-gray-100 dark:bg-slate-700 rounded-md"
+      :title="$t('header.buttons.change_language')"
     >
       <svg
         fill="none"

components/TableOfContent.vue

@@ -36,7 +36,7 @@ var scrollToTop = function () {
 
       <button
         v-show="isShowToTopButton"
-        class="text-xs border border-solid border-gray-200 dark:border-gray-700 rounded-full block px-2 py-[1px] text-green-600 dark:text-cyan-600"
+        class="text-xs border border-solid border-gray-200 dark:border-gray-700 rounded-full block px-2 py-[1px] text-green-600"
         @click="scrollToTop"
       >
         scroll to top
@@ -67,7 +67,7 @@ var scrollToTop = function () {
 
 <style lang="scss" scoped>
 a.active {
-  @apply bg-gray-50 dark:bg-slate-700 text-green-600 dark:text-cyan-600;
+  @apply bg-gray-50 dark:bg-slate-700 text-green-600;
 }
 
 button {

components/ThemeSwitcher.vue

@@ -13,6 +13,7 @@ function selectTheme(selectedTheme: "system" | "light" | "dark") {
     <button
       class="px-2 py-2 bg-gray-100 dark:bg-slate-700 rounded-md"
       @click="open = !open"
+      :title="$t('header.buttons.change_theme')"
     >
       <svg
         v-if="colorMode.value === 'light'"

components/VHeader.vue

@@ -77,6 +77,7 @@ onUnmounted(() => {
           class="hidden lg:block p-2"
           target="_blank"
           rel="noreferrer noopener"
+          :title="$t('header.buttons.github_repo')"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"

locales/en.json

@@ -31,7 +31,12 @@
     "guide": "Guide",
     "demo": "Demo",
     "resources": "Resources",
-    "blogs": "Blogs"
+    "blogs": "Blogs",
+    "buttons": {
+      "change_theme": "Change theme",
+      "change_language": "Change language",
+      "github_repo": "Link to GitHub"
+    }
   },
   "footer": {
     "description": "The ultimate `.md` template powered by green technologies. ",

locales/fr.json

@@ -31,7 +31,12 @@
     "guide": "Guide",
     "demo": "Démo",
     "resources": "Ressources",
-    "blogs": "Blogs"
+    "blogs": "Blogs",
+    "buttons": {
+      "change_theme": "Changer de thème",
+      "change_language": "Changer la langue",
+      "github_repo": "Lien vers GitHub"
+    }
   },
   "footer": {
     "description": "Le modèle `.md` ultime alimenté par des technologies vertes.",

nuxt.config.ts

@@ -23,7 +23,7 @@ export default defineNuxtConfig({
         lang: "en",
       },
       bodyAttrs: {
-        class: "dark:bg-slate-800 dark:text-gray-50",
+        class: "dark:bg-slate-800 dark:text-gray-50 text-gray-800",
       },
     },
   },

package.json

@@ -4,7 +4,7 @@
   "author": "Shaun Chong <mumk0313@gmail.com>",
   "license": "MIT",
   "private": true,
-  "version": "1.2.1",
+  "version": "1.2.2",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",

pages/[...slug].vue

@@ -57,7 +57,7 @@ onBeforeUnmount(() => {
 
 <template>
   <Landing>
-    <span class="text-cyan-600 text-lg md:text-2xl font-bold mb-5">{{
+    <span class="text-green-600 text-lg md:text-2xl font-bold mb-5">{{
       data?.topic
     }}</span>
     <h1
@@ -87,7 +87,7 @@ onBeforeUnmount(() => {
     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 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 dark:prose-tr:border-gray-500 dark:prose-thead:border-gray-400"
+      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-green-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 dark:prose-tr:border-gray-500 dark:prose-thead:border-gray-400"
     >
       <ContentRenderer :value="(data as Record<string, any> | undefined)">
         <template #empty>

pages/index.vue

@@ -92,7 +92,7 @@ const { data: navigation } = await useAsyncData("navigation", () =>
     </ul>
   </section>
   <section class="lg:max-w-[75rem] mx-auto px-6 pb-10 my-12 lg:my-[100px]">
-    <p class="text-lg text-sky-600 font-bold lg:mb-2">
+    <p class="text-lg text-green-600 font-bold lg:mb-2">
       {{ $t("homePage.sitemap.sitemap") }}
     </p>
     <h2 class="text-2xl lg:text-4xl font-bold mb-4">