Skip to content
This repository was archived by the owner on Sep 25, 2024. It is now read-only.

Commit 888730a

Browse files
eddietejedaeddietejeda
authored
Load search results into its own page (#33)
Load search results into its own page
2 parents 8f3e025 + a65162b commit 888730a

File tree

7 files changed

+106
-27
lines changed

7 files changed

+106
-27
lines changed

‎_config.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,10 @@ secondary_navigation:
6666
# 2. Add a new site.
6767
# 3. Add your site/affiliate name here.
6868
searchgov:
69-
affiliate: federalist
70-
inline: false
69+
endpoint: https://search.usa.gov # You should not change this.
70+
affiliate: federalist-uswds-example # replace this with your search.gov account
71+
access_key: xX1gtb2RcnLbIYkHAcB6IaTRr4ZfN-p16ofcyUebeko= # This is placeholder. Not private.
72+
inline: true #this renders the results on the same domain. Otherwise, it will render the results in the search.gov domain
7173

7274
##########################################################################################
7375
# The values below here are more advanced and should only be

‎_includes/footer.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,5 @@
5151

5252
<script src="{{site.baseurl}}/assets/uswds/js/uswds.min.js"></script>
5353

54-
{% include searchgov/script.html affiliate=site.searchgov_affiliate %}
55-
5654
</body>
5755
</html>

‎_includes/menu.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<header class="usa-header usa-header--extended" role="banner">
77
<div class="usa-navbar">
88
<div class="usa-logo" id="extended-logo">
9-
<em class="usa-logo__text"><a href="{{site.baseurl}}" title="Home" aria-label="Home">{{site.title}}</a></em>
9+
<em class="usa-logo__text"><a href="{{site.baseurl}}/" title="Home" aria-label="Home">{{site.title}}</a></em>
1010
</div>
1111
<button class="usa-menu-btn">Menu</button>
1212
</div>
@@ -32,6 +32,7 @@
3232
</li>
3333
{% endfor %}
3434
</ul>
35+
3536
</li>
3637
{% endunless %}
3738
{% endfor %}
@@ -44,7 +45,7 @@
4445
</li>
4546
{% endfor %}
4647
</ul>
47-
{% include searchgov/form.html affiliate=site.searchgov.affiliate %}
48+
{% include searchgov/form.html searchgov=site.searchgov %}
4849
</div>
4950
</div>
5051
</nav>

‎_includes/meta.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,9 @@
5656
================================================== -->
5757
<!-- env: demo -->
5858
<link rel="stylesheet" href="{{site.baseurl}}/assets/css/styles.css">
59+
<style>
60+
.usa-banner__content{
61+
display: hidden;
62+
}
63+
</style>
5964
</head>

‎_includes/searchgov/form.html‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,24 @@
1-
{% if include.affiliate %}
2-
<form id="search_form" class="usa-search usa-search--small" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get">
3-
<input name="utf8" type="hidden" value="&#x2713;" />
4-
<input type="hidden" name="affiliate" id="affiliate" value="{{ include.affiliate }}" />
5-
<div role="search">
6-
<label class="usa-sr-only" for="extended-search-field-small">Search small</label>
7-
<input class="usa-input usagov-search-autocomplete" id="extended-search-field-small" type="search" name="query" autocomplete="off">
8-
<button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
9-
</div>
10-
</form>
1+
{% comment %}
2+
This will redirect the results to /search template which will handle the js loading
3+
{% endcomment %}
4+
{% if include.searchgov %}
5+
6+
7+
{% if include.searchgov.inline == true %}
8+
<form id="search_form" class="usa-search usa-search--small" action="{{site.baseurl}}/search/" accept-charset="UTF-8" method="get">
9+
{% else %}
10+
<form id="search_form" class="usa-search usa-search--small" action="{{include.searchgov.endpoint}}/search" accept-charset="UTF-8" method="get">
11+
{% endif %}
12+
13+
14+
<input name="utf8" type="hidden" value="&#x2713;" />
15+
<input name="affiliate" type="hidden" value="{{include.searchgov.affiliate}}" />
16+
17+
<div role="search">
18+
<label class="usa-sr-only" for="extended-search-field-small">Search small</label>
19+
<input class="usa-input usagov-search-autocomplete" id="extended-search-field-small" type="search" name="query" autocomplete="off">
20+
<button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
21+
</div>
22+
</form>
23+
1124
{% endif %}

‎_includes/searchgov/script.html‎

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

‎search/index.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
permalink: /search/
3+
layout: page
4+
title: Search
5+
---
6+
7+
8+
<script>
9+
//<![CDATA[
10+
11+
var urlParams = new URLSearchParams(window.location.search);
12+
var searchEndpoint = new URL("{{site.searchgov.endpoint}}/api/v2/search/i14y");
13+
params = { affiliate: "{{site.searchgov.affiliate}}", access_key: "{{site.searchgov.access_key}}", query: urlParams.get('query') }
14+
15+
16+
Object.keys(params).forEach(key => searchEndpoint.searchParams.append(key, params[key]))
17+
18+
fetch(searchEndpoint).then(function(response) {
19+
return response.json()
20+
}).then(function(posts) {
21+
for (item in posts.web.results){
22+
render_result(`
23+
<li class="padding-bottom-5 margin-top-4 usa-prose border-bottom-05 border-base-lightest">
24+
<b class="title"><a href="${posts.web.results[item]['url']}">${posts.web.results[item]['title']}</a></b>
25+
<div> ${posts.web.results[item]['snippet'].replace(/\uE000/g, '<span class="bg-yellow">').replace(/\uE001/g, '</span>')} </div>
26+
</li>
27+
`, true)
28+
29+
}
30+
}).catch(function(ex) {
31+
console.log('parsing failed', ex);
32+
}).finally(function(e){
33+
34+
if(document.getElementById('search-results').childNodes.length == 0){
35+
render_result(`<h4 class="title">No results found</h4>`, false)
36+
}
37+
38+
})
39+
40+
function render_result(content, append = true){
41+
const previous = document.getElementById('search-results').innerHTML;
42+
document.getElementById('search-results').innerHTML = (append == true) ? previous + content : content;
43+
}
44+
45+
//]]>
46+
</script>
47+
48+
49+
{% if site.searchgov %}
50+
<h1>Seach Results</h1>
51+
<ol id="search-results"></ol>
52+
53+
{% if site.searchgov.affiliate == "federalist-uswds-example" %}
54+
<div class="usa-alert usa-alert--info">
55+
<div class="usa-alert__body">
56+
This is an example. You will need to configure your site with search.gov to see the correct search results. To do this:
57+
<ol>
58+
<li>Create an account with Search.gov at <a href="https://search.usa.gov/signup">https://search.usa.gov/signup</a></li>
59+
<li>Go to the "Activate" section and get "API Access Key"</a></li>
60+
<li>Open <code>_config.yml</code> and look for <code>searchgov</code> fields</li>
61+
<li>Add your <code>affiliate</code> and <code>access_key</code></li>
62+
<li>Your results will not show up immediately. Make sure you follow <a href="https://search.gov/manual/searchgov-for-federalist.html">instructions to index your site</a>.</li>
63+
</ol>
64+
</div>
65+
</div>
66+
{% endif %}
67+
{% else %}
68+
<script>
69+
window.location = "/";
70+
</script>
71+
{% endif %}

0 commit comments

Comments
 (0)