j1-template 2022.5.0.rc0 → 2022.5.0.rc1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/j1/version.rb +1 -1
- data/lib/starter_web/Gemfile +1 -1
- data/lib/starter_web/_config.yml +1 -1
- data/lib/starter_web/dot.ruby-version +1 -0
- data/lib/starter_web/package.json +2 -2
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +1 -1
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +1 -1
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +1 -1
- data/lib/starter_web/pages/public/blog/navigator/archive.html +1 -1
- data/lib/starter_web/pages/public/blog/navigator/index.html +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +1 -1
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +2 -25
- data/lib/starter_web/pages/public/learn/_roundtrip/100_present_images.adoc +0 -313
- data/lib/starter_web/pages/public/learn/_roundtrip/100_present_videos.adoc +0 -281
- data/lib/starter_web/pages/public/learn/_roundtrip/200_typography.adoc +0 -253
- data/lib/starter_web/pages/public/learn/_roundtrip/300_icon_fonts.adoc +0 -579
- data/lib/starter_web/pages/public/learn/_roundtrip/400_asciidoc_extensions.adoc +0 -719
- data/lib/starter_web/pages/public/learn/_roundtrip/410_bs_modals_extentions.adoc +0 -91
- data/lib/starter_web/pages/public/learn/_roundtrip/420_responsive_tables_extensions.adoc +0 -420
- data/lib/starter_web/pages/public/learn/_roundtrip/500_themes.adoc +0 -250
- data/lib/starter_web/pages/public/learn/_roundtrip/600_quicksearch.adoc +0 -425
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/attributes.asciidoc +0 -118
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/100_gistblock.asciidoc +0 -28
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_info.asciidoc +0 -14
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_left_warning.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_right_danger.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_central_success.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_left_info.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_right_success.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_table_bs_modal_examples.asciidoc +0 -47
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_info.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_left_info.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_right_success.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/419_advanced_modals_demo.asciidoc +0 -337
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/tables/bs_modal_examples.asciidoc +0 -47
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/google-ad.js +0 -130
@@ -1,250 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: Roundtrip
|
3
|
-
tagline: themes
|
4
|
-
date: 2020-11-10 00:00:00
|
5
|
-
description: >
|
6
|
-
The themes feature for J1 is in an experimental
|
7
|
-
state for the template system. Anyway, it makes
|
8
|
-
sense to present what is possible using different
|
9
|
-
versions of Bootstrap's CSS styles for a website.
|
10
|
-
|
11
|
-
categories: [ Roundtrip ]
|
12
|
-
tags: [ Introduction, Module, Themes ]
|
13
|
-
|
14
|
-
scrollbar: false
|
15
|
-
fab_menu_id: page_ctrl
|
16
|
-
|
17
|
-
permalink: /pages/public/learn/roundtrip/themes/
|
18
|
-
regenerate: false
|
19
|
-
|
20
|
-
resources: [ animate, rouge, clipboard, lightbox ]
|
21
|
-
resource_options:
|
22
|
-
- attic:
|
23
|
-
slides:
|
24
|
-
- url: /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
|
25
|
-
alt: Photo by Clem Onojeghuo on Unsplash
|
26
|
-
badge:
|
27
|
-
type: unsplash
|
28
|
-
author: Clem Onojeghuo
|
29
|
-
href: https://unsplash.com/@clemono
|
30
|
-
---
|
31
|
-
|
32
|
-
// Page Initializer
|
33
|
-
// =============================================================================
|
34
|
-
// Enable the Liquid Preprocessor
|
35
|
-
:page-liquid:
|
36
|
-
|
37
|
-
// Set (local) page attributes here
|
38
|
-
// -----------------------------------------------------------------------------
|
39
|
-
// :page--attr: <attr-value>
|
40
|
-
:images-dir: {imagesdir}/pages/roundtrip/100_present_images
|
41
|
-
|
42
|
-
// Load Liquid procedures
|
43
|
-
// -----------------------------------------------------------------------------
|
44
|
-
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
|
45
|
-
|
46
|
-
// Load page attributes
|
47
|
-
// -----------------------------------------------------------------------------
|
48
|
-
{% include {{load_attributes}} scope="all" %}
|
49
|
-
|
50
|
-
// Page content
|
51
|
-
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
52
|
-
|
53
|
-
// Include sub-documents (if any)
|
54
|
-
// -----------------------------------------------------------------------------
|
55
|
-
[role="dropcap"]
|
56
|
-
Themes for the template system J1 are based on the free and open-source CSS
|
57
|
-
front-end framework {url-bs--home}[Bootstrap, {browser-window--new}] of
|
58
|
-
version V5. Bootstrap is an HTML, CSS & JS Library that focuses on simplifying
|
59
|
-
the development of modern web pages. The primary purpose of applying the
|
60
|
-
framework to J1 is to provide a general standard for colors, sizes, fonts,
|
61
|
-
and the overall layout of a J1-based site. Bootstrap provides basic style
|
62
|
-
definitions for all commonly used HTML elements.
|
63
|
-
|
64
|
-
Using Bootstrap base style only results in a uniform appearance for the
|
65
|
-
content in terms of the overall layout, text, tables, and form elements
|
66
|
-
across all modern web browsers available on the market. In addition,
|
67
|
-
developers can take advantage of CSS classes defined in Bootstrap to
|
68
|
-
customize content individually.
|
69
|
-
|
70
|
-
The themes feature for J1 is in an experimental state for the template
|
71
|
-
system. Anyway, it makes sense to present what is possible using different
|
72
|
-
versions of Bootstrap's CSS styles for a website.
|
73
|
-
|
74
|
-
== The Themes menu
|
75
|
-
|
76
|
-
Themes step in the framework to further adjust the website's appearance
|
77
|
-
based on the core CSS rules and definitions of Bootstrap. Themes do not
|
78
|
-
change the framework's functionality but modify rule-based, e.g., the
|
79
|
-
color scheme, fonts, sizes, or the appearance of more complex elements like
|
80
|
-
forms or tables. Additionally, a theme may add additional components but in
|
81
|
-
the *sense* of Bootstrap's framework rules and philosophy.
|
82
|
-
|
83
|
-
It is expected that many people will change the template for their needs. To
|
84
|
-
create unique websites. Fundamental to do this is are CSS styles
|
85
|
-
defined by Bootstrap.
|
86
|
-
|
87
|
-
Modifying the CSS styles of link:{url-bootstrap--home}[Bootstrap, {browser-window--new}]
|
88
|
-
is not rocket science. But, to be honest, some knowledge is needed for
|
89
|
-
link:{url-w3org--css-spec}[the CSS technology] to do so. We encourage you to spend
|
90
|
-
some time first on learning CSS. To learn what is the
|
91
|
-
link:{url-w3schools--css-tutorial}[design base, {browser-window--new}] of each and
|
92
|
-
every website.
|
93
|
-
|
94
|
-
.Themes menu (Bootswatch)
|
95
|
-
lightbox::images--themes-menu[ 1024, {data-images--themes-menu} ]
|
96
|
-
|
97
|
-
Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
|
98
|
-
a great set of already prepared Bootstrap stylesheets in various designs are
|
99
|
-
available on their website. There is no need to start from scratch, re-define all
|
100
|
-
the Bootstrap variables, and rebuild the framework files to create a new
|
101
|
-
theme. Many different styles are available. What is already available at
|
102
|
-
Bootswatch is at least a good base for your modifications; your unique design.
|
103
|
-
|
104
|
-
Besides the bunch of different stylesheets at Bootswatch, an
|
105
|
-
link:{url-bootswatch--api}[Integration API, {browser-window--new}] is available
|
106
|
-
that helps a lot to integrate available designs into an existing site. This API
|
107
|
-
is the base to integrate selectable Bootswatch stylesheets into the J1 Template
|
108
|
-
navigation system for easy use.
|
109
|
-
|
110
|
-
=== Apply a theme
|
111
|
-
|
112
|
-
The base for designing pages using the J1 Template is the theme Uno, a modern
|
113
|
-
light theme used for many types of websites. And what we mentioned
|
114
|
-
already, web design is not: one size fits all. The theme Uno can be seen as
|
115
|
-
a good base, a starting point. Combining Uno and a different theme may be a fast
|
116
|
-
solution for your site!?
|
117
|
-
|
118
|
-
You can find all available themes and stylesheets on your pages
|
119
|
-
from the menu Themes. You're invited to check how a page is changing for
|
120
|
-
its design if other stylesheets, other ideas of web design are used.
|
121
|
-
|
122
|
-
NOTE: Changing BS-based styles is one thing. Changing from one theme to the
|
123
|
-
next at runtime is a bit more challenging. For the first version of the J1
|
124
|
-
Template, many styles are automatically changed for J1 specific components,
|
125
|
-
but not all of them for now.
|
126
|
-
|
127
|
-
Select a theme from this menu, and a new BS-based stylesheet is
|
128
|
-
automatically applied to your pages.
|
129
|
-
|
130
|
-
== Code Highlighter Rouge
|
131
|
-
|
132
|
-
_Rouge_ is a pure Ruby and themeable syntax highlighter. It can highlight
|
133
|
-
100+ different languages and output HTML or ANSI 256-color text. Find all
|
134
|
-
available themes and examples for several languages of how
|
135
|
-
highlighting works using _Rouge_.
|
136
|
-
|
137
|
-
For the default theme `Uno` of J1 Template, the following _Rouge_ themes
|
138
|
-
are used:
|
139
|
-
|
140
|
-
* light: `igorpro`
|
141
|
-
* dark: `monokai.sublime`
|
142
|
-
|
143
|
-
NOTE: The default themes used for the J1 Template can be configured with the
|
144
|
-
global template config file `~/_data/j1_config.yml`.
|
145
|
-
|
146
|
-
|
147
|
-
=== Apply a theme
|
148
|
-
|
149
|
-
Make a selection of a theme below to preview.
|
150
|
-
|
151
|
-
++++
|
152
|
-
<div class="btn-group">
|
153
|
-
<!-- See: https://stackoverflow.com/questions/47242702/force-bootstrap-dropdown-menu-to-always-display-at-the-bottom-and-allow-it-go-of -->
|
154
|
-
<!-- NOTE: control the behaviour of popper.js for positioning -->
|
155
|
-
<!-- NOTE: set attribute data-flip="false" to open the SELECT list at the BOTTOM of the BUTTON -->
|
156
|
-
<button class="btn btn-primary btn-flex btn-lg dropdown-toggle" data-flip="false" type="button" data-bs-toggle="dropdown" data-bs-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
|
157
|
-
Select Theme<span class="caret"></span>
|
158
|
-
</button>
|
159
|
-
<ul class="dropdown-menu scrollable-menu" role="menu">
|
160
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16</a></li>
|
161
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.dark</a></li>
|
162
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.light</a></li>
|
163
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai</a></li>
|
164
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.dark</a></li>
|
165
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.light</a></li>
|
166
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized</a></li>
|
167
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.dark</a></li>
|
168
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.light</a></li>
|
169
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('colorful')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>colorful</a></li>
|
170
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('github')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>github</a></li>
|
171
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox</a></li>
|
172
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox.light</a></li>
|
173
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('igorpro')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>igorpro</a></li>
|
174
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('molokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>molokai</a></li>
|
175
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai</a></li>
|
176
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai.sublime')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai.sublime</a></li>
|
177
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('pastie')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>pastie</a></li>
|
178
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('thankful_eyes')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>thankful_eyes</a></li>
|
179
|
-
<li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('tulip')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>tulip</a></li>
|
180
|
-
</ul>
|
181
|
-
</div>
|
182
|
-
<div id="selected" class="mt-1 mb-3"></div>
|
183
|
-
++++
|
184
|
-
|
185
|
-
=== Highlight Liquid code
|
186
|
-
|
187
|
-
{% raw %}
|
188
|
-
[source, liquid]
|
189
|
-
----
|
190
|
-
Hello {{ 'now' | date: "%Y %h" }}
|
191
|
-
|
192
|
-
{% comment %} if item.quantity is 4... {% endcomment %}
|
193
|
-
{% for i in (1..item.quantity) %}
|
194
|
-
{{ i }}
|
195
|
-
{% endfor %}
|
196
|
-
----
|
197
|
-
{% endraw %}
|
198
|
-
|
199
|
-
=== Highlight Javascript code
|
200
|
-
|
201
|
-
[source, javascript]
|
202
|
-
----
|
203
|
-
// helper functions
|
204
|
-
//
|
205
|
-
function styleSheetLoaded(styleSheet) {
|
206
|
-
var sheets = document.styleSheets,
|
207
|
-
stylesheet = sheets[(sheets.length - 1)];
|
208
|
-
|
209
|
-
// find CSS file 'styleSheetName' in document
|
210
|
-
for(var i in document.styleSheets) {
|
211
|
-
if(sheets[i].href && sheets[i].href.indexOf(styleSheet) > -1) {
|
212
|
-
return true;;
|
213
|
-
}
|
214
|
-
}
|
215
|
-
}
|
216
|
-
----
|
217
|
-
|
218
|
-
=== Highlight Ruby code
|
219
|
-
|
220
|
-
[source, ruby]
|
221
|
-
----
|
222
|
-
require 'asciidoctor/extensions' unless RUBY_ENGINE == 'opal'
|
223
|
-
include Asciidoctor <1>
|
224
|
-
|
225
|
-
Asciidoctor::Extensions.register do
|
226
|
-
class J1BlockMacro < Extensions::BlockMacroProcessor
|
227
|
-
use_dsl
|
228
|
-
named :banner
|
229
|
-
name_positional_attributes 'role'
|
230
|
-
|
231
|
-
def process parent, target, attrs
|
232
|
-
html = %(<div id="#{target}" class="#{attrs['role']}"></div>)
|
233
|
-
create_pass_block parent, html, attrs, subs: nil
|
234
|
-
end
|
235
|
-
end
|
236
|
-
block_macro J1BlockMacro
|
237
|
-
end
|
238
|
-
----
|
239
|
-
<1> don't miss to load the Asciidoctor ruby
|
240
|
-
|
241
|
-
|
242
|
-
== What next
|
243
|
-
|
244
|
-
Using a theme, the character of a website can change a lot. If you don't want
|
245
|
-
to support multiple themes with your site, a theme is a good base to create
|
246
|
-
your theme, anyway.
|
247
|
-
|
248
|
-
An important feature for larger webs is searching. The visitors should be able
|
249
|
-
to search your site to find pages and posts they are interested in. Check what
|
250
|
-
is searching a J1 website all about at link:{url-roundtrip--quicksearch}[Quicksearch].
|
@@ -1,425 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: QuickSearch
|
3
|
-
tagline: full text search based on lunr
|
4
|
-
date: 2020-11-08 00:00:00
|
5
|
-
description: >
|
6
|
-
QuickSearch is based on the search engine Lunr,
|
7
|
-
fully integrated with the J1 Template. Lunr is designed
|
8
|
-
to be lightweight yet full-featured to provide a
|
9
|
-
great search experience. No need for complex external,
|
10
|
-
server-sided search engines or commercial services
|
11
|
-
on the Internet like Google.
|
12
|
-
|
13
|
-
categories: [ Roundtrip ]
|
14
|
-
tags: [ Introduction, Module, Lunr, QuickSearch ]
|
15
|
-
|
16
|
-
toc: true
|
17
|
-
scrollbar: false
|
18
|
-
fab_menu_id: page_ctrl
|
19
|
-
|
20
|
-
permalink: /pages/public/learn/roundtrip/quicksearch/
|
21
|
-
regenerate: false
|
22
|
-
|
23
|
-
resources: [ animate, lunr, rouge, lightbox, clipboard ]
|
24
|
-
resource_options:
|
25
|
-
- toccer:
|
26
|
-
collapseDepth: 3
|
27
|
-
- attic:
|
28
|
-
slides:
|
29
|
-
- url: /assets/images/modules/attics/banner/lunr-banner-1280x800.jpg
|
30
|
-
alt: Lunr
|
31
|
-
---
|
32
|
-
|
33
|
-
// Page Initializer
|
34
|
-
// =============================================================================
|
35
|
-
// Enable the Liquid Preprocessor
|
36
|
-
:page-liquid:
|
37
|
-
|
38
|
-
// Set (local) page attributes here
|
39
|
-
// -----------------------------------------------------------------------------
|
40
|
-
// :page--attr: <attr-value>
|
41
|
-
|
42
|
-
// Load Liquid procedures
|
43
|
-
// -----------------------------------------------------------------------------
|
44
|
-
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
|
45
|
-
|
46
|
-
// Load page attributes
|
47
|
-
// -----------------------------------------------------------------------------
|
48
|
-
{% include {{load_attributes}} scope="all" %}
|
49
|
-
|
50
|
-
// Page content
|
51
|
-
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
52
|
-
|
53
|
-
// Include sub-documents (if any)
|
54
|
-
// -----------------------------------------------------------------------------
|
55
|
-
[role="dropcap"]
|
56
|
-
QuickSearch is based on the search engine Lunr, fully integrated with the J1
|
57
|
-
Template. Lunr is designed to be lightweight yet full-featured to provide a
|
58
|
-
great search experience. No need for complex external, server-sided search
|
59
|
-
engines or commercial services on the Internet like Google. Searching a website
|
60
|
-
using QuickSearch is different from search engines like Google or Microsoft
|
61
|
-
Bing. Those search platforms using complex algorithms to provide a simple
|
62
|
-
interface to the public but using a lot of artificial intelligence (AI) methods
|
63
|
-
to make sense of results out of a handful of words given for a search.
|
64
|
-
|
65
|
-
Nevertheless, QuickSearch, the J1 implementation of Lunr, is simple like
|
66
|
-
searching at Google but offers additional features to do searches more
|
67
|
-
specifically - if wanted. QuickSearch provides an easy-to-use query language
|
68
|
-
for better results - anyway!
|
69
|
-
|
70
|
-
== Core concepts
|
71
|
-
|
72
|
-
Understanding some of the concepts and terminology that QuickSearch (Lunr)
|
73
|
-
uses will allow users to provide powerful search functionality - to get more
|
74
|
-
relevant search results.
|
75
|
-
|
76
|
-
=== Indexing documents
|
77
|
-
|
78
|
-
QuickSearch offers searches on *all* documents of the website generated by J1
|
79
|
-
but only for this site. Advantage, no internet access is done for searches
|
80
|
-
because it's not needed. Searches are based on a pre-build local site
|
81
|
-
*full-text* index loaded by the browser on a page request. The index for a
|
82
|
-
site is generated by the (Jekyll) plugin `lunr_index.rb` located in the
|
83
|
-
`_plugins` folder.
|
84
|
-
|
85
|
-
The full-text index is always generated by Jekyll at build-time:
|
86
|
-
|
87
|
-
.Index creation at buildtime
|
88
|
-
----
|
89
|
-
Startup the site ..
|
90
|
-
Configuration file: ...
|
91
|
-
|
92
|
-
Incremental build: enabled
|
93
|
-
Generating...
|
94
|
-
J1 QuickSearch: creating search index ...
|
95
|
-
J1 QuickSearch: finished, index ready.
|
96
|
-
....
|
97
|
-
----
|
98
|
-
|
99
|
-
Or, if you're running a website in development mode, the index get refreshed
|
100
|
-
for all files added or modified.
|
101
|
-
|
102
|
-
.Index creation if files added, or modified
|
103
|
-
----
|
104
|
-
site: Regenerating: n file(s) changed at ...
|
105
|
-
site: ...
|
106
|
-
site: J1 QuickSearch: creating search index ...
|
107
|
-
site: J1 QuickSearch: finished, index ready.
|
108
|
-
...
|
109
|
-
----
|
110
|
-
|
111
|
-
=== Documents
|
112
|
-
|
113
|
-
The searchable data in an index is organized as documents containing the
|
114
|
-
text and the words (terms) you want to search on. A document is a data set
|
115
|
-
(JSON object) with fields that are processed to create the result list for
|
116
|
-
a search.
|
117
|
-
|
118
|
-
A document data set might look like this:
|
119
|
-
|
120
|
-
[source, json, role="noclip"]
|
121
|
-
----
|
122
|
-
{
|
123
|
-
"id": 3,
|
124
|
-
"title": "Roundtrip",
|
125
|
-
"tagline": "present images",
|
126
|
-
"url": "/pages/public/learn/roundtrip/present_images/",
|
127
|
-
"date": "2020-11-03 00:00:00 +0100",
|
128
|
-
"tags": [
|
129
|
-
"Introduction",
|
130
|
-
"Module",
|
131
|
-
"Image"
|
132
|
-
],
|
133
|
-
"categories": [
|
134
|
-
"Roundtrip"
|
135
|
-
],
|
136
|
-
"description": "Welcome to the preview page ... and galleries.\n",
|
137
|
-
"is_post": false
|
138
|
-
}
|
139
|
-
----
|
140
|
-
|
141
|
-
In this document, there are several fields, like `title`, `tagline`, or
|
142
|
-
`description`, that could be used for *full-text* searches. But additional
|
143
|
-
fields are available, like `tags` or `categories` that can be used for
|
144
|
-
more specific searches based on `identifiers`.
|
145
|
-
|
146
|
-
NOTE: The document *content* is collected by the (intrinsic) field `body`.
|
147
|
-
To limit the index data loaded by the browser, the body field is removed from
|
148
|
-
a document. The `body` field not available as an *explicit* field for searches,
|
149
|
-
but the *content* is still fully searchable.
|
150
|
-
|
151
|
-
To do a simple full-text search as well as more specific searches, the
|
152
|
-
QuickSearch core engine Lunr offers a query language, a DSL (domain-specific
|
153
|
-
language). Find more about *QuickSearch|Lunr DSL* queries with the section
|
154
|
-
<<Searching>>.
|
155
|
-
|
156
|
-
=== Scoring
|
157
|
-
|
158
|
-
The relevance (the `score`) is calculated based on an algorithm
|
159
|
-
called *BM25*, along with other factors. You don’t need to worry too much about
|
160
|
-
the details of how this technique works. To summarize: the more a search term
|
161
|
-
occurs in a single document, the more that term will increase that document’s
|
162
|
-
score, but the more a search term occurs in the *overall* collection of
|
163
|
-
documents, the less that term will increase a document’s score. In other words,
|
164
|
-
seldom words count and increase the score.
|
165
|
-
|
166
|
-
Scoring information generated by the BM25 algorithm is added to the (local)
|
167
|
-
search index and allows a very fast calculation of the relevance of documents
|
168
|
-
for queries.
|
169
|
-
|
170
|
-
Imagine you’re website contains documents about Jekyll. The term `Jekyll` may
|
171
|
-
occur very frequently throughout the entire website. Used quite often for the
|
172
|
-
content. So finding a document that mentions the term Jekyll isn’t very
|
173
|
-
significant for a search.
|
174
|
-
|
175
|
-
However, if you’re searching for `Jekyll Generator`, only some documents of
|
176
|
-
the website has the word `Generator` in them, and that will bring the score
|
177
|
-
(relevance) for documents having both words in them at a higher level,
|
178
|
-
bring them higher up in the search results.
|
179
|
-
|
180
|
-
Matching and scoring are used by all search engines - the same as for J1
|
181
|
-
QuickSearch. You’ll see for QuickSearch a similar behavior in *sorting*
|
182
|
-
search results as you already know from commercial internet search engines
|
183
|
-
like Google: the top results are the more relevant ones.
|
184
|
-
|
185
|
-
== Searching
|
186
|
-
|
187
|
-
To access QuickSearch, a magnifier button is available in the `Quicklinks`
|
188
|
-
area in the menu bar at the top-right of every page.
|
189
|
-
|
190
|
-
.Search button (magnifier) in the quick access area
|
191
|
-
lightbox::quicksearch-icon[ 800, {data-quicksearch-icon} ]
|
192
|
-
|
193
|
-
A mouse-click on the magnifier button opens the search input and disables
|
194
|
-
all other navigation to focus on what you're intended to do: searching.
|
195
|
-
|
196
|
-
.Input bar for a QuickSearch
|
197
|
-
lightbox::quicksearch-input[ 800, {data-quicksearch-input} ]
|
198
|
-
|
199
|
-
Search queries look like simple text. But the search `engine` under the
|
200
|
-
hood of QuickSearch transforms the given search string (text) always into a
|
201
|
-
search query. Search queries support a special syntax, the DSL, for defining
|
202
|
-
more complex queries for better (scored) results.
|
203
|
-
|
204
|
-
As always: start simple!
|
205
|
-
|
206
|
-
=== Simple searches
|
207
|
-
|
208
|
-
The simplest way to run a search is to pass the text (words, terms) on which
|
209
|
-
you want to search on:
|
210
|
-
|
211
|
-
[source, text]
|
212
|
-
----
|
213
|
-
jekyll
|
214
|
-
----
|
215
|
-
|
216
|
-
The above will return all documents that match the term `jekyll`. Searches for
|
217
|
-
*multiple* terms (words) are also supported. If a document matches *at least*
|
218
|
-
one of the search terms, it will show in the results. The search terms are
|
219
|
-
combined by a logical `OR`.
|
220
|
-
|
221
|
-
[source, text]
|
222
|
-
----
|
223
|
-
jekyll tutorial
|
224
|
-
----
|
225
|
-
|
226
|
-
The above example will match documents that contain either `jekyll` *OR*
|
227
|
-
`tutorial`. Documents that contain _both_ will increase the score, and those
|
228
|
-
documents are returned first.
|
229
|
-
|
230
|
-
NOTE: Comparing to a Google search (terms are combined at Google by a
|
231
|
-
logical `AND`) a Quicksearch combines the terms by an `OR`.
|
232
|
-
|
233
|
-
To combine search terms in a QuickSearch query by a logical *AND*, the terms
|
234
|
-
could be prepended by a plus sign (`+`) to mark them as for the QuickSearch
|
235
|
-
query (DSL) as *required*:
|
236
|
-
|
237
|
-
[source, text]
|
238
|
-
----
|
239
|
-
+jekyll +tutorial
|
240
|
-
----
|
241
|
-
|
242
|
-
=== Wildcards
|
243
|
-
|
244
|
-
QuickSearch supports wildcards when performing searches. A wildcard is
|
245
|
-
represented as an asterisk (`*`) and can appear anywhere in a search
|
246
|
-
term. For example, the following will match all documents with words
|
247
|
-
beginning with `Jek`:
|
248
|
-
|
249
|
-
[source, text]
|
250
|
-
----
|
251
|
-
jek*
|
252
|
-
----
|
253
|
-
|
254
|
-
NOTE: Language grammar rules are not relevant for searches. For simplification,
|
255
|
-
all words (terms) are transformed to lower case. As a result, the word
|
256
|
-
`Jekyll` is the same as `jekyll` from a search-engines perspective. Language
|
257
|
-
variations of `Jekyll's` or plurals like `Generators` are reduced
|
258
|
-
to their base form. For searches, don't take care of grammar rules but the
|
259
|
-
spelling. If you're unsure about the spelling of a word, use wildcards.
|
260
|
-
|
261
|
-
|
262
|
-
=== Fields
|
263
|
-
|
264
|
-
By default, Lunr will search *all fields* in a document for the given query
|
265
|
-
terms, and it is possible to restrict a term to a specific *field*. The
|
266
|
-
following example searches for the term `jekyll` in the field title:
|
267
|
-
|
268
|
-
[source, text]
|
269
|
-
----
|
270
|
-
title:jekyll
|
271
|
-
----
|
272
|
-
|
273
|
-
The search term is prefixed with the field's name, followed by a colon (`:`).
|
274
|
-
The field _must_ be one of the fields defined when building the index.
|
275
|
-
Unrecognized fields will lead to an error.
|
276
|
-
|
277
|
-
Search queries based on fields can be combined with all other term modifiers
|
278
|
-
like wildcards. For example, to search for words
|
279
|
-
beginning with `jek` in the title *AND* the wildcard `coll*` in a document,
|
280
|
-
the following query can be used:
|
281
|
-
|
282
|
-
[source, text]
|
283
|
-
----
|
284
|
-
+title:jek* +coll*
|
285
|
-
----
|
286
|
-
|
287
|
-
Besides the document *body*, an intrinsic field to create the full-text index
|
288
|
-
out of the document *content*, some more specific fields are available for
|
289
|
-
searches.
|
290
|
-
|
291
|
-
.Available fields (all documents)
|
292
|
-
[cols="3a,3a,6a, options="header", width="100%", role="rtable mt-3"]
|
293
|
-
|===============================================================================
|
294
|
-
|Name |Value |Description\|Example\|s
|
295
|
-
|
296
|
-
|`title`
|
297
|
-
|`string`
|
298
|
-
|The headline of a document (article, post)
|
299
|
-
|
300
|
-
Example\|s: QuickSearch
|
301
|
-
[source, text]
|
302
|
-
----
|
303
|
-
title:QuickSearch
|
304
|
-
----
|
305
|
-
|
306
|
-
|`tagline`
|
307
|
-
|`string`
|
308
|
-
|The subtitle of a document (article, post)
|
309
|
-
|
310
|
-
Example\|s: full index search
|
311
|
-
|
312
|
-
|`tags`
|
313
|
-
|`string`
|
314
|
-
|Tags describe the content of a document.
|
315
|
-
|
316
|
-
Example\|s: Roundtrip, QuickSearch
|
317
|
-
|
318
|
-
|`categories`
|
319
|
-
|`string`
|
320
|
-
|Categories describe the group of documnets a document belongs to.
|
321
|
-
|
322
|
-
Example\|s: Search
|
323
|
-
|
324
|
-
|`description`
|
325
|
-
|`string`
|
326
|
-
|The description is given by the author for a document. It gives a brief
|
327
|
-
summary what the document is all about.
|
328
|
-
|
329
|
-
Example\|s: QuickSearch is based on the search engine Lunr, fully integrated
|
330
|
-
with J1 Template ...
|
331
|
-
|
332
|
-
|===============================================================================
|
333
|
-
|
334
|
-
|
335
|
-
////
|
336
|
-
=== Boosts
|
337
|
-
|
338
|
-
In multi-term searches, a single term may be important than others. For
|
339
|
-
these cases Lunr supports term level boosts. Any document that matches a
|
340
|
-
boosted term will get a higher relevance score, and appear higher up in
|
341
|
-
the results. A boost is applied by appending a caret (`^`) and then a
|
342
|
-
positive integer to a term.
|
343
|
-
|
344
|
-
[source, javascript]
|
345
|
-
----
|
346
|
-
idx.search('foo^10 bar')
|
347
|
-
----
|
348
|
-
|
349
|
-
The above example weights the term “foo” 10 times higher than the term
|
350
|
-
“bar”. The boost value can be any positive integer, and different terms
|
351
|
-
can have different boosts:
|
352
|
-
|
353
|
-
[source, javascript]
|
354
|
-
----
|
355
|
-
idx.search('foo^10 bar^5 baz')
|
356
|
-
----
|
357
|
-
|
358
|
-
=== Fuzzy Matches
|
359
|
-
|
360
|
-
Lunr supports fuzzy matching search terms in documents, which can be
|
361
|
-
helpful if the spelling of a term is unclear, or to increase the number
|
362
|
-
of search results that are returned. The amount of fuzziness to allow
|
363
|
-
when searching can also be controlled. Fuzziness is applied by appending
|
364
|
-
a tilde (`~`) and then a positive integer to a term. The following
|
365
|
-
search matches all documents that have a word within 1 edit distance of
|
366
|
-
“foo”:
|
367
|
-
|
368
|
-
[source, javascript]
|
369
|
-
----
|
370
|
-
idx.search('foo~1')
|
371
|
-
----
|
372
|
-
|
373
|
-
An edit distance of 1 allows words to match if either adding, removing,
|
374
|
-
changing or transposing a character in the word would lead to a match.
|
375
|
-
For example “boo” requires a single edit (replacing “f” with “b”) and
|
376
|
-
would match, but “boot” would not as it also requires an additional “t”
|
377
|
-
at the end.
|
378
|
-
////
|
379
|
-
|
380
|
-
=== Term presence
|
381
|
-
|
382
|
-
By default, Lunr combines multiple terms in a search with a logical OR. That
|
383
|
-
is, a search for `jekyll collections` will match documents that contain
|
384
|
-
`jekyll` or contain `collections` or contain both. This behavior is
|
385
|
-
controllable at the term level, i.e., the presence of each term in matching
|
386
|
-
documents can be specified.
|
387
|
-
|
388
|
-
By default, each term is optional in a matching document, though a document
|
389
|
-
must have at least one matching term. It is possible to specify that a term
|
390
|
-
must be present in matching documents or that it must be absent in matching
|
391
|
-
documents.
|
392
|
-
|
393
|
-
To indicate that a term must be *present* in matching documents, the term
|
394
|
-
could be prefixed with a plus sign (`+`) (required), and to indicate that a
|
395
|
-
term must be *absent* (not wanted), the term should be prefixed with a minus
|
396
|
-
(`-`).
|
397
|
-
|
398
|
-
The below example searches for documents that *must* contain `jekyll`, and
|
399
|
-
must *not* contain the word `collection`:
|
400
|
-
|
401
|
-
[source, text]
|
402
|
-
----
|
403
|
-
+jekyll -collection
|
404
|
-
----
|
405
|
-
|
406
|
-
To simulate a logical *AND* search of documents that contain the word `jekyll`
|
407
|
-
*AND* the word `collection`, mark both terms as required:
|
408
|
-
|
409
|
-
[source, text]
|
410
|
-
----
|
411
|
-
+jekyll +collection
|
412
|
-
----
|
413
|
-
|
414
|
-
== What next
|
415
|
-
|
416
|
-
You reached the end of the roundtrip. Hopefully you enjoyed exploring what J1
|
417
|
-
can do for your new website. To make things real for your site, go for
|
418
|
-
_J1 in a Day_. This tutorial guides you through all the steps on how to
|
419
|
-
setup your environment, manage and build a website and how to create content.
|
420
|
-
|
421
|
-
It's a pleasant journey to learn what modern static webs can offer today.
|
422
|
-
Start your journey from here:
|
423
|
-
link:{url-j1-kickstarter--web-in-a-day}[J1 in a Day, {browser-window--new}].
|
424
|
-
|
425
|
-
Have fun!
|