Merge pull request #26 from data-miner00/dev

Improvements and fixes

Author: data-miner00

README.md

@@ -192,6 +192,7 @@ List of resources that are helpful and would like to give credit to.
 - [Vue i18n](https://vue-i18n.intlify.dev/)
 - [Nuxt Seo Kit](https://github.com/harlan-zw/nuxt-seo-kit)
 - [Nuxt Image](https://image.nuxtjs.org/)
+- [Nuxt UI](https://ui.nuxt.com/)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

_typos.toml

@@ -0,0 +1,2 @@
+[files]
+extend-exclude = ["locales/fr.json", "content/fr/**/*.md"]

components/FeatureCard.vue

@@ -14,7 +14,7 @@ export default defineComponent({
 
 <template>
   <section
-    class="border overflow-hidden border-solid relative border-gray-200 rounded-xl shadow-lg shadow-gray-200 dark:border-gray-700 dark:shadow-none after:h-6 after:w-12 dark:after:bg-gray-700 after:bg-gray-100 after:absolute after:-top-1 after:-right-4 after:transform after:rotate-45"
+    class="border overflow-hidden border-solid relative border-gray-200 rounded-xl shadow-lg shadow-gray-200 dark:border-gray-700 dark:shadow-none after:h-6 after:w-12 dark:after:bg-gray-700 after:bg-gray-100 after:absolute after:-top-1 after:-right-4 after:transform after:rotate-45 h-full"
   >
     <header
       class="flex items-center border-b border-solid border-gray-200 dark:border-gray-700 p-5"

components/VLinkChildren.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NavItem } from "@nuxt/content/dist/runtime/types";
+
+type Props = {
+  topics: NavItem[] | undefined;
+};
+
+defineProps<Props>();
+</script>
+
+<template>
+  <div :key="topic._id" v-for="(topic, index) in topics" class="pl-4">
+    <NuxtLink :to="topic._path">
+      <span v-if="topics && index < topics?.length - 1">├</span
+      ><span v-else>└</span> <span v-if="topic.children">📁</span
+      ><span v-else>📃</span>
+      {{ topic.title }}
+    </NuxtLink>
+    <VLinkChildren :topics="topic.children" />
+  </div>
+</template>

components/content/ApaReference.vue

@@ -4,7 +4,7 @@ type Props = {
   authors?: string[];
   organization?: string;
   title: string;
-  date: string;
+  date?: string;
   retrievedDate?: string;
   publisher?: string;
   url: string;
@@ -38,13 +38,16 @@ const hasAuthor = computed(() => props.authors || props.organization);
 <template>
   <div class="pl-8 md:pl-16 -indent-8 md:-indent-16 mb-4 last-of-type:mb-0">
     <span v-if="hasAuthor">{{ authorsString }}. </span>
-    <time v-if="hasAuthor" :datetime="date">({{ date }}). </time>
+    <time v-if="hasAuthor" :datetime="date">({{ date ?? "n.d." }}). </time>
     <span :class="italicTitle ? 'italic' : ''">
-      {{ punctuatedTitle }}&nbsp;
+      {{ punctuatedTitle }}
     </span>
-    <time v-if="!hasAuthor" :datetime="date">({{ date }}). </time>
-    <span v-if="publisher" :class="!italicTitle ? 'italic' : ''">
-      {{ publisher }}.
+    <time v-if="!hasAuthor" :datetime="date">({{ date ?? "n.d." }}). </time>
+    <span v-if="publisher" :class="!italicTitle ? 'italic' : ''"
+      >&nbsp;{{ publisher }}.
+    </span>
+    <span v-if="!date && source === 'websites'">
+      Retrieved {{ retrievedDate }} from
     </span>
     <a :href="url">{{ url }}</a>
   </div>

components/content/ProseImg.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+type Props = {
+  src: string;
+  alt: string;
+  width?: string | number;
+  height?: string | number;
+};
+
+defineProps<Props>();
+</script>
+
+<template>
+  <div
+    class="img-container w-full rounded-lg border border-solid border-gray-200 dark:border-gray-600 my-5 inline-block"
+  >
+    <NuxtImg
+      :src="src"
+      :alt="alt"
+      class="block mx-auto"
+      :width="width"
+      :height="height"
+    >
+    </NuxtImg>
+  </div>
+</template>
+
+<style>
+.img-container {
+  --pattern-base-color: white;
+  --pattern-box-color: #f6f7f8;
+  background-size: 40px 40px;
+  background-image: linear-gradient(
+      to right,
+      var(--pattern-box-color) 1px,
+      transparent 1px
+    ),
+    linear-gradient(to bottom, var(--pattern-box-color) 1px, transparent 1px);
+  background-color: var(--pattern-base-color);
+  opacity: 0.95;
+  background-position: center;
+}
+
+.dark .img-container {
+  --pattern-base-color: rgb(55 65 81);
+  --pattern-box-color: rgb(47, 61, 80);
+}
+</style>

content/blogs/2.my-second-blog.md

@@ -30,4 +30,4 @@ Finally, after a whole minute later, I finally saw the bus bellowing down the ro
 
 The moment when the bus stopped in front of me, I was flabbergasted and stunned. I couldn't feel my breath anymore and starts to comtemplate about my mixed feelings towards the arrival of the bus.
 
-After regaining my conciousness, I realised that the bus and the fellow peasants has long been gone. "Can like that one meh," I chided.
+After regaining my consciousness, I realised that the bus and the fellow peasants has long been gone. "Can like that one meh," I chided.

content/blogs/_dir.yml

@@ -0,0 +1,2 @@
+title: "My Blogs"
+navigation.description: "Read some of my blogs"

content/demo.md

@@ -11,7 +11,7 @@ tags:
   - reactive
   - rxjs
   - cheatsheet
-updatedAt: 2022-11-18T11:37:49.432Z
+updatedAt: 2024-03-28T11:05:53.157Z
 createdAt: 2022-11-18T11:37:49.432Z
 ---
 
@@ -44,7 +44,7 @@ If you are using [Webpack](https://webpack.js.org/) or other JavaScript bundler,
 
 ## Angular
 
-[Angular](https://angular.io/) is a JavaScript Framework developed by Google. RxJS can be used on the get-go as it is baked into Angular by default so there is no need for a seperate installation. All we need is just the [Angular CLI](https://angular.io/cli) to create a new project to work with.
+[Angular](https://angular.io/) is a JavaScript Framework developed by Google. RxJS can be used on the get-go as it is baked into Angular by default so there is no need for a separate installation. All we need is just the [Angular CLI](https://angular.io/cli) to create a new project to work with.
 
 ```
 ng new <your-project-name>
@@ -125,7 +125,7 @@ const event$ = fromEvent(document, "click");
 event$.subscribe((x) => console.log(x));
 ```
 
-Another observer creation method is `interval`, where it takes in the time inteval in miliseconds and perpetually emits an increment of integer by 1 starting from 0.
+Another observer creation method is `interval`, where it takes in the time interval in milliseconds and perpetually emits an increment of integer by 1 starting from 0.
 
 ```ts
 const periodic$ = interval(1000);

content/fr/_dir.yml

@@ -0,0 +1,2 @@
+title: "la maison"
+navigation.description: "Bienvenue chez moi"

content/fr/blogs/_dir.yml

@@ -0,0 +1,2 @@
+title: "mes blogs"
+navigation.description: "Lisez certains de mes blogs"

content/fr/guide.md

@@ -152,7 +152,7 @@ content/
 
 ![ma belle image](/images/demo.png)
 
-Voici à quoi ressemble une image de portrait dans la prose. Il est aligné à gauche et s'étendra jusqu'à la largeur maximale disponible dans la prose. Les images qui seront diffusées avec l'application peuvent être placées dans le répertoire "public". Par exemple, les images du dossier `/public/images` sont accessibles via le chemin `/images/img.jpg` directement.
+Voici à quoi ressemble une image de portrait dans la prose. Il est centré dans un conteneur personnalisé via le fichier `ProseImg.vue` personnalisé dans le dossier `components/content` et s'étendra jusqu'à la largeur maximale disponible dans le conteneur. Les images qui seront servies avec l'application peuvent être placées dans le répertoire `public`. Par exemple, les images du dossier `/public/images` sont accessibles directement via le chemin `/images/img.jpg`.
 
 ```md
 ![ma belle image](/images/demo.png)
@@ -170,6 +170,20 @@ Pour les images situées dans le dossier `/assets/images`, elles devront être t
 </template>
 ```
 
+### Tableau
+
+Voici à quoi ressemble le tableau par défaut.
+
+| Âge | Personne 1 | Personne 2 | Personne 3 | Moyenne |
+| --- | --- | --- | --- | --- |
+| 8 | 6 | 7 | 5 | 6 |
+| 10 | 6.5 | 7.5 | 8.5 | 7.5 |
+| 12 | 8 | 9 | 10 | 9 |
+
+### Clavier
+
+Les touches du clavier peuvent être représentées par la balise HTML `<kbd>` telle que <kbd>Esc</kbd>, <kbd>Entrée</kbd> et <kbd>Ctrl</kbd>.
+
 ### Prise en charge de LaTeX
 
 Ce modèle est également livré avec le support de $\LaTeX$. Écrivez facilement de belles équations dans le Markdown !
@@ -474,7 +488,7 @@ Cela garantira que lorsque vous êtes dans le contexte anglais, le lien vous red
 
 ## Références de style APA
 
-De plus, ce modèle est également livré avec un simple composant de citation de style APA qui peut être utilisé dans le fichier Markdown à l'aide de la syntaxe MDC. Les exemples et les styles sont conçus sur la base de cet [article Scribbr](https://www.scribbr.com/apa-examples/website/)
+De plus, ce modèle est également livré avec un simple composant de citation de style APA qui peut être utilisé dans le fichier Markdown à l'aide de la syntaxe MDC. Les exemples et les styles sont conçus sur la base de cet [article Scribbr](https://www.scribbr.com/apa-examples/website/).
 
 ```
 ::apa-reference

content/guide.md

@@ -9,7 +9,7 @@ authors:
 tags:
   - tutorial
   - guide
-updatedAt: 2023-11-18T11:37:49.432Z
+updatedAt: 2024-03-28T11:05:53.157Z
 createdAt: 2023-11-18T11:37:49.432Z
 ---
 
@@ -150,7 +150,7 @@ content/
 
 ![my cool image](/images/demo.png)
 
-This is how a potrait image looks like within the prose. It is left aligned and will extend to the max width available in the prose. Images that will be served alongside with the app can be placed within the `public` directory. For instance, images within the `/public/images` folder can be accessed via the path `/images/img.jpg` directly.
+This is how a portrait image looks like within the prose. It is centered within a custom container via the custom `ProseImg.vue` in the `components/content` folder and will extend to the max width available in the container. Images that will be served alongside with the app can be placed within the `public` directory. For instance, images within the `/public/images` folder can be accessed via the path `/images/img.jpg` directly.
 
 ```md
 ![my cool image](/images/demo.png)
@@ -168,6 +168,20 @@ For images that are located in `/assets/images` folder, they will need to be pro
 </template>
 ```
 
+### Tables
+
+This is how the default table looks like.
+
+| Age | Person 1 | Person 2 | Person 3 | Average |
+| --- | --- | --- | --- | --- |
+| 8 | 6 | 7 | 5 | 6 |
+| 10 | 6.5 | 7.5 | 8.5 | 7.5 |
+| 12 | 8 | 9 | 10 | 9 |
+
+### Keyboard
+
+Keyboard keys can be represented with the `<kbd>` HTML tag such as <kbd>Esc</kbd>, <kbd>Enter</kbd> and <kbd>Ctrl</kbd>.
+
 ### LaTeX Support
 
 This template also comes with the support for $\LaTeX$. Write beautiful equations within the Markdown with ease!
@@ -359,7 +373,7 @@ The url of the non-default locale will be prefixed with it's code whereas the de
 
 ### Defining Words
 
-To define a word for the intended languages, there is a section in `nuxt.config.ts` named `vueI18n` within the `i18n` object to define them. For instance, to define the world "welcome" for both English and French, create a property called `welcome` within thier respective locales object inside `messages` with their corresponding value will do.
+To define a word for the intended languages, there is a section in `nuxt.config.ts` named `vueI18n` within the `i18n` object to define them. For instance, to define the world "welcome" for both English and French, create a property called `welcome` within their respective locales object inside `messages` with their corresponding value will do.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -392,7 +406,7 @@ With this in place, Nuxt is smart enough to render out "Welcome" or "Bienvenue"
 
 While the above solution of adding new definition of words in the `nuxt.config.ts` file works, it can pose a real problem when the **vocabulary grows** as the file become cumbersome to maintain.
 
-Fortunately, there is another preferred way to store the language definitions in their own, seperate JSON file. With this approach, not only it achieves the Single Responsibility Principle, it also drastically improve the maintainability of the files.
+Fortunately, there is another preferred way to store the language definitions in their own, separate JSON file. With this approach, not only it achieves the Single Responsibility Principle, it also drastically improve the maintainability of the files.
 
 Here is how it is configured in `nuxt.config.ts`.
 
@@ -418,7 +432,7 @@ The above code tells Nuxt to locate English definition in `en.json` file and Fre
 
 ### I18n in Nuxt Content
 
-To support internationalization for Markdown based contents from Nuxt Content, create a corresponsing folder inside the `content` folder with the non-default locale's code and imitate the structure of the base folder.
+To support internationalization for Markdown based contents from Nuxt Content, create a corresponding folder inside the `content` folder with the non-default locale's code and imitate the structure of the base folder.
 
 For example, given I have the following file structure that has English contents, the French contents can be housed in the following manner.
 

locales/en.json

@@ -19,6 +19,11 @@
         "title": "Dark mode",
         "description": "Enrich user experience with dark and light mode whichever that suits their appetite."
       }
+    },
+    "sitemap": {
+      "sitemap": "Sitemap",
+      "heading": "Full List of Articles, on this Website.",
+      "description_html": "This section lists down every single Markdown entry in the <span class=\"bg-gray-100 dark:bg-gray-700 px-2 rounded py-1\">contents</span> folder."
     }
   },
   "header": {

locales/fr.json

@@ -19,6 +19,11 @@
         "title": "Mode sombre",
         "description": "Enrichissez l'expérience utilisateur avec le mode sombre et clair selon ce qui convient à leur appétit."
       }
+    },
+    "sitemap": {
+      "sitemap": "Plan du site",
+      "heading": "Liste complète des articles, sur ce site Web.",
+      "description_html": "Cette section répertorie chaque entrée Markdown dans le dossier <span class=\"bg-gray-100 dark:bg-gray-700 px-2 rounded py-1\">contents</span>."
     }
   },
   "header": {

package.json

@@ -4,7 +4,7 @@
   "author": "Shaun Chong <[email protected]>",
   "license": "MIT",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",

pages/[...slug].vue

@@ -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"
+      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"
     >
       <ContentRenderer :value="(data as Record<string, any> | undefined)">
         <template #empty>

pages/index.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
 const localePath = useLocalePath();
+const { data: navigation } = await useAsyncData("navigation", () =>
+  fetchContentNavigation()
+);
 </script>
 
 <template>
@@ -34,7 +37,7 @@ const localePath = useLocalePath();
       </div>
     </div>
   </Landing>
-  <section class="lg:max-w-[75rem] mx-auto px-6 pb-10">
+  <section class="lg:max-w-[75rem] mx-auto px-6 pb-10 lg:mb-32">
     <ul
       class="grid grid-cols-1 grid-rows-3 lg:grid-cols-3 lg:grid-rows-1 gap-5"
     >
@@ -88,4 +91,43 @@ const localePath = useLocalePath();
       </li>
     </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">
+      {{ $t("homePage.sitemap.sitemap") }}
+    </p>
+    <h2 class="text-2xl lg:text-4xl font-bold mb-4">
+      {{ $t("homePage.sitemap.heading") }}
+    </h2>
+    <p
+      class="text-lg mb-8"
+      v-html="$t('homePage.sitemap.description_html')"
+    ></p>
+    <main
+      class="p-10 border border-solid border-gray-200 dark:border-gray-600 rounded-lg"
+    >
+      ~/
+      <VLinkChildren :topics="navigation ? navigation : undefined" />
+    </main>
+  </section>
 </template>
+
+<style scoped>
+main {
+  --mask-color: #eee;
+  --background-color: #fafafa;
+  background-color: var(--background-color);
+  opacity: 0.8;
+  background-image: linear-gradient(var(--mask-color) 1px, transparent 1px),
+    linear-gradient(
+      to right,
+      var(--mask-color) 1px,
+      var(--background-color) 1px
+    );
+  background-size: 20px 20px;
+}
+
+.dark main {
+  --mask-color: #3b3b3b;
+  --background-color: #1e293b;
+}
+</style>