centersl/docker-docs
1
0
Fork 0
mirror of https://github.com/docker/docs.git synced 2026-03-27 06:18:55 +07:00
Code Issues Packages Projects Releases Wiki Activity

site: improve custom template for search results

Browse Source 
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson
2026-02-10 09:15:51 +01:00
parent cf935f3518
commit 38f3ab3988
1 changed files with 25 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
layouts/partials/search-bar.html
View File

@@ -43,7 +43,31 @@
Start typing to search the documentation
</p>
<pagefind-summary></pagefind-summary>
<pagefind-results></pagefind-results>
<pagefind-results>
<script type="text/pagefind-template">
<li class="py-3 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<p class="font-medium">
<a class="text-blue-600 dark:text-blue-400 hover:underline" href="{{ print "{{ meta.url | default(url) | safeUrl }}" }}">
{{ print "{{ meta.title }}" }}
</a>
</p>
{{ print "{{#if excerpt}}" }}
<p class="text-gray-600 dark:text-gray-400 mt-1 text-sm">{{ print "{{+ excerpt +}}" }}</p>
{{ print "{{/if}}" }}
{{ print "{{#if sub_results}}" }}
<ul class="mt-3 ml-4 flex flex-wrap gap-2">
{{ print "{{#each sub_results as sub}}" }}
<li class="text-sm">
<a class="text-blue-600 dark:text-blue-400 hover:underline" href="{{ print "{{ sub.url | safeUrl }}" }}">
{{ print "{{ sub.title }}" }}
</a>
</li>
{{ print "{{/each}}" }}
</ul>
{{ print "{{/if}}" }}
</li>
</script>
</pagefind-results>
</pagefind-modal-body>
</pagefind-modal>
`);
@@ -51,47 +75,6 @@
const modal = document.getElementById('search-modal');
const placeholder = document.getElementById('search-placeholder');
// Custom result template
modal.querySelector('pagefind-results').resultTemplate = (result) => {
const li = document.createElement('li');
li.className = 'py-3 border-b border-gray-200 dark:border-gray-700 last:border-b-0';
const title = document.createElement('p');
title.className = 'font-medium';
const link = document.createElement('a');
link.className = 'text-blue-600 dark:text-blue-400 hover:underline';
link.href = result.meta.url || result.url;
link.textContent = result.meta.title;
title.appendChild(link);
li.appendChild(title);
if (result.excerpt) {
const excerpt = document.createElement('p');
excerpt.className = 'text-gray-600 dark:text-gray-400 mt-1 text-sm';
excerpt.innerHTML = result.excerpt;
li.appendChild(excerpt);
}
if (result.sub_results?.length) {
const ul = document.createElement('ul');
ul.className = 'mt-3 ml-4 flex flex-wrap gap-2';
for (const sub of result.sub_results) {
const subLi = document.createElement('li');
subLi.className = 'text-sm';
const subLink = document.createElement('a');
subLink.className = 'text-blue-600 dark:text-blue-400 hover:underline';
subLink.href = sub.url;
subLink.textContent = sub.title;
subLi.appendChild(subLink);
ul.appendChild(subLi);
}
li.appendChild(ul);
}
return li;
};
// Show/hide placeholder based on search state
const instance = getInstanceManager().getInstance('default');
instance.on('search', (term) => {