hugo/panaetius-theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Creating search bar

Browse Source
This commit is contained in:
Daniel Tomlinson
2020-06-08 03:34:32 +01:00
parent d369ecf296
commit db2a9496c7
9 changed files with 152 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
data/panaetius-theme/assets.json
View File

@@ -9,7 +9,7 @@
"js": "2.lazyload.1168fc21175de558d316.min.js" "js": "2.lazyload.1168fc21175de558d316.min.js"
}, },
"main": { "main": {
"css": "main.7ec8eedcf4dbffc5a912.min.css", "css": "main.793c393487568a4fd1c3.min.css",
"js": "main.de04e43a25a1ed226095.min.js" "js": "main.de04e43a25a1ed226095.min.js"
}, },
"vendors~app": { "vendors~app": {

2
layouts/_default/list.html
View File

@@ -3,7 +3,7 @@
{{- if or .Title .Content -}} {{- if or .Title .Content -}}
<div class="row py-3"> <div class="row py-3">
<div class="col"> <div class="col">
{{ with .Title }}<h3 class="display-4">{{ . }}</h3>{{ end }} {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
{{- with .Content -}} {{- with .Content -}}
<div class="content"> <div class="content">
{{ . }} {{ . }}

19
layouts/partials/header.html
View File

@@ -2,8 +2,7 @@
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" id="navbar-main-menu"> <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" id="navbar-main-menu">
<div class="container"> <div class="container">
<a class="navbar-brand" href="{{ .Site.BaseURL }}"><img src="/images/DUCK_256.png" width="30" height="30" class="mr-3 rotate-a-20"/>{{ .Site.Title }}</a> <a class="navbar-brand" href="{{ .Site.BaseURL }}"><img src="/images/DUCK_256.png" width="30" height="30" class="mr-3 rotate-a-20" />{{ .Site.Title }}</a>
<!-- <a class="navbar-brand font-weight-bold" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
@@ -14,12 +13,20 @@
{{- end -}} {{- end -}}
{{ with .Site.Menus.main }} {{ with .Site.Menus.main }}
{{ range . }} {{ range . }}
<li class="nav-item{{ if $current.IsMenuCurrent "main" . }} active{{ end }}"><a class="nav-link" href="{{ .URL | relLangURL }}">{{ .Name }}</a></li> <li class="nav-item{{ if or (eq $current.URL .URL) ($current.HasMenuCurrent "main" .) }} active{{ end }}"><a class="nav-link" href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
{{ end }} {{ end }}
{{ end }} {{ end }}
<li class="nav-item"> <li class="nav-item" id="nav-search">
<form id="search-form" method="get" action="/search" method="POST" class="form-inline">
<i class="fas fa-search" data-fa-transform="down-5"></i> <input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
<div class="input-group">
<div class="input-group-append">
<!-- <div> -->
<button type="submit" id="search-button" class="btn btn-primary"> <i class="fa fa-search fa-sm"></i></button>
<!-- <button type="submit" id="search-button" class="btn btn-primary form-control form-control-sm"> <i class="fa fa-search"></i></button> -->
</div>
</form>
<!-- <i class="fas fa-search" data-fa-transform="down-5"></i> -->
</li> </li>
</ul> </ul>
</div> </div>

27
layouts/search/single.html
View File

@@ -1,21 +1,24 @@
{{ define "main" }} {{ define "main" }}
{{ .Scratch.Set "IsSingle" true }}
<main class="content-page container pt-7 pb-5"> <main class="content-page container pt-7 pb-5">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
{{ .Content }} <h1>Search</h1>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<form id="search-form" method="get" action="/search" method="POST" class="form-inline"> <div class="d-flex justify-content-center">
<input type="text" name="q" id="search" class="form-control" placeholder="Search" style="width: 20%;"> <form id="search-form" method="get" action="/search" method="POST" class="form-inline form-single">
<input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
<div class="input-group"> <div class="input-group">
<div class="input-group-append"> <div class="input-group-append">
<button type="submit" id="search-button" class="btn btn-secondary"><i class="fa fa-search"></i></button> <button type="submit" id="search-button" class="btn btn-primary" style="margin-left: -5px;"> <span class="fa fa-search form-control-feedback"></span></button>
</div> </div>
</form> </form>
</div> </div>
</div>
<!-- <div class="search-input-wrap"> <!-- <div class="search-input-wrap">
<form id="search-form" method="get" action=""> <form id="search-form" method="get" action="">
<input id="search" name="q" type="text" /> <input id="search" name="q" type="text" />
@@ -42,10 +45,8 @@
{{ $p | jsonify }} {{ $p | jsonify }}
</div> </div>
<script src="{{ print "dist/" "lunr.b93de9e9609074d666f5123e866e25ed.min.js" | relURL }}"></script> <script src="{{ print "dist/" "lunr.b93de9e9609074d666f5123e866e25ed.min.js" | relURL }}"></script>
<script> <script>
const posts = JSON.parse( const posts = JSON.parse({{$p | jsonify}});
{{ $p | jsonify }}
);
const query = new URLSearchParams(window.location.search); const query = new URLSearchParams(window.location.search);
console.log(query) console.log(query)
const searchString = query.get('q'); const searchString = query.get('q');
@@ -58,16 +59,18 @@ const posts = JSON.parse(
return acc; return acc;
}, {}); }, {});
fetch('/search-index.json').then(function (res) { fetch('/search-index.json').then(function(res) {
return res.json(); return res.json();
}).then(function (data) { }).then(function(data) {
const index = lunr.Index.load(data); const index = lunr.Index.load(data);
const matches = index.search(searchString); const matches = index.search(searchString);
const matchPosts = []; const matchPosts = [];
matches.forEach((m) => { matches.forEach((m) => {
matchPosts.push(postsByTitle[m.ref]); matchPosts.push(postsByTitle[m.ref]);
}); });
matchPosts[0].tags.forEach(p => {console.log(p)}) matchPosts[0].tags.forEach(p => {
console.log(p)
})
console.log(matchPosts[0].tags) console.log(matchPosts[0].tags)
try { try {
$target.innerHTML = matchPosts.map(p => { $target.innerHTML = matchPosts.map(p => {
@@ -98,7 +101,7 @@ const posts = JSON.parse(
</div> </div>
</div>`; </div>`;
}).join(''); }).join('');
} catch(TypeError) { } catch (TypeError) {
$target.innerHTML = `<div>No search results found.</div>`; $target.innerHTML = `<div>No search results found.</div>`;
console.error(TypeError) console.error(TypeError)
} }

2
layouts/tags/terms.html
View File

@@ -3,7 +3,7 @@
{{- if or .Title .Content -}} {{- if or .Title .Content -}}
<div class="row py-3"> <div class="row py-3">
<div class="col"> <div class="col">
{{ with .Title }}<h3 class="display-4">{{ . }}</h3>{{ end }} {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
{{- with .Content -}} {{- with .Content -}}
<div class="content"> <div class="content">
{{ . }} {{ . }}

61
src/scss/_variables.scss
View File

@@ -11,59 +11,63 @@ $gray-700: #264d61;
$gray-800: #0c344b; $gray-800: #0c344b;
$gray-900: #082333; $gray-900: #082333;
$font-grey: #343a40;
$primary: #a02f2f;
$secondary: #1B1725;
$text-muted: $gray-400; $text-muted: $gray-400;
$body-color: $gray-800; $body-color: $font-grey;
$light: $white; $light: $white;
$dark: $gray-900; $dark: $gray-900;
$headings-color: $gray-900; $headings-color: $font-grey;
// $headings-font-family: 'Open Sans', sans-serif; $headings-font-family: "Rotunda",
$headings-font-family: "Rotunda", sans-serif; sans-serif;
$headings-font-weight: 500; $headings-font-weight: 500;
// $font-family-sans-serif: 'Roboto', sans-serif; // $nav-link-disabled-color: $font-grey;
$font-family-sans-serif: "Rotunda", sans-serif; // $nav-tabs-link-active-color: $font-grey;
$font-family-monospace: "Realtime", monospace; $navbar-light-color: $font-grey;
$font-family-serif: "Roboto Slab", serif; $navbar-light-hover-color: $primary;
$navbar-light-active-color: $primary;
$font-family-sans-serif: "Rotunda",
sans-serif;
$font-family-monospace: "Realtime",
monospace;
$font-family-serif: "Roboto Slab",
serif;
$font-weight-normal: 400; $font-weight-normal: 400;
$font-weight-base: 400; $font-weight-base: 400;
$code-font-size: 100%; $code-font-size: 100%;
$link-color: $gray-800; $link-color: $primary;
$link-decoration: underline; $link-decoration: none;
$font-size-base: 1.125rem; $font-size-base: 1.125rem;
$headings-margin-bottom: 1.25rem; $headings-margin-bottom: 1.25rem;
$paragraph-margin-bottom: 1.5rem; $paragraph-margin-bottom: 1.5rem;
$spacer: 1.125rem; $spacer: 1.125rem;
$spacers: ( $spacers: (0: 0,
0: 0, 1: ($spacer * 0.25,
1: (
$spacer * 0.25,
), ),
2: ( 2: ($spacer * 0.5,
$spacer * 0.5,
), ),
3: $spacer, 3: $spacer,
4: ( 4: ($spacer * 1.5,
$spacer * 1.5,
), ),
5: ( 5: ($spacer * 3,
$spacer * 3,
), ),
6: ( 6: ($spacer * 5,
$spacer * 5,
), ),
7: ( 7: ($spacer * 6,
$spacer * 6,
), ),
8: ( 8: ($spacer * 7,
$spacer * 7,
), ),
9: ( 9: ($spacer * 8,
$spacer * 8,
), ),
); );
@@ -80,4 +84,3 @@ $navbar-padding-y: 0.4rem;
// Overrides // Overrides
$body-bg: #f9f9f9; $body-bg: #f9f9f9;

4
src/scss/panaetius-theme.scss
View File

@@ -101,3 +101,7 @@ img.front-background {
object-fit: cover; object-fit: cover;
position: fixed; position: fixed;
} }
a.navbar-brand {
color: $font-grey !important;
}

22
src/scss/search-bar.scss Normal file
View File

@@ -0,0 +1,22 @@
// li#nav-search {
form#search-form {
margin-top: 2px;
& input {
width: 80%;
padding-top: 10px;
}
& button {
margin-left: -5px;
height: calc(1.5em + .5rem - 1px);
& .fa-search {
margin-bottom: 2px !important;
}
}
}
form.form-single {
width: 80% !important;
}

2
src/scss/styles.scss
View File

@@ -4,4 +4,6 @@
@import "panaetius-theme"; @import "panaetius-theme";
@import "sticky-footer"; @import "sticky-footer";
@import "search"; @import "search";
@import "search-bar";
@import "toc";
@import "fonts"; @import "fonts";