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

changed the mechanism for auth on the index page (requires install of newer clerk components)

Browse Source
This commit is contained in:
zach
2026-03-05 15:24:08 -05:00
parent 091aa72f23
commit dedd7f8d87
4 changed files with 194 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Search.astro
View File

@@ -1,5 +1,5 @@
---
import { SignedIn } from "@clerk/astro/components";
import { Show } from '@clerk/astro/components'
---
<script is:inline>
const afterUpdate = (e) => {
@@ -23,7 +23,7 @@ import { SignedIn } from "@clerk/astro/components";
};
</script>
<SignedIn>
<Show when="signed-in">
<form class="d-flex ms-2" role="search" 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()">
<a class="btn btn-secondary btn-lg me-2" data-bs-toggle="offcanvas" href="#filterBar" role="button" aria-controls="filterBar"><span class="d-block d-md-none filter-icon mt-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path opacity=".4" d="M96 160L283.3 347.3C286.3 350.3 288 354.4 288 358.6L288 480L352 544L352 358.6C352 354.4 353.7 350.3 356.7 347.3L544 160L96 160z"/><path d="M66.4 147.8C71.4 135.8 83.1 128 96 128L544 128C556.9 128 568.6 135.8 573.6 147.8C578.6 159.8 575.8 173.5 566.7 182.7L384 365.3L384 544C384 556.9 376.2 568.6 364.2 573.6C352.2 578.6 338.5 575.8 329.3 566.7L265.3 502.7C259.3 496.7 255.9 488.6 255.9 480.1L256 365.3L73.4 182.6C64.2 173.5 61.5 159.7 66.4 147.8zM544 160L96 160L283.3 347.3C286.3 350.3 288 354.4 288 358.6L288 480L352 544L352 358.6C352 354.4 353.7 350.3 356.7 347.3L544 160z"/></svg></span><span class="d-none d-md-block">Filters</span></a>
<div class="input-group">
@@ -34,5 +34,5 @@ import { SignedIn } from "@clerk/astro/components";
</button>
</div>
</form>
</SignedIn>
</Show>

37
src/pages/index.astro
View File

@@ -4,9 +4,7 @@ import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
import Footer from '../components/Footer.astro';
export const prerender = false;
import { Waitlist as WaitlistAstro } from '@clerk/astro/components';
import { SignIn as SignInAstro } from '@clerk/astro/components';
import { Sign } from 'node:crypto';
import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/components'
---
<Layout>
<NavBar slot="navbar">
@@ -15,7 +13,7 @@ import { Sign } from 'node:crypto';
<div class="row mb-4" slot="page">
<h1>Rigid's App Thing</h1>
<h5 class="text-secondary">(working title)</h5>
<div class="col-12 col-md-7 mb-2">
<div class="col-12 col-md-6 mb-2">
<h4 class="mt-3">Welcome!</h4>
<p class="mt-2">
You've been selected to participate in the closed beta! This single page web application is meant to elevate condition/variant data for the Pokemon TCG. In future iterations, we will add vendor inventory/collection management features, as well.</p>
@@ -23,10 +21,35 @@ import { Sign } from 'node:crypto';
<p class="my-2">
After the closed beta is complete, the app will move into a more open beta. Feel free to play "Who's that Pokémon?" with the random Pokémon generator <a href="/404">here</a>. Refresh the page to see a new Pokémon!
</p>
<a href="/pokemon" class="btn btn-warning mt-2">Take me to the cards</a>
<Show when="signed-in">
<a href="/pokemon" class="btn btn-warning mt-2">Take me to the cards</a>
</Show>
</div>
<div class="col-12 col-md-4 offset-md-1">
<div class="col-12 col-md-6 d-flex flex-row gap-5 justify-content-end">
<div>
<Show when="signed-out">
<!-- Using Bootstrap btn classes -->
<SignInButton asChild mode="modal">
<button class="btn btn-success">
Sign In
</button>
</SignInButton>
<SignUpButton asChild mode="modal">
<button class="btn btn-dark">
Request Access
</button>
</SignUpButton>
</Show>
</div>
<div>
<Show when="signed-in">
<SignOutButton asChild mode="modal">
<button class="btn btn-danger">
Sign Out
</button>
</SignOutButton>
</Show>
</div>
</div>
</div>
<Footer slot="footer" />