[
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"deno.enable\": true,\n  \"deno.lint\": true,\n  \"deno.unstable\": true\n}\n"
  },
  {
    "path": "avatars/Avatar1.tsx",
    "content": "/** @jsx h */\nimport { h } from \"../deps.ts\";\n\nexport function Avatar1(bgColor: string, denoColor: string[]) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"112\"\n      height=\"112\"\n      viewBox=\"0 0 112 112\"\n    >\n      <title>Deno Avatar</title>\n      <g>\n        <rect width=\"112\" height=\"112\" fill={bgColor} />\n        <path\n          d=\"M77.4624 78.9593C78.2802 68.3428 73.7143 58.8833 71.3291 55.4806L87.6847 48.335C92.5913 49.9683 94.1587 65.6887 94.3291 73.3448C94.3291 73.3448 90.7513 73.8552 88.7069 75.3864C86.6219 76.948 83.0847 80.4905 77.4624 78.9593Z\"\n          fill=\"white\"\n          stroke=\"#84B5D9\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M86.4336 58C87.3281 58 88.3914 58 88.3914 61C91.0574 61.9999 91.3914 67.5 85.3914 70C80.5914 72 79.3914 67.8333 79.3914 65.5C77.9336 64.5 77.6336 62.3 78.4336 61.5C79.2336 60.7 81.3914 61.5 81.8914 62.5L84.8914 61C84.3914 60.5 84.9336 58 86.4336 58H86.4336Z\"\n          fill=\"#B1DEFF\"\n        />\n        <path\n          d=\"M7.06239 52.159C-5.55748 54.1782 -12.682 66.0659 -17.661 73.2769C-18.5194 86.6687 -18.2791 114.379 -10.45 118.088C-2.62094 121.797 16.5053 119.633 25.0898 118.088V122.209C26.4634 122.724 30.1375 123.857 33.846 124.269C37.5545 124.681 40.542 123.067 41.5721 122.209V112.422C42.0872 112.079 44.5595 110.465 50.3283 106.756C57.5393 102.121 61.6598 90.274 60.1146 82.0331C58.9557 75.8521 63.7201 63.4904 66.2955 55.2493C76.0818 57.3094 88.4435 54.2192 89.4736 40.3124C90.1205 31.5801 80.7174 19.9868 63.2051 25.3752C45.6927 30.7636 48.268 52.159 41.5721 59.37C35.3913 53.1891 23.5446 49.5219 7.06239 52.159Z\"\n          fill={denoColor[0]}\n          stroke={denoColor[2]}\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M66.2955 55.2493C64.5786 54.7342 60.9387 53.6011 60.1146 53.189\"\n          stroke={denoColor[1]}\n          stroke-opacity=\"0.37\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M41.5721 59.3698C40.8853 60.2283 38.8937 62.1512 36.4214 62.9753\"\n          stroke={denoColor[1]}\n          stroke-opacity=\"0.37\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n        <circle cx=\"68.8708\" cy=\"42.8876\" r=\"2.06028\" fill=\"black\" />\n      </g>\n    </svg>\n  );\n}\n"
  },
  {
    "path": "avatars/Avatar2.tsx",
    "content": "/** @jsx h */\nimport { h } from \"../deps.ts\";\n\nexport function Avatar2(bgColor: string, denoColor: string[]) {\n  return (\n    <svg\n      width=\"112\"\n      height=\"112\"\n      viewBox=\"0 0 112 112\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <g>\n        <rect width=\"112\" height=\"112\" fill={bgColor} />\n        <path\n          d=\"M47 85.5C37 97 35.5 112.667 36 122C44.6667 121.333 85.4 124 117 122C115 115.5 109 101.591 99 92.5C89 83.4091 69.5075 79.2671 69.5 79C69.1667 67.1667 67 49.2052 67 42.5C67 30 59 23.5 47 23.5C35 23.5 25.5 30 25.5 40.5C25.5 51.0001 37 56 47 56V85.5Z\"\n          fill={denoColor[0]}\n          stroke={denoColor[2]}\n          stroke-width=\"3\"\n        />\n        <path\n          d=\"M47 56C47.8333 56 49.8 55.8 51 55\"\n          stroke={denoColor[1]}\n          stroke-opacity=\"0.51\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n        <circle cx=\"45.5\" cy=\"41.5\" r=\"2.5\" fill=\"black\" />\n        <path\n          d=\"M71.3292 86.3416C72.0701 86.7121 72.9712 86.4118 73.3416 85.6708C73.7121 84.9299 73.4118 84.0288 72.6708 83.6584L71.3292 86.3416ZM68.0062 78.6358C68.0965 79.6295 68.3373 81.1631 68.7805 82.5841C69.002 83.2942 69.2896 84.0274 69.665 84.6654C70.0275 85.2814 70.5572 85.9556 71.3292 86.3416L72.6708 83.6584C72.6428 83.6444 72.4809 83.5353 72.2506 83.144C72.0333 82.7746 71.8272 82.2767 71.6445 81.6909C71.2794 80.5203 71.0702 79.2039 70.9938 78.3642L68.0062 78.6358Z\"\n          fill={denoColor[1]}\n          fill-opacity=\"0.5\"\n        />\n      </g>\n    </svg>\n  );\n}\n"
  },
  {
    "path": "avatars/Avatar3.tsx",
    "content": "/** @jsx h */\nimport { h } from \"../deps.ts\";\n\nexport function Avatar3(bgColor: string, denoColor: string[]) {\n  return (\n    <svg\n      width=\"112\"\n      height=\"112\"\n      viewBox=\"0 0 112 112\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <rect width=\"112\" height=\"112\" fill={bgColor} />\n      <path\n        d=\"M90.8774 29.6973C83.4736 21.9038 72.9525 28.1385 69.4454 32.8146C56.5862 29.6973 51 29.6973 43.5 39.5C40.3232 43.6521 36.8968 37.162 33 39.5C32.3766 41.9939 38.4544 51.2985 41.0522 51.4284C41.0522 51.4284 41.4418 59.6115 46.1179 64.2876C51.5314 69.7011 57.0288 67.7947 58.5875 69.3534C60.1461 70.912 61.2623 71.3923 65.5487 72.1716C69.8351 72.951 78.0182 67.405 74.9008 64.2876C76.8492 63.8979 79.1872 63.5988 80.7459 62.8195C82.6943 66.3265 90.8774 62.2521 90.8774 58.9227C90.8774 55.026 84.253 49.8697 82.3046 47.9213C93.1222 47.9213 98.8501 38.0895 90.8774 29.6973Z\"\n        fill={denoColor[0]}\n        stroke={denoColor[2]}\n        stroke-width=\"3\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M82.7472 48.311C81.1885 48.311 77.6035 47.8434 75.7331 45.973\"\n        stroke={denoColor[1]}\n        stroke-opacity=\"0.5\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n      />\n      <path\n        d=\"M55.0804 63.1186C55.9896 65.1968 58.1978 69.5872 59.7565 70.5224\"\n        stroke={denoColor[1]}\n        stroke-opacity=\"0.5\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n      />\n      <circle cx=\"81.9149\" cy=\"37.1011\" r=\"1.94837\" fill=\"black\" />\n      <circle cx=\"88.1497\" cy=\"32.425\" r=\"1.94837\" fill=\"black\" />\n      <path\n        d=\"M64.7762 46.1724C57.3724 38.379 47.2409 44.2241 43.7338 48.9001C32.0436 43.8344 25.129 46.3632 19.1844 58.2523C16.8464 62.9284 12.9497 62.9284 9.05292 65.2664C8.42944 67.7603 13.4692 68.6436 16.067 68.7735C16.067 68.7735 16.4567 76.9566 21.1328 81.6327C26.5463 87.0462 32.0436 85.1398 33.6023 86.6984C35.161 88.2571 37.1094 92.1539 41.3958 92.9332C45.6822 93.7126 51.5273 87.4778 48.4099 84.3604C50.3582 83.9707 51.5273 82.412 53.086 81.6327C55.0343 85.1398 63.9968 83.4034 63.9968 80.074C63.9968 76.1773 58.5414 67.6045 56.593 65.6561C67.4106 65.6561 72.7488 54.5647 64.7762 46.1724Z\"\n        fill={denoColor[0]}\n        stroke={denoColor[2]}\n        stroke-width=\"3\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M57.762 65.6561C56.2033 65.6561 52.6184 65.1885 50.7479 63.3181\"\n        stroke={denoColor[1]}\n        stroke-opacity=\"0.5\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n      />\n      <path\n        d=\"M30.0952 80.4637C31.0045 82.5419 33.2126 86.9323 34.7713 87.8675\"\n        stroke={denoColor[1]}\n        stroke-opacity=\"0.5\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n      />\n      <circle cx=\"54.6447\" cy=\"54.3556\" r=\"1.94837\" fill=\"black\" />\n      <circle cx=\"63.2175\" cy=\"51.2382\" r=\"1.94837\" fill=\"black\" />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "avatars/Avatar4.tsx",
    "content": "/** @jsx h */\nimport { h } from \"../deps.ts\";\n\nexport function Avatar4(bgColor: string, denoColor: string[]) {\n  return (\n    <svg\n      width=\"112\"\n      height=\"112\"\n      viewBox=\"0 0 112 112\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <g>\n        <rect width=\"112\" height=\"112\" fill={bgColor} />\n        <path\n          d=\"M57.4486 37.9912C38.7446 33.862 25 43.1171 25 56.7861C25 71.8221 44.034 79.6015 54 81.5C56.3616 93.6977 61.076 122.056 57.4486 138.8C53.8211 155.545 60.9437 190.202 64.9585 205.437C79.9783 206.291 112.342 208 121.637 208C133.256 208 146.434 195.185 151.11 195.755C154.851 196.21 173.262 191.863 182 189.632C171.845 188.113 151.45 180.804 151.11 163.718C150.685 142.36 107.468 117.87 100.949 114.88C94.4314 111.889 89.7554 82.2732 88.3384 69.6009C86.9215 56.9285 76.1525 42.1204 57.4486 37.9912Z\"\n          fill={denoColor[0]}\n          stroke={denoColor[2]}\n          stroke-width=\"3\"\n        />\n        <path\n          d=\"M54 81.5C58.5 82.5 62.5 81.5 64.5 80.5\"\n          stroke={denoColor[1]}\n          stroke-opacity=\"0.5\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M57.2623 42.5388C60.3256 42.8883 63.3566 42.5699 65.7717 41.2101C68.2623 39.8077 69.9276 37.39 70.3185 33.9636C70.7095 30.5372 69.6316 27.8065 67.5209 25.8791C65.4742 24.0102 62.5928 23.0172 59.5295 22.6677C56.4116 22.312 53.3706 22.7797 50.9712 24.1987C48.5257 25.6449 46.8395 28.0325 46.4732 31.2429C46.1069 34.4534 47.2119 37.1594 49.2688 39.1194C51.2869 41.0424 54.1444 42.1831 57.2623 42.5388Z\"\n          fill=\"#FFB26B\"\n          stroke=\"#E17D21\"\n          stroke-width=\"3\"\n        />\n        <path\n          d=\"M57.3395 18.8952L63.0951 19.5519C64.3255 20.6913 66.2684 22.9111 64.1964 22.6747C61.6064 22.3792 62.3862 25.765 61.1498 23.8256C59.9135 21.8863 57.883 24.352 56.8332 23.3331C55.9933 22.518 54.6772 21.7884 54.1242 21.5255L57.3395 18.8952Z\"\n          fill=\"#53B356\"\n        />\n        <path\n          d=\"M51 58L43 55\"\n          stroke=\"black\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n        <path\n          d=\"M33 50.5L28 48\"\n          stroke=\"black\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </g>\n    </svg>\n  );\n}\n"
  },
  {
    "path": "deno.json",
    "content": "{\n  \"tasks\": {\n    \"start\": \"deno run -A --watch main.tsx\"\n  }\n}\n"
  },
  {
    "path": "deps.ts",
    "content": "export {\n  h,\n  jsx,\n  serve,\n  serveStatic,\n} from \"https://deno.land/x/sift@0.6.0/mod.ts\";\n"
  },
  {
    "path": "main.tsx",
    "content": "/** @jsx h */\nimport { h, jsx, serve, serveStatic } from \"./deps.ts\";\nimport { Avatar1 } from \"./avatars/Avatar1.tsx\";\nimport { Avatar2 } from \"./avatars/Avatar2.tsx\";\nimport { Avatar3 } from \"./avatars/Avatar3.tsx\";\nimport { Avatar4 } from \"./avatars/Avatar4.tsx\";\nimport { calcChecksum, Random } from \"./util.ts\";\n\ninterface IconProps {\n  seed: string;\n}\n\n// taken from tailwind color pallete: 100\nconst bgColors = [\n  \"#fee2e2\",\n  \"#ffedd5\",\n  \"#fef3c7\",\n  \"#fef9c3\",\n  \"#ecfccb\",\n  \"#dcfce7\",\n  \"#d1fae5\",\n  \"#ccfbf1\",\n];\n\n// taken from tailwind color pallete: 200, 600, 900\nconst denoColors = [\n  [\"#fecaca\", \"#dc2626\", \"#7f1d1d\"],\n  [\"#d9f99d\", \"#65a30d\", \"#365314\"],\n  [\"#a7f3d0\", \"#059669\", \"#064e3b\"],\n  [\"#bae6fd\", \"#0284c7\", \"#0c4a6e\"],\n  [\"#ddd6fe\", \"#7c3aed\", \"#4c1d95\"],\n];\nconst components = [\n  Avatar1,\n  Avatar2,\n  Avatar3,\n  Avatar4,\n];\n\nconst Icon = (props: IconProps) => {\n  if (props.seed === undefined) {\n    props.seed = \"\";\n  }\n  const checksum = calcChecksum(props.seed);\n  const rand = new Random(checksum);\n  const bgColor = bgColors[rand.nextInt(0, bgColors.length - 1)];\n  const denoColor = denoColors[rand.nextInt(0, denoColors.length - 1)];\n  const component = components[rand.nextInt(0, components.length - 1)];\n\n  return (\n    component(bgColor, denoColor)\n  );\n};\n\nconst NotFound = () => (\n  <div>\n    <h1>Page not found</h1>\n  </div>\n);\nconst now = new Date();\nnow.setDate(now.getDate() + 14);\nconst init = {\n  headers: [[\"content-type\", \"image/svg+xml\"], [\"Expires\", now.toUTCString()], [\n    \"Cache-Control\",\n    \"public, max-age=604800\",\n  ]],\n};\n\nserve({\n  \"/\": serveStatic(\"public/index.html\", { baseUrl: import.meta.url }),\n  \"/avatar/:seed\": (request, _connInfo, params) =>\n    jsx(<Icon seed={\"\" + params?.seed} />, init),\n  \"/:filename+\": serveStatic(\"public\", { baseUrl: import.meta.url }),\n  404: () => jsx(<NotFound />, { status: 404 }),\n});\n"
  },
  {
    "path": "public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link rel=\"icon\" href=\"./favicon.svg\" />\n    <title>Deno Avatar</title>\n    <meta name=\"description\" content=\"A Deno based web application to generate Deno Avatar on the fly\" />\n    <link rel=\"stylesheet\" href=\"./style.css\" />\n  </head>\n  <body>\n    <div>\n      <div class=\"card\">\n        <img class=\"cord\" src=\"./cord.svg\" alt=\"cord\">\n        <img class=\"avatar\" id=\"output\" src=\"\" alt=\"avatar\" width=\"150\" />\n        <p>\n          <button onclick=\"getRandom()\">Get Random</button>\n        </p>\n        <div>\n          <input title=\"Copy URL from here\" type=\"text\" id=\"url\" readonly>\n        </div>\n      </div>\n\n      <img class=\"logo\" src=\"./logo.svg\" alt=\"Deno Avatar Logo\">\n      <a href=\"https://github.com/hashrock/deno-avatar\" class=\"github-link\">\n      <img class=\"github-logo\" src=\"./github.svg\" alt=\"GitHub Repo\">\n      </a>\n  </div>\n\n    <script>\n      const output = document.getElementById(\"output\")\n      const url = document.getElementById(\"url\")\n\n      const getRandom = () => {\n        const random = Math.floor(Math.random() * 16777215).toString(16)\n        output.src = `./avatar/${random}.svg`\n        const outurl = new URL(output.src,document.baseURI).href;\n        url.value = outurl\n      }\n\n      getRandom()\n\n      url.onclick = () => {\n        url.select()\n      }\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "public/style.css",
    "content": "body {\n  background-color: rgb(237, 242, 245);\n  display: flex;\n  justify-content: center;\n}\nh1 {\n  font-size: 1.5rem;\n  font-weight: 500;\n  color: rgb(0, 0, 0);\n  margin-top: 3rem;\n  text-align: center;\n}\n\n.card{\n  background: white;\n  padding: 4rem 3rem 2rem 3rem;\n  margin-top: 8rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);\n  text-align: center;\n  position: relative;\n}\n\n\nbutton {\n  background: rgb(0, 0, 0);\n  border: none;\n  color: white;\n  padding: 0.75rem 1rem;\n  border-radius: 0.5rem;\n  cursor: pointer;\n}\n\n#url{\n  font-size: inherit;\n  width: 400px;\n  border: solid 1px #d1d1d1;\n  padding: 0.5rem;\n  border-radius: 4px;\n  text-align: center;\n  color: #666;\n}\n\n.cord{\n  position: absolute;\n  top: -100%;\n  width: 300px;\n  left: calc(50% - 150px);\n  height: 400px;\n}\n\n.avatar{\n  border-radius: 100%;\n}\n\n.logo{\n  margin: 6rem auto 0 auto;\n  display: block;\n}\n\n.github-logo{\n  display: block;\n  width: 1.8rem;\n}\n\n.github-link{\n  margin: 1rem auto 0 auto;\n  display: block;\n  width: 1.8rem;\n}"
  },
  {
    "path": "util.ts",
    "content": "// XorShift by kotofurumiya\n// https://sbfl.net/blog/2017/06/01/javascript-reproducible-random/\nexport class Random {\n  x: number;\n  y: number;\n  z: number;\n  w: number;\n\n  constructor(seed = 88675123) {\n    this.x = 123456789;\n    this.y = 362436069;\n    this.z = 521288629;\n    this.w = seed;\n  }\n\n  // XorShift\n  next() {\n    const t = this.x ^ (this.x << 11);\n    this.x = this.y;\n    this.y = this.z;\n    this.z = this.w;\n    return this.w = (this.w ^ (this.w >>> 19)) ^ (t ^ (t >>> 8));\n  }\n\n  nextInt(min: number, max: number) {\n    const r = Math.abs(this.next());\n    return min + (r % (max + 1 - min));\n  }\n}\n\nexport function calcChecksum(str: string) {\n  let checksum = 0;\n  for (let i = 0; i < str.length; i++) {\n    checksum += str.charCodeAt(i);\n  }\n  return checksum;\n}\n"
  }
]