chore: update font and remove ui-pro

Author: Barbapapazes

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main class="font-sans">
     <NuxtPage />
   </main>
 

nuxt.config.ts

@@ -4,19 +4,21 @@ export default defineNuxtConfig({
       title: 'UnJS Relations',
       meta: [{
         name: 'description',
-        content: 'Visualize relations between UnJS packages',
+        content: 'Visualize relations between UnJS packages and the ecosystem.',
       }],
       link: [{
         rel: 'icon',
         href: '/favicon.svg',
       }],
     },
   },
-  extends: ['@nuxt/ui-pro'],
-  modules: ['@nuxt/ui', '@vueuse/nuxt'],
+
+  modules: ['@nuxt/ui', '@vueuse/nuxt', '@nuxtjs/google-fonts', '@nuxtjs/fontaine'],
+
   ui: {
     icons: ['simple-icons', 'ph'],
   },
+
   routeRules: {
     '/': {
       ssr: false,
@@ -27,11 +29,13 @@ export default defineNuxtConfig({
       },
     },
   },
+
   nitro: {
     prerender: {
       routes: ['/', '/api/packages.json'],
     },
   },
+
   vite: {
     optimizeDeps: {
       include: [
@@ -40,11 +44,26 @@ export default defineNuxtConfig({
       ],
     },
   },
+
   tailwindcss: {
     exposeConfig: true,
   },
+
+  fontMetrics: {
+    fonts: ['Nunito'],
+  },
+
+  googleFonts: {
+    display: 'swap',
+    download: true,
+    families: {
+      Nunito: [300, 400, 500, 600, 700, 800],
+    },
+  },
+
   colorMode: {
     preference: 'light',
   },
+
   devtools: { enabled: true },
 })

package.json

@@ -12,13 +12,13 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
-  "dependencies": {
-    "@nuxt/ui-pro": "^0.4.2"
-  },
   "devDependencies": {
     "@antfu/eslint-config": "^2.6.1",
     "@iconify-json/ph": "^1.1.9",
     "@iconify-json/simple-icons": "^1.1.86",
+    "@nuxt/ui": "^2.11.1",
+    "@nuxtjs/fontaine": "^0.4.1",
+    "@nuxtjs/google-fonts": "^3.1.3",
     "@vueuse/core": "^10.7.1",
     "@vueuse/nuxt": "^10.7.1",
     "eslint": "^8.56.0",

pages/index.vue

@@ -248,7 +248,7 @@ function getGitHubLink(packageName: string): string {
       </div>
     </div>
   </UModal>
-  <UnJsPackagesModal v-model="isUnJSPackagesOpen" :packages="unjsPackages" :selection="selectedUnJSPackages" @selection="onUnJSSelection($event)" />
+  <UnJSPackagesModal v-model="isUnJSPackagesOpen" :packages="unjsPackages" :selection="selectedUnJSPackages" @selection="onUnJSSelection($event)" />
   <NpmPackagesModal v-model="isNpmPackagesOpen" :unjs-packages="unjsPackages" @selection="onNpmSelection($event)" />
 </template>