feat(web): metas

A centralization of data, then dispersion.
PHS-TSA · Dec 18, 2023 · 247b4cb · 247b4cb
1 parent cb6198c
commit 247b4cb
Show file tree

Hide file tree

Showing 16 changed files with 177 additions and 40 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -4,6 +4,7 @@ import IconSolarPanel2 from "tabler_icons_tsx/solar-panel-2.tsx";
 import IconBrandTailwind from "tabler_icons_tsx/brand-tailwind.tsx";
 import IconBrandReact from "tabler_icons_tsx/brand-react.tsx";
 import type { FunctionalComponent } from "preact";
+import { siteName, slogan } from "../site.ts";
 
 const Footer: FunctionalComponent = () => {
   const menus = [
@@ -55,10 +56,10 @@ const Footer: FunctionalComponent = () => {
             class="inline-block dark:text-white"
             aria-hidden="true"
           />
-          <div class="font-bold text-2xl dark:text-white">Why Switch</div>
+          <div class="font-bold text-2xl dark:text-white">{siteName}</div>
         </div>
         <div class="text-gray-500 dark:text-gray-400">
-          The Truth about Going Green!
+          {slogan}
         </div>
       </div>
 
@@ -78,7 +79,7 @@ const Footer: FunctionalComponent = () => {
               <li class="mt-2" key={child.name}>
                 <a
                   class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 py-4 pr-4"
-                  href={item.url + child.href}
+                  href={`${item.url}${child.href}`}
                 >
                   {child.name}
                 </a>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,6 +1,7 @@
 import IconSolarPanel2 from "tabler_icons_tsx/solar-panel-2.tsx";
 import type { FunctionalComponent } from "preact";
 import HeaderMenu from "../islands/HeaderMenu.tsx";
+import { siteName } from "../site.ts";
 
 interface Props {
   active: string; // TODO(lishaduck): https://deno.com/blog/fresh-1.5#easier-active-link-styling
@@ -39,7 +40,7 @@ const Header: FunctionalComponent<Props> = ({ active }: Props) => {
       <a class="flex items-center flex-1" href="/">
         <IconSolarPanel2 aria-hidden="true" class="dark:text-white" />
         <div class="text-2xl ml-1 font-bold dark:text-white">
-          Why Switch?
+          {siteName}
         </div>
       </a>
       <ul class="flex flex-row flex-wrap items-center gap-6">

diff --git a/src/components/Meta.tsx b/src/components/Meta.tsx
@@ -0,0 +1,35 @@
+import type { FunctionalComponent } from "preact";
+import Title from "./Title.tsx";
+import { description, logoAlt, logoSvgUrl, siteName } from "../site.ts";
+
+interface Props {
+  title?: string | undefined;
+  desc?: string | undefined;
+}
+
+const Meta: FunctionalComponent<Props> = ({ title, desc }) => {
+  desc ??= description;
+  title ??= siteName;
+
+  return (
+    <>
+      <Title title={title} />
+      <meta property="og:image" content={logoSvgUrl} key="og:i" />
+      <meta property="og:image:secure_url" content={logoSvgUrl} key="og:si" />
+      <meta property="og:image:alt" content={logoAlt} key="og:ai" />
+      <meta property="og:title" content="Home" key="og:title" />
+      <meta property="og:url" content="/" key="og:url" />
+      <meta property="og:description" content={desc} key="og:desc" />
+      <meta property="og:site_name" content={siteName} />
+      <meta property="og:locale" content="en_US" />
+      <meta property="og:type" content="website" />
+      <meta property="twitter:card" content="summary" key="t:card" />
+      <meta property="twitter:title" content="Home" key="t:title" />
+      <meta property="twitter:description" content={desc} key="t:desc" />
+      <meta property="twitter:image" content="/logo.svg" key="t:i" />
+      <meta property="twitter:image:alt" content={logoAlt} key="t:ai" />
+    </>
+  );
+};
+
+export { Meta as default };
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
@@ -0,0 +1,12 @@
+import type { FunctionalComponent } from "preact";
+import { makeTitle } from "../site.ts";
+
+interface Props {
+  title: string;
+}
+
+const Title: FunctionalComponent<Props> = ({ title }) => {
+  return <title>{makeTitle(title)}</title>;
+};
+
+export { Title as default };
diff --git a/src/islands/HeaderMenu.tsx b/src/islands/HeaderMenu.tsx
@@ -28,10 +28,11 @@ const HeaderMenu: FunctionalComponent<Props> = (
         <Menu.Button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 py-1">
           <span class="flex flex-row">
             <span
-              class={"whitespace-nowrap" +
-                (active
+              class={`whitespace-nowrap ${
+                active
                   ? "font-bold border-b-2 border-gray-500 dark:border-gray-400 hover:border-gray-700 dark:hover:border-gray-200"
-                  : "")}
+                  : ""
+              }`}
             >
               {title}
             </span>{" "}
@@ -43,7 +44,7 @@ const HeaderMenu: FunctionalComponent<Props> = (
             {items.map(({ name, url }) => (
               <Menu.Item>
                 {({ active }) => (
-                  <a class={active ? "bg-blue-500" : ""} href={href + url}>
+                  <a class={active ? "bg-blue-500" : ""} href={`${href}${url}`}>
                     {name}
                   </a>
                 )}
@@ -56,8 +57,9 @@ const HeaderMenu: FunctionalComponent<Props> = (
     : (
       <a
         href={href}
-        class={"text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 py-1 border-gray-500 dark:border-gray-400" +
-          (active ? " font-bold border-b-2" : "")}
+        class={`text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 py-1 border-gray-500 dark:border-gray-400 ${
+          active ? "font-bold border-b-2" : ""
+        }`}
       >
         {title}
       </a>

diff --git a/src/routes/_404.tsx b/src/routes/_404.tsx
@@ -2,19 +2,20 @@ import { Head } from "$fresh/runtime.ts";
 import type { PageProps } from "$fresh/server.ts";
 import Logo from "../components/Logo.tsx";
 import type { FunctionalComponent } from "preact";
+import Meta from "../components/Meta.tsx";
 
 const Error404: FunctionalComponent<PageProps> = () => {
+  const pageTitle = "404 — Page not found";
+
   return (
     <>
       <Head>
-        <title>404 - Page not found | Why Switch?</title>
+        <Meta title={pageTitle} />
       </Head>
       <div class="px-4 py-8 mx-0 bg-green-500 dark:bg-green-700">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <Logo />
-          <h1 class="text-4xl font-bold dark:text-white">
-            404 - Page not found!
-          </h1>
+          <h1 class="text-4xl font-bold dark:text-white">{pageTitle}</h1>
           <p class="my-4 dark:text-white">
             The page you were looking for doesn't exist.
           </p>

diff --git a/src/routes/_500.tsx b/src/routes/_500.tsx
@@ -2,19 +2,20 @@ import { Head } from "$fresh/runtime.ts";
 import type { PageProps } from "$fresh/server.ts";
 import Logo from "../components/Logo.tsx";
 import type { FunctionalComponent } from "preact";
+import Meta from "../components/Meta.tsx";
 
 const Error500: FunctionalComponent<PageProps> = () => {
+  const pageTitle = "500 — Internal Server Error";
+
   return (
     <>
       <Head>
-        <title>500 - Internal Server Error | Why Switch?</title>
+        <Meta title={pageTitle} />
       </Head>
       <div class="px-4 py-8 mx-0 bg-green-500 dark:bg-green-700">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <Logo />
-          <h1 class="text-4xl font-bold dark:text-white">
-            500 - Internal Server Error!
-          </h1>
+          <h1 class="text-4xl font-bold dark:text-white">{pageTitle}</h1>
           <p class="my-4 dark:text-white">
             An internal server error occurred.
           </p>

diff --git a/src/routes/_app.tsx b/src/routes/_app.tsx
@@ -1,25 +1,55 @@
 import type { PageProps } from "$fresh/server.ts";
-import { Partial } from "$fresh/runtime.ts";
+import { Head, Partial } from "$fresh/runtime.ts";
 import type { FunctionalComponent } from "preact";
+import { description as desc, faviconPngUrl, faviconSvgUrl } from "../site.ts";
+
+const metas = (
+  <>
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: light)"
+      content="#22C55E"
+    />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: dark)"
+      content="#15803D"
+    />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="theme-color" content="#005" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link rel="apple-touch-icon" href="/favicon.png" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+
+    <meta name="geo.region" content="US-MO" />
+    <meta
+      name="geo.placename"
+      content="Maryland Heights, Missouri, United States"
+    />
+    <meta name="geo.position" content="38.7413922,-90.456632" />
+    <meta name="ICBM" content="38.7413922,-90.456632" />
+
+    <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
+    <link rel="icon" type="image/svg+xml" href={faviconSvgUrl} />
+    <link rel="icon" sizes="48x48" type="image/png" href={faviconPngUrl} />
+  </>
+);
 
 const App: FunctionalComponent<PageProps> = ({ Component }) => {
   return (
     <html lang="en-US">
-      <head>
+      <Head>
         <meta charset="utf-8" />
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1.0"
-        />
-        <title>Why Switch?</title>
-        <meta
-          name="description"
-          content="Why Switch is a website about green/green energy."
-          key="description"
-        >
-        </meta>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content={desc} key="desc" />
+        <meta name="keywords" content="green, clean, renewable, tsa" />
+        <link rel="manifest" href="/manifest.webmanifest" />
+        {metas}
         <link rel="stylesheet" href="/styles.css" />
-      </head>
+      </Head>
 
       <body f-client-nav class="dark:bg-black">
         <Partial name="body">

diff --git a/src/routes/about.tsx b/src/routes/about.tsx
@@ -2,17 +2,20 @@ import { Head } from "$fresh/runtime.ts";
 import Logo from "../components/Logo.tsx";
 import type { FunctionalComponent } from "preact";
 import type { PageProps } from "$fresh/server.ts";
+import Meta from "../components/Meta.tsx";
 
 const About: FunctionalComponent<PageProps> = () => {
+  const pageTitle = "About";
+
   return (
     <>
       <Head>
-        <title>About | Why Switch?</title>
+        <Meta title={pageTitle} />
       </Head>
       <div class="px-4 py-8 mx-0 bg-green-500 dark:bg-green-700">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <Logo />
-          <h1 class="text-4xl font-bold dark:text-white">About</h1>
+          <h1 class="text-4xl font-bold dark:text-white">{pageTitle}</h1>
           <p class="my-4 dark:text-white">
             It's us, man!
           </p>

diff --git a/src/routes/green/index.tsx b/src/routes/green/index.tsx
@@ -1,12 +1,15 @@
 import { Head } from "$fresh/runtime.ts";
 import type { PageProps } from "$fresh/server.ts";
 import type { FunctionalComponent } from "preact";
+import Meta from "../../components/Meta.tsx";
 
 const Green: FunctionalComponent<PageProps> = () => {
+  const pageTitle = "Going Green!";
+
   return (
     <>
       <Head>
-        <title>Going Green! | Why Switch?</title>
+        <Meta title={pageTitle} />
       </Head>
       <div class="flex flex-col items-center justify-center">
         <p class="prose prose-slate">

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -2,17 +2,21 @@ import { Head } from "$fresh/runtime.ts";
 import type { FunctionalComponent } from "preact";
 import Logo from "../components/Logo.tsx";
 import type { PageProps } from "$fresh/server.ts";
+import { siteName } from "../site.ts";
+import Meta from "../components/Meta.tsx";
 
 const Home: FunctionalComponent<PageProps> = () => {
+  const pageTitle = "Home";
+
   return (
     <>
       <Head>
-        <title>Home | Why Switch?</title>
+        <Meta title={pageTitle} />
       </Head>
       <div class="px-4 py-8 mx-0 bg-green-500 dark:bg-green-700">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <Logo />
-          <h1 class="text-4xl font-bold dark:text-white">Why Switch?</h1>
+          <h1 class="text-4xl font-bold dark:text-white">{siteName}</h1>
           <p class="my-4 dark:text-white">
             Looking for information about solar power? You've come to the right
             place!

diff --git a/src/routes/monies/guarantees-in-life.tsx b/src/routes/monies/guarantees-in-life.tsx
@@ -2,17 +2,20 @@ import { Head } from "$fresh/runtime.ts";
 import type { PageProps } from "$fresh/server.ts";
 import Logo from "../../components/Logo.tsx";
 import type { FunctionalComponent } from "preact";
+import Meta from "../../components/Meta.tsx";
 
 const Taxes: FunctionalComponent<PageProps> = () => {
+  const pageTitle = "Death. And Taxes.";
+
   return (
     <>
       <Head>
-        <title>Ben! | Why Switch?</title>
+        <Meta title={pageTitle} />
       </Head>
       <div class="px-4 py-8 mx-0 bg-green-500 dark:bg-green-700">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <Logo />
-          <h1 class="text-4xl font-bold dark:text-white">Death. And Taxes.</h1>
+          <h1 class="text-4xl font-bold dark:text-white">{pageTitle}</h1>
           <p class="my-4 dark:text-white">
             Looking for information about tax rebates and incentives for green
             energy?

diff --git a/src/routes/monies/index.tsx b/src/routes/monies/index.tsx
@@ -1,12 +1,15 @@
 import { Head } from "$fresh/runtime.ts";
 import type { PageProps } from "$fresh/server.ts";
 import type { FunctionalComponent } from "preact";
+import Title from "../../components/Title.tsx";
 
 const Monies: FunctionalComponent<PageProps> = () => {
+  const pageTitle = "Monies";
+
   return (
     <>
       <Head>
-        <title>Monies | Why Switch?</title>
+        <Title title={pageTitle} />
       </Head>
       <div class="flex flex-col items-center justify-center">
         <p class="prose prose-slate">

diff --git a/src/site.ts b/src/site.ts
@@ -0,0 +1,24 @@
+const slogan = "The Truth About Going Green";
+const description =
+  "Why Switch is an informative website about green/green energy.";
+const siteName = "Why Switch?";
+
+function makeTitle(pageTitle: string): string {
+  return `${pageTitle} | ${siteName}`;
+}
+
+const faviconSvgUrl = "/favicon.svg";
+const faviconPngUrl = "/favicon.png";
+const logoSvgUrl = "/logo.svg";
+const logoAlt = `${siteName}'s logo`;
+
+export {
+  description,
+  faviconPngUrl,
+  faviconSvgUrl,
+  logoAlt,
+  logoSvgUrl,
+  makeTitle,
+  siteName,
+  slogan,
+};
diff --git a/src/static/manifest.webmanifest b/src/static/manifest.webmanifest
@@ -0,0 +1,7 @@
+{
+  "name": "Why Switch?",
+  "background_color": "#22C55E",
+  "theme_color": "#22C55E",
+  "description": "Why Switch is an informative website about green/green energy.",
+  "display": "standalone"
+}
diff --git a/src/static/sitemap.xml b/src/static/sitemap.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://loud-ape-90.deno.dev/</loc>
+    <lastmod>2023-12-18</lastmod>
+  </url>
+</urlset>