@designsystemsinternational/cloudflare 0.1.0

package/README.md

@@ -0,0 +1,60 @@
+# DSI Cloudflare Package
+
+This package provides a set of helpers to deploy both static and dynamic
+websites to Cloudflare Workers. It comes with a nice set of tools:
+
+- A CLI to set up the deployment config (including `wrangler.jsonc`) for a repo
+- A Cloudflare Worker to password protect a static website
+- A Vite application that builds the auth templates needed for the password
+  worker
+
+## Usage
+
+### Setting up a new deployment
+
+In order to deploy a new site on Cloudflare Worker, run the following:
+
+```bash
+npx @designsystemsinternational/cloudflare
+```
+
+The CLI will guide you through setting up the deployment, including with
+password protection.
+
+## Development
+
+### File structure
+
+The repo is divided into these main folders:
+
+- `templates/` holds a Vite app that can be used to make frontend templates. It
+  currently just renders the auth templates.
+- `workers/` holds all Cloudflare Workers code. It currently just has a
+  `password` worker that renders the auth templates in front of a static site.
+- `cli` holds the code for the npx command
+
+### Local development
+
+Because of the way Cloudflare workers operate, it's hard to have a single local
+development command to test the entire flow while preserving the Vite hot module
+reloading. So, the development will need to happen in two ways:
+
+- To design the auth templates, run `cd templates && npm run dev` to run the
+  Vite dev server inside the `/templates` folder. This will enable hot module
+  reloading, but the worker auth script won't run, so the actual login process
+  won't work.
+- To test the whole flow, run `npm run dev` in the root folder. This runs the
+  cloudflare worker in a local environment that matches the production
+  environment. With this, you can test the entire login flow, but the auth
+  templates will use `vite build` and not run via hot module reloading.
+
+All you need is to add a `.env.local` file with the following environment
+variables:
+
+```
+SECRET=secret
+PASSWORD=yiah
+```
+
+For testing the CLI, I currently just create a new test package alongside this
+folder and run `npx ../cloudflare`.

package/cli/index.ts

@@ -0,0 +1,196 @@
+#!/usr/bin/env node
+
+import { confirm, input, select } from "@inquirer/prompts";
+import { existsSync, readFileSync, writeFileSync } from "fs";
+import { exec } from "child_process";
+import { promisify } from "util";
+
+/**
+ * Base setup
+ */
+
+const execAsync = promisify(exec);
+const hasWrangler = existsSync("wrangler.jsonc");
+const packageJson = JSON.parse(readFileSync("./package.json", "utf-8"));
+
+/**
+ * Prompts
+ */
+
+const isStaticSite = await confirm({
+  message: "This CLI currently only supports static sites. Continue?",
+});
+
+if (!isStaticSite) {
+  process.exit(1);
+}
+
+const name = await input({
+  message: "Name of the Cloudflare Workers site",
+  default: packageJson?.name ?? "my-site",
+});
+
+const buildCmd = await input({
+  message: "Build command",
+  default: "npm run build",
+});
+
+const buildDir = await input({
+  message: "Build directory",
+  default: "./dist",
+});
+
+const notFoundHandling = await select({
+  message: "Not found handling",
+  choices: [
+    {
+      name: "Single Page Application",
+      value: "single-page-application",
+      description: "Redirect to the index page when the asset is not found",
+    },
+    {
+      name: "404 Page",
+      value: "404-page",
+      description: "Render a 404 page when the asset is not found",
+    },
+    {
+      name: "None",
+      value: "none",
+      description: "Return a 404 status code when the asset is not found",
+    },
+  ],
+});
+
+const hasCustomDomain = await confirm({
+  message: "Add a custom domain?",
+  default: false,
+});
+
+let customDomain;
+if (hasCustomDomain) {
+  customDomain = await input({
+    message: "Custom domain",
+    default: "xxx.ionaldesignsystemsinternat.com",
+  });
+}
+
+const passwordProtection = await confirm({
+  message: "Enable password protection?",
+  default: false,
+});
+
+/**
+ * Create wrangler.jsonc
+ */
+
+const json: any = {
+  name,
+  compatibility_date: new Date().toISOString().split("T")[0],
+  assets: {
+    directory: buildDir,
+    not_found_handling: notFoundHandling,
+    binding: "ASSETS",
+  },
+  keep_vars: true,
+  workers_dev: true,
+  observability: {
+    enabled: true,
+  },
+};
+
+if (hasCustomDomain && customDomain) {
+  json.routes = [
+    {
+      pattern: customDomain,
+      custom_domain: true,
+    },
+  ];
+}
+
+if (passwordProtection) {
+  json.main =
+    "./node_modules/@designsystemsinternational/cloudflare/workers/password/index.ts";
+  json.assets.run_worker_first = true;
+}
+
+/**
+ * Write
+ */
+
+const wranglerString = JSON.stringify(json, null, 2);
+const buildCmdSplit = buildCmd.split(" ");
+const buildCmdName = buildCmdSplit[2];
+const shouldWriteBuildCmd =
+  buildCmdSplit[0] === "npm" &&
+  buildCmdSplit[1] === "run" &&
+  packageJson?.scripts?.[buildCmdName];
+const copyCmd =
+  "cp -r node_modules/@designsystemsinternational/cloudflare/templates/dist/auth dist/auth/";
+
+console.log("");
+console.log(
+  hasWrangler
+    ? "The existing wrangler.jsonc file will be overwritten with this content:"
+    : "A wrangler.jsonc file will be created with this content:"
+);
+console.log(wranglerString);
+console.log("");
+if (shouldWriteBuildCmd) {
+  console.log("The following command will be added to the build command:");
+  console.log(copyCmd);
+  console.log("");
+}
+if (passwordProtection) {
+  console.log(
+    "The @designsystemsinternational/cloudflare package will be installed automatically."
+  );
+  console.log("");
+}
+
+const confirmWrite = await confirm({
+  message: "Continue?",
+});
+if (!confirmWrite) {
+  process.exit(1);
+}
+
+writeFileSync("./wrangler.jsonc", wranglerString, "utf-8");
+
+if (shouldWriteBuildCmd) {
+  packageJson.scripts[buildCmdName] =
+    packageJson.scripts[buildCmdName] + " && " + copyCmd;
+  writeFileSync(
+    "./package.json",
+    JSON.stringify(packageJson, null, 2),
+    "utf-8"
+  );
+}
+
+if (passwordProtection) {
+  console.log("Installing @designsystemsinternational/cloudflare...");
+  try {
+    await execAsync("npm install @designsystemsinternational/cloudflare");
+  } catch (error) {
+    console.error(
+      "Failed to install @designsystemsinternational/cloudflare package. Please install yourself."
+    );
+  }
+}
+
+console.log(`Project setup complete!
+  
+Next steps:
+- Create a new Cloudflare Workers site with this name: ${name}
+- Add this build command to the site config: ${buildCmd}
+`);
+
+if (passwordProtection) {
+  console.log(`- Add the following environment variables under Settings > Variables and Secrets
+  - SECRET: A random string to encrypt the password
+  - PASSWORD: The password you want to use`);
+}
+
+if (!shouldWriteBuildCmd) {
+  console.log(`- Add the following command to the build command in package.json:
+    ${copyCmd}`);
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@designsystemsinternational/cloudflare",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/designsystemsinternational/cloudflare.git"
+  },
+  "version": "0.1.0",
+  "type": "module",
+  "bin": {
+    "cloudflare": "cli/index.ts"
+  },
+  "scripts": {
+    "dev": "cd templates && npm run build && cd .. && wrangler dev",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "deploy": "cd templates && npm run build && cd .. && wrangler deploy",
+    "types": "wrangler types"
+  },
+  "dependencies": {
+    "@tsndr/cloudflare-worker-jwt": "^3.2.0",
+    "worktop": "^0.7.3",
+    "zod": "^4.1.13"
+  },
+  "devDependencies": {
+    "@inquirer/prompts": "^8.1.0",
+    "@types/node": "^24.10.1",
+    "eslint": "^9.33.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "wrangler": "^4.53.0"
+  }
+}

package/templates/dist/auth/assets/index-BqXcY2TH.css

@@ -0,0 +1 @@
+._root_biwuk_1{display:grid;grid-template-columns:repeat(3,1fr);justify-content:center;align-items:end;min-height:100vh;width:100vw;padding-bottom:var(--spacing-layout-gutter)}@media(min-width:56rem){._root_biwuk_1{align-items:center}}._logo_biwuk_17{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);font-size:var(--text-sm);font-weight:var(--font-weight-medium)}._logo_biwuk_17>div{padding-top:var(--spacing-layout-gutter);padding-right:var(--spacing-layout-gutter);padding-left:var(--spacing-layout-gutter)}._logo_biwuk_17>div:last-child{text-align:right}._container_biwuk_38{padding-right:var(--spacing-layout-gutter);padding-left:var(--spacing-layout-gutter);grid-column:1 / -1}@media(min-width:56rem){._container_biwuk_38{grid-column:2 / 3}}._box_biwuk_50{--input-padding: calc(1.2 * var(--spacing-sm)) var(--spacing-sm) var(--spacing-sm);display:flex;flex-direction:column;justify-content:space-between;gap:var(--spacing-xl);padding:var(--spacing-sm);background-color:var(--color-overlay);border-radius:var(--radius-sm);-webkit-backdrop-filter:var(--backdrop-filter);backdrop-filter:var(--backdrop-filter)}._box_biwuk_50 form{display:flex;flex-direction:column;gap:var(--spacing-2xs)}._box_biwuk_50 [aria-busy]{opacity:.5;cursor:wait}._box_biwuk_50 input{border:1px solid var(--color-border-default);padding:var(--input-padding);font-size:var(--text-sm);border-radius:var(--radius-xs);outline:none;font-family:var(--font-mono)}._box_biwuk_50 input:not([aria-busy]):focus{border-color:var(--color-border-focus)}._box_biwuk_50 button{background:var(--color-bg-inverted-primary);color:var(--color-text-inverted-primary);font-size:var(--text-sm);padding:var(--input-padding);border-radius:var(--radius-xs)}._box_biwuk_50 button:not([aria-busy]):hover{background:var(--color-bg-inverted-secondary);cursor:pointer}._errorBox_biwuk_99[aria-hidden]{visibility:hidden}._errorBox_biwuk_99{padding:var(--spacing-sm);background:var(--color-bg-inverted-tertiary);line-height:var(--leading-loose);border-radius:var(--radius-xs)}._errorBox_biwuk_99 a{font-weight:var(--font-weight-medium)}._errorBox_biwuk_99 a:hover{-webkit-text-decoration:underline;text-decoration:underline}@font-face{font-family:Univers;font-weight:400;src:url(/auth/fonts/UniversNextPro-Regular.woff2) format("woff2")}@font-face{font-family:Univers;font-weight:600;src:url(/auth/fonts/UniversNextPro-Medium.woff2) format("woff2")}@font-face{font-family:Typewriter;font-weight:400;src:url(/auth/fonts/UniversNextTypewrtrPro-Rg.woff2) format("woff2")}@layer reset{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:--theme(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;-webkit-text-decoration:underline;text-decoration:underline}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select[multiple]) optgroup{font-weight:bolder}:where(select[size]) optgroup{font-weight:bolder}:where(select[multiple]) optgroup option{padding-left:20px}:where(select[size]) optgroup option{padding-left:20px}::file-selector-button{margin-right:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::-moz-placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}:root{--base-color-black: 0, 0, 0;--base-color-white: 255, 255, 255;--base-color-grey-100: 240, 240, 240;--base-color-grey-300: 204, 204, 204;--base-color-grey-500: 136, 136, 136;--base-color-grey-800: 35, 35, 35;--base-color-grey-900: 15, 15, 15;--color-text-primary: rgb(var(--base-color-black));--color-text-secondary: rgb(var(--base-color-grey-500));--color-text-tertiary: rgb(var(--base-color-grey-300));--color-text-inverted-primary: rgb(var(--base-color-white));--color-text-inverted-secondary: rgba(var(--base-color-white), 50%);--color-bg-primary: rgb(var(--base-color-white));--color-bg-secondary: rgb(var(--base-color-grey-100));--color-bg-inverted-primary: rgb(var(--base-color-black));--color-bg-inverted-secondary: rgb(var(--base-color-grey-800));--color-bg-inverted-tertiary: rgba(var(--base-color-black), 7.5%);--color-overlay: rgba(var(--base-color-white), 40%);--color-overlay-inverted: rgba(var(--base-color-black), 80%);--color-border-default: rgba(var(--base-color-black), 10%);--color-border-focus: rgb(var(--base-color-grey-800));--spacing-4xs: clamp(2px, 1.3077px + .1923vw, 4px);--spacing-3xs: clamp(4px, 3.3077px + .1923vw, 6px);--spacing-2xs: clamp(6px, 5.3077px + .1923vw, 8px);--spacing-xs: clamp(8px, 6.6154px + .3846vw, 12px);--spacing-sm: clamp(12px, 10.6154px + .3846vw, 16px);--spacing-md: clamp(16px, 13.2308px + .7692vw, 24px);--spacing-lg: clamp(24px, 21.2308px + .7692vw, 32px);--spacing-xl: clamp(32px, 26.4615px + 1.5385vw, 48px);--spacing-2xl: clamp(48px, 42.4615px + 1.5385vw, 64px);--spacing-3xl: clamp(64px, 52.9231px + 3.0769vw, 96px);--spacing-4xl: clamp(80px, 57.8462px + 6.1538vw, 144px);--spacing-5xl: clamp(144px, 117.6923px + 7.3077vw, 220px);--spacing-layout-gutter: clamp(8px, 7.3077px + .1923vw, 10px);--spacing-grid-gap: calc(2 * var(--spacing-layout-gutter));--text-xs: clamp(13px, 12.6538px + .0962vw, 14px);--text-sm: clamp(14px, 12.9615px + .2885vw, 17px);--leading-none: 1;--leading-tight: 1.05;--leading-normal: 1.25;--leading-loose: 1.5;--tracking-widest: .05em;--tracking-wider: .025em;--tracking-wide: .001em;--tracking-none: 0;--tracking-tight: -.01em;--tracking-tighter: -.02em;--tracking-tightest: -.04em;--font-sans: "Univers", sans-serif;--font-mono: "Typewriter", monospace;--measure-xs: 30ch;--measure-s: 40ch;--measure-m: 55ch;--measure-l: 75ch;--measure-xl: 80ch;--measure-2xl: 100ch;--font-weight-regular: 400;--font-weight-medium: 600;--ease-in-out: cubic-bezier(.4, 0, .2, 1);--duration-fast: .15s;--duration-slow: .4s;--aspect-square: 1 / 1;--aspect-wide: 16 / 9;--radius-xs: 1px;--radius-sm: 2px;--radius-full: 9999px;--backdrop-filter: blur(10px);--z-index-tooltip-hover-target: 90;--z-index-tooltip: 100;--z-index-control-elements: 200}@media(prefers-color-scheme:dark){:root{--color-text-primary: rgb(var(--base-color-white));--color-text-secondary: rgba(var(--base-color-white), 50%);--color-text-inverted-primary: rgb(var(--base-color-black));--color-text-inverted-secondary: rgba(var(--base-color-black), 50%);--color-bg-primary: rgb(var(--base-color-black));--color-bg-secondary: rgb(var(--base-color-grey-900));--color-bg-inverted-primary: rgb(var(--base-color-white));--color-bg-inverted-secondary: rgb(var(--base-color-grey-100));--color-bg-inverted-tertiary: rgba(var(--base-color-white), 20%);--color-overlay: rgba(var(--base-color-white), 8%);--color-overlay-inverted: rgba(var(--base-color-white), 80%);--color-border-default: rgba(var(--base-color-white), 20%);--color-border-focus: rgba(var(--base-color-white), 70%)}}body{padding:0;overflow-x:hidden;background:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:where(.text-xs){font-size:var(--text-xs);letter-spacing:var(--tracking-wider);line-height:var(--leading-normal)}:where(.text-sm){font-size:var(--text-sm);letter-spacing:var(--tracking-wide);line-height:var(--leading-normal)}:where(.text-primary){color:var(--color-text-primary)}:where(.text-secondary){color:var(--color-text-secondary)}