+ + {props.pageTitle[0]} + + {props.pageTitle[1]} + +
+ ) : ( +{props.pageTitle}
+ ) + } +{props.pageDesc}
+
+
+
+
+ )
+}
+
+
diff --git a/src/components/BackToTopButton.astro b/src/components/BackToTopButton.astro
new file mode 100644
index 0000000..88e733e
--- /dev/null
+++ b/src/components/BackToTopButton.astro
@@ -0,0 +1,88 @@
+---
+import IconChevronLeft from "@/assets/icons/IconChevronLeft.svg";
+import IconArrowNarrowUp from "@/assets/icons/IconArrowNarrowUp.svg";
+---
+
+
+
+
+
+
diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro
new file mode 100644
index 0000000..d93e66c
--- /dev/null
+++ b/src/components/Breadcrumb.astro
@@ -0,0 +1,57 @@
+---
+// Remove current url path and remove trailing slash if exists
+const currentUrlPath = Astro.url.pathname.replace(/\/+$/, "");
+
+// Get url array from path
+// eg: /tags/tailwindcss => ['tags', 'tailwindcss']
+const breadcrumbList = currentUrlPath.split("/").slice(1);
+
+// if breadcrumb is Home > Posts > 1 {title}
+ ) : ( +{title}
+ ) + } + +{description}
+
+
diff --git a/src/components/EditPost.astro b/src/components/EditPost.astro
new file mode 100644
index 0000000..79d7d5a
--- /dev/null
+++ b/src/components/EditPost.astro
@@ -0,0 +1,34 @@
+---
+import type { CollectionEntry } from "astro:content";
+import IconEdit from "@/assets/icons/IconEdit.svg";
+import { SITE } from "@/config";
+
+export interface Props {
+ hideEditPost?: CollectionEntry<"blog">["data"]["hideEditPost"];
+ class?: string;
+ post: CollectionEntry<"blog">;
+}
+
+const { hideEditPost, post, class: className = "" } = Astro.props;
+
+const href = `${SITE.editPost.url}${post.filePath}`;
+const showEditPost =
+ SITE.editPost.enabled && !hideEditPost && href.trim() !== "";
+---
+
+{
+ showEditPost && (
+
+ +
+
+
diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro
new file mode 100644
index 0000000..6b88057
--- /dev/null
+++ b/src/components/LinkButton.astro
@@ -0,0 +1,42 @@
+---
+export interface Props {
+ id?: string;
+ href: string;
+ class?: string;
+ ariaLabel?: string;
+ title?: string;
+ disabled?: boolean;
+}
+
+const {
+ id,
+ href,
+ class: className = "",
+ ariaLabel,
+ title,
+ disabled = false,
+} = Astro.props;
+---
+
+{
+ disabled ? (
+
+ +
+ Share this post on:
+
+ )
+}
diff --git a/src/components/Socials.astro b/src/components/Socials.astro
new file mode 100644
index 0000000..545fca7
--- /dev/null
+++ b/src/components/Socials.astro
@@ -0,0 +1,25 @@
+---
+import { SOCIALS } from "@/constants";
+import LinkButton from "./LinkButton.astro";
+
+export interface Props {
+ centered?: boolean;
+}
+
+const { centered = false } = Astro.props;
+---
+
+
+ {SHARE_LINKS.map(social => (
+
+
+ ))}
+
+
+ {
+ SOCIALS.map(social => (
+
+
+ ))
+ }
+
diff --git a/src/components/Tag.astro b/src/components/Tag.astro
new file mode 100644
index 0000000..28578b2
--- /dev/null
+++ b/src/components/Tag.astro
@@ -0,0 +1,36 @@
+---
+import IconHash from "@/assets/icons/IconHash.svg";
+
+export interface Props {
+ tag: string;
+ tagName: string;
+ size?: "sm" | "lg";
+}
+
+const { tag, tagName, size = "sm" } = Astro.props;
+---
+
++Creator of AstroPaper diff --git a/src/data/blog/_releases/astro-paper-5.md b/src/data/blog/_releases/astro-paper-5.md new file mode 100644 index 0000000..1ddd257 --- /dev/null +++ b/src/data/blog/_releases/astro-paper-5.md @@ -0,0 +1,101 @@ +--- +pubDatetime: 2025-03-08T08:18:19.693Z +title: AstroPaper 5.0 +slug: astro-paper-v5 +featured: true +ogImage: ../../../assets/images/AstroPaper-v5.png +tags: + - release +description: "AstroPaper v5: keep the clean look, updates under the hood." +--- + +At last, the long-awaited AstroPaper v5 is finally here. AstroPaper v5 keeps the same minimal & clean look, but comes with significant updates under the hood. + + + +## Table of contents + +## Major Changes + +### Upgrade to Astro v5 [#455](https://github.com/satnaing/astro-paper/pull/455) + +AstroPaper now comes with Astro v5, bringing all the new features and improvements that come with it. + +### Tailwind v4 + +AstroPaper has been upgraded to Tailwind v4, which includes many style changes under the hood. The `tailwind.config.js` file has been removed, and now all the configuration is located within the `src/styles/global.css` file. Typography-related styles have been extracted and moved to `src/styles/typography.css`. + +Due to the new behavior in TailwindCSS v4, styles inside ` diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro new file mode 100644 index 0000000..7520135 --- /dev/null +++ b/src/layouts/Main.astro @@ -0,0 +1,54 @@ +--- +import Breadcrumb from "@/components/Breadcrumb.astro"; +import { SITE } from "@/config"; + +interface StringTitleProp { + pageTitle: string; + pageDesc?: string; +} + +interface ArrayTitleProp { + pageTitle: [string, string]; + titleTransition: string; + pageDesc?: string; +} + +export type Props = StringTitleProp | ArrayTitleProp; + +const { props } = Astro; + +const backUrl = SITE.showBackButton ? Astro.url.pathname : "/"; +--- + +
+ {title} +
+
+
+ + +
-
+ {tags.map(tag =>
+ + +
+ {
+ prevPost && (
+
+
+
+ Previous Post
+
+
+ )
+ }
+ {
+ nextPost && (
+
+ {prevPost.title}
+
+ Next Post
+
+ {nextPost.title}
+
+
+ Go back home
+
+
+ 404
+ +Page Not Found
+
+ {year}
+ {yearGroup.length}
+ {Object.entries(
+ getPostsByGroupCondition(
+ yearGroup,
+ post => post.data.pubDatetime.getMonth() + 1
+ )
+ )
+ .sort(([monthA], [monthB]) => Number(monthB) - Number(monthA))
+ .map(([month, monthGroup]) => (
+
+ ))
+ }
+
+
+ ))}
+
+ {months[Number(month) - 1]}
+ {monthGroup.length}
+
+ -
+ {monthGroup
+ .sort(
+ (a, b) =>
+ Math.floor(
+ new Date(b.data.pubDatetime).getTime() / 1000
+ ) -
+ Math.floor(
+ new Date(a.data.pubDatetime).getTime() / 1000
+ )
+ )
+ .map(data => (
+
+ Mingalaba +
+ ++ AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro + blog theme. This theme follows best practices and provides accessibility + out of the box. Light and dark mode are supported by default. Moreover, + additional color schemes can also be configured. +
+
+ Read the blog posts or check
+
+
+ )
+ }
+ Social Links:
+ + + { + featuredPosts.length > 0 && ( + <> +
Featured
+-
+ {featuredPosts.map(data => (
+
} + + ) + } + + { + recentPosts.length > 0 && ( +
Recent Posts
+-
+ {recentPosts.map(
+ (data, index) =>
+ index < SITE.postPerIndex &&
+
+ All Posts
+
+
+ -
+ {page.data.map(data =>
{`Tag:${tag}`}
+-
+ {page.data.map(data =>
-
+ {tags.map(({ tag, tagName }) =>
+//
+
+//
`;
+
+export default async post => {
+ return satori(
+ {
+ type: "div",
+ props: {
+ style: {
+ background: "#fefbfb",
+ width: "100%",
+ height: "100%",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ children: [
+ {
+ type: "div",
+ props: {
+ style: {
+ position: "absolute",
+ top: "-1px",
+ right: "-1px",
+ border: "4px solid #000",
+ background: "#ecebeb",
+ opacity: "0.9",
+ borderRadius: "4px",
+ display: "flex",
+ justifyContent: "center",
+ margin: "2.5rem",
+ width: "88%",
+ height: "80%",
+ },
+ },
+ },
+ {
+ type: "div",
+ props: {
+ style: {
+ border: "4px solid #000",
+ background: "#fefbfb",
+ borderRadius: "4px",
+ display: "flex",
+ justifyContent: "center",
+ margin: "2rem",
+ width: "88%",
+ height: "80%",
+ },
+ children: {
+ type: "div",
+ props: {
+ style: {
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "space-between",
+ margin: "20px",
+ width: "90%",
+ height: "90%",
+ },
+ children: [
+ {
+ type: "p",
+ props: {
+ style: {
+ fontSize: 72,
+ fontWeight: "bold",
+ maxHeight: "84%",
+ overflow: "hidden",
+ },
+ children: post.data.title,
+ },
+ },
+ {
+ type: "div",
+ props: {
+ style: {
+ display: "flex",
+ justifyContent: "space-between",
+ width: "100%",
+ marginBottom: "8px",
+ fontSize: 28,
+ },
+ children: [
+ {
+ type: "span",
+ props: {
+ children: [
+ "by ",
+ {
+ type: "span",
+ props: {
+ style: { color: "transparent" },
+ children: '"',
+ },
+ },
+ {
+ type: "span",
+ props: {
+ style: {
+ overflow: "hidden",
+ fontWeight: "bold",
+ },
+ children: post.data.author,
+ },
+ },
+ ],
+ },
+ },
+ {
+ type: "span",
+ props: {
+ style: { overflow: "hidden", fontWeight: "bold" },
+ children: SITE.title,
+ },
+ },
+ ],
+ },
+ },
+ ],
+ },
+ },
+ },
+ },
+ ],
+ },
+ },
+ {
+ width: 1200,
+ height: 630,
+ embedFont: true,
+ fonts: await loadGoogleFonts(
+ post.data.title + post.data.author + SITE.title + "by"
+ ),
+ }
+ );
+};
diff --git a/src/utils/og-templates/site.js b/src/utils/og-templates/site.js
new file mode 100644
index 0000000..69a5218
--- /dev/null
+++ b/src/utils/og-templates/site.js
@@ -0,0 +1,128 @@
+import satori from "satori";
+import { SITE } from "@/config";
+import loadGoogleFonts from "../loadGoogleFont";
+
+export default async () => {
+ return satori(
+ {
+ type: "div",
+ props: {
+ style: {
+ background: "#fefbfb",
+ width: "100%",
+ height: "100%",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ children: [
+ {
+ type: "div",
+ props: {
+ style: {
+ position: "absolute",
+ top: "-1px",
+ right: "-1px",
+ border: "4px solid #000",
+ background: "#ecebeb",
+ opacity: "0.9",
+ borderRadius: "4px",
+ display: "flex",
+ justifyContent: "center",
+ margin: "2.5rem",
+ width: "88%",
+ height: "80%",
+ },
+ },
+ },
+ {
+ type: "div",
+ props: {
+ style: {
+ border: "4px solid #000",
+ background: "#fefbfb",
+ borderRadius: "4px",
+ display: "flex",
+ justifyContent: "center",
+ margin: "2rem",
+ width: "88%",
+ height: "80%",
+ },
+ children: {
+ type: "div",
+ props: {
+ style: {
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "space-between",
+ margin: "20px",
+ width: "90%",
+ height: "90%",
+ },
+ children: [
+ {
+ type: "div",
+ props: {
+ style: {
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ height: "90%",
+ maxHeight: "90%",
+ overflow: "hidden",
+ textAlign: "center",
+ },
+ children: [
+ {
+ type: "p",
+ props: {
+ style: { fontSize: 72, fontWeight: "bold" },
+ children: SITE.title,
+ },
+ },
+ {
+ type: "p",
+ props: {
+ style: { fontSize: 28 },
+ children: SITE.desc,
+ },
+ },
+ ],
+ },
+ },
+ {
+ type: "div",
+ props: {
+ style: {
+ display: "flex",
+ justifyContent: "flex-end",
+ width: "100%",
+ marginBottom: "8px",
+ fontSize: 28,
+ },
+ children: {
+ type: "span",
+ props: {
+ style: { overflow: "hidden", fontWeight: "bold" },
+ children: new URL(SITE.website).hostname,
+ },
+ },
+ },
+ },
+ ],
+ },
+ },
+ },
+ },
+ ],
+ },
+ },
+ {
+ width: 1200,
+ height: 630,
+ embedFont: true,
+ fonts: await loadGoogleFonts(SITE.title + SITE.desc + SITE.website),
+ }
+ );
+};
diff --git a/src/utils/postFilter.ts b/src/utils/postFilter.ts
new file mode 100644
index 0000000..cb185e1
--- /dev/null
+++ b/src/utils/postFilter.ts
@@ -0,0 +1,11 @@
+import type { CollectionEntry } from "astro:content";
+import { SITE } from "@/config";
+
+const postFilter = ({ data }: CollectionEntry<"blog">) => {
+ const isPublishTimePassed =
+ Date.now() >
+ new Date(data.pubDatetime).getTime() - SITE.scheduledPostMargin;
+ return !data.draft && (import.meta.env.DEV || isPublishTimePassed);
+};
+
+export default postFilter;
diff --git a/src/utils/slugify.ts b/src/utils/slugify.ts
new file mode 100644
index 0000000..f052b02
--- /dev/null
+++ b/src/utils/slugify.ts
@@ -0,0 +1,5 @@
+import kebabcase from "lodash.kebabcase";
+
+export const slugifyStr = (str: string) => kebabcase(str);
+
+export const slugifyAll = (arr: string[]) => arr.map(str => slugifyStr(str));
diff --git a/src/utils/transformers/fileName.js b/src/utils/transformers/fileName.js
new file mode 100644
index 0000000..0860982
--- /dev/null
+++ b/src/utils/transformers/fileName.js
@@ -0,0 +1,69 @@
+/**
+ * CustomShiki transformer that adds file name labels to code blocks.
+ *
+ * This transformer looks for the `file="filename"` meta attribute in code blocks
+ * and creates a styled label showing the filename. It supports two different
+ * styling options and can optionally hide the green dot indicator.
+ *
+ * @param {Object} options - Configuration options for the transformer
+ * @param {string} [options.style="v2"] - The styling variant to use
+ * - `"v1"`: Tab-style with rounded top corners, positioned at top-left
+ * - `"v2"`: Badge-style with border, positioned at top-left with offset
+ * @param {boolean} [options.hideDot=false] - Whether to hide the green dot indicator
+ */
+export const transformerFileName = ({
+ style = "v2",
+ hideDot = false,
+} = {}) => ({
+ pre(node) {
+ // Add CSS custom property to the node
+ const fileNameOffset = style === "v1" ? "0.75rem" : "-0.75rem";
+ node.properties.style =
+ (node.properties.style || "") + `--file-name-offset: ${fileNameOffset};`;
+
+ const raw = this.options.meta?.__raw?.split(" ");
+
+ if (!raw) return;
+
+ const metaMap = new Map();
+
+ for (const item of raw) {
+ const [key, value] = item.split("=");
+ if (!key || !value) continue;
+ metaMap.set(key, value.replace(/["'`]/g, ""));
+ }
+
+ const file = metaMap.get("file");
+
+ if (!file) return;
+
+ // Add additional margin to code block
+ this.addClassToHast(
+ node,
+ `mt-8 ${style === "v1" ? "rounded-tl-none" : ""}`
+ );
+
+ // Add file name to code block
+ node.children.push({
+ type: "element",
+ tagName: "span",
+ properties: {
+ class: [
+ "absolute py-1 text-foreground text-xs font-medium leading-4",
+ hideDot
+ ? "px-2"
+ : "pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2",
+ style === "v1"
+ ? "left-0 -top-6 rounded-t-md border border-b-0 bg-muted/50"
+ : "left-2 top-(--file-name-offset) border rounded-md bg-background",
+ ],
+ },
+ children: [
+ {
+ type: "text",
+ value: file,
+ },
+ ],
+ });
+ },
+});
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..16da5d3
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "include": [".astro/types.d.ts", "**/*"],
+ "exclude": ["dist", "public/pagefind"],
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+ "jsx": "react-jsx",
+ "jsxImportSource": "react"
+ }
+}
+//
+//
+//
+// +// {post.data.title} +//
+//
+//
+// by{" "}
+//
+// "
+//
+//
+// {post.data.author}
+//
+//
+
+//
+// {SITE.title}
+//
+//
+//