diff --git a/package-lock.json b/package-lock.json
index 626ebb3..cd15dc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,10 @@
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/tailwind": "^5.1.0",
-        "@fontsource/space-mono": "^5.0.17",
+        "@tailwindcss/typography": "^0.5.14",
         "astro": "^4.13.1",
+        "astro-seo": "^0.8.4",
+        "date-fns": "^3.6.0",
         "tailwindcss": "^3.4.8"
       }
     },
@@ -37,6 +39,24 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@astrojs/check": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@astrojs/check/-/check-0.5.10.tgz",
+      "integrity": "sha512-vliHXM9cu/viGeKiksUM4mXfO816ohWtawTl2ADPgTsd4nUMjFiyAl7xFZhF34yy4hq4qf7jvK1F2PlR3b5I5w==",
+      "dependencies": {
+        "@astrojs/language-server": "^2.8.4",
+        "chokidar": "^3.5.3",
+        "fast-glob": "^3.3.1",
+        "kleur": "^4.1.5",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "astro-check": "dist/bin.js"
+      },
+      "peerDependencies": {
+        "typescript": "^5.0.0"
+      }
+    },
     "node_modules/@astrojs/compiler": {
       "version": "2.10.2",
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.10.2.tgz",
@@ -47,6 +67,45 @@
       "resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.4.1.tgz",
       "integrity": "sha512-bMf9jFihO8YP940uD70SI/RDzIhUHJAolWVcO1v5PUivxGKvfLZTLTVVxEYzGYyPsA3ivdLNqMnL5VgmQySa+g=="
     },
+    "node_modules/@astrojs/language-server": {
+      "version": "2.13.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/language-server/-/language-server-2.13.2.tgz",
+      "integrity": "sha512-l435EZLKjaUO/6iewJ7xqd3eHf3zAosVWG4woILbxluQcianBoNPepnnqAg7uUriZUaC44ae5v0Q+AfB8UI64g==",
+      "dependencies": {
+        "@astrojs/compiler": "^2.10.2",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@volar/kit": "~2.4.0-alpha.15",
+        "@volar/language-core": "~2.4.0-alpha.15",
+        "@volar/language-server": "~2.4.0-alpha.15",
+        "@volar/language-service": "~2.4.0-alpha.15",
+        "@volar/typescript": "~2.4.0-alpha.15",
+        "fast-glob": "^3.2.12",
+        "muggle-string": "^0.4.1",
+        "volar-service-css": "0.0.59",
+        "volar-service-emmet": "0.0.59",
+        "volar-service-html": "0.0.59",
+        "volar-service-prettier": "0.0.59",
+        "volar-service-typescript": "0.0.59",
+        "volar-service-typescript-twoslash-queries": "0.0.59",
+        "vscode-html-languageservice": "^5.2.0",
+        "vscode-uri": "^3.0.8"
+      },
+      "bin": {
+        "astro-ls": "bin/nodeServer.js"
+      },
+      "peerDependencies": {
+        "prettier": "^3.0.0",
+        "prettier-plugin-astro": ">=0.11.0"
+      },
+      "peerDependenciesMeta": {
+        "prettier": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@astrojs/markdown-remark": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-5.2.0.tgz",
@@ -407,6 +466,54 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emmetio/abbreviation": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.3.3.tgz",
+      "integrity": "sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==",
+      "dependencies": {
+        "@emmetio/scanner": "^1.0.4"
+      }
+    },
+    "node_modules/@emmetio/css-abbreviation": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@emmetio/css-abbreviation/-/css-abbreviation-2.1.8.tgz",
+      "integrity": "sha512-s9yjhJ6saOO/uk1V74eifykk2CBYi01STTK3WlXWGOepyKa23ymJ053+DNQjpFcy1ingpaO7AxCcwLvHFY9tuw==",
+      "dependencies": {
+        "@emmetio/scanner": "^1.0.4"
+      }
+    },
+    "node_modules/@emmetio/css-parser": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emmetio/css-parser/-/css-parser-0.4.0.tgz",
+      "integrity": "sha512-z7wkxRSZgrQHXVzObGkXG+Vmj3uRlpM11oCZ9pbaz0nFejvCDmAiNDpY75+wgXOcffKpj4rzGtwGaZxfJKsJxw==",
+      "dependencies": {
+        "@emmetio/stream-reader": "^2.2.0",
+        "@emmetio/stream-reader-utils": "^0.1.0"
+      }
+    },
+    "node_modules/@emmetio/html-matcher": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@emmetio/html-matcher/-/html-matcher-1.3.0.tgz",
+      "integrity": "sha512-NTbsvppE5eVyBMuyGfVu2CRrLvo7J4YHb6t9sBFLyY03WYhXET37qA4zOYUjBWFCRHO7pS1B9khERtY0f5JXPQ==",
+      "dependencies": {
+        "@emmetio/scanner": "^1.0.0"
+      }
+    },
+    "node_modules/@emmetio/scanner": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@emmetio/scanner/-/scanner-1.0.4.tgz",
+      "integrity": "sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA=="
+    },
+    "node_modules/@emmetio/stream-reader": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@emmetio/stream-reader/-/stream-reader-2.2.0.tgz",
+      "integrity": "sha512-fXVXEyFA5Yv3M3n8sUGT7+fvecGrZP4k6FnWWMSZVQf69kAq0LLpaBQLGcPR30m3zMmKYhECP4k/ZkzvhEW5kw=="
+    },
+    "node_modules/@emmetio/stream-reader-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@emmetio/stream-reader-utils/-/stream-reader-utils-0.1.0.tgz",
+      "integrity": "sha512-ZsZ2I9Vzso3Ho/pjZFsmmZ++FWeEd/txqybHTm4OgaZzdS8V9V/YYWQwg5TC38Z7uLWUV1vavpLLbjJtKubR1A=="
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.1.1.tgz",
@@ -761,11 +868,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@fontsource/space-mono": {
-      "version": "5.0.17",
-      "resolved": "https://registry.npmjs.org/@fontsource/space-mono/-/space-mono-5.0.17.tgz",
-      "integrity": "sha512-AwglnwSQ6DRoAKhrmkTngY2GFjCjONA5vlw+62b6cC7z5FEWeJ+nleUaOQnLxkGKKL68fA30CjnHJvKENck5Fw=="
-    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.3",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.3.tgz",
@@ -1472,6 +1574,32 @@
         "@types/hast": "^3.0.4"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.14.tgz",
+      "integrity": "sha512-ZvOCjUbsJBjL9CxQBn+VEnFpouzuKhxh2dH8xMIWHILL+HfOYtlAkWcyoon8LlzE53d2Yo6YO6pahKKNW3q1YQ==",
+      "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==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1566,6 +1694,103 @@
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
+    "node_modules/@volar/kit": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/kit/-/kit-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-dZMSNhesh23lhd61ax2l04IgIcYofAjm8M+5BKAmX47ROweyc8RrrslszCFUJynlmXx6JS1PoHqvo8+E0aAYQQ==",
+      "dependencies": {
+        "@volar/language-service": "2.4.0-alpha.18",
+        "@volar/typescript": "2.4.0-alpha.18",
+        "typesafe-path": "^0.2.2",
+        "vscode-languageserver-textdocument": "^1.0.11",
+        "vscode-uri": "^3.0.8"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-JAYeJvYQQROmVRtSBIczaPjP3DX4QW1fOqW1Ebs0d3Y3EwSNRglz03dSv0Dm61dzd0Yx3WgTW3hndDnTQqgmyg==",
+      "dependencies": {
+        "@volar/source-map": "2.4.0-alpha.18"
+      }
+    },
+    "node_modules/@volar/language-server": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/language-server/-/language-server-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-dciHEE/R5kzI0bY71QfkoCVQ3cQI6g9MHfA4oIP6UhnJy0CdleUalWSygOXoD3Nq7Yk6wn2BRrb1PP5MsadY/Q==",
+      "dependencies": {
+        "@volar/language-core": "2.4.0-alpha.18",
+        "@volar/language-service": "2.4.0-alpha.18",
+        "@volar/snapshot-document": "2.4.0-alpha.18",
+        "@volar/typescript": "2.4.0-alpha.18",
+        "path-browserify": "^1.0.1",
+        "request-light": "^0.7.0",
+        "vscode-languageserver": "^9.0.1",
+        "vscode-languageserver-protocol": "^3.17.5",
+        "vscode-languageserver-textdocument": "^1.0.11",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@volar/language-service": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/language-service/-/language-service-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-EuetrtbEtudi9buinWAG5U3Jam5dY27zXd/7GYnx542kBwanWOBM8i4DAQd0z7M11fOxXgybxPA933uaSyaOog==",
+      "dependencies": {
+        "@volar/language-core": "2.4.0-alpha.18",
+        "vscode-languageserver-protocol": "^3.17.5",
+        "vscode-languageserver-textdocument": "^1.0.11",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@volar/snapshot-document": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/snapshot-document/-/snapshot-document-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-JAeclEly/wnILhR4Pu9MpgBLInZJH49O1zoy8fU+pk5I+zpv7JIEby5z2UFAS60+sIDnxBdAGd7rZ5VibE70vg==",
+      "dependencies": {
+        "vscode-languageserver-protocol": "^3.17.5",
+        "vscode-languageserver-textdocument": "^1.0.11"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g=="
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==",
+      "dependencies": {
+        "@volar/language-core": "2.4.0-alpha.18",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@vscode/emmet-helper": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/@vscode/emmet-helper/-/emmet-helper-2.9.3.tgz",
+      "integrity": "sha512-rB39LHWWPQYYlYfpv9qCoZOVioPCftKXXqrsyqN1mTWZM6dTnONT63Db+03vgrBbHzJN45IrgS/AGxw9iiqfEw==",
+      "dependencies": {
+        "emmet": "^2.4.3",
+        "jsonc-parser": "^2.3.0",
+        "vscode-languageserver-textdocument": "^1.0.1",
+        "vscode-languageserver-types": "^3.15.1",
+        "vscode-uri": "^2.1.2"
+      }
+    },
+    "node_modules/@vscode/emmet-helper/node_modules/vscode-uri": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.2.tgz",
+      "integrity": "sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A=="
+    },
+    "node_modules/@vscode/l10n": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@vscode/l10n/-/l10n-0.0.18.tgz",
+      "integrity": "sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ=="
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1767,15 +1992,12 @@
         "sharp": "^0.33.3"
       }
     },
-    "node_modules/astro/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
+    "node_modules/astro-seo": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/astro-seo/-/astro-seo-0.8.4.tgz",
+      "integrity": "sha512-Ou1vzQSXAxa0K8rtNtXNvSpYqOGEgMhh0immMxJeXmbVZac3UKCNWAoXWyOQDFYsZvBugCRSg0N1phBqPMVgCw==",
+      "dependencies": {
+        "@astrojs/check": "^0.5.4"
       }
     },
     "node_modules/autoprefixer": {
@@ -2113,6 +2335,102 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/cliui/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=="
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2239,6 +2557,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
@@ -2348,6 +2675,15 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.5.tgz",
       "integrity": "sha512-QR7/A7ZkMS8tZuoftC/jfqNkZLQO779SSW3YuZHP4eXpj3EffGLFcB/Xu9AAZQzLccTiCV+EmUo3ha4mQ9wnlA=="
     },
+    "node_modules/emmet": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/emmet/-/emmet-2.4.7.tgz",
+      "integrity": "sha512-O5O5QNqtdlnQM2bmKHtJgyChcrFMgQuulI+WdiOw2NArzprUqqxUW6bgYtKvzKgrsYpuLWalOkdhNP+1jluhCA==",
+      "dependencies": {
+        "@emmetio/abbreviation": "^2.3.3",
+        "@emmetio/css-abbreviation": "^2.1.8"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "10.3.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
@@ -2602,6 +2938,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-east-asian-width": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz",
@@ -3154,6 +3498,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-2.3.1.tgz",
+      "integrity": "sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg=="
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -3228,6 +3577,21 @@
         "node": ">=8"
       }
     },
+    "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=="
+    },
+    "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=="
+    },
+    "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=="
+    },
     "node_modules/log-symbols": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-6.0.0.tgz",
@@ -4115,6 +4479,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ=="
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -4372,6 +4741,11 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4816,6 +5190,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/request-light": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/request-light/-/request-light-0.7.0.tgz",
+      "integrity": "sha512-lMbBMrDoxgsyO+yB3sDcrDuX85yYt7sS8BfQd11jtbW/z5ZWgLZRcEGLsLoYw7I0WSUGQBs8CC8ScIxkTX1+6Q=="
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -5009,13 +5396,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "optional": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -5023,24 +5406,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/semver/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "optional": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/semver/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "optional": true
-    },
     "node_modules/sharp": {
       "version": "0.33.3",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.3.tgz",
@@ -5424,6 +5789,32 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typesafe-path": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/typesafe-path/-/typesafe-path-0.2.2.tgz",
+      "integrity": "sha512-OJabfkAg1WLZSqJAJ0Z6Sdt3utnbzr/jh+NAHoyWHJe8CMSy79Gm085094M9nvTPy22KzTVn5Zq5mbapCI/hPA=="
+    },
+    "node_modules/typescript": {
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typescript-auto-import-cache": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/typescript-auto-import-cache/-/typescript-auto-import-cache-0.3.3.tgz",
+      "integrity": "sha512-ojEC7+Ci1ij9eE6hp8Jl9VUNnsEKzztktP5gtYNRMrTmfXVwA1PITYYAkpxCvvupdSYa/Re51B6KMcv1CTZEUA==",
+      "dependencies": {
+        "semver": "^7.3.8"
+      }
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
@@ -5701,6 +6092,188 @@
         }
       }
     },
+    "node_modules/volar-service-css": {
+      "version": "0.0.59",
+      "resolved": "https://registry.npmjs.org/volar-service-css/-/volar-service-css-0.0.59.tgz",
+      "integrity": "sha512-gLNjJnECbalPvQB7qeJjhkDN8sR5M3ItbVYjnyio61aHaWptIiXm/HfDahcQ2ApwmvWidkMWWegjGq5L0BENDA==",
+      "dependencies": {
+        "vscode-css-languageservice": "^6.3.0",
+        "vscode-languageserver-textdocument": "^1.0.11",
+        "vscode-uri": "^3.0.8"
+      },
+      "peerDependencies": {
+        "@volar/language-service": "~2.4.0-alpha.12"
+      },
+      "peerDependenciesMeta": {
+        "@volar/language-service": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/volar-service-emmet": {
+      "version": "0.0.59",
+      "resolved": "https://registry.npmjs.org/volar-service-emmet/-/volar-service-emmet-0.0.59.tgz",
+      "integrity": "sha512-6EynHcuMwMBETpK29TbZvIMmvzdVG+Tkokk9VWfZeI+SwDptk2tgdhEqiXXvIkqYNgbuu73Itp66lpH76cAU+Q==",
+      "dependencies": {
+        "@emmetio/css-parser": "^0.4.0",
+        "@emmetio/html-matcher": "^1.3.0",
+        "@vscode/emmet-helper": "^2.9.3",
+        "vscode-uri": "^3.0.8"
+      },
+      "peerDependencies": {
+        "@volar/language-service": "~2.4.0-alpha.12"
+      },
+      "peerDependenciesMeta": {
+        "@volar/language-service": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/volar-service-html": {
+      "version": "0.0.59",
+      "resolved": "https://registry.npmjs.org/volar-service-html/-/volar-service-html-0.0.59.tgz",
+      "integrity": "sha512-hEXOsYpILDlITZxnqRLV9OepVWD63GZBsyjMxszwdzlxvGZjzbGcBBinJGGJRwFIV8djdJwnt91bkdg1V5tj6Q==",
+      "dependencies": {
+        "vscode-html-languageservice": "^5.3.0",
+        "vscode-languageserver-textdocument": "^1.0.11",
+        "vscode-uri": "^3.0.8"
+      },
+      "peerDependencies": {
+        "@volar/language-service": "~2.4.0-alpha.12"
+      },
+      "peerDependenciesMeta": {
+        "@volar/language-service": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/volar-service-prettier": {
+      "version": "0.0.59",
+      "resolved": "https://registry.npmjs.org/volar-service-prettier/-/volar-service-prettier-0.0.59.tgz",
+      "integrity": "sha512-FmBR4lsgFRGR3V0LnxZZal0WqdOJjuLL6mQSj4p57M15APtQwuocG/FiF+ONGFnwRXMOIBDBTCARdth+TKgL3A==",
+      "dependencies": {
+        "vscode-uri": "^3.0.8"
+      },
+      "peerDependencies": {
+        "@volar/language-service": "~2.4.0-alpha.12",
+        "prettier": "^2.2 || ^3.0"
+      },
+      "peerDependenciesMeta": {
+        "@volar/language-service": {
+          "optional": true
+        },
+        "prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/volar-service-typescript": {
+      "version": "0.0.59",
+      "resolved": "https://registry.npmjs.org/volar-service-typescript/-/volar-service-typescript-0.0.59.tgz",
+      "integrity": "sha512-VCOpfiu+lUo5lapWLB5L5vmQGtwzmNWn5MueV915eku7blpphmE+Z7hCNcL1NApn7AetXWhiblv8ZhmUx/dGIA==",
+      "dependencies": {
+        "path-browserify": "^1.0.1",
+        "semver": "^7.6.2",
+        "typescript-auto-import-cache": "^0.3.3",
+        "vscode-languageserver-textdocument": "^1.0.11",
+        "vscode-nls": "^5.2.0",
+        "vscode-uri": "^3.0.8"
+      },
+      "peerDependencies": {
+        "@volar/language-service": "~2.4.0-alpha.12"
+      },
+      "peerDependenciesMeta": {
+        "@volar/language-service": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/volar-service-typescript-twoslash-queries": {
+      "version": "0.0.59",
+      "resolved": "https://registry.npmjs.org/volar-service-typescript-twoslash-queries/-/volar-service-typescript-twoslash-queries-0.0.59.tgz",
+      "integrity": "sha512-skm8e6yhCIkqLwJB6S9MqT5lO9LNFuMD3dYxKpmOZs1CKbXmCZZTmLfEaD5VkJae1xdleEDZFFTHl2O5HLjOGQ==",
+      "dependencies": {
+        "vscode-uri": "^3.0.8"
+      },
+      "peerDependencies": {
+        "@volar/language-service": "~2.4.0-alpha.12"
+      },
+      "peerDependenciesMeta": {
+        "@volar/language-service": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vscode-css-languageservice": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-6.3.0.tgz",
+      "integrity": "sha512-nU92imtkgzpCL0xikrIb8WvedV553F2BENzgz23wFuok/HLN5BeQmroMy26pUwFxV2eV8oNRmYCUv8iO7kSMhw==",
+      "dependencies": {
+        "@vscode/l10n": "^0.0.18",
+        "vscode-languageserver-textdocument": "^1.0.11",
+        "vscode-languageserver-types": "3.17.5",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/vscode-html-languageservice": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-5.3.0.tgz",
+      "integrity": "sha512-C4Z3KsP5Ih+fjHpiBc5jxmvCl+4iEwvXegIrzu2F5pktbWvQaBT3YkVPk8N+QlSSMk8oCG6PKtZ/Sq2YHb5e8g==",
+      "dependencies": {
+        "@vscode/l10n": "^0.0.18",
+        "vscode-languageserver-textdocument": "^1.0.11",
+        "vscode-languageserver-types": "^3.17.5",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/vscode-jsonrpc": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
+      "integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/vscode-languageserver": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-9.0.1.tgz",
+      "integrity": "sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==",
+      "dependencies": {
+        "vscode-languageserver-protocol": "3.17.5"
+      },
+      "bin": {
+        "installServerIntoExtension": "bin/installServerIntoExtension"
+      }
+    },
+    "node_modules/vscode-languageserver-protocol": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz",
+      "integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==",
+      "dependencies": {
+        "vscode-jsonrpc": "8.2.0",
+        "vscode-languageserver-types": "3.17.5"
+      }
+    },
+    "node_modules/vscode-languageserver-textdocument": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
+      "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA=="
+    },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
+      "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg=="
+    },
+    "node_modules/vscode-nls": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-nls/-/vscode-nls-5.2.0.tgz",
+      "integrity": "sha512-RAaHx7B14ZU04EU31pT+rKz2/zSl7xMsfIZuo8pd+KZO6PXtQmpevpq3vxvWNcrGbdmhM/rr5Uw5Mz+NBfhVng=="
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw=="
+    },
     "node_modules/web-namespaces": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
@@ -5831,6 +6404,14 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -5844,6 +6425,23 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yargs-parser": {
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
@@ -5852,6 +6450,43 @@
         "node": ">=12"
       }
     },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
diff --git a/package.json b/package.json
index dc7bd7f..a6f63f4 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "@astrojs/tailwind": "^5.1.0",
-    "@fontsource/space-mono": "^5.0.17",
+    "@tailwindcss/typography": "^0.5.14",
     "astro": "^4.13.1",
+    "astro-seo": "^0.8.4",
+    "date-fns": "^3.6.0",
     "tailwindcss": "^3.4.8"
   }
 }
diff --git a/public/android-icon-144x144.png b/public/android-icon-144x144.png
index afb53d4..536fcf5 100644
Binary files a/public/android-icon-144x144.png and b/public/android-icon-144x144.png differ
diff --git a/public/android-icon-192x192.png b/public/android-icon-192x192.png
index 3ed35f3..f4c5ab5 100644
Binary files a/public/android-icon-192x192.png and b/public/android-icon-192x192.png differ
diff --git a/public/android-icon-36x36.png b/public/android-icon-36x36.png
index 14f8495..830cb14 100644
Binary files a/public/android-icon-36x36.png and b/public/android-icon-36x36.png differ
diff --git a/public/android-icon-48x48.png b/public/android-icon-48x48.png
index 60581a4..630ffd0 100644
Binary files a/public/android-icon-48x48.png and b/public/android-icon-48x48.png differ
diff --git a/public/android-icon-72x72.png b/public/android-icon-72x72.png
index fc7d38e..2113dad 100644
Binary files a/public/android-icon-72x72.png and b/public/android-icon-72x72.png differ
diff --git a/public/android-icon-96x96.png b/public/android-icon-96x96.png
index 23e5ed8..0b77895 100644
Binary files a/public/android-icon-96x96.png and b/public/android-icon-96x96.png differ
diff --git a/public/apple-icon-114x114.png b/public/apple-icon-114x114.png
index 8b35a8a..1feee12 100644
Binary files a/public/apple-icon-114x114.png and b/public/apple-icon-114x114.png differ
diff --git a/public/apple-icon-120x120.png b/public/apple-icon-120x120.png
index fdf9a4a..88ac236 100644
Binary files a/public/apple-icon-120x120.png and b/public/apple-icon-120x120.png differ
diff --git a/public/apple-icon-144x144.png b/public/apple-icon-144x144.png
index afb53d4..536fcf5 100644
Binary files a/public/apple-icon-144x144.png and b/public/apple-icon-144x144.png differ
diff --git a/public/apple-icon-152x152.png b/public/apple-icon-152x152.png
index 271df45..b76a72f 100644
Binary files a/public/apple-icon-152x152.png and b/public/apple-icon-152x152.png differ
diff --git a/public/apple-icon-180x180.png b/public/apple-icon-180x180.png
index 2a76212..363d73c 100644
Binary files a/public/apple-icon-180x180.png and b/public/apple-icon-180x180.png differ
diff --git a/public/apple-icon-57x57.png b/public/apple-icon-57x57.png
index e8bb390..01a4fec 100644
Binary files a/public/apple-icon-57x57.png and b/public/apple-icon-57x57.png differ
diff --git a/public/apple-icon-60x60.png b/public/apple-icon-60x60.png
index 3a37b37..9db6372 100644
Binary files a/public/apple-icon-60x60.png and b/public/apple-icon-60x60.png differ
diff --git a/public/apple-icon-72x72.png b/public/apple-icon-72x72.png
index fc7d38e..2113dad 100644
Binary files a/public/apple-icon-72x72.png and b/public/apple-icon-72x72.png differ
diff --git a/public/apple-icon-76x76.png b/public/apple-icon-76x76.png
index 2463114..5f33496 100644
Binary files a/public/apple-icon-76x76.png and b/public/apple-icon-76x76.png differ
diff --git a/public/apple-icon-precomposed.png b/public/apple-icon-precomposed.png
index 6d8cfdb..39ddebd 100644
Binary files a/public/apple-icon-precomposed.png and b/public/apple-icon-precomposed.png differ
diff --git a/public/apple-icon.png b/public/apple-icon.png
index 6d8cfdb..39ddebd 100644
Binary files a/public/apple-icon.png and b/public/apple-icon.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
index 12fff40..fb30e6e 100644
Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ
diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png
index 84d445d..0b77895 100644
Binary files a/public/favicon-96x96.png and b/public/favicon-96x96.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 1025ce5..03bf660 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicon.png b/public/favicon.png
index 9c4973e..fbe39d4 100644
Binary files a/public/favicon.png and b/public/favicon.png differ
diff --git a/public/favicon.svg b/public/favicon.svg
deleted file mode 100644
index f157bd1..0000000
--- a/public/favicon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>
diff --git a/public/fonts/inter-variable.woff2 b/public/fonts/inter-variable.woff2
new file mode 100644
index 0000000..22a12b0
Binary files /dev/null and b/public/fonts/inter-variable.woff2 differ
diff --git a/public/og.png b/public/og.png
index 2d43b5d..7230490 100644
Binary files a/public/og.png and b/public/og.png differ
diff --git a/src/components/intro-link.astro b/src/components/intro-link.astro
new file mode 100644
index 0000000..e9cef3f
--- /dev/null
+++ b/src/components/intro-link.astro
@@ -0,0 +1,31 @@
+---
+interface Props {
+  href: string;
+  caption: string;
+  captionRotation?: 0 | 1 | 2 | -1 | -2;
+}
+
+const { href, caption, captionRotation = 0 } = Astro.props;
+---
+
+<a
+  class:list={[
+    'font-medium relative cursor-pointer underline underline-offset-4 decoration-2',
+    `after:content-[attr(data-caption)]`,
+    'after:absolute after:px-2 after:py-1 after:left-1/2 after:top-1/2 after:transform after:-translate-x-1/2 after:-translate-y-1/2',
+    'after:opacity-0 after:transition-all after:rounded-lg after:cursor-pointer',
+    'after:bg-thistle-200 after:drop-shadow-lg',
+    'after:font-semibold after:text-thistle-900',
+    'after:scale-50 after:z-50',
+    'hover:after:opacity-100 hover:after:scale-110',
+    {
+      'after:-rotate-2': captionRotation === -2,
+      'after:-rotate-1': captionRotation === -1,
+      'after:rotate-1': captionRotation === 1,
+      'after:rotate-2': captionRotation === 2,
+    },
+  ]}
+  data-caption={caption}
+  href={href}
+  target="_blank"><slot /></a
+>
diff --git a/src/content/config.ts b/src/content/config.ts
new file mode 100644
index 0000000..26196e5
--- /dev/null
+++ b/src/content/config.ts
@@ -0,0 +1,15 @@
+import { defineCollection, reference, z } from 'astro:content';
+
+const noteCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    publishDate: z.date(),
+    isDraft: z.boolean(),
+    shortDesc: z.string().optional(),
+  }),
+});
+
+export const collections = {
+  note: noteCollection,
+};
diff --git a/src/layouts/container-layout.astro b/src/layouts/container-layout.astro
new file mode 100644
index 0000000..b91dac9
--- /dev/null
+++ b/src/layouts/container-layout.astro
@@ -0,0 +1,110 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+
+interface Props {
+  isInternalPage?: boolean;
+}
+
+const { isInternalPage = false } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta name="generator" content={Astro.generator} />
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="/apple-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="/apple-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="/apple-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-icon-180x180.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="/android-icon-192x192.png"
+    />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#ecf4f4" />
+    <!-- Load Inter font family -->
+    <style is:global>
+      @font-face {
+        font-family: 'Inter Variable';
+        font-display: swap;
+        font-weight: 100 900;
+        src: url(/fonts/inter-variable.woff2) format('woff2-variations');
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+          U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
+          U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      }
+    </style>
+    <meta http-equiv="Content-Language" content="en" />
+    <slot name="head" />
+    <ViewTransitions />
+  </head>
+
+  <body
+    class="bg-aqua-haze-100 text-bay-of-many-950 selection:bg-thistle-900 selection:text-thistle-200 text-body lowercase min-h-screen"
+  >
+    <main
+      class="font-body w-full box-border p-6 sm:max-w-xl md:py-16 antialiased mx-auto"
+    >
+      <a href="/" class="transform block active:scale-90 transition-all">
+        <h1
+          class:list={[
+            'font-medium mb-4 font-heading flex items-center gap-3',
+            {
+              'text-3xl': !isInternalPage,
+              'text-2xl': isInternalPage,
+            },
+          ]}
+          transition:name="logo"
+        >
+          <span
+            hidden={!isInternalPage}
+            class="bg-thistle-300 text-thistle-900 text-base font-bold px-2 py-1.5 rounded-xl"
+            transition:name="go-to-homepage">{'<-'} Home</span
+          >
+          Alireza Ahmadi
+        </h1>
+      </a>
+      <slot />
+      <footer>
+        <p class="text-sm text-bay-of-many-950 mt-16 py-8">
+          &copy; {new Date().getFullYear()} Alireza Ahmadi. Some rights reserved.
+        </p>
+      </footer>
+    </main>
+  </body>
+</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d253d58..ebfd7ac 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,124 +1,129 @@
 ---
-import '@fontsource/space-mono/400.css';
+import IntroLink from '../components/intro-link.astro';
+import ContainerLayout from '../layouts/container-layout.astro';
+import { SEO } from 'astro-seo';
 
-const links = [
-  {
-    name: 'LinkedIn',
-    url: 'https://www.linkedin.com/in/alirezaahmadi/',
-  },
-  {
-    name: 'X, formerly Twitter',
-    url: 'https://x.com/alireza94',
-  },
-  {
-    name: 'GitHub',
-    url: 'https://github.com/alireza-ahmadi',
-  },
-  {
-    name: 'StackOverflow',
-    url: 'https://stackoverflow.com/users/2503246/alireza-ahmadi',
-  },
-  {
-    name: 'Email',
-    url: 'mailto:me@alireza.es',
-  },
-];
----
+import { format } from 'date-fns';
+import { getCollection } from 'astro:content';
 
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
-    <meta name="generator" content={Astro.generator} />
-    <title>Alireza Ahmadi</title>
-    <!-- Favicon -->
-    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
-    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
-    <link
-      rel="apple-touch-icon"
-      sizes="114x114"
-      href="/apple-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="120x120"
-      href="/apple-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="144x144"
-      href="/apple-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="152x152"
-      href="/apple-icon-152x152.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="/apple-icon-180x180.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="192x192"
-      href="/android-icon-192x192.png"
-    />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
-    <link rel="manifest" href="/manifest.json" />
-    <meta name="theme-color" content="#000000" />
-    <!-- Opengraph -->
-    <meta http-equiv="Content-Language" content="en" />
-
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:creator" content="@alireza94" />
+const notes = (
+  await getCollection('note', ({ data }) => {
+    return data.isDraft !== true;
+  })
+).sort((a, b) => {
+  return b.data.publishDate.getTime() - a.data.publishDate.getTime();
+});
+---
 
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta property="og:image" content="https://alireza.es/og.png" />
-    <meta property="og:image:alt" content="Alireza Ahmadi" />
-    <meta property="og:site_name" content="alireza.es" />
-    <meta property="og:title" content="Alireza Ahmadi" />
-    <meta property="og:description" content="Just a tiny personal website" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://alireza.es" />
-  </head>
-  <body class="bg-black text-white selection:bg-white selection:text-black">
-    <main
-      class="font-mono w-full box-border p-8 sm:max-w-xl md:p-16 [font-variant-ligatures:none]"
+<ContainerLayout>
+  <SEO
+    slot="head"
+    title="alireza ahmadi"
+    description="the personal website of alireza ahmadi"
+    openGraph={{
+      basic: {
+        title: 'alireza ahmadi',
+        type: 'website',
+        image: 'https://alireza.es/og.png',
+        url: 'https://alireza.es',
+      },
+    }}
+    twitter={{
+      creator: '@alireza94',
+    }}
+    extend={{
+      meta: [
+        {
+          name: 'twitter:image',
+          content: 'https://alireza.es/og.png',
+        },
+        { name: 'twitter:title', content: 'alireza ahmadi' },
+        {
+          name: 'twitter:image:alt',
+          content: 'alireza ahmadi',
+        },
+        {
+          name: 'twitter:card',
+          content: 'summary_large_image',
+        },
+        {
+          name: 'twitter:description',
+          content: 'the personal website of alireza ahmadi',
+        },
+      ],
+    }}
+  />
+  <section>
+    <p
+      class="text-normal font-normal font-body leading-relaxed sm:text-lg mb-4 text-balance"
+    >
+      Hi, I'm a consultant with
+      <IntroLink
+        href="https://github.com/alireza-ahmadi"
+        caption="GitHub"
+        captionRotation={-1}>software</IntroLink
+      >
+      <IntroLink
+        href="https://stackoverflow.com/users/2503246/alireza-ahmadi"
+        caption="StackOverflow"
+        captionRotation={1}
+      >
+        engineering
+      </IntroLink> background. I help companies leverage the tech to achieve their
+      primary objectives.
+    </p>
+    <div
+      class="text-normal font-normal leading-relaxed sm:text-lg mb-14 flex flex-row gap-3 sm:gap-4"
     >
+      <IntroLink
+        href="https://x.com/alireza94"
+        caption="alireza94"
+        captionRotation={2}>X.com</IntroLink
+      >
+      <IntroLink
+        href="https://www.linkedin.com/in/alirezaahmadi/"
+        caption="alirezaahmadi"
+        captionRotation={-1}>LinkedIn</IntroLink
+      >
+      <IntroLink
+        caption="wojiaoalireza"
+        href="https://t.me/wojiaoalireza"
+        captionRotation={-2}>Telegram</IntroLink
+      >
+      <IntroLink
+        caption="me@alireza.es"
+        href="mailto:me@alireza.es"
+        captionRotation={1}>Mail</IntroLink
+      >
+    </div>
+  </section>
+  {
+    notes.length > 0 && (
       <section>
-        <h1 class="font-normal text-normal mb-10 sm:text-lg">Alireza Ahmadi</h1>
-        <p
-          class="text-normal font-normal leading-loose sm:leading-loose sm:text-lg mb-10 [text-wrap:balance]"
-        >
-          I'm a consultant with software engineering background. I help
-          companies leverage the tech to achieve their primary objectives.
-        </p>
-        <ul class="text-normal font-normal opacity-70">
-          {
-            links.map(({ name, url }) => (
-              <li class="mb-6 sm:mb-4">
-                <a
-                  class="border-b-2 pb-1 bg-black active:bg-white active:text-black active:pl-4 transition-all"
-                  href={url}
-                  target="_blank"
-                >
-                  {name}
-                </a>
-              </li>
-            ))
-          }
+        <h2 class="font-semibold !text-2xl mb-2 sm:text-lg font-heading">
+          Notes
+        </h2>
+        <ul class="font-body">
+          {notes.map((note) => (
+            <li class="flex flex-col justify-start items-start gap-1 py-2">
+              <a
+                href={`/notes/${note.slug}`}
+                class="font-normal text-lg flex-grow-0 flex-shrink-0 underline decoration-2 underline-offset-1 hover:text-thistle-700"
+                transition:name={`title-${note.slug}`}
+              >
+                {note.data.title}
+              </a>
+              <div class="flex flex-row justify-stretch items-center gap-3 sm:gap-4 w-full">
+                {/* <span class="after:border-bay-of-many-950/30 after:border-t-2 relative after:absolute after:w-full after:left-0 after:top-1/2 after:box-border after:-translate-y-1/2 h-1 after:border-dashed flex-grow block" /> */}
+
+                <span class="flex-grow-0 flex-shrink-0 text-sm font-semibold flex items-center gap-1">
+                  {format(note.data.publishDate, 'yyyy-MM-dd')}
+                </span>
+              </div>
+            </li>
+          ))}
         </ul>
       </section>
-    </main>
-  </body>
-</html>
+    )
+  }
+</ContainerLayout>
diff --git a/src/pages/notes/[...slug].astro b/src/pages/notes/[...slug].astro
new file mode 100644
index 0000000..16e1c08
--- /dev/null
+++ b/src/pages/notes/[...slug].astro
@@ -0,0 +1,101 @@
+---
+import { SEO } from 'astro-seo';
+import type { CollectionEntry } from 'astro:content';
+import ContainerLayout from '../../layouts/container-layout.astro';
+import { getCollection } from 'astro:content';
+
+interface Props {
+  entry: CollectionEntry<'note'>;
+}
+
+export async function getStaticPaths() {
+  const noteEntries = await getCollection('note');
+  return noteEntries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+const metaData = {
+  title: `${entry.data.title.toLowerCase()} | alireza ahmadi`,
+  ogImage: `https://alireza.es/opengraph/${entry.slug}.png`,
+  description: entry.data.shortDesc
+    ? entry.data.shortDesc
+    : `the personal website of alireza ahmadi`,
+  url: `https://alireza.es/notes/${entry.slug}`,
+};
+---
+
+<ContainerLayout isInternalPage>
+  <SEO
+    slot="head"
+    title={metaData.title}
+    description=""
+    openGraph={{
+      basic: {
+        title: metaData.title,
+        type: 'website',
+        image: metaData.ogImage,
+        url: metaData.url,
+      },
+    }}
+    twitter={{
+      creator: '@alireza94',
+    }}
+    extend={{
+      meta: [
+        {
+          name: 'twitter:image',
+          content: metaData.ogImage,
+        },
+        {
+          name: 'twitter:image:alt',
+          content: metaData.title,
+        },
+        {
+          name: 'twitter:card',
+          content: 'summary_large_image',
+        },
+        { name: 'twitter:title', content: metaData.title },
+        {
+          name: 'twitter:description',
+          content: metaData.description,
+        },
+      ],
+    }}
+  />
+  <a href={`/notes/${entry.slug}`} transition:name={`title-${entry.slug}`}
+    ><h2
+      class="font-semibold font-heading text-4xl mt-10 mb-10 underline decoration-4 underline-offset-4 text-balance"
+    >
+      {entry.data.title}
+    </h2>
+  </a>
+  <article
+    class:list={[
+      'prose',
+      'prose-p:font-body',
+      'text-bay-of-many-950 font-[450]',
+      'prose-headings:text-bay-of-many-950 prose-headings:font-semibold prose-headings:font-heading',
+      'prose-h1:mb-4 prose-h1:text-4xl',
+      'prose-h2:mb-3 prose-h2:mt-6 prose-h2:text-3xl',
+      'prose-h3:mb-2 prose-h3:mt-4 prose-h3:text-2xl',
+      'prose-h4:mb-2 prose-h4:mt-4 prose-h4:text-xl',
+      'prose-h5:mb-1 prose-h5:mt-3 prose-h5:text-lg',
+      'prose-h6:mb-2 prose-h6:mt-4 prose-h6:text-lg prose-h6:opacity-80',
+      'prose-li:marker:text-thistle-600 prose-li:marker:text-lg prose-li:marker:font-semibold',
+      'prose-a:underline prose-a:decoration-2 prose-a:underline-offset-2 prose-a:text-bay-of-many-800',
+      'visited:prose-a:text-thistle-800 hover:prose-a:text-thistle-700',
+      'prose-p:text-balance',
+      'prose-strong:text-bay-of-many-950 prose-strong:font-semibold',
+      'prose-hr:border-bay-of-many-700/30 prose-hr:border-t-2 prose-hr:border-dashed prose-hr:my-8 prose-hr:opacity-70',
+      'prose-blockquote:text-bay-of-many-950 prose-blockquote:font-medium prose-blockquote:font-heading prose-blockquote:italic',
+      'prose-blockquote:pl-4 prose-blockquote:my-8 prose-blockquote:border-l-4 prose-blockquote:border-thistle-600',
+    ]}
+  >
+    <Content />
+  </article>
+</ContainerLayout>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index e092f1d..a52cdac 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,12 +1,117 @@
+const {
+  fontFamily: { sans: defaultSans },
+} = require('tailwindcss/defaultTheme');
+
+// I'm doing this because apparently Tailwind only supports one font values
+// when using font-variation-settings.
+const fontInter = '"Inter Variable"';
+const fontInterDefaultFeatures = ['ss01', 'ss02', 'ss07'];
+
+/**
+ *
+ * @param  {...string} features
+ * @returns a css compatible string of features
+ */
+function generateFeatures(...features) {
+  return features.map((feature) => `"${feature}"`).join(', ');
+}
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
     extend: {
       fontFamily: {
-        mono: ['Space Mono', 'ui-monospace', 'SFMono-Regular'],
+        heading: [
+          fontInter,
+          {
+            fontFeatureSettings: generateFeatures(
+              ...fontInterDefaultFeatures,
+              'cv10',
+              'cv11'
+            ),
+            fontVariationSettings: '"opsz" 32',
+          },
+          ...defaultSans,
+        ],
+        body: [
+          fontInter,
+          {
+            fontFeatureSettings: generateFeatures(...fontInterDefaultFeatures),
+            fontVariationSettings: '"opsz" 14',
+          },
+          ...defaultSans,
+        ],
+      },
+      colors: {
+        // color pallete from #ECF4F4, #DEC4E2, #54B4EA, #0363BB, #023785
+        'aqua-haze': {
+          50: '#f5fafa',
+          100: '#ecf4f4',
+          200: '#d2e5e4',
+          300: '#aacfcc',
+          400: '#7db3ad',
+          500: '#5c9b96',
+          600: '#48817e',
+          700: '#3c6865',
+          800: '#345857',
+          900: '#2f4b4a',
+          950: '#1f3232',
+        },
+        thistle: {
+          50: '#fcf8fc',
+          100: '#f6eff8',
+          200: '#efe3f1',
+          300: '#dec4e2',
+          400: '#d0abd5',
+          500: '#bc8ac2',
+          600: '#a96eaf',
+          700: '#915a96',
+          800: '#794d7c',
+          900: '#623f64',
+          950: '#442546',
+        },
+        'picton-blue': {
+          50: '#f1f8fe',
+          100: '#e2f1fc',
+          200: '#bfe1f8',
+          300: '#87c9f2',
+          400: '#54b4ea',
+          500: '#2094d7',
+          600: '#1276b7',
+          700: '#105e94',
+          800: '#11507b',
+          900: '#144466',
+          950: '#0d2b44',
+        },
+        denim: {
+          50: '#f0f7ff',
+          100: '#e0eefe',
+          200: '#baddfd',
+          300: '#7ec2fb',
+          400: '#39a3f7',
+          500: '#0f87e8',
+          600: '#0363bb',
+          700: '#0453a0',
+          800: '#084884',
+          900: '#0d3d6d',
+          950: '#082649',
+        },
+        'bay-of-many': {
+          50: '#e9f9ff',
+          100: '#cff0ff',
+          200: '#a9e8ff',
+          300: '#6edcff',
+          400: '#2ac4ff',
+          500: '#009fff',
+          600: '#0076ff',
+          700: '#005cff',
+          800: '#004de2',
+          900: '#0047b0',
+          950: '#023785',
+        },
       },
     },
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/typography')],
 };