Add search index generation and search input with autocomplete

9 files changed, 55 insertions, 8 deletions

diff --git a/assets/theme.scss b/assets/theme.scss
index c08ad4a..cfb8228 100644
--- a/assets/theme.scss
+++ b/assets/theme.scss
@@ -56,6 +56,31 @@ body {
 .main {
 	min-width: 0;
 	min-height: 80vh;
+	.search {
+		font-family: Courier New, sans-serif;
+		color: black;
+		width: 100%;
+		margin: 0 auto 0 auto;
+		&__input {
+			padding: .5em 1em;
+			font-family: Courier New, sans-serif;
+			font-size: 1.2em;
+			width: 100%;
+			border-radius: 0;
+			border: 1px solid black;
+
+		}
+		.search-item {
+			&__link {
+				border-bottom: none;
+			}
+		}
+		.i-amphtml-autocomplete-results {
+			width: 100%;
+			border-radius: 0;
+			margin-left: 0;
+		}
+	}
 	.pagination {
 		margin: 3em auto 2em auto;
 		display: flex;
diff --git a/i18n/en.toml b/i18n/en.toml
index 434c486..8e9ddb7 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -3,7 +3,7 @@ other = "Home"
 [notFound]
 other = "Page not found"
 [search]
-other = "Search"
+other = "Search for a post"
 [goBackHome]
 other = "Go back to the homepage"
 [by]
diff --git a/i18n/es.toml b/i18n/es.toml
index c2d768b..66f014e 100644
--- a/i18n/es.toml
+++ b/i18n/es.toml
@@ -3,7 +3,7 @@ other = "Inicio"
 [notFound]
 other = "Página no encontrada"
 [search]
-other = "Buscar"
+other = "Buscar un artículo"
 [goBackHome]
 other = "Volver a la página de inicio"
 [by]
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 25b2a27..9e4913d 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,4 +1,5 @@
 {{ define "main" }}
+	{{- partial "page/search.html" . -}}
 	<article class="content">
 		{{.Content}}
 	</article>
diff --git a/layouts/index.html b/layouts/index.html
index 328efa5..313dd0b 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,4 +1,5 @@
 {{ define "main" }}
+	{{- partial "page/search.html" . -}}
 	{{ range .Paginator.Pages }}
 		{{- partial "post/summary.html" . -}}
 	{{ end }}
diff --git a/layouts/index.json b/layouts/index.json
index 2364d42..095575e 100644
--- a/layouts/index.json
+++ b/layouts/index.json
@@ -1,12 +1,12 @@
-[
+{ "items": [
     {{- range $index, $page :=.Site.RegularPages -}}
         {{- $months := index .Site.Data (i18n "months") -}}
         {{- $month := index $months (printf "%d" .PublishDate.Month) -}}
         {{- if ne $index 0 -}},{{- end -}}
         {
-            'title': '{{ .Title }}',
-            'link': '{{ .Permalink }}',
-            'date': '{{ i18n "published" (dict "Day" .PublishDate.Day "Month" $month "Year" .PublishDate.Year) }}'
+            "title": "{{ .Title }}",
+            "url": "{{ .Permalink }}",
+            "date": "{{ i18n "published" (dict "Day" .PublishDate.Day "Month" $month "Year" .PublishDate.Year) }}"
         }
     {{- end -}}
-]
\ No newline at end of file
+]}
\ No newline at end of file
diff --git a/layouts/partials/head/base.html b/layouts/partials/head/base.html
index a69ee31..f04348f 100644
--- a/layouts/partials/head/base.html
+++ b/layouts/partials/head/base.html
@@ -17,6 +17,10 @@
 
 {{- partial "head/pwa-metas.html" . -}}
 
+<script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
+<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+
 <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes  -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
 <noscript>
     <style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
diff --git a/layouts/partials/header/menu.html b/layouts/partials/header/menu.html
index 973ffca..b9efe29 100644
--- a/layouts/partials/header/menu.html
+++ b/layouts/partials/header/menu.html
@@ -1,4 +1,3 @@
-
 <ul class="header__menu__list">
     {{ $baseUrl := trim .Site.BaseURL "/" }}
     {{ range .Site.Menus.main }}
diff --git a/layouts/partials/page/search.html b/layouts/partials/page/search.html
new file mode 100644
index 0000000..9d4c6f9
--- /dev/null
+++ b/layouts/partials/page/search.html
@@ -0,0 +1,17 @@
+<amp-autocomplete
+	on="select:AMP.navigateTo(url=event.value)"
+	filter="substring"
+	filter-value="title"
+	src="{{ `search.json` | absLangURL }}"
+	min-characters="1"
+	class="search">
+	<input class="search__input" type="text" placeholder="{{ i18n "search"}}" aria-label="{{ i18n "search"}}">
+	<template class="search__item-template" type="amp-mustache" id="amp-template-custom">
+		<div class="search-item" data-value="{{ `{{url}}` }}">
+			<small class="search-item__date">{{ `{{date}}` }}</small> <br>
+			<a class="search-item__link" {{ printf "href=%q" `{{url}}` | safeHTMLAttr }}>
+				{{ `{{title}}` }}
+			</a>
+		</div>
+	</template>
+</amp-autocomplete>
\ No newline at end of file