chore: initial scaffold
This commit is contained in:
Julien Calixte
3
.dockerignore
Normal file
3
.dockerignore
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.git
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
5
.oxfmtrc.json
Normal file
5
.oxfmtrc.json
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/oxfmt/configuration_schema.json",
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": false
|
||||||
|
}
|
||||||
11
.oxlintrc.json
Normal file
11
.oxlintrc.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||||
|
"plugins": ["typescript", "unicorn", "oxc"],
|
||||||
|
"categories": {
|
||||||
|
"correctness": "error"
|
||||||
|
},
|
||||||
|
"rules": {},
|
||||||
|
"env": {
|
||||||
|
"builtin": true
|
||||||
|
}
|
||||||
|
}
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
31
.zed/settings.json
Normal file
31
.zed/settings.json
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"languages": {
|
||||||
|
"TypeScript": {
|
||||||
|
"format_on_save": "on",
|
||||||
|
"formatter": {
|
||||||
|
"external": {
|
||||||
|
"command": "./node_modules/.bin/oxfmt",
|
||||||
|
"arguments": ["--stdin-filepath", "{buffer_path}"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"JavaScript": {
|
||||||
|
"format_on_save": "on",
|
||||||
|
"formatter": {
|
||||||
|
"external": {
|
||||||
|
"command": "./node_modules/.bin/oxfmt",
|
||||||
|
"arguments": ["--stdin-filepath", "{buffer_path}"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"Vue.js": {
|
||||||
|
"format_on_save": "on",
|
||||||
|
"formatter": {
|
||||||
|
"external": {
|
||||||
|
"command": "./node_modules/.bin/oxfmt",
|
||||||
|
"arguments": ["--stdin-filepath", "{buffer_path}"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
11
Dockerfile
Normal file
11
Dockerfile
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
FROM node:22-alpine AS build
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package.json pnpm-lock.yaml* ./
|
||||||
|
RUN corepack enable && pnpm install --frozen-lockfile
|
||||||
|
COPY . .
|
||||||
|
RUN pnpm build
|
||||||
|
|
||||||
|
FROM nginx:alpine
|
||||||
|
COPY --from=build /app/dist /usr/share/nginx/html
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
EXPOSE 80
|
||||||
20
README.md
Normal file
20
README.md
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
# pokedex
|
||||||
|
|
||||||
|
An 8-bit Pokédex. Deployed at https://pokedex.apoena.dev
|
||||||
|
|
||||||
|
Built with Vite + Vue 3 + TypeScript + Tailwind v4 + DaisyUI. Retro styling via
|
||||||
|
`Press Start 2P` (display) and `VT323` (body). Pokémon data is fetched
|
||||||
|
client-side from the public [PokeAPI](https://pokeapi.co).
|
||||||
|
|
||||||
|
## Develop
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm dev # frontend on :5173
|
||||||
|
pnpm lint # oxlint (pnpm lint:fix to autofix)
|
||||||
|
pnpm fmt # oxfmt (pnpm fmt:check to verify only)
|
||||||
|
pnpm build # type-check (vue-tsc) + production build → dist/
|
||||||
|
```
|
||||||
|
|
||||||
|
## Deploy
|
||||||
|
|
||||||
|
Pushes to `main` are picked up by Coolify at https://platform.apoena.dev.
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Pokédex</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
nginx.conf
Normal file
15
nginx.conf
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name _;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /assets/ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
}
|
||||||
31
package.json
Normal file
31
package.json
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "pokedex",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc -b && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"lint": "oxlint",
|
||||||
|
"lint:fix": "oxlint --fix",
|
||||||
|
"fmt": "oxfmt",
|
||||||
|
"fmt:check": "oxfmt --check"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"daisyui": "^5.5.23",
|
||||||
|
"vue": "^3.5.38"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/vite": "^4.3.1",
|
||||||
|
"@types/node": "^24.13.2",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.7",
|
||||||
|
"@vue/tsconfig": "^0.9.1",
|
||||||
|
"oxfmt": "^0.56.0",
|
||||||
|
"oxlint": "^1.71.0",
|
||||||
|
"tailwindcss": "^4.3.1",
|
||||||
|
"typescript": "~6.0.2",
|
||||||
|
"vite": "^8.1.0",
|
||||||
|
"vue-tsc": "^3.3.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
1468
pnpm-lock.yaml
generated
Normal file
1468
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
public/favicon.svg
Normal file
22
public/favicon.svg
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<!--
|
||||||
|
tags: [pokemon, go, catch, game, play, pokeball, location, navigation, geography, place]
|
||||||
|
category: Map
|
||||||
|
version: "1.39"
|
||||||
|
unicode: "eec1"
|
||||||
|
-->
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="#c23616"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
|
||||||
|
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
|
||||||
|
<path d="M3 12h6" />
|
||||||
|
<path d="M15 12h6" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
37
src/App.vue
Normal file
37
src/App.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const repo = "https://git.apoena.dev/julien/pokedex"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main class="min-h-screen bg-base-200 pixel-grid flex items-center justify-center p-6">
|
||||||
|
<div
|
||||||
|
class="card bg-base-100 max-w-md w-full rounded-none border-4 border-primary shadow-[6px_6px_0_0_#1a1a1a]"
|
||||||
|
>
|
||||||
|
<div class="card-body items-center text-center gap-6">
|
||||||
|
<svg
|
||||||
|
class="size-20 text-primary"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
|
||||||
|
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
|
||||||
|
<path d="M3 12h6" />
|
||||||
|
<path d="M15 12h6" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<h1 class="font-display text-2xl text-primary leading-relaxed">POKEDEX</h1>
|
||||||
|
|
||||||
|
<p class="text-2xl opacity-80 leading-snug">An 8-bit Pokédex. Gotta catalog 'em all.</p>
|
||||||
|
|
||||||
|
<div class="card-actions">
|
||||||
|
<a :href="repo" class="btn btn-primary rounded-none font-display text-xs">View source</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
37
src/assets/icons/README.md
Normal file
37
src/assets/icons/README.md
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
# Icons
|
||||||
|
|
||||||
|
Reusable in-app icons. Source: https://tabler.io/icons (outline variant by default).
|
||||||
|
|
||||||
|
## Add an icon
|
||||||
|
|
||||||
|
1. Find the icon on https://tabler.io/icons, click it, copy the SVG (or download).
|
||||||
|
2. Save it here as `<slug>.svg` — same slug Tabler uses (`bolt.svg`, `qrcode.svg`).
|
||||||
|
3. Keep `stroke="currentColor"` in the SVG so colour follows Tailwind classes.
|
||||||
|
|
||||||
|
## Use an icon
|
||||||
|
|
||||||
|
Static colour (cheapest, no extra component):
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<img src="@/assets/icons/bolt.svg" alt="" class="size-5" />
|
||||||
|
```
|
||||||
|
|
||||||
|
Dynamic colour (needs `currentColor` to flow through — paste the SVG inline as a component):
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
class="size-5 text-primary"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<!-- paste paths from the Tabler SVG here -->
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
The favicon at `public/favicon.svg` was generated from this same icon set with `currentColor` replaced by the app's primary hex at scaffold time.
|
||||||
5
src/main.ts
Normal file
5
src/main.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from "vue"
|
||||||
|
import "./style.css"
|
||||||
|
import App from "./App.vue"
|
||||||
|
|
||||||
|
createApp(App).mount("#app")
|
||||||
38
src/style.css
Normal file
38
src/style.css
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
/* The font @import MUST come first — before @import "tailwindcss" — because
|
||||||
|
Tailwind inlines its import into real CSS rules, and the CSS spec requires
|
||||||
|
@import to precede all other rules. If it comes second, the production build
|
||||||
|
warns ("@import must precede all rules…") and browsers silently DROP the
|
||||||
|
font import, so the custom font never loads.
|
||||||
|
8-bit theme: "Press Start 2P" for display/headings, "VT323" for body text. */
|
||||||
|
@import url("https://api.fonts.coollabs.io/css2?family=Press+Start+2P&display=swap");
|
||||||
|
@import url("https://api.fonts.coollabs.io/css2?family=VT323&display=swap");
|
||||||
|
@import "tailwindcss";
|
||||||
|
@plugin "daisyui";
|
||||||
|
@plugin "daisyui/theme" {
|
||||||
|
name: "light";
|
||||||
|
default: true;
|
||||||
|
--color-primary: #c23616;
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--font-sans: "VT323", ui-monospace, monospace;
|
||||||
|
--font-display: "Press Start 2P", ui-monospace, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* VT323 renders small at default sizes — nudge the base up for legibility. */
|
||||||
|
:root {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Crisp edges for pixel-art sprites (e.g. Pokémon artwork). */
|
||||||
|
.pixelated {
|
||||||
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Subtle 8-bit checker/grid backdrop. */
|
||||||
|
.pixel-grid {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(var(--color-base-300) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, var(--color-base-300) 1px, transparent 1px);
|
||||||
|
background-size: 16px 16px;
|
||||||
|
}
|
||||||
17
tsconfig.app.json
Normal file
17
tsconfig.app.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
4
tsconfig.json
Normal file
4
tsconfig.json
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
23
tsconfig.node.json
Normal file
23
tsconfig.node.json
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"module": "nodenext",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
14
vite.config.ts
Normal file
14
vite.config.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import { fileURLToPath, URL } from "node:url"
|
||||||
|
import { defineConfig } from "vite"
|
||||||
|
import vue from "@vitejs/plugin-vue"
|
||||||
|
import tailwindcss from "@tailwindcss/vite"
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue(), tailwindcss()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user