+ {post.data.title} +
++ {post.data.excerpt} +
+ + +Welcome to Astro
-
- To get started, open the directory src/pages in your project.
- Code Challenge: Tweak the "Welcome to Astro" message above.
-
-
-
-
+
+
-
-
diff --git a/src/pages/posts/[...slug]-og.png.ts b/src/pages/posts/[...slug]-og.png.ts
index 6c7a37f..fbe5dea 100644
--- a/src/pages/posts/[...slug]-og.png.ts
+++ b/src/pages/posts/[...slug]-og.png.ts
@@ -5,7 +5,10 @@ import { getCollection } from "astro:content";
// import fs from "fs/promises";
export async function getStaticPaths() {
- const blog = await getCollection("posts");
+ const blog = await getCollection(
+ "posts",
+ ({ data }) => !import.meta.env.PROD || data.status === "published",
+ );
// const blogData = await getBlogFrontmatterCollection();
return blog.map((post) => {
const title = post.data.title
@@ -40,6 +43,7 @@ export const GET: APIRoute = async function get({ props }) {
return new Response(png as unknown as ReadableStream, {
headers: {
"Content-Type": "image/png",
+ "Cache-Control": "public, max-age=86400, s-maxage=604800",
},
});
};
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index c074eae..a839194 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -22,9 +22,22 @@ import AdSense from "../../components/AdSense.astro";
import VideoEmbed from "../../components/VideoEmbed.astro";
import SlidesEmbed from "../../components/SlidesEmbed.astro";
import { SLIDES_BASE_URL } from "../../constants";
+import {
+ SITE_URL,
+ bilibiliUrl as getBilibiliUrl,
+ canonicalUrl,
+ compactUrls,
+ episodePath,
+ jsonLd,
+ parseAuthors,
+ youtubeUrl,
+} from "../../lib/seo";
export async function getStaticPaths() {
- const posts = await getCollection("posts");
+ const posts = await getCollection(
+ "posts",
+ ({ data }) => !import.meta.env.PROD || data.status === "published",
+ );
return posts.map((post) => ({
params: {
@@ -48,35 +61,66 @@ const tags = frontData.categories;
const slug = post.id.replace(/^\/?posts\//, "");
const slidesSrc =
frontData.slidesUrl ?? `${SLIDES_BASE_URL}/${slug}/`;
-const imgUrl = `${Astro.site?.origin}${post.id}-og.png`;
+const pagePath = episodePath(post.id);
+const pageUrl = canonicalUrl(pagePath, Astro.site);
+const imgUrl = new URL(
+ `${pagePath.replace(/\/$/, "")}-og.png`,
+ Astro.site ?? SITE_URL,
+).toString();
+const podcastId = `${new URL("/", Astro.site ?? SITE_URL)}#podcast`;
+const organizationId = `${new URL("/", Astro.site ?? SITE_URL)}#organization`;
+const authorEntities = parseAuthors(frontData.author);
+const sameAs = compactUrls([
+ frontData.xyzLink || undefined,
+ youtubeUrl(frontData.youtubeId),
+ getBilibiliUrl(frontData.biliUrl),
+]);
+const title = `${frontData.title}｜AsyncTalk`;
---
-
+
+
-
-
+
diff --git a/src/pages/og-preview.astro b/src/pages/og-preview.astro
deleted file mode 100644
index 242207f..0000000
--- a/src/pages/og-preview.astro
+++ /dev/null
@@ -1,14 +0,0 @@
----
-import Og from "../components/OpenGraph/OG";
----
-
-- 把前端带向下一个高度 -
++ 和我们一起，将 Web 开发带向下一个高度 +
++ 关注 Web 开发、前端工程化与 AI，分享前沿技术、工程实践与开发者观点。 +
-
diff --git a/src/pages/og.png.ts b/src/pages/og.png.ts
new file mode 100644
index 0000000..0d4cafd
--- /dev/null
+++ b/src/pages/og.png.ts
@@ -0,0 +1,16 @@
+import type { APIRoute } from "astro";
+import OG from "../components/OpenGraph/OG";
+import { PNG } from "../components/OpenGraph/createImage";
+
+export const GET: APIRoute = async function get() {
+ const png = await PNG(
+ OG({ title: "AsyncTalk｜和我们一起，将 Web 开发带向下一个高度" }),
+ );
+
+ return new Response(png as unknown as ReadableStream, {
+ headers: {
+ "Content-Type": "image/png",
+ "Cache-Control": "public, max-age=86400, s-maxage=604800",
+ },
+ });
+};
diff --git a/src/pages/posts.astro b/src/pages/posts.astro
index d7413cc..456b658 100644
--- a/src/pages/posts.astro
+++ b/src/pages/posts.astro
@@ -2,37 +2,64 @@
import { getCollection } from "astro:content";
import PageLayout from "../layouts/Layout.astro";
import SEOTags from "../components/seo/seo-tags.astro";
+import { episodePath } from "../lib/seo";
-const posts = await getCollection("posts");
+const posts = await getCollection(
+ "posts",
+ ({ data }) => !import.meta.env.PROD || data.status === "published",
+);
-posts.sort((a, b) => {
- return (
- new Date(b.data.publicationDate).valueOf() -
- new Date(a.data.publicationDate).valueOf()
- );
+posts.sort(
+ (a, b) => b.data.publicationDate.valueOf() - a.data.publicationDate.valueOf(),
+);
+
+const title = "全部节目｜AsyncTalk";
+const description =
+ "浏览 AsyncTalk 全部中文播客节目，涵盖 Web 开发、前端工程化、JavaScript、AI、开发者工具与技术职业成长。";
+const dateFormatter = new Intl.DateTimeFormat("zh-CN", {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ timeZone: "Asia/Shanghai",
});
---
-
-
-
-
-
-
- -
- {
- posts.map((x) => (
-
-
{x.data.title}
- - )) - } -AsyncTalk 全部节目
+{description}
+-
+ {
+ posts.map((post) => {
+ const path = episodePath(post.id);
+ return (
+
-
+
+ + +
+ );
+ })
+ }
+