single page fancybox applied, flowchart shortcode deleted, summary lazyload deleted

assets/sass/base/_animation.scss

@@ -124,3 +124,8 @@
     opacity: 1;
   }
 }
+
+@include keyframes(fade-in) {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}

assets/sass/components/_pagination.scss

@@ -64,6 +64,7 @@
     @include flexbox();
     @include align-items(center);
     @include justify-content(center);
+    @include transition(all, 0.2s, ease-out);
     
     padding: 0.25rem;
     border-radius: 0.125rem;
@@ -83,6 +84,18 @@
     }
   }
 
+  &__left {
+    @include on-event {
+      @include translateX(-0.25rem);
+    }    
+  }
+
+  &__right {
+    @include on-event {
+      @include translateX(0.25rem);
+    }    
+  }
+
   &__icon {
     width: 28px;
     height: 28px;

assets/sass/components/_summary.scss

@@ -138,6 +138,7 @@
     &-wrapper {
       max-width: 130px;
       min-width: 130px;
+      overflow: hidden;
       @include align-self(center);
     }
   }

exampleSite/config/_default/params.toml

@@ -21,7 +21,7 @@ paginateWindow = 1
 # whoami
 myname = "zzossig"
 email = "zzossig@gmail.com"
-whoami = "Web Developer"
+whoami = "Web DeveloperWeb"
 useGravatar = false
 location = "Seoul, Korea"
 organization = "Hugo"

exampleSite/content/notes/hugo/hugo-1.md

@@ -11,3 +11,6 @@ categories:
 ---
 
 Dolore in consectetur irure qui laborum. Adipisicing cillum ad laboris dolor. Quis consectetur ullamco esse ad mollit anim sint nostrud esse. Irure voluptate ex fugiat voluptate ea fugiat laboris.
+
+{{% img src="/images/feature1/wave.png" title="Image4" caption="Image description" alt="image alt" %}}
+![image](/images/feature1/markdown.png)

exampleSite/content/posts/emoji-support.md

@@ -5,10 +5,6 @@ date = "2019-03-05"
 description = "Guide to emoji usage in Hugo"
 tags = [
     "emoji",
-		"gamoji",
-		"namoji",
-		"bamoji",
-		"amoji"
 ]
 +++
 

exampleSite/content/posts/test-flowchart.md

@@ -14,7 +14,7 @@ libraries:
 featured_image: "feature1/flowchart.png"
 ---
 
-{{< flowchartjs >}}
+```flowchart
 st=>start: Start|past:>http://www.google.com[blank]
 e=>end: End|future:>http://www.google.com
 op1=>operation: My Operation|past
@@ -30,4 +30,4 @@ cond(yes, right)->c2
 cond(no)->sub1(left)->op1
 c2(yes)->io->e
 c2(no)->op2->e
-{{< /flowchartjs >}}
+```

exampleSite/content/posts/test-mermaid.md

@@ -3,7 +3,7 @@ title: "Mermaid support"
 date: 2019-11-17T12:00:06+09:00
 description: "Generate diagrams, charts, graphs or flows from markdown-like text via javascript."
 tags:
-- diagram
+-
 series:
 -
 categories:

layouts/_default/single.html

@@ -17,6 +17,7 @@
     {{ partial "pagination/pagination-single" . }}
     {{ partial "comments/comments.html" . }}
     {{ partial "body/lib" . }}
+    {{ partial "body/fancybox" . }}
 
     <div class="hide">
     {{ partial "sidebar/site-search" . }}

layouts/partials/body/fancybox.html

@@ -20,10 +20,15 @@
         "close",
       ],
       caption: function (instance, item) {
-        console.log($(this).data('alt'));
-        return $(this).data('alt') || '111';
+        return $(this).data('alt') || '';
       }
     });
+
+    var imgElements = $('.single__contents:not(".single__contents--gallery")').find('img');    
+    imgElements.each(function(i,  v) {      
+      $(this).css('cursor', 'pointer');
+      $(this).wrap(`<a data-fancybox="gallery" href="${ $(this).attr('src') }" alt="${ $(this).attr('alt') }" data-caption="${ $(this).attr('alt') }"></a>`);
+    });
   });
 </script>
 

layouts/partials/body/lib.html

@@ -67,6 +67,7 @@
     {{ $flowchartjs := .Site.Data.flowchartjs }}
     var options = JSON.parse({{ $flowchartjs | jsonify }});
 
+    /*
       $('.diagram').each(function() {
         var diagramContent = $(this).text();
         $(this).text('');
@@ -74,6 +75,26 @@
         var diagram = flowchart.parse(diagramContent);
         diagram.drawSVG('diagram', options);
       });
+    */ 
+    $('code.language-flowchart:odd').each(function (index, node) {
+      var diagramContent = $(this).contents();
+      $(this).closest('table').attr('data-content', 'FLOWCHART');
+      $(this).unwrap('pre');
+      $(this).replaceWith(function () {
+        return $("<div id='diagram' data-content='flowchart'></div>").append(diagramContent.text()).addClass('diagram').css('padding', '30px 8px 8px').css('margin-top', '40px');
+      });      
+
+      var diagram = flowchart.parse(diagramContent.text());      
+      $('#diagram').empty();
+      diagram.drawSVG('diagram', options);      
+    });    
+
+    $('code.language-flowchart').each(function (index, node) {      
+      $(this).unwrap('pre');
+      $(this).replaceWith(function () {
+        return $("<div></div>");
+      });      
+    });
 
   </script>
 {{ end }}
@@ -112,8 +133,6 @@
       $(this).replaceWith(function () {
         return $("<div />").append($(this).contents()).addClass('diagram').css('padding', '30px 8px 8px').css('margin-top', '40px');
       });
-
-      
     });
     $(".diagram").sequenceDiagram(options);
 

layouts/partials/summary/classic.html

@@ -4,8 +4,8 @@
     {{ if $params.featured_image }}
     <div class="summary-classic__image-wrapper">
       <a href="{{ .Permalink }}">
-        <img data-src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}"
-          class="lazyload summary-classic__image" />
+        <img src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}"
+          class="summary-classic__image" />
       </a>
     </div>
     {{ end }}

layouts/shortcodes/flowchartjs.html

@@ -1,3 +0,0 @@
-<div id="diagram" class="diagram">
-  {{- safeHTML .Inner -}}
-</div>

layouts/shortcodes/img.html

@@ -1,8 +1,7 @@
 <!-- image -->
 <figure {{ with .Get "class" }}class="{{.}}" {{ end }}>
   {{ with .Get "link"}}<a href="{{.}}">{{ end }}
-    <img data-src="{{ .Get "src" }}" class="lazyload"
-      {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }}/>
+    <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }}/>
     {{ if .Get "link"}}</a>{{ end }}
   {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
   <figcaption>{{ if isset .Params "title" }}