feat: ability to override titles of specific pages (#32)

deer · Jan 30, 2024 · 34bb68c · 34bb68c
1 parent 7c16ba6
commit 34bb68c
Show file tree

Hide file tree

Showing 31 changed files with 248 additions and 100 deletions.
diff --git a/.github/workflows/deno.yml b/.github/workflows/deno.yml
@@ -36,7 +36,7 @@ jobs:
           restore-keys: chrome-1022525-${{ runner.os }}-
 
       - name: Install Chromium (Unix)
-        run: PUPPETEER_PRODUCT=chrome deno run -A --unstable https://deno.land/x/[email protected]/install.ts
+        run: PUPPETEER_PRODUCT=chrome deno run -A https://deno.land/x/[email protected]/install.ts
 
       - name: Run tests
         run: deno test -A --coverage=cov/

diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,4 @@
 .env.test.local
 .env.production.local
 .env.local
-cov_profile
-cov.lcov
-cov
+coverage
diff --git a/deno.json b/deno.json
@@ -5,11 +5,11 @@
     "jsxImportSource": "preact"
   },
   "tasks": {
-    "test": "deno test -A --parallel",
-    "fixture": "deno run -A --watch=static/,routes/ tests/fixture/dev.ts",
-    "check": "deno fmt --check && deno lint",
     "check:types": "deno check **/*.ts && deno check **/*.tsx",
-    "ok": "deno fmt --check && deno lint && deno task check:types && deno task test"
+    "coverage": "rm -rf coverage && deno test -A --parallel --coverage && deno coverage --html",
+    "fixture": "deno run -A --watch=static/,routes/ tests/fixture/dev.ts",
+    "ok": "deno fmt --check && deno lint && deno task check:types && deno task test",
+    "test": "deno test -A --parallel"
   },
   "imports": {
     "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/844370cadd1ed28fd76f796c2afc1e2411bfc425/",

diff --git a/src/plugin/blog.ts b/src/plugin/blog.ts
@@ -22,8 +22,23 @@ interface BlogOptions {
   useSeparateIndex?: boolean;
   strings?: Localization | Partial<Localization>;
   comments?: DisqusOptions;
+  pageOptions?: { [K in Pages]?: PageOptions };
 }
 
+export type Pages =
+  | "blog"
+  | "blog/[slug]"
+  | "_app"
+  | "archive"
+  | "archive/[tag]"
+  | "index"
+  | "author/[author]";
+
+export type PageOptions = {
+  titleOverride?: string;
+  suppressEnding?: boolean; // not every page has an ending
+};
+
 interface CommentOptions {
   source: CommentSource;
 }
@@ -72,6 +87,7 @@ export function blogPlugin(
         options.title,
         localization,
         options.comments,
+        options?.pageOptions?.["blog/[slug]"],
       ),
       handler: blogSlugHandler,
     }, {
@@ -84,27 +100,31 @@ export function blogPlugin(
         options.title,
         options.useSeparateIndex,
         localization,
+        options?.pageOptions?.["index"],
       ),
       handler: buildIndexHandler(postsPerPage),
     }, {
       path: "/archive",
       component: createArchivePage(
         options.title,
         localization,
+        options?.pageOptions?.["archive"],
       ),
       handler: archiveHandler,
     }, {
       path: "/archive/[tag]",
       component: createTagPage(
         options.title,
         localization,
+        options?.pageOptions?.["archive/[tag]"],
       ),
       handler: tagHandler,
     }, {
       path: "/author/[author]",
       component: createAuthorPage(
         options.title,
         localization,
+        options?.pageOptions?.["author/[author]"],
       ),
       handler: authorHandler,
     }],

diff --git a/src/routes/archive/[tag].tsx b/src/routes/archive/[tag].tsx
@@ -3,6 +3,7 @@ import { Post } from "../../utils/posts.ts";
 import PostList from "../../components/PostList.tsx";
 import { BlogState } from "../_middleware.ts";
 import { Localization } from "../../plugin/blog.ts";
+import { PageOptions } from "../../plugin/blog.ts";
 
 type TagPageProps = {
   posts: Post[];
@@ -19,12 +20,19 @@ export const handler: Handlers<TagPageProps, BlogState> = {
   },
 };
 
-export function createTagPage(title: string, localization: Localization) {
+export function createTagPage(
+  title: string,
+  localization: Localization,
+  options?: PageOptions,
+) {
+  const finalTitle = options?.suppressEnding
+    ? (options.titleOverride || title)
+    : `${options?.titleOverride || title}${localization.archiveTitleEnding}`;
   return function TagPage(props: PageProps<TagPageProps>) {
     return (
       <>
         <Head>
-          <title>{title}{localization.archiveTitleEnding}</title>
+          <title>{finalTitle}</title>
         </Head>
         <PostList
           posts={props.data.posts}

diff --git a/src/routes/archive/index.tsx b/src/routes/archive/index.tsx
@@ -2,7 +2,7 @@ import { Handlers, Head, PageProps } from "../../../deps.ts";
 import { Post } from "../../utils/posts.ts";
 import PostList from "../../components/PostList.tsx";
 import { BlogState } from "../_middleware.ts";
-import { Localization } from "../../plugin/blog.ts";
+import { Localization, PageOptions } from "../../plugin/blog.ts";
 
 export const handler: Handlers<Post[], BlogState> = {
   GET(_req, ctx) {
@@ -11,7 +11,14 @@ export const handler: Handlers<Post[], BlogState> = {
   },
 };
 
-export function createArchivePage(title: string, localization: Localization) {
+export function createArchivePage(
+  title: string,
+  localization: Localization,
+  options?: PageOptions,
+) {
+  const finalTitle = options?.suppressEnding
+    ? (options.titleOverride || title)
+    : `${options?.titleOverride || title}${localization.archiveTitleEnding}`;
   return function ArchivePage(props: PageProps<Post[]>) {
     const allTags = Array.from(
       new Set(
@@ -27,7 +34,7 @@ export function createArchivePage(title: string, localization: Localization) {
     return (
       <>
         <Head>
-          <title>{title}{localization.archiveTitleEnding}</title>
+          <title>{finalTitle}</title>
         </Head>
         <div>
           <div class="flex space-x-2 mb-4">

diff --git a/src/routes/author/[author].tsx b/src/routes/author/[author].tsx
@@ -2,7 +2,7 @@ import { Handlers, Head, PageProps } from "../../../deps.ts";
 import { Post } from "../../utils/posts.ts";
 import PostList from "../../components/PostList.tsx";
 import { BlogState } from "../_middleware.ts";
-import { Localization } from "../../plugin/blog.ts";
+import { Localization, PageOptions } from "../../plugin/blog.ts";
 
 type AuthorPageProps = {
   posts: Post[];
@@ -19,12 +19,19 @@ export const handler: Handlers<AuthorPageProps, BlogState> = {
   },
 };
 
-export function createAuthorPage(title: string, localization: Localization) {
+export function createAuthorPage(
+  title: string,
+  localization: Localization,
+  options?: PageOptions,
+) {
+  const finalTitle = options?.suppressEnding
+    ? (options.titleOverride || title)
+    : `${options?.titleOverride || title}${localization.authorTitleEnding}`;
   return function AuthorPage(props: PageProps<AuthorPageProps>) {
     return (
       <>
         <Head>
-          <title>{title}{localization.authorTitleEnding}</title>
+          <title>{finalTitle}</title>
         </Head>
         <PostList
           posts={props.data.posts}

diff --git a/src/routes/blog/[slug].tsx b/src/routes/blog/[slug].tsx
@@ -7,7 +7,7 @@ import {
   render,
   Renderer,
 } from "../../../deps.ts";
-import { DisqusOptions, Localization } from "../../plugin/blog.ts";
+import { DisqusOptions, Localization, PageOptions } from "../../plugin/blog.ts";
 import { Post } from "../../utils/posts.ts";
 import { BlogState } from "../_middleware.ts";
 import Disqus from "../../islands/Disqus.tsx";
@@ -42,6 +42,7 @@ export function createPostPage(
   title: string,
   localization: Localization,
   comments?: DisqusOptions,
+  options?: PageOptions,
 ) {
   return function PostPage(props: PageProps<Post>) {
     const post = props.data;
@@ -62,7 +63,7 @@ export function createPostPage(
     return (
       <>
         <Head>
-          <title>{title} — {post.title}</title>
+          <title>{options?.titleOverride || title} — {post.title}</title>
           <style dangerouslySetInnerHTML={{ __html: CSS }} />
         </Head>
         <br />

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,7 +1,7 @@
 import { Handlers, Head, PageProps } from "../../deps.ts";
 import Pagination from "../components/Pagination.tsx";
 import PostList from "../components/PostList.tsx";
-import { Localization } from "../plugin/blog.ts";
+import { Localization, PageOptions } from "../plugin/blog.ts";
 import { Post } from "../utils/posts.ts";
 import { BlogState } from "./_middleware.ts";
 
@@ -39,6 +39,7 @@ export function createBlogIndexPage(
   title: string,
   useSeparateIndex: boolean | undefined,
   localization: Localization,
+  options?: PageOptions,
 ) {
   if (useSeparateIndex) {
     title += localization.blogTitleEnding;
@@ -54,7 +55,7 @@ export function createBlogIndexPage(
     return (
       <>
         <Head>
-          <title>{title}</title>
+          <title>{options?.titleOverride || title}</title>
         </Head>
         <div>
           <PostList

diff --git a/src/safelist.ts b/src/safelist.ts
@@ -1,74 +1,4 @@
 export const safelist = [
   "list-disc",
   "list-decimal",
-  "max-w-screen-md",
-  "px-4",
-  "pt-16",
-  "mx-auto",
-  "pb-16",
-  "flex",
-  "justify-between",
-  "hover:underline",
-  "mt-8",
-  "py-4",
-  "border-t",
-  "border-gray-200",
-  "sm:col-span-2",
-  "text-3xl",
-  "text-gray-900",
-  "font-bold",
-  "text-gray-500",
-  "mr-1",
-  "ml-1",
-  "border",
-  "border-gray-300",
-  "py-1",
-  "px-2",
-  "rounded",
-  "inline-block",
-  "hover:bg-gray-300",
-  "space-x-2",
-  "mb-4",
-  "markdown-body",
-  "flex-grow",
-  "sticky",
-  "top-0",
-  "w-full",
-  "z-10",
-  "items-center",
-  "text-5xl",
-  "lg:hidden",
-  "cursor-pointer",
-  "z-20",
-  "block",
-  "h-1",
-  "w-6",
-  "bg-black",
-  "transform",
-  "rotate-45",
-  "my-1",
-  "opacity-0",
-  "-rotate-45",
-  "fixed",
-  "left-0",
-  "overflow-hidden",
-  "transition-max-height",
-  "duration-500",
-  "lg:relative",
-  "max-h-screen",
-  "bg-gray-300",
-  "max-h-0",
-  "lg:max-h-full",
-  "flex-col",
-  "lg:flex-row",
-  "justify-center",
-  "gap-4",
-  "mx-4",
-  "my-6",
-  "flex-wrap",
-  "p-2",
-  "text-black-900",
-  "text-black-600",
-  "py-2",
-  "ml-auto",
 ];
diff --git a/tests/custom_title_test.ts b/tests/custom_title_test.ts
@@ -0,0 +1,40 @@
+import { createHandler } from "../deps.ts";
+import manifest from "./custom_titles_fixture/fresh.gen.ts";
+import { blogPlugin } from "../src/plugin/blog.ts";
+import { DOMParser } from "./test_deps.ts";
+import { assertTitle } from "./test_utils.ts";
+import blogConfig from "./custom_titles_fixture/blog.config.ts";
+
+Deno.test("Tag page title override", async () => {
+  const handler = await createHandler(manifest, {
+    plugins: [blogPlugin(blogConfig)],
+  });
+  const resp = await handler(
+    new Request("http://127.0.0.1/archive/placeholder"),
+  );
+  const body = await resp.text();
+  const doc = new DOMParser().parseFromString(body, "text/html")!;
+  assertTitle(doc, "Tagged: The Untold Stories");
+});
+
+Deno.test("Author page title override", async () => {
+  const handler = await createHandler(manifest, {
+    plugins: [blogPlugin(blogConfig)],
+  });
+  const resp = await handler(
+    new Request("http://127.0.0.1/author/reed-von-redwitz"),
+  );
+  const body = await resp.text();
+  const doc = new DOMParser().parseFromString(body, "text/html")!;
+  assertTitle(doc, "Author's Saga");
+});
+
+Deno.test("Index page title override", async () => {
+  const handler = await createHandler(manifest, {
+    plugins: [blogPlugin(blogConfig)],
+  });
+  const resp = await handler(new Request("http://127.0.0.1/"));
+  const body = await resp.text();
+  const doc = new DOMParser().parseFromString(body, "text/html")!;
+  assertTitle(doc, "Welcome to the Jungle");
+});
diff --git a/tests/custom_titles_fixture/blog.config.ts b/tests/custom_titles_fixture/blog.config.ts
@@ -0,0 +1,24 @@
+import { BlogOptions } from "../../mod.ts";
+
+export default {
+  title: "Demo Blog",
+  navbarItems: {
+    Home: "/",
+    Archive: "/archive",
+  },
+  rootPath: import.meta.url,
+  pageOptions: {
+    "archive/[tag]": {
+      titleOverride: "Tagged: The Untold Stories",
+      suppressEnding: true,
+    },
+    "author/[author]": {
+      titleOverride: "Author's Saga",
+      suppressEnding: true,
+    },
+    "index": {
+      titleOverride: "Welcome to the Jungle",
+      suppressEnding: true,
+    },
+  },
+} satisfies BlogOptions;