+
+
+
+
+
+
-
diff --git a/src/layouts/SinglePage.astro b/src/layouts/SinglePage.astro
new file mode 100644
index 0000000..1b7f82c
--- /dev/null
+++ b/src/layouts/SinglePage.astro
@@ -0,0 +1,8 @@
+---
+import BaseHead from '../components/BaseHead.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import FormattedDate from '../components/FormattedDate.astro';
+
+const { title, description, publishDate, updatedDate, heroImage } = Astro.props;
+---
diff --git a/src/pages/about.astro b/src/pages/about.astro
index c9d5b02..92e103a 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -5,7 +5,7 @@ import Layout from '../layouts/BlogPost.astro';
${post.frontmatter.description} `,
+ content: globalImageUrls(site.url, sanitizeHtml(post.compiledContent())),
+ })),
+ });
+}
diff --git a/src/pages/series/[name].astro b/src/pages/series/[name].astro
new file mode 100644
index 0000000..8fd64c5
--- /dev/null
+++ b/src/pages/series/[name].astro
@@ -0,0 +1,71 @@
+---
+import { getCollection } from "astro:content";
+import { slugify } from "../../components/utilities/StringFormat.js";
+import { deslugify } from "../../components/utilities/StringFormat.js";
+import Base from "../../layouts/Base.astro";
+import SeriesList from "../../components/SeriesList.astro";
+import LayerIcon from "../../components/icons/LayerIcon.astro";
+import PlusCircleIcon from "../../components/icons/PlusCircleIcon.astro";
+
+export async function getStaticPaths({}) {
+ const allPosts = await getCollection("posts");
+ const sortedPosts = allPosts.sort(
+ (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
+ );
+ const allNames = new Set();
+ sortedPosts.map((post) => {
+ post.data.series && allNames.add(slugify(post.data.series));
+ });
+
+ return Array.from(allNames).map((name) => {
+ return {
+ params: { name },
+ props: {
+ posts: sortedPosts,
+ },
+ };
+ });
+}
+
+const { posts } = Astro.props;
+const { name } = Astro.params;
+
+let title = deslugify(name);
+let description = "Posts in " + title + " series.";
+---
+
+
+
+
+
+
diff --git a/src/pages/series/index.astro b/src/pages/series/index.astro
new file mode 100644
index 0000000..2d777c2
--- /dev/null
+++ b/src/pages/series/index.astro
@@ -0,0 +1,45 @@
+---
+import { getCollection } from "astro:content";
+import Base from "../../layouts/Base.astro";
+import SeriesList from "../../components/SeriesList.astro";
+import site from "../../data/site.json";
+import LayerIcon from "../../components/icons/LayerIcon.astro";
+
+const allPosts = await getCollection("posts");
+const allSeries = allPosts
+ .map((post) => post.data.series)
+ .filter((series) => series !== undefined)
+ .filter((series, index, self) => self.indexOf(series) === index)
+ .sort();
+
+let title = "Series - " + site.title;
+let description = "Series of related posts on " + site.title + ".";
+---
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/global.css b/src/styles/global.css
index d52c23e..24b0c55 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -4,152 +4,181 @@
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/
+@import "tailwindcss";
+/* By default, Latte is light mode and Mocha is dark mode */
+
:root {
- --accent: #2337ff;
- --accent-dark: #000d8a;
- --black: 15, 18, 25;
- --gray: 96, 115, 159;
- --gray-light: 229, 233, 240;
- --gray-dark: 34, 41, 57;
- --gray-gradient: rgba(var(--gray-light), 50%), #fff;
- --box-shadow:
- 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
- 0 16px 32px rgba(var(--gray), 33%);
+ --accent: #2337ff;
+ --accent-dark: #000d8a;
+ --black: 15, 18, 25;
+ --gray: 96, 115, 159;
+ --gray-light: 229, 233, 240;
+ --gray-dark: 34, 41, 57;
+ --gray-gradient: rgba(var(--gray-light), 50%), #fff;
+ --box-shadow:
+ 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
+ 0 16px 32px rgba(var(--gray), 33%);
}
+
@font-face {
- font-family: 'Atkinson';
- src: url('/fonts/atkinson-regular.woff') format('woff');
- font-weight: 400;
- font-style: normal;
- font-display: swap;
+ font-family: 'Atkinson';
+ src: url('/fonts/atkinson-regular.woff') format('woff');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
}
+
@font-face {
- font-family: 'Atkinson';
- src: url('/fonts/atkinson-bold.woff') format('woff');
- font-weight: 700;
- font-style: normal;
- font-display: swap;
+ font-family: 'Atkinson';
+ src: url('/fonts/atkinson-bold.woff') format('woff');
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
}
+
body {
- font-family: 'Atkinson', sans-serif;
- margin: 0;
- padding: 0;
- text-align: left;
- background: linear-gradient(var(--gray-gradient)) no-repeat;
- background-size: 100% 600px;
- word-wrap: break-word;
- overflow-wrap: break-word;
- color: rgb(var(--gray-dark));
- font-size: 20px;
- line-height: 1.7;
+ font-family: 'Atkinson', sans-serif;
+ margin: 0;
+ padding: 0;
+ text-align: left;
+ background: linear-gradient(var(--gray-gradient)) no-repeat;
+ background-size: 100% 600px;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ color: rgb(var(--gray-dark));
+ font-size: 20px;
+ line-height: 1.7;
}
+
main {
- width: 720px;
- max-width: calc(100% - 2em);
- margin: auto;
- padding: 3em 1em;
+ width: 720px;
+ max-width: calc(100% - 2em);
+ margin: auto;
+ padding: 3em 1em;
}
+
h1,
h2,
h3,
h4,
h5,
h6 {
- margin: 0 0 0.5rem 0;
- color: rgb(var(--black));
- line-height: 1.2;
+ margin: 0 0 0.5rem 0;
+ color: rgb(var(--black));
+ line-height: 1.2;
}
+
h1 {
- font-size: 3.052em;
+ font-size: 3.052em;
}
+
h2 {
- font-size: 2.441em;
+ font-size: 2.441em;
}
+
h3 {
- font-size: 1.953em;
+ font-size: 1.953em;
}
+
h4 {
- font-size: 1.563em;
+ font-size: 1.563em;
}
+
h5 {
- font-size: 1.25em;
+ font-size: 1.25em;
}
+
strong,
b {
- font-weight: 700;
+ font-weight: 700;
}
+
a {
- color: var(--accent);
+ color: var(--accent);
}
+
a:hover {
- color: var(--accent);
+ color: var(--accent);
}
+
p {
- margin-bottom: 1em;
+ margin-bottom: 1em;
}
+
.prose p {
- margin-bottom: 2em;
+ margin-bottom: 2em;
}
+
textarea {
- width: 100%;
- font-size: 16px;
+ width: 100%;
+ font-size: 16px;
}
+
input {
- font-size: 16px;
+ font-size: 16px;
}
+
table {
- width: 100%;
+ width: 100%;
}
+
img {
- max-width: 100%;
- height: auto;
- border-radius: 8px;
+ max-width: 100%;
+ height: auto;
+ border-radius: 8px;
}
+
code {
- padding: 2px 5px;
- background-color: rgb(var(--gray-light));
- border-radius: 2px;
+ padding: 2px 5px;
+ background-color: rgb(var(--gray-light));
+ border-radius: 2px;
}
+
pre {
- padding: 1.5em;
- border-radius: 8px;
+ padding: 1.5em;
+ border-radius: 8px;
}
-pre > code {
- all: unset;
+
+pre>code {
+ all: unset;
}
+
blockquote {
- border-left: 4px solid var(--accent);
- padding: 0 0 0 20px;
- margin: 0px;
- font-size: 1.333em;
+ border-left: 4px solid var(--accent);
+ padding: 0 0 0 20px;
+ margin: 0px;
+ font-size: 1.333em;
}
+
hr {
- border: none;
- border-top: 1px solid rgb(var(--gray-light));
+ border: none;
+ border-top: 1px solid rgb(var(--gray-light));
}
+
@media (max-width: 720px) {
- body {
- font-size: 18px;
- }
- main {
- padding: 1em;
- }
+ body {
+ font-size: 18px;
+ }
+
+ main {
+ padding: 1em;
+ }
}
.sr-only {
- border: 0;
- padding: 0;
- margin: 0;
- position: absolute !important;
- height: 1px;
- width: 1px;
- overflow: hidden;
- /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
- clip: rect(1px 1px 1px 1px);
- /* maybe deprecated but we need to support legacy browsers */
- clip: rect(1px, 1px, 1px, 1px);
- /* modern browsers, clip-path works inwards from each corner */
- clip-path: inset(50%);
- /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
- white-space: nowrap;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
+ clip: rect(1px 1px 1px 1px);
+ /* maybe deprecated but we need to support legacy browsers */
+ clip: rect(1px, 1px, 1px, 1px);
+ /* modern browsers, clip-path works inwards from each corner */
+ clip-path: inset(50%);
+ /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
+ white-space: nowrap;
}
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..4c0efc0
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,18 @@
+import type { Config } from "tailwindcss";
+// import defaultTheme from "tailwindcss/defaultTheme";
+
+const config: Config = {
+ content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+ future: {
+ hoverOnlyWhenSupported: true,
+ },
+ plugins: [
+ require("@catppuccin/tailwindcss")({
+ prefix: "ctp",
+ // which flavour of colours to use by default, in the `:root`
+ defaultFlavour: "latte",
+ }),
+ ],
+};
+
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
index 0dc098d..4f75741 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,15 @@
{
"extends": "astro/tsconfigs/strict",
- "include": [".astro/types.d.ts", "**/*"],
- "exclude": ["dist"],
+ "include": [
+ ".astro/types.d.ts",
+ "**/*"
+ ],
+ "exclude": [
+ "dist"
+ ],
"compilerOptions": {
- "strictNullChecks": true
+ "strictNullChecks": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "react"
}
-}
+}
\ No newline at end of file
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 1d8d02a..3a1cd63 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -7,7 +7,7 @@ import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';
const posts = (await getCollection('blog')).sort(
- (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+ (a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf()
);
---
@@ -97,7 +97,7 @@ const posts = (await getCollection('blog')).sort(
{post.data.title}
-
+
+
+
+
+ {
+ allSeries.map((series) => (
+
+
+