Merge pull request #28 from asurbernardo/development

Version 2.0

16 files changed, 97 insertions, 68 deletions

diff --git a/README.md b/README.md
index 7f322ef..fce52af 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ Lighthouse v5 theme results:
 
 ![Lighthouse results](https://raw.githubusercontent.com/asurbernardo/amperage/master/images/lighthouse-results.png)
 
-## Installation
+## ❯ Installation
 
 You can use the `exampleSite` provided to bootstrap your new project:
 
@@ -40,11 +40,11 @@ cd new-site
 hugo serve
 ```
 
-## Kitchen sink
+## ❯ 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).
 
-## Configuration
+## ❯ Configuration
 
 ```toml
 # Default language if you have a multi-language setup
@@ -123,15 +123,15 @@ paginate = 2
     publisherLogoHeight = 60
 ```
 
-## Customize logo
+## ❯ Customize logo
 
 To override the default logo add the svg markup on the partial `layouts/partials/header/logo.html`.
 
-## Customize styles
+## ❯ Customize styles
 
 To override default styles just add the file `assets/custom.scss` to your project and it will be transpiled, minified and appended automatically. Default styles only weight 5KB (including code highlighting), that leaves you with 45KB to further customize the theme.
 
-## Enable cross-domain service worker installation
+## ❯ Enable cross-domain service worker installation
 
 To enable cross-domain service worker you need to override the file `static/install-sw.html`:
 
@@ -143,7 +143,7 @@ To enable cross-domain service worker you need to override the file `static/inst
 </amp-install-serviceworker>
 ```
 
-## Menu links
+## ❯ Menu links
 
 On the menu you can set internal and external links. To set external links you can use the `config.toml` file:
 
@@ -162,12 +162,15 @@ On the menu you can set internal and external links. To set external links you c
 
 If you want to display a page from your own site on the menu you need to add to the frontmatter of that page:
 ```
-menu = "main"
+[languages.es]
+    [menu.main]
+        name = "Your title for the menu"
+        weight = 20
 ```
 
 This distinction is important because the service worker needs to identify the internal URLs so it can eager load them.
 
-## Display ads
+## ❯ Display ads
 
 To enable ads you need to have an approved Adsense publisher code. Once you get one set it in the `config.toml`:
 
@@ -185,7 +188,7 @@ Now you can use the `amp-ad` shortcode:
     slot="123456789" >}}
 ```
 
-## Comments
+## ❯ Comments
 
 Due to AMP requirements the comments need to be hosted in a domain different from the original. Amperage is ready to receive a URL to embed comments at the end of every post. This is to achieve a degree of agnosticy for the comment system.
 
@@ -214,6 +217,6 @@ var disqus_config = function () {
 
 What I personally recommend is to use a new Github Pages project and refer it from your main site. Here you can see a [fully functional example using Disqus](https://github.com/asurbernardo/blog-comments).
 
-## Contributing to Amperage
+## ❯ Contributing to Amperage
 
 If you have a feature request or have found a bug feel free to open a new issue.
diff --git a/assets/theme.scss b/assets/theme.scss
index 9391c98..c08ad4a 100644
--- a/assets/theme.scss
+++ b/assets/theme.scss
@@ -1,9 +1,10 @@
 body {
+	max-width: 100%;
 	display: grid;
 	grid-template-columns: repeat(12, 1fr);
 	grid-gap: 1em 1em;
 	font-size: 1.2em;
-	font-family: Courier New;
+	font-family: Courier New, sans-serif;
 	line-height: 1.6;
 	color: black;
 }
diff --git a/assets/variables.scss b/assets/variables.scss
index 3c11e76..05d1056 100644
--- a/assets/variables.scss
+++ b/assets/variables.scss
@@ -1,4 +1,4 @@
 /* Variables */
 
 $main-color: #d14;
-$secondary-color: #teal;
\ No newline at end of file
+$secondary-color: teal;
\ No newline at end of file
diff --git a/layouts/404.html b/layouts/404.html
index 7a76082..626e2c8 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -10,7 +10,7 @@
                 height: 100%;
             }
             body {
-                font-family: Courier New;
+                font-family: Courier New, sans-serif;
                 margin: 0;
             }
             h1 {
diff --git a/layouts/partials/blocks/image.html b/layouts/partials/blocks/image.html
new file mode 100644
index 0000000..c923e86
--- /dev/null
+++ b/layouts/partials/blocks/image.html
@@ -0,0 +1,36 @@
+<figure class="figure {{ with .caption }}figure--with-caption{{ end }}">
+    {{ with .caption }}
+        <figcaption class="figure__caption">
+            {{ . }}
+        </figcaption>
+    {{ end }}
+    {{ $resource := resources.Get .src }}
+    {{ with $resource }}
+        {{ if and (eq .ResourceType "image") (ne .MediaType.SubType "svg") }}
+            <amp-img
+                src="{{ .Permalink | absURL }}"
+                srcset="
+                    {{ (.Resize "1200x").Permalink }} 1200w,
+                    {{ (.Resize "800x").Permalink }} 800w,
+                    {{ (.Resize "640x").Permalink }} 640w,
+                    {{ (.Resize "480x").Permalink }} 480w,
+                    {{ (.Resize "320x").Permalink }} 320w
+                "
+                width={{ with $.width }} "{{ . }}" {{ else }} {{ .Width }} {{ end }}
+                height={{ with $.height }} "{{ . }}" {{ else }} {{ .Height }} {{ end }}
+                layout={{ with $.layout }}"{{ . }}"{{else}}"responsive"{{ end }}
+                {{ with $.alt }}alt="{{ . }}"{{ end }}
+                class="figure__image {{ with $.class }}{{ . }}{{ end }} {{ with $.caption }}figure__image--with-caption{{ end }}">
+            </amp-img>
+        {{ else }}
+            <amp-img
+                src="{{ .Permalink | absURL }}"
+                width={{ with $.width }} "{{ . }}" {{ else }} {{ .Width }} {{ end }}
+                height={{ with $.height }} "{{ . }}" {{ else }} {{ .Height }} {{ end }}
+                layout={{ with $.layout }}"{{ . }}"{{else}}"responsive"{{ end }}
+                {{ with $.alt }}alt="{{ . }}"{{ end }}
+                class="figure__image {{ with $.class }}{{ . }}{{ end }} {{ with $.caption }}figure__image--with-caption{{ end }}">
+            </amp-img>
+        {{ end }}
+    {{ end }}
+</figure>
\ No newline at end of file
diff --git a/layouts/partials/footer/language-menu.html b/layouts/partials/footer/language-menu.html
index 4b30037..e1197b8 100644
--- a/layouts/partials/footer/language-menu.html
+++ b/layouts/partials/footer/language-menu.html
@@ -2,7 +2,7 @@
 	{{ if .Site.IsMultiLingual }}
 		{{ range .Site.Languages }}
 			{{ if eq .LanguageName $.Site.Language.LanguageName }}
-				<b>{{ .LanguageName }}</b>
+				<strong>{{ .LanguageName }}</strong>
 			{{ else }}
 				<a href="{{ . | absURL }}" data-rel="prefetch">{{ .LanguageName }}</a>
 			{{ end }}
diff --git a/layouts/partials/header/menu.html b/layouts/partials/header/menu.html
index a9c268a..973ffca 100644
--- a/layouts/partials/header/menu.html
+++ b/layouts/partials/header/menu.html
@@ -1,9 +1,11 @@
+
 <ul class="header__menu__list">
+    {{ $baseUrl := trim .Site.BaseURL "/" }}
     {{ range .Site.Menus.main }}
         {{ $url := trim .URL "/" | absURL }}
         <li>
             <a href="{{ $url }}"
-                {{ with .Page }}  data-rel="prefetch"
+                {{ if or (.Page) (hasPrefix $url $baseUrl) }} data-rel="prefetch"
                 {{else}} target="_blank" rel="nofollow noopener noreferrer" {{ end }}>
                 {{ .Pre }}<span>{{ .Name }}</span>
             </a>
diff --git a/layouts/partials/post/summary.html b/layouts/partials/post/summary.html
index 6fdc760..3d768f5 100644
--- a/layouts/partials/post/summary.html
+++ b/layouts/partials/post/summary.html
@@ -1,12 +1,7 @@
 <article class="summary">
     <h2 class="summary__title">{{.Title}}</h2>
     {{ with .Params.Image.Src }}
-        <amp-img class="summary__image"
-            src="{{ . }}"
-            layout="responsive"
-            width="1280"
-            height="720"
-            alt="{{ $.Title }}"></amp-img>
+        {{- partial "blocks/image.html" (dict "src" . "alt" $.Title "class" "summary__image") -}}
     {{ end }}
     <p>{{.Summary}}</p>
     <a class="button" role="button"
diff --git a/layouts/partials/post/toc.html b/layouts/partials/post/toc.html
index 5e971c7..a181f02 100644
--- a/layouts/partials/post/toc.html
+++ b/layouts/partials/post/toc.html
@@ -1,2 +1,2 @@
-<b>{{ i18n "toc"}}:</b>
+<strong>{{ i18n "toc"}}:</strong>
 {{ .Page.TableOfContents }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/amp-adsense.html b/layouts/partials/shortcodes/amp-adsense.html
index d8797ad..dc1c817 100644
--- a/layouts/partials/shortcodes/amp-adsense.html
+++ b/layouts/partials/shortcodes/amp-adsense.html
@@ -1,7 +1,7 @@
 {{ if isset $.Site.Params "adsensepublisher" }}
     {{ with .Params }}
         <fieldset class="ad">
-            <legend><b>#ad</b></legend>
+            <legend><strong>#ad</strong></legend>
             <amp-ad type="adsense"
                 {{ with .class }} class="{{ . }}"{{ end }}
                 {{ with .alt }} alt="{{ . }}"{{ end }}
@@ -18,7 +18,7 @@
     {{ if isset . "context" }}
         {{ $publisher := .context.Site.Params.adsensePublisher }}
         <fieldset class="ad">
-            <legend><b>#ad</b></legend>
+            <legend><strong>#ad</strong></legend>
             <amp-ad type="adsense"
                 {{ with .class }} class="{{ . }}"{{ end }}
                 {{ with .alt }} alt="{{ . }}"{{ end }}
diff --git a/layouts/partials/shortcodes/amp-gif.html b/layouts/partials/shortcodes/amp-gif.html
index 705c960..f4a61a8 100644
--- a/layouts/partials/shortcodes/amp-gif.html
+++ b/layouts/partials/shortcodes/amp-gif.html
@@ -1,8 +1,11 @@
-<amp-anim
-	{{ with .class }} class="{{ . }}"{{ end }}
-	{{ with .alt }} alt="{{ . }}"{{ end }}
-	{{ with .width }} width="{{ . }}"{{ end }}
-	{{ with .height }} height="{{ . }}"{{ end }}
-	{{ with .layout }} layout="{{ . }}"{{ end }}
-	{{ with .src }} src="{{ . | absURL }}"{{ end }}>
-</amp-anim>
\ No newline at end of file
+{{ $resource := resources.Get .src }}
+{{ with $resource }}
+	<amp-anim
+		{{ with $.class }} class="{{ . }}"{{ end }}
+		{{ with $.alt }} alt="{{ . }}"{{ end }}
+		{{ with $.width }} width="{{ . }}"{{ end }}
+		{{ with $.height }} height="{{ . }}"{{ end }}
+		{{ with $.layout }} layout="{{ . }}"{{ end }}
+		src="{{ .Permalink | absURL }}">
+	</amp-anim>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/amp-image.html b/layouts/partials/shortcodes/amp-image.html
index 81e3806..97b3858 100644
--- a/layouts/partials/shortcodes/amp-image.html
+++ b/layouts/partials/shortcodes/amp-image.html
@@ -1,20 +1 @@
-<figure class="figure {{ with .caption }}figure--with-caption{{ end }}">
-	{{ with .caption }}
-		<figcaption class="figure__caption">
-			{{ . }}
-		</figcaption>
-	{{ end }}
-	<amp-img
-		class="figure__image {{ with .class }}{{ . }}{{ end }} {{ with .caption }}figure__image--with-caption{{ end }}"
-		{{ with .alt }}alt="{{ range (split . " ") }}{{ . }} {{ end }}"{{ end }}
-		{{ with .attribution }}attribution="{{ range (split . " ") }}{{ . }} {{ end }}"{{ end }}
-		{{ with .srcset }}srcset="{{ range (split . " ") }}{{ . | absURL }} {{ end }}"{{ end }}
-		{{ with .tabindex }}tabindex="{{ . }}"{{ end }}
-		{{ with .onTap }}on="tap:{{- . -}}"{{ end }}
-		{{ with .role }}role="{{ . }}"{{ end }}
-		{{ with .width }}width="{{ . }}"{{ end }}
-		{{ with .height }}height="{{ . }}"{{ end }}
-		{{ with .layout }}layout="{{ . }}"{{ end }}
-		{{ with .media }}media="{{ . }}"{{ end }}
-		{{ with .src }}src="{{ . | absURL}}"{{ end }}></amp-img>
-</figure>
\ No newline at end of file
+{{- partial "blocks/image.html" . -}}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/amp-video.html b/layouts/partials/shortcodes/amp-video.html
index ea2c7d4..633c5f5 100644
--- a/layouts/partials/shortcodes/amp-video.html
+++ b/layouts/partials/shortcodes/amp-video.html
@@ -1,8 +1,11 @@
-<amp-video controls
-	{{ with .class }} class="{{ . }}"{{ end }}
-	{{ with .alt }} alt="{{ . }}"{{ end }}
-	{{ with .width }} width="{{ . }}"{{ end }}
-	{{ with .height }} height="{{ . }}"{{ end }}
-	{{ with .layout }} layout="{{ . }}"{{ end }}
-	{{ with .src }} src="{{ . | absURL }}"{{ end }}>
-</amp-video>
\ No newline at end of file
+{{ $resource := resources.Get .src }}
+{{ with $resource }}
+	<amp-video controls
+		{{ with $.class }} class="{{ . }}"{{ end }}
+		{{ with $.alt }} alt="{{ . }}"{{ end }}
+		{{ with $.width }} width="{{ . }}"{{ end }}
+		{{ with $.height }} height="{{ . }}"{{ end }}
+		{{ with $.layout }} layout="{{ . }}"{{ end }}
+		src="{{ .Permalink | absURL }}">
+	</amp-video>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/product.html b/layouts/partials/shortcodes/product.html
index a7bf041..75355fa 100644
--- a/layouts/partials/shortcodes/product.html
+++ b/layouts/partials/shortcodes/product.html
@@ -1,9 +1,14 @@
 <div class="product">
-    <amp-img
-        class="product__image"
-        layout="responsive" width="300" height="300"
-        alt="{{ .title }}"
-        src="{{ .image | absURL}}"></amp-img>
+    {{ $resource := resources.Get .image }}
+    {{ with $resource }}
+        {{ partial "blocks/image.html" (dict "src" $.image "alt" $.title "width" 300 "height" 300 "class" "product__image") }}
+    {{ else }}
+        <amp-img
+            class="product__image"
+            layout="responsive" width="300" height="300"
+            alt="{{ $.title }}"
+            src="{{ $.image | absURL }}"></amp-img>
+    {{ end }}
     <div class="product__content">
         <p class="product__title">{{ .title }}</p>
         <p class="product__description">{{ .description }}</p>
diff --git a/static/offline.html b/static/offline.html
index 533a3ff..ff8d34f 100644
--- a/static/offline.html
+++ b/static/offline.html
@@ -10,7 +10,7 @@
                 height: 100%;
             }
             body {
-                font-family: Courier New;
+                font-family: Courier New, sans-serif;
                 margin: 0;
             }
             h1 {
diff --git a/theme.toml b/theme.toml
index ba1c813..5a05918 100644
--- a/theme.toml
+++ b/theme.toml
@@ -14,7 +14,7 @@ tags = ["blog", "personal", "responsive", 'minimal', 'clean', "simple", "google
 features = ["amp", "seo", "pwa", "structured data", "toc", "related content", "service-worker", "shortcodes",
     "syntax highlighting", "tags", "social share"]
 
-min_version = "0.59.0"
+min_version = "0.60.0"
 
 [author]
     name = "Asur Bernardo"