fix: Change address bar color on Mobile when using Dark Theme (#106)

denoland · Jul 6, 2023 · 659f5b9 · 659f5b9
1 parent 0139043
commit 659f5b9
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 32 deletions.
diff --git a/blog.tsx b/blog.tsx
@@ -333,6 +333,10 @@ export async function handler(
     ],
   };
 
+  const sharedMetaTags = {
+    "theme-color": blogState.theme === "dark" ? "#000" : null,
+  };
+
   if (typeof blogState.favicon === "string") {
     sharedHtmlOptions.links?.push({
       href: blogState.favicon,
@@ -364,6 +368,7 @@ export async function handler(
       ...sharedHtmlOptions,
       title: blogState.title ?? "My Blog",
       meta: {
+        ...sharedMetaTags,
         "description": blogState.description,
         "og:title": blogState.title,
         "og:description": blogState.description,
@@ -397,6 +402,7 @@ export async function handler(
       ...sharedHtmlOptions,
       title: post.title,
       meta: {
+        ...sharedMetaTags,
         "description": post.snippet,
         "og:title": post.title,
         "og:description": post.snippet,

diff --git a/blog_test.ts b/blog_test.ts
@@ -73,10 +73,7 @@ Deno.test("posts/ first", async () => {
   );
   assertStringIncludes(body, `First post`);
   assertStringIncludes(body, `The author`);
-  assertStringIncludes(
-    body,
-    `<time dateTime="2022-03-20T00:00:00.000Z">`,
-  );
+  assertStringIncludes(body, `<time dateTime="2022-03-20T00:00:00.000Z">`);
   assertStringIncludes(body, `<img src="first/hello.png" />`);
   assertStringIncludes(body, `<p>Lorem Ipsum is simply dummy text`);
   assertStringIncludes(body, `$100, $200, $300, $400, $500`);
@@ -110,10 +107,7 @@ Deno.test("posts/ second", async () => {
   );
   assertStringIncludes(body, `Second post`);
   assertStringIncludes(body, `CUSTOM AUTHOR NAME`);
-  assertStringIncludes(
-    body,
-    `<time dateTime="2022-05-02T00:00:00.000Z">`,
-  );
+  assertStringIncludes(body, `<time dateTime="2022-05-02T00:00:00.000Z">`);
   assertStringIncludes(body, `<img src="second/hello2.png" />`);
   assertStringIncludes(body, `<p>Lorem Ipsum is simply dummy text`);
 });
@@ -131,10 +125,7 @@ Deno.test("posts/ third", async () => {
   );
   assertStringIncludes(body, `Third post`);
   assertStringIncludes(body, `CUSTOM AUTHOR NAME`);
-  assertStringIncludes(
-    body,
-    `<time dateTime="2022-08-19T00:00:00.000Z">`,
-  );
+  assertStringIncludes(body, `<time dateTime="2022-08-19T00:00:00.000Z">`);
   assertStringIncludes(body, `<iframe width="560" height="315"`);
   assertStringIncludes(body, `<p>Lorem Ipsum is simply dummy text`);
 });
@@ -251,9 +242,7 @@ Deno.test("static files in posts/ directory", async () => {
     const bytes = new Uint8Array(await resp.arrayBuffer());
     assertEquals(
       bytes,
-      await Deno.readFile(
-        join(TESTDATA_PATH, "./posts/first/hello.png"),
-      ),
+      await Deno.readFile(join(TESTDATA_PATH, "./posts/first/hello.png")),
     );
   }
   {
@@ -266,12 +255,7 @@ Deno.test("static files in posts/ directory", async () => {
     const bytes = new Uint8Array(await resp.arrayBuffer());
     assertEquals(
       bytes,
-      await Deno.readFile(
-        join(
-          TESTDATA_PATH,
-          "./posts/second/hello2.png",
-        ),
-      ),
+      await Deno.readFile(join(TESTDATA_PATH, "./posts/second/hello2.png")),
     );
   }
 });
@@ -282,12 +266,7 @@ Deno.test("static files in root directory", async () => {
   assertEquals(resp.status, 200);
   assertEquals(resp.headers.get("content-type"), "image/png");
   const bytes = new Uint8Array(await resp.arrayBuffer());
-  assertEquals(
-    bytes,
-    await Deno.readFile(
-      join(TESTDATA_PATH, "./cat.png"),
-    ),
-  );
+  assertEquals(bytes, await Deno.readFile(join(TESTDATA_PATH, "./cat.png")));
 });
 
 Deno.test("RSS feed", async () => {
@@ -306,9 +285,47 @@ Deno.test("RSS feed", async () => {
   assertStringIncludes(body, `https://blog.deno.dev/second`);
 });
 
+Deno.test(
+  "theme-color meta tag when dark theme is used [index page]",
+  async () => {
+    const darkThemeBlogHandler = createBlogHandler({
+      ...BLOG_SETTINGS,
+      theme: "dark",
+    });
+    const darkThemeTestHandler = (req: Request) => {
+      return darkThemeBlogHandler(req, CONN_INFO);
+    };
+
+    const resp = await darkThemeTestHandler(
+      new Request("https://blog.deno.dev"),
+    );
+    const body = await resp.text();
+    assertStringIncludes(body, `<meta name="theme-color" content="#000" />`);
+  },
+);
+
+Deno.test(
+  "theme-color meta tag when dark theme is used [post page]",
+  async () => {
+    const darkThemeBlogHandler = createBlogHandler({
+      ...BLOG_SETTINGS,
+      theme: "dark",
+    });
+    const darkThemeTestHandler = (req: Request) => {
+      return darkThemeBlogHandler(req, CONN_INFO);
+    };
+
+    const resp = await darkThemeTestHandler(
+      new Request("https://blog.deno.dev/first"),
+    );
+    const body = await resp.text();
+    assertStringIncludes(body, `<meta name="theme-color" content="#000" />`);
+  },
+);
+
 Deno.test("Plaintext response", async () => {
   const plaintext = new Headers({
-    "Accept": "text/plain",
+    Accept: "text/plain",
   });
   const resp = await testHandler(
     new Request("https://blog.deno.dev/first", {
@@ -317,10 +334,7 @@ Deno.test("Plaintext response", async () => {
   );
   assert(resp);
   assertEquals(resp.status, 200);
-  assertEquals(
-    resp.headers.get("content-type"),
-    "text/plain;charset=UTF-8",
-  );
+  assertEquals(resp.headers.get("content-type"), "text/plain;charset=UTF-8");
   const body = await resp.text();
   assert(body.startsWith("It was popularised in the 1960s"));
 });