Feat: App icon and screenshot gallery (fixes #1)

.vscode/settings.json

@@ -1,5 +1,14 @@
 {
     "ltex.language": "en-US",
     "ltex.enabled": ["markdown", "yaml"],
-    "ltex.markdown.nodes": {"CodeBlock": "default", "FencedCodeBlock": "default", "AutoLink": "dummy", "Code": "dummy", "YamlFrontMatterBlock": "default"}
+    "ltex.markdown.nodes": {
+        "CodeBlock": "default",
+        "FencedCodeBlock": "default",
+        "AutoLink": "dummy",
+        "Code": "dummy",
+        "YamlFrontMatterBlock": "default"
+    },
+    "editor.detectIndentation": false,
+    "editor.tabSize": 2,
+    "editor.insertSpaces": true,
 }

content/apps/bluerock.md

@@ -3,7 +3,7 @@ title: blueROCK
 layout: appitem
 title: blueROCK
 heroClasses: 'overlay-dark text-light hero-tiny'
-image: images/apps/bluerock.png
+imagesDir: images/apps/bluerock
 links:
     googleplay: 'https://play.google.com/store/apps/details?id=com.itsblue.blueROCK'
     appstore: 'https://apps.apple.com/de/app/bluerock/id1503699996?app=itunes&ign-mpt=uo%3D4'

content/apps/ledDisplayController.md

@@ -2,7 +2,7 @@
 title: 'Led Display Controller'
 layout: appitem
 heroClasses: 'overlay-dark text-light hero-tiny'
-image: images/apps/ledDisplayController.png
+imagesDir: images/apps/leddisplaycontroller
 links:
     googleplay: 'https://play.google.com/store/apps/details?id=de.itsblue.LedDisplayController'
     opensource: 'https://itsblue.dev/itsblue-development/LedDisplay'

content/apps/scrt.md

@@ -2,7 +2,7 @@
 title: 'Speed Climbing Reaction Trainer'
 layout: appitem
 heroClasses: 'overlay-dark text-light hero-tiny'
-image: images/apps/scstwrt.png
+imagesDir: images/apps/scrt
 links:
     googleplay: 'https://play.google.com/store/apps/details?id=com.itsblue.SpeedClimbingReactionTrainer'
     appstore: 'https://apps.apple.com/de/app/speed-climbing-reactiontrainer/id1527603031'

content/apps/scstw.md

@@ -1,8 +1,8 @@
 ---
-title: 'Speed Climbing Stopwatch App'
+title: 'Speed Climbing Stopwatch'
 layout: appitem
 heroClasses: 'overlay-dark text-light hero-tiny'
-image: images/apps/scstw.png
+imagesDir: images/apps/scstw
 links:
     googleplay: 'https://play.google.com/store/apps/details?id=com.itsblue.speedclimbing_stopwatch'
     appstore: 'https://apps.apple.com/de/app/speed-climbing-stopwatch/id1527590772'

themes/quark-hugo/assets/scss/theme.scss

@@ -16,6 +16,7 @@
 @import 'theme/footer';
 @import 'theme/menu';
 @import 'theme/carousels';
+@import 'theme/gallery';
 
 // Extra Skeleton Styling
 @import 'theme/blog';

themes/quark-hugo/assets/scss/theme/_gallery.scss

@@ -0,0 +1,31 @@
+
+  .gallery-scroll {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    margin: 0;
+    padding: 0;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    overflow-x: scroll;
+  }
+  
+  .gallery-item {
+    padding: .5rem;
+    scroll-snap-align: center;
+    height: 100%;
+    width: auto;
+  }
+
+@media screen and (min-width: 800px) {
+  .gallery-scroll {
+    flex-wrap: nowrap;
+    padding: 1rem 0;
+    overflow-x: scroll;
+    height: 450px;
+  }
+
+  .gallery-item {
+    scroll-snap-align: start;
+  }
+}

themes/quark-hugo/layouts/_default/appitem.html

@@ -1,73 +1,94 @@
 {{ define "hero" }}
 {{ $ctx := . }}
 {{ with .Params.image }}
-    {{ $heroContent := (print "<h1>" $ctx.Params.title "</h1>")}}
-    {{ partial "modular/hero.html" (dict 
-    "image" . 
-    "classes" $ctx.Params.heroClasses 
-    "imageParallax" $ctx.Params.heroImageParallax 
-    "align" $ctx.Params.heroAlign
-    "content" $heroContent ) }}
+{{ $heroContent := (print "<h1>" $ctx.Params.title "</h1>")}}
+{{ partial "modular/hero.html" (dict
+"image" .
+"classes" $ctx.Params.heroClasses
+"imageParallax" $ctx.Params.heroImageParallax
+"align" $ctx.Params.heroAlign
+"content" $heroContent ) }}
 {{ end }}
 {{ end }}
 
 {{ define "body" }}
 <section id="body-wrapper" class="section blog-listing">
-    <section class="container {{ site.Params.GridSize }}">
-        <div class="columns">
-            <div id="item" class="column col-12 extra-spacing">
-                <div class="content-item h-entry">
+  <section class="container {{ site.Params.GridSize }}" style="padding-top: 0;">
+    <div class="columns">
+      <div id="item" class="column col-12 extra-spacing">
+        <div class="content-item h-entry">
 
-                    {{/* if not hero_image_name %}
-                        <div class="content-title text-center">
-                            {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
-                            {% if page.header.subtitle %}
-                            <h3 >{{ page.header.subtitle }}</h3>
-                            {% endif %}
-                        </div>
-                    {% endif */}}
-                        <div class="e-content">
-                            {{ .Content }}
-                    
-                            {{ if or (.Params.links.googleplay) (.Params.links.appstore) (.Params.links.opensource) }}
-                                <h2>Downloads</h2>
-                                {{ with .Params.links.googleplay }}
-                                    <a href="{{ . }}" target="blank"><img alt="Get it on Google Play" src="/assets/GooglePlay.png"></a><br>
-                                {{ end }}
-                                {{ with .Params.links.appstore }}
-                                    <a href="{{ . }}" target="blank"><img alt="Download on the App Store" src="/assets/AppStore.png"></a>
-                                {{ end }}
-                    
-                                {{ with .Params.links.opensource }}
-                                    <br><br>
-                                    <p>
-                                        This app is open-source!
-                                        <br>
-                                        <a href="{{ . }}" target="blank">{{ . }}</a>
-                                    </p>
-                                {{ end }}
-                            {{ end }}
-                    
-                            {{ with .Params.privacyPolicy }}
-                                <h2>Privacy Policy</h2>
-                                {{ . | safeHTML }}
-                            {{ end }}
-                            
-                        </div>
-                    </div>
-                    
-                    <p class="prev-next text-center">
-                        {{/* if not page.isLast %}
-                                <a class="btn" href="{{ page.prevSibling.url }}"><i class="fa fa-angle-left"></i> {{ 'previous app'|t }}</a>
-                        {% endif %}
-                    
-                        {% if not page.isFirst %}
-                            <a class="btn" href="{{ page.nextSibling.url }}">{{ 'next app'|t }} <i class="fa fa-angle-right"></i></a>
-                        {% endif */}}
-                    </p>                    
+          <div class="container">
+            <div class="columns" style="justify-content: center;">
+              {{ with .Params.imagesDir}}
+              <div class="column col-auto" style="display:flex; flex-direction: column; justify-content: center;">
+                <img src="{{ site.BaseURL }}/{{ . }}/favicon.png" style="max-height: calc(5rem);">
+              </div>
+              {{ end }}
+              <div class="column col-auto" style="max-width: 100%; text-align: center;">
+                <h1>{{ .Title }}</h1>
+              </div>
             </div>
+          </div>
+
+          {{ with .Params.imagesDir }}
+          <h3>Screenshots</h3>
+
+          {{ $imagesDir := printf "/static/%s/" . }}
+          {{ $publicImagesDir := . }}
+          {{ $files := sort (readDir $imagesDir) }}
+          <div class="gallery gallery-scroll">
+            {{ range $files }}
+              {{ if hasPrefix .Name "screenshot-" }}
+                <img class="gallery gallery-item" src="{{ site.BaseURL }}/{{ $publicImagesDir }}/{{ .Name }}" alt="{{ .Name }}">
+              {{ end }}
+            {{ end }}
+          </div>
+          {{ end }}
+
+          <div class="e-content">
+            <h3>About {{.Title}}</h3>
+            {{ .Content }}
+
+            {{ if or (.Params.links.googleplay) (.Params.links.appstore) (.Params.links.opensource) }}
+            <h3>Downloads</h3>
+            {{ with .Params.links.googleplay }}
+            <a href="{{ . }}" target="blank"><img alt="Get it on Google Play" src="/assets/GooglePlay.png"></a><br>
+            {{ end }}
+            {{ with .Params.links.appstore }}
+            <a href="{{ . }}" target="blank"><img alt="Download on the App Store" src="/assets/AppStore.png"></a>
+            {{ end }}
+
+            {{ with .Params.links.opensource }}
+            <br><br>
+            <p>
+              This app is open-source!
+              <br>
+              <a href="{{ . }}" target="blank">{{ . }}</a>
+            </p>
+            {{ end }}
+            {{ end }}
+
+            {{ with .Params.privacyPolicy }}
+            <h3>Privacy Policy</h3>
+            {{ . | safeHTML }}
+            {{ end }}
+
+          </div>
         </div>
 
-    </section>
+        <p class="prev-next text-center">
+          {{/* if not page.isLast %}
+          <a class="btn" href="{{ page.prevSibling.url }}"><i class="fa fa-angle-left"></i> {{ 'previous app'|t }}</a>
+          {% endif %}
+
+          {% if not page.isFirst %}
+          <a class="btn" href="{{ page.nextSibling.url }}">{{ 'next app'|t }} <i class="fa fa-angle-right"></i></a>
+          {% endif */}}
+        </p>
+      </div>
+    </div>
+
+  </section>
 </section>
 {{ end }}

themes/quark-hugo/layouts/_default/list.html

@@ -1,40 +1,49 @@
 {{ define "body" }}
 <section id="body-wrapper" class="section blog-listing">
-    <section class="container {{ site.Params.GridSize }}">
+  <section class="container {{ site.Params.GridSize }}">
 
-        <div class="columns">
-            <div id="item" class="column col-12 extra-spacing">
-                <div class="bricklayer">
-                    {{ range .Pages.ByPublishDate.Reverse }}
-                    <div class="card">
-                        {{ $ctx := . }}
-                        {{ with .Params.image }}
-                        <div class="card-image">
-                            <a href="{{ $ctx.RelPermalink }}">
-                                <img alt="" src="{{ . | relURL }}">
-                            </a>
-                        </div>
-                        {{ end }}
-                        <div class="card-header">
-                            <div class="card-title">
-                                <h5 class="p-name mt-1">
-                                    <a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a>
-                                </h5>
-                            </div>
-                        </div>
-                        <div class="card-body">
-                            {{ if .Params.summary }}
-                                {{ .Params.summary }}
-                            {{ else }}
-                                {{ .Summary }}
-                            {{ end }}<a href="{{ .RelPermalink }}">Read More…</a>
-                        </div>
-                    </div>
-                    {{ end }}
-                </div>
+    <div class="columns">
+      <div id="item" class="column col-12 extra-spacing">
+        <div class="bricklayer">
+          {{ range .Pages.ByPublishDate.Reverse }}
+          <div class="card">
+            {{ $ctx := . }}
+            {{ with .Params.image }}
+            <div class="card-image">
+              <a href="{{ $ctx.RelPermalink }}">
+                <img alt="" src="{{ . | relURL }}">
+              </a>
             </div>
+            {{ end }}
+
+            {{ with .Params.imagesDir }}
+
+            <div class="card-image">
+              <a href="{{ $ctx.RelPermalink }}">
+                <img alt="" src="{{ site.BaseURL }}{{ $ctx.Params.imagesDir }}/banner.png">
+              </a>
+            </div>
+            {{ end }}
+            <div class="card-header">
+              <div class="card-title">
+                <h5 class="p-name mt-1">
+                  <a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a>
+                </h5>
+              </div>
+            </div>
+            <div class="card-body">
+              {{ if .Params.summary }}
+              {{ .Params.summary }}
+              {{ else }}
+              {{ .Summary }}
+              {{ end }}<a href="{{ .RelPermalink }}">Read More…</a>
+            </div>
+          </div>
+          {{ end }}
         </div>
-    </section>
+      </div>
+    </div>
+  </section>
 </section>
 {{ end }}
 
@@ -42,7 +51,7 @@
 <script src="{{ site.BaseURL }}/js/bricklayer.min.js"></script>
 <script src="{{ site.BaseURL }}/js/scopedQuerySelectorShim.min.js"></script>
 <script>
-    //Bricklayer
-    var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
+  //Bricklayer
+  var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
 </script>
 {{ end }}