Skip to content

Commit 6efd884

Browse files
ARomachARomach
committed
changing search function
1 parent b3a07ff commit 6efd884

82 files changed

Lines changed: 2357 additions & 746 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/pages.yml‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
name: Build and deploy Jekyll with Pagefind
2+
3+
on:
4+
push:
5+
branches: ["main"]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: "pages"
15+
cancel-in-progress: false
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- name: Checkout
22+
uses: actions/checkout@v4
23+
24+
- name: Setup Ruby
25+
uses: ruby/setup-ruby@v1
26+
with:
27+
ruby-version: "3.1"
28+
bundler-cache: true
29+
30+
- name: Setup Node
31+
uses: actions/setup-node@v4
32+
with:
33+
node-version: "20"
34+
35+
- name: Build Jekyll
36+
run: bundle exec jekyll build
37+
env:
38+
JEKYLL_ENV: production
39+
40+
- name: Run Pagefind indexing
41+
run: npx pagefind --site _site
42+
43+
- name: Upload Pages artifact
44+
uses: actions/upload-pages-artifact@v3
45+
46+
deploy:
47+
environment:
48+
name: github-pages
49+
url: ${{ steps.deployment.outputs.page_url }}
50+
runs-on: ubuntu-latest
51+
needs: build
52+
steps:
53+
- name: Deploy to GitHub Pages
54+
id: deployment
55+
uses: actions/deploy-pages@v4

‎_config.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,7 @@ extra:
2929
hypothesis:
3030
open_sidebar: true
3131
theme: 'clean'
32+
33+
keep_files: [pagefind]
34+
35+
disable_disk_cache: true

‎_includes/search.html‎

Lines changed: 28 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,34 @@
1-
<!-- HTML elements for search -->
1+
<!-- Pagefind search UI -->
22

33
<div class="search-area">
4-
<input type="text" id="search-input" placeholder="Dig through the findings...">
5-
<ul id="results-container"></ul>
6-
7-
{% capture result_elem %}
8-
9-
<div class="card">
10-
<a href="{url}">
11-
<div class="card-body visible">
12-
13-
<div class="card-image">
14-
<img src="{{ site.baseurl }}/images/{type}s/{title}/banner-image.png" alt="Image not available">
15-
</div>
16-
17-
<div class="card-content">
18-
19-
<h3 class="card-title">
20-
{title}
21-
</h3>
22-
23-
<div class="card-meta">
24-
<i class="fas fa-robot fa-sm"></i>
25-
{authors}
26-
<i class="fas fa-calendar-alt fa-sm"></i>
27-
{publish-date}
28-
<i class="fas fa-hashtag fa-sm"></i>
29-
30-
<span class="page-tags">
31-
{tags}
32-
</span>
33-
34-
<!-- {% if doi != null %}
35-
<span class="doi" style="background-image: url(https://zenodo.org/badge/DOI/{doi}.svg);">{doi}</span>
36-
{% else %}
37-
<p><span class="card-peer-review" style="
38-
font-style: italic;
39-
font-size: 1.3vw;
40-
">Under peer review</span></p>
41-
{% endif %} -->
42-
</div>
43-
44-
<div class="card-summary">
45-
<p>
46-
{summary}
47-
</p>
48-
</div>
49-
50-
</div>
51-
52-
</div>
53-
</a>
54-
</div>
55-
56-
57-
58-
<!-- <a href="{url}">
59-
<li class="result">
60-
<h4 class="result-title">
61-
{title}
62-
</h4>
63-
<p>{authors} | {tags}</p>
64-
<p>{summary}</p>
65-
</li>
66-
</a> -->
67-
{% endcapture %}
4+
<div id="search"></div>
685
</div>
696

70-
71-
72-
73-
74-
<!-- {% capture not_found %}<p class="mt-5">No results found</p>{% endcapture %} -->
75-
76-
<script src="{{site.baseurl}}/assets/js/simple-jekyll-search.js"></script>
77-
<!-- <script src="https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script> -->
78-
7+
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
8+
<script src="/pagefind/pagefind-ui.js"></script>
799
<script>
80-
simpleJekyllSearch = new SimpleJekyllSearch({
81-
searchInput: document.getElementById('search-input'),
82-
resultsContainer: document.getElementById('results-container'),
83-
json: '{{ site.baseurl }}/search.json',
84-
searchResultTemplate: '{{ result_elem | strip_newlines }}',
85-
noResultsText: '<div id="no-results">No results found</div>',
86-
fuzzy: false,
87-
exclude: ['search.json', 'nav/about.md', 'nav/submission-guidelines.md']
88-
})
10+
function initPagefind() {
11+
var el = document.getElementById('search');
12+
if (el && !el.hasChildNodes()) {
13+
new PagefindUI({
14+
element: "#search",
15+
showImages: true,
16+
showEmptyFilters: false,
17+
resetStyles: false,
18+
excerptLength: 30,
19+
translations: {
20+
placeholder: "Dig through the findings...",
21+
zero_results: "No results for [SEARCH_TERM]"
22+
}
23+
});
24+
}
25+
}
26+
window.addEventListener('DOMContentLoaded', initPagefind);
27+
window.addEventListener('pageshow', function (e) {
28+
if (e.persisted) { // restored from bfcache — reinitialize
29+
var el = document.getElementById('search');
30+
if (el) el.innerHTML = '';
31+
initPagefind();
32+
}
33+
});
8934
</script>

‎_layouts/default+toc.html‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,12 @@
6666
<a name="top"></a>
6767
{% include navigation.html %}
6868

69-
<section>
69+
{% assign should_index = false %}
70+
{% if page.type == 'tutorial' or page.type == 'white-paper' or page.layout == 'newsletter' %}
71+
{% assign should_index = true %}
72+
{% endif %}
73+
74+
<section{% unless should_index %} data-pagefind-ignore{% endunless %}>
7075
<div class="toc">
7176
<p><a href="#top"><i class="fas fa-arrow-up"></i> Top</a></p>
7277
<h2><i class="far fa-folder-open"></i> On this page</h2>
@@ -76,32 +81,32 @@ <h2><i class="far fa-folder-open"></i> On this page</h2>
7681
{% include toc.html html=content %}
7782
{% endif %}
7883
</div>
79-
<div class="content">
84+
<div class="content" {% if should_index %} data-pagefind-body{% endif %}>
8085
<h1>{{ page.title }}</h1>
8186
{{ content }}
8287
</div>
83-
</section>
84-
{% include footer.html %}
88+
</section>
89+
{% include footer.html %}
8590

86-
<!-- javascript to place class on code element so highlighting will display correctly -->
87-
<script>
88-
document.addEventListener("DOMContentLoaded", function (event) {
89-
var highlightElements = document.querySelectorAll("div.highlighter-rouge");
90-
for (var i = 0; i < highlightElements.length; i++) {
91-
var langClass = highlightElements[i].classList;
92-
var lang = Array.from(langClass).find(function (item) {
93-
return item.startsWith("language-");
94-
});
95-
if (lang) {
96-
var codeElements = highlightElements[i].querySelectorAll("code");
97-
for (var j = 0; j < codeElements.length; j++) {
98-
codeElements[j].classList.remove("language-css");
99-
codeElements[j].classList.add(lang);
91+
<!-- javascript to place class on code element so highlighting will display correctly -->
92+
<script>
93+
document.addEventListener("DOMContentLoaded", function (event) {
94+
var highlightElements = document.querySelectorAll("div.highlighter-rouge");
95+
for (var i = 0; i < highlightElements.length; i++) {
96+
var langClass = highlightElements[i].classList;
97+
var lang = Array.from(langClass).find(function (item) {
98+
return item.startsWith("language-");
99+
});
100+
if (lang) {
101+
var codeElements = highlightElements[i].querySelectorAll("code");
102+
for (var j = 0; j < codeElements.length; j++) {
103+
codeElements[j].classList.remove("language-css");
104+
codeElements[j].classList.add(lang);
105+
}
100106
}
101107
}
102-
}
103-
});
104-
</script>
108+
});
109+
</script>
105110
</body>
106111
<script src="{{site.baseurl}}/assets/js/codeblock.js"></script>
107112
<script src="{{site.baseurl}}/assets/js/toc-scroll.js"></script>

‎_layouts/default-main.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,17 @@
5252

5353
<body>
5454
{% include navigation.html %}
55-
<section>
55+
{% assign should_index = false %}
56+
{% if page.type == 'tutorial' or page.type == 'white-paper' or page.layout == 'newsletter' %}
57+
{% assign should_index = true %}
58+
{% endif %}
59+
<section{% unless should_index %} data-pagefind-ignore{% endunless %}>
5660
<h1>{{ page.title }}</h1>
57-
{{ content }}
58-
</section>
59-
{% include footer.html %}
61+
<div{% if should_index %} data-pagefind-body{% endif %}>
62+
{{ content }}
63+
</div>
64+
</section>
65+
{% include footer.html %}
6066
</body>
6167
<script src="{{site.baseurl}}/assets/js/tag_click.js"></script>
6268
<script src="{{site.baseurl}}/assets/js/codeblock.js"></script>

‎_sass/_search-styles.scss‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -454,4 +454,101 @@ input#search-input {
454454
.author-card {
455455
margin: 10% 0%;
456456
}
457+
}
458+
459+
/* ==========================================================================
460+
Pagefind UI overrides — uses site variables via CSS custom properties
461+
========================================================================== */
462+
463+
#search {
464+
--pagefind-ui-scale: 1;
465+
--pagefind-ui-primary: #{$primary-color};
466+
--pagefind-ui-text: #{$primary-color-dark};
467+
--pagefind-ui-background: #{$light-color};
468+
--pagefind-ui-border: #{$secondary-contrast-color-dark};
469+
--pagefind-ui-tag: #{$secondary-contrast-color};
470+
--pagefind-ui-border-width: 2px;
471+
--pagefind-ui-border-radius: #{$card-border-radius};
472+
--pagefind-ui-image-border-radius: #{$card-border-radius};
473+
--pagefind-ui-font: #{$font-main};
474+
475+
.pagefind-ui__search-input {
476+
font-family: $font-main;
477+
font-size: $font-size-bigger;
478+
color: $primary-color;
479+
480+
&::placeholder {
481+
color: $primary-color;
482+
opacity: 0.75;
483+
}
484+
}
485+
486+
.pagefind-ui__result {
487+
border: 1px solid $secondary-contrast-color-dark;
488+
border-radius: $card-border-radius;
489+
background-color: $secondary-contrast-color;
490+
transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
491+
padding: 2.5%;
492+
margin: 3% 0;
493+
overflow: hidden;
494+
word-break: break-word;
495+
496+
&:hover {
497+
background-color: $secondary-color-light;
498+
border-color: $secondary-color-dark;
499+
}
500+
}
501+
502+
.pagefind-ui__result-thumb {
503+
width: 100px;
504+
min-width: 100px;
505+
flex-shrink: 0;
506+
507+
&:not(:has(img[src])) {
508+
display: none; // hide empty image slots (pages without a banner)
509+
}
510+
511+
img {
512+
width: 100%;
513+
height: 100%;
514+
object-fit: cover;
515+
border-radius: $card-border-radius;
516+
padding: 0;
517+
}
518+
519+
@media (max-width: $bp-phone) {
520+
display: none;
521+
}
522+
}
523+
524+
.pagefind-ui__result-title {
525+
font-family: $font-main;
526+
font-size: 1.3rem;
527+
color: $primary-color-dark;
528+
}
529+
530+
.pagefind-ui__result-excerpt {
531+
font-size: $font-size-smaller;
532+
color: $primary-color-dark;
533+
534+
mark {
535+
background-color: $contrast-color;
536+
color: $primary-color-dark;
537+
border-radius: 3px;
538+
padding: 0 2px;
539+
}
540+
}
541+
542+
.pagefind-ui__button {
543+
background-color: $primary-color;
544+
color: $light-color;
545+
border: none;
546+
border-radius: $card-border-radius;
547+
font-family: $font-main;
548+
transition: background-color 0.25s ease;
549+
550+
&:hover {
551+
background-color: $primary-color-light;
552+
}
553+
}
457554
}

0 commit comments

Comments
 (0)