tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

added auth and made some sizeable updates to mobile layout

Browse Source
This commit is contained in:
zach
2026-02-25 18:47:33 -05:00
parent 5d9655e196
commit d7c5a69d1d
10 changed files with 915 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
astro.config.mjs
View File

@@ -1,6 +1,9 @@
// @ts-check
import { defineConfig } from 'astro/config';
import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import clerk from "@clerk/astro";
// https://astro.build/config
export default defineConfig({
integrations: [clerk()],
adapter: node({ mode: "standalone" }),
output: "server",
});

844
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -9,6 +9,8 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/node": "^9.5.4",
"@clerk/astro": "^2.17.6",
"astro": "^5.17.1",
"bootstrap": "^5.3.8",
"chalk": "^5.6.2",

20
src/assets/css/main.scss
View File

@@ -95,6 +95,7 @@
.pokedex-page {
position: relative;
top: 50px;
@media (min-width: 768px) {
top: 100px !important;
}
@@ -320,17 +321,21 @@ $tiers: (
// ----------------------
// Sticky Bar
// ----------------------
.sticky {
position: fixed;
.search-bar {
position: absolute;
bottom: 0;
width: 100%;
z-index: 1000;
height: 48px;
transform: rotate(180deg);
@media (min-width: 768px) {
position: sticky;
top:0;
min-width: 45vw;
transform: rotate(0deg);
max-width: 45vw;
float: right;
}
}
@@ -486,10 +491,16 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
/* can't assume only one "header" element in HTML5 */
.header-top {
/* pin to top - 0 is default */
bottom: 0;
/* raise z-index to cover, higher here to allow
a range of z-indexes in the scrolling content */
z-index: 100;
transform:rotate(180deg);
/* height overflows */
@media (min-width:768px) {
top: 0;
transform:rotate(0deg);
}
}
/* match these backgrounds to blend */
@@ -649,7 +660,10 @@ $hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
top: $padding-to-top;
height: $hdr-topwell-height;
width: 100%;
border-radius: $border-radius-hdr 0 $border-radius-hdr 0;
border-radius: 0 0 $border-radius-hdr $border-radius-hdr;
@media (min-width:768px) {
border-radius: $border-radius-hdr 0 $border-radius-hdr 0;
}
}
/* NAV */

14
src/components/ClerkAuth.astro Normal file
View File

@@ -0,0 +1,14 @@
---
import { SignedIn, SignedOut, UserButton, SignInButton, SignUpButton } from "@clerk/astro/components";
---
<div class="row">
<SignedOut>
<div class="col-3">
<SignInButton mode="modal" />
<SignUpButton mode="modal" />
</div>
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</div>

15
src/components/PokedexHeader.astro
View File

@@ -3,23 +3,22 @@ import '/src/assets/css/main.scss';
import StickyFilter from './StickyFilter.astro';
---
<header class="header-top position-fixed w-100 top-0 d-none d-md-inline-block">
<header class="header-top position-fixed w-100">
<div class="header-wrap">
<div class="header-content">
<div class="header-logo">
<div class="header-logo d-none d-md-block">
<h1><div class="blueCircle m-2 ms-3"></div></a></h1> <!-- (z:2) --></h1>
</div>
</div>
<div class="header-logo-patch"></div>
<div class="header-logo-patch d-none d-md-block"></div>
<nav class="nav-main horizontal-nav">
</nav>
<div class="header-social pt-3">
<div class="redCircle"></div>
<div class="yellowCircle"></div>
<div class="greenCircle"></div>
<StickyFilter />
<div class="redCircle d-none d-md-block"></div>
<div class="yellowCircle d-none d-md-block"></div>
<div class="greenCircle d-none d-md-block"></div>
<nav class="nav-social horizontal-nav">
<StickyFilter />
</nav> <!-- end .nav-social -->
</div> <!-- end .header-social -->
</div>

10
src/components/StickyFilter.astro
View File

@@ -23,15 +23,15 @@
};
</script>
<div class="sticky w-100">
<div class="container">
<div class="search-bar w-100 me-md-3">
<div class="container mt-3 mt-md-0">
<form id="searchform" hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit" hx-vals='{"start":"0"}' hx-on--after-request="afterUpdate()" hx-on--before-request="beforeSearch()">
<div class="d-flex justify-content-between">
<div class="flex-grow-1 me-2">
<div class="bottom-0 row row-cols-2 g-0 me-md-2">
<div class="col-10">
<input type="hidden" name="start" id="start" value="0" />
<input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." />
</div>
<div class="">
<div class="col-2 p-0">
<input type="submit" class="w-100 btn btn-secondary search-button" value="Search" onclick="const q = document.querySelector('[name=q]').value; dataLayer.push({ event: 'view_search_results', search_term: q });"/>
</div>
</div>

1
src/layouts/Layout.astro
View File

@@ -1,3 +1,4 @@
<!doctype html>
<html lang="en">
<head>

3
src/middleware.ts Normal file
View File

@@ -0,0 +1,3 @@
import { clerkMiddleware } from "@clerk/astro/server";
export const onRequest = clerkMiddleware();

44
src/pages/partials/card-modal.astro
View File

@@ -119,13 +119,13 @@ const ebaySearchUrl = (card: any) => {
<div class="row g-4">
<div class="col-sm-12 col-md-3">
<p class="text-secondary">{card?.set?.setName}</p>
<div class="position-relative d-inline-block"><img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
<div class="position-relative"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-3" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
<div class="d-flex flex-row justify-content-between mt-2">
<div class="p text-secondary">{card?.Artist}</div>
</div>
</div>
<div class="col-sm-12 col-md-7">
<ul class="nav nav-tabs nav-fill border-0 me-3" id="myTab" role="tablist">
<ul class="nav nav-tabs nav-fill border-0 me-3 mb-2" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link nm active" id="nm-tab" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true"><span class="d-none d-md-inline">Near Mint</span><span class="d-md-none">NM</span></button>
</li>
@@ -142,7 +142,7 @@ const ebaySearchUrl = (card: any) => {
<button class="nav-link dmg" id="dmg-tab" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false"><span class="d-none d-md-inline">Damaged</span><span class="d-md-none">DMG</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link vendor" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-md-inline">Inventory</span><span class="d-md-none">+/-</span></button>
<button class="nav-link vendor d-none" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-md-inline">Inventory</span><span class="d-md-none">+/-</span></button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
@@ -150,35 +150,35 @@ const ebaySearchUrl = (card: any) => {
const attributes = conditionAttributes(price);
return (
<div class={`tab-pane fade ${attributes?.label} ${attributes?.class}`} id={`${attributes?.label}`} role="tabpanel" tabindex="0">
<div class="row g-2 mt-2">
<div class="row row-cols-4 row-cols-md-1 mt-2 col-12 col-md-2">
<div class="col alert alert-secondary rounded p-2 mb-2">
<div class="d-block gap-2 d-md-flex">
<div class="d-flex flex-row flex-md-column gap-1 col-12 col-md-2 mb-0">
<div class="alert alert-secondary rounded p-2 flex-fill mb-2">
<h6>Market Price</h6>
<p>${price.marketPrice}</p>
<p class="pb-0">${price.marketPrice}</p>
</div>
<div class="col alert alert-secondary rounded p-2 mb-2">
<div class="alert alert-secondary rounded p-2 flex-fill mb-2">
<h6>Lowest Price</h6>
<p>${price.lowestPrice}</p>
<p class="pb-0">${price.lowestPrice}</p>
</div>
<div class="alert alert-secondary rounded p-2 mb-2">
<div class="alert alert-secondary rounded p-2 flex-fill mb-2">
<h6>Highest Price</h6>
<p>${price.highestPrice}</p>
<p class="pb-0">${price.highestPrice}</p>
</div>
<div class={`col alert alert-secondary rounded p-2 mb-2 ${attributes?.volatilityClass}`}>
<div class={`alert alert-secondary rounded p-2 flex-fill mb-2 ${attributes?.volatilityClass}`}>
<h6>Volatility</h6>
<p>{attributes?.volatility}</p>
<p class="pb-0">{attributes?.volatility}</p>
</div>
</div>
<div class="mt-2 col-12 col-md-10">
<div class="col-12 alert alert-secondary rounded p-2 mb-2">
</div>
<div class="d-flex flex-column gap-1 col-12 col-md-10 mb-0 me-2">
<div class="alert alert-secondary rounded p-2 mb-2">
<h6>Latest Sales</h6>
</div>
<div class="col-12 alert alert-secondary rounded mb-1 py-2 ">
<p class="h6">Placeholder for graph</p>
</div>
</div>
<div class="alert alert-secondary rounded p-2 mb-2">
<h6>Placeholder for graph</h6>
</div>
</div>
</div>
</div>
);
})}
<div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
@@ -189,8 +189,8 @@ const ebaySearchUrl = (card: any) => {
</div>
</div>
<div class="col-sm-12 col-md-2 mt-0 mt-md-5">
<a class="btn btn-secondary mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a>
<a class="btn btn-secondary mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank"><span set:html={ebay} /></a>
<a class="btn btn-secondary mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank" onclick="dataLayer.push({'event': 'tcgplayerClick', 'tcgplayerUrl': this.getAttribute('href')});"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a>
<a class="btn btn-secondary mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a>
</div>
</div>
<div class="text-end my-0"><small class="text-body-secondary">Prices last updated: {timeAgo(calculatedAt)}</small></div>