chore(docs): Updated docs.

Author: Skyost

docs/app/app.vue

@@ -16,7 +16,7 @@ onMounted(() => {
       wantedLanguage = languageCode
     }
   }
-  locale.value = wantedLanguage
+  locale.value = wantedLanguage as string
   watch (locale, newLocale => i18nCookieValue.value = newLocale)
 })
 </script>

docs/app/assets/article.scss

@@ -0,0 +1,24 @@
+@import 'colors';
+
+article {
+  counter-reset: h2-counter;
+
+  h2 {
+    counter-increment: h2-counter;
+    counter-reset: h3-counter;
+
+    &::before {
+      content: counter(h2-counter, upper-roman) ". ";
+      color: darken($primary, 10%);
+    }
+  }
+
+  h3 {
+    counter-increment: h3-counter;
+
+    &::before {
+      content: counter(h2-counter, upper-roman) ". " counter(h3-counter, lower-latin) ". ";
+      color: darken($primary, 10%);
+    }
+  }
+}

docs/app/components/ArticleTitle.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 defineProps<{ article: string }>()
+const markdownT = useMarkdownT()
 </script>
 
 <template>
   <div class="text-center mb-4">
-    <h1 v-html="$t(`${article}.title`)" />
+    <h1 v-html="markdownT(`${article}.title`)" />
     <small>
-      <em v-html="$t(`${article}.lastUpdated`)" />
+      <em v-html="markdownT(`${article}.lastUpdated`)" />
     </small>
   </div>
 </template>

docs/app/components/ErrorDisplay.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 const props = defineProps<{
-  error: any,
+  error: any
   changeTitle?: boolean
 }>()
 
 const errorCode = computed(() => {
-  if (/^-?\d+$/.test(props.error.toString())) {
-    return parseInt(props.error.toString())
-  }
-  if (Object.prototype.hasOwnProperty.call(props.error, 'statusCode')) {
-    return parseInt(props.error.statusCode)
+  if (props.error) {
+    if (typeof props.error.toString === 'function' && /^-?\d+$/.test(props.error.toString())) {
+      return parseInt(props.error.toString())
+    }
+    if (props.error.statusCode && /^-?\d+$/.test(props.error.statusCode)) {
+      return parseInt(props.error.statusCode)
+    }
   }
   return null
 })
@@ -23,17 +25,35 @@ const title = computed(() => {
   }
   return 'Error'
 })
+
+const goBack = () => window.history.back()
 </script>
 
 <template>
   <div>
-    <h1 class="text-center" v-text="title" />
+    <h1
+      class="text-center"
+      v-text="title"
+    />
     <p>
-      You can keep browsing by heading to the <a class="underline" href="javascript:history.back()">previous page</a> or
-      or by going on the <nuxt-link class="underline" to="/">home page</nuxt-link>.
-      <span v-if="errorCode === 404">
-        If you think something should be here, please <nuxt-link class="underline" to="/contact/">contact me</nuxt-link>.
-      </span>
+      You can keep browsing by heading to the <a
+        class="underline"
+        href="#"
+        @click.prevent="goBack"
+      >previous page</a> or
+      or by going on the <nuxt-link
+        class="underline"
+        to="/"
+      >home page</nuxt-link>.
+    </p>
+    <p v-if="errorCode === 404">
+      If you think something should be here, please <nuxt-link
+        class="underline"
+        to="/contact/"
+      >contact me</nuxt-link>.
     </p>
+    <details v-else>
+      <pre>{{ error }}</pre>
+    </details>
   </div>
 </template>

docs/app/components/MobilePhone.vue

@@ -84,7 +84,7 @@ $md-width: 200px;
   width: $speaker-original-width;
   height: $speaker-original-height;
   position: absolute;
-  top: calc(50% + $speaker-original-height);
+  top: calc(50% + #{$speaker-original-height});
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: black;

docs/app/components/Store/AutoDetectButton.vue

@@ -40,21 +40,16 @@ const availableOs = computed<OS[]>(() => {
 <template>
   <client-only>
     <div v-if="os">
-      <div class="store-buttons">
-        <div
+      <div class="store-buttons mb-3">
+        <store-button
           v-for="store in stores[os]"
-          :key="`button-container-${store}`"
-          class="button-container"
-        >
-          <store-button
-            :key="`button-${store.id}`"
-            class="mb-4"
-            :os="os"
-            :store="store"
-            :available-on-text="availableOnText"
-            :available-soon-text="availableSoonText"
-          />
-        </div>
+          :key="`store-button-${store.id}`"
+          class="store-button mb-3"
+          :os="os"
+          :store="store"
+          :available-on-text="availableOnText"
+          :available-soon-text="availableSoonText"
+        />
       </div>
       <b-accordion v-if="moreButton">
         <b-accordion-item
@@ -64,38 +59,33 @@ const availableOs = computed<OS[]>(() => {
           button-class="accordion-black-button bg-black text-white"
         >
           <div class="store-buttons">
-            <div
-              v-for="storeOs in availableOs"
-              :key="`button-container-${storeOs}`"
-              class="button-container"
-            >
+            <template v-for="storeOs in availableOs">
               <store-button
                 v-for="store in stores[storeOs]"
-                :key="'button-' + store.id"
+                :key="`store-button-${store.id}`"
+                class="store-button"
                 :os="storeOs"
                 :store="store"
                 :available-on-text="availableOnText"
                 :available-soon-text="availableSoonText"
               />
-            </div>
+            </template>
           </div>
         </b-accordion-item>
       </b-accordion>
     </div>
     <div v-else>
-      <div
-        v-for="storeOs in availableOs"
-        :key="`button-container-${storeOs}`"
-      >
+      <template v-for="storeOs in availableOs">
         <store-button
           v-for="store in stores[storeOs]"
-          :key="'button-' + store.id"
+          :key="'store-button-' + store.id"
+          class="store-button"
           :os="storeOs"
           :store="store"
           :available-on-text="availableOnText"
           :available-soon-text="availableSoonText"
         />
-      </div>
+      </template>
     </div>
     <template #fallback>
       <spinner />
@@ -119,17 +109,10 @@ const availableOs = computed<OS[]>(() => {
 @import 'assets/bootstrap-mixins';
 
 .store-buttons {
-  display: flex;
-  justify-content: space-evenly;
-  gap: 20px;
-
-  .button-container {
-    flex: 1;
-    text-align: center;
-  }
+  text-align: center;
 
-  @include media-breakpoint-down(lg) {
-    flex-direction: column;
+  .store-button {
+    margin: 10px;
   }
 }
 </style>

docs/app/components/Store/Button.vue

@@ -73,7 +73,7 @@ const tip = computed(() => {
 @import 'assets/bootstrap-mixins';
 
 .store-button-card {
-  max-width: 300px;
+  max-width: min(300px, 90%);
   width: 100%;
   display: inline-block;
 

docs/app/components/Translation/Accordion.vue

@@ -8,7 +8,7 @@ import {
   type TranslationFile,
   type TranslationData,
 } from '~/components/Translation/Table.vue'
-import type { LanguageWithData } from '~/modules/get-info-from-parent'
+import type { LanguageWithData } from '~~/modules/get-info-from-parent'
 
 interface RawTranslationFile {
   fileName: string
@@ -60,12 +60,12 @@ const {
     const originalLanguage = await fetchTranslationFiles(props.originalLanguage)
     const translation = await fetchTranslationFiles(props.language)
     for (const fileName in originalLanguage) {
-      const rawTranslationFile = originalLanguage[fileName]
+      const rawTranslationFile = originalLanguage[fileName]!
       const data: TranslationData = {}
       for (const key in rawTranslationFile.data) {
         data[key] = {
           key: key,
-          originalValue: rawTranslationFile.data[key],
+          originalValue: rawTranslationFile.data[key]!,
           translatedValue: translation[fileName]?.data[key] ?? '',
         }
       }
@@ -109,10 +109,10 @@ const load = (index: number) => {
         const content = event.target?.result?.toString()
         if (content && files.value) {
           try {
-            const currentData = files.value[index].data
+            const currentData = files.value[index]!.data
             const data = fromJson(content, (key: string) => currentData[key]?.originalValue)
-            files.value[index].data = data
-            files.value[index].complete = checkComplete(data)
+            files.value[index]!.data = data
+            files.value[index]!.complete = checkComplete(data)
           }
           catch (ex) {
             console.error(ex)
@@ -131,7 +131,7 @@ const download = (index: number) => {
   if (!files.value) {
     return
   }
-  const translationFile = files.value[index]
+  const translationFile = files.value[index]!
   const element = document.createElement('a')
   element.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(generateJson(translationFile.data)))
   element.setAttribute('download', translationFile.fileName)
@@ -191,7 +191,7 @@ const download = (index: number) => {
             <b-button
               class="w-100 w-md-auto"
               variant="primary"
-              :disabled="!files[index].complete"
+              :disabled="!files[index]!.complete"
               @click="openTranslationModal(files[index])"
             >
               <icon name="bi:check-lg" />

docs/app/components/Translation/LanguageCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BaseColorVariant } from 'bootstrap-vue-next'
-import type { LanguageWithData } from '~/modules/get-info-from-parent'
+import type { LanguageWithData } from '~~/modules/get-info-from-parent'
 
 const props = defineProps<{
   language: LanguageWithData
@@ -12,6 +12,8 @@ onMounted(() => {
   setTimeout(() => progress.value = props.language.progress, 500)
 })
 
+const flagCode = computed<string>(() => props.language.code === 'en' ? 'gb' : props.language.code)
+
 const variant = computed<keyof BaseColorVariant>(() => {
   if (props.language.progress >= 0.75) {
     return 'success'
@@ -34,7 +36,7 @@ const animate = ref<boolean>(false)
     <b-card class="language-card">
       <img
         class="flag"
-        :src="`https://flagcdn.com/${language.code}.svg`"
+        :src="`https://flagcdn.com/${flagCode}.svg`"
         :alt="language.name"
       >
       <b-card-text>