clerk was missing /shared npm package

src/components/CardGrid.astro

@@ -2,7 +2,7 @@
 import BackToTop from "./BackToTop.astro"
 ---
 <div class="row mb-4">
-    <div class="col-md-3 display-sm-none">
+    <div class="col-md-2 display-sm-none">
         <div class="h5 d-none">Inventory management placeholder</div>
         <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="filterBar" aria-labelledby="filterBarLabel">
         <div class="offcanvas-header">
@@ -14,9 +14,9 @@ import BackToTop from "./BackToTop.astro"
         </div>
         </div>
     </div>
-    <div class="col-sm-12 col-md-9 mt-0">
+    <div class="col-sm-12 col-md-10 mt-0">
         <div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small"></div>
-        <div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xxl-4 row-cols-xxxl-5"></div>
+        <div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-md-3 row-cols-xl-4 row-cols-xxxl-5"></div>
         <div id="notfound"></div>
     </div>
 </div>

src/components/ClerkAuth.astro

@@ -1,14 +0,0 @@
----
-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>

src/middleware.ts

@@ -7,8 +7,11 @@ const isProtectedRoute = createRouteMatcher([
 ]);
 
 export const onRequest = clerkMiddleware((auth, context) => {
-  if (!auth().userId && isProtectedRoute(context.request)) {
-    // Redirect unauthenticated users to the sign-in page
-    return auth().redirectToSignIn(); 
+  const { isAuthenticated, redirectToSignIn } = auth()
+
+  if (!isAuthenticated && isProtectedRoute(context.request)) {
+    // Add custom logic to run before redirecting
+
+    return redirectToSignIn()
   }
 });

src/pages/index.astro

@@ -27,7 +27,7 @@ import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/co
         </div>
         <div class="col-12 col-md-6 d-flex flex-row gap-5 justify-content-end">
             <div>
-                <Show when="signed-out">
+            <Show when="signed-out">
                 <!-- Using Bootstrap btn classes -->
                 <SignInButton asChild mode="modal">
                 <button class="btn btn-success">

src/pages/partials/cards.astro

@@ -206,7 +206,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
                 document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
             });
         }
-        
+
     </script>
 }
 
@@ -221,7 +221,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
         <div class="inventory-button position-relative float-end shadow-filter text-center d-none">
             <div class="inventory-label pt-2">+/-</div>
         </div>
-        <div hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
+        <div class="card-trigger" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
             <img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 card-image image-grow w-100" onerror="this.onerror=null;this.src='/cards/default.jpg'"/>
         </div>
         <div class="row row-cols-5 gx-1 price-row mb-2">

src/pages/pokemon.astro

@@ -3,6 +3,7 @@ import Layout from '../layouts/Main.astro';
 import Search from '../components/Search.astro';
 import CardGrid from "../components/CardGrid.astro";
 import NavBar from '../components/NavBar.astro';
+
 export const prerender = false;
 ---