Skip to content

Commit

Permalink
Merge pull request #34 from gettypubs/search
Browse files Browse the repository at this point in the history
Search
  • Loading branch information
geealbers authored Sep 26, 2017
2 parents 61f840f + 6195c5e commit 00ee317
Show file tree
Hide file tree
Showing 15 changed files with 297 additions and 160 deletions.
8 changes: 8 additions & 0 deletions content/search.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: Search
toc: false
url: search
menu: false
type: search
online: false
---
21 changes: 17 additions & 4 deletions themes/quire-base-theme/layouts/_default/baseof.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,28 @@
<link rel="stylesheet" href="{{ .Site.BaseURL }}/assets/css/application.css">
<link rel="stylesheet" href="{{ .Site.BaseURL }}/assets/css/custom.css">
</head>
<body class="quire-body quire-body-type--{{ .Type }}{{ with .Params.layout }}--{{ . }}{{ end }}{{ with .Params.class }} quire-body-class--{{ . }}{{ end }}" id="{{ with .Section }}{{ . | urlize }}-{{ end }}{{ .File.BaseFileName }}">
<body class="quire-body quire-body-type--{{ .Type }}{{ with .Params.layout }}--{{ . }}{{ end }}{{ with .Params.class }} quire-body-class--{{ . }}{{ end }}"
id="{{ with .Section }}{{ . | urlize }}-{{ end }}{{ .File.BaseFileName }}">
{{ partial "icons.html" . }}
<div class="quire-nav-group no-js">
<a href="#main-content" class="skip-link no-js">Skip to Main Content</a>
{{ partial "menu.html" . }}
{{ partial "nav.html" . }}
{{ if .Site.Params.searchEnabled }}
{{ partial "search.html" . }}
{{ end }}

<div class="quire-search" role="search">
<a href='{{ relref . "search.md" }}'>
<svg width="1em" height="1em">
<switch>
<use xlink:href="#search-icon">
</use>
<foreignObject>
<img src="path/to/search-icon.png" alt="" />
</foreignObject>
</switch>
</svg>
</a>
</div>

</div>
<main role="main" id="main-content" class="no-js">
{{ block "main" . }}
Expand Down
66 changes: 63 additions & 3 deletions themes/quire-base-theme/layouts/data/search-index.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,66 @@
{{/*
Search Index Data template

This template builds a single JSON file ("/search.json" by default) with data
suitable for being fed into a client-side search tool such as Lunr.js.

You can customize the output from this index as follows:

* Define a variable for any page Type that should be included in the index. This
can be done through the where function (https://gohugo.io/functions/where/)
* Use the `union` function to combine these into a single collection, referred
to here as `searchablePages`.
* Use the `range` function to iterate over this collection and add a custom
dictionary (Go's version of a data hash) to the `index` array in the Scratch
area.
* Output this data to JSON using the `jsonify` function.

In order for Hugo to actually output this data as a static file, add an empty
Markdown file somewhere in your main "content" folder that has the type of
"data" and the layout of "search-index". Set the URL params to whatever you want
the output file to be called. Ex:

project_root/content/search-index.md

---
type: data
layout: search-index
url: search.json
---

NB: This solution makes use of **both** the standard $.Scratch register AND a
block-scoped .Scratch inside the `range` loop.
*/}}

{{- $.Scratch.Add "index" slice -}}
{{- $pages := where .Site.Pages "Type" "eq" "page" -}}
{{- range $index, $page := $pages -}}
{{- $.Scratch.Add "index" (dict "id" $index "title" $page.Title "url" $page.Permalink "type" $page.Type "content" $page.Plain) -}}

{{- $pages := where .Site.RegularPages "Type" "page" -}}
{{- $essays := where .Site.RegularPages "Type" "essay" -}}
{{- $searchablePages := $pages | union $essays -}}

{{- range $index, $page := $searchablePages -}}

{{- .Scratch.Set "pageData" "" -}}
{{- .Scratch.Set "searchContent" "" -}}
{{- .Scratch.Set "pageURL" "" -}}
{{- .Scratch.Set "parentSection" "" -}}
{{- .Scratch.Set "pageType" "" -}}

{{- if gt (len $page.Content) 0 -}}
{{- .Scratch.Set "searchContent" $page.Plain -}}
{{- .Scratch.Set "pageURL" $page.RelPermalink -}}
{{- .Scratch.Set "pageType" $page.Type -}}

{{- else -}}
{{ .Scratch.Set "parentSection" ($page.Section) -}}
{{ .Scratch.Add "parentSection" "/index.md" -}}
{{ .Scratch.Set "searchContent" $page.Params.abstract -}}
{{ .Scratch.Set "pageURL" (relref $page (.Scratch.Get "parentSection")) -}}
{{- .Scratch.Set "pageType" "abstract" -}}

{{- end -}}
{{- .Scratch.Set "pageData" (dict "id" $index "title" $page.Title "url" (.Scratch.Get "pageURL") "type" (.Scratch.Get "pageType") "content" (.Scratch.Get "searchContent")) -}}

{{- $.Scratch.Add "index" (.Scratch.Get "pageData") -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}
31 changes: 23 additions & 8 deletions themes/quire-base-theme/layouts/partials/nav.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<nav class="quire-nav" role="navigation" aria-label="quick">
<ul>

{{ template "if-previous" . }}

{{ if eq .Type "cover" }}
<li>
<a href="{{ .Site.BaseURL }}" rel="start">
Expand Down Expand Up @@ -37,21 +35,30 @@
{{ end }}
<li class="quire-nav__current-page-link">
<span class="visually-hidden">Current Page: </span>
<span class="quire-pdf__title"><em>{{ if .Params.short_title }}{{ .Params.short_title }} {{ else }}{{ .Title | markdownify | truncate 40 }}{{ end }}</em></span>
<span class="quire-pdf__title">
<em>{{ if .Params.short_title }}{{ .Params.short_title }} {{ else }}{{ .Title | markdownify | truncate 40 }}{{ end }}</em>
</span>
</li>
{{ end }}

{{ template "if-next" . }}

</ul>
</nav>


{{- define "if-previous" -}}
{{- if .Prev -}}
{{- if and (ne .Prev.Params.online false) (ne .Prev.Type "data") -}}
<li>
<a href="{{ .Prev.Permalink }}" rel="previous" id="js-prev" >
<svg height="1em" width="1em"><switch><use xlink:href="#left-arrow-icon"></use><foreignObject><img src="path/to/left-arrow-icon.png" alt="" /></foreignObject><switch></svg>
<svg height="1em" width="1em">
<switch>
<use xlink:href="#left-arrow-icon">
</use>
<foreignObject>
<img src="path/to/left-arrow-icon.png" alt="" />
</foreignObject>
</switch>
</svg>
<span class="visually-hidden">Previous Page (left keyboard arrow or swipe)</span>
</a>
</li>
Expand All @@ -61,12 +68,21 @@
{{- end -}}
{{- end -}}


{{- define "if-next" -}}
{{- if .Next -}}
{{- if and (ne .Next.Params.online false) (ne .Next.Type "data") -}}
<li>
<a href="{{ .Next.Permalink }}" rel="next" id="js-next">
<svg width="1em" height="1em"><switch><use xlink:href="#right-arrow-icon"></use><foreignObject><img src="path/to/right-arrow-icon.png" alt="" /></foreignObject><switch></svg>
<svg width="1em" height="1em">
<switch>
<use xlink:href="#right-arrow-icon">
</use>
<foreignObject>
<img src="path/to/right-arrow-icon.png" alt="" />
</foreignObject>
</switch>
</svg>
<span class="visually-hidden">Next Page (right keyboard arrow or swipe)</span>
</a>
</li>
Expand All @@ -75,4 +91,3 @@
{{- end -}}
{{- end -}}
{{- end -}}

36 changes: 27 additions & 9 deletions themes/quire-base-theme/layouts/partials/search-results.html
Original file line number Diff line number Diff line change
@@ -1,11 +1,29 @@
<div id="js-search-results" class="quire-search-results">
<div class="quire-search-results__inner">
<ul id="js-search-results-list" class="quire-search-results__inner__list">
</ul>
<script type="text/x-template" id="search-results-template">
<div>
<input class="search-input"
id="js-search-input"
name="search"
type="text"
@input="update"
value=""/>

<div v-if="ready">
<div v-if="results.length > 0">
<h3 class="meta">Displaying ${results.length} results</h3>
</div>
<div class="quire-search-results__inner">
<ul class="quire-search-results__inner__list">
<li v-for="result in results" class="quire-search-results__inner__list__item">
<a class="quire-search-results__inner__list__item__link" :href="result.url">
<span v-html="result.title"></span>
</a>
<span class="quire-search-results__inner__list__item__type">${ result.type }</span>
</li>
</ul>
</div>
</div>
<div v-else>
<h1>Loading...</h1>
</div>
<template id="js-search-results-template">
<li class="quire-search-results__inner__list__item">
<a class="quire-search-results__inner__list__item__link js-search-results-item-title" href=""></a>
</li>
</template>
</div>
</script>
15 changes: 13 additions & 2 deletions themes/quire-base-theme/layouts/partials/search.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
<div class="quire-search no-js" role="search">
<button class="expander">
<svg width="1em" height="1em"><switch><use xlink:href="#search-icon"></use><foreignObject><img src="path/to/search-icon.png" alt="" /></foreignObject><switch></svg>
<svg width="1em" height="1em">
<switch>
<use xlink:href="#search-icon"></use>
<foreignObject>
<img src="path/to/search-icon.png" alt="" />
</foreignObject>
</switch>
</svg>
<span class="visually-hidden">Search: </span>
<span class="tool-tip"><em>To search the text,<br />please <a href="http://www.activatejavascript.org/" target="_blank">enable JavaScript</a></em></span>
<span class="tool-tip">
<em>To search the text,<br /> please
<a href="http://www.activatejavascript.org/" target="_blank">enable JavaScript</a>
</em>
</span>
</button>
<div>
<div class="quire-navbar__search-input">
Expand Down
15 changes: 15 additions & 0 deletions themes/quire-base-theme/layouts/search/single.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{{ define "main" }}
<div class="quire-page">
<header class="quire-page__header">
<h1 class="quire-page__header__title">Search this Publication</h1>
</header>
<div class="quire-page__content">
<section class="quire-page__content__main">
<div id="js-search">
{{ partial "search-results.html" . }}
</div>
</section>
</div>
</div>

{{ end }}
3 changes: 2 additions & 1 deletion themes/quire-base-theme/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"lodash.debounce": "^4.0.8",
"lodash.findindex": "^4.6.0",
"lunr": "^0.7.2",
"photoswipe": "^4.1.2"
"photoswipe": "^4.1.2",
"vue": "^2.4.4"
}
}
7 changes: 7 additions & 0 deletions themes/quire-base-theme/source/css/_baseof.scss
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,13 @@ sup {

.quire-menu.no-js { display: none;}
}

&.quire-body-type--search {
#js-prev,
#js-next {
display: none;
}
}
}
}

Expand Down
13 changes: 3 additions & 10 deletions themes/quire-base-theme/source/css/_nav.scss
Original file line number Diff line number Diff line change
@@ -1,33 +1,26 @@
.quire-nav {

font-size: 1rem * $small-font-scale;
font-weight: 400;

ul {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
// border: 1px solid #000;
margin: 0;
padding: 0;

li {
margin: 1em;
// border: 1px solid #fff000;
}

li { margin: 1em; }
}

svg {
fill: $primary-color;
height: 1em;
width: 1em;
fill: $primary-color;
}

&__section-link::before,
&__current-page-link::before, {
content: "";
margin-right: $base-spacing;
}

}
Loading

0 comments on commit 00ee317

Please sign in to comment.