pages: add sigil generator

components/Sigil.js

@@ -12,11 +12,19 @@ export const foregroundFromBackground = (background) => {
   return whiteBrightness - brightness < 50 ? "black" : "white";
 };
 
-export const Sigil = ({ patp, size, color = "#24201E", icon }) => {
+export const Sigil = ({
+  patp,
+  size,
+  color = "#24201E",
+  foregroundColor = false,
+  icon,
+}) => {
   if (patp.length > 14) {
     return <div />;
   }
-  const foreground = foregroundFromBackground(color);
+  const foreground = foregroundColor
+    ? foregroundColor
+    : foregroundFromBackground(color);
   return (
     <div
       className={icon ? "p-1" : ""}

pages/api/sigil.js

@@ -13,47 +13,35 @@ const foregroundFromBackground = (background) => {
   return whiteBrightness - brightness < 50 ? "black" : "white";
 };
 
-const Sigil = ({ patp, size, color = "#24201E", icon }) => {
-  if (patp.length > 14) {
-    return <div />;
-  }
-  const foreground = foregroundFromBackground(color);
-  return (
-    <div
-      className={icon ? "p-1" : ""}
-      style={{ backgroundColor: icon ? color || "black" : "transparent" }}
-    >
-      {sigil({
-        patp: patp,
-        renderer: stringRenderer,
-        size: icon ? size / 2 : size,
-        colors: [color, foreground],
-        icon: icon || false,
-      })}
-    </div>
-  );
-};
-
 export default (req, res) => {
-  const foreground = foregroundFromBackground(
-    `#${req.query.color || "24201E"}`
-  );
+  const foreground = req?.query?.foreground
+    ? `#${req?.query?.foreground}`
+    : foregroundFromBackground(`#${req.query.color || "24201E"}`);
+  const { patp = "~zod", color = "24201E", filetype = "png" } = req?.query;
   const svg = sigil({
-    patp: req.query.patp,
+    patp: patp,
     renderer: stringRenderer,
     size: 1024,
-    colors: [`#${req.query.color || "24201E"}`, foreground],
+    colors: [`#${color}`, foreground],
     icon: false,
   });
   const svgDataString = "data:image/svg+xml," + svg;
-  const canvas = createCanvas(1024, 1024);
+  const canvas = createCanvas(
+    1024,
+    1024,
+    filetype === "svg" ? "svg" : undefined
+  );
   const ctx = canvas.getContext("2d");
   const canvasImage = new Image();
   canvasImage.src = svgDataString;
   ctx.drawImage(canvasImage, 0, 0);
-  const buffer = canvas.toBuffer();
+  const buffer =
+    filetype === "png" ? canvas.toBuffer() : canvas.toBuffer("image/svg+xml");
   res.writeHead(200, {
-    "Content-Type": "image/png",
+    "Content-Type": filetype === "png" ? "image/png" : "image/svg+xml",
+    ...(filetype === "svg" && {
+      "Content-Disposition": `attachment; filename=${patp}.svg`,
+    }),
     "Content-Length": buffer.length,
   });
   res.end(buffer, "binary");

pages/ids/index.js

@@ -0,0 +1,117 @@
+import Header from "../../components/Header";
+import Footer from "../../components/Footer";
+import {
+  Container,
+  IntraNav,
+  SingleColumn,
+  Section,
+} from "@urbit/foundation-design-system";
+import { useState } from "react";
+import ob from "urbit-ob";
+import Sigil from "../../components/Sigil";
+
+export default function SigilGenerator({ search }) {
+  const [background, setBackground] = useState("#24201E");
+  const [foreground, setForeground] = useState("#ffffff");
+  const [patp, setPatp] = useState("~wolref-podlex");
+  return (
+    <Container>
+      <IntraNav ourSite="https://urbit.org" search={search} />
+      <Header />
+      <SingleColumn>
+        <Section>
+          <h2>Urbit ID</h2>
+          <div className="flex justify-between items-center">
+            <div>
+              <div className="flex space-x-2 items-center border w-full justify-between max-w-sm rounded-xl pl-2 overflow-hidden my-4">
+                <p className="h-full w-32 font-bold">Urbit ID</p>
+                <input
+                  type="text"
+                  onChange={(e) => setPatp(e.target.value)}
+                  value={patp}
+                  className="h-full min-w-0 p-4 bg-white text-black border-l"
+                />
+              </div>
+              <div className="flex space-x-2 items-center border w-full justify-between max-w-sm rounded-xl pl-2 overflow-hidden my-4">
+                <p className="h-full w-36 font-bold">Background</p>
+                <div className="flex bg-white text-black border-l p-3 min-w-0 items-center space-x-2">
+                  <input
+                    type="text"
+                    onChange={(e) => setBackground(e.target.value)}
+                    value={background}
+                    className="min-w-0 bg-white text-black"
+                  />
+                  <input
+                    type="color"
+                    value={
+                      /^#[0-9A-F]{6}$/i.test(background)
+                        ? background
+                        : "#24201E"
+                    }
+                    onChange={(e) => setBackground(e.target.value)}
+                    className="h-8 w-8 bg-white text-black"
+                  />
+                </div>
+              </div>
+              <div className="flex space-x-2 items-center border w-full justify-between max-w-sm rounded-xl pl-2 overflow-hidden">
+                <p className="h-full w-36 font-bold">Foreground</p>
+                <div className="flex bg-white text-black border-l p-3 min-w-0 items-center space-x-2">
+                  <input
+                    type="text"
+                    onChange={(e) => setForeground(e.target.value)}
+                    value={foreground}
+                    className="min-w-0 bg-white text-black"
+                  />
+                  <input
+                    type="color"
+                    value={
+                      /^#[0-9A-F]{6}$/i.test(foreground)
+                        ? foreground
+                        : "#ffffff"
+                    }
+                    onChange={(e) => setForeground(e.target.value)}
+                    className="h-8 w-8 bg-white text-black"
+                    style={{ WebkitAppearance: "text" }}
+                  />
+                </div>
+              </div>
+              <div className="flex justify-between space-x-2 my-4">
+                <a
+                  href={`/api/sigil?patp=${patp}&color=${background.slice(
+                    1
+                  )}&foreground=${foreground.slice(1)}`}
+                  className="button-lg bg-green-400 text-white w-full"
+                  target="_blank"
+                >
+                  PNG
+                </a>
+                <a
+                  href={`/api/sigil?patp=${patp}&color=${background.slice(
+                    1
+                  )}&foreground=${foreground.slice(1)}&filetype=svg`}
+                  className="button-lg bg-green-400 text-white w-full"
+                  target="_blank"
+                >
+                  SVG
+                </a>
+              </div>
+            </div>
+            <div className="rounded-xl overflow-hidden">
+              <Sigil
+                patp={ob.isValidPatp(patp) ? patp : "~wolref-podlex"}
+                size="500"
+                color={
+                  /^#[0-9A-F]{6}$/i.test(background) ? background : "#24201E"
+                }
+                foregroundColor={
+                  /^#[0-9A-F]{6}$/i.test(foreground) ? foreground : "#ffffff"
+                }
+              />
+            </div>
+          </div>
+        </Section>
+      </SingleColumn>
+      <Footer />
+    </Container>
+  );
+}