shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 12:37:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

added minimal astro adapter + improved the example

Browse Source
This commit is contained in:
dswbx
2024-11-29 21:21:59 +01:00
parent 6eb0d2242f
commit 582dbd4272
11 changed files with 301 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
examples/astro/src/pages/admin/[...admin].astro
View File

@@ -1,21 +1,20 @@
---
import { Api } from "bknd";
import { Admin } from "bknd/ui";
import "bknd/dist/styles.css";
export const prerender = false;
const api = new Api({
host: new URL(Astro.request.url).origin,
headers: Astro.request.headers
});
import { getApi } from "bknd/adapter/astro";
const api = getApi(Astro, { mode: "dynamic" });
const user = api.getUser();
export const prerender = false;
---
<html>
<body>
<Admin
withProvider={{ user }}
config={{ basepath: "/admin" }}
config={{ basepath: "/admin", color_scheme: "dark" }}
client:load
/>
</body>

35
examples/astro/src/pages/index.astro
View File

@@ -1,16 +1,29 @@
---
import { Api } from "bknd";
const api = new Api({
host: new URL(Astro.request.url).origin
});
import { getApi } from "bknd/adapter/astro";
import Card from "../components/Card.astro";
import Layout from "../layouts/Layout.astro";
const api = getApi(Astro);
const { data } = await api.data.readMany("todos");
---
<Layout title="Welcome to Astro.">
<p slot="context">Static Rendering</p>
<ul role="list" class="link-card-grid">
{data.map((todo: any) => (
<Card
done={todo.done}
title={todo.title}
body={todo.description}
/>
))}
</ul>
</Layout>
<h1>Home (static)</h1>
<h2>Data</h2>
<pre>{JSON.stringify(data, null, 2)}</pre>
<a href="/admin">Admin</a> -
<a href="/ssr">SSR (with auth)</a> -
<a href="/">Home (static)</a>
<style>
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 2rem;
padding: 0;
}
</style>

42
examples/astro/src/pages/ssr.astro
View File

@@ -1,23 +1,35 @@
---
import { Api } from "bknd";
const api = new Api({
host: new URL(Astro.request.url).origin,
headers: Astro.request.headers
});
import { getApi } from "bknd/adapter/astro";
import Card from "../components/Card.astro";
import Layout from "../layouts/Layout.astro";
const api = getApi(Astro, { mode: "dynamic" });
const { data } = await api.data.readMany("todos");
const user = api.getUser();
console.log("user", user);
export const prerender = false;
---
<h1>SSR</h1>
<h2>Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
<Layout title="Welcome to Astro.">
<p slot="context">Server Side Rendering</p>
<ul role="list" class="link-card-grid">
{data.map((todo: any) => (
<Card
done={todo.done}
title={todo.title}
body={todo.description}
/>
))}
</ul>
<div class="center">
{user ? <p>Logged in as <b>{user?.email}</b>. <a href="/api/auth/logout">Logout</a></p> : <p>Not authenticated. <a href="/admin/auth/login">Sign in</a></p>}
</div>
</Layout>
<h2>User</h1>
<pre>{JSON.stringify(user, null, 2)}</pre>
<a href="/admin">Admin</a> -
<a href="/ssr">SSR (with auth)</a> -
<a href="/">Home (static)</a>
<style>
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 2rem;
padding: 0;
}
</style>