feat: add footer and magic

lino-levan · Mar 13, 2023 · 82d69de · 82d69de
1 parent 302388e
commit 82d69de
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 13 deletions.
diff --git a/src/build.ts b/src/build.ts
@@ -2,6 +2,7 @@ import { walkSync } from "std/fs/walk.ts";
 import { join, resolve } from "std/path/mod.ts";
 import { render } from "./lib/render.ts";
 import { copySync } from "std/fs/copy.ts";
+import { getMagic } from "./lib/magic.ts";
 
 export function build() {
   try {
@@ -15,6 +16,7 @@ export function build() {
   copySync("./static", "./build");
 
   const config = JSON.parse(Deno.readTextFileSync("deno.jsonc")).pyro;
+  const magic = getMagic();
 
   for (const entry of walkSync("./pages", { includeDirs: false })) {
     const extracted = resolve(entry.path).match(
@@ -24,7 +26,7 @@ export function build() {
     Deno.mkdirSync(join("build", folder), { recursive: true });
     Deno.writeTextFileSync(
       resolve("build", folder, "index.html"),
-      render(config, folder),
+      render(config, magic, folder),
     );
   }
 }
diff --git a/src/dev.ts b/src/dev.ts
@@ -2,6 +2,7 @@ import { serve } from "std/http/server.ts";
 import { resolve } from "std/path/mod.ts";
 import { serveDir } from "std/http/file_server.ts";
 import { render } from "./lib/render.ts";
+import { getMagic } from "./lib/magic.ts";
 
 export function dev() {
   const config = JSON.parse(Deno.readTextFileSync("deno.jsonc")).pyro;
@@ -25,10 +26,13 @@ export function dev() {
       }
     }
 
-    return new Response(render(config, resolve("pages", pathname)), {
-      headers: {
-        "Content-Type": "text/html; charset=utf-8",
+    return new Response(
+      render(config, getMagic(), resolve("pages", pathname)),
+      {
+        headers: {
+          "Content-Type": "text/html; charset=utf-8",
+        },
       },
-    });
+    );
   });
 }
diff --git a/src/lib/magic.ts b/src/lib/magic.ts
@@ -0,0 +1,59 @@
+// This file is for all of the "magic" autoconfig we do
+// For example, we select the background color from the logo
+// No config needed!
+import { decode } from "https://deno.land/x/[email protected]/mod.ts";
+import type { Magic } from "./types.ts";
+
+function saturation(r: number, g: number, b: number) {
+  r = r / 255;
+  g = g / 255;
+  b = b / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+
+  const lum = max - min;
+
+  if (lum < 0.5) {
+    return (max - min) / (max + min);
+  } else {
+    return (max - min) / (2 - max - min);
+  }
+}
+
+function getBackground() {
+  try {
+    const logo = Deno.readFileSync("./static/icon.png");
+    const bytes = decode(logo);
+
+    let brightest_color = "rgb(0,0,0)";
+    let max_brightness = 0;
+
+    for (let i = 0; i < bytes.image.length; i += 4) {
+      const [r, g, b, a] = [
+        bytes.image[i],
+        bytes.image[i + 1],
+        bytes.image[i + 2],
+        bytes.image[i + 3],
+      ];
+      const brightness = saturation(r, g, b) * a;
+
+      if (brightness > max_brightness) {
+        max_brightness = brightness;
+        brightest_color = `rgb(${r}, ${g}, ${b})`;
+      }
+    }
+
+    console.log("Brightest color is", brightest_color);
+
+    return brightest_color;
+  } catch {
+    return "white";
+  }
+}
+
+export function getMagic(): Magic {
+  return {
+    background: getBackground(),
+  };
+}
diff --git a/src/lib/page.tsx b/src/lib/page.tsx
@@ -1,8 +1,10 @@
 import { CSS, KATEX_CSS, render } from "gfm";
 import type { RouteMap } from "./route_map.ts";
+import type { Config, Magic } from "./types.ts";
+
 import ChevronDown from "icons/chevron-down.tsx";
 import Github from "icons/brand-github.tsx";
-import type { Config } from "./types.ts";
+import ExternalLink from "icons/external-link.tsx";
 
 function simplify(url: string) {
   return url.replaceAll("/", "").replaceAll("-", "");
@@ -71,6 +73,7 @@ export function page(options: {
   route_map: RouteMap[];
   route: string;
   config: Config;
+  magic: Magic;
 }) {
   return (
     <html lang="en">
@@ -102,8 +105,11 @@ export function page(options: {
         <meta name="description" content={options.page.description} />
         <link rel="icon" type="image/png" href="/icon.png" />
       </head>
-      <body class="flex flex-col">
-        <header class="w-full h-16 shadow-sm flex items-center px-4 justify-between">
+      <body
+        class="flex flex-col"
+        style={{ backgroundColor: options.magic.background }}
+      >
+        <header class="w-full h-16 shadow-sm flex items-center px-4 justify-between bg-white z-10">
           <h1 class="font-semibold text-lg text-gray-800 flex items-center gap-2">
             <image src="/icon.png" class="w-8 h-8" />
             {options.config.title}
@@ -116,7 +122,7 @@ export function page(options: {
             )}
           </div>
         </header>
-        <div class="flex gap-4 flex-grow">
+        <div class="flex gap-4 flex-grow bg-white">
           <Sidebar
             class="w-64 p-2 border-r border-gray-200 pt-4 flex flex-col gap-2"
             route_map={options.route_map}
@@ -136,6 +142,51 @@ export function page(options: {
             />
           </div>
         </div>
+        {options.config.footer && (
+          <footer class="px-4 py-12 w-full flex justify-center text-gray-800 border-t bg-white">
+            <div class="max-w-screen-lg w-full flex flex-wrap justify-around">
+              <image src="/icon.png" class="w-8 h-8" />
+              {Object.entries(options.config.footer).map(([name, value]) => (
+                <div>
+                  <p class="font-bold pb-4">{name}</p>
+                  <ul class="flex flex-col gap-2">
+                    {value.map(([name, url]) => (
+                      <li>
+                        <a
+                          class="flex items-center gap-1 hover:underline"
+                          href={url}
+                        >
+                          {name}
+                          {!url.startsWith("/") && (
+                            <ExternalLink class="inline w-4" />
+                          )}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+              <div class="h-full flex flex-col justify-around">
+                {options.config.copyright && (
+                  <p class="whitespace-pre text-gray-500 text-sm">
+                    {options.config.copyright}
+                  </p>
+                )}
+                <div>
+                  {options.config.github && (
+                    <a
+                      target="_blank"
+                      class="w-min"
+                      href={options.config.github}
+                    >
+                      <Github class="text-gray-500 hover:text-gray-900" />
+                    </a>
+                  )}
+                </div>
+              </div>
+            </div>
+          </footer>
+        )}
       </body>
     </html>
   );

diff --git a/src/lib/render.ts b/src/lib/render.ts
@@ -3,13 +3,13 @@ import { extract } from "std/encoding/front_matter/any.ts";
 import { renderToString } from "preact-render-to-string";
 import { page } from "./page.tsx";
 import { get_route_map, resolve_file } from "./route_map.ts";
-import type { Config } from "./types.ts";
+import type { Config, Magic } from "./types.ts";
 
 import "https://esm.sh/[email protected]/components/prism-json?no-check";
 import "https://esm.sh/[email protected]/components/prism-bash?no-check";
 import "https://esm.sh/[email protected]/components/prism-yaml?no-check";
 
-export function render(config: Config, path: string) {
+export function render(config: Config, magic: Magic, path: string) {
   const markdown = resolve_file(resolve("pages", path));
   const frontmatter = extract(markdown);
   const route_map = get_route_map(resolve("pages"), true);
@@ -25,6 +25,7 @@ export function render(config: Config, path: string) {
       route_map,
       route: "/" + path,
       config,
+      magic,
     }),
   );
 }
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -1,4 +1,10 @@
 export interface Config {
   title: string;
   github?: string;
+  copyright?: string;
+  footer?: Record<string, [string, string][]>;
+}
+
+export interface Magic {
+  background: string;
 }
diff --git a/www/deno.jsonc b/www/deno.jsonc
@@ -6,6 +6,17 @@
   "imports": {},
   "pyro": {
     "title": "Pyro",
-    "github": "https://github.com/lino-levan/pyro"
+    "github": "https://github.com/lino-levan/pyro",
+    "copyright": "Copyright © 2023 Lino Le Van\nMIT Licensed.",
+    "footer": {
+      "Learn": [
+        ["Introduction", "/"],
+        ["Installation", "/getting-started/installation"]
+      ],
+      "Community": [
+        ["Discord", "https://discord.gg/XJMMSSC4Fj"],
+        ["Support", "https://github.com/lino-levan/pyro/issues/new"]
+      ]
+    }
   }
 }
diff --git a/www/pages/getting-started/configuration.md b/www/pages/getting-started/configuration.md
@@ -19,8 +19,26 @@ configuration specific to Pyro.
   "pyro": {
     // The title of the site
     "title": "Pyro",
+
     // The Github repository for the documentation site (optional)
-    "github": "https://github.com/lino-levan/pyro"
+    "github": "https://github.com/lino-levan/pyro",
+
+    // Any copyright information you want to include in the footer (optional)
+    "copyright": "Copyright © 2023 Lino Le Van\nMIT Licensed.",
+
+    // Links in the footer (optional)
+    "footer": {
+      // Header of the column
+      "Learn": [
+        // [name, url]
+        ["Introduction", "/"],
+        ["Installation", "/getting-started/installation"]
+      ],
+      "Community": [
+        ["Discord", "https://discord.gg/XJMMSSC4Fj"],
+        ["Support", "https://github.com/lino-levan/pyro/issues/new"]
+      ]
+    }
   }
 }
 ```