ui: add hljs to render code blocks

Signed-off-by: Guillaume Hivert <[email protected]>

apps/backend/src/backend/router.gleam

@@ -5,7 +5,6 @@ import backend/postgres/queries
 import backend/web
 import cors_builder as cors
 import gleam/http
-import gleam/io
 import gleam/json
 import gleam/list
 import gleam/result
@@ -57,7 +56,6 @@ pub fn handle_post(req: Request, ctx: Context) {
       let _ =
         hex.get_package(name, ctx.hex_api_key)
         |> result.try(fn(package) { syncing.sync_package(ctx, package) })
-        |> io.debug()
       empty_json()
     }
     _ -> wisp.not_found()

apps/frontend/index.html

@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link rel="stylesheet" href="/main.css" />
     <link rel="stylesheet" href="/normalize.css" />
+    <link rel="stylesheet" href="/hljs-theme.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gloogle</title>
   </head>

apps/frontend/package.json

@@ -8,8 +8,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@gleam-lang/highlight.js-gleam": "^1.5.0",
     "firebase": "^10.10.0",
-    "showdown": "^2.1.0"
+    "highlight.js": "^11.9.0",
+    "showdown": "^2.1.0",
+    "showdown-highlight": "^3.1.0"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",

apps/frontend/public/hljs-theme.css

@@ -0,0 +1,127 @@
+/*
+
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+base:    #1e1e1e
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 12px;
+  color: #abb2bf;
+  background: #1e1e1e;
+  border-radius: 6px;
+  border: 1px solid #4e4e4c;
+  line-height: 1.4;
+  font-size: 14px;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #5c6370;
+  /* font-style: italic; */
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #c678dd;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e06c75;
+}
+
+.hljs-literal {
+  color: #56b6c2;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: #98c379;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: #e6c07b;
+}
+
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #d19a66;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #61aeee;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+.documentation {
+  line-height: 1.3;
+}
+
+.documentation p {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.documentation h1 {
+  font-size: 1.3rem;
+  font-weight: 600;
+}
+
+.documentation h2 {
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+.documentation h3,
+.documentation h4,
+.documentation h5,
+.documentation h6 {
+  font-size: 1.1rem;
+  font-weight: 500;
+}

apps/frontend/public/normalize.css

@@ -115,7 +115,14 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace;
+  font-family: "Ubuntu Mono",
+    SFMono-Regular,
+    "SF Mono",
+    Menlo,
+    Consolas,
+    "Liberation Mono",
+    ui-monospace,
+    monospace;
   /* 1 */
   font-size: 1em;
   /* 2 */

apps/frontend/src/frontend.ts

@@ -1,4 +1,8 @@
 // @ts-ignore
+import gleamHljs from '@gleam-lang/highlight.js-gleam'
+import hljs from 'highlight.js'
+// @ts-ignore
 import { main } from './frontend.gleam'
 
+hljs.registerLanguage('gleam', gleamHljs)
 document.addEventListener('DOMContentLoaded', main)

apps/frontend/src/frontend/documentation.gleam

@@ -20,5 +20,8 @@ pub fn view(document: String) {
     })
     |> string.join("\n")
     |> converter()
-  h.div([a.attribute("dangerous-unescaped-html", content)], [])
+  h.div(
+    [a.attribute("dangerous-unescaped-html", content), a.class("documentation")],
+    [],
+  )
 }

apps/frontend/src/frontend/view.gleam

@@ -385,7 +385,7 @@ fn empty_state(image: String, title: String, content: String) {
 }
 
 fn body(model: Model) {
-  h.main([s.main_wrapper()], case io.debug(model.search_results) {
+  h.main([s.main_wrapper()], case model.search_results {
     search_result.Start -> [view_search_input(model)]
     search_result.NoSearchResults -> [
       empty_state(

apps/frontend/src/markdown.ffi.mjs

@@ -1,7 +1,9 @@
 import showdown from 'showdown'
+import showdownHighlight from 'showdown-highlight'
 
 export function convert(content) {
   const converter = new showdown.Converter({
+    extensions: [showdownHighlight({ pre: true, auto_detection: true })],
     tasklists: true,
   })
   return converter.makeHtml(content)

apps/frontend/yarn.lock

@@ -726,6 +726,11 @@
   resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.6.tgz#443efa9f761fd4ed8ca60c353e3a44d3a47e81f1"
   integrity sha512-EnfRJvrnzkHwN3BPMCayCFT5lCqInzg3RdlRsDjDvB1EJli6Usj26T6lJ67BU2UcYXBS5xcp1Wj4+zRzj2NaZg==
 
+"@gleam-lang/highlight.js-gleam@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@gleam-lang/highlight.js-gleam/-/highlight.js-gleam-1.5.0.tgz#ab9e43b88b2541a697bcf4d67711c7c4a28adcb3"
+  integrity sha512-rKKpXnfmHVTPuHEogMVvN4DflzKtX6kBXqu1GsVDb0uDf/bvO8Z2VnC0XWUMuKNlxa+poKIjY6geyxTaVZiMFA==
+
 "@grpc/grpc-js@~1.9.0":
   version "1.9.14"
   resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.9.14.tgz#236378822876cbf7903f9d61a0330410e8dcc5a1"
@@ -1127,6 +1132,25 @@ has-flag@^3.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
 
+he@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+highlight.js@^11.5.0, highlight.js@^11.9.0:
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
+  integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
+
+html-encoder-decoder@^1.3.9:
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/html-encoder-decoder/-/html-encoder-decoder-1.3.10.tgz#83a6cd310ddebc92a1319b66177470cf7aa3ad60"
+  integrity sha512-18SjgzQZ9U1mxb96rjcWgWMnTlEzNj2lU2wAU7OeUobdIWXTS6lOGc6419eLhMlX24sNQYDyQfgkSXWjyq/Ilg==
+  dependencies:
+    he "^1.1.0"
+    iterate-object "^1.3.2"
+    regex-escape "^3.4.2"
+
 http-parser-js@>=0.5.1:
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
@@ -1142,6 +1166,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+iterate-object@^1.3.2:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/iterate-object/-/iterate-object-1.3.4.tgz#fa50b1d9e58e340a7dd6b4c98c8a5e182e790096"
+  integrity sha512-4dG1D1x/7g8PwHS9aK6QV5V94+ZvyP4+d19qDv43EzImmrndysIl4prmJ1hWWIGCqrZHyaHBm6BSEWHOLnpoNw==
+
 [email protected]:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
@@ -1226,6 +1255,11 @@ protobufjs@^7.2.4:
     "@types/node" ">=13.7.0"
     long "^5.0.0"
 
+regex-escape@^3.4.2:
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/regex-escape/-/regex-escape-3.4.10.tgz#b45afec7a6e793b786ad193dc3d18b46b5ae08e6"
+  integrity sha512-qEqf7uzW+iYcKNLMDFnMkghhQBnGdivT6KqVQyKsyjSWnoFyooXVnxrw9dtv3AFLnD6VBGXxtZGAQNFGFTnCqA==
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -1265,7 +1299,16 @@ safe-buffer@>=5.1.0:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-showdown@^2.1.0:
+showdown-highlight@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/showdown-highlight/-/showdown-highlight-3.1.0.tgz#c9ec902c35100e1ac3433761cdb655810120f1e5"
+  integrity sha512-wrTxtE63L/bpW5A2Uy/AO1gblXnNHK/cDL6LszECOoCdMJKWTj0/4n4I/pmqub+3H3KCPVDDvtXpCArnT/heFA==
+  dependencies:
+    highlight.js "^11.5.0"
+    html-encoder-decoder "^1.3.9"
+    showdown "^2.0.3"
+
+showdown@^2.0.3, showdown@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/showdown/-/showdown-2.1.0.tgz#1251f5ed8f773f0c0c7bfc8e6fd23581f9e545c5"
   integrity sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==