feat: integrate Hardcover API for books
- Add lib/hardcover.ts with GraphQL client for Hardcover API - Add routes/api/books/[name].ts for creating books via Hardcover ID - Add routes/api/books/enhance/[name].ts for enhancing books - Add routes/api/hardcover/query.ts for searching books - Add routes/books/[name].tsx and index.tsx for book pages
This commit is contained in:
122
routes/books/[name].tsx
Normal file
122
routes/books/[name].tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import { Handlers, PageProps } from "$fresh/server.ts";
|
||||
import { MainLayout } from "@components/layouts/main.tsx";
|
||||
import { KMenu } from "@islands/KMenu.tsx";
|
||||
import { YoutubePlayer } from "@components/Youtube.tsx";
|
||||
import { HashTags } from "@components/HashTags.tsx";
|
||||
import { isYoutubeLink } from "@lib/string.ts";
|
||||
import { removeImage, renderMarkdown } from "@lib/markdown.ts";
|
||||
import { RedirectSearchHandler } from "@islands/Search.tsx";
|
||||
import PageHero from "@components/PageHero.tsx";
|
||||
import { Star } from "@components/Stars.tsx";
|
||||
import { MetaTags } from "@components/MetaTags.tsx";
|
||||
import { fetchResource } from "@lib/marka/index.ts";
|
||||
import { BookResource } from "@lib/marka/schema.ts";
|
||||
import { parseRating } from "@lib/helpers.ts";
|
||||
|
||||
export const handler: Handlers<{ book: BookResource; session: unknown }> =
|
||||
{
|
||||
async GET(_, ctx) {
|
||||
const book = await fetchResource<BookResource>(
|
||||
`books/${ctx.params.name}.md`,
|
||||
);
|
||||
if (!book) {
|
||||
return ctx.renderNotFound();
|
||||
}
|
||||
return ctx.render({ book, session: ctx.state.session });
|
||||
},
|
||||
};
|
||||
|
||||
export default function Greet(
|
||||
props: PageProps<
|
||||
{ book: BookResource; session: Record<string, string> }
|
||||
>,
|
||||
) {
|
||||
const { book, session } = props.data;
|
||||
|
||||
const { author, datePublished, reviewRating, bookBody = "", reviewBody } =
|
||||
book?.content || {};
|
||||
|
||||
const bookContent = renderMarkdown(
|
||||
removeImage(bookBody, book.image?.url),
|
||||
);
|
||||
|
||||
const reviewContent = reviewBody
|
||||
? renderMarkdown(removeImage(reviewBody, book.image?.url))
|
||||
: undefined;
|
||||
|
||||
const rating = reviewRating?.ratingValue &&
|
||||
parseRating(reviewRating.ratingValue);
|
||||
|
||||
return (
|
||||
<MainLayout
|
||||
url={props.url}
|
||||
title={`Book > ${book.content.headline}`}
|
||||
context={book}
|
||||
>
|
||||
<RedirectSearchHandler />
|
||||
<KMenu type="main" context={book} />
|
||||
<MetaTags resource={book} />
|
||||
|
||||
<PageHero
|
||||
image={book.image?.url}
|
||||
thumbhash={book.image?.thumbhash}
|
||||
>
|
||||
<PageHero.Header>
|
||||
<PageHero.BackLink href="/books" />
|
||||
{session && (
|
||||
<PageHero.EditLink
|
||||
href={`https://notes.max-richter.dev/resources/books/${book.name}`}
|
||||
/>
|
||||
)}
|
||||
</PageHero.Header>
|
||||
<PageHero.Footer>
|
||||
<PageHero.Title link={book.content.url}>
|
||||
{book.content.headline}
|
||||
</PageHero.Title>
|
||||
<PageHero.Subline
|
||||
entries={[
|
||||
author?.name && {
|
||||
title: author.name,
|
||||
href: `/?q=${encodeURIComponent(author?.name)}`,
|
||||
},
|
||||
datePublished?.toString(),
|
||||
]}
|
||||
>
|
||||
{rating && <Star rating={rating} />}
|
||||
</PageHero.Subline>
|
||||
</PageHero.Footer>
|
||||
</PageHero>
|
||||
{book.content?.keywords?.length && (
|
||||
<>
|
||||
<br />
|
||||
<HashTags tags={book.content.keywords} />
|
||||
</>
|
||||
)}
|
||||
|
||||
<div class="px-8 text-white mt-10">
|
||||
{(book.content.url && isYoutubeLink(book.content.url)) && (
|
||||
<YoutubePlayer link={book.content.url} />
|
||||
)}
|
||||
<pre
|
||||
class="whitespace-break-spaces markdown-body"
|
||||
data-color-mode="dark"
|
||||
data-dark-theme="dark"
|
||||
// deno-lint-ignore react-no-danger
|
||||
dangerouslySetInnerHTML={{ __html: bookContent || "" }}
|
||||
/>
|
||||
{reviewContent && (
|
||||
<>
|
||||
<h2 class="text-4xl font-bold mb-4 mt-8">Review</h2>
|
||||
<pre
|
||||
class="whitespace-break-spaces markdown-body"
|
||||
data-color-mode="dark"
|
||||
data-dark-theme="dark"
|
||||
// deno-lint-ignore react-no-danger
|
||||
dangerouslySetInnerHTML={{ __html: reviewContent }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
62
routes/books/index.tsx
Normal file
62
routes/books/index.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import { Handlers, PageProps } from "$fresh/server.ts";
|
||||
import { MainLayout } from "@components/layouts/main.tsx";
|
||||
import { type BookResource, GenericResource } from "@lib/marka/schema.ts";
|
||||
import { KMenu } from "@islands/KMenu.tsx";
|
||||
import { Grid } from "@components/Grid.tsx";
|
||||
import { IconArrowLeft } from "@components/icons.tsx";
|
||||
import { RedirectSearchHandler } from "@islands/Search.tsx";
|
||||
import { parseResourceUrl, searchResource } from "@lib/search.ts";
|
||||
import { ResourceCard } from "@components/Card.tsx";
|
||||
import { Link } from "@islands/Link.tsx";
|
||||
import { listResources } from "@lib/marka/index.ts";
|
||||
|
||||
export const handler: Handlers<
|
||||
{ books: BookResource[] | null; searchResults?: GenericResource[] }
|
||||
> = {
|
||||
async GET(req, ctx) {
|
||||
const books = await listResources<BookResource>("books");
|
||||
const searchParams = parseResourceUrl(req.url);
|
||||
const searchResults = searchParams &&
|
||||
await searchResource({ ...searchParams, types: ["books"] });
|
||||
return ctx.render({ books, searchResults });
|
||||
},
|
||||
};
|
||||
|
||||
export default function Greet(
|
||||
props: PageProps<
|
||||
{ books: BookResource[] | null; searchResults: GenericResource[] }
|
||||
>,
|
||||
) {
|
||||
const { books, searchResults } = props.data;
|
||||
return (
|
||||
<MainLayout
|
||||
url={props.url}
|
||||
title="Books"
|
||||
context={{ type: "books" }}
|
||||
searchResults={searchResults}
|
||||
>
|
||||
<header class="flex gap-4 items-center mb-5 md:hidden">
|
||||
<Link
|
||||
class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
|
||||
href="/"
|
||||
>
|
||||
<IconArrowLeft class="w-5 h-5" />
|
||||
Back
|
||||
</Link>
|
||||
|
||||
<h3 class="text-2xl text-white font-light">📚 Books</h3>
|
||||
</header>
|
||||
<RedirectSearchHandler />
|
||||
<KMenu type="main" context={{ type: "books" }} />
|
||||
<Grid>
|
||||
{books?.map((doc, i) => (
|
||||
<ResourceCard
|
||||
key={doc.name || i}
|
||||
sublink="books"
|
||||
res={doc}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user