Skip to content

Commit 8369a9f

Browse files
kalinkostashkikalinkostashki
committed
Replace Simple Jekyll Search with Pagefind for full-text documentation search
- Replace search widget in topnav.html with Pagefind UI - Add data-pagefind-body to default layout to scope indexing to content only - Add Pagefind post-build step (npx pagefind) to both Linux and Windows Maven profiles via exec-maven-plugin - Replace old search CSS with Pagefind UI overrides matching Ditto theme - Delete search.json (no longer needed)
1 parent ed401bc commit 8369a9f

5 files changed

Lines changed: 123 additions & 76 deletions

File tree

‎documentation/pom.xml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,29 @@
268268
</configuration>
269269
</plugin>
270270

271+
<plugin>
272+
<groupId>org.codehaus.mojo</groupId>
273+
<artifactId>exec-maven-plugin</artifactId>
274+
<executions>
275+
<execution>
276+
<id>pagefind-index</id>
277+
<goals>
278+
<goal>exec</goal>
279+
</goals>
280+
<phase>process-resources</phase>
281+
<configuration>
282+
<executable>npx</executable>
283+
<arguments>
284+
<argument>-y</argument>
285+
<argument>pagefind</argument>
286+
<argument>--site</argument>
287+
<argument>${project.build.outputDirectory}</argument>
288+
</arguments>
289+
</configuration>
290+
</execution>
291+
</executions>
292+
</plugin>
293+
271294
<plugin>
272295
<artifactId>maven-assembly-plugin</artifactId>
273296
<configuration>
@@ -499,6 +522,22 @@
499522
</configuration>
500523
<phase>none</phase>
501524
</execution>
525+
<execution>
526+
<id>pagefind-index</id>
527+
<goals>
528+
<goal>exec</goal>
529+
</goals>
530+
<phase>process-resources</phase>
531+
<configuration>
532+
<executable>npx</executable>
533+
<arguments>
534+
<argument>-y</argument>
535+
<argument>pagefind</argument>
536+
<argument>--site</argument>
537+
<argument>${project.build.outputDirectory}</argument>
538+
</arguments>
539+
</configuration>
540+
</execution>
502541
</executions>
503542
</plugin>
504543

‎documentation/src/main/resources/_includes/topnav.html‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -68,21 +68,37 @@
6868
<!--comment out this block if you want to hide search-->
6969
<li>
7070
<!--start search-->
71-
<div id="search-demo-container">
72-
<input type="text" id="search-input" placeholder="search...">
73-
<ul id="results-container"></ul>
74-
</div>
75-
<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-jekyll-search/0.0.9/jekyll-search.js" type="text/javascript"></script>
76-
<script type="text/javascript">
77-
SimpleJekyllSearch.init({
78-
searchInput: document.getElementById('search-input'),
79-
resultsContainer: document.getElementById('results-container'),
80-
dataSource: '{{ "search.json" }}',
81-
searchResultTemplate: '<li><a href="{url}" title="{{page.title | replace: "\'", "\"}}">{title}</a></li>',
82-
noResultsText: 'No results found.',
83-
limit: 10,
84-
fuzzy: true,
85-
})
71+
<div id="search" class="pagefind-search-container"></div>
72+
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
73+
<script src="/pagefind/pagefind-ui.js"></script>
74+
<script>
75+
new PagefindUI({
76+
element: "#search",
77+
showSubResults: true,
78+
showImages: false
79+
});
80+
document.querySelector("#search").addEventListener("click", function(e) {
81+
if (e.target.closest("a")) {
82+
var drawer = document.querySelector("#search .pagefind-ui__drawer");
83+
if (drawer) {
84+
drawer.style.display = "none";
85+
}
86+
}
87+
});
88+
document.querySelector("#search").addEventListener("input", function() {
89+
var drawer = document.querySelector("#search .pagefind-ui__drawer");
90+
if (drawer) {
91+
drawer.style.display = "";
92+
}
93+
});
94+
document.querySelector("#search").addEventListener("focusin", function(e) {
95+
if (e.target.classList.contains("pagefind-ui__search-input") && e.target.value.length > 0) {
96+
var drawer = document.querySelector("#search .pagefind-ui__drawer");
97+
if (drawer) {
98+
drawer.style.display = "";
99+
}
100+
}
101+
});
86102
</script>
87103
<!--end search-->
88104
</li>

‎documentation/src/main/resources/_layouts/default.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
{% endunless %}
3535

3636
<!-- Content Column -->
37-
<div class="{{content_col_size}}" id="tg-sb-content">
37+
<div class="{{content_col_size}}" id="tg-sb-content" data-pagefind-body>
3838
{{content}}
3939
</div>
4040
<!-- /.row -->

‎documentation/src/main/resources/css/customstyles.css‎

Lines changed: 52 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -297,43 +297,68 @@ p.post-meta {font-size: 80%; color: #777;}
297297

298298
.entry-date{font-size:14px; line-height:1.71429; margin-bottom:0; text-transform:uppercase;}
299299

300-
/* search area */
301-
#search-demo-container ul#results-container {
302-
list-style: none;
303-
font-size: 12px;
304-
background-color: white;
305-
position: absolute;
306-
top: 40px; /* if you change anything about the nav, you'll prob. need to reset the top and left values here.*/
307-
left: 20px;
308-
z-index: -1;
309-
width:223px;
310-
border-left: 1px solid #dedede;
300+
/* pagefind search overrides */
301+
.pagefind-search-container {
302+
position: relative;
303+
margin-top: 7px;
304+
margin-left: 10px;
311305
}
312306

307+
.pagefind-search-container .pagefind-ui {
308+
--pagefind-ui-scale: 0.6;
309+
--pagefind-ui-primary: #3a8c9a;
310+
}
313311

314-
ul#results-container a {
315-
background-color: transparent;
312+
.pagefind-search-container .pagefind-ui__form {
313+
padding: 0;
314+
margin: 0;
316315
}
317316

318-
ul#results-container a:hover {
319-
color: black;
317+
.pagefind-search-container .pagefind-ui__search-input {
318+
padding: 2px 8px;
319+
width: 12em;
320+
font-size: 13px;
321+
font-family: 'Open Sans', sans-serif;
322+
box-sizing: border-box;
323+
height: 24px;
324+
border-radius: 3px;
325+
}
326+
327+
.pagefind-search-container .pagefind-ui__search-clear {
328+
top: auto;
329+
height: 24px;
330+
padding: 0 4px;
320331
}
321332

333+
.pagefind-search-container .pagefind-ui__drawer {
334+
position: absolute;
335+
right: 0;
336+
top: 100%;
337+
z-index: 10000;
338+
background: white;
339+
width: 400px;
340+
max-height: 70vh;
341+
overflow-y: auto;
342+
border: 1px solid #dedede;
343+
border-radius: 0 0 4px 4px;
344+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
345+
}
322346

323-
#search-demo-container a:hover {
324-
color: black;
347+
.pagefind-search-container .pagefind-ui__result-link {
348+
color: #3a8c9a;
325349
}
326-
#search-input {
327-
padding: .5em;
328-
margin-left:15px;
329-
width:15em;
330-
font-size: 0.8em;
331-
-webkit-box-sizing: border-box;
332-
-moz-box-sizing: border-box;
333-
box-sizing: border-box;
334-
margin-top:10px;
350+
351+
.pagefind-search-container .pagefind-ui__result-link:hover {
352+
color: #248ec2;
353+
}
354+
355+
@media (max-width: 768px) {
356+
.pagefind-search-container .pagefind-ui__drawer {
357+
width: 90vw;
358+
right: -50px;
359+
}
335360
}
336-
/* end search */
361+
/* end pagefind search */
337362

338363
.filter-options {
339364
margin-bottom: 20px;

‎documentation/src/main/resources/search.json‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)