move search to a separate page

Author: emad-elsaid

extensions/search/search.go

@@ -29,23 +29,31 @@ func (Search) Init() {
 	}
 
 	RequireHTMX()
-	Get(`/+/search`, searchHandler)
+	Get(`/+/search`, searchFormHandler)
+	Get(`/+/search-result`, searchResultHandler)
 	RegisterWidget("search", 0, searchWidget)
 	RegisterTemplate(templates, "templates")
 }
 
 func searchWidget(Page) template.HTML {
-	return Partial("search-widget", nil)
+	return Partial("search", nil)
 }
 
-func searchHandler(r Request) Output {
-	return Render("search-datalist", Locals{
+func searchFormHandler(r Request) Output {
+	return Render("search-form", Locals{
+		"page":    DynamicPage{NameVal: "Create"},
+		"results": search(r.Context(), r.FormValue("q")),
+	})
+}
+
+func searchResultHandler(r Request) Output {
+	return Render("search-result", Locals{
 		"results": search(r.Context(), r.FormValue("q")),
 	})
 }
 
 type searchResult struct {
-	Page string
+	Page Page
 	Line string
 }
 
@@ -61,15 +69,15 @@ func search(ctx context.Context, keyword string) []*searchResult {
 		match := reg.FindString(p.Name())
 		if len(match) > 0 {
 			return &searchResult{
-				Page: p.Name(),
+				Page: p,
 				Line: "Matches the file name",
 			}
 		}
 
 		match = reg.FindString(string(p.Content()))
 		if len(match) > 0 {
 			return &searchResult{
-				Page: p.Name(),
+				Page: p,
 				Line: match,
 			}
 		}

extensions/search/templates/search-datalist.html

@@ -1,18 +1,18 @@
+{{ template "header" . }}
 <div class="field has-addons">
   <div class="control is-expanded">
     <input type="text"
            id="newPage"
            name="q"
-           hx-get="/+/search"
+           hx-get="/+/search-result"
            hx-trigger="keyup delay:0.2s"
-           hx-target="next"
-           list="searchResults"
+           hx-target="#searchResults"
            class="input"
            placeholder="New/Search..."
            onkeyup="if(event.keyCode == 13){ document.location.pathname = this.value }"
            autocomplete="off"
+           autofocus
     />
-    <datalist id="searchResults"></datalist>
   </div>
   <div class="control">
     <a class="button" onclick="document.location.pathname = document.getElementById('newPage').value">
@@ -21,15 +21,8 @@
   </div>
 </div>
 
-<script type="application/javascript">
- document.addEventListener('selectionchange', function() {
-     let selection = window.getSelection();
-     let text = selection.toString();
+<aside class="menu">
+  <div class="menu-list" id="searchResults"></div>
+</aside>
 
-     if( text.length == 0 ) { return; }
-     // Ignore selection in the input itself
-     if( selection.anchorNode.className == 'control is-expanded' ) { return; }
-
-     document.getElementById('newPage').value = text;
- })
-</script>
+{{ template "footer" . }}

…ions/search/templates/search-widget.html …nsions/search/templates/search-form.htmlextensions/search/templates/search-widget.html renamed to extensions/search/templates/search-form.html extensions/search/templates/search-widget.html renamed to extensions/search/templates/search-form.html

@@ -0,0 +1,14 @@
+{{ range .results }}
+<div>
+  <a href="/{{.Page.Name}}">
+    <strong class="is-block mb-1">
+      {{ with .Page }}
+      {{.Emoji}}
+      {{ $props := properties . }}
+      {{ with $props.title }} {{ .Value }} {{ else }} {{ .Name }} {{ end }}
+      {{ end }}
+    </strong>
+    {{.Line}}
+  </a>
+</div>
+{{ end }}

extensions/search/templates/search-result.html

@@ -0,0 +1,4 @@
+<a class="button" href="/+/search">
+  <span>Create</span>
+  <span class="icon"><i class="fa-solid fa-plus"></i></span>
+</a>

extensions/search/templates/search.html

@@ -16,6 +16,7 @@ var helpers = template.FuncMap{
 	"widgets":        RenderWidget,
 	"commands":       Commands,
 	"quick_commands": QuickCommands,
+	"isFontAwesome":  IsFontAwesome,
 	"includeJS":      includeJS,
 	"scripts":        scripts,
 }
@@ -127,3 +128,7 @@ func scripts() template.HTML {
 
 	return template.HTML(b.String())
 }
+
+func IsFontAwesome(i string) bool {
+	return strings.HasPrefix(i, "fa")
+}

helpers.go

@@ -22,6 +22,11 @@
       {{- if .page }}
       {{- range $i, $a := links .page -}}
       <a {{ range $k, $v := .Attrs }}{{$k}}="{{$v}}" {{end}} class="navbar-item">
+        {{ with .Icon }}
+        <span class="icon">
+          {{ if isFontAwesome . }}<i class="{{.}}"></i> {{ else }} {{.}} {{ end }}
+        </span>
+        {{ end }}
         <span>{{.Name}}</span>
       </a>
       {{- end -}}