Skip to content

Commit 3b241ac

Browse files
yrodiereyrodiere
committed
Vue.js application for guide search
1 parent 318f33a commit 3b241ac

15 files changed

+550
-315
lines changed

‎_config.yml

+17
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,23 @@ url: "https://quarkus.io" # the base hostname & protocol for your site, e.g. htt
2222
twitter_username: quarkusio
2323
github_username: quarkusio
2424
github_fork_url: "https://github.com/quarkusio/quarkus"
25+
search:
26+
# The minimum number of characters before we rely on remote search
27+
# Below this, we rely on Javascript search
28+
min-chars: 2
29+
# The URL of the remote search service
30+
# TODO use the actual, prod app here
31+
url: "https://search-quarkus-io-dev-search-quarkus-io.apps.ospo-osci.z3b1.p1.openshiftapps.com/"
32+
# The amount of time before we give up on a pending remote search and fall back to Javascript search
33+
# The search service itself is rather fast (~10-30ms) but it's hosted in only one datacenter,
34+
# so depending on how far from it you are, you can expect quite high latency...
35+
# 500ms won't cut it for a DSL connection in France, for example.
36+
initial-timeout: 1000
37+
# When fetching more pages, a timeout would be very bad for UX
38+
# since we would reset the whole page using Javascript --
39+
# while the user is reading through it!
40+
# This we set a higher timeout value, to make timeouts less likely.
41+
more-timeout: 2000
2542

2643
# Build settings
2744
error_mode: strict

‎_config_dev.yml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Configuration for development
2+
3+
# We don't want to use the production instance of search.quarkus.io for development.
4+
search:
5+
url: "http://localhost:8080/"

‎_includes/index-docs.html

+141-113
Original file line numberDiff line numberDiff line change
@@ -4,128 +4,156 @@
44
{% assign categories = index.quarkus.categories %}
55
{% assign by_type = index.quarkus | map: "types" | first %}
66

7-
8-
<section class="full-width-version-bg flexfilterbar">
9-
<div class="flexcontainer">
10-
<div class="flexlabel">
11-
<label>By Version</label>
12-
</div>
13-
<div class="pulldown version">
14-
<select id="guidesindex-version-dropdown">
15-
{% for version in site.data.versions.documentation %}
16-
<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>
17-
{% endfor %}
18-
</select>
19-
</div>
20-
<div class="flexlabel">
21-
<label>By Category</label>
22-
</div>
23-
<div class="pulldown category">
24-
<select id="guidesindex-category-dropdown">
25-
<option value="">All categories</option>
26-
{% for item in categories %}
27-
<option value="{{ item.cat-id }}">{{ item.category }}</option>
28-
{% endfor %}
29-
</select>
30-
</div>
31-
<div class="search">
32-
<input type="text" id="search-text" placeholder="Filter by keyword" />
7+
<div id="guides-app"
8+
data-url="{{ site.search.url }}"
9+
data-initial-timeout="{{ site.search.initial-timeout }}"
10+
data-more-timeout="{{ site.search.more-timeout }}"
11+
data-min-chars="{{ site.search.min-chars }}"
12+
data-quarkus-version="{{ docversion }}">
13+
<section class="full-width-version-bg flexfilterbar">
14+
<div class="flexcontainer">
15+
<div class="flexlabel">
16+
<label>By Version</label>
17+
</div>
18+
<div class="pulldown version">
19+
<select id="guidesindex-version-dropdown">
20+
{% for version in site.data.versions.documentation %}
21+
<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>
22+
{% endfor %}
23+
</select>
24+
</div>
25+
<div class="flexlabel">
26+
<label>By Category</label>
27+
</div>
28+
<div class="pulldown category">
29+
<select v-model="category">
30+
<option value="">All categories</option>
31+
{% for item in categories %}
32+
<option value="{{ item.cat-id }}">{{ item.category }}</option>
33+
{% endfor %}
34+
</select>
35+
</div>
36+
<div class="search">
37+
<input v-model="debouncingSearchInputText" type="text" placeholder="Filter by keyword" />
38+
</div>
3339
</div>
34-
</div>
35-
</section>
36-
40+
</section>
3741

38-
39-
<div>
40-
<h1 class="title">{{ page.title }}</h1>
41-
</div>
42-
<div class="grid-wrapper guides" id="docs">
43-
{% include index-docs-merge.html type="tutorial" %}
44-
{% if values %}
45-
<div class="grid__item width-12-12 docslist">
46-
<div class="doclist-header">
47-
<h3 id="tutorial">Tutorials</h3>
48-
<p>Short and focused exercises to get you going quickly.</p>
49-
</div>
50-
<div class="grid-wrapper">
51-
{% for guide in values %}
52-
{% include index-doc-item.html class="tutorialbkg" docversion=docversion
53-
title=guide.title url=guide.url summary=guide.summary
54-
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
55-
{% endfor %}
56-
</div>
42+
<div>
43+
<h1 class="title">{{ page.title }}</h1>
5744
</div>
58-
{% endif %}
59-
{% include index-docs-merge.html type="howto" %}
60-
{% if values %}
61-
<div class="grid__item width-12-12 docslist">
62-
<div class="doclist-header">
63-
<h3 id="guide">How-to Guides</h3>
64-
<p>Step-by-step guides to covering key tasks, real world operations and common problems.</p>
65-
</div>
66-
<div class="grid-wrapper">
67-
{% for guide in values %}
68-
{% include index-doc-item.html class="guidebkg" docversion=docversion
69-
title=guide.title url=guide.url summary=guide.summary
70-
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
71-
{% endfor %}
45+
<div v-if="hasInput" class="grid-wrapper guides results vuejs"
46+
:class="{ empty: !loading && !hasHits, 'vuejs-enabled': true, loading: loading }">
47+
<div class="grid__item width-12-12 docslist">
48+
<Transition name="fade-in">
49+
<div v-if="!loading && !hasHits" class="empty-placeholder">
50+
Sorry, no guides matched your search. Please try again.
51+
</div>
52+
</Transition>
53+
<div class="grid-wrapper">
54+
<div v-for="card in cardHits"
55+
v-html="card.innerHTML"
56+
class="grid__item docs-card"
57+
:class="Array.from(card.classList)">
58+
</div>
59+
<Transition name="fade-in">
60+
<div v-if="loading" class="loading-placeholder">
61+
Loading...
62+
</div>
63+
</Transition>
64+
</div>
7265
</div>
7366
</div>
74-
{% endif %}
75-
{% include index-docs-merge.html type="concepts" %}
76-
{% if values %}
77-
<div class="grid__item width-12-12 docslist">
78-
<div class="doclist-header">
79-
<h3 id="concept">Concepts</h3>
80-
<p>Explanations of some of the larger concepts and technologies involved with Quarkus.</p>
81-
</div>
82-
<div class="grid-wrapper">
83-
{% for guide in values %}
84-
{% include index-doc-item.html class="conceptbkg" docversion=docversion
85-
title=guide.title url=guide.url summary=guide.summary
86-
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
87-
{% endfor %}
67+
<!-- Static content displayed when there is no input in the search form or Javascript is disabled,
68+
but also used as a source of data for cards displayed by the vue.js app. -->
69+
<div v-else class="grid-wrapper guides" id="all-docs">
70+
{% include index-docs-merge.html type="tutorial" %}
71+
{% if values %}
72+
<div class="grid__item width-12-12 docslist">
73+
<div class="doclist-header">
74+
<h3 id="tutorial">Tutorials</h3>
75+
<p>Short and focused exercises to get you going quickly.</p>
76+
</div>
77+
<div class="grid-wrapper">
78+
{% for guide in values %}
79+
{% include index-doc-item.html class="tutorialbkg" docversion=docversion
80+
title=guide.title url=guide.url summary=guide.summary
81+
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
82+
{% endfor %}
83+
</div>
8884
</div>
89-
</div>
90-
{% endif %}
91-
{% include index-docs-merge.html type="reference" %}
92-
{% if values %}
93-
<div class="grid__item width-12-12 docslist">
94-
<div class="doclist-header">
95-
<h3 id="reference">References</h3>
96-
<p>Technical Resource that covers tools, components, and commands. The encyclopedia for Quarkus.</p>
85+
{% endif %}
86+
{% include index-docs-merge.html type="howto" %}
87+
{% if values %}
88+
<div class="grid__item width-12-12 docslist">
89+
<div class="doclist-header">
90+
<h3 id="guide">How-to Guides</h3>
91+
<p>Step-by-step guides to covering key tasks, real world operations and common problems.</p>
92+
</div>
93+
<div class="grid-wrapper">
94+
{% for guide in values %}
95+
{% include index-doc-item.html class="guidebkg" docversion=docversion
96+
title=guide.title url=guide.url summary=guide.summary
97+
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
98+
{% endfor %}
99+
</div>
97100
</div>
98-
<div class="grid-wrapper">
99-
<div class="grid__item docs-card pdfbkg">
100-
<h4><a href="https://lordofthejars.github.io/quarkus-cheat-sheet/" target="_blank">Quarkus Cheat Sheet</a></h4>
101-
<div class="description">Download full cheatsheet as PDF. <a href="https://developers.redhat.com/search?t=quarkus&f=type%7Echeatsheet" target="_blank">
102-
Get more cheatsheets on the Red Hat Developers website. <i class="fas fa-external-link-alt"></i></a></div>
103-
<div class="keywords"></div>
104-
<div class="categories"></div>
105-
</div>
106-
{% for guide in values %}
107-
{% include index-doc-item.html class="referencebkg" docversion=docversion
108-
title=guide.title url=guide.url summary=guide.summary
109-
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
110-
{% endfor %}
101+
{% endif %}
102+
{% include index-docs-merge.html type="concepts" %}
103+
{% if values %}
104+
<div class="grid__item width-12-12 docslist">
105+
<div class="doclist-header">
106+
<h3 id="concept">Concepts</h3>
107+
<p>Explanations of some of the larger concepts and technologies involved with Quarkus.</p>
108+
</div>
109+
<div class="grid-wrapper">
110+
{% for guide in values %}
111+
{% include index-doc-item.html class="conceptbkg" docversion=docversion
112+
title=guide.title url=guide.url summary=guide.summary
113+
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
114+
{% endfor %}
115+
</div>
111116
</div>
112-
</div>
113-
{% endif %}
114-
{% include index-docs-merge.html type="guide" %}
115-
{% if values %}
116-
<div class="grid__item width-12-12 docslist">
117-
<div class="doclist-header">
118-
<h3 id="reference">General Guides</h3>
119-
<p>Other Quarkus Guides</p>
117+
{% endif %}
118+
{% include index-docs-merge.html type="reference" %}
119+
{% if values %}
120+
<div class="grid__item width-12-12 docslist">
121+
<div class="doclist-header">
122+
<h3 id="reference">References</h3>
123+
<p>Technical Resource that covers tools, components, and commands. The encyclopedia for Quarkus.</p>
124+
</div>
125+
<div class="grid-wrapper">
126+
<div class="grid__item docs-card pdfbkg">
127+
<h4><a href="https://lordofthejars.github.io/quarkus-cheat-sheet/" target="_blank">Quarkus Cheat Sheet</a></h4>
128+
<div class="description">Download full cheatsheet as PDF. <a href="https://developers.redhat.com/search?t=quarkus&f=type%7Echeatsheet" target="_blank">
129+
Get more cheatsheets on the Red Hat Developers website. <i class="fas fa-external-link-alt"></i></a></div>
130+
<div class="keywords"></div>
131+
<div class="categories"></div>
132+
</div>
133+
{% for guide in values %}
134+
{% include index-doc-item.html class="referencebkg" docversion=docversion
135+
title=guide.title url=guide.url summary=guide.summary
136+
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
137+
{% endfor %}
138+
</div>
120139
</div>
121-
<div class="grid-wrapper">
122-
{% for guide in values %}
123-
{% include index-doc-item.html class="referencebkg" docversion=docversion
124-
title=guide.title url=guide.url summary=guide.summary
125-
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
126-
{% endfor %}
140+
{% endif %}
141+
{% include index-docs-merge.html type="guide" %}
142+
{% if values %}
143+
<div class="grid__item width-12-12 docslist">
144+
<div class="doclist-header">
145+
<h3>General Guides</h3>
146+
<p>Other Quarkus Guides</p>
147+
</div>
148+
<div class="grid-wrapper">
149+
{% for guide in values %}
150+
{% include index-doc-item.html class="referencebkg" docversion=docversion
151+
title=guide.title url=guide.url summary=guide.summary
152+
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
153+
{% endfor %}
154+
</div>
127155
</div>
156+
{% endif %}
128157
</div>
129-
{% endif %}
130-
<div class="grid__item width-12-12 empty-list">Sorry, no guides matched your search. Please try again.</div>
131158
</div>
159+
<script src="/assets/javascript/guides-app.js" type="module"></script>

0 commit comments

Comments
 (0)