add new elm-land website

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

.gitignore

@@ -1,4 +1,7 @@
-# elm-package generated files
+/dist
-elm-stuff
+/.elm-land
-# elm-repl generated files
+/.env
-repl-temp-*
+/elm-stuff
+/node_modules
+.DS_Store
+*.pem

README.md

@@ -0,0 +1 @@
+# My personal website

elm-land.json

@@ -0,0 +1,61 @@
+{
+  "app": {
+    "elm": {
+      "development": {
+        "debugger": true
+      },
+      "production": {
+        "debugger": false
+      }
+    },
+    "env": [],
+    "html": {
+      "attributes": {
+        "html": {
+          "lang": "en",
+          "class": "bg-neutral-800"
+        },
+        "head": {},
+        "body": {}
+      },
+      "title": "Avinal | Personal Website",
+      "meta": [
+        {
+          "charset": "UTF-8"
+        },
+        {
+          "http-equiv": "X-UA-Compatible",
+          "content": "IE=edge"
+        },
+        {
+          "name": "viewport",
+          "content": "width=device-width, initial-scale=1.0"
+        }
+      ],
+      "link": [
+        {
+          "rel": "stylesheet",
+          "href": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css",
+          "integrity": "sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==",
+          "crossorigin": "anonymous",
+          "referrerpolicy": "no-referrer"
+        },
+        {
+          "rel": "stylesheet",
+          "href": "/main.css"
+        }
+      ],
+      "script": [
+        {
+          "src": "https://cdn.jsdelivr.net/npm/marked/marked.min.js"
+        },
+        {
+          "src": "/js/redirect.js"
+        }
+      ]
+    },
+    "router": {
+      "useHashRouting": false
+    }
+  }
+}

elm.json

@@ -1,7 +1,8 @@
 {
     "type": "application",
     "source-directories": [
-        "src"
+        "src",
+        ".elm-land/src"
     ],
     "elm-version": "0.19.1",
     "dependencies": {
@@ -12,21 +13,20 @@
             "elm/html": "1.0.0",
             "elm/http": "2.0.0",
             "elm/json": "1.1.3",
-            "elm/parser": "1.1.0",
+            "elm/svg": "1.0.1",
+            "elm/time": "1.0.0",
             "elm/url": "1.0.0"
         },
         "indirect": {
             "elm/bytes": "1.0.8",
             "elm/file": "1.0.5",
+            "elm/parser": "1.1.0",
             "elm/regex": "1.0.0",
-            "elm/time": "1.0.0",
             "elm/virtual-dom": "1.0.3"
         }
     },
     "test-dependencies": {
         "direct": {},
-        "indirect": {
+        "indirect": {}
-            "rtfeldman/elm-hex": "1.0.0"
-        }
     }
 }

package-lock.json

@@ -0,0 +1,848 @@
+{
+  "name": "avinal.github.io",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "devDependencies": {
+        "@tailwindcss/typography": "^0.5.8",
+        "tailwindcss": "^3.2.4"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
+      "integrity": "sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/defined": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/detective": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+      "dev": true,
+      "dependencies": {
+        "acorn-node": "^1.8.2",
+        "defined": "^1.0.0",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "detective": "bin/detective.js"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
+      "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "dev": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.20",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
+      "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dev": true,
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
+      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
+      "dev": true,
+      "dependencies": {
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "color-name": "^1.1.4",
+        "detective": "^5.2.1",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "lilconfig": "^2.0.6",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.18",
+        "postcss-import": "^14.1.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.4",
+        "postcss-nested": "6.0.0",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.22.1"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.8",
+    "tailwindcss": "^3.2.4"
+  }
+}

src/Layouts/Blog.elm

@@ -0,0 +1,101 @@
+module Layouts.Blog exposing (Model, Msg, Settings, layout)
+
+import Effect exposing (Effect)
+import Html exposing (Html)
+import Html.Attributes exposing (class, href)
+import Layout exposing (Layout)
+import Route exposing (Route)
+import Shared
+import Utils.Constants exposing (..)
+import View exposing (View)
+
+
+type alias Settings =
+    {}
+
+
+layout : Settings -> Shared.Model -> Route () -> Layout Model Msg mainMsg
+layout settings shared route =
+    Layout.new
+        { init = init settings
+        , update = update
+        , view = view
+        , subscriptions = subscriptions
+        }
+
+
+
+-- MODEL
+
+
+type alias Model =
+    {}
+
+
+init : Settings -> () -> ( Model, Effect Msg )
+init settings _ =
+    ( {}
+    , Effect.none
+    )
+
+
+
+-- UPDATE
+
+
+type Msg
+    = NoOp
+
+
+update : Msg -> Model -> ( Model, Effect Msg )
+update msg model =
+    case msg of
+        NoOp ->
+            ( model, Effect.none )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+    Sub.none
+
+
+
+-- VIEW
+
+
+blogTheme : String
+blogTheme =
+    "mt-4 prose prose-invert mx-auto lg:prose-lg prose-a:decoration-cyan-500 hover:prose-a:decoration-pink-500"
+
+
+view : { fromMsg : Msg -> mainMsg, content : View mainMsg, model : Model } -> View mainMsg
+view { fromMsg, model, content } =
+    { title = content.title
+    , body =
+        let
+            footerLinkToLeft : Link -> Html msg
+            footerLinkToLeft link =
+                Html.li []
+                    [ Html.a
+                        [ href link.url
+                        , class "mr-4 md:mr-6 underline decoration-cyan-500 hover:decoration-pink-500"
+                        ]
+                        [ Html.text link.text ]
+                    ]
+        in
+        [ Html.div [ class "min-h-screen py-4 flex flex-col justify-center relative overflow-hidden " ]
+            [ Html.div [ class "relative w-full py-4 bg-neutral  md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pb-28" ]
+                [ Html.article [ class blogTheme ]
+                    content.body
+                ]
+            ]
+        , Html.div [ class "fixed bottom-0 left-0 bg-neutral-900 z-20 p-4 w-full md:flex md:items-center md:justify-between md:p-4" ]
+            [ Html.ul
+                [ class "flex flex-wrap items-center mt-3 text-xl text-neutral-500 sm:mt-0" ]
+                (List.map footerLinkToLeft <|
+                    { text = "Home", url = "/" }
+                        :: Utils.Constants.footerLinks
+                )
+            ]
+        ]
+    }

src/Layouts/Home.elm

@@ -0,0 +1,95 @@
+module Layouts.Home exposing (Model, Msg, Settings, layout)
+
+import Effect exposing (Effect)
+import Html exposing (Html)
+import Html.Attributes exposing (class, href)
+import Layout exposing (Layout)
+import Route exposing (Route)
+import Shared
+import Utils.Constants exposing (..)
+import View exposing (View)
+
+
+type alias Settings =
+    {}
+
+
+layout : Settings -> Shared.Model -> Route () -> Layout Model Msg mainMsg
+layout settings shared route =
+    Layout.new
+        { init = init
+        , update = update
+        , view = view
+        , subscriptions = subscriptions
+        }
+
+
+
+-- MODEL
+
+
+type alias Model =
+    {}
+
+
+init : () -> ( Model, Effect Msg )
+init _ =
+    ( {}
+    , Effect.none
+    )
+
+
+
+-- UPDATE
+
+
+type Msg
+    = ReplaceMe
+
+
+update : Msg -> Model -> ( Model, Effect Msg )
+update msg model =
+    case msg of
+        ReplaceMe ->
+            ( model
+            , Effect.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+    Sub.none
+
+
+
+-- VIEW
+
+
+view : { fromMsg : Msg -> mainMsg, content : View mainMsg, model : Model } -> View mainMsg
+view { fromMsg, model, content } =
+    let
+        footerLinkToCenter : Link -> Html msg
+        footerLinkToCenter link =
+            Html.a
+                [ href link.url
+                , class "underline decoration-cyan-500 hover:decoration-pink-500 inline-flex text-xl p-3"
+                ]
+                [ Html.text link.text ]
+
+        iconLinkToCenter : IconLink -> Html msg
+        iconLinkToCenter iconLink =
+            Html.a [ href iconLink.url, class " hover:text-pink-500 inline-flex text-2xl p-3" ]
+                [ Html.i [ class iconLink.icon ] [] ]
+    in
+    { title = content.title
+    , body =
+        [ Html.section [ class "flex items-center justify-center flex-col h-screen text-neutral-400" ]
+            [ Html.header [ class "object-cover object-center p-8" ] content.body
+            , Html.div [ class "flex justify-center flex-wrap" ]
+                (List.map iconLinkToCenter Utils.Constants.iconLinks)
+            , Html.div [ class "text-center text-xl p-2" ] [ Html.text "I'm Avinal and I work at Red Hat as an Associate Software Engineer for Hybrid Cloud Engineering." ]
+            , Html.footer [ class "flex justify-center flex-wrap" ]
+                (List.map footerLinkToCenter Utils.Constants.footerLinks)
+            ]
+        ]
+    }

src/Pages/Home_.elm

@@ -0,0 +1,317 @@
+module Pages.Home_ exposing (Model, Msg, page)
+
+import Array exposing (Array)
+import Effect exposing (Effect)
+import Html exposing (Html)
+import Html.Events exposing (onClick, onMouseLeave)
+import Layouts
+import Page exposing (Page)
+import Route exposing (Route)
+import Shared
+import Svg exposing (..)
+import Svg.Attributes as SA
+import Svg.Events as SE
+import Time
+import Utils.Constants exposing (nameMatrix)
+import View exposing (View)
+
+
+page : Shared.Model -> Route () -> Page Model Msg
+page model route =
+    Page.new
+        { init = init
+        , update = update
+        , subscriptions = subscriptions
+        , view = view
+        }
+        |> Page.withLayout layout
+
+
+
+-- LAYOUT
+
+
+layout : Model -> Layouts.Layout
+layout model =
+    Layouts.Home
+        { home = {}
+        }
+
+
+
+-- INIT
+
+
+type Cell
+    = Alive
+    | Dead
+
+
+type alias Universe a =
+    { space : Array a
+    , width : Int
+    , height : Int
+    }
+
+
+type alias Model =
+    { universe : Universe Cell
+    , generations : Int
+    , generating : Bool
+    }
+
+
+cellSize =
+    10
+
+
+init : () -> ( Model, Effect Msg )
+init () =
+    ( { universe = bigBang 30 30 Dead
+      , generating = False
+      , generations = 0
+      }
+    , Effect.none
+    )
+
+
+
+-- UPDATE
+
+
+type Msg
+    = Ressurect Int Int
+    | NextGeneration
+    | LiveLife
+    | Apocalypse
+
+
+update : Msg -> Model -> ( Model, Effect Msg )
+update msg model =
+    case msg of
+        Ressurect x y ->
+            ( { model
+                | universe =
+                    buildRelationship model.universe
+                        x
+                        y
+                        invertLife
+              }
+            , Effect.none
+            )
+
+        NextGeneration ->
+            let
+                universe =
+                    nextGeneration model.universe
+
+                generations =
+                    model.generations + 1
+
+                generating =
+                    model.generating && universe /= model.universe
+            in
+            ( { model
+                | universe = universe
+                , generations = generations
+                , generating = generating
+              }
+            , Effect.none
+            )
+
+        LiveLife ->
+            ( { model | generating = not model.generating }
+            , Effect.none
+            )
+
+        Apocalypse ->
+            ( { model | generating = False }
+            , Effect.none
+            )
+
+
+
+-- SUBSCRIPTIONS
+
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+    if model.generating then
+        Time.every 500 (always NextGeneration)
+
+    else
+        Sub.none
+
+
+
+-- VIEW
+
+
+view : Model -> View Msg
+view model =
+    { title = "Be my SpaceTime"
+    , body = [ Html.div [ onClick LiveLife, onMouseLeave LiveLife ] [ universeSvg model ] ]
+    }
+
+
+cellToSvg : Int -> Int -> Cell -> Svg Msg
+cellToSvg x y cell =
+    let
+        isName =
+            if Array.get ((y - 12) * 24 + x - 3) nameMatrix == Just 1 && x >= 3 && x < 27 then
+                True
+
+            else
+                False
+
+        color =
+            case cell of
+                Alive ->
+                    if isName then
+                        "fill-cyan-500"
+
+                    else
+                        "fill-pink-500"
+
+                Dead ->
+                    "fill-neutral-800"
+    in
+    rect
+        [ SA.x (String.fromInt (x * cellSize))
+        , SA.y (String.fromInt (y * cellSize))
+        , SA.width (String.fromInt cellSize)
+        , SA.height (String.fromInt cellSize)
+        , SA.class color
+        , SE.onMouseOver (Ressurect x y)
+        ]
+        []
+
+
+universeSvg : Model -> Html Msg
+universeSvg model =
+    let
+        svgWidth =
+            String.fromInt (model.universe.width * cellSize)
+
+        svgHeight =
+            String.fromInt (model.universe.height * cellSize)
+    in
+    svg
+        [ SA.width "150"
+        , SA.height "150"
+        , SA.viewBox ("0 0 " ++ svgWidth ++ " " ++ svgHeight)
+        , SA.class "stroke-0"
+        ]
+        (stretchUniverseThin cellToSvg model.universe)
+
+
+
+-- UTIL
+
+
+bigBang : Int -> Int -> a -> Universe a
+bigBang width height value =
+    { space = Array.repeat (width * height) value
+    , width = width
+    , height = height
+    }
+
+
+stretchUniverseThin : (Int -> Int -> a -> b) -> Universe a -> List b
+stretchUniverseThin f universe =
+    Array.toIndexedList universe.space
+        |> List.map (\( i, cell ) -> f (modBy universe.width i) (i // universe.width) cell)
+
+
+nextGeneration : Universe Cell -> Universe Cell
+nextGeneration universe =
+    { universe
+        | space =
+            Array.indexedMap
+                (decideFateOf universe)
+                universe.space
+    }
+
+
+decideFateOf : Universe Cell -> Int -> Cell -> Cell
+decideFateOf u i today =
+    let
+        aliveAtoms =
+            countLiveAtoms i u
+    in
+    case today of
+        Alive ->
+            if aliveAtoms < 2 || aliveAtoms > 3 then
+                Dead
+
+            else
+                Alive
+
+        Dead ->
+            if aliveAtoms == 3 then
+                Alive
+
+            else
+                Dead
+
+
+buildRelationship : Universe a -> Int -> Int -> (a -> a) -> Universe a
+buildRelationship universe x y fn =
+    case getUniverseAt x y universe of
+        Just cell ->
+            setUniverseAt x y (fn cell) universe
+
+        Nothing ->
+            universe
+
+
+getUniverseAt : Int -> Int -> Universe a -> Maybe a
+getUniverseAt x y u =
+    Array.get (y * u.width + x) u.space
+
+
+setUniverseAt : Int -> Int -> a -> Universe a -> Universe a
+setUniverseAt x y value u =
+    { u | space = Array.set (y * u.width + x) value u.space }
+
+
+countLiveAtoms : Int -> Universe Cell -> Int
+countLiveAtoms i universe =
+    let
+        above =
+            i - universe.width
+
+        below =
+            i + universe.width
+
+        coordinate =
+            [ above - 1
+            , above
+            , above + 1
+            , i - 1
+            , i + 1
+            , below - 1
+            , below
+            , below + 1
+            ]
+    in
+    coordinate
+        |> List.filter
+            (\n ->
+                abs
+                    (modBy universe.width n - modBy universe.width i)
+                    <= 1
+            )
+        |> List.map (\c -> universe.space |> Array.get c)
+        |> List.filter (\c -> c == Just Alive)
+        |> List.length
+
+
+invertLife : Cell -> Cell
+invertLife cell =
+    case cell of
+        Alive ->
+            Dead
+
+        Dead ->
+            Alive

src/Pages/Posts.elm

@@ -0,0 +1,199 @@
+module Pages.Posts exposing (Model, Msg, page)
+
+import Effect exposing (Effect)
+import Html exposing (Html)
+import Html.Attributes exposing (class, href, src)
+import Http
+import Json.Decode as Json
+import Page exposing (Page)
+import Route exposing (Route)
+import Shared
+import Url exposing (Protocol(..))
+import Utils.Constants exposing (..)
+import Utils.Utils as UU
+import View exposing (View)
+
+
+page : Shared.Model -> Route () -> Page Model Msg
+page shared route =
+    Page.new
+        { init = init
+        , update = update
+        , subscriptions = subscriptions
+        , view = view
+        }
+
+
+
+-- INIT
+
+
+type alias JsonMeta =
+    { title : String
+    , date : String
+    , description : String
+    , category : String
+    , slug : String
+    }
+
+
+type alias Model =
+    { error : Maybe String
+    , blogList : Maybe (List JsonMeta)
+    }
+
+
+init : () -> ( Model, Effect Msg )
+init () =
+    let
+        cmd : Cmd Msg
+        cmd =
+            Http.get
+                { url = "https://avinal.space/content/posts/posts.json"
+                , expect = Http.expectJson BloglistReceived (Json.list jsonMetaDecoder)
+                }
+    in
+    ( { error = Nothing
+      , blogList = Nothing
+      }
+    , Effect.sendCmd cmd
+    )
+
+
+
+-- UPDATE
+
+
+type Msg
+    = BloglistReceived (Result Http.Error (List JsonMeta))
+
+
+update : Msg -> Model -> ( Model, Effect Msg )
+update msg model =
+    case msg of
+        BloglistReceived (Ok data) ->
+            ( { model | blogList = Just data }
+            , Effect.none
+            )
+
+        BloglistReceived (Err err) ->
+            ( { model | error = Just (UU.errorToString err) }, Effect.none )
+
+
+
+-- SUBSCRIPTIONS
+
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+    Sub.none
+
+
+
+-- VIEW
+
+
+unsplash =
+    "https://source.unsplash.com/random/"
+
+
+view : Model -> View Msg
+view model =
+    let
+        taglist =
+            []
+
+        categoryNtags : String -> List String -> Html msg
+        categoryNtags category tags =
+            Html.span [ class "flex flex-wrap py-6 space-x-2 border-t border-dashed border-teal-500" ]
+                (Html.b [ class "px-3 py-1 m-1 rounded-sm hover:underline dark:bg-pink-400 dark:text-gray-900" ]
+                    [ Html.text category
+                    ]
+                    :: List.map
+                        (\tag ->
+                            Html.i [ class "px-3 py-1 m-1 rounded-sm hover:underline dark:bg-cyan-500 dark:text-gray-900" ]
+                                [ Html.text tag
+                                ]
+                        )
+                        tags
+                )
+
+        maincard : List JsonMeta -> Html msg
+        maincard bloglist =
+            case bloglist of
+                first :: rest ->
+                    Html.div [ class "max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12 mb-16" ]
+                        [ Html.a [ class "block max-w-sm gap-3 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 bg-neutral-900", href ("/posts/" ++ first.category ++ "/" ++ first.slug) ]
+                            [ Html.img [ class "object-cover w-full h-64 rounded sm:h-96 lg:col-span-7", src unsplash ] []
+                            , Html.div [ class "p-6 space-y-2 lg:col-span-5" ]
+                                [ Html.h3 [ class "text-2xl font-semibold sm:text-4xl group-hover:underline group-focus:underline" ]
+                                    [ Html.text first.title ]
+                                , Html.span [ class "text-gray-400" ] [ Html.text first.date ]
+                                , Html.p [] [ Html.text <| String.left 200 first.description ]
+                                , categoryNtags first.category taglist
+                                ]
+                            ]
+                        , Html.div [ class "grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" ] <| List.map card rest
+                        ]
+
+                [] ->
+                    Html.div [] []
+
+        card : JsonMeta -> Html msg
+        card blog =
+            Html.a [ class "max-w-sm  mx-auto group hover:no-underline focus:no-underline bg-neutral-900", href ("/posts/" ++ blog.category ++ "/" ++ blog.slug) ]
+                [ Html.img [ class "object-cover w-full h-44 rounded", src unsplash ] []
+                , Html.div [ class "p-6 space-y-2" ]
+                    [ Html.h3 [ class "text-2xl font-semibold group-hover:underline group-focus:underline" ] [ Html.text blog.title ]
+                    , Html.span [ class " text-gray-400" ] [ Html.text blog.date ]
+                    , Html.p [] [ Html.text <| String.left 200 blog.description ]
+                    , categoryNtags blog.category taglist
+                    ]
+                ]
+
+        footerLinkToLeft : Link -> Html msg
+        footerLinkToLeft link =
+            Html.li []
+                [ Html.a
+                    [ href link.url
+                    , class "mr-4 md:mr-6 underline decoration-cyan-500 hover:decoration-pink-500"
+                    ]
+                    [ Html.text link.text ]
+                ]
+    in
+    case model.blogList of
+        Just blogList ->
+            { title = "Blog by Avinal"
+            , body =
+                [ Html.section [ class "text-gray-100" ]
+                    [ maincard blogList
+                    , Html.div [ class "fixed bottom-0 left-0 bg-neutral-900 z-20 p-4 w-full md:flex md:items-center md:justify-between md:p-4" ]
+                        [ Html.ul
+                            [ class "flex flex-wrap items-center mt-3 text-xl text-neutral-500 sm:mt-0" ]
+                            (List.map footerLinkToLeft <|
+                                { text = "Home", url = "/" }
+                                    :: Utils.Constants.footerLinks
+                            )
+                        ]
+                    ]
+                ]
+            }
+
+        Nothing ->
+            { title = "Something went wrong"
+            , body = [ Html.text <| Maybe.withDefault "" model.error ]
+            }
+
+
+
+-- UTILS
+
+
+jsonMetaDecoder : Json.Decoder JsonMeta
+jsonMetaDecoder =
+    Json.map5 JsonMeta
+        (Json.field "title" Json.string)
+        (Json.field "date" Json.string)
+        (Json.field "description" Json.string)
+        (Json.field "category" Json.string)
+        (Json.field "slug" Json.string)

src/Pages/Posts/ALL_.elm

@@ -0,0 +1,195 @@
+module Pages.Posts.ALL_ exposing (Model, Msg, page)
+
+import Effect exposing (Effect)
+import Html exposing (Html)
+import Html.Attributes
+import Http
+import Layouts
+import Page exposing (Page)
+import Route exposing (Route)
+import Shared
+import Url exposing (Protocol(..))
+import Utils.Utils as UU
+import View exposing (View)
+import Yaml.Decode as Yaml
+
+
+page : Shared.Model -> Route { first_ : String, rest_ : List String } -> Page Model Msg
+page shared route =
+    Page.new
+        { init = init route
+        , update = update
+        , subscriptions = subscriptions
+        , view = view
+        }
+        |> Page.withLayout layout
+
+
+
+-- LAYOUT
+
+
+layout : Model -> Layouts.Layout
+layout model =
+    Layouts.Blog
+        { blog =
+            {}
+        }
+
+
+
+-- INIT
+
+
+type alias Model =
+    { blog : Maybe Blog
+    , requestUrl : String
+    , success : Bool
+    , fragment : String
+    , error : Maybe String
+    }
+
+
+type alias Blog =
+    { meta : YamlMeta
+    , content : String
+    }
+
+
+init : Route { first_ : String, rest_ : List String } -> () -> ( Model, Effect Msg )
+init route () =
+    let
+        requestUrl =
+            -- "https://gist.githubusercontent.com/avinal/a66c60362491498d114b53e8801632d6/raw/cd2fd3816f0f005fe12ebfeead8d8b1fcaafa5db/markdowntest.md"
+            UU.contentUrl
+                { category = route.params.first_
+                , post =
+                    Maybe.withDefault "" <| List.head route.params.rest_
+                }
+
+        cmd : Cmd Msg
+        cmd =
+            Http.get
+                { url = requestUrl
+                , expect = Http.expectString RawMarkdownReceived
+                }
+    in
+    ( { blog = Nothing
+      , requestUrl = requestUrl
+      , success = False
+      , fragment = ""
+      , error = Nothing
+      }
+    , Effect.sendCmd cmd
+    )
+
+
+
+-- UPDATE
+
+
+type Msg
+    = RawMarkdownReceived (Result Http.Error String)
+    | AttributeUpdate String
+
+
+update : Msg -> Model -> ( Model, Effect Msg )
+update msg model =
+    case msg of
+        RawMarkdownReceived (Ok data) ->
+            case splitMetaContent data of
+                Ok blog ->
+                    ( { model | blog = Just blog, success = True }, Effect.none )
+
+                Err err ->
+                    ( { model | success = False, error = Just err }, Effect.none )
+
+        RawMarkdownReceived (Err err) ->
+            ( { model | success = False, error = Just (UU.errorToString err) }, Effect.none )
+
+        AttributeUpdate data ->
+            ( model, Effect.none )
+
+
+
+-- SUBSCRIPTIONS
+
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+    Sub.none
+
+
+
+-- VIEW
+
+
+view : Model -> View Msg
+view model =
+    case model.blog of
+        Just blog ->
+            { title = "Blog | " ++ blog.meta.title
+            , body = [ articleNode blog.content ]
+            }
+
+        Nothing ->
+            { title = "Be My SpaceTime | Something went wrong"
+            , body = [ articleNode <| Maybe.withDefault "" model.error ]
+            }
+
+
+articleNode : String -> Html Msg
+articleNode data =
+    Html.node "rendered-md"
+        [ Html.Attributes.attribute "markdowndata" data ]
+        []
+
+
+
+-- UTILITIES
+
+
+type alias YamlMeta =
+    { title : String
+    , date : String
+    , description : Maybe String
+    , tags : List String
+    , category : String
+    , image : Maybe String
+    , modified : Maybe String
+    }
+
+
+splitMetaContent : String -> Result String Blog
+splitMetaContent data =
+    let
+        headIndices : List Int
+        headIndices =
+            String.indices "---" data |> List.take 2
+
+        metadata =
+            String.slice ((Maybe.withDefault 0 <| List.head headIndices) + 3)
+                ((Maybe.withDefault 0 <| List.head <| List.reverse headIndices) - 1)
+                data
+
+        content =
+            String.dropLeft ((Maybe.withDefault 0 <| List.head <| List.reverse headIndices) + 3) data
+    in
+    case Yaml.fromString metaDecoder metadata of
+        Ok meta ->
+            Ok { meta = meta, content = content }
+
+        Err err ->
+            Err ("YAML front matter parsing failed: " ++ Yaml.errorToString err)
+
+
+metaDecoder : Yaml.Decoder YamlMeta
+metaDecoder =
+    Yaml.map7 YamlMeta
+        (Yaml.field "title" Yaml.string)
+        (Yaml.field "date" Yaml.string)
+        (Yaml.maybe (Yaml.field "description" Yaml.string))
+        (Yaml.field "tags" (Yaml.list Yaml.string))
+        (Yaml.field "category" Yaml.string)
+        (Yaml.maybe (Yaml.field "image" Yaml.string))
+        (Yaml.maybe (Yaml.field "modified" Yaml.string))

src/Utils/Constants.elm

@@ -0,0 +1,203 @@
+module Utils.Constants exposing (..)
+
+import Array exposing (Array)
+
+
+type alias Link =
+    { url : String
+    , text : String
+    }
+
+
+type alias IconLink =
+    { url : String
+    , icon : String
+    }
+
+
+footerLinks : List Link
+footerLinks =
+    [ { text = "About", url = "/pages/about-me" }
+    , { text = "Blog", url = "/posts" }
+    , { text = "Projects", url = "/pages/projects" }
+    , { text = "GSoC", url = "https://gsoc.avinal.space" }
+    ]
+
+
+iconLinks : List IconLink
+iconLinks =
+    [ { url = "https://github.com/avinal", icon = "fa-brands fa-github" }
+    , { url = "https://www.linkedin.com/in/avinal", icon = "fa-brands fa-linkedin" }
+    , { url = "https://instagram.com/avinal", icon = "fa-brands fa-instagram" }
+    , { url = "mailto:ripple@avinal.space", icon = "fa-solid fa-envelope" }
+    ]
+
+
+contentBase : String
+contentBase =
+    "https://avinal.space/"
+
+
+user : String
+user =
+    "avinal"
+
+
+urlPrefix : String
+urlPrefix =
+    "avinal.github.io"
+
+
+contentUrlPrefix : String
+contentUrlPrefix =
+    contentBase ++ "/content/"
+
+
+nameMatrix : Array Int
+nameMatrix =
+    Array.fromList
+        [ 0
+        , 1
+        , 1
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 1
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 1
+        , 1
+        , 0
+        , 0
+        , 1
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 0
+        , 1
+        , 1
+        , 1
+        , 1
+        , 1
+        , 0
+        , 1
+        , 0
+        , 0
+        , 0
+        , 1
+        , 0
+        , 1
+        , 0
+        , 1
+        , 1
+        , 1
+        , 0
+        , 0
+        , 1
+        , 1
+        , 1
+        , 0
+        , 0
+        , 1
+        , 1
+        , 0
+        , 0
+        , 1
+        , 0
+        , 1
+        , 0
+        , 0
+        , 0
+        , 1
+        , 0
+        , 1
+        , 0
+        , 1
+        , 0
+        , 0
+        , 1
+        , 0
+        , 1
+        , 0
+        , 1
+        , 0
+        , 0
+        , 1
+        , 1
+        , 0
+        , 0
+        , 1
+        , 0
+        , 0
+        , 1
+        , 0
+        , 1
+        , 0
+        , 0
+        , 1
+        , 0
+        , 1
+        , 0
+        , 0
+        , 1
+        , 0
+        , 1
+        , 0
+        , 1
+        , 0
+        , 0
+        , 1
+        , 1
+        , 0
+        , 0
+        , 1
+        , 0
+        , 0
+        , 0
+        , 1
+        , 0
+        , 0
+        , 0
+        , 1
+        , 0
+        , 1
+        , 0
+        , 0
+        , 1
+        , 0
+        , 1
+        , 1
+        , 1
+        , 1
+        , 0
+        , 1
+        ]

src/Utils/Utils.elm

@@ -0,0 +1,34 @@
+module Utils.Utils exposing (..)
+
+import Http exposing (Error(..))
+import Utils.Constants exposing (..)
+
+
+contentUrl : { category : String, post : String } -> String
+contentUrl { category, post } =
+    contentUrlPrefix ++ "posts/" ++ category ++ "/" ++ post ++ ".md"
+
+
+errorToString : Http.Error -> String
+errorToString error =
+    case error of
+        BadUrl url ->
+            "The URL " ++ url ++ " was invalid"
+
+        Timeout ->
+            "Unable to reach the server, try again"
+
+        NetworkError ->
+            "Unable to reach the server, check your network connection"
+
+        BadStatus 500 ->
+            "The server had a problem, try again later"
+
+        BadStatus 400 ->
+            "Verify your information and try again"
+
+        BadStatus _ ->
+            "Unknown error"
+
+        BadBody errorMessage ->
+            errorMessage

src/View.elm

@@ -0,0 +1,76 @@
+module View exposing
+    ( View, map
+    , none, fromString
+    , toBrowserDocument
+    )
+
+{-|
+
+@docs View, map
+@docs none, fromString
+@docs toBrowserDocument
+
+-}
+
+import Browser
+import Html exposing (Html)
+import Html.Attributes exposing (class, href)
+import Route exposing (Route)
+import Shared.Model
+
+
+type alias View msg =
+    { title : String
+    , body : List (Html msg)
+    }
+
+
+{-| Used internally by Elm Land to create your application
+so it works with Elm's expected `Browser.Document msg` type.
+-}
+toBrowserDocument :
+    { shared : Shared.Model.Model
+    , route : Route ()
+    , view : View msg
+    }
+    -> Browser.Document msg
+toBrowserDocument { view } =
+    { title = view.title
+    , body =
+        [ Html.main_ [ class "container mx-auto bg-neutral-800" ]
+            view.body
+        ]
+    }
+
+
+{-| Used internally by Elm Land to connect your pages together.
+-}
+map : (msg1 -> msg2) -> View msg1 -> View msg2
+map fn view =
+    { title = view.title
+    , body = List.map (Html.map fn) view.body
+    }
+
+
+{-| Used internally by Elm Land whenever transitioning between
+authenticated pages.
+-}
+none : View msg
+none =
+    { title = "Be My SpaceTime"
+    , body = []
+    }
+
+
+{-| If you customize the `View` module, anytime you run `elm-land add page`,
+the generated page will use this when adding your `view` function.
+
+That way your app will compile after adding new pages, and you can see
+the new page working in the web browser!
+
+-}
+fromString : String -> View msg
+fromString moduleName =
+    { title = moduleName
+    , body = []
+    }

src/input.css

@@ -0,0 +1,120 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */
+code[class*=language-],
+pre[class*=language-] {
+    color: #f8f8f2;
+    background: 0 0;
+    text-shadow: 0 1px rgba(0, 0, 0, .3);
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none
+}
+
+pre[class*=language-] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    border-radius: .3em
+}
+
+:not(pre)>code[class*=language-],
+pre[class*=language-] {
+    background: #272822
+}
+
+:not(pre)>code[class*=language-] {
+    padding: .1em;
+    border-radius: .3em;
+    white-space: normal
+}
+
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+    color: #8292a2
+}
+
+.token.punctuation {
+    color: #f8f8f2
+}
+
+.token.namespace {
+    opacity: .7
+}
+
+.token.constant,
+.token.deleted,
+.token.property,
+.token.symbol,
+.token.tag {
+    color: #f92672
+}
+
+.token.boolean,
+.token.number {
+    color: #ae81ff
+}
+
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string {
+    color: #a6e22e
+}
+
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url,
+.token.variable {
+    color: #f8f8f2
+}
+
+.token.atrule,
+.token.attr-value,
+.token.class-name,
+.token.function {
+    color: #e6db74
+}
+
+.token.keyword {
+    color: #66d9ef
+}
+
+.token.important,
+.token.regex {
+    color: #fd971f
+}
+
+.token.bold,
+.token.important {
+    font-weight: 700
+}
+
+.token.italic {
+    font-style: italic
+}
+
+.token.entity {
+    cursor: help
+}

src/interop.js

@@ -0,0 +1,4 @@
+import "./web-components/MarkedRender.js";
+
+
+export const onReady = ({ app, env }) => {};

src/web-components/MarkedRender.js

@@ -0,0 +1,58 @@
+import "./prism.js";
+customElements.define(
+  "rendered-md",
+  class extends HTMLElement {
+    constructor() {
+      super();
+    }
+    connectedCallback() {
+      this.runMarked();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      this.runMarked();
+    }
+    runMarked() {
+      const renderer = new marked.Renderer();
+      const data = this.getAttribute("markdowndata");
+      renderer.heading = (text, level) => {
+        if (level === 1) {
+          return `<header>
+            <h1>
+                ${text}</h1>
+            </header>`;
+        }
+        const escapedText = text
+          .trim()
+          .toLowerCase()
+          .replace(/[^\w]+/g, "-");
+
+        return `<h${level} id="${escapedText}">
+        ${text}
+          <a title="Permalink to ${text}" href="#${escapedText}">
+           #
+          </a>
+          </h${level}>`;
+      };
+
+      marked.setOptions({
+        renderer: renderer,
+        highlight: function (code, lang) {
+          const grammer = Prism.languages[lang];
+          if (!grammer) {
+            console.warn(`Unable to find prism highlight for '${lang}'`);
+            return;
+          }
+          console.info("Found", lang);
+          return Prism.highlight(code, grammer, lang);
+        },
+      });
+
+      this.innerHTML = marked.parse(data);
+      console.log("Markdown rendering complete!");
+    }
+
+    static get observedAttributes() {
+      return ["markdowndata"];
+    }
+  }
+);

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,elm,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/typography")],
+};