Merge pull request #243 from Lednerb/develop

Update master / Implement features from #234 and #239
Lednerb · Aug 13, 2020 · 89fb5eb · 89fb5eb
2 parents e3c757f + 958c7ec
commit 89fb5eb
Show file tree

Hide file tree

Showing 24 changed files with 210 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -31,8 +31,10 @@ If you like this theme and/or use it for commercial purposes, please support me!
   - [Disqus comments](#Disqus-comments)
   - [Responsive Design](#Responsive-Design)
   - [Automatic Image Resizing](#Automatic-Image-Resizing)
+  - [Image Modal Zoom](#Image-Modal-Zoom)
   - [Permanent Top Navigation](#Permanent-Top-Navigation)
   - [MathJAX Markup](#MathJAX-Markup)
+  - [Disabled Javascript Support](#Disabled-Javascript-Support)
 - [Favicons](#Favicons)
 - [Custom 404 site](#Custom-404-site)
 - [Custom Post Types](#Custom-Post-Types)
@@ -253,17 +255,25 @@ Bilberry is optimized for desktop and mobile devices (tablets and smartphones).
 The bilberry theme handles image crops and resizes automatically by default.
 However, if you want to disable this functionality in general, you can set `resizeImages: false` in your `config.toml` file.
 
-If you want to disable this functionality just on some posts, you can set `resizeImages: false` in your post's settings.
+If you want to disable this functionality just on some posts, you can set `resizeImages: false` in your post's frontmatter settings.
+
+### Image Modal Zoom
+When including an image that has larger dimensions than the content area, the image gets clickable and a bigger version will open in a lightbox.
 
 ### Permanent Top Navigation
 If you want to permanently display the top navigation with the algolia search bar and the `page` entries, you can set the `permanentTopNav` option to `true` in your site's config file.
 
 Note that on mobile devices the navigation will still be collapsed because otherwise, the navigation menu hides the essential parts of your site.
 
 ### MathJAX Markup
-
 If you want to add [MathJAX](https://www.mathjax.org) markup support, set parameter `enable_mathjax` option to `true` in your site's config file.
 
+### Disabled Javascript Support
+Although this theme has a lot of features that only work with enabled javascript, it also fully supports disabled javascript.
+Disabling javascript will not break any styles or essential functionality on the site.
+
+Just head over to the demo page, disable javascript in your browser and check the results!
+
 ## Favicons
 Using favicons nowadays is not a trivial thing.
 There are many different sizes and file types for the various mobile and desktop browsers and for the shortcuts for Android and iOS devices.

diff --git a/assets/js/theme.js b/assets/js/theme.js
@@ -4,6 +4,7 @@ require('flexslider');
 require('algoliasearch/dist/algoliasearch.jquery');
 require('autocomplete.js/dist/autocomplete.jquery');
 require('tooltipster');
+require('magnific-popup');
 
 let ClipboardJs = require('clipboard')
 let hljs = require('highlight.js');
@@ -81,6 +82,39 @@ $(document).ready(function () {
         pauseOnHover: true,
     });
 
+    // Magnific Popup for images within articles to zoom them
+    $('p img').magnificPopup({
+        type: "image",
+        image: {
+            verticalFit: true,
+            titleSrc: 'alt'
+        },
+        zoom: {
+            enabled: true
+        },
+        callbacks: {
+            // Get the src directly from the img-tag instead of an additional tag
+            elementParse: function(item) {
+              // Function will fire for each target element
+              // "item.el" is a target DOM element (if present)
+              // "item.src" is a source that you may modify
+
+              item.src = item.el.attr('src')
+            }
+        },
+        // https://github.com/dimsemenov/Magnific-Popup/pull/1017
+        // Enabled popup only when image size is greater than content area
+        disableOn: function(e) {
+            img = e.target;
+
+            if( img.naturalWidth > img.clientWidth ) {
+                return true;
+            }
+
+            return false;
+        }
+    });
+
     // Algolia-Search
     if ($('#activate-algolia-search').length) {
         let client = algoliasearch($('#algolia-search-appId').val(), $('#algolia-search-apiKey').val());
@@ -110,7 +144,7 @@ $(document).ready(function () {
                             return "<span class='empty'>" + $('#algolia-search-noSearchResults').val() + "</span>"
                         },
                         footer: function () {
-                            return '<div class="branding">Powered by <img src="' + $('meta[name=siteBaseUrl]').attr("content") + '/algolia-logo-light.svg" /></div>'
+                            return '<div class="branding">Powered by <img src="' + $('meta[name=siteBaseUrl]').attr("content") + '/algolia-logo-light.svg" alt="algolia" /></div>'
                         }
                     },
                 }

diff --git a/assets/sass/_articles.scss b/assets/sass/_articles.scss
@@ -152,6 +152,8 @@ article {
 
         img {
             max-width: 100%;
+            display: block;
+            margin: 0 auto;
         }
 
         video {

diff --git a/assets/sass/_fontface.scss b/assets/sass/_fontface.scss
@@ -16,6 +16,7 @@
     /* Safari, Android, iOS */
     url('../../static/fonts/comfortaa-v28-greek_latin-ext_vietnamese_cyrillic-ext-regular.svg#Comfortaa') format('svg');
   /* Legacy iOS */
+  font-display: swap;
 }
 
 /* comfortaa-700 - greek_latin-ext_vietnamese_cyrillic-ext */
@@ -36,6 +37,7 @@
     /* Safari, Android, iOS */
     url('../../static/fonts/comfortaa-v28-greek_latin-ext_vietnamese_cyrillic-ext-700.svg#Comfortaa') format('svg');
   /* Legacy iOS */
+  font-display: swap;
 }
 
 /* open-sans-regular - latin-ext_vietnamese_cyrillic-ext_greek-ext */
@@ -56,6 +58,7 @@
     /* Safari, Android, iOS */
     url('../../static/fonts/open-sans-v17-latin-ext_vietnamese_cyrillic-ext_greek-ext-regular.svg#OpenSans') format('svg');
   /* Legacy iOS */
+  font-display: swap;
 }
 
 /* open-sans-italic - latin-ext_vietnamese_cyrillic-ext_greek-ext */
@@ -76,6 +79,7 @@
     /* Safari, Android, iOS */
     url('../../static/fonts/open-sans-v17-latin-ext_vietnamese_cyrillic-ext_greek-ext-italic.svg#OpenSans') format('svg');
   /* Legacy iOS */
+  font-display: swap;
 }
 
 /* open-sans-700 - latin-ext_vietnamese_cyrillic-ext_greek-ext */
@@ -96,6 +100,7 @@
     /* Safari, Android, iOS */
     url('../../static/fonts/open-sans-v17-latin-ext_vietnamese_cyrillic-ext_greek-ext-700.svg#OpenSans') format('svg');
   /* Legacy iOS */
+  font-display: swap;
 }
 
 /* open-sans-700italic - latin-ext_vietnamese_cyrillic-ext_greek-ext */
@@ -116,6 +121,7 @@
     /* Safari, Android, iOS */
     url('../../static/fonts/open-sans-v17-latin-ext_vietnamese_cyrillic-ext_greek-ext-700italic.svg#OpenSans') format('svg');
   /* Legacy iOS */
+  font-display: swap;
 }
 
 /* fira-code-regular - latin-ext_cyrillic-ext_greek-ext */
@@ -136,6 +142,7 @@
     /* Safari, Android, iOS */
     url('../../static/fonts/fira-code-v8-latin-ext_cyrillic-ext_greek-ext-regular.svg#FiraCode') format('svg');
   /* Legacy iOS */
+  font-display: swap;
 }
 
 /* fira-code-700 - latin-ext_cyrillic-ext_greek-ext */
@@ -156,4 +163,5 @@
     /* Safari, Android, iOS */
     url('../../static/fonts/fira-code-v8-latin-ext_cyrillic-ext_greek-ext-700.svg#FiraCode') format('svg');
   /* Legacy iOS */
+  font-display: swap;
 }
diff --git a/assets/sass/_no-js.scss b/assets/sass/_no-js.scss
@@ -6,8 +6,22 @@
 
 .no-js {
 
+    .no-js-hidden {
+        display: none;
+    }
+
     .no-js-message {
         display: block;
+        padding: 2em;
+        background-color: $base-color;
+        color: $header-text-color;
+        font-size: 0.9em;
+        font-style: italic;
+        text-align: center;
+
+        &:first-line {
+            font-weight: bold;
+        }
     }
 
     nav {
@@ -24,4 +38,10 @@
         color: inherit;
     }
 
+    .responsive-video {
+        &.youtube, &.vimeo {
+                height: auto !important;
+                padding: 0 !important;
+            }
+    }
 }
diff --git a/assets/sass/theme.scss b/assets/sass/theme.scss
@@ -11,6 +11,7 @@
 @import '~flexslider/flexslider.css';
 @import '~tooltipster/dist/css/tooltipster.bundle.css';
 @import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css';
+@import "~magnific-popup";
 @import 'fontface';
 
 // Choose one of the supported syntax highlighting styles

diff --git a/i18n/af.toml b/i18n/af.toml
@@ -31,3 +31,7 @@ other = "lees verder"
 [otherLanguages]
 other = "Ander tale"
 
+[readingTime]
+one = "1 min lees"
+other = "{{.Count}} min lees"
+
diff --git a/i18n/da.toml b/i18n/da.toml
@@ -31,3 +31,7 @@ other = "Fortsæt med at læse"
 [otherLanguages]
 other = "Andre sprog"
 
+[readingTime]
+one = "1 min læse"
+other = "{{.Count}} min læse"
+
diff --git a/i18n/es.toml b/i18n/es.toml
@@ -33,4 +33,5 @@ other = "Otros idiomas"
 
 [readingTime]
 one = "1 min de lectura"
-other = "{{ .Count }} mins. de lectura"
+other = "{{ .Count }} mins. de lectura"
+
diff --git a/i18n/lo.toml b/i18n/lo.toml
@@ -4,6 +4,12 @@ other = "ໝວດໝູ່"
 [authors]
 other = "ຜູ້ຂຽນ"
 
+[tags]
+other = "ປ້າຍ"
+
+[socialMedia]
+other = "ສື່ສັງຄົມ"
+
 [latestPosts]
 other = "ບົດຄວາມລ່າສຸດ"
 

diff --git a/i18n/pl.toml b/i18n/pl.toml
@@ -31,3 +31,7 @@ other = "Kontynuuj czytanie"
 [otherLanguages]
 other = "Inne języki"
 
+[readingTime]
+one = "1 min czytania"
+other = "{{.Count}} min czytania"
+
diff --git a/i18n/ru.toml b/i18n/ru.toml
@@ -31,3 +31,7 @@ other = "Читать далее"
 [otherLanguages]
 other = "Другие языки"
 
+[readingTime]
+one = "1 мин читать"
+other = "{{.Count}} мин читать"
+
diff --git a/i18n/uk.toml b/i18n/uk.toml
@@ -31,3 +31,7 @@ other = "Далі"
 [otherLanguages]
 other = "Інші мови"
 
+[readingTime]
+one = "1 хвилина читання"
+other = "{{.Count}} хвилина читання"
+
diff --git a/i18n/vi.toml b/i18n/vi.toml
@@ -31,3 +31,6 @@ other = "Đọc tiếp"
 [otherLanguages]
 other = "Ngôn ngữ khác"
 
+[readingTime]
+other = "1 phút đọc"
+
diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml
@@ -31,3 +31,6 @@ other = "继续阅读"
 [otherLanguages]
 other = "其他语言"
 
+[readingTime]
+other = "1 分钟阅读"
+
diff --git a/i18n/zh-TW.toml b/i18n/zh-TW.toml
@@ -31,3 +31,6 @@ other = "繼續閱讀"
 [otherLanguages]
 other = "其他語言"
 
+[readingTime]
+other = "1 分鐘閱讀。"
+
diff --git a/layouts/partials/content-type/audio.html b/layouts/partials/content-type/audio.html
@@ -6,28 +6,67 @@
     {{ partial "featured-image.html" .ctx }}
 
     {{ with .ctx.Params.spotify }}
-    <div class="responsive-audio spotify">
-        <iframe src="https://open.spotify.com/embed?uri={{ . }}" width="300" height="80" frameborder="0"
-            allowtransparency="true"></iframe>
-    </div>
+        <div class="responsive-audio spotify">
+            <iframe class="no-js-hidden" src="https://open.spotify.com/embed?uri={{ . }}" width="300" height="80" frameborder="0"
+                allowtransparency="true"></iframe>
+
+            <div class="no-js-message">
+                The spotify player can not be loaded with disabled javascript. <br>
+                The following title is embedded here: <br>
+
+                <a href="https://open.spotify.com/track/embed?uri={{ replace . "spotify:track:" ""}}" target="_blank">
+                    https://open.spotify.com/track/embed?uri={{ replace . "spotify:track:" ""}}
+                </a>
+            </div>
+        </div>
     {{ end }}
+
     {{ with .ctx.Params.soundcloud }}
-    <div class="responsive-audio soundcloud">
-        <iframe width="100%" height="166" scrolling="no" frameborder="no"
-            src="https://w.soundcloud.com/player/?url={{ . }}&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe>
-    </div>
+        <div class="responsive-audio soundcloud">
+            <iframe class="no-js-hidden" width="100%" height="166" scrolling="no" frameborder="no"
+                src="https://w.soundcloud.com/player/?url={{ . }}&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe>
+
+            <div class="no-js-message">
+                The soundcloud player can not be loaded with disabled javascript. <br>
+                The following title is embedded here: <br>
+
+                <a href="{{ . }}" target="_blank">
+                    {{ . }}
+                </a>
+            </div>
+        </div>
     {{ end }}
+
     {{ with .ctx.Params.tunein }}
-    <div class="responsive-audio tunein">
-        <iframe src="https://tunein.com/embed/player/{{ . }}/" style="width:100%; height:100px;" scrolling="no"
-            frameborder="no"></iframe>
-    </div>
+        <div class="responsive-audio tunein">
+            <iframe class="no-js-hidden" src="https://tunein.com/embed/player/{{ . }}/" style="width:100%; height:100px;" scrolling="no"
+                frameborder="no"></iframe>
+
+            <div class="no-js-message">
+                The tunein player can not be loaded with disabled javascript. <br>
+                The following title is embedded here: <br>
+
+                <a href="https://tunein.com/topic/?topicid={{ replace . "t" "" }}" target="_blank">
+                    https://tunein.com/topic/?topicid={{ replace . "t" "" }}
+                </a>
+            </div>
+        </div>
     {{ end }}
+
     {{ with .ctx.Params.mixcloud }}
-    <div class="responsive-audio mixcloud">
-        <iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=/{{ . }}/"
-            frameborder="0"></iframe>
-    </div>
+        <div class="responsive-audio mixcloud">
+            <iframe class="no-js-hidden" width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=/{{ . }}/"
+                frameborder="0"></iframe>
+
+            <div class="no-js-message">
+                The mixin player can not be loaded with disabled javascript. <br>
+                The following title is embedded here: <br>
+
+                <a href="https://mixcloud.com/{{ . }}" target="_blank">
+                    https://mixcloud.com/{{ . }}
+                </a>
+            </div>
+        </div>
     {{ end }}
 
     {{ partial "default-content.html" (dict "ctx" .ctx "template_type" .template_type) }}
-Original file line number
+Diff line change
@@ Expand Up / @@ -152,6 +152,8 @@ article { @@
             img {
                 max-width: 100%;
+                display: block;
+                margin: 0 auto;
             }
             video {
@@ Expand Down @@