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.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/lib/j1/version.rb +1 -1
  3. data/lib/starter_web/Gemfile +1 -1
  4. data/lib/starter_web/_config.yml +1 -1
  5. data/lib/starter_web/dot.ruby-version +1 -0
  6. data/lib/starter_web/package.json +2 -2
  7. data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +1 -1
  8. data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +1 -1
  9. data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +1 -1
  10. data/lib/starter_web/pages/public/blog/navigator/archive.html +1 -1
  11. data/lib/starter_web/pages/public/blog/navigator/index.html +2 -2
  12. data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +1 -1
  13. data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
  14. data/lib/starter_web/utilsrv/package.json +1 -1
  15. metadata +2 -25
  16. data/lib/starter_web/pages/public/learn/_roundtrip/100_present_images.adoc +0 -313
  17. data/lib/starter_web/pages/public/learn/_roundtrip/100_present_videos.adoc +0 -281
  18. data/lib/starter_web/pages/public/learn/_roundtrip/200_typography.adoc +0 -253
  19. data/lib/starter_web/pages/public/learn/_roundtrip/300_icon_fonts.adoc +0 -579
  20. data/lib/starter_web/pages/public/learn/_roundtrip/400_asciidoc_extensions.adoc +0 -719
  21. data/lib/starter_web/pages/public/learn/_roundtrip/410_bs_modals_extentions.adoc +0 -91
  22. data/lib/starter_web/pages/public/learn/_roundtrip/420_responsive_tables_extensions.adoc +0 -420
  23. data/lib/starter_web/pages/public/learn/_roundtrip/500_themes.adoc +0 -250
  24. data/lib/starter_web/pages/public/learn/_roundtrip/600_quicksearch.adoc +0 -425
  25. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/attributes.asciidoc +0 -118
  26. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/100_gistblock.asciidoc +0 -28
  27. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_info.asciidoc +0 -14
  28. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_left_warning.asciidoc +0 -11
  29. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_right_danger.asciidoc +0 -11
  30. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_central_success.asciidoc +0 -11
  31. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_left_info.asciidoc +0 -11
  32. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_right_success.asciidoc +0 -11
  33. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_table_bs_modal_examples.asciidoc +0 -47
  34. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_info.asciidoc +0 -11
  35. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_left_info.asciidoc +0 -11
  36. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_right_success.asciidoc +0 -11
  37. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/419_advanced_modals_demo.asciidoc +0 -337
  38. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/tables/bs_modal_examples.asciidoc +0 -47
  39. 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!