Mobile card active and GitHub Actions (#71)

* Remove js for mobile card click style

* Add headshot alt text and update example site

* Add html validator github action

* Debug GA

* Fix GA bug

.github/workflows/main.yml

@@ -0,0 +1,28 @@
+name: Validate Generated Files
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  deploy:
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v2
+      
+      - name: Install Dependencies
+        run: |
+          sudo snap install hugo
+          pip install html5validator
+
+      - name: Build Example Site
+        run: |
+          cd exampleSite/
+          hugo --minify
+
+      - name: Validate Generated Files
+        run: html5validator --root exampleSite/public/ --also-check-css --ignore katex

README.md

@@ -38,6 +38,7 @@ disqusShortname = "Your shortname for Disqus - optional"
   description = "The website's description"
   bgimg = "Path, within the 'assets' folder, of the image used for the page background - optional"
   headshotimg = "Path, within the 'assets' folder, of the image used for the home page header - optional"
+  headshotalt = "Alt text for the headshotimg - should be used with headshotimg"
   rssinmenu = whether you would like a RSS feed link to appear in the nav menu and footer (true, false) - optional
   facebook = "URL to your Facebook account, icon link will be included in the footer - optional"
   flicker = "URL to your Flicker account, icon link will be included in the footer - optional"

assets/css/style.css

@@ -10,7 +10,6 @@ body {
     align-items: center;
     width: 100%;
     box-sizing: border-box;
-    word-break: break-word;
 }
 p {
     margin: 1.5em 0;
@@ -458,7 +457,7 @@ footer {
     margin: 0;
 }
 @media screen and (pointer: coarse) {
-    .card-hover {
+    .card:active {
         transform: scale(0.95);
         box-shadow: 0 0.4rem 2rem 0 rgba(0,0,0,0.2);
     }

exampleSite/config.toml

@@ -10,6 +10,7 @@ themesDir = "../../"
     brand = "aether"
     description = "aether Hugo theme for blogs"
     headshotimg = "img/faceshot.jpg"
+    headshotalt = "Generic grey headshot picture"
 
 [markup]
   [markup.highlight]

exampleSite/content/posts/aether-features/index.md

@@ -10,6 +10,8 @@ draft: false
 resources:
 - name: featuredImage
   src: "mdd-iphone.jpg"
+  params:
+    description: "An iphone with a website featuring the aether theme"
 ---
 
 Hugo combined with the Aether theme turns easy to write markdown into powerful web pages.  KaTeX, Highlight.js, and Hugo provides the ability to create mathmatical symobols, equations, highlighted code, tables, lists, and much more.

exampleSite/content/posts/creating-a-new-theme/index.md

@@ -9,6 +9,8 @@ draft: false
 resources:
 - name: featuredImage
   src: "nyc.jpg"
+  params:
+    description: "The New York City skyline"
 ---
 
 

exampleSite/content/posts/goisforlovers/index.md

@@ -15,11 +15,12 @@ categories = [
     "Development",
     "golang",
 ]
-[[resources]]
+[resources]
-  name = "featuredImage"
+name = "featuredImage"
-  src = "lucas-benjamin-565254-unsplash.jpg"
+src = "lucas-benjamin-565254-unsplash.jpg"
-  [resources.params]
+
-    description = "Alt description for the featured image"
+[resources.params]
+description = "A jellyfish with neon colors with a dark background"
 +++
 
 Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for

exampleSite/content/posts/hugoisforlovers/index.md

@@ -15,9 +15,12 @@ categories = [
     "Development",
     "golang",
 ]
-[[resources]]
+[resources]
-  name = "featuredImage"
+name = "featuredImage"
-  src = "andrew-neel-609846-unsplash.jpg"
+src = "andrew-neel-609846-unsplash.jpg"
+
+[resources.params]
+description = "A person sitting on a hardwood floor on their laptop"
 +++
 
 ## Step 1. Install Hugo

exampleSite/content/posts/migrate-from-jekyll/index.md

@@ -7,6 +7,8 @@ title: Migrate to Hugo from Jekyll
 resources:
 - name: featuredImage
   src: "yan-ots-257617-unsplash.jpg"
+  params:
+    description: "Colorful buildings alongside a body of water"
 ---
 
 ## Move static content to `static`

layouts/_default/home.html

@@ -17,7 +17,7 @@
             {{ $faceshot_x2 := .Resize "544x Lanczos" }}
             {{ $faceshot_x3 := .Resize "816x Lanczos" }}
             <source srcset="{{ $faceshot.Permalink }} 1x, {{ $faceshot_x2.Permalink }} 2x, {{ $faceshot_x3.Permalink }} 3x">
-            <img class="home-faceshot" src="{{ $faceshot.Permalink }}" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
+            <img class="home-faceshot" src="{{ $faceshot.Permalink }}" {{ with $.Site.Params.headshotalt -}} alt="{{ . }}" {{- end }}>
           </picture>
         </div>
         {{ end -}}

layouts/_default/li-next.html

@@ -1,5 +1,4 @@
-<a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)" 
+<a href="{{ .Permalink }}" class="card blog-card bc-next" rel="bookmark" >
-  href="{{ .Permalink }}" class="card blog-card bc-next" rel="bookmark" >
   {{ with .Resources.GetMatch "featuredImage" }}
   <div class="card-img-container">
     <p class="card-img-overlay">Next Article</p>
@@ -16,7 +15,7 @@
     <h2 class="card-title">{{ .Title | markdownify }}</h2>
     <p class="card-text">{{ if (isset .Params "description") }}{{ index .Params "description" | htmlUnescape }}{{ else }}{{ .Summary | plainify | htmlUnescape }}{{ end }}</p>
     <div class="card-subtext muted-text">
-      <p>Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
+      <p>Posted <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time></p>
       {{ if (isset .Params "categories") }}<p>{{ range .Params.categories }}#{{ . }} {{ end }}</p>{{ end }}
     </div>
   </article>

layouts/_default/li.html

@@ -1,5 +1,4 @@
-<a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)" 
+<a href="{{ .Permalink }}" class="card blog-card" rel="bookmark" >
-  href="{{ .Permalink }}" class="card blog-card" rel="bookmark" >
   {{ with .Resources.GetMatch "featuredImage" }}
   <div class="card-img-container">
     <picture>

layouts/partials/home-card.html

@@ -1,4 +1,4 @@
-<a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)" 
+<a 
   href="{{ .Site.BaseURL }}" class="card home-card" style="background-image: url({{if isset .Site.Params "homeimg"}} {{ (resources.Get .Site.Params.homeimg).Permalink | safeCSS }} {{ else }} {{ (resources.Get "img/grey-cloud.jpg").Permalink | safeCSS }} {{ end }})" rel="bookmark" >
   Home
 </a>