switch from emoji favicon to dandelion PNG (#37)

README.md

@@ -95,7 +95,6 @@ layout: "which template to use"
 menu: (true | false) show page title in navigation, defaults to false
 title: "for pages h1 and opengraph metadata"
 description: "[optional] for opengraph metadata"
-emoji: "[optional] for insertion to favicon"
 socialImage: "[optional] for opengraph metadata (external link or path to file)"
 socialImageAlt: "[optional] alt text describing social preview image, if you do not include this then it will fallback to the default image / alt"
 ```

eleventy.ts

@@ -41,7 +41,6 @@ export type ViewProps = {
   baseUrl?: string;
   content?: string;
   description?: string; // " for opengraph metadata"
-  emoji?: string; // " for insertion to favicon"
   page?: Page;
   socialImage?: string; // " for opengraph metadata (external link or path to file)"
   socialImageAlt?: string; // " alt text describing social preview image, if you do not include this then it will fallback to the default image / alt"

src/_components/Head.test.tsx

@@ -3,7 +3,6 @@ import { jsxToString } from "jsx-async-runtime";
 import { Head, HeadProps } from "./Head";
 
 const defaultProps = {
-  emoji: "🌞",
   title: "Breathe Easy Sheffield",
   description:
     "An eclectic series of Covid safer social & cultural events, designed with enhanced safety measures in place to reduce transmission risk. Launching autumn 2024.",
@@ -127,37 +126,6 @@ test("social image alt text doesnot overwrite default alt text if no image suppl
   ).to.equal(defaultProps.socialImageAlt);
 });
 
-test("default emoji used as favicon", async () => {
-  const props: HeadProps = {
-    baseUrl: "https://example.com",
-    title: "snazzy website",
-    url: "/",
-  };
-
-  const result = Head(props);
-  document.head.innerHTML = await jsxToString(result);
-
-  expect(document.querySelector("link[rel='icon']").href).to.equal(
-    "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>%F0%9F%8C%9E</text></svg>",
-  );
-});
-
-test("custom emoji used as favicon", async () => {
-  const props: HeadProps = {
-    baseUrl: "https://example.com",
-    title: "snazzy website",
-    url: "/",
-    emoji: "🌚",
-  };
-
-  const result = Head(props);
-  document.head.innerHTML = await jsxToString(result);
-
-  expect(document.querySelector("link[rel='icon']").href).to.equal(
-    "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>%F0%9F%8C%9A</text></svg>",
-  );
-});
-
 // getting localhost herer, must be something to do with the testing enviroment
 
 // test("empty baseUrl is safe", async () => {

src/_components/Head.tsx

@@ -1,7 +1,6 @@
 export type HeadProps = {
   baseUrl?: string;
   description?: string; // "[optional] for opengraph metadata"
-  emoji?: string; // "[optional] for insertion to favicon"
   socialImage?: string; // "[optional] for opengraph metadata (external link or path to file)"
   socialImageAlt?: string; // "[optional] alt text describing social preview image, if you do not include this then it will fallback to the default image / alt"
   title: string;
@@ -10,7 +9,6 @@ export type HeadProps = {
 
 const defaultProps = {
   baseUrl: "",
-  emoji: "🌞",
   title: "Breathe Easy Sheffield",
   description:
     "An eclectic series of Covid safer social & cultural events, designed with enhanced safety measures in place to reduce transmission risk. Launching autumn 2024.",
@@ -34,7 +32,6 @@ const absoluteUrl = (base, url) => {
 export const Head = ({
   baseUrl = defaultProps.baseUrl,
   description = defaultProps.description,
-  emoji = defaultProps.emoji,
   socialImage = defaultProps.socialImage,
   socialImageAlt = defaultProps.socialImageAlt,
   title,
@@ -56,10 +53,7 @@ export const Head = ({
       <meta charset="UTF-8" />
       <meta property="og:type" content="website" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <link
-        rel="icon"
-        href={`data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${emoji}</text></svg>`}
-      />
+      <link rel="icon" type="image/png" href="/static/img/favicon.png" />
       <title>{title_}</title>
       <meta name="title" content={title_} />
       <meta property="og:title" content={title_} />

src/_includes/IndexLayout.11ty.tsx

@@ -9,7 +9,6 @@ export const IndexLayout = (data: ViewProps): JSX.Element => {
     baseUrl,
     content,
     description,
-    emoji,
     page,
     socialImage,
     socialImageAlt,
@@ -26,7 +25,6 @@ export const IndexLayout = (data: ViewProps): JSX.Element => {
       {Head({
         baseUrl,
         description,
-        emoji,
         socialImage,
         socialImageAlt,
         title,

src/_includes/PageLayout.11ty.tsx

@@ -8,7 +8,6 @@ export const PageLayout = (data: ViewProps): JSX.Element => {
     baseUrl,
     content,
     description,
-    emoji,
     page,
     socialImage,
     socialImageAlt,
@@ -25,7 +24,6 @@ export const PageLayout = (data: ViewProps): JSX.Element => {
       {Head({
         baseUrl,
         description,
-        emoji,
         socialImage,
         socialImageAlt,
         title,

src/admin/config.yml

@@ -55,16 +55,4 @@ collections:
           pattern: ["^.{25,}$", "Must be atleast 25 characters"],
           required: false,
         }
-      # - {
-      #     label: "Emoji",
-      #     name: "emoji",
-      #     hint: "Emoji to by used in the favicon on browser tabs",
-      #     widget: "string",
-      #     pattern:
-      #       [
-      #         "\\p{Emoji_Presentation}{1,1}",
-      #         "Can only be a single character, must be an emoji",
-      #       ],
-      #     required: false,
-      #   }
       - { label: "Body", name: "body", widget: "markdown" }