@@ -14,31 +14,181 @@ <h1 class="title is-2 has-text-centered">Research Tools</h1>
14
14
15
15
16
16
{{ 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 "
20
35
style ="border-top:.1rem dashed #dbdbdb57 !important;margin: 1rem 0 !important; ">
21
36
</ div >
22
- < main class ="container " aria-label ="Content ">
23
37
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 >
27
44
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 >
31
56
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 -->
36
66
</ 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 >
37
73
</ 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 ( ) ;
38
190
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 >
42
192
43
193
44
194
</ main>
0 commit comments