fix(extras): move to a more usable version of delivering MonkeyType themes

Author: mehalter

extras/monkeytype/astrodark.css

@@ -26,7 +26,7 @@ M.extras = {
   kitty            = { ext = "conf", url = "https://sw.kovidgoyal.net/kitty/conf.html", label = "Kitty" },
   lazygit          = { ext = "yml", url = "https://github.com/jesseduffield/lazygit", label = "Lazygit" },
   lua              = { ext = "lua", url = "https://www.lua.org", label = "Lua Table for testing" },
-  monkeytype       = { ext = "css", url = "https://monkeytype.com", label = "MonkeyType" },
+  monkeytype       = { ext = "md", url = "https://monkeytype.com", label = "MonkeyType" },
   prism            = { ext = "js", url = "https://prismjs.com", label = "Prism" },
   process_compose  = { ext = "yaml", url = "https://f1bonacc1.github.io/process-compose/", label = "process-compose" },
   slack            = {ext = "txt", url = "https://slack.com", label = "Slack"},

extras/monkeytype/astrojupiter.css

@@ -6,6 +6,7 @@ local M = {}
 function M.generate(colors)
   -- build the color palette
   local monkeytype_colors = {
+    name = colors._style_name,
     bg = colors.ui.base,
     main = colors.ui.accent,
     caret = colors.ui.text,
@@ -34,10 +35,13 @@ function M.generate(colors)
   })
   return util.template(
     [=[
-/* ${_style_name} MonkeyType Colors */
-/* Apply the theme easily with the link below
- * https://monkeytype.com?customTheme=${encoded}
- */
+# ${name} MonkeyType Theme
+
+[Click here to apply ${name} in MonkeyType](https://monkeytype.com?customTheme=${encoded})
+
+Here is the CSS that gets applied when clicking the link above:
+
+```css
 :root {
     --bg-color: ${bg};
     --main-color: ${main};
@@ -50,6 +54,7 @@ function M.generate(colors)
     --colorful-error-color: ${colorful_error};
     --colorful-error-extra-color: ${colorful_error_extra};
    }
+```
 ]=],
     monkeytype_colors
   )