pattern layouts and colour property type

package.json

@@ -8,13 +8,15 @@
     "clean": "rm -rf .next yarn-error.log"
   },
   "dependencies": {
+    "@radix-ui/react-popover": "^0.0.17",
     "copy-to-clipboard": "^3.3.1",
     "fathom-client": "^3.0.0",
     "marked": "2.0.3",
     "next": "10.2.0",
     "next-seo": "^4.24.0",
     "puppeteer-core": "9.1.1",
     "react": "^17.0.2",
+    "react-colorful": "^5.2.0",
     "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
     "styled-components": "^5.3.0",

src/components/Field.tsx

@@ -1,9 +1,9 @@
 import tw from "twin.macro";
 
 export const Field = tw.div`
-  flex items-center
+  flex
 `;
 
 export const Label = tw.label`
-  w-24 mr-4
+  w-32 mr-4 mt-1
 `;

src/components/Layout.tsx

@@ -11,6 +11,8 @@ import {
 import { Field, Label } from "./Field";
 import { Input } from "./Input";
 import { Select } from "./Select";
+import { HexColorPicker } from "react-colorful";
+import { PopoverColorPicker } from "./PopoverColorPicker";
 
 export interface Props {
   layout: ILayout;
@@ -35,19 +37,37 @@ export const LayoutProperty: React.FC<{
     <Field>
       <Label>{p.name} </Label>
 
-      {p.type === "text" ? (
-        <Input
-          placeholder={p.placeholder ?? `Value for ${p.name}`}
-          value={layoutConfig[p.name] ?? ""}
-          onChange={e => setLayoutConfig({ [p.name]: e.target.value })}
-        />
-      ) : p.type === "select" ? (
-        <Select
-          options={p.options.map(value => ({ value }))}
-          value={(layoutConfig[p.name] as string) ?? ""}
-          onChange={value => setLayoutConfig({ [p.name]: value })}
-        />
-      ) : null}
+      <div tw="w-full">
+        {p.type === "text" ? (
+          <Input
+            placeholder={p.placeholder ?? `Value for ${p.name}`}
+            value={layoutConfig[p.name] ?? ""}
+            onChange={e => setLayoutConfig({ [p.name]: e.target.value })}
+          />
+        ) : p.type === "number" ? (
+          <Input
+            placeholder={p.placeholder ?? `Value for ${p.name}`}
+            value={layoutConfig[p.name] ?? ""}
+            type="number"
+            onChange={e => setLayoutConfig({ [p.name]: e.target.value })}
+          />
+        ) : p.type === "select" ? (
+          <Select
+            options={p.options.map(value => ({ value }))}
+            value={layoutConfig[p.name] ?? ""}
+            onChange={value => setLayoutConfig({ [p.name]: value })}
+          />
+        ) : p.type === "color" ? (
+          <PopoverColorPicker
+            color={layoutConfig[p.name] ?? p.default}
+            onChange={value => setLayoutConfig({ [p.name]: value })}
+          />
+        ) : null}
+
+        {p.description != null && (
+          <span tw="text-xs text-gray-400">{p.description}</span>
+        )}
+      </div>
     </Field>
   );
 };

src/components/PopoverColorPicker.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import tw from "twin.macro";
+import * as Popover from "@radix-ui/react-popover";
+import { HexColorPicker } from "react-colorful";
+
+export interface Props {
+  color?: string;
+  onChange?: (newColor: string) => void;
+}
+
+export const PopoverColorPicker: React.FC<Props> = ({ color, onChange }) => {
+  return (
+    <Popover.Root>
+      <Popover.Trigger
+        css={[
+          tw`w-full h-9 rounded border hover:border-gray-400`,
+          tw`focus:outline-none focus:border-transparent focus:ring-2 focus:ring-accent`,
+          { backgroundColor: color },
+        ]}
+      />
+
+      <Popover.Content>
+        <HexColorPicker color={color} onChange={onChange} />
+      </Popover.Content>
+    </Popover.Root>
+  );
+};

src/layouts/index.ts

@@ -1,5 +1,6 @@
 import { ILayout, ILayoutConfig } from "../types";
 import { docsLayout } from "./docsLayout";
+import { patternLayout } from "./patternLayout";
 import { railwayLayout } from "./railwayLayout";
 import { simpleLayout } from "./simpleLayout";
 import { starterLayout } from "./starterLayout";
@@ -12,14 +13,15 @@ export const layouts: ILayout[] = [
   starterLayout,
   railwayLayout,
   docsLayout,
+  patternLayout,
 ];
 
 export const getDefaultLayout = (layout: ILayout): ILayoutConfig => {
   const config: ILayoutConfig = {};
 
   for (const p of layout.properties) {
     if (p.default != null) {
-      config[p.name] = p.default;
+      config[p.name] = p.default?.toString();
     }
   }
 
@@ -39,7 +41,7 @@ export const getLayoutConfigFromQuery = (
   const config: ILayoutConfig = getDefaultLayout(layout);
   for (const p of layout.properties) {
     if (query[p.name] != null) {
-      config[p.name] = query[p.name];
+      config[p.name] = query[p.name].toString();
     }
   }
 

src/layouts/patternLayout.tsx

@@ -0,0 +1,100 @@
+import { GetCSSFn, ILayout, LayoutComponent } from "../types";
+import { topography } from "./patterns/topography";
+import { jigsaw } from "./patterns/jigsaw";
+import { texture } from "./patterns/texture";
+import { architect } from "./patterns/architect";
+import { graph } from "./patterns/graph";
+import { Pattern } from "./patterns/types";
+import { Markdown } from "./utils";
+
+const getCSS: GetCSSFn = config => {
+  return `
+    body {}
+  `;
+};
+
+const patterns = {
+  topography,
+  jigsaw,
+  texture,
+  architect,
+  "graph paper": graph,
+};
+
+const Component: LayoutComponent = ({ config }) => {
+  const pattern = patterns[config.Pattern] as Pattern;
+  const text = config.Text;
+  const textColor = config["Text Color"];
+  const fg = config.Foreground;
+  const bg = config.Background;
+  const opacity = config.Opacity ?? "0.5";
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-end",
+        justifyContent: "flex-end",
+        width: "100vw",
+        height: "100vh",
+        padding: 80,
+        margin: 0,
+        backgroundColor: bg,
+        backgroundImage: pattern(fg, opacity),
+      }}
+    >
+      <Markdown
+        style={{
+          fontSize: 200,
+          fontWeight: 800,
+          lineHeight: "1em",
+          color: textColor,
+        }}
+      >
+        {text}
+      </Markdown>
+    </div>
+  );
+};
+
+export const patternLayout: ILayout = {
+  name: "Pattern",
+  properties: [
+    {
+      name: "Pattern",
+      type: "select",
+      default: "topography",
+      options: Object.keys(patterns),
+      description: "from heropatterns.com",
+    },
+    {
+      name: "Text",
+      type: "text",
+      default: "Hello World",
+      placeholder: "Some text to display",
+    },
+    {
+      name: "Text Color",
+      type: "color",
+      default: "white",
+    },
+    {
+      name: "Foreground",
+      type: "color",
+      default: "#9c92ac",
+    },
+    {
+      name: "Background",
+      type: "color",
+      default: "#dfdbe5",
+    },
+    {
+      name: "Opacity",
+      type: "number",
+      default: 0.5,
+    },
+  ],
+  getCSS,
+  Component,
+};

src/layouts/patterns/architect.ts

@@ -0,0 +1,6 @@
+import { Pattern } from "./types";
+
+export const architect: Pattern = (fg, opacity) =>
+  `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='${encodeURIComponent(
+    fg,
+  )}' fill-opacity='${opacity}'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")`;

src/layouts/patterns/graph.ts

@@ -0,0 +1,6 @@
+import { Pattern } from "./types";
+
+export const graph: Pattern = (fg, opacity) => `background-color: #DFDBE5;
+background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='${encodeURIComponent(
+  fg,
+)}' fill-opacity='${opacity}'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;

src/layouts/patterns/jigsaw.ts

@@ -0,0 +1,6 @@
+import { Pattern } from "./types";
+
+export const jigsaw: Pattern = (fg, opacity) =>
+  `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='${encodeURIComponent(
+    fg,
+  )}' fill-opacity='${opacity}' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E")`;

src/layouts/patterns/texture.ts

@@ -0,0 +1,6 @@
+import { Pattern } from "./types";
+
+export const texture: Pattern = (fg, opacity) => `background-color: #DFDBE5;
+background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='${encodeURIComponent(
+  fg,
+)}' fill-opacity='${opacity}' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E")`;

src/layouts/patterns/types.ts

@@ -0,0 +1 @@
+export type Pattern = (fg: string, opacity: string) => string;

src/layouts/railwayLayout.tsx

@@ -1,9 +1,9 @@
 import { GetCSSFn, ILayout, LayoutComponent } from "../types";
-import { defaultTheme, colourThemes } from "./colours";
-import { gString, Markdown, RLogo } from "./utils";
+import { colourThemes, defaultTheme } from "./colours";
+import { getTheme, Markdown, RLogo } from "./utils";
 
 const getCSS: GetCSSFn = config => {
-  const theme = gString(config, "Theme", defaultTheme).toLowerCase();
+  const theme = getTheme(config);
   const colours = colourThemes[theme];
 
   return `
@@ -25,8 +25,8 @@ const getCSS: GetCSSFn = config => {
 };
 
 const Component: LayoutComponent = ({ config }) => {
-  const title = gString(config, "Title");
-  const subTitle = gString(config, "Sub Title");
+  const title = config.Title;
+  const subTitle = config["Sub Title"];
 
   const logoSize = !!subTitle ? 150 : 240;
 

src/layouts/simpleLayout.tsx

@@ -1,5 +1,5 @@
 import { GetCSSFn, ILayout, LayoutComponent } from "../types";
-import { gString, Markdown } from "./utils";
+import { Markdown } from "./utils";
 
 const getCSS: GetCSSFn = config => {
   return `
@@ -12,8 +12,7 @@ const getCSS: GetCSSFn = config => {
 };
 
 const Component: LayoutComponent = ({ config }) => {
-  const text = gString(config, "Text");
-  return <Markdown className="header">{text}</Markdown>;
+  return <Markdown className="header">{config.Text}</Markdown>;
 };
 
 export const simpleLayout: ILayout = {

src/layouts/starterLayout.tsx

@@ -1,9 +1,9 @@
 import { GetCSSFn, ILayout, LayoutComponent } from "../types";
 import { colourThemes, defaultTheme } from "./colours";
-import { gString, RLogo } from "./utils";
+import { getTheme, RLogo } from "./utils";
 
 const getCSS: GetCSSFn = config => {
-  const theme = gString(config, "Theme", defaultTheme).toLowerCase();
+  const theme = getTheme(config);
   const colours = colourThemes[theme];
 
   return `
@@ -58,13 +58,13 @@ const getCSS: GetCSSFn = config => {
 };
 
 const Component: LayoutComponent = ({ config }) => {
-  const theme = gString(config, "Theme", defaultTheme).toLowerCase();
-  const name = gString(config, "Name");
-  const url = gString(config, "URL");
+  const theme = getTheme(config);
+  const name = config.Name;
+  const url = config.URL;
   const iconURL = `https://devicons.railway.app/${name}?variant=${
     theme === "light" ? "dark" : "light"
   }`;
-  const hideIcon = gString(config, "Icon") === "Hide";
+  const hideIcon = config.Icon === "Hide";
 
   console.log({ iconURL });
 

src/layouts/utils.tsx

@@ -14,12 +14,16 @@ export const mdToHTML = (text: string): string => marked(text);
 export const gString = (
   layoutConfig: ILayoutConfig,
   name: string,
-  defaultValue?: string,
+  defaultValue: string = "",
 ): string => {
   const value = layoutConfig[name] ?? defaultValue;
   return Array.isArray(value) ? value.join(", ") : value;
 };
 
+export const getTheme = (config: ILayoutConfig) => {
+  return (config.Theme ?? defaultTheme).toLowerCase();
+};
+
 export const Emoji: React.FC<{ children: string; className?: string }> = ({
   children,
   ...props

src/types.ts

@@ -27,19 +27,28 @@ export type ILayoutProperty = BaseLayoutProperty &
         default?: string;
         placeholder?: string;
       }
+    | {
+        type: "number";
+        default?: string;
+        placeholder?: string;
+      }
     | {
         type: "select";
         options: string[];
         default?: string;
       }
+    | {
+        type: "color";
+        default?: string;
+      }
   );
 
 export interface BaseLayoutProperty {
   name: string;
   description?: string;
 }
 
-export type ILayoutValue = string | string[];
+export type ILayoutValue = string;
 export type ILayoutConfig = Record<string, ILayoutValue>;
 
 export interface Colours {