feat: display results in a table, showing details on click

4 files changed, 71 insertions, 142 deletions

diff --git a/frontend/templates/blocks/options.gotmpl b/frontend/templates/blocks/options.gotmpl
index de31696..5a08bae 100644
--- a/frontend/templates/blocks/options.gotmpl
+++ b/frontend/templates/blocks/options.gotmpl
@@ -1,54 +1,25 @@
 {{- define "hits" }}
-  {{- range . }}
-    {{- with .Data }}
-      <details id="{{ .Name }}">
-        <summary>
-          <h3>{{ .Name }}</h3>
-        </summary>
-        {{ markdown .Description }}
-        <dl>
-          {{- with .Type }}
-            <dt>Type</dt>
-            <dd><code>{{ . }}</code></dd>
-          {{- end }}
-          {{- with .Default }}
-            {{- if or .Text .Markdown }}
-              <dt>Default</dt>
-              <dd>
-                {{- if .Markdown }}
-                  {{ markdown .Markdown }}
-                {{- else }}
-                  <pre><code>{{ .Text }}</code></pre>
-                {{- end }}
-              </dd>
-            {{- end }}
-          {{- end }}
-          {{- with .Example }}
-            {{- if or .Text .Markdown }}
-              <dt>Example</dt>
-              <dd>
-                {{- if .Markdown }}
-                  {{ markdown .Markdown }}
-                {{- else }}
-                  <pre><code>{{ .Text }}</code></pre>
-                {{- end }}
-              </dd>
-            {{- end }}
-          {{- end }}
-          {{- with .RelatedPackages }}
-            <dt>Related Packages</dt>
-            <dd>{{ . }}</dd>
-          {{- end }}
-          {{- with .Declarations }}
-            <dt>Declared</dt>
-            {{- range . }}
-              <dd>
-                <a href="{{ .URL }}">{{ .Name }}</a>
-              </dd>
-            {{- end }}
-          {{- end }}
-        </dl>
-      </details>
-    {{- end }}
-  {{- end }}
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Title</th>
+        <th scope="col">Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{- range . }}
+        {{- with .Data }}
+          <tr>
+            <td>
+              <a href="{{ .Name }}" class="open-dialog">{{ .Name }}</a>
+            </td>
+            <td>
+              {{ markdown (firstSentence .Description) }}
+              <dialog id="{{ .Name }}"></dialog>
+            </td>
+          </tr>
+        {{- end }}
+      {{- end }}
+    </tbody>
+  </table>
 {{- end }}
diff --git a/frontend/templates/blocks/packages.gotmpl b/frontend/templates/blocks/packages.gotmpl
index 90ba0b2..cce97a0 100644
--- a/frontend/templates/blocks/packages.gotmpl
+++ b/frontend/templates/blocks/packages.gotmpl
@@ -1,75 +1,30 @@
 {{- define "hits" }}
-  {{- range . }}
-    {{- with .Data }}
-      <details id="{{ .Name }}">
-        <summary>
-          <h3>
-            {{- if .Broken }}
-              <del>{{ .Attribute }}</del>
-            {{- else }}
-              {{ .Attribute }}
-            {{- end }}
-          </h3>
-        </summary>
-        {{- if .LongDescription }}
-          {{ markdown .LongDescription }}
-        {{- else }}
-          <p>{{ .Description }}</p>
-        {{- end }}
-        <dl>
-          {{- with .MainProgram }}
-            <dt>Main Program</dt>
-            <dd>
-              <code>{{ . }}</code>
-            </dd>
-          {{- end }}
-          {{- with .Homepages }}
-            <dt>Homepage</dt>
-            <dd>
-              {{- range . }}
-                <a href="{{ . }}">{{ . }}</a>
-              {{- end }}
-            </dd>
-          {{- end }}
-          {{- with .Version }}
-            <dt>Version</dt>
-            <dd>{{ . }}</dd>
-          {{- end }}
-          {{- with .Licenses }}
-            <dt>License</dt>
-            <dd>
-              {{- range . }}
-                {{- if .URL }}
-                  <a href="{{ .URL }}">{{ or .FullName .Name }}</a>
-                {{- else }}
-                  {{ or .FullName .Name }}
-                {{- end }}
-                {{- with .AppendixURL }}
-                  <a href="{{ . }}">Appendix</a>
-                {{- end }}
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Attribute</th>
+        <th scope="col">Name</th>
+        <th scope="col">Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{- range . }}
+        {{- with .Data }}
+          <tr>
+            <td>
+              {{- with .Attribute }}
+                <a href="{{ . }}" class="open-dialog">{{ . }}</a>
               {{- end }}
-            </dd>
-          {{- end }}
-          {{- with .Maintainers }}
-            <dt>Maintainer{{ if gt (len .) 1 }}s{{ end }}</dt>
-            <dd>
-              {{- range . }}
-                {{- if .Github }}
-                  <a href="https://github.com/{{ .Github }}">{{ .Name }}</a>
-                {{- else }}
-                  {{ .Name }}
-                {{- end }}
-              {{- end }}
-            </dd>
-          {{- end }}
-          {{- with .Definition }}
-            <dt>Defined</dt>
-            <dd>
-              <a href="{{ . }}">Source</a>
-            </dd>
-          {{- end }}
-        </dl>
-      </details>
-    {{- end }}
-  {{- end }}
+            </td>
+            <td>
+              {{ .Name }}
+            </td>
+            <td>
+              {{ .Description }}
+            </td>
+          </tr>
+        {{- end }}
+      {{- end }}
+    </tbody>
+  </table>
 {{- end }}
diff --git a/frontend/templates/blocks/results.gotmpl b/frontend/templates/blocks/results.gotmpl
index c375156..ef6e1f1 100644
--- a/frontend/templates/blocks/results.gotmpl
+++ b/frontend/templates/blocks/results.gotmpl
@@ -1,21 +1,19 @@
 {{- define "results" }}
   {{- with .Results }}
     {{- if gt .Total 0 }}
-      <section id="results" role="list" aria-label="search results">
-        {{ block "hits" .Hits }}
-        {{ end }}
-        <footer aria-label="pagination">
-          <nav id="pagination">
-            {{- with $.Prev }}
-              <a class="button" href="{{ . }}" rel="prev">Prev</a>
-            {{- end }}
-            {{- with $.Next }}
-              <a class="button" href="{{ . }}" rel="next">Next</a>
-            {{- end }}
-          </nav>
-          <span role="status">{{ .Total }} results</span>
-        </footer>
-      </section>
+      {{ block "hits" .Hits }}
+      {{ end }}
+      <footer aria-label="pagination">
+        <nav id="pagination">
+          {{- with $.Prev }}
+            <a class="button" href="{{ . }}" rel="prev">Prev</a>
+          {{- end }}
+          {{- with $.Next }}
+            <a class="button" href="{{ . }}" rel="next">Next</a>
+          {{- end }}
+        </nav>
+        <span role="status">{{ .Total }} results</span>
+      </footer>
     {{- else }}
       <span role="status">Nothing found</span>
     {{- end }}
diff --git a/frontend/templates/blocks/search.gotmpl b/frontend/templates/blocks/search.gotmpl
index 9320376..93ae545 100644
--- a/frontend/templates/blocks/search.gotmpl
+++ b/frontend/templates/blocks/search.gotmpl
@@ -16,9 +16,14 @@
       <button>Search</button>
     </fieldset>
   </form>
-  {{- if .Results }}
-    {{ block "results" . }}{{ end }}
-  {{- end }}
+  <section id="results" role="list" aria-label="search results">
+    {{- if .Results }}
+      {{ block "results" . }}{{ end }}
+    {{- end }}
+  </section>
+  <dialog id="dialog">
+    <button autofocus>Close</button>
+  </dialog>
 {{- end }}
 
 {{- define "head" }}