add titles

package.json

@@ -7,6 +7,7 @@
     "@mdx-js/mdx": "^3.0.1",
     "@mdx-js/rollup": "^3.0.1",
     "@rollup/pluginutils": "^5.1.0",
+    "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.13.6",
     "@solidjs/start": "^1.0.2",
     "@types/mdx": "^2.0.13",

src/components/global.ts

@@ -0,0 +1,18 @@
+import { onCleanup, onMount } from "solid-js";
+export function createGlobals() {
+  onMount(() => {
+    function tripleClick(evt: MouseEvent) {
+      if (evt.detail === 3) {
+        document.body.classList.toggle("light");
+      }
+    }
+    window.addEventListener("click", tripleClick);
+    onCleanup(() => window.removeEventListener("click", tripleClick));
+
+    function hashchange() {
+      document.querySelector(window.location.hash)?.scrollIntoView();
+    }
+    window.addEventListener("hashchange", hashchange);
+    onCleanup(() => window.removeEventListener("hashchange", hashchange));
+  });
+}

src/routes/2022-12-01/reactivity.tsx

@@ -1,11 +1,15 @@
-import MDXComponent from "~/blogs/reactivity.mdx";
+import { Title } from "@solidjs/meta";
+import { createGlobals } from "~/components/global";
 import { createMermaid } from "~/components/mermaid";
+import MDXComponent from "~/blogs/reactivity.mdx";
 
 export default function Page() {
   createMermaid();
+  createGlobals();
 
   return (
     <>
+      <Title>Super Charging Fine-Grained Reactive Performance · milomg.dev</Title>
       <nav>
         <div>
           <a href="/#top" id="logo">

src/routes/index.tsx

@@ -1,8 +1,10 @@
-import { onMount } from "solid-js";
+import { onCleanup, onMount } from "solid-js";
 import { createSim, toggleBaseColor } from "~/components/sim/shaders";
 import { createPointers } from "~/components/sim/pointers";
 import { A } from "@solidjs/router";
 import "./index.css";
+import { createGlobals } from "~/components/global";
+import { Title } from "@solidjs/meta";
 
 const App = () => {
   onMount(() => {
@@ -12,13 +14,31 @@ const App = () => {
     console.log("The fluid simulation was made with https://regl.party and is inspired by GPU Gems");
   });
 
+  createGlobals();
+
   let c: HTMLCanvasElement;
   onMount(() => {
+    function tripleClick(evt: MouseEvent) {
+      if (evt.detail === 3) {
+        document.body.classList.toggle("light");
+        toggleBaseColor();
+      }
+    }
+    window.addEventListener("click", tripleClick);
+    onCleanup(() => window.removeEventListener("click", tripleClick));
+
+    function hashchange() {
+      document.querySelector(window.location.hash)?.scrollIntoView();
+    }
+    window.addEventListener("hashchange", hashchange);
+    onCleanup(() => window.removeEventListener("hashchange", hashchange));
+
     function resize() {
       c.width = window.innerWidth;
       c.height = window.innerHeight;
     }
     window.addEventListener("resize", resize);
+    onCleanup(() => window.removeEventListener("resize", resize));
     resize();
 
     try {
@@ -42,25 +62,23 @@ const App = () => {
         });
       });
 
-      window.addEventListener("click", function (evt) {
+      function tripleClick(evt: MouseEvent) {
         if (evt.detail === 3) {
-          document.body.classList.toggle("light");
           toggleBaseColor();
         }
-      });
+      }
+      window.addEventListener("click", tripleClick);
+      onCleanup(() => window.removeEventListener("click", tripleClick));
     } catch (e) {
       console.error(e);
       c.remove();
       document.querySelector("#logo-placeholder")!.id = "logo-img";
     }
-
-    window.onhashchange = () => {
-      document.querySelector(window.location.hash)?.scrollIntoView();
-    };
   });
 
   return (
     <>
+      <Title>Milo's Homepage · milomg.dev</Title>
       <canvas ref={c!} id="c"></canvas>
       <nav>
         <div>