Skip to content

Commit 30c7089

Browse files
committed
Added search
1 parent b6f3e66 commit 30c7089

File tree

6 files changed

+197
-377
lines changed

6 files changed

+197
-377
lines changed

config.yaml

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,13 @@ menu:
1717
identifier: tools
1818
url: /tools/
1919
- name: Submit New Tools
20-
weight: 2
20+
weight: 3
2121
identifier: submit
2222
url: /submit/
23+
- name: Search
24+
weight: 2
25+
identifier: search
26+
url: /search/
2327

2428
params:
2529
theme_variant: "litera" # possible value for the theme_variant `cerulean,cosmo,cyborg,darkly,flatly,journal,litera,lumen,lux,materia,minty,pulse,sandstone,simplex,slate,solar,spacelab,superhero,united,yeti`
@@ -39,14 +43,19 @@ params:
3943
- "publishdate"
4044
- "expirydate"
4145
- "permalink"
46+
- "images"
47+
- "author"
48+
- "fields"
49+
- "platforms"
50+
- "file"
4251
params:
4352
- "categories"
4453
- "tags"
4554
options:
46-
appId: NQED3STBQT
47-
apiKey: 5b7ac3f0c287018586467528f312e255
55+
appId: "NQED3STBQT"
56+
apiKey: "5b7ac3f0c287018586467528f312e255"
4857
indexName: "kausalflow-research-tools"
49-
hitsPerPage: 10
58+
hitsPerPage: 12
5059
routing: true
5160

5261

layouts/search/list.html

Lines changed: 167 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,31 +14,181 @@ <h1 class="title is-2 has-text-centered">Research Tools</h1>
1414

1515

1616
{{ define "main" }}
17-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css" />
18-
<link rel="stylesheet" href="/assets/search/app.css" />
19-
<div class="is-divider" data-content="TOOLS"
17+
18+
<main class="container" aria-label="Content">
19+
<div class="columns">
20+
<div class="column has-text-centered">
21+
<div id="search-box">
22+
<!-- SearchBox widget will appear here -->
23+
</div>
24+
<div style="margin: 1em 0 0.5em 0;">
25+
<img src="/images/search/search-by-algolia-light-background.svg">
26+
</div>
27+
</div>
28+
</div>
29+
<div class="columns">
30+
<div class="column is-3">
31+
32+
<aside class="menu">
33+
34+
<div class="is-divider" data-content="CATEGORIES"
2035
style="border-top:.1rem dashed #dbdbdb57 !important;margin: 1rem 0 !important;">
2136
</div>
22-
<main class="container" aria-label="Content">
2337

24-
<div class="ais-InstantSearch">
25-
<div class="left-panel">
26-
<div id="clear-refinements"></div>
38+
<p class="menu-label">
39+
Categories
40+
</p>
41+
<div id="refinement-list">
42+
<!-- RefinementList widget will appear here -->
43+
</div>
2744

28-
<h2>Categories</h2>
29-
<div id="cat-list"></div>
30-
</div>
45+
<div class="is-divider" data-content="TAGS"
46+
style="border-top:.1rem dashed #dbdbdb57 !important;margin: 1rem 0 !important;">
47+
</div>
48+
49+
<p class="menu-label">
50+
Tags
51+
</p>
52+
53+
<div id="refinement-list-tags">
54+
<!-- RefinementList widget will appear here -->
55+
</div>
3156

32-
<div class="right-panel">
33-
<div id="searchbox" class="ais-SearchBox"></div>
34-
<div id="hits"></div>
35-
<div id="pagination"></div>
57+
</aside>
58+
</div>
59+
60+
<div class="column">
61+
<div class="is-divider" data-content="TOOLS"
62+
style="border-top:.1rem dashed #dbdbdb57 !important;margin: 1rem 0 !important;">
63+
</div>
64+
<div id="hits">
65+
<!-- Hits widget will appear here -->
3666
</div>
67+
<div class="is-divider" data-content="PAGES"
68+
style="border-top:.1rem dashed #dbdbdb57 !important;margin: 2rem 0 !important;">
69+
</div>
70+
<div id="pagination" style="margin: 2em 0 2em 0;">
71+
<!-- Pagination widget will appear here -->
72+
</div>
3773
</div>
74+
</div>
75+
</main>
76+
77+
78+
<script>
79+
// create variable for custom hit template
80+
var hitTemplate =`<div class="column">
81+
<div class="card">
82+
<div class="card-content">
83+
<div class="media">
84+
<div class="media-content">
85+
<a href='{{ "{{" }} permalink {{ "}}" }}'>`
86+
+
87+
`<a href='{{ "{{" }} permalink {{ "}}" }}' class="List-item">` +
88+
`<p class="title is-4 List-title">'{{ "{{" }} title {{ "}}" }}'</p>` +
89+
"</a>"
90+
+
91+
`</a>
92+
</div>
93+
</div>
94+
<div class="content">
95+
<p>
96+
<div class="tags">
97+
{{ "{{" }}#categories{{ "}}" }}<span class="tag is-link is-light">{{ "{{{" }}.{{ "}}}" }}</span> {{ "{{" }}/categories{{ "}}" }}
98+
</div>
99+
</p>
100+
<p>
101+
<div class="tags">
102+
{{ "{{" }}#tags{{ "}}" }}<span class="tag is-warning is-light">{{ "{{{" }}.{{ "}}}" }}</span> {{ "{{" }}/tags{{ "}}" }}
103+
</div>
104+
</p>
105+
<div class="is-divider" data-content="SUMMARY"
106+
style="border-top:.1rem dashed #dbdbdb57 !important;margin: 1rem 0 !important;">
107+
</div>
108+
<p>{{ "{{{" }} summary {{ "}}}" }}</p>
109+
</div>
110+
</div>
111+
</div>
112+
</div>`
113+
114+
// Set Algolia options
115+
const options = {
116+
appId: `{{ printf "%s" .Site.Params.algolia.options.appId }}`,
117+
apiKey: `{{ printf "%s" .Site.Params.algolia.options.apiKey }}`,
118+
indexName: `{{ printf "%s" .Site.Params.algolia.options.indexName }}`,
119+
hitsPerPage: {{ .Site.Params.algolia.options.hitsPerPage }},
120+
routing: {{ .Site.Params.algolia.options.routing }}
121+
};
122+
123+
124+
// Parse options to instantsearch
125+
const search = instantsearch(options);
126+
127+
// initialize SearchBox
128+
search.addWidget(
129+
instantsearch.widgets.searchBox({
130+
container: "#search-box",
131+
placeholder: "Search for research tools",
132+
reset: false,
133+
cssClasses: {
134+
root: "Search-box-container control",
135+
input: "Search-box-input input is-success",
136+
},
137+
})
138+
);
139+
140+
// initialize hits widget
141+
search.addWidget(
142+
instantsearch.widgets.hits({
143+
// define container
144+
container: "#hits",
145+
// add classes for styling
146+
cssClasses: {
147+
root: "Search-hits columns is-multiline",
148+
item: "column is-one-third",
149+
empty: "Search-hits--empty",
150+
},
151+
templates: {
152+
// call custom hit template
153+
item: hitTemplate,
154+
// item: `{{ "{{{" }}title{{ "}}}" }}`,
155+
empty: 'Didn’t find any results for the search <em>{{ "{{{" }}query{{ "}}}" }}</em>',
156+
},
157+
})
158+
);
159+
160+
// initialize RefinementList
161+
search.addWidget(
162+
instantsearch.widgets.refinementList({
163+
container: "#refinement-list",
164+
attributeName: "categories",
165+
})
166+
);
167+
168+
search.addWidget(
169+
instantsearch.widgets.refinementList({
170+
container: "#refinement-list-tags",
171+
attributeName: "tags",
172+
})
173+
);
174+
175+
// initialize pagination
176+
search.addWidget(
177+
instantsearch.widgets.pagination({
178+
container: '#pagination',
179+
maxPages: 20,
180+
// default is to scroll to 'body', here we disable this behavior
181+
scrollTo: false,
182+
cssClasses: {
183+
item: "pagination-list"
184+
}
185+
})
186+
);
187+
188+
189+
search.start();
38190

39-
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
40-
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
41-
<script src="/assets/search/app.js"></script>
191+
</script>
42192

43193

44194
</main>
Lines changed: 1 addition & 0 deletions
Loading

themes/bulma/layouts/_default/baseof.html

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,12 @@
4646
integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
4747
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
4848
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
49-
<link rel="stylesheet" type="text/css"
50-
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css" />
51-
<link rel="stylesheet" type="text/css"
52-
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css" />
49+
50+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css">
51+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
52+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css">
53+
54+
5355
</head>
5456
<!--theme variation-->
5557

@@ -59,20 +61,7 @@
5961
<footer>{{ block "footer" . }}{{ end }}</footer>
6062

6163
<script async type="text/javascript" src="/js/bulma.js"></script>
62-
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
63-
<script>
64-
// Set Algolia options
65-
const options = {
66-
appId: "{{ .Site.Params.algolia.options.appId }}",
67-
apiKey: "{{ .Site.Params.algolia.options.apiKey }}",
68-
indexName: "{{ .Site.Params.algolia.options.indexName }}",
69-
hitsPerPage: "{{ .Site.Params.algolia.options.hitsPerPage }}",
70-
routing: "{{ .Site.Params.algolia.options.routing }}",
71-
};
7264

73-
// Parse options to instantsearch
74-
const search = instantsearch(options);
75-
</script>
7665
</body>
7766

7867
</html>

themes/bulma/layouts/_default/list.algolia.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
{{- .Scratch.SetInMap "temp" "date" $hit.Date.UTC.Unix -}}
1616
{{- .Scratch.SetInMap "temp" "description" $hit.Description -}}
1717
{{- .Scratch.SetInMap "temp" "dir" $hit.Dir -}}
18+
{{- .Scratch.SetInMap "temp" "file" (index (split $hit.Permalink `/`) 4) -}}
1819
{{- .Scratch.SetInMap "temp" "path" "temp" -}}
1920
{{- .Scratch.SetInMap "temp" "expirydate" $hit.ExpiryDate.UTC.Unix -}}
2021
{{- .Scratch.SetInMap "temp" "path" "temp" -}}
@@ -29,6 +30,10 @@
2930
{{- .Scratch.SetInMap "temp" "relpermalink" $hit.RelPermalink -}}
3031
{{- .Scratch.SetInMap "temp" "summary" $hit.Summary -}}
3132
{{- .Scratch.SetInMap "temp" "title" $hit.Title -}}
33+
{{- .Scratch.SetInMap "temp" "images" $hit.Params.images -}}
34+
{{- .Scratch.SetInMap "temp" "fields" $hit.Params.fields -}}
35+
{{- .Scratch.SetInMap "temp" "platforms" $hit.Params.platforms -}}
36+
{{- .Scratch.SetInMap "temp" "author" ($hit.Params.author | default "KausalFlow") -}}
3237
{{- .Scratch.SetInMap "temp" "type" $hit.Type -}}
3338
{{- .Scratch.SetInMap "temp" "url" $hit.URL -}}
3439
{{- .Scratch.SetInMap "temp" "weight" $hit.Weight -}}

0 commit comments

Comments
 (0)