Skip to content

Commit f0dcc1e

Browse files
RyanJFieldRyanJField
committed
search modification
1 parent 6beca79 commit f0dcc1e

11 files changed

+928
-8
lines changed

‎LICENSE

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
The MIT License (MIT)
22

3+
Copyright (c) 2020 Ryan Field
4+
35
Copyright (c) 2018 Alex Shpak
46

57
Permission is hereby granted, free of charge, to any person obtaining a copy of

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
[![Hugo](https://img.shields.io/badge/hugo-0.68-blue.svg)](https://gohugo.io)
44
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
5-
![Build with Hugo](https://github.com/alex-shpak/hugo-book/workflows/Build%20with%20Hugo/badge.svg)
5+
![Build with Hugo](https://github.com/RyanJField/hugo-book/workflows/Build%20with%20Hugo/badge.svg)
66

77
### [Hugo](https://gohugo.io) documentation theme as simple as plain book
88

9-
![Screenshot](https://github.com/alex-shpak/hugo-book/blob/master/images/screenshot.png)
9+
![Screenshot](https://github.com/RyanJField/hugo-book/blob/master/images/screenshot.png)
1010

1111
- [Features](#features)
1212
- [Requirements](#requirements)
@@ -41,7 +41,7 @@
4141
Navigate to your hugo project root and run:
4242

4343
```
44-
git submodule add https://github.com/alex-shpak/hugo-book themes/book
44+
git submodule add https://github.com/RyanJField/hugo-book themes/book
4545
```
4646

4747
Then run hugo (or set `theme = "book"`/`theme: book` in configuration file)

‎assets/_custom.scss

+327
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,330 @@
11
/* You can add custom styles here. */
22

33
// @import "plugins/numbered";
4+
5+
//
6+
// Search input and autocomplete
7+
//
8+
9+
@import "plugins/nq";
10+
@import "plugins/typography";
11+
12+
.search {
13+
position: relative;
14+
z-index: 2;
15+
flex-grow: 1;
16+
height: $sp-10;
17+
padding: $sp-2;
18+
transition: padding linear #{$transition-duration / 2};
19+
20+
@include mq(md) {
21+
position: relative !important;
22+
width: auto !important;
23+
height: 100% !important;
24+
padding: 0;
25+
transition: none;
26+
}
27+
}
28+
29+
.search-input-wrap {
30+
position: relative;
31+
z-index: 1;
32+
height: $sp-8;
33+
overflow: hidden;
34+
border-radius: $border-radius;
35+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
36+
transition: height linear #{$transition-duration / 2};
37+
38+
@include mq(md) {
39+
position: absolute;
40+
width: 100%;
41+
max-width: $search-results-width;
42+
height: 100% !important;
43+
border-radius: 0;
44+
box-shadow: none;
45+
transition: width ease $transition-duration;
46+
}
47+
}
48+
49+
.search-input {
50+
position: absolute;
51+
width: 100%;
52+
height: 100%;
53+
padding-top: $sp-2;
54+
padding-right: $gutter-spacing-sm;
55+
padding-bottom: $sp-2;
56+
padding-left: #{$gutter-spacing-sm + $sp-5};
57+
font-size: 16px;
58+
background-color: $search-background-color;
59+
border-top: 0;
60+
border-right: 0;
61+
border-bottom: 0;
62+
border-left: 0;
63+
border-radius: 0;
64+
65+
@include mq(md) {
66+
padding-top: $gutter-spacing-sm;
67+
padding-bottom: $gutter-spacing-sm;
68+
padding-left: #{$gutter-spacing + $sp-5};
69+
font-size: 14px;
70+
background-color: $body-background-color;
71+
transition: padding-left linear #{$transition-duration / 2};
72+
}
73+
74+
&:focus {
75+
outline: 0;
76+
77+
+ .search-label .search-icon {
78+
color: $link-color;
79+
}
80+
}
81+
}
82+
83+
.search-label {
84+
position: absolute;
85+
display: flex;
86+
height: 100%;
87+
padding-left: $gutter-spacing-sm;
88+
89+
@include mq(md) {
90+
padding-left: $gutter-spacing;
91+
transition: padding-left linear #{$transition-duration / 2};
92+
}
93+
94+
.search-icon {
95+
width: #{$sp-4 * 1.2};
96+
height: #{$sp-4 * 1.2};
97+
align-self: center;
98+
color: $grey-dk-000;
99+
}
100+
}
101+
102+
.search-results {
103+
position: absolute;
104+
left: 0;
105+
display: none;
106+
width: 100%;
107+
max-height: calc(100% - #{$sp-10});
108+
overflow-y: auto;
109+
background-color: $search-background-color;
110+
border-bottom-right-radius: $border-radius;
111+
border-bottom-left-radius: $border-radius;
112+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
113+
114+
@include mq(md) {
115+
top: 100%;
116+
width: $search-results-width;
117+
max-height: calc(100vh - 200%) !important;
118+
}
119+
}
120+
121+
.search-results-list {
122+
padding-left: 0;
123+
margin-bottom: $sp-1;
124+
list-style: none;
125+
@include fs-4;
126+
127+
@include mq(md) {
128+
@include fs-3;
129+
}
130+
}
131+
132+
.search-results-list-item {
133+
padding: 0;
134+
margin: 0;
135+
}
136+
137+
.search-result {
138+
display: block;
139+
padding-top: $sp-1;
140+
padding-right: $sp-3;
141+
padding-bottom: $sp-1;
142+
padding-left: $sp-3;
143+
144+
&:hover,
145+
&.active {
146+
background-color: $feedback-color;
147+
}
148+
}
149+
150+
.search-result-title {
151+
display: block;
152+
padding-top: $sp-2;
153+
padding-bottom: $sp-2;
154+
155+
@include mq(sm) {
156+
display: inline-block;
157+
width: 40%;
158+
padding-right: $sp-2;
159+
vertical-align: top;
160+
}
161+
}
162+
163+
.search-result-doc {
164+
display: flex;
165+
align-items: center;
166+
word-wrap: break-word;
167+
168+
&.search-result-doc-parent {
169+
opacity: 0.5;
170+
@include fs-3;
171+
172+
@include mq(md) {
173+
@include fs-2;
174+
}
175+
}
176+
177+
.search-result-icon {
178+
width: $sp-4;
179+
height: $sp-4;
180+
margin-right: $sp-2;
181+
color: $link-color;
182+
flex-shrink: 0;
183+
}
184+
185+
.search-result-doc-title {
186+
overflow: auto;
187+
}
188+
}
189+
190+
.search-result-section {
191+
margin-left: #{$sp-4 + $sp-2};
192+
word-wrap: break-word;
193+
}
194+
195+
.search-result-rel-url {
196+
display: block;
197+
margin-left: #{$sp-4 + $sp-2};
198+
overflow: hidden;
199+
color: $search-result-preview-color;
200+
text-overflow: ellipsis;
201+
white-space: nowrap;
202+
@include fs-1;
203+
}
204+
205+
.search-result-previews {
206+
display: block;
207+
padding-top: $sp-2;
208+
padding-bottom: $sp-2;
209+
padding-left: $sp-4;
210+
margin-left: $sp-2;
211+
color: $search-result-preview-color;
212+
word-wrap: break-word;
213+
border-left: $border;
214+
border-left-color: $border-color;
215+
@include fs-2;
216+
217+
@include mq(sm) {
218+
display: inline-block;
219+
width: 60%;
220+
padding-left: $sp-2;
221+
margin-left: 0;
222+
vertical-align: top;
223+
}
224+
}
225+
226+
.search-result-preview + .search-result-preview {
227+
margin-top: $sp-1;
228+
}
229+
230+
.search-result-highlight {
231+
font-weight: bold;
232+
}
233+
234+
.search-no-result {
235+
padding-top: $sp-2;
236+
padding-right: $sp-3;
237+
padding-bottom: $sp-2;
238+
padding-left: $sp-3;
239+
@include fs-3;
240+
}
241+
242+
.search-button {
243+
position: fixed;
244+
right: $sp-4;
245+
bottom: $sp-4;
246+
display: flex;
247+
width: $sp-9;
248+
height: $sp-9;
249+
background-color: $search-background-color;
250+
border: 1px solid rgba($link-color, 0.3);
251+
border-radius: #{$sp-9 / 2};
252+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
253+
align-items: center;
254+
justify-content: center;
255+
}
256+
257+
.search-overlay {
258+
position: fixed;
259+
top: 0;
260+
left: 0;
261+
z-index: 1;
262+
width: 0;
263+
height: 0;
264+
background-color: rgba(0, 0, 0, 0.3);
265+
opacity: 0;
266+
transition: opacity ease $transition-duration, width 0s $transition-duration,
267+
height 0s $transition-duration;
268+
}
269+
270+
.search-active {
271+
.search {
272+
position: fixed;
273+
top: 0;
274+
left: 0;
275+
width: 100%;
276+
height: 100%;
277+
padding: 0;
278+
}
279+
280+
.search-input-wrap {
281+
height: $sp-10;
282+
border-radius: 0;
283+
284+
@include mq(md) {
285+
width: $search-results-width;
286+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
287+
}
288+
}
289+
290+
.search-input {
291+
background-color: $search-background-color;
292+
293+
@include mq(md) {
294+
padding-left: #{$sp-4 * 1.25 + $sp-5};
295+
}
296+
}
297+
298+
.search-label {
299+
@include mq(md) {
300+
padding-left: #{$sp-4 * 1.25};
301+
}
302+
}
303+
304+
.search-results {
305+
display: block;
306+
}
307+
308+
.search-overlay {
309+
width: 100%;
310+
height: 100%;
311+
opacity: 1;
312+
transition: opacity ease $transition-duration, width 0s, height 0s;
313+
}
314+
315+
@include mq(md) {
316+
.main {
317+
position: fixed;
318+
right: 0;
319+
left: 0;
320+
}
321+
}
322+
323+
.main-header {
324+
padding-top: $sp-10;
325+
326+
@include mq(md) {
327+
padding-top: 0;
328+
}
329+
}
330+
}

‎assets/fancy-search-data.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
{{- $first:= true}}
3+
{{- range $index, $page := where .Site.Pages "Kind" "in" (slice "home" "page" "section") }}
4+
{{- $i :=add $index 1 }}
5+
{{- if $page.Content }}
6+
{{- if not $first }}
7+
,
8+
{{- end -}}
9+
"{{$i}}": {
10+
"url": "{{ $page.RelPermalink }}",
11+
"relUrl": "{{ $page.RelPermalink }}",
12+
"title": {{ (partial "docs/title" $page) | jsonify }},
13+
"doc": {{ (partial "docs/title" $page) | jsonify }},
14+
"section": {{ (partial "docs/title" $page.Parent) | jsonify }},
15+
"content": {{$page.Plain | jsonify}}
16+
}
17+
{{- $first = false}}
18+
{{- end -}}
19+
{{- end -}}
20+
}
21+

0 commit comments

Comments
 (0)