Skip to content

Commit

Permalink
Vue.js application for guide search
Browse files Browse the repository at this point in the history
  • Loading branch information
@yrodiere
yrodiere committed Nov 9, 2023
1 parent 318f33a commit c3cc7cb
Show file tree
Hide file tree
Showing 15 changed files with 550 additions and 315 deletions.
17 changes: 17 additions & 0 deletions _config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,23 @@ 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"
search:
# The minimum number of characters before we rely on remote search
# Below this, we rely on Javascript search
min-chars: 2
# The URL of the remote search service
# TODO use the actual, prod app here
url: "https://search-quarkus-io-dev-search-quarkus-io.apps.ospo-osci.z3b1.p1.openshiftapps.com/"
# The amount of time before we give up on a pending remote search and fall back to Javascript search
# The search service itself is rather fast (~10-30ms) but it's hosted in only one datacenter,
# so depending on how far from it you are, you can expect quite high latency...
# 500ms won't cut it for a DSL connection in France, for example.
initial-timeout: 1000
# 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: 2000

# Build settings
error_mode: strict
Expand Down
5 changes: 5 additions & 0 deletions _config_dev.yml
View file
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/"
254 changes: 141 additions & 113 deletions _includes/index-docs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,128 +4,156 @@
{% 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-url="{{ site.search.url }}"
data-initial-timeout="{{ site.search.initial-timeout }}"
data-more-timeout="{{ site.search.more-timeout }}"
data-min-chars="{{ site.search.min-chars }}"
data-quarkus-version="{{ docversion }}">
<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="debouncingSearchInputText" 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">
<div v-for="card in cardHits"
v-html="card.innerHTML"
class="grid__item docs-card"
:class="Array.from(card.classList)">
</div>
<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="guidebkg" 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%7Echeatsheet" 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="conceptbkg" 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%7Echeatsheet" 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="referencebkg" 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

0 comments on commit c3cc7cb

Please sign in to comment.