Merge pull request #39 from asurbernardo/development

Release 3.0

README.md

@@ -2,27 +2,23 @@
 
 Amperage is a theme for static site generator [GoHugo](https://gohugo.io/). This theme provides the following features:
 
- - Generates AMP pages.
+ - Generates native AMP pages.
  - Valid PWA out of the box.
  - Automatic structured data.
  - Service worker for asset caching, link prefetching and offline navigation.
- - SEO optimized.
+ - Made with SEO in mind.
  - Multilanguage and i18n support.
  - Code highlighting on build time.
  - Super fast and lightweight.
  - Minimal and easily overridable styles.
- - Basic AMP shortcodes for ease of use.
+ - Basic AMP shortcodes and markdown render hooks for ease of use.
  - Header menu, table of contents and related posts.
  - Uses web safe fonts by default.
  - Automatic image croping and srcset generation.
  - Social share buttons and OGP/Twitter card tags.
- - Google analytics with gtag.
+ - Customizable Google Analytics with gtag.
  - Configurable Adsense shortcode.
- - Comment system agnostic.
-
-Lighthouse v5 theme results:
-
-![Lighthouse results](https://raw.githubusercontent.com/asurbernardo/amperage/master/images/lighthouse-results.png)
+ - Comment system agnostic ([Disqus example](https://github.com/asurbernardo/amperage-disqus-example)).
 
 ## ❯ Installation
 
@@ -43,7 +39,7 @@ hugo serve
 
 ## ❯ Kitchen sink
 
-You can check out all the components of this theme [here](https://asur.dev/en/amperage/theme-kitchen-sink) and a fully functional website using this theme [here](https://github.com/asurbernardo/blog).
+You can check out all the components of this theme [here](https://asur.dev/en/amperage/theme-kitchen-sink) and a fully functional website using Amperage [here](https://github.com/asurbernardo/blog) by yours truly.
 
 ## ❯ Configuration
 
@@ -56,7 +52,7 @@ theme = "amperage"
 pygmentsUseClasses = true
 
 # Number of posts shown per page
-paginate = 2
+paginate = 10
 
 # Language sections
 [languages]
@@ -122,6 +118,23 @@ paginate = 2
     publisherLogo = "/logo-amp-article.png"
     publisherLogoWidth = 600
     publisherLogoHeight = 60
+
+# Generate json to use as search index
+[outputs]
+    home = [ "HTML", "RSS", "SearchIndex"]
+
+[outputFormats]
+    [outputFormats.SearchIndex]
+        mediaType= "application/json"
+        baseName= "search"
+        isPlainText= true
+        notAlternative= true
+
+# Enable unsafe mode to be able to use HTML on markdown
+[markup]
+    [markup.goldmark]
+        [markup.goldmark.renderer]
+            unsafe = true
 ```
 
 ## ❯ Customize logo

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;
 }
@@ -19,8 +23,10 @@ body {
 		margin: 0;
 		padding: 0;
 		display: flex;
-		overflow: auto;
+		flex-direction: row;
 		justify-content: flex-start;
+		align-items: center;
+		overflow: auto;
 		border: 1px solid #333;
 		a {
 			font-size: 1.2em;
@@ -50,6 +56,88 @@ body {
 				display: inline;
 			}
 		}
+		&__dropdown-input,
+		&__dropdown-label,
+		&__dropdown-list {
+			display: none;
+		}
+		&__dropdown-input:checked {
+			& ~ .header__menu__dropdown-list {
+				display: flex;
+			}
+			& ~ .header__menu__dropdown-label .header__menu__dropdown-icon {
+				background: transparent;
+			}
+			& ~ .header__menu__dropdown-label .header__menu__dropdown-icon:before {
+				top: 0;
+				transform: rotate(-45deg);
+			}
+			& ~ .header__menu__dropdown-label .header__menu__dropdown-icon:after {
+				top: 0;
+				transform: rotate(45deg);
+			}
+		}
+		&__dropdown-label {
+			cursor: pointer;
+			padding: 1em;
+		}
+		&__dropdown-icon {
+			background: #333;
+			display: block;
+			height: 2px;
+			position: relative;
+			transition: background .2s ease-out;
+			width: 36px;
+			&:before,
+			&:after {
+				background: #333;
+				content: '';
+				display: block;
+				height: 100%;
+				position: absolute;
+				transition: all .2s ease-out;
+				width: 100%;
+			}
+			&:before {
+				top: 15px;
+			}
+			&:after {
+				top: -15px;
+			}
+		}
+		&__dropdown-list {
+			width: 100%;
+			flex-direction: column;
+			align-items: center;
+			border-top: 1px solid #333;
+			li {
+				padding: .5em;
+			}
+		}
+	}
+	&__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%;
+			height: 75px;
+			border-radius: 0;
+			border: 1px solid black;
+			border-top: none;
+			&:focus {
+				outline: none;
+			}
+		}
+		.search-item {
+			&__link {
+				border-bottom: none;
+			}
+		}
 	}
 }
 
@@ -67,6 +155,7 @@ body {
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap;
+	margin-bottom: 1em;
 }
 
 h1 {
@@ -354,13 +443,32 @@ blockquote {
 	}
 	.main,
 	.footer {
-		margin: 1em 0.75em 0 .5em;
+		margin: .5em .75em .5em .75em;
+	}
+	.footer {
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: 1em;
 	}
 	.header {
 		margin: 0;
 		&__menu {
 			border: none;
 			border-bottom: 1px solid #333;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			&__list {
+				display: none;
+			}
+			&__dropdown-label {
+				display: block;
+			}
+		}
+		&__search {
+			&__input {
+				border: none;
+				border-bottom: 1px solid #333;
+			}
 		}
 	}
 	h1 {
@@ -395,7 +503,6 @@ blockquote {
 		&__caption {
 			position: relative;
 			max-width: 100%;
-
 		}
 	}
 	.product {

data/amp-modules.json

@@ -51,5 +51,6 @@
   "amp-vimeo" : "https://cdn.ampproject.org/v0/amp-vimeo-0.1.js",
   "amp-vine" : "https://cdn.ampproject.org/v0/amp-vine-0.1.js",
   "amp-viz-vega" : "https://cdn.ampproject.org/v0/amp-viz-vega-0.1.js",
-  "amp-youtube" : "https://cdn.ampproject.org/v0/amp-youtube-0.1.js"
+  "amp-youtube" : "https://cdn.ampproject.org/v0/amp-youtube-0.1.js",
+  "amp-autocomplete" : "https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"
 }

data/analytics-triggers.json

@@ -0,0 +1,6 @@
+{
+    "trackPageview": {
+        "on": "visible",
+        "request": "pageview"
+    }
+}

data/auto-ads-config.json

@@ -0,0 +1,15 @@
+{
+  "placements": [
+    {
+      "anchor": {
+        "selector": "ARTICLE.content",
+        "sub": {
+          "selector": "P",
+          "all": true
+        }
+      },
+      "pos": 4,
+      "type": 1
+    }
+  ]
+}

exampleSite/config.toml

@@ -80,5 +80,17 @@ paginate = 3
     publisherLogoWidth = 600
     publisherLogoHeight = 60
 
+[outputs]
+    home = [ "HTML", "RSS", "SearchIndex"]
+
+[outputFormats]
+    [outputFormats.SearchIndex]
+        mediaType= "application/json"
+        baseName= "search"
+        isPlainText= true
+        notAlternative= true
+
 [markup]
-    defaultMarkdownHandler = "blackfriday"
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true

exampleSite/content/spanish/prueba/articulo-de-prueba.md

@@ -33,11 +33,11 @@ keywords = ['amperage', 'prueba', 'artículo']
 
 # Otro artículo de prueba
 
-{{% under-title %}}
+{{< under-title >}}
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet, mauris sed tincidunt dignissim, enim justo suscipit dui, vitae pharetra justo nulla at neque. Ut eu nulla in nisi dapibus efficitur. Donec sollicitudin ac arcu ac malesuada. Cras sapien orci, malesuada id ultrices ac, sodales sed est. Integer orci diam, hendrerit sed tellus id, tempor semper enim. Donec enim nunc, rhoncus in tincidunt sed, dictum non risus. Proin scelerisque sit amet nulla a laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut fermentum justo. Duis viverra a dolor nec egestas. Fusce cursus vel nunc eu imperdiet. Nullam luctus felis magna, at feugiat dui ultrices nec. Etiam rutrum odio tellus, at molestie dui condimentum id. Maecenas feugiat dui consectetur ex pellentesque venenatis. In diam urna, hendrerit vitae est eu, laoreet rhoncus lectus. Nullam lorem tortor, commodo a purus dictum, vulputate pretium nisi.
 
-{{% toc %}}
+{{< toc >}}
 
 ## Primer título ✨
 

exampleSite/content/spanish/prueba/otro-articulo-de-prueba.md

@@ -31,11 +31,11 @@ keywords = ['amperage', 'prueba', 'artículo']
 
 # Otro artículo de prueba
 
-{{% under-title %}}
+{{< under-title >}}
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet, mauris sed tincidunt dignissim, enim justo suscipit dui, vitae pharetra justo nulla at neque. Ut eu nulla in nisi dapibus efficitur. Donec sollicitudin ac arcu ac malesuada. Cras sapien orci, malesuada id ultrices ac, sodales sed est. Integer orci diam, hendrerit sed tellus id, tempor semper enim. Donec enim nunc, rhoncus in tincidunt sed, dictum non risus. Proin scelerisque sit amet nulla a laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut fermentum justo. Duis viverra a dolor nec egestas. Fusce cursus vel nunc eu imperdiet. Nullam luctus felis magna, at feugiat dui ultrices nec. Etiam rutrum odio tellus, at molestie dui condimentum id. Maecenas feugiat dui consectetur ex pellentesque venenatis. In diam urna, hendrerit vitae est eu, laoreet rhoncus lectus. Nullam lorem tortor, commodo a purus dictum, vulputate pretium nisi.
 
-{{% toc %}}
+{{< toc >}}
 
 ## Primer título ✨
 

exampleSite/content/test/emoji-support.md

@@ -28,7 +28,7 @@ keywords = ['hugo', 'emoji', 'example']
 
 # Emoji support
 
-{{% under-title %}}
+{{< under-title >}}
 
 Emoji can be enabled in a Hugo project in a number of ways.
 

exampleSite/content/test/markdown-syntax.md

@@ -29,7 +29,7 @@ keywords = ['hugo', 'markdown', 'example']
 
 # Markdown Syntax Guide
 
-{{% under-title %}}
+{{< under-title >}}
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
 

exampleSite/content/test/placeholder-text.md

@@ -29,7 +29,7 @@ keywords = ['hugo', 'placeholder', 'example']
 
 # Placeholder Text
 
-{{% under-title %}}
+{{< under-title >}}
 
 Lorem est tota propiore conpellat pectoribus de
 pectora summo. Redit teque digerit hominumque toris verebor lumina non cervice

exampleSite/content/test/yet-another-test-post.md

@@ -34,11 +34,11 @@ keywords = ['amperage', 'test', 'post']
 
 # Yet another test post
 
-{{% under-title %}}
+{{< under-title >}}
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet, mauris sed tincidunt dignissim, enim justo suscipit dui, vitae pharetra justo nulla at neque. Ut eu nulla in nisi dapibus efficitur. Donec sollicitudin ac arcu ac malesuada. Cras sapien orci, malesuada id ultrices ac, sodales sed est. Integer orci diam, hendrerit sed tellus id, tempor semper enim. Donec enim nunc, rhoncus in tincidunt sed, dictum non risus. Proin scelerisque sit amet nulla a laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut fermentum justo. Duis viverra a dolor nec egestas. Fusce cursus vel nunc eu imperdiet. Nullam luctus felis magna, at feugiat dui ultrices nec. Etiam rutrum odio tellus, at molestie dui condimentum id. Maecenas feugiat dui consectetur ex pellentesque venenatis. In diam urna, hendrerit vitae est eu, laoreet rhoncus lectus. Nullam lorem tortor, commodo a purus dictum, vulputate pretium nisi.
 
-{{% toc %}}
+{{< toc >}}
 
 ## First title ✨
 

i18n/en.toml

@@ -2,8 +2,10 @@
 other = "Home"
 [notFound]
 other = "Page not found"
+[openDropdown]
+other = "Open dropdown menu"
 [search]
-other = "Search"
+other = "Search for a post..."
 [goBackHome]
 other = "Go back to the homepage"
 [by]

i18n/es.toml

@@ -2,8 +2,10 @@
 other = "Inicio"
 [notFound]
 other = "Página no encontrada"
+[openDropdown]
+other = "Abrir menú desplegable"
 [search]
-other = "Buscar"
+other = "Buscar un artículo..."
 [goBackHome]
 other = "Volver a la página de inicio"
 [by]

layouts/404.html

@@ -44,7 +44,7 @@
         <main class="flex-container">
             <h1 class="flex-item">{{ i18n "notFound"}}</h1>
             <h1 class="flex-item"> 🏜️ </h1>
-            <p class="flex-item"><a href="{{ .Site.BaseURL }}">{{ i18n "goBackHome" }}</a></p>
+            <p class="flex-item"><a href="{{ "/" | absLangURL }}">{{ i18n "goBackHome" }}</a></p>
         </main>
     </body>
 </html>