Skip to content

Search through https://search.quarkus.io #1825

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jan 15, 2024
Merged

Search through https://search.quarkus.io #1825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d4e87dd
Vue.js application for guide search
yrodiere Oct 25, 2023
8220842
Include highlighting in the guide search results
marko-bekhta Nov 14, 2023
6a88482
Raise timeouts
yrodiere Dec 20, 2023
d73e7c6
Don't run guide search when input has only 1 character
yrodiere Dec 20, 2023
b39a5a7
Include the search language in site config
yrodiere Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,31 @@ url: "https://quarkus.io" # the base hostname & protocol for your site, e.g. htt
twitter_username: quarkusio
github_username: quarkusio
github_fork_url: "https://github.com/quarkusio/quarkus"
# The language code for this website, used in particular for search.quarkus.io.
# See https://github.com/quarkusio/search.quarkus.io/blob/main/src/main/java/io/quarkus/search/app/entity/Language.java
language: en
search:
# The URL of the remote search service
url: "https://search.quarkus.io/"
# The amount of time before we give up on a pending remote search and fall back to Javascript search.
# The search service itself is reasonably fast on a decent machine (with curl: ~100ms median, ~150ms 90th percentile).
# but it's slower on prod machines (with curl: ~200ms median, ~400ms 90th percentile),
# and prod network overhead makes it even worse (with curl from France: ~750ms median, ~1000ms 90th percentile),
# so we need a high timeout with some margin for varying network latency depending on browser location.
# Such a high timeout is acceptable since Javascript search is almost instantaneous,
# so when we hit the timeout the user won't experience much more delay.
# See also https://docs.google.com/spreadsheets/d/1w0tSfL-MKFArSrB-L8IX1pxmrhWmQyNgNwQRloG3cLk/edit#gid=456110917
initial-timeout: 1500
# When fetching more pages, a timeout would be very bad for UX
# since we would reset the whole page using Javascript --
# while the user is reading through it!
# This we set a higher timeout value, to make timeouts less likely.
more-timeout: 2500
# The minimum number of characters before we run a full search.
# Below this:
# - if another filter is selected (e.g. categories), we run Javascript search
# - otherwise, we don't run search and just display all guides
min-chars: 2

# Build settings
error_mode: strict
Expand Down
5 changes: 5 additions & 0 deletions _config_dev.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Configuration for development

# We don't want to use the production instance of search.quarkus.io for development.
search:
url: "http://localhost:8080/"
259 changes: 146 additions & 113 deletions _includes/index-docs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,128 +4,161 @@
{% assign categories = index.quarkus.categories %}
{% assign by_type = index.quarkus | map: "types" | first %}


<section class="full-width-version-bg flexfilterbar">
<div class="flexcontainer">
<div class="flexlabel">
<label>By Version</label>
</div>
<div class="pulldown version">
<select id="guidesindex-version-dropdown">
{% for version in site.data.versions.documentation %}
<option value="{{ version }}" {% if docversion == version %}selected{% endif %}>{% if version == 'latest' %}{{ site.data.versions.quarkus.version | replace_regex: "\.[0-9+]\.Final", "" }} - {% endif %}{{ version | capitalize }}{% if version == 'main' %} - SNAPSHOT{% endif %}</option>
{% endfor %}
</select>
</div>
<div class="flexlabel">
<label>By Category</label>
</div>
<div class="pulldown category">
<select id="guidesindex-category-dropdown">
<option value="">All categories</option>
{% for item in categories %}
<option value="{{ item.cat-id }}">{{ item.category }}</option>
{% endfor %}
</select>
</div>
<div class="search">
<input type="text" id="search-text" placeholder="Filter by keyword" />
<div id="guides-app"
data-search-api-server="{{ site.search.url }}"
data-quarkus-version="{{ docversion }}"
data-language="{{ site.language }}"
data-initial-timeout="{{ site.search.initial-timeout }}"
data-more-timeout="{{ site.search.more-timeout }}"
data-min-chars="{{ site.search.min-chars }}">
<section class="full-width-version-bg flexfilterbar">
<div class="flexcontainer">
<div class="flexlabel">
<label>By Version</label>
</div>
<div class="pulldown version">
<select id="guidesindex-version-dropdown">
{% for version in site.data.versions.documentation %}
<option value="{{ version }}" {% if docversion == version %}selected{% endif %}>{% if version == 'latest' %}{{ site.data.versions.quarkus.version | replace_regex: "\.[0-9+]\.Final", "" }} - {% endif %}{{ version | capitalize }}{% if version == 'main' %} - SNAPSHOT{% endif %}</option>
{% endfor %}
</select>
</div>
<div class="flexlabel">
<label>By Category</label>
</div>
<div class="pulldown category">
<select v-model="category">
<option value="">All categories</option>
{% for item in categories %}
<option value="{{ item.cat-id }}">{{ item.category }}</option>
{% endfor %}
</select>
</div>
<div class="search">
<input v-model="text" type="text" placeholder="Filter by keyword" />
</div>
</div>
</div>
</section>

</section>


<div>
<h1 class="title">{{ page.title }}</h1>
</div>
<div class="grid-wrapper guides" id="docs">
{% include index-docs-merge.html type="tutorial" %}
{% if values %}
<div class="grid__item width-12-12 docslist">
<div class="doclist-header">
<h3 id="tutorial">Tutorials</h3>
<p>Short and focused exercises to get you going quickly.</p>
</div>
<div class="grid-wrapper">
{% for guide in values %}
{% include index-doc-item.html class="tutorialbkg" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
</div>
<div>
<h1 class="title">{{ page.title }}</h1>
</div>
{% endif %}
{% include index-docs-merge.html type="howto" %}
{% if values %}
<div class="grid__item width-12-12 docslist">
<div class="doclist-header">
<h3 id="guide">How-to Guides</h3>
<p>Step-by-step guides to covering key tasks, real world operations and common problems.</p>
</div>
<div class="grid-wrapper">
{% for guide in values %}
{% include index-doc-item.html class="guidebkg" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
<div v-if="hasInput" class="grid-wrapper guides results vuejs"
:class="{ empty: !loading && !hasHits, 'vuejs-enabled': true, loading: loading }">
<div class="grid__item width-12-12 docslist">
<Transition name="fade-in">
<div v-if="!loading && !hasHits" class="empty-placeholder">
Sorry, no guides matched your search. Please try again.
</div>
</Transition>
<div class="grid-wrapper">
{% raw %}
<div v-for="hit in searchHits" :class="`${hit.type}bkg grid__item docs-card`">
<h4><a :href="hit.url" :target="hit.url.startsWith('http') ? '_blank' : ''" v-html="hit.title"></a></h4>
<div class="description" v-html="hit.summary"></div>
<div class="content-highlights">
<p v-for="contentLine in hit.content" v-html="contentLine"></p>
</div>
</div>
{% endraw %}
<Transition name="fade-in">
<div v-if="loading" class="loading-placeholder">
Loading...
</div>
</Transition>
</div>
</div>
</div>
{% endif %}
{% include index-docs-merge.html type="concepts" %}
{% if values %}
<div class="grid__item width-12-12 docslist">
<div class="doclist-header">
<h3 id="concept">Concepts</h3>
<p>Explanations of some of the larger concepts and technologies involved with Quarkus.</p>
</div>
<div class="grid-wrapper">
{% for guide in values %}
{% include index-doc-item.html class="conceptbkg" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
<!-- Static content displayed when there is no input in the search form or Javascript is disabled,
but also used as a source of data for cards displayed by the vue.js app. -->
<div v-else class="grid-wrapper guides" id="all-docs">
{% include index-docs-merge.html type="tutorial" %}
{% if values %}
<div class="grid__item width-12-12 docslist">
<div class="doclist-header">
<h3 id="tutorial">Tutorials</h3>
<p>Short and focused exercises to get you going quickly.</p>
</div>
<div class="grid-wrapper">
{% for guide in values %}
{% include index-doc-item.html class="tutorialbkg" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% include index-docs-merge.html type="reference" %}
{% if values %}
<div class="grid__item width-12-12 docslist">
<div class="doclist-header">
<h3 id="reference">References</h3>
<p>Technical Resource that covers tools, components, and commands. The encyclopedia for Quarkus.</p>
{% endif %}
{% include index-docs-merge.html type="howto" %}
{% if values %}
<div class="grid__item width-12-12 docslist">
<div class="doclist-header">
<h3 id="guide">How-to Guides</h3>
<p>Step-by-step guides to covering key tasks, real world operations and common problems.</p>
</div>
<div class="grid-wrapper">
{% for guide in values %}
{% include index-doc-item.html class="howtobkg" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
</div>
</div>
<div class="grid-wrapper">
<div class="grid__item docs-card pdfbkg">
<h4><a href="https://lordofthejars.github.io/quarkus-cheat-sheet/" target="_blank">Quarkus Cheat Sheet</a></h4>
<div class="description">Download full cheatsheet as PDF. <a href="https://developers.redhat.com/search?t=quarkus&f=type%7Echeat_sheet" target="_blank">
Get more cheatsheets on the Red Hat Developers website. <i class="fas fa-external-link-alt"></i></a></div>
<div class="keywords"></div>
<div class="categories"></div>
</div>
{% for guide in values %}
{% include index-doc-item.html class="referencebkg" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
{% endif %}
{% include index-docs-merge.html type="concepts" %}
{% if values %}
<div class="grid__item width-12-12 docslist">
<div class="doclist-header">
<h3 id="concept">Concepts</h3>
<p>Explanations of some of the larger concepts and technologies involved with Quarkus.</p>
</div>
<div class="grid-wrapper">
{% for guide in values %}
{% include index-doc-item.html class="conceptsbkg" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% include index-docs-merge.html type="guide" %}
{% if values %}
<div class="grid__item width-12-12 docslist">
<div class="doclist-header">
<h3 id="reference">General Guides</h3>
<p>Other Quarkus Guides</p>
{% endif %}
{% include index-docs-merge.html type="reference" %}
{% if values %}
<div class="grid__item width-12-12 docslist">
<div class="doclist-header">
<h3 id="reference">References</h3>
<p>Technical Resource that covers tools, components, and commands. The encyclopedia for Quarkus.</p>
</div>
<div class="grid-wrapper">
<div class="grid__item docs-card pdfbkg">
<h4><a href="https://lordofthejars.github.io/quarkus-cheat-sheet/" target="_blank">Quarkus Cheat Sheet</a></h4>
<div class="description">Download full cheatsheet as PDF. <a href="https://developers.redhat.com/search?t=quarkus&f=type%7Echeat_sheet" target="_blank">
Get more cheatsheets on the Red Hat Developers website. <i class="fas fa-external-link-alt"></i></a></div>
<div class="keywords"></div>
<div class="categories"></div>
</div>
{% for guide in values %}
{% include index-doc-item.html class="referencebkg" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
</div>
</div>
<div class="grid-wrapper">
{% for guide in values %}
{% include index-doc-item.html class="referencebkg" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
{% endif %}
{% include index-docs-merge.html type="guide" %}
{% if values %}
<div class="grid__item width-12-12 docslist">
<div class="doclist-header">
<h3>General Guides</h3>
<p>Other Quarkus Guides</p>
</div>
<div class="grid-wrapper">
{% for guide in values %}
{% include index-doc-item.html class="guidebkg" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endif %}
<div class="grid__item width-12-12 empty-list">Sorry, no guides matched your search. Please try again.</div>
</div>
<script src="/assets/javascript/guides-app.js" type="module"></script>
Loading