Two page plus index base config

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

components/app/nav-bar.vue

@@ -0,0 +1,20 @@
+<template>
+    <nav class="container">
+        <ul>
+            <li>
+                <NuxtLink to="/">
+                    <strong>Paper Dynasty</strong>
+                </NuxtLink>
+            </li>
+        </ul>
+        <ul>
+            <li>
+                <NuxtLink to='/players/random'>Random Card</NuxtLink>
+            </li>
+            <li>
+                <NuxtLink to='/players/69'>Card 69</NuxtLink>
+            </li>
+            <li><a href="#">Shop</a></li>
+        </ul>
+    </nav>
+</template>

components/player.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="player-card">
+    <img :src="player?.headshot" alt="Player Headshot" class="headshot" />
+
+    <h2 class="name">{{ player?.name }}</h2>
+
+    <p class="franchise">{{ player?.franchise }}</p>
+
+    <img :src="player?.image" alt="Player Card Image" class="card-image" />
+
+    <div class="rarity" :style="{ backgroundColor: '#' + player.rarity.color }">
+      {{ player.rarity.name }}
+    </div>
+
+    <p class="description">Description: {{ player?.description }}</p>
+
+    <p class="cost">Cost: ${{ player?.cost }}</p>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  player: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+.player-card {
+  max-width: 400px;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  padding: 16px;
+  text-align: center;
+}
+
+.headshot {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin: 0 auto 8px;
+}
+
+.name {
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+.franchise {
+  color: #666;
+  font-size: 1rem;
+  margin-bottom: 8px;
+}
+
+.card-image {
+  width: 100%;
+  height: auto;
+  margin: 12px 0;
+}
+
+.rarity {
+  color: white;
+  padding: 8px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.description {
+  font-size: 0.9rem;
+  color: #555;
+  margin-bottom: 8px;
+}
+
+.cost {
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+</style>

layouts/default.vue

@@ -0,0 +1,8 @@
+<template>
+    <div>
+        <AppNavBar />
+        <main class="container">
+            <slot />
+        </main>
+    </div>
+</template>

nuxt.config.ts

@@ -0,0 +1,42 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-11-01',
+
+  devtools: {
+    enabled: true,
+
+    timeline: {
+      enabled: true,
+    },
+  },
+
+  modules: [
+    // '@nuxtjs/supabase'
+  ],
+
+  css: ['@picocss/pico'],
+
+  app: {
+    head: {
+      title: 'Paper Dynasty',
+      htmlAttrs: {
+        lang: 'en',
+      },
+      link: [
+        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      ]
+    }
+  },
+
+  runtimeConfig: {
+    public: {
+      supabaseKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNucGhwbnV2aGp2cXprY2J3emRrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDU4MTE3ODQsImV4cCI6MjA2MTM4Nzc4NH0.k3V9c2oiG8kufPa3_a4v6UdiGI6ML6-5lH2oifStB3I',
+      supabaseUrl: 'https://cnphpnuvhjvqzkcbwzdk.supabase.co/rest/v1/'
+    }
+  },
+  
+  // supabase: {
+  //   url: 'https://cnphpnuvhjvqzkcbwzdk.supabase.co',
+  //   key: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNucGhwbnV2aGp2cXprY2J3emRrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDU4MTE3ODQsImV4cCI6MjA2MTM4Nzc4NH0.k3V9c2oiG8kufPa3_a4v6UdiGI6ML6-5lH2oifStB3I',
+  // },
+})

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@picocss/pico": "^2.1.1",
+    "nuxt": "^3.17.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.1"
+  }
+}

pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>Hello, World!</h1>
+</template>

pages/players/[id].vue

@@ -0,0 +1,37 @@
+<script setup lang='ts'>
+    import type { Player } from '~/types/Player'
+
+    const route = useRoute()
+    const config = useRuntimeConfig()
+
+    const playerId = route.params.id
+
+    const { data, pending, error } = await useFetch<Player[]>(
+        `${config.public.supabaseUrl}/players?select=*,rarity!inner(*)&id=eq.${playerId}`,
+        {
+            method: 'GET',
+            headers: {
+                apikey: config.public.supabaseKey
+            },
+            server: false
+        }
+    )
+
+    const player = computed(() => data.value?.[0] ?? null)
+
+    console.log('data:')
+    console.log(data)
+    console.log('player: ')
+    console.log(player)
+</script>
+
+<template>
+    <h2>Get One Card!</h2>
+    <div>
+        <div v-if="pending">Loading...</div>
+        <div v-else-if="error">Failed to load player</div>
+        <div v-else>
+            <Player :player="player" />
+        </div>
+    </div>
+</template>

pages/players/random.vue

@@ -0,0 +1,45 @@
+<script setup lang='ts'>
+    import type { Player } from '~/types/Player'
+
+    const config = useRuntimeConfig()
+
+    const { data, pending, error } = await useFetch<Player[]>(
+        `${config.public.supabaseUrl}/random_player`,
+        {
+            method: 'GET',
+            headers: {
+                apikey: config.public.supabaseKey
+            },
+            server: false,
+            query: {
+                select: '*,rarity!inner(*),mlb_player!inner(*)',
+                // 'rarity.name': 'eq.All-Star',
+                // 'mlb_player.offense_col': 'eq.1',
+                franchise: 'eq.Baltimore Orioles',
+                limit: 3
+            }
+        }
+    )
+
+    // const player = computed(() => data.value?.[0] ?? null)
+    const players = computed(() => data.value ?? [])
+
+    console.log('data:')
+    console.log(data)
+    console.log('player: ')
+    console.log(players)
+</script>
+
+<template>
+    <h2>Random Cards!</h2>
+    <div >
+        <div v-if="pending">Loading...</div>
+        <div v-else-if="error">Failed to load player</div>
+        <div v-else class="grid">
+            <div v-for="player in players" :key="player.id">
+                <Player :player="player" />
+            </div>
+        </div>
+        <!-- <Player v-if="player" :player="player" /> -->
+    </div>
+</template>

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

types/Player.d.ts

@@ -0,0 +1,15 @@
+export interface Player {
+  id: number
+  name: string
+  cost: number
+  image: string
+  headshot: string
+  description: string
+  franchise: string
+  rarity: {
+    id: number
+    name: string
+    color: string
+    value: number
+  }
+}