Add new books

src/components/Book.astro

@@ -85,8 +85,13 @@ var idOfTitle = slugify(book.data.title);
 
   <div class="mt-2">
     <header>
-      <h2 class="text-xl sm:text-2xl leading-tight mb-2 font-heading dark:text-slate-300" id={idOfTitle}>
-        {book.data.title}
+      <h2 class="text-xl sm:text-2xl font-semibold leading-tight mb-2 font-subheading dark:text-slate-300" id={idOfTitle}>
+        <a
+              class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200"
+              href=`books/${book.slug}`
+              rel="canonical"
+            >
+        {book.data.title}</a>
       </h2>
       <i class="my-2 block">{book.data.publisher}, {formattedDate}, {book.data.role}</i>
     </header>

src/config.mjs

@@ -60,6 +60,9 @@ const CONFIG = {
     },
   },
 
+
+
+
   game: {
     disabled: false,
     postsPerPage: 30,
@@ -121,6 +124,35 @@ const CONFIG = {
     },
   },
 
+  book: {
+    disabled: false,
+    postsPerPage: 15,
+    // TODO: Change?
+    list: {
+      pathname: 'books', // blog main path, you can change this to "articles" (/articles)
+      noindex: false,
+      disabled: false,
+    },
+
+    post: {
+      permalink: '/book/%slug%',
+      // pathname: '', // empty for /some-post, value for /pathname/some-post
+      noindex: false,
+      disabled: false,
+    },
+
+    category: {
+      pathname: 'category', // set empty to change from /category/some-category to /some-category
+      noindex: true,
+      disabled: false,
+    },
+
+    tag: {
+      pathname: 'tag', // set empty to change from /tag/some-tag to /some-tag
+      noindex: true,
+      disabled: false,
+    },
+  },
 
 
   event: {
@@ -185,6 +217,7 @@ const CONFIG = {
 
 export const SITE = { ...CONFIG, blog: undefined, client: undefined };
 export const BLOG = CONFIG.blog;
+export const BOOK = CONFIG.book;
 export const CLIENT = CONFIG.client;
 export const EVENT = CONFIG.event;
 export const GAME = CONFIG.game;

src/content/books/the-dead-among-us.md

@@ -7,8 +7,16 @@ image: ~/assets/images/books/the-dead-among-us.png
 store_urls:
   - label: eBook - Direct from me (pay what you feel)
     url: https://ko-fi.com/s/0a76b75a05
+  - label: Book and other perks via Ko-fi
+    url: https://ko-fi.com/chrischinchilla/tiers
+  - label: Book and other perks via Patreon
+    url: https://www.patreon.com/c/chrischinchilla
   - label: eBook - Amazon
     url: https://www.amazon.com/dp/B0DQGRTT11
+  - label: eBook - DriveThruFiction
+    url: https://www.drivethrufiction.com/product/505735/The-dead-among-us
+  - label: eBook - All other stores
+    url: https://books2read.com/u/m09D0W
 ---
 
 **Print coming soon!**

src/pages/books/[...page].astro

@@ -2,7 +2,7 @@
 import Layout from '~/layouts/PageLayoutNoBG.astro';
 import { Pagination } from 'accessible-astro-components';
 import Headline from '~/components/blog/Headline.astro';
-import { BLOG } from '~/config.mjs';
+import { BOOK } from '~/config.mjs';
 
 import Book from '~/components/Book.astro';
 import { getCollection } from 'astro:content';
@@ -11,7 +11,7 @@ export async function getStaticPaths({ paginate }) {
   allBooks = allBooks.sort((a, b) => new Date(b.data.publish_date).valueOf() - new Date(a.data.publish_date).valueOf());
 
   return paginate(allBooks, {
-    pageSize: BLOG.postsPerPage,
+    pageSize: BOOK.postsPerPage,
   });
 }
 

src/pages/books/[...slug].astro

@@ -0,0 +1,35 @@
+---
+import MarkdownPostLayout from '../../layouts/MarkdownLayout.astro';
+import { Image } from 'astro:assets';
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+  const bookEntries = await getCollection('books');
+  return bookEntries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+
+<MarkdownPostLayout frontmatter={entry.data}>
+  <Image src={entry.data.image} alt={entry.data.title} class="object-cover w-full h-full mb-6 rounded drop-shadow-lg" />
+  {
+    entry.data.store_urls && (
+
+        <b class="my-2 block">Buy a copy in the following places:</b>
+        <ul class="list-disc list-inside m-2">
+          {entry.data.store_urls.map((store_url) => (
+            <li>
+              <a href={store_url.url}>{store_url.label}</a>
+            </li>
+          ))}
+        </ul>
+
+    )
+  }
+  <Content />
+</MarkdownPostLayout>