feat: add showcase shortcode

- Add showcase shortcode - Add style for showcase shortcode = Add test page for showcase shortcode - Auto disable PWA in development environment - TODO: Further adjust the style of the shortcode - TODO: Add documentation for the shortcode
HEIGE-PCloud · May 27, 2021 · 90f7f84 · 90f7f84
1 parent 3306a42
commit 90f7f84
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 23 deletions.
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -317,6 +317,7 @@
     @import "../_partial/_single/music";
     @import "../_partial/_single/bilibili";
     @import "../_partial/_single/friend";
+    @import "../_partial/_single/showcase";
 
     hr {
       margin: 2rem 0;

diff --git a/assets/css/_partial/_single/_showcase.scss b/assets/css/_partial/_single/_showcase.scss
@@ -0,0 +1,105 @@
+$avatar-border-color: #f0f0f0;
+$avatar-border-color-dark: #363636;
+$avatar-border-color-black: #363636;
+
+$friend-link-background-color: #f8f8f8;
+$friend-link-background-color-dark: #252627;
+$friend-link-background-color-black: #111111;
+
+$friend-link-color: #2d96bd;
+$friend-link-color-dark: #a9a9b3;
+$friend-link-color-black: #d9d9d9;
+
+$friend-link-hover-color: #ef3982;
+$friend-link-hover-color-dark: #ffffff;
+$friend-link-hover-color-black: #ffffff;
+
+.showcase-box {
+    height: 370px;
+    margin-top: 2%;
+    margin-left: 1%;
+    width: 48%;
+    display: inline-block !important;
+    background: $friend-link-background-color;
+    position: relative;
+    border-radius: 5px;
+    [theme=dark] & {
+        background: $friend-link-background-color-dark;
+    }
+    [theme=black] & {
+        background: $friend-link-background-color-black;
+    }
+}
+
+.showcase-image img {
+    width: 96%;
+    margin: 2%;
+    margin-bottom: 0;
+    border-radius: 5px;
+    height: 200px;
+    object-fit: cover;
+    &:hover {
+        -webkit-transition: transform 0.4s ease;
+        -moz-transition: transform 0.4s ease;
+        -o-transition: transform 0.4s ease;
+        transition: transform 0.4s ease;
+        transform: scale(1.01);
+    }
+}
+
+.showcase-title {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    position: absolute;
+    top: 210px;
+    width: 96%;
+    margin: 3%;
+    margin-left: 2%;
+    font-size: 1.25rem;
+    line-height: 140%;
+}
+
+.showcase-title a {
+    color: black;
+    &:hover {
+        color: $friend-link-hover-color;
+    }
+    [theme=dark] & {
+        color: $friend-link-color-dark;
+        &:hover {
+            color: $friend-link-hover-color-dark;
+        }
+    }
+    [theme=black] & {
+        color: $friend-link-color-black;
+        &:hover {
+            color: $friend-link-hover-color-black;
+        }
+    }
+}
+
+.showcase-summary {
+    display: -webkit-box;
+    position: absolute;
+    width: 96%;
+    margin-left: 2%;
+    margin-top: 2%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height: 70px;
+    top: 250px;
+    -webkit-box-orient: vertical;
+}
+
+.showcase-link {
+    position: absolute;
+    bottom: 2%;
+    left: 2%;
+}
+
+@media screen and (max-width: 600px) {
+    .showcase-box {
+        width: 100%;
+    }
+}
diff --git a/exampleSite/content/posts/tests/showcase-tests/index.en.md b/exampleSite/content/posts/tests/showcase-tests/index.en.md
@@ -0,0 +1,26 @@
+---
+title: "Showcase test"
+subtitle: ""
+date: 2021-05-26T15:30:49+01:00
+lastmod: 2021-05-26T15:30:49+01:00
+draft: false
+description: "Showcase shortcode test"
+categories: [Tests]
+hiddenFromHomePage: true
+toc: false
+pageStyle: normal
+---
+
+<!--more-->
+
+{{< showcase title="Theme Documentation - Basics" summary="Discover what the Hugo - DoIt theme is all about and the core-concepts behind it." image="/theme-documentation-basics/featured-image.webp" link="/theme-documentation-basics" >}}
+
+{{< showcase title="Theme Documentation - Content" summary="Find out how to create and organize your content quickly and intuitively in DoIt theme." image="/theme-documentation-content/featured-image.webp" link="/theme-documentation-content" >}}
+
+{{< showcase title="Theme Documentation - Built-in Shortcodes" summary="Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean." image="/theme-documentation-built-in-shortcodes/featured-image.webp" link="/theme-documentation-built-in-shortcodes" >}}
+
+{{< showcase title="Theme Documentation - Extended Shortcodes" summary="DoIt theme provides multiple shortcodes on top of built-in ones in Hugo." image="/theme-documentation-extended-shortcodes/featured-image.webp" link="/theme-documentation-extended-shortcodes" >}}
+
+{{< showcase title="Seal!" summary="Awww" image="https://i.pinimg.com/originals/b8/75/9a/b8759a1b9575a1f938a16f7b5c5287fe.jpg" link="https://i.pinimg.com/originals/b8/75/9a/b8759a1b9575a1f938a16f7b5c5287fe.jpg" >}}
+
+{{< showcase title="Cat!" summary="Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ Miaow~ " image="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" link="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" >}}
diff --git a/...leSite/resources/_gen/assets/scss/css/style.scss_d75fd08668b4bae707167bbce4d8ca46.content b/...leSite/resources/_gen/assets/scss/css/style.scss_d75fd08668b4bae707167bbce4d8ca46.content
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -49,21 +49,23 @@
         </div>
         {{- /* PWA */ -}}
         {{- if eq .Site.Params.enablePWA true -}}
-        <script>
-            if('serviceWorker' in navigator) {
-                navigator.serviceWorker
-                    .register('/sw.min.js', { scope: '/' })
-                    .then(function(registration) {
-                        //console.log('Service Worker Registered');
-                    });
-
-                navigator.serviceWorker
-                    .ready
-                    .then(function(registration) {
-                        //console.log('Service Worker Ready');
-                    });
-            }
-          </script>
+            {{- if eq hugo.Environment "production" -}}
+                <script>
+                    if('serviceWorker' in navigator) {
+                        navigator.serviceWorker
+                            .register('/sw.min.js', { scope: '/' })
+                            .then(function(registration) {
+                                //console.log('Service Worker Registered');
+                            });
+
+                        navigator.serviceWorker
+                            .ready
+                            .then(function(registration) {
+                                //console.log('Service Worker Ready');
+                            });
+                    }
+                </script>
+            {{- end -}}
         {{- end -}}
 
     </footer>

diff --git a/layouts/partials/head/link.html b/layouts/partials/head/link.html
@@ -51,10 +51,12 @@
 {{- partial "plugin/defer-style.html" $style -}}
 
 {{- if eq .Site.Params.enablePWA true -}}
-{{- /* sw.min.js */ -}}
-{{- $sw := resources.Get "sw.min.js" -}}
-{{- $_ := $sw.Permalink -}}
-{{- /* sw.min.js.map */ -}}
-{{- $sw := resources.Get "sw.min.js.map" -}}
-{{- $_ := $sw.Permalink -}}
+    {{- if eq hugo.Environment "production" -}}
+        {{- /* sw.min.js */ -}}
+        {{- $sw := resources.Get "sw.min.js" -}}
+        {{- $_ := $sw.Permalink -}}
+        {{- /* sw.min.js.map */ -}}
+        {{- $sw := resources.Get "sw.min.js.map" -}}
+        {{- $_ := $sw.Permalink -}}
+    {{- end -}}
 {{- end -}}
diff --git a/layouts/partials/init.html b/layouts/partials/init.html
@@ -32,7 +32,7 @@
         {{- .Scratch.Set "comment" dict -}}
     {{- end -}}
 {{- else if eq .Site .Sites.First -}}
-    {{- warnf "\n\nCurrent environment is \"development\". The \"comment system\", \"CDN\" and \"fingerprint\" will be disabled.\n当前运行环境是 \"development\". \"评论系统\", \"CDN\" 和 \"fingerprint\" 不会启用.\n" -}}
+    {{- warnf "\n\nCurrent environment is \"development\". The \"comment system\", \"PWA\", \"CDN\" and \"fingerprint\" will be disabled.\n当前运行环境是 \"development\". \"评论系统\", \"PWA\", \"CDN\" 和 \"fingerprint\" 不会启用.\n" -}}
 {{- end -}}
 
 {{- .Scratch.Set "params" $params -}}

diff --git a/layouts/shortcodes/showcase.html b/layouts/shortcodes/showcase.html
@@ -0,0 +1,22 @@
+{{ if .IsNamedParams }}
+{{- $image := .Get "image" -}}
+{{- $title := .Get "title" -}}
+{{- $link := .Get "link" -}}
+<div class="showcase-box">
+    <div class="showcase-image">
+        <a href={{ $link }}>
+            {{- dict "Src" $image "Height" "200" "Width" "400" "Title" $title | partial "plugin/image.html" -}}
+        </a>
+    </div>
+    <h1 class="showcase-title">
+        <a href={{ $link }}>{{ $title }}</a>
+    </h1>
+    <p class="showcase-summary">
+        {{ .Get "summary" }}
+    </p>
+    <a class="showcase-link" href={{ $link }}>
+        Read more...
+    </a>
+</div>
+{{- else -}}
+{{ end }}