Basic implementation of infinite scroll using amp-next-page component

6 files changed, 32 insertions, 2 deletions

diff --git a/assets/theme.scss b/assets/theme.scss
index 08908cf..bdfb60e 100644
--- a/assets/theme.scss
+++ b/assets/theme.scss
@@ -9,6 +9,10 @@ body {
 	color: black;
 }
 
+amp-next-page {
+	grid-column: span 12;
+}
+
 .header, .main, .footer {
 	grid-column: 4 / span 6;
 }
@@ -151,6 +155,7 @@ body {
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap;
+	margin-bottom: 1em;
 }
 
 h1 {
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 800f5b6..34a7d33 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -17,5 +17,8 @@
 		<footer class="footer">
 			{{- partial "footer/base.html" . -}}
 		</footer>
+		{{ if .IsPage }}
+			{{- partial "page/infinite-scroll.html" . -}}
+		{{ end }}
 	</body>
 </html>
diff --git a/layouts/partials/head/amp-components.html b/layouts/partials/head/amp-components.html
index b60f15c..a103c11 100644
--- a/layouts/partials/head/amp-components.html
+++ b/layouts/partials/head/amp-components.html
@@ -23,4 +23,7 @@
     {{ if eq $.Site.Params.AutoAdsEnabled true }}
         <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
     {{ end }}
+{{ end }}
+{{ if .IsPage }}
+    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/header/base.html b/layouts/partials/header/base.html
index bba6444..1db2076 100644
--- a/layouts/partials/header/base.html
+++ b/layouts/partials/header/base.html
@@ -1,4 +1,4 @@
-<nav class="header__menu">
+<nav class="header__menu" next-page-hide>
     <a class="header__menu__logo" data-rel="prefetch" href="{{ "" | absLangURL }}" aria-label="{{ i18n "goBackHome" }}">
         {{- partial "header/logo.html" . -}}
     </a>
diff --git a/layouts/partials/header/search.html b/layouts/partials/header/search.html
index dafa9f4..55800eb 100644
--- a/layouts/partials/header/search.html
+++ b/layouts/partials/header/search.html
@@ -4,7 +4,8 @@
     filter-value="title"
     src="{{ `search.json` | absLangURL }}"
     min-characters="1"
-    class="header__search">
+    class="header__search"
+    next-page-hide>
     <input class="header__search__input" type="text" placeholder="{{ i18n "search"}}" aria-label="{{ i18n "search"}}">
     <template class="header__search__item-template" type="amp-mustache" id="amp-template-custom">
         <div class="search-item" data-value="{{ `{{url}}` }}">
diff --git a/layouts/partials/page/infinite-scroll.html b/layouts/partials/page/infinite-scroll.html
new file mode 100644
index 0000000..cd9e09e
--- /dev/null
+++ b/layouts/partials/page/infinite-scroll.html
@@ -0,0 +1,18 @@
+{{ $related := .Site.RegularPages.Related . | first 3 }}
+
+{{ with $related }}
+<amp-next-page>
+    <script type="application/json">
+        [
+            {{- range $index, $post := . -}}
+                {{- if ne $index 0 -}},{{- end -}}
+                {
+                    "image": "",
+                    "title": "{{ .Title }}",
+                    "url": "{{ .Permalink }}"
+                }
+            {{- end -}}
+        ]
+    </script>
+</amp-next-page>
+{{ end }}
\ No newline at end of file