exampleSite update

assets/js/zzo.js

@@ -9,7 +9,6 @@ $(document).ready(function() {
   var position = $(window).scrollTop();
   $(window).scroll(function () {
     var navbar = $('.navbar');
-    var gtt = $('#gtt');    
 
     var scroll = $(window).scrollTop();
     if (scroll > position) { // scroll down 
@@ -22,11 +21,7 @@ $(document).ready(function() {
       } else if (navbar.hasClass('navbar--show')) {
         navbar.removeClass('navbar--show');
       }
-      
-      if (scroll > 500) {
-        gtt.show(200);
-      }
-      
+            
       $(".single__contents :header").each(function () {
         if (!$("#toggle-toc").is(":checked")) {
             return null;
@@ -51,10 +46,6 @@ $(document).ready(function() {
         navbar.addClass('navbar--show');
       }
 
-      if (scroll < 500) {
-        gtt.hide(200);
-      }
-
       $(".single__contents :header").each(function () {
         if (!$("#toggle-toc").is(":checked")) {
             return null;

assets/sass/base/_helpers.scss

@@ -60,3 +60,7 @@
 .hide {
   display: none;
 }
+
+.grow {
+  @include flex-grow(1);
+}

assets/sass/components/_diagram.scss

@@ -1,6 +1,11 @@
-/* Mermaid.js div */
-div.mermaid {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 1rem;
-}
+/* Mermaid.js div */
+.mermaid {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 1rem;
+    overflow: auto;
+}
+
+.diagram {
+    overflow: auto;
+}

assets/sass/components/_math.scss

@@ -1,7 +1,11 @@
-code.has-jax {
-  font: inherit;
-  font-size: 100%;
-  background: inherit;
-  border: inherit;
-  color: #515151;
+code.has-jax {
+  font: inherit;
+  font-size: 100%;
+  background: inherit;
+  border: inherit;
+  color: #515151;
+}
+
+.MathJax {
+  font-size: 120% !important;
 }

assets/sass/components/_pagination.scss

@@ -64,9 +64,6 @@
     @include flex-shrink(0);
     @include flexbox();
     @include align-items(center);
-    @include themify($themes) {
-      background-color: themed('pagination-background-color');
-    }
 
     border-radius: 0.125rem;
   }
@@ -77,8 +74,11 @@
     padding: 0 0.5rem 0 0.25rem;
 
     &-title {
-      @include truncate(200px);
-      padding-bottom: 0.125rem;
+      @include truncate(250px);
+      @include respond-to(sm) {
+        @include truncate(150px);
+      }
+      padding-bottom: 0.3rem;
     }
 
     &-title--icon {      
@@ -94,8 +94,11 @@
     padding: 0 0.25rem 0 0.5rem;
 
     &-title {
-      @include truncate(200px);
-      padding-bottom: 0.125rem;
+      @include truncate(250px);
+      @include respond-to(sm) {
+        @include truncate(150px);
+      }
+      padding-bottom: 0.3rem;
     }
 
     &-title--icon {      

assets/sass/components/_summary.scss

@@ -124,9 +124,8 @@
     object-fit: contain;
     
     &-wrapper {
-      max-height: 170px;
-      max-width: 170px;
-      min-width: 170px;
+      max-width: 130px;
+      min-width: 130px;
       @include align-self(center);
     }
   }

assets/sass/components/_taxo.scss

@@ -4,6 +4,7 @@
   z-index: z('taxo');
 
   &-root {
+    position: -webkit-sticky;
     position: sticky;
     top: $grid_navbar_height;
     @include themify($themes) {

assets/sass/components/_whoami.scss

@@ -2,29 +2,28 @@
   padding: 1rem;
   margin: 4rem 0;
   border-radius: 0.25rem;
-  @include flexbox();  
+  @include flexbox();
+  @include themify($themes) {
+    border-top: 2px dashed themed('whoami-border-color');
+    border-bottom: 2px dashed themed('whoami-border-color');
+  }
 
   &__image {    
     width: 100%;
     height: 100%;
-    object-fit: contain;        
+    border-radius: 0.5rem;
+    object-fit: contain;
 
-    &-wrapper {
-      border-radius: 50%;
-      margin-right: 1rem;
-      min-width: 64px;
-      min-height: 64px; 
-      max-width: 100px;
+    &-wrapper {      
+      margin-right: 1rem;      
+      max-width: 150px;      
     }
   }
 
   &__title {
     font-weight: 700;
     margin-bottom: 0.5rem;
-    padding-bottom: 0.5rem;
-    @include themify($themes) {
-      border-bottom: 2px dashed themed('whoami-border-color');
-    }
+    padding-bottom: 0.5rem;    
   }
   
   &__desc {

assets/sass/main.scss

@@ -165,11 +165,11 @@ $avatar_background_color: {{ $scr.Get "avatar_background_color" }};
 @import 'components/whoami';
 @import 'components/switch';
 @import 'components/subs';
-@import 'components/mermaid';
+@import 'components/diagram';
 @import 'components/swiper';
 @import 'components/bio';
 @import 'components/features';
-@import 'components/mathjax';
+@import 'components/math';
 @import 'components/hr';
 
 @import 'pages/body';

assets/sass/pages/_archive.scss

@@ -3,6 +3,7 @@
   padding: 2rem 2rem 0;
   width: 100%;
   @include flexbox();
+  @include flex-direction(column);
   @include justify-content(flex-start);
 
   &__container {

assets/sass/pages/_body.scss

@@ -1,6 +1,5 @@
 #body {
   position: relative;
-  overflow-x: hidden;
   @include themify($themes) {
       color: themed('body-color');
       background-color: themed('backdrop-background-color');
@@ -9,3 +8,7 @@
       }
   }  
 }
+
+html {
+  overflow-x: hidden;
+}

assets/sass/themes/_dark.scss

@@ -91,7 +91,7 @@ $dark: (
     gtt-background-color: #403E41,
     gtt-hover-color: #82aaff,
     gtt-hover-background-color: lighten(#403E41, 5%),
-    whoami-border-color: #90a4ae,
+    whoami-border-color: #727072,
     switch-background-color: #403E41,
     switch-button-color: #FCFCFA,
     switch-active-color: #FF6188,

exampleSite/config.toml

@@ -1,189 +0,0 @@
-baseURL = "http://example.org"
-title = "Hugo Zzo Theme"
-theme = "zzo"
-
-defaultContentLanguage = "en"
-defaultContentLanguageInSubdir = true
-hasCJKLanguage = true
-
-summaryLength = 70
-
-copyright = "©{year}, All Rights Reserved"
-timeout = 10000
-enableEmoji = true
-paginate = 7
-rssLimit = 100
-
-[outputs]
-  home = [ "HTML", "RSS", "JSON" ]
-
-[taxonomies]
-  category = "categories"
-  tag = "tags"
-  series = "series"
-
-[params]
-  logoText = "Zzo"
-  description = "The Zzo theme for Hugo example site."
-  custom_css = []
-  custom_js = []
-  
-  # header
-  homeHeaderType = "slide" # text, img, slide
-  swiperCount = 3 # only works when homeHeaderType = slide
-
-  # body
-  enableBreadcrumb = true
-  enablePhotoSwipe = true
-  enableSearch = true
-  enableMark = true
-  enableGoToTop = true
-  enableWhoami = true
-  summaryShape = "card" # card, classic, compact
-  archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
-  archivePaginate = 20
-  paginateWindow = 1
-  
-  # whoami
-  myname = "zzossig"
-  email = "zzossig@gmail.com"
-  whoami = "Web Developer"
-  useGravatar = false
-  location = "Seoul, Korea"
-  organization = "Hugo"
-  link = "https://github.com/zzossig/hugo-theme-zzo"
-  
-  # sidebar
-  enableBio = true
-  enableSidebar = true
-  enableSidebarTags = true
-  enableSidebarSeries = true
-  enableSidebarCategories = true
-  enableToc = true
-  enableTocSwitch = true
-  itemsPerCategory = 5
-  enableSideSubscribe = false
-  searchLanguages = ['en']
-  
-  # footer
-  showPoweredBy = true
-  showFeedLinks = true
-  showSocialLinks = true
-  enableLangChange = true
-  enableThemeChange = true
-  themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
-
-  # comment
-  enableComment = false
-  disqus_shortname = ""
-  commento = false
-
-  [params.socialOptions]
-    email = "mailto:your@email.com"
-    facebook = "http://example.org"
-    twitter = "http://example.org"
-    github = "http://example.org"
-    stack-overflow = ""
-    instagram = ""
-    google-plus = ""
-    youtube = ""
-    medium = ""
-    tumblr = ""
-    linkedin = ""
-    pinterest = ""
-    stack-exchange = ""
-
-[marketing]
-  google_analytics = ""
-  google_tag_manager = ""
-
-[languages]
-[languages.en]
-  title = "Hugo Zzo Theme"
-  languageName = "English"
-  weight = 1
-
-[[languages.en.menu.main]]  
-  identifier = "about"
-  name = "about"  
-  url = "about"
-  weight = 10
-
-[[languages.en.menu.main]]
-  identifier = "archive"
-  name = "archive"
-  url = "archive"
-  weight = 11
-
-[[languages.en.menu.main]]
-  identifier = "gallery"
-  name = "gallery"
-  url = "gallery"
-  weight = 12
-    
-[[languages.en.menu.main]]
-  parent = "gallery"
-  name = "cartoon"
-  url = "gallery/cartoon"
-
-[[languages.en.menu.main]]
-  parent = "gallery"
-  name = "photo"
-  url = "gallery/photo"
-
-[[languages.en.menu.main]]
-  identifier = "posts"
-  name = "posts"
-  url = "posts"
-  weight = 13
-
-[[languages.en.menu.main]]
-  identifier = "notes"
-  name = "notes"
-  url = "notes"
-  weight = 14
-
-[languages.ko]
-  title = "Hugo Zzo Theme"
-  languageName = "한국어"
-  weight = 2
-
-[[languages.ko.menu.main]]
-  identifier = "about"
-  name = "about"
-  url = "about"
-  weight = 20
-
-[[languages.ko.menu.main]]
-  identifier = "archive"
-  name = "archive"
-  url = "archive"
-  weight = 21
-
-[[languages.ko.menu.main]]
-  identifier = "gallery"
-  name = "gallery"
-  url = "gallery"
-  weight = 22
-    
-[[languages.ko.menu.main]]
-  parent = "gallery"
-  name = "cartoon"
-  url = "gallery/cartoon"
-
-[[languages.ko.menu.main]]
-  parent = "gallery"
-  name = "photo"
-  url = "gallery/photo"
-
-[[languages.ko.menu.main]]
-  identifier = "posts"
-  name = "posts"
-  url = "posts"
-  weight = 23
-    
-[[languages.ko.menu.main]]
-  identifier = "notes"
-  name = "notes"
-  url = "notes"
-  weight = 24

exampleSite/config/_default/config.toml

@@ -0,0 +1,30 @@
+baseURL = "http://example.org/"
+title = "Hugo Zzo Theme"
+theme = "zzo"
+
+defaultContentLanguage = "en"
+defaultContentLanguageInSubdir = true
+hasCJKLanguage = true
+
+summaryLength = 70
+
+copyright = "©{year}, All Rights Reserved"
+timeout = 10000
+enableEmoji = true
+paginate = 13
+rssLimit = 100
+
+[outputs]
+  home = ["HTML", "RSS", "JSON", "WebAppManifest"]
+
+[mediaTypes."application/manifest+json"]
+  suffixes = ["webmanifest"]
+
+[outputFormats.WebAppManifest]
+  mediaType = "application/manifest+json"
+  rel = "manifest"
+
+[taxonomies]
+  category = "categories"
+  tag = "tags"
+  series = "series"

exampleSite/config/_default/languages.toml

@@ -0,0 +1,9 @@
+[en]
+  title = "Hugo Zzo Theme"
+  languageName = "English"
+  weight = 1
+
+[ko]
+  title = "Hugo Zzo Theme"
+  languageName = "한국어"
+  weight = 2

exampleSite/config/_default/menus.en.toml

@@ -0,0 +1,39 @@
+[[main]]
+  identifier = "about"
+  name = "about"
+  url = "about"
+  weight = 1
+
+[[main]]
+  identifier = "archive"
+  name = "archive"
+  url = "archive"
+  weight = 2
+
+[[main]]
+  identifier = "gallery"
+  name = "gallery"
+  url = "gallery"
+  weight = 3
+    
+[[main]]
+  parent = "gallery"
+  name = "cartoon"
+  url = "gallery/cartoon"
+
+[[main]]
+  parent = "gallery"
+  name = "photo"
+  url = "gallery/photo"
+
+[[main]]
+  identifier = "posts"
+  name = "posts"
+  url = "posts"
+  weight = 4
+    
+[[main]]
+  identifier = "notes"
+  name = "notes"
+  url = "notes"
+  weight = 5

exampleSite/config/_default/params.toml

@@ -0,0 +1,73 @@
+logoText = "Zzo"
+description = "The Zzo theme for Hugo example site."
+custom_css = []
+custom_js = []
+
+# header
+homeHeaderType = "slide" # text, img, slide
+swiperCount = 3 # only works when homeHeaderType = slide
+
+# body
+enableBreadcrumb = true
+enablePhotoSwipe = true
+enableSearch = true
+enableMark = true
+enableGoToTop = true
+enableWhoami = true
+summaryShape = "classic" # card, classic, compact
+archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
+archivePaginate = 13
+paginateWindow = 1
+
+# whoami
+myname = "zzossig"
+email = "zzossig@gmail.com"
+whoami = "Web Developer"
+useGravatar = false
+location = "Seoul, Korea"
+organization = "Hugo"
+link = "https://github.com/zzossig/hugo-theme-zzo"
+
+# sidebar
+enableBio = true
+enableSidebar = true
+enableSidebarTags = true
+enableSidebarSeries = true
+enableSidebarCategories = true
+enableToc = true
+enableTocSwitch = true
+itemsPerCategory = 5
+enableSideSubscribe = false
+searchLanguages = ['en']
+
+# footer
+showPoweredBy = true
+showFeedLinks = true
+showSocialLinks = true
+enableLangChange = true
+enableThemeChange = true
+themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
+
+# comment
+enableComment = false
+disqus_shortname = ""
+commento = false
+
+[marketing]
+  google_analytics = ""
+  google_tag_manager = ""
+
+[socialOptions]
+  email = "mailto:your@email.com"
+  facebook = "http://example.org/"
+  twitter = "http://example.org/"
+  github = "https://github.com/zzossig/hugo-theme-zzo"
+  stack-overflow = ""
+  instagram = ""
+  google-plus = ""
+  youtube = ""
+  medium = ""
+  tumblr = ""
+  linkedin = ""
+  pinterest = ""
+  stack-exchange = ""

exampleSite/content/gallery/cartoon/index.md

@@ -2,5 +2,6 @@
 title: "Cartoon"
 date: 2018-10-11T10:20:16+09:00
 type: "gallery"
+mode: "at-once" # at-once is a default value
 description: "cartoon gallery"
 ---

exampleSite/content/gallery/photo/index.ko.md

@@ -5,6 +5,4 @@ type: "gallery"
 mode: "one-by-one"
 description: "포토 갤러리"
 images:
-  - image: owl.jpg
-    caption: owl caption
 ---

exampleSite/content/gallery/photo/index.md

@@ -5,6 +5,8 @@ type: "gallery"
 mode: "one-by-one"
 description: "photo gallery"
 images:
-  - image: owl.jpg
-    caption: owl caption
+  - image: albatross.png
+    caption: albatross caption
+  - image: teddy.png
+    caption: teddy caption
 ---

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

@@ -11,21 +11,3 @@ 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.
-
-Veniam deserunt ex ullamco laboris et elit culpa enim. Irure ipsum dolore sint nisi aliquip labore fugiat magna esse ad nostrud in. Eu aliqua mollit tempor proident pariatur voluptate.
-
-Esse quis incididunt adipisicing minim nulla ipsum ea qui Lorem et officia sit aute. Labore nulla exercitation amet ex tempor non ullamco reprehenderit ea exercitation nisi reprehenderit in. Do eiusmod nostrud enim cillum culpa. Ut culpa officia deserunt nostrud dolore consequat nulla ullamco culpa occaecat. Ipsum consectetur minim id ut ea reprehenderit enim aliquip occaecat mollit velit adipisicing. Elit cupidatat voluptate quis deserunt in do consectetur.
-
-Nostrud non anim culpa quis ea ad nisi non sit ea aute. Laboris sunt ipsum sit ad ut sint cillum mollit nisi anim pariatur Lorem sint. Nostrud proident ea sit velit eiusmod laboris ullamco qui. Reprehenderit nulla nisi quis cillum do est quis cillum et incididunt. Pariatur deserunt aliqua dolor ex velit. Veniam consectetur consectetur eu amet Lorem nisi ex ex consectetur Lorem aute deserunt amet aute. Et deserunt exercitation magna velit.
-
-Velit labore pariatur tempor reprehenderit laboris sit adipisicing. Nisi exercitation nostrud magna ullamco fugiat laborum ipsum esse amet nostrud dolore exercitation et id. Eiusmod et elit dolor ipsum culpa excepteur fugiat velit nisi et ea.
-
-Culpa et incididunt ipsum cillum incididunt nostrud velit. Elit aute cillum Lorem ad exercitation eiusmod laborum anim duis dolor reprehenderit qui ad sint. Nulla reprehenderit duis commodo in velit eiusmod veniam fugiat et aliqua pariatur fugiat. Lorem velit ex ad cillum. Magna ullamco cillum ad deserunt non adipisicing aliqua tempor velit.
-
-Ipsum eiusmod eiusmod dolor irure sint. Sunt in nostrud ad sint labore aliquip tempor consectetur aliquip pariatur. Magna velit veniam tempor eu est eu sit est. Tempor in proident sunt veniam ullamco. Est veniam cupidatat est cillum magna pariatur deserunt aute est elit eu cillum nulla ex. Aute magna amet nisi ut nostrud pariatur sunt Lorem labore adipisicing eiusmod elit.
-
-Duis adipisicing eu duis proident laborum incididunt elit sit enim ipsum commodo Lorem. Amet aliquip nulla amet excepteur. Minim laborum laborum eiusmod nisi enim. Est Lorem nisi culpa dolor consequat. Consectetur cillum Lorem pariatur pariatur amet consequat mollit consequat magna commodo. Amet non commodo ex quis.
-
-Est labore dolor nostrud consectetur ullamco fugiat ad voluptate elit sit mollit esse ullamco adipisicing. Aute ea Lorem ipsum eiusmod aute fugiat velit eiusmod consequat. Ea enim enim cillum amet in commodo elit pariatur et incididunt enim non fugiat ex. Aliqua elit minim laborum cupidatat cillum consequat aute elit minim aliqua. Voluptate cillum id proident nostrud est incididunt magna id excepteur quis non ut qui id.
-
-Et ipsum aliqua commodo qui proident ea voluptate incididunt cillum. Tempor eu veniam non minim elit. In aliqua ipsum incididunt magna pariatur quis aliquip ut minim culpa.

exampleSite/content/notes/sublist/note-1/index.md

@@ -0,0 +1,17 @@
+---
+title: "Note-1"
+date: 2016-10-09T11:44:14+09:00
+description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+series:
+- Go Web Dev
+tags:
+- Development
+- Go
+- fast
+- Blogging
+categories:
+- cTest
+---
+
+post-1 content
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget enim lobortis, bibendum massa et, bibendum enim. Nunc eu augue quis ante porta sodales. Mauris vel faucibus magna, dictum sagittis dolor. Nam scelerisque malesuada efficitur. Donec consequat sodales justo, ut aliquam ligula maximus nec. Quisque metus tellus, tincidunt eu consequat consequat, placerat sed ante. Cras pulvinar eros ex, vel luctus eros viverra sed. Donec nec quam aliquam, ultricies neque sed, sollicitudin lorem. Aenean faucibus, velit et facilisis semper, leo tellus pellentesque orci, non suscipit libero ipsum sed lacus. Fusce pharetra arcu sed tellus convallis, vel hendrerit turpis rhoncus.

exampleSite/content/notes/sublist/note-2.md

@@ -1,6 +1,7 @@
 ---
-title: "Post-2"
-date: 2019-10-09T11:44:14+09:00
+title: "Note-2"
+date: 2016-10-09T11:44:14+09:00
+description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget enim lobortis,"
 series:
 - Go Web Dev
 tags:
@@ -9,8 +10,6 @@ tags:
 - Blogging
 categories:
 - cTest
-featured_image: "tree.jpg"
-description: "this is description2"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget enim lobortis, bibendum massa et, bibendum enim. Nunc eu augue quis ante porta sodales. Mauris vel faucibus magna, dictum sagittis dolor. Nam scelerisque malesuada efficitur. Donec consequat sodales justo, ut aliquam ligula maximus nec. 

exampleSite/content/notes/sublist/note-3.md

@@ -1,6 +1,7 @@
 ---
-title: "Post-3"
-date: 2019-10-09T11:44:14+09:00
+title: "Note-3"
+date: 2016-10-09T11:44:14+09:00
+description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget enim lobortis,"
 series:
 - Go Web Dev
 tags:

exampleSite/content/notes/sublist/post-1/index.md

@@ -1,27 +0,0 @@
----
-title: "Post-1"
-date: 2019-10-09T11:44:14+09:00
-series:
-- Go Web Dev
-tags:
-- Development
-- Go
-- fast
-- Blogging
-categories:
-- cTest
-featured_video: "1.mp4"
-featured_video_poster: "1.jpg"
-description: "this is description"
----
-
-post-1 content
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget enim lobortis, bibendum massa et, bibendum enim. Nunc eu augue quis ante porta sodales. Mauris vel faucibus magna, dictum sagittis dolor. Nam scelerisque malesuada efficitur. Donec consequat sodales justo, ut aliquam ligula maximus nec. Quisque metus tellus, tincidunt eu consequat consequat, placerat sed ante. Cras pulvinar eros ex, vel luctus eros viverra sed. Donec nec quam aliquam, ultricies neque sed, sollicitudin lorem. Aenean faucibus, velit et facilisis semper, leo tellus pellentesque orci, non suscipit libero ipsum sed lacus. Fusce pharetra arcu sed tellus convallis, vel hendrerit turpis rhoncus.
-
-Vestibulum ac augue sed est feugiat cursus. Suspendisse at quam eu eros eleifend euismod. Integer at libero ut ex ultricies tincidunt sit amet id est. In pulvinar orci ac faucibus varius. Proin a mauris posuere, ullamcorper tellus quis, porttitor eros. Pellentesque sollicitudin leo id tellus interdum efficitur. Ut massa odio, auctor id ante a, suscipit tincidunt dolor. Cras vitae libero ut lorem tempus venenatis eu quis mi. Aenean scelerisque convallis nisi. Morbi porttitor imperdiet pretium. Cras vel felis urna. Aliquam dapibus mauris et pellentesque gravida. Maecenas arcu massa, tristique eget ipsum ac, faucibus cursus leo. Etiam ac est sed risus aliquam tempor. Mauris ut urna risus.
-
-Mauris molestie est nisl. Quisque facilisis condimentum magna et malesuada. Ut faucibus, arcu at euismod tempor, mauris est ultricies sapien, nec convallis lorem enim eget arcu. Maecenas magna dui, hendrerit id viverra nec, dictum a nulla. Ut maximus vestibulum sollicitudin. Vivamus in dapibus urna. Sed at vulputate enim. Donec in odio tempus, tincidunt sem quis, dictum risus. Aenean rhoncus urna lacus, vel ornare ante iaculis nec. Nunc iaculis commodo neque, vitae lobortis sem accumsan nec.
-
-Praesent leo libero, sollicitudin sed laoreet a, dapibus ac quam. Praesent vitae arcu ligula. Vestibulum turpis nunc, cursus sed ante semper, volutpat tempor magna. Nulla malesuada, elit vestibulum gravida imperdiet, mi tortor ultricies urna, in lacinia lectus ligula eget tellus. Vestibulum varius dictum augue, sed efficitur massa maximus eget. In hendrerit sollicitudin orci, nec posuere justo dignissim id. Proin vitae metus purus. Nullam cursus enim at orci scelerisque, vitae dignissim lectus condimentum. Nulla ultrices risus sit amet tortor convallis, ac tristique eros tristique. Fusce maximus fringilla pretium. Vivamus elementum, augue at suscipit tincidunt, quam ligula consectetur lorem, ut posuere nunc elit quis nibh. Nullam in blandit felis. Sed congue pellentesque iaculis.
-
-Donec vitae quam at risus dictum posuere efficitur et ex. Suspendisse augue nibh, mattis eu hendrerit nec, semper vitae nisl. Integer mollis tristique bibendum. Vestibulum rutrum sem vitae tempus fringilla. Nunc interdum purus dui, quis mollis velit convallis vitae. Ut lacinia diam ligula, a consequat lorem gravida eget. Sed semper leo sapien, ut accumsan lectus aliquam nec. Donec eleifend nisi libero, non pretium sem tempor ut. Suspendisse porttitor volutpat finibus. Morbi eget neque pretium, aliquam sapien sit amet, suscipit sapien.

exampleSite/content/posts/markdown-syntax.ko.md

@@ -1,147 +0,0 @@
-+++
-author = "Hugo Authors"
-title = "Markdown Syntax Guide"
-date = "2019-03-11"
-description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
-tags = [
-    "markdown",
-    "css",
-    "html",
-    "themes",
-]
-categories = [
-    "themes",
-    "syntax",
-]
-series = ["Themes Guide"]
-aliases = ["migrate-from-jekyl"]
-+++
-
-This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
-<!--more-->
-
-## Headings
-
-The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
-
-# H1
-## H2
-### H3
-#### H4
-##### H5
-###### H6
-
-## Paragraph
-
-Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
-
-Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
-
-## Blockquotes
-
-The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
-
-#### Blockquote without attribution
-
-> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
-> **Note** that you can use *Markdown syntax* within a blockquote.
-
-#### Blockquote with attribution
-
-> Don't communicate by sharing memory, share memory by communicating.</p>
-> — <cite>Rob Pike[^1]</cite>
-
-
-[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
-
-## Tables
-
-Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
-
-   Name | Age
---------|------
-    Bob | 27
-  Alice | 23
-
-#### Inline Markdown within tables
-
-| Inline&nbsp;&nbsp;&nbsp;     | Markdown&nbsp;&nbsp;&nbsp;  | In&nbsp;&nbsp;&nbsp;                | Table      |
-| ---------- | --------- | ----------------- | ---------- |
-| *italics*  | **bold**  | ~~strikethrough~~&nbsp;&nbsp;&nbsp; | `code`     |
-
-## Code Blocks
-
-#### Code block with backticks
-
-```
-html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
-```
-#### Code block indented with four spaces
-
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="UTF-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
-    </html>
-
-#### Code block with Hugo's internal highlight shortcode
-{{< highlight html >}}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
-{{< /highlight >}}
-
-## List Types
-
-#### Ordered List
-
-1. First item
-2. Second item
-3. Third item
-
-#### Unordered List
-
-* List item
-* Another item
-* And another item
-
-#### Nested list
-
-* Item
-1. First Sub-item
-2. Second Sub-item
-
-## Other Elements — abbr, sub, sup, kbd, mark
-
-<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
-
-H<sub>2</sub>O
-
-X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
-
-Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
-
-Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
-

exampleSite/content/posts/markdown-syntax.md

@@ -15,6 +15,7 @@ categories = [
 ]
 series = ["Themes Guide"]
 aliases = ["migrate-from-jekyl"]
+featured_image = "feature1/markdown.png"
 +++
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

exampleSite/content/posts/rich-content.md

@@ -7,6 +7,7 @@ tags = [
     "shortcodes",
     "privacy",
 ]
+featured_image = "feature2/content.png"
 +++
 
 Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.

exampleSite/content/posts/test-flowchart.md

@@ -0,0 +1,33 @@
+---
+title: "Flowchart Test"
+date: 2019-11-14T12:00:06+09:00
+description: "flowchart.js is a flowchart DSL and SVG render that runs in the browser and terminal.
+Nodes and connections are defined in separately so that nodes can be reused and connections can be quickly changed."
+tags:
+-
+series:
+-
+categories:
+- diagram
+libraries:
+- flowchartjs
+featured_image: "feature1/flowchart.png"
+---
+
+{{< flowchartjs >}}
+st=>start: Start|past:>http://www.google.com[blank]
+e=>end: End|future:>http://www.google.com
+op1=>operation: My Operation|past
+op2=>operation: Stuff|current
+sub1=>subroutine: My Subroutine|invalid
+cond=>condition: Yes
+or No?|approved:>http://www.google.com
+c2=>condition: Good idea|rejected
+io=>inputoutput: catch something...|future
+
+st->op1(right)->cond
+cond(yes, right)->c2
+cond(no)->sub1(left)->op1
+c2(yes)->io->e
+c2(no)->op2->e
+{{< /flowchartjs >}}

exampleSite/content/posts/test-katext.md

@@ -0,0 +1,51 @@
+---
+title: "Katex Test"
+date: 2019-11-15T12:00:06+09:00
+description: "KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web."
+tags:
+- 
+series:
+-
+categories:
+- math
+libraries:
+- katex
+featured_image: "feature2/mathbook.png"
+---
+
+
+The following
+
+$$ \int_{a}^{b} x^2 dx $$
+
+Is an integral
+
+$$
+ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } 
+$$
+
+Enable Katex in the config file by setting the `katex` param to `true`. This will import the necessary Katex CSS/JS. 
+
+See the online reference of [supported TeX functions](https://katex.org/docs/supported.html). 
+
+**Note:** For inline math to render correctly, your content file extension must be `.mmark`. See the [official mmark site](https://mmark.nl/). 
+
+```
+Inline math: $$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$
+```
+
+Inline math: $$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$
+
+```
+Block math:
+
+$$
+\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } 
+$$
+```
+
+Block math:
+
+$$
+\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } 
+$$

exampleSite/content/posts/test-mathjax.md

@@ -0,0 +1,17 @@
+---
+title: "MathJax Test"
+date: 2019-11-16T12:00:06+09:00
+description: "A JavaScript display engine for mathematics that works in all browsers.No more setup for readers. It just works."
+tags:
+- 
+series:
+-
+categories:
+- math
+libraries:
+- mathjax
+featured_image: "feature1/infinity.png"
+---
+
+When $a \ne 0$, there are two solutions to $\(ax^2 + bx + c = 0\)$ and they are
+$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

exampleSite/content/posts/test-mermaid.md

@@ -0,0 +1,91 @@
+---
+title: "Mermaid Test"
+date: 2019-11-17T12:00:06+09:00
+description: "Generate diagrams, charts, graphs or flows from markdown-like text via javascript."
+tags:
+-
+series:
+-
+categories:
+- diagram
+libraries:
+- mermaid
+featured_image: "feature2/workflow.png"
+---
+
+```mermaid
+graph TD;
+  A-->B;
+  A-->C;
+  B-->D;
+  C-->D;
+```
+
+```mermaid
+sequenceDiagram
+  participant Alice
+  participant Bob
+  Alice->John: Hello John, how are you?
+  loop Healthcheck
+      John->John: Fight against hypochondria
+  end
+  Note right of John: Rational thoughts <br/>prevail...
+  John-->Alice: Great!
+  John->Bob: How about you?
+  Bob-->John: Jolly good!
+```
+
+```mermaid
+graph TD
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+
+```mermaid
+gantt
+section Section
+Completed :done,    des1, 2014-01-06,2014-01-08
+Active        :active,  des2, 2014-01-07, 3d
+Parallel 1   :         des3, after des1, 1d
+Parallel 2   :         des4, after des1, 1d
+Parallel 3   :         des5, after des3, 1d
+Parallel 4   :         des6, after des4, 1d
+```
+
+```mermaid
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+<<interface>> Class01
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+  <<service>>
+  int id
+  size()
+}
+```
+
+```mermaid
+stateDiagram
+[*] --> Still
+Still --> [*]
+Still --> Moving
+Moving --> Still
+Moving --> Crash
+Crash --> [*]
+```
+
+```mermaid
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15 
+```

layouts/about/single.html

@@ -3,7 +3,6 @@
   <h3 class="h3 terms__title">
     {{ .Title }}
   </h3>
-  </span>  
 </header>
 <main class="main">
   <article class="single__contents about">

layouts/archive/list.html

@@ -23,9 +23,9 @@
       </li>
       {{ end }}
     </ul>
-    {{ end }}
-    
-    {{ partial "pagination/pagination-list" . }}
+    {{ end }}    
   </div>
+  <div class="grow"></div>
+  {{ partial "pagination/pagination-list" . }}
 </main>
 {{ end }}

layouts/partials/body/lib.html

@@ -62,18 +62,18 @@
 {{ end }}
 
 {{ if in .Params.Libraries "mathjax" }}
-  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"mathjax\"></script>" $js.mathjax.url $js.mathjax.sri | safeHTML }}
-  <script>
-    window.MathJax = {
-      tex: {
-        inlineMath: [['$', '$'], ['\\(', '\\)']],
-        displayMath: [['$$', '$$'], ['\\[', '\\]']],
-        processEscapes: false,
-        packages: {'[+]': ['noerrors']}
-      },
-      loader: {
-        load: ['[tex]/noerrors']
-      }
-    };
-  </script>
+{{ printf "<script async src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"mathjax\"></script>" $js.mathjax.url $js.mathjax.sri | safeHTML }}
+<script>
+  window.MathJax = {
+    tex: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']],
+      displayMath: [['$$', '$$'], ['\\[', '\\]']],
+      processEscapes: false,
+      packages: { '[+]': ['noerrors'] }
+    },
+    loader: {
+      load: ['[tex]/noerrors']
+    },
+  };
+</script>
 {{ end }}

layouts/partials/body/whoami.html

@@ -1,8 +1,19 @@
 {{ if $.Param "enableWhoami" }}
-
 <div class="whoami">
   <div class="whoami__image-wrapper">
-    <img data-src="{{ "/images/whoami/avatar.png" | relURL }}" alt="{{ .Site.Params.myname }}" class="lazyload whoami__image">
+    {{ $src := "" }}
+    {{ if site.Params.useGravatar }}    
+      {{ $src = printf "https://s.gravatar.com/avatar/%s?s=200" (md5 .Site.Params.email) }}
+      <img src="{{ $src }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="whoami__image"/>
+    {{ else }}
+      {{ if (fileExists "static/images/whoami/avatar.png") }}
+        <img src="{{ "images/whoami/avatar.png" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="whoami__image"/>
+      {{ else if (fileExists "static/images/whoami/avatar.jpg") }}
+        <img src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="whoami__image"/>
+      {{ else }}
+        <img src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="whoami__image"/>
+      {{ end }}      
+    {{ end }}
   </div>
   <div>
     <div class="whoami__title h6">

layouts/partials/footer/links-feed.html

@@ -4,8 +4,12 @@
   {{ $length := (len $list) }}
   {{ if $list }}
     {{ range $index, $element := $list }}
-    <a rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}" class="caption">
-      {{ .Name }}</a>{{ if ne (add $index 1) $length }} | {{ end }}
+    {{ if ne .Name "webappmanifest" }}
+      {{ if eq $index 1 }} &middot; {{ end }}
+      <a rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}" class="caption">
+        {{ .Name }}
+      </a>      
+    {{ end }}
     {{ end }}
   {{ end }}
 </div>

layouts/partials/pagination/pagination-single.html

@@ -2,13 +2,13 @@
   {{ if .PrevPage }}
     <a href="{{ .PrevPage.Permalink }}" class="pagination-single__left">
       {{ partial "svgs/arrow/keyboard-arrow-left.svg" (dict "width" 25 "height" 25) }}
-      <span class="pagination-single__left-title p2">{{ .PrevPage.Title }}</span>      
+      <span class="pagination-single__left-title p1">{{ .PrevPage.Title }}</span>      
     </a>
   {{ end }}
   <div class="grow"></div>
   {{ if .NextPage }}
     <a href="{{ .NextPage.Permalink }}" class="pagination-single__right">
-      <span class="pagination-single__right-title p2">{{ .NextPage.Title }}</span>     
+      <span class="pagination-single__right-title p1">{{ .NextPage.Title }}</span>     
       {{ partial "svgs/arrow/keyboard-arrow-right.svg" (dict "width" 25 "height" 25) }}
     </a>
   {{ end }}