#4228: search.adoc

site/search.adoc

Path: site/search.adoc · Lines: 33 · Permalink: /search/

Purpose: The user-facing search page for the ProjectForge website — provides a Tipue Search input field with client-side autocomplete. Combines Jekyll front matter, AsciiDoc, raw HTML, and JavaScript.

Source: GitHub

33 lines · 28 code · 1 comments · 4 blank
CommitMessage
ac75fabf3Github pages migrated to Asciidoc

Three technologies in one file

This page uniquely combines three layers:

  1. Jekyll front matter (lines 1-10): YAML configuration — layout: page uses _layouts/page.html, width: small narrows content, tipue_search_active: true triggers inclusion of Tipue CSS/JS assets, hero configures the banner with title "Search" and background image search.png, permalink: /search/ sets the URL.
  2. AsciiDoc ++++ pass-through block (lines 14-31): Content between ++++ markers is passed directly to HTML output without AsciiDoc processing. This allows embedding raw HTML and JavaScript in an AsciiDoc document — necessary because AsciiDoc can't express interactive search widgets.
  3. JavaScript initialization (lines 26-29): jQuery $(document).ready() binds Tipue Search to #tipue_search_input with .tipuesearch() — the single line that activates client-side search.
<form class="uk-search uk-search-default uk-width-1-1">
  <span class="uk-search-icon-flip" data-uk-search-icon></span>
  <input id="tipue_search_input" pattern=".{3,}" required>
  <div id="tipue_search_content"></div>
</form>

<script>
$(document).ready(function() {
  $('#tipue_search_input').tipuesearch();
});
</script>

UIkit styling: Classes uk-search, uk-search-default, uk-width-1-1, uk-search-icon-flip from the UIkit framework. Themed by search.scss theme (#4071) — transparent background, visible border, dashed focus variant.

pattern=".{3,}": HTML5 client-side validation — requires at least 3 characters before form submission. Tipue Search also enforces this server-side.

Data source: The search index comes from search.json (#4094) — fetched once when the user first types, then filtered client-side.