init

.envrc

@@ -0,0 +1 @@
+use flake

.gitignore

@@ -0,0 +1 @@
+node_modules

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "vuetifyjs.vuetify-vscode",
+    "vue.volar"
+  ]
+}

AGENTS.md

@@ -0,0 +1,11 @@
+# Project Rules
+
+## General
+- Follow the existing code style and patterns.
+- Use deno for running project commands.
+- Keep code in TypeScript unless migration is required.
+
+## Stack
+- Framework: Vue 3 + Vite
+- UI Library: Vuetify
+- Enabled Features: ESLint, Pinia, Vue Router

README.md

@@ -0,0 +1,79 @@
+# pokedex
+
+Scaffolded with Vuetify CLI.
+
+## ❗️ Documentation
+
+- Primary docs: https://vuetifyjs.com/
+- Getting started guide: https://vuetifyjs.com/en/getting-started/installation/
+- Community support: https://community.vuetifyjs.com/
+- Issue tracker: https://issues.vuetifyjs.com/
+
+## 🧱 Stack
+
+- Framework: Vue 3 + Vite
+- UI Library: Vuetify
+- Language: TypeScript
+- Package manager: deno
+
+## 🧭 Start Here
+
+- Main entry: `src/main.ts`
+- Main app component: `src/App.vue`
+- Main styles: `src/styles/`
+- Plugin setup: `src/plugins/`
+
+## 📁 Project Structure
+
+- `src/main.ts` — application entry point
+- `src/App.vue` — root component
+- `src/components/` — reusable Vue components
+- `src/plugins/` — plugin registration and setup
+- `src/styles/` — global styles and theme settings
+- `public/` — static public files
+
+## ✨ Enabled Features
+
+- ESLint
+- Pinia
+- Vue Router
+
+## 💿 Install
+
+Use your selected package manager (deno) to install dependencies:
+
+```bash
+deno install
+```
+
+## 🚀 Quick Start
+
+```bash
+deno install
+deno task dev
+```
+
+## 🏗️ Build
+
+```bash
+deno task build
+```
+
+## 🧪 Available Scripts
+
+- `deno task dev`
+- `deno task build`
+- `deno task preview`
+- `deno task build-only`
+- `deno task type-check`
+- `deno task lint`
+- `deno task lint:fix`
+
+## 💪 Support Vuetify Development
+
+This project uses Vuetify - an MIT licensed Open Source project. We are glad to welcome contributors and any support for ongoing development:
+
+- Contribute to Vuetify and ecosystem projects: https://github.com/vuetifyjs
+- Request enterprise support: https://support.vuetifyjs.com/
+- Sponsor on GitHub: https://github.com/sponsors/vuetifyjs
+- Support on Open Collective: https://opencollective.com/vuetify

env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-vue-layouts-next/client" />

eslint.config.js

@@ -0,0 +1,5 @@
+import vuetify from 'eslint-config-vuetify'
+
+export default vuetify({
+  ts: true,
+})

flake.lock

@@ -0,0 +1,42 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1776877367,
+        "narHash": "sha256-EHq1/OX139R1RvBzOJ0aMRT3xnWyqtHBRUBuO1gFzjI=",
+        "rev": "0726a0ecb6d4e08f6adced58726b95db924cef57",
+        "revCount": 985613,
+        "type": "tarball",
+        "url": "https://api.flakehub.com/f/pinned/NixOS/nixpkgs/0.1.985613%2Brev-0726a0ecb6d4e08f6adced58726b95db924cef57/019dc33e-a3ef-7cf1-936a-cf64d10f6c63/source.tar.gz?rev=0726a0ecb6d4e08f6adced58726b95db924cef57&revCount=985613"
+      },
+      "original": {
+        "type": "tarball",
+        "url": "https://flakehub.com/f/NixOS/nixpkgs/0.1"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs",
+        "vue-lsp": "vue-lsp"
+      }
+    },
+    "vue-lsp": {
+      "locked": {
+        "lastModified": 1720494119,
+        "narHash": "sha256-IE7PZn9bSjxI4/MugjAEx49oPoxu0uKXdfC+X7HcRuQ=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "05bbf675397d5366259409139039af8077d695ce",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "05bbf675397d5366259409139039af8077d695ce",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,48 @@
+{
+  description = "A Nix-flake-based Node.js development environment";
+
+  inputs.nixpkgs.url = "https://flakehub.com/f/NixOS/nixpkgs/0.1"; # unstable Nixpkgs
+  inputs.vue-lsp.url = "github:nixos/nixpkgs?ref=05bbf675397d5366259409139039af8077d695ce";
+
+  outputs =
+    { self, ... }@inputs:
+
+    let
+      supportedSystems = [
+        "x86_64-linux"
+        "aarch64-linux"
+        "aarch64-darwin"
+      ];
+      forEachSupportedSystem =
+        f:
+        inputs.nixpkgs.lib.genAttrs supportedSystems (
+          system:
+          f {
+            inherit system;
+            pkgs = import inputs.nixpkgs {
+              inherit system;
+            };
+            vue-lsp = import inputs.vue-lsp {
+              inherit system;
+            };
+          }
+        );
+    in
+    {
+      devShells = forEachSupportedSystem (
+        { pkgs, system, vue-lsp }:
+        {
+          default = pkgs.mkShellNoCC {
+            packages = with pkgs; [
+              deno
+              self.formatter.${system}
+              vue-lsp.vue-language-server
+              typescript-language-server
+            ];
+          };
+        }
+      );
+
+      formatter = forEachSupportedSystem ({ pkgs, ... }: pkgs.nixfmt);
+    };
+}

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to Vuetify 4</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "pokedex",
+  "private": true,
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "^5.2.10",
+    "@mdi/font": "7.4.47",
+    "vue": "^3.5.30",
+    "vuetify": "^4.0.2",
+    "pinia": "^3.0.4",
+    "vue-router": "^5.0.3"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.5",
+    "@types/node": "^24.12.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/language-server": "^3.2.7",
+    "@vue/tsconfig": "^0.9.0",
+    "@vue/typescript-plugin": "^3.2.7",
+    "npm-run-all2": "^8.0.4",
+    "prettier": "^3.8.3",
+    "sass-embedded": "^1.98.0",
+    "typescript": "~5.9.3",
+    "unplugin-fonts": "^1.4.0",
+    "vite": "^8.0.0",
+    "vite-plugin-vuetify": "^2.1.3",
+    "vue-tsc": "^3.2.5",
+    "eslint": "^9.39.4",
+    "eslint-config-vuetify": "^4.3.4"
+  },
+  "overrides": {
+    "unplugin-fonts": {
+      "vite": "^8.0.0"
+    }
+  }
+}

src/App.vue

@@ -0,0 +1,10 @@
+<template>
+  <v-app>
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+</script>

src/assets/logo.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>

src/components/HelloWorld.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-container class="fill-height d-flex flex-column" max-width="1100">
+    <div>
+      <v-img class="mb-4 font-weight-bold" height="150"
+        src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.media.pokekalos.fr%2Fimg%2Fpokemon%2Fhome%2Fqulbutoke.png&f=1&nofb=1&ipt=00fb65887a78a91f5e915c56d9efa542bf83d50ba16411de2cc68a5a4cc7289c" />
+
+      <div class="mb-8 text-center">
+        <div class="text-body-medium font-weight-light mb-n1">Welcome to</div>
+        <div class="text-display-medium font-weight-bold">my fabulous overkill pokedex</div>
+      </div>
+
+      <v-card>
+        <v-card-title>
+          <v-text-field placeholder="entrez votre recherche" v-model="searchStr"/>
+        </v-card-title>
+
+        <v-card-text>
+          <v-row v-if="!loader">
+            <v-col v-for="pkmn in pkmns" :key="pkmn.name" cols="6" v-if="pkmns.length">
+              <v-card append-icon="mdi-open-in-new" class="py-4" color="surface-variant" :to="`/${pkmn.name}`"
+                rel="noopener noreferrer" rounded="lg" :subtitle="getTypes(pkmn.types)" :title="pkmn.name"
+                variant="tonal">
+                <template #prepend>
+                  <v-avatar class="ml-2 mr-4" :image="pkmn.sprites.front_default" size="60" variant="tonal" />
+                </template>
+              </v-card>
+            </v-col>
+            <v-col v-else>
+              nobody here but chickens
+            </v-col>
+          </v-row>
+          <v-progress-circular indeterminate v-else/>
+        </v-card-text>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { usePokemons } from "@/composables/usePokemons";
+import { ref } from 'vue';
+
+const searchText = ref(null)
+const {pkmns,searchStr, loader} = usePokemons()
+
+function getTypes(types: {type: {name: string}}[]){
+  return types.map(type => type.type.name).join(" ")
+}
+</script>

src/components/PkmnDetails.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-container>
+    <v-progress-circular inderminate v-if="loader" />
+    <v-card :title="route.params.name as string" v-else-if="pkmns.length > 0">
+      <v-card-text class="flex flex-row">
+        <v-row>
+          <v-col cols="12">
+            order: {{ pkmns[0].order }}
+          </v-col>
+          <v-col cols="12">types: {{pkmns[0].types.map(t => t.type.name).join(" ")}}</v-col>
+          <v-col cols="12">height: {{pkmns[0].height}} inch</v-col>
+          <v-col cols="12">weight: {{pkmns[0].weight}} lb</v-col>
+          <v-col cols="12">species: {{pkmns[0].species.name}}</v-col>
+          <hr />
+          <v-col cols="12">
+          sprites:
+          <v-row>
+            <v-col v-for="sprite of pkmns[0].sprites">
+              <v-img :src="sprite"/>
+            </v-col>
+          </v-row>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { usePokemons, type Pokemon } from '@/composables/usePokemons';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute()
+const { fetchData, loader, pkmns } = usePokemons(false)
+onMounted(async () => {
+  if (route.params.name)
+    fetchData(route.params.name as string)
+})
+</script>

src/components/README.md

@@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import MyComponent from '@/components/MyComponent.vue'
+</script>
+```

src/composables/usePokemons.ts

@@ -0,0 +1,64 @@
+import { ref, onMounted, watch } from "vue";
+import { useAppStore } from "@/stores/app";
+
+export interface Pokemon {
+  order: number
+  name: string
+  types: {slot: number, type: {name: string}}[]
+  sprites: {front_default: string}
+}
+
+
+export function usePokemons(eager = true) {
+  const pkmns = ref<Pokemon[]>([]);
+  const searchStr = ref("");
+  const loader = ref(false);
+
+  const store = useAppStore()
+
+  function fetchData(searchStrOverride?: string) {
+    loader.value = true;
+    (async () => {
+      try {
+        if (store.pkmns.get(searchStr.value)) {
+          return store.pkmns.get(searchStr.value)
+        }
+        const resp = await fetch("https://pokeapi.co/api/v2/pokemon/" + (searchStrOverride || searchStr.value), {
+          method: "GET",
+        });
+        const data = await resp.json();
+        if (data?.results) {
+          if (data.results.length) {
+            pkmns.value = await Promise.all(data.results.map(async (rawPkmn: { name: string; url: string; }) => {
+              const data = await fetch(rawPkmn.url);
+              const pkmn: Pokemon = await data.json();
+              store.pkmns.set(pkmn.name.toLowerCase(), pkmn)
+              return pkmn
+            }));
+          }
+        } else {
+          pkmns.value = [data as Pokemon];
+        }
+      } catch (e) {
+        pkmns.value = []
+      } finally {
+        loader.value = false;
+      }
+    })();
+  }
+
+  onMounted(() => {
+    if (eager) {
+      fetchData();
+    }
+  });
+
+  watch(searchStr, fetchData);
+
+  return {
+    pkmns,
+    searchStr,
+    loader,
+    fetchData
+  };
+}

src/main.ts

@@ -0,0 +1,23 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+// Styles
+import 'unfonts.css'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

src/pages/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <HelloWorld />
+</template>
+
+<script lang="ts" setup>
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>

src/plugins/README.md

@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.

src/plugins/index.ts

@@ -0,0 +1,19 @@
+import router from '../router';
+import {createPinia} from 'pinia';
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Types
+import type { App } from 'vue'
+
+// Plugins
+import vuetify from './vuetify'
+
+export function registerPlugins (app: App) {
+ app.use(vuetify)
+ app.use(createPinia());
+ app.use(router);
+}

src/plugins/vuetify.ts

@@ -0,0 +1,19 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Composables
+import { createVuetify } from 'vuetify'
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+
+import 'vuetify/styles'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'system',
+  },
+})

src/router/index.ts

@@ -0,0 +1,26 @@
+/**
+ * router/index.ts
+ *
+ * Manual routes for ./src/pages/*.vue
+ */
+
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+import Index from '@/pages/index.vue'
+import PkmnDetails from '@/components/PkmnDetails.vue' 
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/:name",
+      component: PkmnDetails
+    },
+    {
+      path: '/',
+      component: Index,
+    }
+  ],
+})
+
+export default router

src/stores/app.ts

@@ -0,0 +1,11 @@
+// Utilities
+import type { Pokemon } from '@/composables/usePokemons'
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => {
+    return {
+      pkmns: new Map<string, Pokemon>()
+    }
+  }
+})

src/styles/README.md

@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.

src/styles/settings.scss

@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );

tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "vue-router/volar/sfc-typed-router",
+      "vue-router/volar/sfc-route-blocks"
+    ]
+  }
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

vite.config.mts

@@ -0,0 +1,50 @@
+import { fileURLToPath, URL } from 'node:url'
+import Vue from '@vitejs/plugin-vue'
+import Fonts from 'unplugin-fonts/vite'
+import { defineConfig } from 'vite'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    Vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'src/styles/settings.scss',
+      },
+    }),
+    Fonts({
+      fontsource: {
+        families: [
+          {
+            name: 'Roboto',
+            weights: [100, 300, 400, 500, 700, 900],
+            styles: ['normal', 'italic'],
+          },
+        ],
+      },
+    }),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('src', import.meta.url)),
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
+  },
+  server: {
+    port: 3000,
+  },
+})