Do not use highlights, show initial paragraph

Author: josevalim

src/hexdocs/data/model.gleam

@@ -59,7 +59,7 @@ pub type Model {
     autocomplete_search_focused: AutocompleteFocused,
     /// Keeps the results from TypeSense.
     /// `#(Page, List(Results))`.
-    search_result: Option(#(Int, List(hexdocs.TypeSense))),
+    search_result: Option(#(Int, List(hexdocs.Document))),
     /// Stores the current value of the search bar on top of the search page.
     search_input: String,
     /// Stores the current state of the different previews opened in
@@ -388,7 +388,7 @@ pub fn get_selected_package_filter_name(model: Model) {
 
 pub fn set_search_results(
   model: Model,
-  search_result: #(Int, List(hexdocs.TypeSense)),
+  search_result: #(Int, List(hexdocs.Document)),
 ) -> Model {
   let search_result = Some(search_result)
   Model(..model, search_result:)

src/hexdocs/services/hex.gleam

@@ -26,18 +26,6 @@ pub fn package_versions(name: String) {
   })
 }
 
-pub fn go_to_link(document: hexdocs.Document) {
-  case string.split(document.package, on: "-") {
-    [name, version, ..rest] -> {
-      let version = string.join([version, ..rest], with: "-")
-      [config.hexdocs_url(), name, version, document.ref]
-      |> string.join(with: "/")
-      |> Ok
-    }
-    _ -> Error(Nil)
-  }
-}
-
 pub fn preview_link(document: hexdocs.Document, theme: String) {
   let assert [name, vsn] = string.split(document.package, on: "-")
   [config.hexdocs_url(), name, vsn, document.ref]

src/hexdocs/services/hexdocs.gleam

@@ -5,18 +5,14 @@ import gleam/http/request
 import gleam/int
 import gleam/javascript/promise
 import gleam/list
-import gleam/option.{type Option, None, Some}
+import gleam/option.{Some}
 import gleam/result
 import gleam/string
 import gleam/uri
 import hexdocs/config
 import hexdocs/endpoints
 import hexdocs/loss
 
-pub type TypeSense {
-  TypeSense(document: Document, highlight: Highlights)
-}
-
 pub type Document {
   Document(
     doc: String,
@@ -29,14 +25,6 @@ pub type Document {
   )
 }
 
-pub type Highlights {
-  Highlights(doc: Option(Highlight), title: Option(Highlight))
-}
-
-pub type Highlight {
-  Highlight(matched_tokens: List(String), snippet: String)
-}
-
 pub fn packages() {
   let endpoint = endpoints.packages()
   let assert Ok(request) = request.from_uri(endpoint)
@@ -73,13 +61,7 @@ pub fn typesense_decoder() {
         Document(doc:, id:, package:, proglang:, ref:, title:, type_:)
         |> decode.success
       })
-      use highlight <- decode.field("highlight", {
-        let highlight = highlight_decoder() |> decode.map(Some)
-        use doc <- decode.optional_field("doc", None, highlight)
-        use title <- decode.optional_field("title", None, highlight)
-        decode.success(Highlights(doc:, title:))
-      })
-      decode.success(TypeSense(document:, highlight:))
+      decode.success(document)
     })
   })
   decode.success(#(found, hits))
@@ -96,6 +78,7 @@ fn new_search_query_params(
   |> list.key_set("query_by_weights", "3,1,1")
   |> list.key_set("page", int.to_string(page))
   |> list.key_set("per_page", int.to_string(config.per_page()))
+  |> list.key_set("highlight_fields", "none")
   |> add_filter_by_packages_param(packages)
   |> uri.query_to_string
 }
@@ -112,10 +95,32 @@ fn add_filter_by_packages_param(
   |> list.key_set(query, "filter_by", _)
 }
 
-fn highlight_decoder() {
-  let matched_tokens = decode.list(decode.string)
-  use matched_tokens <- decode.field("matched_tokens", matched_tokens)
-  use snippet <- decode.field("snippet", decode.string)
-  Highlight(matched_tokens:, snippet:)
-  |> decode.success
+pub fn snippet(doc: String, search_input: String) -> String {
+  // Extract first paragraph
+  let first_paragraph = case string.split(doc, on: "\r\n\r\n") {
+    [single] ->
+      case string.split(single, on: "\n\n") {
+        [first, ..] -> first
+        [] -> doc
+      }
+    [first, ..] -> first
+    [] -> doc
+  }
+
+  // Truncate to reasonable length (around 200 characters)
+  let truncated = case string.length(first_paragraph) > 200 {
+    True -> string.slice(first_paragraph, 0, 200) <> "..."
+    False -> first_paragraph
+  }
+
+  // Highlight search terms
+  case string.trim(search_input) {
+    "" -> truncated
+    search_term ->
+      string.replace(
+        truncated,
+        search_term,
+        "<strong>" <> search_term <> "</strong>",
+      )
+  }
 }

src/hexdocs/view/search.gleam

@@ -316,8 +316,8 @@ pub fn search(model: Model) {
                         True -> "Found "
                         False ->
                           "Showing first "
-                          |> string.append(int.to_string(config.per_page()))
-                          |> string.append(" out of ")
+                          <> int.to_string(config.per_page())
+                          <> " out of "
                       }
                       |> string.append(int.to_string(count))
                       |> string.append(" results")
@@ -467,68 +467,38 @@ fn trash_button(filter: #(String, String)) {
   ])
 }
 
-fn result_card(model: Model, result: hexdocs.TypeSense) {
+fn result_card(model: Model, document: hexdocs.Document) {
+  let display_url =
+    "/" <> string.replace(document.package, "-", "/") <> "/" <> document.ref
+  let link_url = config.hexdocs_url() <> display_url
+
   html.div([class("w-full bg-slate-100 dark:bg-slate-800 rounded-2xl p-4")], [
-    html.div([class("text-slate-700 dark:text-slate-300 text-sm")], [
-      html.text(result.document.package),
-    ]),
-    html.h3(
+    html.a(
       [
-        class(
-          "text-slate-950 dark:text-slate-50 text-xl font-semibold leading-loose mt-1",
-        ),
+        attribute.href(link_url),
+        class("text-green-700 dark:text-green-400 text-sm hover:underline"),
       ],
-      [html.text(result.document.title)],
+      [html.text(display_url)],
     ),
-    // element.unsafe_raw_html(
-    //   "",
-    //   "p",
-    //   [
-    //     class(
-    //       "mt-4 text-slate-800 dark:text-slate-300 leading-normal line-clamp-2 overflow-hidden",
-    //     ),
-    //   ],
-    //   result.document.doc,
-    // ),
-    html.div(
+    html.a(
       [
+        attribute.href(link_url),
         class(
-          "mt-2 inline-flex px-3 py-0.5 bg-slate-300 dark:bg-slate-700 rounded-full",
+          "text-blue-700 dark:text-blue-300 text-xl font-normal leading-tight mt-1 hover:underline block",
         ),
       ],
-      [
-        html.span([class("text-blue-600 dark:text-blue-400 text-sm")], [
-          html.text(result.document.ref),
-        ]),
-      ],
+      [html.text(document.title)],
+    ),
+    element.unsafe_raw_html(
+      "",
+      "p",
+      [class("text-slate-800 dark:text-slate-300 leading-normal mt-2")],
+      hexdocs.snippet(document.doc, model.search_input),
     ),
-    case result.highlight {
-      hexdocs.Highlights(doc: Some(doc), ..) -> {
-        element.unsafe_raw_html(
-          "",
-          "p",
-          [
-            class(
-              "mt-4 text-slate-800 dark:text-slate-300 leading-normal line-clamp-2 overflow-hidden",
-            ),
-          ],
-          doc.snippet,
-        )
-        // html.text("Channels are a really good abstraction"),
-        // html.span(
-        //   [class("bg-slate-950 text-slate-100 px-1 rounded")],
-        //   [html.text("for")],
-        // ),
-        // html.text(
-        //   "real-time communication. They are bi-directional and persistent connections between the browser and server...",
-        // )
-      }
-      _ -> element.none()
-    },
     html.div([class("mt-4 flex flex-wrap gap-3")], [
       html.button(
         [
-          event.on_click(msg.UserToggledPreview(result.document.id)),
+          event.on_click(msg.UserToggledPreview(document.id)),
           class(
             "h-10 px-4 py-2.5 bg-slate-100 dark:bg-slate-700 rounded-lg border border-slate-300 dark:border-slate-600 flex items-center justify-center",
           ),
@@ -541,35 +511,12 @@ fn result_card(model: Model, result: hexdocs.TypeSense) {
           card_icon("ri-arrow-down-s-line"),
         ],
       ),
-      case hex.go_to_link(result.document) {
-        Error(_) -> element.none()
-        Ok(link) ->
-          html.a(
-            [
-              attribute.href(link),
-              class(
-                "h-10 px-4 py-2.5 bg-slate-100 dark:bg-slate-700 rounded-lg border border-slate-300 dark:border-slate-600 flex items-center justify-center",
-              ),
-            ],
-            [
-              html.span(
-                [
-                  class(
-                    "text-slate-800 dark:text-slate-200 text-sm font-semibold",
-                  ),
-                ],
-                [html.text("Go to Page")],
-              ),
-              card_icon("ri-external-link-line"),
-            ],
-          )
-      },
     ]),
-    case dict.get(model.search_opened_previews, result.document.id) {
+    case dict.get(model.search_opened_previews, document.id) {
       Ok(False) | Error(_) -> element.none()
       Ok(True) -> {
         case
-          hex.preview_link(result.document, case model.dark_mode.mode {
+          hex.preview_link(document, case model.dark_mode.mode {
             msg.Dark -> "dark"
             msg.Light -> "light"
           })
@@ -581,7 +528,7 @@ fn result_card(model: Model, result: hexdocs.TypeSense) {
               [
                 iframe.iframe([
                   iframe.to(link),
-                  iframe.title(result.document.package),
+                  iframe.title(document.package),
                 ]),
               ],
             )