chore: meta, books, blogroll, links
This commit is contained in:
parent
8a3ece9530
commit
45b6e113b5
10 changed files with 530 additions and 86 deletions
69
src/pages/blogroll.astro
Normal file
69
src/pages/blogroll.astro
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { IconRss, IconJson, IconMailPlus, IconBrandMastodon } from "@tabler/icons-react";
|
||||
import { fetchGlobals } from '@utils/data/globals.js';
|
||||
import { fetchBlogroll } from '@utils/data/blogroll.js';
|
||||
|
||||
const blogroll = await fetchBlogroll();
|
||||
const globals = await fetchGlobals();
|
||||
|
||||
const currentUrl = Astro.url.pathname;
|
||||
|
||||
const title = "Blogroll";
|
||||
const description = "These are awesome blogs that I enjoy and you may enjoy too.";
|
||||
---
|
||||
<Layout
|
||||
globals={globals}
|
||||
pageTitle={title}
|
||||
description={description}
|
||||
currentUrl={currentUrl}
|
||||
>
|
||||
<h2 class="page-title">{title}</h2>
|
||||
<p>
|
||||
You can <a href="/blogroll.opml" class="plausible-event-name=Blogroll+OPML+download">download an OPML file</a> containing all of these feeds and import them into your RSS reader.
|
||||
</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Link</th>
|
||||
<th>Subscribe</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{blogroll.map((blog) => (
|
||||
<tr>
|
||||
<td>{blog.name}</td>
|
||||
<td>
|
||||
<a href={blog.url}>{blog.url.replace("https://", "")}</a>
|
||||
</td>
|
||||
<td class="blog-roll-icons">
|
||||
{blog.rss_feed && (
|
||||
<a class="rss" href={blog.rss_feed} aria-label={`RSS feed for ${blog.name}`}>
|
||||
<IconRss size={16} />
|
||||
</a>
|
||||
)}
|
||||
{blog.json_feed && (
|
||||
<a class="json" href={blog.json_feed} aria-label={`JSON feed for ${blog.name}`}>
|
||||
<IconJson size={16} />
|
||||
</a>
|
||||
)}
|
||||
{blog.newsletter && (
|
||||
<a class="mail-plus" href={blog.newsletter} aria-label={`Subscribe to ${blog.name}'s newsletter`}>
|
||||
<IconMailPlus size={16} />
|
||||
</a>
|
||||
)}
|
||||
{blog.mastodon && (
|
||||
<a class="brand-mastodon" href={blog.mastodon} aria-label={`Follow ${blog.name} on Mastodon`}>
|
||||
<IconBrandMastodon size={16} />
|
||||
</a>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
Head on over to <a href="https://blogroll.org">blogroll.org</a> to find more blogs to follow or search for feeds using <a href="https://feedle.world">feedle</a>.
|
||||
</p>
|
||||
</Layout>
|
||||
44
src/pages/blogroll.opml.js
Normal file
44
src/pages/blogroll.opml.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { fetchBlogroll } from "@utils/data/blogroll";
|
||||
import { fetchGlobals } from "@utils/data/globals";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const blogroll = await fetchBlogroll();
|
||||
const globals = await fetchGlobals();
|
||||
const dateCreated = new Date().toUTCString();
|
||||
|
||||
const opmlContent = `
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<opml version="1.0">
|
||||
<head>
|
||||
<title>OPML for all feeds in ${globals.site_name}'s blogroll</title>
|
||||
<dateCreated>${dateCreated}</dateCreated>
|
||||
</head>
|
||||
<body>
|
||||
${blogroll
|
||||
.map(
|
||||
(blog) => `
|
||||
<outline
|
||||
text="${blog.name}"
|
||||
title="${blog.name}"
|
||||
type="rss"
|
||||
xmlUrl="${blog.rss_feed}"
|
||||
htmlUrl="${blog.url}"
|
||||
/>`
|
||||
)
|
||||
.join("\n")}
|
||||
</body>
|
||||
</opml>
|
||||
`.trim();
|
||||
|
||||
return new Response(opmlContent, {
|
||||
status: 200,
|
||||
headers: {
|
||||
"Content-Type": "application/xml",
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error generating blogroll OPML:", error);
|
||||
return new Response("Error generating blogroll OPML", { status: 500 });
|
||||
}
|
||||
}
|
||||
90
src/pages/books/index.astro
Normal file
90
src/pages/books/index.astro
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Rss from "@components/blocks/banners/Rss.astro";
|
||||
import ProgressBar from "@components/media/ProgressBar.astro";
|
||||
import { fetchGlobals } from "@utils/data/globals.js";
|
||||
import { fetchBooks } from "@utils/data/books.js";
|
||||
import { md, htmlTruncate } from "@utils/helpers.js";
|
||||
|
||||
const globals = await fetchGlobals();
|
||||
const books = await fetchBooks();
|
||||
|
||||
const title = "Currently reading";
|
||||
const description = "Here's what I'm reading at the moment.";
|
||||
const updated = new Date().toISOString();
|
||||
const schema = "books";
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const bookData = books.all
|
||||
.filter((book) => book.status === "started")
|
||||
.reverse();
|
||||
const currentBookCount = books.currentYear.length;
|
||||
const bookYearLinks = (years) =>
|
||||
years
|
||||
.sort((a, b) => b.value - a.value)
|
||||
.map(
|
||||
(year, index) =>
|
||||
`<a href="/books/years/${year.value}">${year.value}</a>${
|
||||
index < years.length - 1 ? " / " : ""
|
||||
}`
|
||||
)
|
||||
.join("");
|
||||
---
|
||||
|
||||
<Layout
|
||||
globals={globals}
|
||||
pageTitle={title}
|
||||
description={description}
|
||||
updated={updated}
|
||||
currentUrl={Astro.url.pathname}
|
||||
schema={schema}
|
||||
>
|
||||
<h2 class="page-title">{title}</h2>
|
||||
<p>
|
||||
{description} I've finished <strong class="highlight-text"
|
||||
>{currentBookCount} books</strong
|
||||
> this year.
|
||||
</p>
|
||||
<p set:html={bookYearLinks(books.years)}></p>
|
||||
<Rss
|
||||
url="/feeds/books"
|
||||
text="Subscribe to my books feed or follow along on this page"
|
||||
/>
|
||||
<hr />
|
||||
{
|
||||
bookData.map((book) => (
|
||||
<article class="book-entry" key={book.url}>
|
||||
<a href={book.url}>
|
||||
<img
|
||||
srcSet={`
|
||||
${globals.cdn_url}${book.image}?class=verticalsm&type=webp 200w,
|
||||
${globals.cdn_url}${book.image}?class=verticalmd&type=webp 400w
|
||||
`}
|
||||
sizes="(max-width: 450px) 200px, 400px"
|
||||
src={`${globals.cdn_url}${book.image}?class=verticalsm&type=webp`}
|
||||
alt={`${book.title} by ${book.authors}`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width="200"
|
||||
height="307"
|
||||
/>
|
||||
</a>
|
||||
<div class="media-meta">
|
||||
<a href={book.url}>
|
||||
<span class="title">
|
||||
<strong>{book.title}</strong>
|
||||
</span>
|
||||
</a>
|
||||
{book.author && <span class="sub-meta">By {book.author}</span>}
|
||||
{book.progress && <ProgressBar percentage={`${book.progress}%`} />}
|
||||
{book.description && (
|
||||
<div
|
||||
class="description"
|
||||
set:html={htmlTruncate(md(book.description))}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
</Layout>
|
||||
69
src/pages/links.astro
Normal file
69
src/pages/links.astro
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Paginator from "@components/nav/Paginator.astro";
|
||||
import RssBanner from "@components/blocks/banners/Rss.astro";
|
||||
import { fetchGlobals } from "@utils/data/globals.js";
|
||||
import { fetchLinks } from "@utils/data/links.js";
|
||||
|
||||
const globals = await fetchGlobals();
|
||||
const links = await fetchLinks();
|
||||
|
||||
const title = "Links";
|
||||
const description = "These are links I've liked or otherwise found interesting. They're all added manually, after having been read and, I suppose, properly considered.";
|
||||
|
||||
// Pagination Settings
|
||||
const pageSize = 30;
|
||||
const currentPage = parseInt(Astro.url.searchParams.get("page") || "1", 10);
|
||||
const totalPages = Math.ceil(links.length / pageSize);
|
||||
const paginatedLinks = links.slice((currentPage - 1) * pageSize, currentPage * pageSize);
|
||||
|
||||
const pagination = {
|
||||
currentPage,
|
||||
totalPages,
|
||||
hasPrevious: currentPage > 1,
|
||||
hasNext: currentPage < totalPages,
|
||||
previousPage: currentPage > 1 ? `/links?page=${currentPage - 1}` : null,
|
||||
nextPage: currentPage < totalPages ? `/links?page=${currentPage + 1}` : null,
|
||||
pages: Array.from({ length: totalPages }, (_, index) => ({
|
||||
number: index + 1,
|
||||
href: `/links?page=${index + 1}`,
|
||||
})),
|
||||
};
|
||||
---
|
||||
|
||||
<Layout
|
||||
globals={globals}
|
||||
pageTitle={title}
|
||||
description={description}
|
||||
currentUrl={Astro.url.pathname}
|
||||
>
|
||||
{currentPage === 1 && (
|
||||
<>
|
||||
<h2 class="page-title">{title}</h2>
|
||||
<p>{description}</p>
|
||||
<RssBanner
|
||||
url="/feeds/links"
|
||||
text="Subscribe to my links feed or follow along on this page"
|
||||
/>
|
||||
<hr />
|
||||
</>
|
||||
)}
|
||||
|
||||
<div class="link-grid">
|
||||
{paginatedLinks.map((link) => (
|
||||
<div class="link-box">
|
||||
<a href={link.link} title={link.title}>
|
||||
<strong>{link.title}</strong>
|
||||
</a>
|
||||
{link.author && (
|
||||
<>
|
||||
{" via "}
|
||||
<a href={link.author.url}>{link.author.name}</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Paginator pagination={pagination} />
|
||||
</Layout>
|
||||
Reference in a new issue