From 36103bed9b3fd0f83c9265f9d93eb596670c9878 Mon Sep 17 00:00:00 2001
From: botmaster <pascal.achard@gmail.com>
Date: Sat, 2 Mar 2024 19:09:38 +0100
Subject: [PATCH] feat: Split dependencies table into two tables

One table for dev deps and another for deps
---
 components/app/DepsTable.vue | 162 +++++++++++++++++++++++++++++++
 locales/en.json              |   4 +
 locales/fr.json              |   4 +
 pages/about.vue              | 181 ++++-------------------------------
 4 files changed, 187 insertions(+), 164 deletions(-)
 create mode 100644 components/app/DepsTable.vue

diff --git a/components/app/DepsTable.vue b/components/app/DepsTable.vue
new file mode 100644
index 0000000..9a73989
--- /dev/null
+++ b/components/app/DepsTable.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+interface Props {
+  dependencies: Record<string, string>
+}
+const props = defineProps<Props>();
+
+const latestVersions = ref<Record<string, string>>({});
+
+async function fetchLatestVersion(pkgName: string) {
+  try {
+    const response = await fetch(`https://unpkg.com/${pkgName}/package.json`);
+    const data = await response.json();
+    return data.version;
+  }
+  catch (error) {
+    console.error(`Failed to fetch version for package ${pkgName}:`, error);
+    return null;
+  }
+}
+
+async function fetchLatestVersions() {
+  // fetch latest versions in parallel
+  const promises = Object.keys(props.dependencies).map(async (pkgName) => {
+    latestVersions.value[pkgName] = 'loading';
+    try {
+      latestVersions.value[pkgName] = await fetchLatestVersion(pkgName);
+    }
+    catch (error) {
+      latestVersions.value[pkgName] = 'error';
+    }
+  });
+  await Promise.all(promises);
+}
+
+const depsTarget = ref<HTMLElement | null>(null);
+
+if (process.client) {
+  useIntersectionObserver(depsTarget, ([{ isIntersecting }]) => {
+    if (isIntersecting) {
+      // If latest versions are not yet fetched, fetch them
+      if (Object.keys(latestVersions.value).length === 0)
+        fetchLatestVersions();
+    }
+  });
+}
+</script>
+
+<template>
+  <table ref="depsTarget" class="deps-table">
+    <thead>
+      <tr>
+        <th class="" />
+        <th class="" />
+        <th class="autowidth" />
+        <th class="" />
+        <th class="" />
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(value, key) in dependencies" :key="key">
+        <td>{{ key }}</td>
+        <template v-if="latestVersions[key] === 'error'">
+          <td colspan="4" class="right">
+            <span title="Failed to fetch latest version">
+              <Icon
+                name="ic:baseline-error"
+                class="text-aurora-nord-11"
+              />
+            </span>
+          </td>
+        </template>
+
+        <template v-else-if="latestVersions[key] === 'loading'">
+          <td colspan="4" class="right">
+            <span title="Loading">
+              <Icon
+                name="eos-icons:three-dots-loading"
+                class="text-primary"
+              />
+            </span>
+          </td>
+        </template>
+
+        <template
+          v-else-if="
+            latestVersions[key]
+              && latestVersions[key] !== value.replace('^', '').trim()
+          "
+        >
+          <td class="right">
+            {{ value }}
+          </td>
+          <td class="text-center">
+            <Icon name="mdi:arrow-right-thin" />
+          </td>
+          <td class="right">
+            {{ latestVersions[key] }}
+          </td>
+          <td>
+            <span title="Update available"><Icon
+              name="material-symbols:arrow-circle-up"
+              class="text-base text-aurora-nord-14"
+            /></span>
+          </td>
+        </template>
+
+        <template v-else-if="latestVersions[key]">
+          <td colspan="3" class="right">
+            {{ value }}
+          </td>
+          <td>
+            <span title="Up to date"><Icon
+              name="material-symbols:check-box-rounded"
+              class="text-base text-primary"
+            /></span>
+          </td>
+        </template>
+
+        <template v-else>
+          <td colspan="4" class="right">
+            {{ value }}
+          </td>
+        </template>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped lang="scss">
+.deps-table {
+  @apply table-auto w-full font-code;
+
+  tr {
+    @apply text-xs lg:text-sm;
+  }
+
+  th,
+  td {
+    @apply text-left align-middle;
+  }
+
+  td {
+    @apply border-b border-b-snowstorm-nord-4 py-1 dark:border-b-polarnight-nord-2;
+
+    &:not(:first-child) {
+      @apply w-px whitespace-nowrap;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      @apply px-1 lg:px-2;
+    }
+  }
+
+  td.autowidth {
+    @apply w-px;
+  }
+
+  td.right {
+    @apply text-right;
+  }
+}
+</style>
diff --git a/locales/en.json b/locales/en.json
index b247636..31d97b7 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -31,6 +31,10 @@
       "sorry": "Sorry, that page doesn't exist.",
       "title": "404!"
     },
+    "about": {
+      "dependencies": "Dependencies",
+      "devDependencies": "Dev dependencies"
+    },
     "error": {
       "intro": "It looks like something broke.",
       "sorry": "Sorry about that 😕",
diff --git a/locales/fr.json b/locales/fr.json
index 60012e9..655ae31 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -31,6 +31,10 @@
       "sorry": "Désolé, cette page n'existe pas.",
       "title": "404 !!!"
     },
+    "about": {
+      "dependencies": "Dépendances ",
+      "devDependencies": "Dépandances de développement"
+    },
     "error": {
       "intro": "On dirait que quelque chose s'est cassé.",
       "sorry": "Désolé 😕",
diff --git a/pages/about.vue b/pages/about.vue
index 9dd301f..549ec85 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -10,7 +10,7 @@ definePageMeta({
 const runtimeConfig = useRuntimeConfig();
 const pkg = JSON.parse(runtimeConfig.public.pkg);
 
-const { locale: currentLocale } = useI18n();
+const { locale: currentLocale, t } = useI18n();
 
 const { data } = await useAsyncData(`about-${currentLocale.value}`, () =>
   queryContent<IPage>()
@@ -27,61 +27,16 @@ if (data?.value)
   useContentHead(data as Ref<IPage>);
 
 const dependencies = computed(() => {
-  const merged = {
+  return {
     ...pkg.dependencies,
-    ...pkg.devDependencies,
   };
-  // Sort by key alphabetically
-  return Object.keys(merged)
-    .sort()
-    .reduce(
-      (obj, key) => {
-        obj[key] = merged[key];
-        return obj;
-      },
-      {} as Record<string, string>,
-    );
 });
 
-const latestVersions = ref<Record<string, string>>({});
-
-async function fetchLatestVersion(pkgName: string) {
-  try {
-    const response = await fetch(`https://unpkg.com/${pkgName}/package.json`);
-    const data = await response.json();
-    return data.version;
-  }
-  catch (error) {
-    console.error(`Failed to fetch version for package ${pkgName}:`, error);
-    return null;
-  }
-}
-
-async function fetchLatestVersions() {
-  // fetch latest versions in parallel
-  const promises = Object.keys(dependencies.value).map(async (pkgName) => {
-    latestVersions.value[pkgName] = 'loading';
-    try {
-      latestVersions.value[pkgName] = await fetchLatestVersion(pkgName);
-    }
-    catch (error) {
-      latestVersions.value[pkgName] = 'error';
-    }
-  });
-  await Promise.all(promises);
-}
-
-const depsTarget = ref<HTMLElement | null>(null);
-
-if (process.client) {
-  useIntersectionObserver(depsTarget, ([{ isIntersecting }]) => {
-    if (isIntersecting) {
-      // If latest versions are not yet fetched, fetch them
-      if (Object.keys(latestVersions.value).length === 0)
-        fetchLatestVersions();
-    }
-  });
-}
+const devDependencies = computed(() => {
+  return {
+    ...pkg.devDependencies,
+  };
+});
 </script>
 
 <template>
@@ -98,122 +53,20 @@ if (process.client) {
           v{{ pkg.version }}
         </p>
       </template>
-      <ContentRenderer class="nuxt-content" :value="data" />
-      <div class="nuxt-content mt-2">
-        <table ref="depsTarget" class="deps-table">
-          <thead>
-            <tr>
-              <th class="" />
-              <th class="" />
-              <th class="autowidth" />
-              <th class="" />
-              <th class="" />
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(value, key, index) in dependencies" :key="index">
-              <td>{{ key }}</td>
-              <template v-if="latestVersions[key] === 'error'">
-                <td colspan="4" class="right">
-                  <span title="Failed to fetch latest version">
-                    <Icon
-                      name="ic:baseline-error"
-                      class="text-aurora-nord-11"
-                    />
-                  </span>
-                </td>
-              </template>
 
-              <template v-else-if="latestVersions[key] === 'loading'">
-                <td colspan="4" class="right">
-                  <span title="Loading">
-                    <Icon
-                      name="eos-icons:three-dots-loading"
-                      class="text-primary"
-                    />
-                  </span>
-                </td>
-              </template>
-
-              <template
-                v-else-if="
-                  latestVersions[key]
-                    && latestVersions[key] !== value.replace('^', '').trim()
-                "
-              >
-                <td class="right">
-                  {{ value }}
-                </td>
-                <td class="text-center">
-                  <Icon name="mdi:arrow-right-thin" />
-                </td>
-                <td class="right">
-                  {{ latestVersions[key] }}
-                </td>
-                <td>
-                  <span title="Update available"><Icon
-                    name="material-symbols:arrow-circle-up"
-                    class="text-base text-aurora-nord-14"
-                  /></span>
-                </td>
-              </template>
+      <ContentRenderer class="nuxt-content" :value="data" />
 
-              <template v-else-if="latestVersions[key]">
-                <td colspan="3" class="right">
-                  {{ value }}
-                </td>
-                <td>
-                  <span title="Up to date"><Icon
-                    name="material-symbols:check-box-rounded"
-                    class="text-base text-primary"
-                  /></span>
-                </td>
-              </template>
+      <div class="mt-2">
+        <p class="mb-0 font-bold">
+          {{ t('pages.about.dependencies') }}
+        </p>
+        <DepsTable :dependencies="dependencies" />
 
-              <template v-else>
-                <td colspan="4" class="right">
-                  {{ value }}
-                </td>
-              </template>
-            </tr>
-          </tbody>
-        </table>
+        <p class="mb-0 mt-6 font-bold">
+          {{ t('pages.about.devDependencies') }}
+        </p>
+        <DepsTable :dependencies="devDependencies" />
       </div>
     </NuxtLayout>
   </main>
 </template>
-
-<style scoped lang="scss">
-.deps-table {
-  @apply table-auto w-full font-code;
-
-  tr {
-    @apply text-xs lg:text-sm;
-  }
-
-  th,
-  td {
-    @apply text-left align-middle;
-  }
-
-  td {
-    @apply border-b border-b-snowstorm-nord-4 py-1 dark:border-b-polarnight-nord-2;
-
-    &:not(:first-child) {
-      @apply w-px whitespace-nowrap;
-    }
-
-    &:not(:first-child):not(:last-child) {
-      @apply px-1 lg:px-2;
-    }
-  }
-
-  td.autowidth {
-    @apply w-px;
-  }
-
-  td.right {
-    @apply text-right;
-  }
-}
-</style>