feat: use url as state, validated fetched data, dark mode, support GitHub (#19)

Author: Barbapapazes

.vscode/settings.json

@@ -86,6 +86,8 @@
   ],
   "cSpell.words": [
     "dedupe",
-    "deduped"
+    "deduped",
+    "slideover",
+    "unjs"
   ]
 }

README.md

@@ -2,13 +2,15 @@
 
 # Relations UnJS
 
-[![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt.js&labelColor=020420)](https://ui.nuxt.com/pro) [![code style](https://antfu.me/badge-code-style.svg)](https://github.com/antfu/eslint-config)
+[![code style](https://antfu.me/badge-code-style.svg)](https://github.com/antfu/eslint-config)
 
 Discover UnJS ecosystem from a new angle! 🔭
 
 - 🪄 Visualize dependencies from UnJS packages
-- 👶 Print children UnJS dependencies
 - 🎨 Add any npm package to the graph
+- 📦 Add packages from a GitHub repository or organization
+- 👶 Print children UnJS dependencies
+- 🌙 Enable dark mode
 
 [👉 Check it out](https://unjs-relations.barbapapazes.dev/)
 

app.config.ts

@@ -5,25 +5,30 @@ export default defineAppConfig({
     button: {
       base: 'transition ease-in',
       color: {
-        white: {
-          solid: 'shadow-none',
+        gray: {
+          solid: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
         },
       },
-      variant: {
-        solid: 'shadow-none text-gray-900',
-      },
     },
     input: {
+      base: 'transition ease-in',
+      color: {
+        gray: {
+          outline: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
+        },
+      },
       variant: {
         outline: 'shadow-none',
       },
     },
     select: {
+      base: 'transition ease-in',
       color: {
-        white: {
-          outline: 'shadow-none',
-        },
+        gray: { outline: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50' },
       },
     },
+    card: {
+      base: 'transition ease-in duration-150',
+    },
   },
 })

app.vue

@@ -1,5 +1,22 @@
+<script lang="ts" setup>
+useHead({
+  htmlAttrs: {
+    lang: 'en',
+    dir: 'ltr',
+    class: 'scroll-smooth',
+  },
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'theme-color', content: '#ECDC5A' },
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.svg' },
+  ],
+})
+</script>
+
 <template>
-  <main class="font-sans">
+  <main class="font-sans dark:bg-gray-900">
     <NuxtPage />
   </main>
 

assets/app.css

@@ -0,0 +1,24 @@
+::-webkit-scrollbar {
+  width: 0.6em;
+  height: 0.6em;
+  @apply bg-transparent;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-gray-100;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0.6em;
+  @apply bg-gray-300 hover:bg-gray-400;
+}
+
+.dark {
+  & ::-webkit-scrollbar-track {
+    @apply bg-gray-800;
+  }
+
+  & ::-webkit-scrollbar-thumb {
+    @apply bg-gray-700 hover:bg-gray-600;
+  }
+}

components/Card.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const { metaSymbol } = useShortcuts()
+</script>
+
+<template>
+  <section class="prose dark:prose-invert">
+    <p>
+      Welcome to UnJS Relations, a tool to help you visualize the interdependencies between packages in the <NuxtLink
+        class="inline-block"
+        rel="noopener"
+        to="https://unjs.io"
+      >
+        UnJS
+      </NuxtLink> ecosystem and with other packages.
+    </p>
+    <p>
+      <NuxtLink
+        class="inline-block"
+        rel="noopener"
+        to="https://unjs.io"
+      >
+        UnJS
+      </NuxtLink> is a large and <strong>complex ecosystem</strong>. It's not easy to get to grips with, to understand and can be very intimidating, especially for beginners.
+    </p>
+    <p>
+      Despite this, it's very <strong>powerful</strong>, with packages that can be integrated into all your projects. Understanding and visualizing the links between the different packages could help you to <strong>better understand</strong> how the ecosystem is composed and articulated.
+    </p>
+    <p>
+      You can use multiple shortcuts to navigate through the interface:
+      <ul>
+        <li>
+          <kbd>{{ metaSymbol }}</kbd> + <kbd>h</kbd> toggle the menu
+        </li>
+        <li>
+          <kbd>{{ metaSymbol }}</kbd> + <kbd>i</kbd> toggle the info
+        </li>
+        <li>
+          <kbd>{{ metaSymbol }}</kbd> + <kbd>l</kbd> toggle the legend
+        </li>
+        <li>
+          <kbd>{{ metaSymbol }}</kbd> + <kbd>s</kbd> toggle the settings
+        </li>
+        <li>
+          <kbd>{{ metaSymbol }}</kbd> + <kbd>u</kbd> toggle the UnJS manage packages
+        </li>
+        <li>
+          <kbd>{{ metaSymbol }}</kbd> + <kbd>y</kbd> toggle the NPM manage packages
+        </li>
+      </ul>
+    </p>
+    <p>
+      Built by <NuxtLink
+        class="inline-block"
+        rel="noopener"
+        to="https://github.com/barbapapazes"
+      >
+        Estéban (Barbapapazes)
+      </NuxtLink>, this tool is <strong>open source</strong> and <strong>free</strong>. You can find the source code on <NuxtLink
+        class="inline-block"
+        rel="noopener"
+        to="https://github.com/barbapapazes/unjs-relations"
+      >
+        GitHub
+      </NuxtLink>.
+    </p>
+  </section>
+</template>