feature: spatial repetition (#19) + avatars (#20) + tailwindcss (#27) (…

…#29)

* WIP: spatial repetition

* WIP: BigHead avatars

* WIP: add tailwindcss

* fix: font weight

* fix: styling

* fix: safari input issues

* feature: add bighead function

* fix: use yarn workspaces

* fix: functions

* fix: workspaces

* fix: redirects

* fix: yarn

* fix: url

* chore: cleanup toml

* fix: url bigheads

* fix: cache immutable

* fix: cache

* feature: experimenting with redirects

* i give up on caching

* fix: rounded input

* chore: upgrade bigheads dep

* better yarn start

* fix: this is better

* fix: upgrades

* fix: typescript

.eslintrc

@@ -12,5 +12,8 @@
     "node": true,
     "es6": true,
     "worker": true
+  },
+  "rules": {
+    "@typescript-eslint/no-var-requires": false
   }
 }

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 /node_modules/
 /src/node_modules/@sapper/
+/functions/svg/node_modules/
 yarn-error.log
 /__sapper__/
 

functions/bigheads.js

@@ -0,0 +1,99 @@
+// source: https://github.com/RobertBroersma/bigheads/tree/main/site/functions/svg
+const React = require("react");
+const RDS = require("react-dom/server");
+const seedrandom = require("seedrandom");
+
+const {
+  BigHead,
+  theme,
+  eyesMap,
+  eyebrowsMap,
+  mouthsMap,
+  hairMap,
+  facialHairMap,
+  clothingMap,
+  accessoryMap,
+  graphicsMap,
+  hatMap,
+  bodyMap,
+} = require("@bigheads/core");
+
+function getRandomOptions(rng) {
+  function selectRandomKey(object) {
+    return Object.keys(object)[Math.floor(rng() * Object.keys(object).length)];
+  }
+
+  const skinTone = selectRandomKey(theme.colors.skin);
+  const eyes = selectRandomKey(eyesMap);
+  const eyebrows = selectRandomKey(eyebrowsMap);
+  const mouth = selectRandomKey(mouthsMap);
+  const hair = selectRandomKey(hairMap);
+  const facialHair = selectRandomKey(facialHairMap);
+  const clothing = selectRandomKey(clothingMap);
+  const accessory = selectRandomKey(accessoryMap);
+  const graphic = selectRandomKey(graphicsMap);
+  const hat = selectRandomKey(hatMap);
+  const body = selectRandomKey(bodyMap);
+
+  const hairColor = selectRandomKey(theme.colors.hair);
+  const clothingColor = selectRandomKey(theme.colors.clothing);
+  const circleColor = selectRandomKey(theme.colors.bgColors);
+  const lipColor = selectRandomKey(theme.colors.lipColors);
+  const hatColor = selectRandomKey(theme.colors.clothing);
+
+  const mask = true;
+  const lashes = rng() > 0.5;
+
+  return {
+    skinTone,
+    eyes,
+    eyebrows,
+    mouth,
+    hair,
+    facialHair,
+    clothing,
+    accessory,
+    graphic,
+    hat,
+    body,
+    hairColor,
+    clothingColor,
+    circleColor,
+    lipColor,
+    hatColor,
+    mask,
+    lashes,
+  };
+}
+
+// Docs on event and context https://www.netlify.com/docs/functions/#the-handler-method
+exports.handler = async (event) => {
+  try {
+    const { seed, ...props } = event.queryStringParameters;
+
+    const rng = seed ? seedrandom(seed) : Math.random;
+
+    const mergedProps = {
+      ...getRandomOptions(rng),
+      ...props,
+    };
+
+    const avatarString = RDS.renderToString(
+      React.createElement(BigHead, mergedProps)
+    );
+
+    const headers = {
+      "Content-Type": "image/svg+xml",
+    };
+
+    if (seed) headers["Cache-Control"] = "max-age=0, must-revalidate, public";
+
+    return {
+      statusCode: 200,
+      body: avatarString,
+      headers,
+    };
+  } catch (err) {
+    return { statusCode: 500, body: err.toString() };
+  }
+};

functions/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "bigheads-svg",
+  "version": "1.0.0",
+  "dependencies": {
+    "@bigheads/core": "^0.3.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "seedrandom": "^3.0.5"
+  }
+}

netlify.toml

@@ -1,21 +1,8 @@
-# example netlify.toml
 [build]
   command = "npm run export"
   functions = "functions"
   publish = "__sapper__/export"
 
-  ## Uncomment to use this redirect for Single Page Applications like create-react-app. 
-  ## Not needed for static site generators.
-  #[[redirects]]
-  #  from = "/*"
-  #  to = "/index.html"
-  #  status = 200
-
-  ## (optional) Settings for Netlify Dev
-  ## https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
-  #[dev] 
-  #  command = "yarn start" # Command to start your dev server
-  #  port = 3000 # Port that the dev server will be listening on
-  #  publish = "dist" # Folder with the static content for _redirect file
-
-  ## more info on configuring this file: https://www.netlify.com/docs/netlify-toml-reference/ 
+[[redirects]]
+  from = "/bigheads"
+  to = "/.netlify/functions/bigheads"