Showcase page added

#92
Showcase page added,
nowAllowedTypesInArchive param added,
archive, talks page title wrap option added

README.ko.md

@@ -19,6 +19,8 @@ Zzo theme을 이용할 시 가장 매력적인 포인트 한가지는, 한글로
 * [레이아웃](#layout)
 * [갤러리](#gallery)
 * [컨택 페이지](#contact-page)
+* [토크 페이지](#talks-page)
+* [쇼케이스 페이지](#showcase-page)
 * [다국어](#multi-language)
 * [저자](#author)
 * [Favicon](#favicon)
@@ -227,8 +229,9 @@ custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/
 useFaviconGenerator = false # https://www.favicon-generator.org/
 
 themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"] # select options for site color theme
-notAllowedTypesInHome = ["contact", "talks", "about"] # not allowed page types in home page. type can be set in front matter or default to folder name.
+notAllowedTypesInHome = ["contact", "talks", "about", "showcase"] # not allowed page types in home page. type can be set in front matter or default to folder name.
-notAllowedTypesInHomeSidebar = ["about", "archive"] # not allowed page types in home page sidebar(recent post titles).
+notAllowedTypesInHomeSidebar = ["about", "archive", "showcase"] # not allowed page types in home page sidebar(recent post titles).
+notAllowedTypesInArchive = ["about", "talks", "showcase"] # not allowed page types in archive page
 
 # header
 homeHeaderType = "text" # text, img, slide
@@ -518,6 +521,7 @@ Talks 페이지는 아카이브 페이지와 유사한 UI의 페이지입니다.
 title: "Talks"
 date: 2019-12-30T11:14:14+09:00
 description: Talks Page
+titleWrap: wrap # wrap, nowrap
 ---
 ```
 
@@ -574,6 +578,50 @@ root/config/_default/menus.en.toml file
     ...
     ```
 
+## Showcase Page
+
+Showcase 페이지는 프로젝트를 전시하는 페이지 입니다. 페이지를 만드시려면 아래 단계를 진행해주세요.
+
+1. 다음 경로에 파일을 만듭니다. `root/content/showcase/_index.md`.
+
+```yaml
+---
+title: "Showcase overview" # For SEO
+date: 2020-01-19T15:43:38+09:00
+description: My portfolio, repos, works overview page # For SEO
+enableBio: true # Set to false if you want to hide the bio component.
+---
+```
+
+2. 다음 경로에 카테고리 폴더와 파일을 만듭니다. `root/content/showcase/javascript/_index.md` file. (저의 경우, javascript가 카테고리 폴더입니다.)
+
+```yaml
+---
+title: "Javascript" # category name
+date: 2020-01-19T21:04:11+09:00
+description: Hugo theme collection # For SEO
+category: theme # meta info appeared on a card bottom side.
+enableBio: true
+---
+```
+
+3. 마지막으로, 프로젝트당 한개의 md파일을 만드시면 됩니다.  
+
+`root/content/showcase/javascript/my-awesome-project.md`.
+
+```yaml
+---
+title: "My Awesome Project" # apperared on a card component
+date: 2020-01-19T21:13:42+09:00
+description: Hello world! This is my awesome project! # apperared on a card component
+weight: 1 # card ordering
+link: https://github.com/zzossig/hugo-theme-zzo
+repo: https://github.com/zzossig/hugo-theme-zzo
+pinned: true # appreared on a overview page.
+thumb: feature3/css3.png # relative path in static/images
+---
+```
+
 ## Multi Language
 
 Zzo theme의 기본 언어는 영어입니다. 한국어로 바꾸시려면 다음과 같이 해주세요.

README.md

@@ -19,6 +19,7 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
 * [Gallery](#gallery)
 * [Contact Page](#contact-page)
 * [Talks Page](#talks-page)
+* [Showcase Page](#showcase-page)
 * [Multi Language](#multi-language)
 * [Author](#author)
 * [Favicon](#favicon)
@@ -221,8 +222,9 @@ custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/
 useFaviconGenerator = false # https://www.favicon-generator.org/
 
 themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"] # select options for site color theme
-notAllowedTypesInHome = ["contact", "talks", "about"] # not allowed page types in home page. type can be set in front matter or default to folder name.
+notAllowedTypesInHome = ["contact", "talks", "about", "showcase"] # not allowed page types in home page. type can be set in front matter or default to folder name.
-notAllowedTypesInHomeSidebar = ["about", "archive"] # not allowed page types in home page sidebar(recent post titles).
+notAllowedTypesInHomeSidebar = ["about", "archive", "showcase"] # not allowed page types in home page sidebar(recent post titles).
+notAllowedTypesInArchive = ["about", "talks", "showcase"] # not allowed page types in archive page
 
 # header
 homeHeaderType = "text" # text, img, slide
@@ -512,6 +514,7 @@ Talks page is a listing page of links(video, ppt, event, ...). UI is similar to
 title: "Talks"
 date: 2019-12-30T11:14:14+09:00
 description: Talks Page
+titleWrap: wrap # wrap, nowrap
 ---
 ```
 
@@ -568,6 +571,50 @@ And we are good to go.
     ...
     ```
 
+## Showcase Page
+
+Showcase page is a listing page of project showcase. Follow the below steps to make it.
+
+1. Make a file at `root/content/showcase/_index.md`.
+
+```yaml
+---
+title: "Showcase overview" # For SEO
+date: 2020-01-19T15:43:38+09:00
+description: My portfolio, repos, works overview page # For SEO
+enableBio: true # Set to false if you want to hide the bio component.
+---
+```
+
+2. Make a category folder and a file at `root/content/showcase/javascript/_index.md` file. (In my case, category is a javascript)
+
+```yaml
+---
+title: "Javascript" # category name
+date: 2020-01-19T21:04:11+09:00
+description: Hugo theme collection # For SEO
+category: theme # meta info appeared on a card bottom side.
+enableBio: true
+---
+```
+
+3. Finally, Make a file per project. 
+
+`root/content/showcase/javascript/my-awesome-project.md`.
+
+```yaml
+---
+title: "My Awesome Project" # apperared on a card component
+date: 2020-01-19T21:13:42+09:00
+description: Hello world! This is my awesome project! # apperared on a card component
+weight: 1 # card ordering
+link: https://github.com/zzossig/hugo-theme-zzo
+repo: https://github.com/zzossig/hugo-theme-zzo
+pinned: true # appreared on a overview page.
+thumb: feature3/css3.png # relative path in static/images
+---
+```
+
 ## Multi Language
 
 The default language of this theme is English. If you want to use another language, follow these steps

archetypes/archive.md

@@ -2,5 +2,6 @@
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 type: archive
-description: 
+description:
+titleWrap: wrap # wrap, noWrap
 ---

archetypes/showcase.md

@@ -0,0 +1,10 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+description:
+link:
+repo:
+pinned: true
+thumb:
+weight:
+---

archetypes/talk.md

@@ -9,8 +9,5 @@ series:
 -
 categories:
 -
-links:
+titleWrap: wrap # wrap, noWrap
-  - link: ""
-    title: ""
-    type: ""
 ---

assets/js/shave.min.js

@@ -0,0 +1,8 @@
+/**
+  shave - Shave is a javascript plugin that truncates multi-line text within a html element based on set max height
+  @version v2.5.7
+  @link https://github.com/dollarshaveclub/shave#readme
+  @author Jeff Wainwright <yowainwright@gmail.com> (jeffry.in)
+  @license MIT
+**/
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).shave=t()}(this,function(){"use strict";return function(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};if(void 0===t||isNaN(t))throw Error("maxHeight is required");var i="string"==typeof e?document.querySelectorAll(e):e;if(i){var o=n.character||"…",a=n.classname||"js-shave",s="boolean"!=typeof n.spaces||n.spaces,r='<span class="js-shave-char">'.concat(o,"</span>");"length"in i||(i=[i]);for(var c=0;c<i.length;c+=1){var l=i[c],h=l.style,d=l.querySelector(".".concat(a)),f=void 0===l.textContent?"innerText":"textContent";d&&(l.removeChild(l.querySelector(".js-shave-char")),l[f]=l[f]);var v=l[f],g=s?v.split(" "):v;if(!(g.length<2)){var u=h.height;h.height="auto";var p=h.maxHeight;if(h.maxHeight="none",l.offsetHeight<=t)h.height=u,h.maxHeight=p;else{for(var m=g.length-1,x=0,y=void 0;x<m;)y=x+m+1>>1,l[f]=s?g.slice(0,y).join(" "):g.slice(0,y),l.insertAdjacentHTML("beforeend",r),l.offsetHeight>t?m=y-1:x=y;l[f]=s?g.slice(0,m).join(" "):g.slice(0,m),l.insertAdjacentHTML("beforeend",r);var j=s?" ".concat(g.slice(m).join(" ")):g.slice(m),H=document.createTextNode(j),b=document.createElement("span");b.classList.add(a),b.style.display="none",b.appendChild(H),l.insertAdjacentElement("beforeend",b),h.height=u,h.maxHeight=p}}}}}});

assets/sass/base/_animation.scss

@@ -36,7 +36,7 @@
 
 @include keyframes(slide-in-down-little) {
   0% {
-    transform: translate(0,-1%);
+    transform: translate(0,-3%);
     opacity: 0;
   }
 

assets/sass/components/_bio.scss

@@ -12,7 +12,7 @@
     width: 100%;
     height: auto;
     @include box-shadow(0, 2px, 4px, 0, rgba(0, 0, 0, 0.25));
-    @include animation('slide-in-down .25s .6s 1 ease-in both');
+    @include animation('slide-in-down-little .2s .6s 1 ease-in both');
 
     &-wrapper {
       width: 90%;

assets/sass/components/_whoami.scss

@@ -10,7 +10,8 @@
     @include flex-direction(column);
   }
 
-  &__contents {    
+  &__contents {
+    width: 100%;
     margin-top: 0.5rem;
 
     @media only screen and (max-width: 769px) {

assets/sass/layout/_grid.scss

@@ -71,4 +71,21 @@ $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
 
 .navbar {
     grid-area: 1 / 1 / 2 / 3;
-}
+}
+
+
+
+.inner {
+    display: grid;
+    grid-template-columns: 250px 1fr 1fr;
+    grid-template-rows: 1fr;
+    grid-column-gap: 16px;
+    grid-row-gap: 0px;
+}
+
+.l { grid-area: 1 / 1 / 2 / 2; } // left
+.m { grid-area: 1 / 2 / 2 / 3; } // middle
+.r { grid-area: 1 / 3 / 2 / 4; } // right
+.lm { grid-area: 1 / 1 / 2 / 3; } // left + middle
+.mr { grid-area: 1 / 2 / 2 / 4; } // middle + right
+.lmr { grid-area: 1 / 1 / 2 / 4; } // left + middle + right

assets/sass/main.scss

@@ -77,4 +77,5 @@ $cursive-font: {{ .Site.Data.font.cursive_font }};
 @import 'pages/single';
 @import 'pages/terms';
 @import 'pages/contact';
-@import 'pages/talk';
+@import 'pages/talk';
+@import 'pages/showcase';

assets/sass/pages/_archive.scss

@@ -2,6 +2,7 @@
   position: relative;
   padding: 2rem 2rem 0;
   width: 100%;
+
   @include flexbox();
   @include flex-direction(column);
   @include justify-content(flex-start);
@@ -35,16 +36,20 @@
   &__li {
     margin-bottom: 0.5rem;
     margin-left: 4rem;
-    z-index: 0;    
+    z-index: 0;
 
     @include transition(margin-left, 0.1s, ease);
     @include flexbox();
-    @include align-items(center);
+    @include align-items(flex-start);
 
     @media only screen and (max-width: 769px) {
       margin-left: 0;
       position: relative;
-    }   
+    }
+
+    @media only screen and (max-width: 600px) {
+      @include flex-direction(column);
+    }
   }
 
   &__key {
@@ -125,8 +130,17 @@
   &__title {
     margin-right: 0.5rem;    
     margin-left: 1rem;
+    width: 100%;
 
-    @include truncate($grid-max-width);
+    &[data-title-wrap^="no"] {
+      @include truncate($grid-max-width);
+    }
+
+    @media only screen and (max-width: 600px) {
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+    }
+    
     @include on-event {
       &::before {
         content: '';
@@ -137,6 +151,11 @@
         
         @include themify($themes) {
           background-color: themed('archive-hover-line-color');
+          
+          @media only screen and (max-width:768px) {
+            top: 13px;
+            height: 24px;
+          }
         }
 
         @media only screen and (max-width: 769px) {

assets/sass/pages/_showcase.scss

@@ -0,0 +1,183 @@
+.showcase {
+  padding: 0.75rem 1.5rem;
+
+  &__bio {
+    position: -webkit-sticky;
+    position: sticky;
+    top: $grid_navbar_height * 1.25;
+    display: block;
+    margin-top: 2rem;
+
+    @media only screen and (max-width: 600px) {
+      display: none;
+    }
+  }
+
+  &__section {
+    
+  }
+
+  &__nav {
+    margin: 1rem 0.5rem;
+    padding: 0.5rem 0;
+    
+    @include themify($themes) {
+      border-bottom: 1px solid themed('hr-color');
+    }
+  }
+
+  &__button {
+    border: none;
+    outline: none;
+    font-family: $title-font;
+    font-size: 0.95rem;
+    border-top-left-radius: 0.125rem;
+    border-top-right-radius: 0.125rem;
+    padding: 0.5rem 0;
+    margin-right: 1rem;
+    position: relative;
+    text-decoration: none !important;
+    display: inline-block;
+    cursor: pointer;
+
+    @include themify($themes) {
+      color: themed('navbar-title-color');
+      @include on-event {
+        color: themed('navbar-title-hover-color');
+      }
+    }
+
+    &[data-meta]:after {
+      content: attr(data-meta);
+      width: 100%;
+      padding: 0.125rem 0.25rem;
+      border-radius: 50%;
+      margin: auto;
+      font-size: 12px;
+      
+      @include themify($themes) {
+        color: themed('taxo-num-color');
+        background-color: themed('taxo-num-background-color');
+      }
+    }
+
+    &.active {
+      @include themify($themes) {
+        color: themed('navbar-title-active-color');
+      }
+    }
+  }
+
+  &__title {
+    margin: 2rem 0.5rem 0.25rem 0.5rem;
+    font-size: 1.125rem;
+  }
+
+  &__box {
+    width: 47.5%;
+    height: auto;
+    border-radius: 0.2rem;
+    margin: 0.5rem;
+    padding: 1rem;
+    position: relative;
+    
+    @include flexbox();
+    @include flex-grow(1);
+    @include flex-direction(column);
+    @include justify-content(flex-start);
+    @include themify($themes) {
+      border: 1px solid themed('content-box-border-color');
+    }
+    @include on-event {
+      @include on-event {
+        @include box-shadow(1px, 1px, 3px, 0px, rgba(0, 0, 0, 0.25));
+        background-color: rgba(125, 125, 125, 0.1);
+      }
+    }
+    @media only screen and (max-width: 960px) {
+      width: 245px;
+    }
+
+    &--wrapper {
+      z-index: 2;
+      @include flexbox();
+      @include flex-wrap(wrap);
+      @include animation('slide-in-left-little .2s .25s 1 ease-in both');
+    }
+
+    &--dummy {
+      width: 47.5%;
+      margin: 0.5rem;
+
+      @include flex-grow(1);
+      @media only screen and (max-width: 960px) {
+        width: 245px;
+      }
+      @media only screen and (max-width: 600px) {
+        display: none;
+      }
+    }
+
+    &--title {
+      word-break: break-word;
+      font-family: $title-font;
+      font-size: 1rem;
+      margin-bottom: 0.5rem;
+    }
+
+    &--desc {
+      font-family: $content-font;
+      font-size: 0.9rem;
+      margin: 0.25rem 0;
+      height: 60px;
+      overflow: hidden;
+    }
+
+    &--img {
+      width: auto;
+      height: 100%;
+      max-height: 225px;
+      object-fit: cover;
+
+      img {
+        border-radius: 0.2rem;
+        display: block;
+        margin: auto;
+        max-height: 225px;
+      }
+
+      @include flexbox();
+      @include justify-content(center);
+      @include align-items(center);
+    }
+
+    &--meta {
+      margin-top: 0.25rem;
+
+      @include flexbox();
+      .type {
+        font-size: 12px;
+        text-transform: capitalize;
+
+        @include flexbox();
+        @include themify($themes) {
+          color: themed('meta-color');
+        }
+
+        svg {
+          display: block;
+          margin: auto 0.35rem auto 0;
+        }
+      }
+
+      a.type {
+        text-decoration: none;
+        @include themify($themes) {
+          @include on-event {
+            color: themed('link-hover');
+          }
+        }
+      }
+    }
+  }
+}

assets/sass/pages/_talk.scss

@@ -19,48 +19,43 @@
   }
 
   &__title {
-    &--margin {
+    margin-right: 0.5rem;
-      margin-right: 0.5rem;
+    margin-left: 0.75rem;
-      margin-left: 0.75rem;
+    width: 100%;
+
+    &[data-title-wrap^="no"] {
+      @include truncate($grid-max-width);
     }
 
-    @include truncate2($grid-max-width);
+    @media only screen and (max-width: 600px) {
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+    }
+    
     @include on-event {
       &::before {
         content: '';
         position: absolute;
-        left: 100px;                
+        left: 3rem;
-        width: 0.2rem;
+        width: 0.25rem;
-        height: 24px;
+        height: 30px;
         
         @include themify($themes) {
           background-color: themed('archive-hover-line-color');
+          
+          @media only screen and (max-width:768px) {
+            top: 13px;
+            left: 0;
+            height: 24px;
+          }
         }
 
         @media only screen and (max-width: 769px) {
+          height: 24px;
           top: 50%;
           @include translateY(-50%);
         }
       }
-
-      @media only screen and (min-width: 769px) {
-        &::before {
-          content: '';
-          position: absolute;
-          left: 3rem;                
-          width: 0.25rem;
-          height: 30px;
-          
-          @include themify($themes) {
-            background-color: themed('archive-hover-line-color');
-          }
-
-          @media only screen and (max-width: 769px) {
-            top: 50%;
-            @include translateY(-50%);
-          }
-        }
-      }
     }
   }
 }

assets/sass/themes/_hacker.scss

@@ -22,7 +22,7 @@ $hacker: (
     navbar-title-hover-color: #1FFF2A,
     navbar-title-active-color: #f3ff6e,
     navbar-menu-hover-background-color: lighten(#151715, 20%),
-    navbar-dropdown-item-hover-color: #1FFF2A,
+    navbar-dropdown-item-hover-color: #E08C48,
     sidebar-title-color: #E3CD26,
     sidebar-li-color: #A1AD64,
     taxo-title-color: #996287,
@@ -47,7 +47,7 @@ $hacker: (
     single-contents-subtitle-color: #FCFCFA,
     related-header-title-color: #FCFCFA,
     related-link-color: #C7BA00,
-    content-box-border-color: #dbdbdb,
+    content-box-border-color: #6B6B6B,
     content-box-background-color: #252526,
     burger-menu-color: #dbdbdb,
     social-icon-color: #9e9e9e,

exampleSite/config/_default/menus.en.toml

@@ -1,39 +1,45 @@
 [[main]]
   identifier = "about"
-  name = "about"
+  name = "About"
   url = "about"
   weight = 1
 
 [[main]]
   identifier = "archive"
-  name = "archive"
+  name = "Archive"
   url = "archive"
   weight = 2
 
 [[main]]
   identifier = "pt"
-  name = "pt"
+  name = "Pt"
   url = "pt"
   weight = 3
 
 [[main]]
   identifier = "gallery"
-  name = "gallery"
+  name = "Gallery"
   url = "gallery"
   weight = 4
     
 [[main]]
   parent = "gallery"
-  name = "cartoon"
+  name = "Cartoon"
   url = "gallery/cartoon"
 
 [[main]]
   parent = "gallery"
-  name = "photo"
+  name = "Photo"
   url = "gallery/photo"
 
 [[main]]
   identifier = "posts"
-  name = "posts"
+  name = "Posts"
   url = "posts"
-  weight = 5
+  weight = 5
+
+[[main]]
+  identifier = "showcase"
+  name = "Showcase"
+  url = "showcase"
+  weight = 6

exampleSite/config/_default/params.toml

@@ -8,6 +8,7 @@ useFaviconGenerator = true # https://www.favicon-generator.org/
 themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"]
 notAllowedTypesInHome = ["contact", "talks", "about", "showcase"]
 notAllowedTypesInHomeSidebar = ["about", "archive", "showcase"]
+notAllowedTypesInArchive = ["about", "talks", "showcase"]
 
 # header
 homeHeaderType = "text" # text, img, slide

exampleSite/content/archive/_index.ko.md

@@ -3,6 +3,7 @@ title: "Archive"
 date: 2019-10-19T11:44:14+09:00
 type: "archive"
 description: Archive Page
+titleWrap: wrap
 ---
 
 archive page

exampleSite/content/archive/_index.md

@@ -3,6 +3,7 @@ title: "Archive"
 date: 2019-10-19T11:44:14+09:00
 type: "archive"
 description: Archive Page
+titleWrap: wrap
 ---
 
 archive page

exampleSite/content/showcase/_index.md

@@ -0,0 +1,6 @@
+---
+title: "Showcase overview"
+date: 2020-01-19T15:43:38+09:00
+description: My portfolio, repos, works overview page
+enableBio: true
+---

exampleSite/content/showcase/hugo/_index.md

@@ -0,0 +1,7 @@
+---
+title: "Hugo"
+date: 2020-01-19T21:04:11+09:00
+description: Hugo theme collection
+category: theme
+enableBio: true
+---

exampleSite/content/showcase/hugo/hugo-theme-zdoc.md

@@ -0,0 +1,10 @@
+---
+title: "Hugo zDoc Theme"
+date: 2020-01-19T21:13:42+09:00
+description: Make a documentation with hugo zdoc theme!
+weight: 2
+link: https://github.com/zzossig/hugo-theme-zdoc
+repo: https://github.com/zzossig/hugo-theme-zdoc
+pinned: true
+thumb: feature3/css3-bare.png
+---

exampleSite/content/showcase/hugo/hugo-theme-zzo.md

@@ -0,0 +1,10 @@
+---
+title: "Hugo Zzo Theme"
+date: 2020-01-19T21:13:42+09:00
+description: Make a blog with hugo zzo theme!
+weight: 1
+link: https://github.com/zzossig/hugo-theme-zzo
+repo: https://github.com/zzossig/hugo-theme-zzo
+pinned: true
+thumb: feature3/css3.png
+---

i18n/en.toml

@@ -68,4 +68,10 @@ other = "Written At"
 other = "Modified At"
 
 [tooltip-reading-time]
-other = "Reading Time"
+other = "Reading Time"
+
+[showcase-overview]
+other = "Overview"
+
+[showcase-pinned]
+other = "Pinned"

i18n/ko.toml

@@ -68,4 +68,10 @@ other = "작성일"
 other = "수정일"
 
 [tooltip-reading-time]
-other = "읽는 시간"
+other = "읽는 시간"
+
+[showcase-overview]
+other = "개요"
+
+[showcase-pinned]
+other = "고정"

i18n/zh.toml

@@ -68,4 +68,10 @@ other = "创建日期"
 other = "更新日期"
 
 [tooltip-reading-time]
-other = "阅读时长"
+other = "阅读时长"
+
+[showcase-overview]
+other = "总览"
+
+[showcase-pinned]
+other = "固定"

layouts/archive/list.html

@@ -1,4 +1,6 @@
 {{ define "main" }}
+{{ $titleWrap := .Params.titleWrap }}
+
 <header class="header">
   <h3 class="h3 terms__title">
     {{ .Title }}
@@ -7,11 +9,14 @@
     {{ .Content }}
   </div>
 </header>
-</span>
 <main class="main archive">
   <div class="archive__container">
-    {{ $pages := (where (where .Site.RegularPages "Type" "!=" "about") "Section" "!=" "talks") }}
+    {{ $filteredPages := .Site.RegularPages }}
-    {{ $paginator := .Paginate ($pages.GroupByDate (.Site.Params.archiveGroupByDate | default "2006")) .Site.Params.archivePaginate }}
+    {{ range .Site.Params.notAllowedTypesInArchive }}
+      {{ $filteredPages = (where $filteredPages "Type" "!=" (lower .)) }}
+    {{ end }}
+
+    {{ $paginator := .Paginate ($filteredPages.GroupByDate (.Site.Params.archiveGroupByDate | default "2006")) .Site.Params.archivePaginate }}
     
     {{ range ($paginator).PageGroups }}
     <span class="archive__key">{{ .Key }}</span>
@@ -21,8 +26,8 @@
         <span class="archive__meta">
           <span class="archive__type">{{ .Type }}</span>
           <span class="archive__date">{{ .Date.Format (i18n "archive-dateformat") }}</span>
-        </span>        
+        </span>
-        <a href="{{ .Permalink }}" class="archive__title">{{ .Title }}</a>        
+        <a href="{{ .Permalink }}" class="archive__title" data-title-wrap="{{ $titleWrap | default "wrap"}}">{{ .Title }}</a>        
       </li>
       {{ end }}
     </ul>

layouts/partials/script/showcase-script.html

@@ -0,0 +1,63 @@
+{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
+<script defer src="{{ $enquire.RelPermalink }}"></script>
+{{ $lazysizes := resources.Get "js/lazysizes.min.js" | resources.Fingerprint }}
+<script defer src="{{ $lazysizes.RelPermalink }}"></script>
+{{ $shave := resources.Get "js/shave.min.js" | resources.Fingerprint }}
+<script defer src="{{ $shave.RelPermalink }}"></script>
+
+<script>
+  {{ $enableBio:= .Params.enableBio }}
+  var enableBio = JSON.parse({{ $enableBio | jsonify }});
+
+  document.addEventListener('DOMContentLoaded', function () {
+    var bioElem = document.querySelector('.showcase__bio');
+    var sectionElem = document.querySelector('.showcase__section');
+    var bioMobileElem = document.querySelector('.showcase__bio--mobile');
+
+    enquire.register("screen and (max-width: 600px)", {
+      match: function () {
+        if (enableBio) {
+          if (bioElem) {
+            bioElem.classList.remove('l');
+          }
+          if (sectionElem) {
+            sectionElem.classList.remove('mr');
+            sectionElem.classList.add('lmr');
+          }
+          if (bioMobileElem) {
+            bioMobileElem.classList.remove('hide');
+          }
+        } else {
+          if (sectionElem) {
+            sectionElem.classList.remove('mr');
+            sectionElem.classList.remove('lmr');
+            sectionElem.classList.add('lmr');
+          }
+        }
+      },
+      unmatch: function () {
+        if (enableBio) {
+          if (bioElem) {
+            bioElem.classList.add('l');
+          }
+          if (sectionElem) {
+            sectionElem.classList.remove('lmr');
+            sectionElem.classList.add('mr');
+          }
+          if (bioMobileElem) {
+            bioMobileElem.classList.add('hide');
+          }
+        } else {
+          sectionElem.classList.remove('mr');
+          sectionElem.classList.remove('lmr');
+          sectionElem.classList.add('lmr');
+        }
+      },
+      setup: function () { },
+      deferSetup: true,
+      destroy: function () { },
+    });
+
+    shave('.showcase__box--desc', 70);
+  });
+</script>

layouts/partials/showcase/show-nav.html

@@ -0,0 +1,15 @@
+{{ $current := . }}
+<nav class="showcase__nav">
+  <a href="{{ .FirstSection.Permalink }}" class="showcase__button {{ if eq .Permalink .FirstSection.Permalink }}active{{ end }}">
+    {{ i18n "showcase-overview" }}
+  </a>
+  {{ range (.Site.GetPage "section" .Type).Pages }}
+    {{ $active := false }}
+    {{ $active = or $active (eq .Name $current.Title) }}
+    {{ $active = or $active (eq (lower .URL) (lower $current.Title)) }}
+    {{ $active = or $active (eq (lower .URL) (lower $current.Type)) }}
+    <a href="{{ .Permalink }}" class="showcase__button {{ if $active }}active{{ end }}" data-meta="{{ len .Pages }}">
+      {{ i18n (lower .Title) | default .Title }}
+    </a>
+  {{ end }}
+</nav>

layouts/partials/showcase/show-pinned.html

@@ -0,0 +1,49 @@
+<div>
+  {{ $pinnedNum := 0 }}
+  {{ $isOdd := false}}
+
+  {{ range .Pages }}
+    {{ $pinnedNum = add $pinnedNum (len (where .Pages "Params.pinned" true)) }}
+  {{ end }}
+
+  {{ if eq (mod $pinnedNum 2) 1 }}
+    {{ $isOdd = true }}
+  {{ end }}
+
+  {{ if gt $pinnedNum 0 }}
+    <div class="showcase__title">
+      {{ i18n "showcase-pinned" }}
+    </div>
+    <div class="showcase__box--wrapper">
+      {{ range .Pages }}
+        {{ $category := .Params.category }}
+        {{ range where .Pages "Params.pinned" true }}
+          <div class="showcase__box">
+            <a href="{{ .Params.Link }}" class="showcase__box--title" target="_blank" rel="noreferrer">
+              {{ .Title }}
+            </a>
+            <div class="showcase__box--desc">
+              {{ .Description }}
+            </div>
+            <div class="grow"></div>
+            <div class="showcase__box--meta">
+              <span class="type">
+                {{ partial "svgs/etc/code.svg" (dict "width" 14 "height" 14) }}
+                {{ $category }}
+              </span>
+              <div class="grow"></div>
+              <a href="{{ .Params.Repo }}" class="type" target="_blank" rel="noreferrer">
+                {{ partial "svgs/social/github.svg" (dict "width" 14 "height" 14) }}
+                Repository
+              </a>
+            </div>
+          </div>
+        {{ end }}
+      {{ end }}
+      
+      {{ if $isOdd }}
+        <div class="showcase__box--dummy"></div>
+      {{ end }}
+    </div>
+  {{ end }}
+</div>

layouts/partials/showcase/show-section.html

@@ -0,0 +1,42 @@
+<div>
+  {{ $sectionNum := (len .Pages) }}
+  {{ $isOdd := false}}
+
+  {{ if eq (mod $sectionNum 2) 1}}
+    {{ $isOdd = true }}
+  {{ end }}
+
+  {{ if gt $sectionNum 0 }}
+    <div class="showcase__box--wrapper">
+      {{ $category := .Params.category }}
+      {{ range .Pages }}
+        <div class="showcase__box">
+          <a href="{{ .Params.Link }}" class="showcase__box--title" target="_blank" rel="noreferrer">
+            {{ .Title }}
+          </a>
+          <a href="{{ .Params.Link }}" class="showcase__box--img" target="_blank" rel="noreferrer">
+            <img src="{{ (print "images/" .Params.thumb) | relURL }}" alt="{{ .Title }}">
+          </a>
+          <div class="showcase__box--desc">
+            {{ .Description }}
+          </div>
+          <div class="showcase__box--meta">
+            <span class="type">
+              {{ partial "svgs/etc/code.svg" (dict "width" 14 "height" 14) }}
+              {{ $category }}
+            </span>
+            <div class="grow"></div>
+            <a href="{{ .Params.Repo }}" class="type" target="_blank" rel="noreferrer">
+              {{ partial "svgs/social/github.svg" (dict "width" 14 "height" 14) }}
+              Repository
+            </a>
+          </div>
+        </div>
+      {{ end }}
+      
+      {{ if $isOdd }}
+        <div class="showcase__box--dummy"></div>
+      {{ end }}
+    </div>
+  {{ end }}
+</div>

layouts/partials/sidebar/sidebar-home.html

@@ -1,5 +1,5 @@
 {{ if $.Param "enableSidebar" }}
-<div class="sidebar">    
+<div class="sidebar">
     {{ partial "search/site-search" . }}
     {{ partial "sidebar/site-bio" . }}
     {{ partial "sidebar/custom-home" . }}

layouts/partials/svgs/etc/code.svg

@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="{{ .width }}" height="{{ .height }}"><path fill="currentColor" d="M 15.3125 4 C 15.011719 4 14.695313 4.199219 14.59375 4.5 L 9 21.3125 C 8.898438 21.710938 9.199219 22 9.5 22 L 10.40625 22 C 10.707031 22 10.992188 21.800781 11.09375 21.5 L 16.6875 4.6875 C 16.789063 4.289063 16.488281 4 16.1875 4 Z M 5.0625 7 C 4.925781 7.023438 4.789063 7.085938 4.6875 7.1875 L 0.09375 12.6875 C -0.0078125 12.886719 -0.0078125 13.113281 0.09375 13.3125 L 4.6875 18.8125 C 4.886719 19.011719 5.199219 19.105469 5.5 18.90625 L 6.09375 18.40625 C 6.292969 18.207031 6.386719 17.792969 6.1875 17.59375 L 2.3125 13 L 6.09375 8.40625 C 6.292969 8.207031 6.300781 7.792969 6 7.59375 L 5.5 7.09375 C 5.351563 6.992188 5.199219 6.976563 5.0625 7 Z M 20.71875 7 C 20.644531 7.015625 20.574219 7.042969 20.5 7.09375 L 19.90625 7.59375 C 19.707031 7.792969 19.613281 8.207031 19.8125 8.40625 L 23.59375 13 L 19.8125 17.59375 C 19.613281 17.792969 19.605469 18.207031 19.90625 18.40625 L 20.5 18.90625 C 20.699219 19.105469 21.113281 19.113281 21.3125 18.8125 L 25.90625 13.3125 C 26.007813 13.113281 26.007813 12.886719 25.90625 12.6875 L 21.3125 7.1875 C 21.164063 7.039063 20.9375 6.953125 20.71875 7 Z"/></svg>

layouts/showcase/list.html

@@ -0,0 +1,28 @@
+{{ define "main" }}
+<main class="main showcase inner">
+  {{ if .Params.enableBio }}
+    <aside class="l">
+      <div class="showcase__bio">
+        {{ partial "sidebar/site-bio" . }}
+      </div>
+    </aside>
+  {{ end }}
+  <section class="showcase__section {{ if .Params.enableBio }}mr{{ else }}lmr{{ end }}">
+    {{ if .Params.enableBio }}
+      <div class="showcase__bio--mobile hide">
+        {{ partial "body/whoami" . }}
+      </div>
+    {{ end }}
+    {{ partial "showcase/show-nav" . }}
+    {{ if eq .Permalink .FirstSection.Permalink }}
+      {{ partial "showcase/show-pinned" . }}
+    {{ else }}
+      {{ partial "showcase/show-section" . }}
+    {{ end }}
+  </section>
+  <div class="hide">
+    {{ partial "search/site-search" . }}
+  </div>
+  {{ partial "script/showcase-script" . }}
+</main>
+{{ end }}

layouts/talks/list.html

@@ -1,4 +1,6 @@
 {{ define "main" }}
+{{ $titleWrap := .Params.titleWrap }}
+
 <header class="header">
   <h3 class="h3 terms__title">
     {{ .Title }}
@@ -21,7 +23,7 @@
         <span class="talk__date">
           {{ .PublishDate.Format (i18n "talks-dateformat") }}
         </span>
-        <a href="{{ .Permalink }}" class="talk__title">{{ .Title }}</a>
+        <a href="{{ .Permalink }}" class="talk__title" data-title-wrap="{{ $titleWrap | default "wrap"}}">{{ .Title }}</a>
       </li>
       {{ end }}
     </ul>

static/images/photoswipe/default-skin.svg

@@ -1 +0,0 @@
-<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>