Skip to content
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

Use qs web component #1895

Merged
merged 2 commits into from
Apr 8, 2024
Merged

Use qs web component #1895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a25ec7
Use qs web component
ia3andy Feb 21, 2024
547a274
Use qs web component
ia3andy Feb 21, 2024
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
3 changes: 3 additions & 0 deletions Gemfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,6 @@ gem "wdm", "~> 0.1.0" if Gem.win_platform?


gem "webrick", "~> 1.7"

# Copy search-wc.js from the search-wc server
gem "open-uri", "~> 0.4.1"
10 changes: 10 additions & 0 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ GEM
asciidoctor (2.0.15)
colorator (1.1.0)
concurrent-ruby (1.1.8)
date (3.3.4)
em-websocket (0.5.2)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
Expand Down Expand Up @@ -61,6 +62,10 @@ GEM
jekyll (>= 3.5, < 5.0)
jekyll-feed (~> 0.9)
jekyll-seo-tag (~> 2.1)
open-uri (0.4.1)
stringio
time
uri
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (4.0.6)
Expand All @@ -72,9 +77,13 @@ GEM
safe_yaml (1.0.5)
sassc (2.4.0)
ffi (~> 1.9)
stringio (3.1.0)
terminal-table (1.8.0)
unicode-display_width (~> 1.1, >= 1.1.1)
time (0.3.0)
date
unicode-display_width (1.7.0)
uri (0.13.0)
webrick (1.7.0)

PLATFORMS
Expand All @@ -88,6 +97,7 @@ DEPENDENCIES
jekyll-feed (~> 0.6)
jekyll-paginate-v2
minima (~> 2.0)
open-uri (~> 0.4.1)
tzinfo-data
webrick (~> 1.7)

Expand Down
11 changes: 10 additions & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,14 @@ github_fork_url: "https://github.com/quarkusio/quarkus"
# See https://github.com/quarkusio/search.quarkus.io/blob/main/src/main/java/io/quarkus/search/app/entity/Language.java
language: en
search:
# The script mode is direct or cached. Cached means the search script is copied from the remote service.
script-mode: "cached"
# The URL of the remote search service
ia3andy marked this conversation as resolved.
Show resolved Hide resolved
url: "https://search.quarkus.io/"
host: "https://search.quarkus.io"
# The path to the search script (relative from the search.host)
script-path: "/static/bundle/main.js"
# Where to copy the search script file for cached mode
cached-script-file: "assets/javascript/search-wc.js"
# 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),
Expand Down Expand Up @@ -57,6 +63,9 @@ plugins:
- jekyll-archives
- jekyll-auto-authors

keep_files:
- assets/javascripts/search-wc.js

sass:
style: compressed

Expand Down
7 changes: 6 additions & 1 deletion _config_dev.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,9 @@

# We don't want to use the production instance of search.quarkus.io for development.
search:
url: "http://localhost:8080/"

# Use "direct" to directly use the local instance of search.quarkus.io
# Use "cached" to use a local copy of the search script
script-mode: "cached"
host: "http://localhost:8080"

24 changes: 14 additions & 10 deletions _includes/index-doc-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
{% assign is_external_guide = include.url | startswith: 'http' %}
{% if is_external_guide %}
{% assign guide_url = include.url %}
{% assign guide_url = include.url %}
{% elsif include.docversion == 'latest' %}
{% assign guide_url = site.baseurl | append: include.url %}
{% assign guide_url = site.baseurl | append: include.url %}
{% else %}
{% assign guide_url = site.baseurl | append: '/version/' | append: include.docversion | append: include.url %}
{% assign guide_url = site.baseurl | append: '/version/' | append: include.docversion | append: include.url %}
{% endif %}
<div class="{% if include.origin == 'quarkiverse-hub' %}quarkiverse {% endif %}grid__item docs-card {{ include.class }}">
<qs-guide type="{{ include.type | escape }}"
title="{{ include.title | escape }}"
url="{{ guide_url }}"
summary="{{ include.summary | markdownify }}"
keywords="{{ include.keywords | escape }}"
categories="{{ include.categories | escape }}"
origin="{{ include.origin | escape }}"
>
<!-- WE KEEP PART OF THE CONTENT FOR SEO -->
<h4><a href="{{ guide_url }}" {% if is_external_guide %}target="_blank" {% endif %}>{{ include.title }}</a></h4>
<div class="description">{{ include.summary | markdownify }}</div>
<div class="keywords">{{ include.keywords }}</div>
<div class="categories">{{ include.categories }}</div>
{% if include.origin == 'quarkiverse-hub' -%}
<div class="origin">Quarkiverse Hub</div>
{% endif -%}
</div>
</qs-guide>

246 changes: 112 additions & 134 deletions _includes/index-docs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,162 +3,140 @@
{% assign index = site.data.versioned[docversion_index].index %}
{% assign categories = index.quarkus.categories %}
{% assign by_type = index.quarkus | map: "types" | first %}

<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 id="guides-app">
<qs-form server="{{ site.search.host }}"
quarkus-version="{{ docversion }}"
language="{{ site.language }}"
initial-timeout="{{ site.search.initial-timeout }}"
more-timeout="{{ site.search.more-timeout }}"
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 name="categories">
<option value="">All categories</option>
{% for item in categories %}
<option value="{{ item.cat-id }}">{{ item.category }}</option>
{% endfor %}
</select>
</div>
<div class="search">
<input name="q" type="text" placeholder="Filter by keyword"/>
</div>
</div>
</div>
</section>
</section>
</qs-form>


<div>
<h1 class="title">{{ page.title }}</h1>
</div>
<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>

<!-- 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
<qs-target>
<div 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 type="tutorial" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
</div>
</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>
{% endfor %}
</div>
</div>
<div class="grid-wrapper">
{% for guide in values %}
{% include index-doc-item.html class="howtobkg" docversion=docversion
{% 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 type="howto" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
</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>
{% endfor %}
</div>
</div>
<div class="grid-wrapper">
{% for guide in values %}
{% include index-doc-item.html class="conceptsbkg" docversion=docversion
{% 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 type="concepts" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
</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>
{% 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>
{% 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>
{% for guide in values %}
{% include index-doc-item.html class="referencebkg" docversion=docversion
<div class="grid-wrapper">
{% include index-doc-item.html type="pdf" docversion=docversion
title="Quarkus Cheat
Sheet" url="https://lordofthejars.github.io/quarkus-cheat-sheet/" summary="Download full cheatsheet as PDF." %}
{% for guide in values %}
{% include index-doc-item.html type="reference" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
</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>General Guides</h3>
<p>Other Quarkus Guides</p>
{% endfor %}
</div>
</div>
<div class="grid-wrapper">
{% for guide in values %}
{% include index-doc-item.html class="guidebkg" docversion=docversion
{% 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 type="guides" docversion=docversion
title=guide.title url=guide.url summary=guide.summary
keywords=guide.keywords categories=guide.categories origin=guide.origin %}
{% endfor %}
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>
</qs-target>
</div>
<script src="/assets/javascript/guides-app.js" type="module"></script>

Loading
Loading