publication page completed

archetypes/presentation.md

@@ -2,7 +2,7 @@
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 description: 
-type: pt
+type: presentation
 tags:
 -
 series:

archetypes/publication.md

@@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+description: 
+type: publication
+---

assets/sass/abstracts/_functions.scss

@@ -10,20 +10,3 @@
 @function themed($key) {   
   @return map-get($theme-map, $key);
 }
-
-@function calcSideWidth() {
-  $grid_max: $grid_max_width + $grid_max_unit;
-  $grid_main_main: $grid_main_main_width + $grid_main_main_unit;
-  $grid_main_side: $grid_main_side_width + $grid_main_side_unit;
-  $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
-
-  @if $grid_main_main_unit == fr and $grid_main_side_unit == fr {
-    @if $grid_max_unit == px {
-      @return #{($grid_main_side_width / ($grid_main_main_width + $grid_main_side_width)) * $grid_max_width - $grid_column_gap_width}px;
-    } @else if $grid_max_unit == "%" {
-      @return ($grid_main_side_width / ($grid_main_main_width + $grid_main_side_width) * 100)*1%;
-    }
-  } @else if $grid_main_side_unit == px {
-    @return $grid_main_side;
-  }
-}

assets/sass/components/_breadcrumb.scss

@@ -30,6 +30,7 @@
     }    
 
     &:last-child {
+      @include truncate($grid_max_width + $grid_max_unit);
       @include themify($themes) {
         color: themed('breadcrumb-item-active-color');
       }

assets/sass/components/_button.scss

@@ -6,6 +6,7 @@
   cursor: pointer;
   text-decoration: none !important;
   border-radius: 0.25rem;
+  background-color: transparent;
 
   &__text {
     margin: auto;
@@ -15,6 +16,21 @@
     @include translate(-50%, -50%);
   }
 
+  &__small {
+    height: 28px;
+    font-size: 16px;
+  }
+
+  &__medium {
+    height: 32px;
+    font-size: 17px;
+  }
+
+  &__large {
+    height: 36px;
+    font-size: 18px;
+  }
+
   @include themify($themes) {
     &[data-color="default"] {
       color: themed('link');

assets/sass/components/_modal.scss

@@ -130,6 +130,49 @@
       @include translateY(-50%);
     }
   }
+
+  &__cite {
+    width: 350px;
+    height: 500px;
+    white-space: nowrap;
+
+    @include flexbox();
+    @include justify-content(center);
+    @media only screen and (max-width: 600px) {
+      width: 100%;
+    }
+    @include themify($themes) {
+      border: 4px solid themed('hr-color');
+      background-color: themed('body-background-color');
+      @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+      @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+    }
+
+    &--exist {
+      width: 100%;
+      padding: 4rem 0.5rem 2.5rem;
+      font-size: 1rem;
+      overflow-x: auto;
+
+      @include themify($themes) {
+        background-color: themed('body-background-color');
+        @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+        @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+      }
+    }
+
+    &--notexist {
+      padding-top: 4rem;
+    }
+  }
+
+  &__copy {
+    position: absolute;
+    left: 4px;
+    bottom: 56px;
+    width: 60px;
+    height: 30px;
+  }
 }
 
 @keyframes mmfadeIn {

assets/sass/components/_pagination.scss

@@ -72,7 +72,6 @@
     border-radius: 0.125rem;
     &-title {
       font-size: 16.8px;
-      padding-bottom: 0.3rem;
       @include truncate($grid_max_width + $grid_max_unit);
     }
 

assets/sass/components/_related.scss

@@ -1,7 +1,8 @@
 .related {
-  margin: 2rem 0;
+  margin: 2rem auto;
   padding: 0.5rem;
   width: 100%;
+  max-width: 700px;
   position: relative;
 
   @include flexbox();
@@ -10,6 +11,7 @@
 
   &__title {
     font-size: 32px;
+    
     @include themify($themes) {
       color: themed('related-header-title-color');
     }

assets/sass/main.scss

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

assets/sass/pages/_publication.scss

@@ -0,0 +1,53 @@
+.pub {
+  padding: 0.75rem 1.5rem;
+
+  @media only screen and (max-width: 600px) {
+    padding: 1rem;
+  }
+
+  &__section {
+    @include flexbox();
+    @include flex-direction(column);
+  }
+  
+  &__toolbar {
+    &--search {
+      width: 240px;
+      padding: 0 0.5rem;
+      margin-right: 1rem;
+      
+      @media only screen and (max-width: 600px) {
+        width: 100%;
+      }
+    }
+  }
+
+  &__list {
+    margin: 1rem 0;
+  }
+
+  &__item {
+    margin: 1rem;
+    padding: 0.5rem 0;
+
+    @include flexbox();
+    @include flex-direction(column);
+    @media only screen and (max-width: 600px) {
+      margin: 1rem 0;
+    }
+  }
+
+  &__meta {
+    margin: 0 0.25rem;
+    display: inline-block;
+  }
+
+  &__summary {
+    margin-top: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  &__links {
+    
+  }
+}

assets/sass/pages/_showcase.scss

@@ -46,8 +46,8 @@
     &[data-meta]:after {
       content: attr(data-meta);
       width: 100%;
-      padding: 0.125rem 0.25rem;
-      border-radius: 50%;
+      padding: 0.125rem 0.35rem;
+      border-radius: 0.25rem;
       margin: auto;
       font-size: 12px;
       

assets/sass/pages/_single.scss

@@ -19,6 +19,18 @@
     }
   }
 
+  &__shorttitle {
+    font-size: 1.5rem;
+    font-family: $title-font;
+    overflow-wrap: break-word;
+    margin-bottom: 0.25rem;
+    opacity: 0.7;
+
+    @include themify($themes) {
+      color: themed("single-header-title-color");
+    }
+  }
+
   &__meta {
     font-size: 0.8rem;
     margin-bottom: 2rem;

exampleSite/config/_default/config.toml

@@ -36,6 +36,7 @@ googleAnalytics = ""
 
 [outputs]
   home = ["HTML", "RSS", "JSON"]
+  section = ["HTML", "JSON"]
 
 [taxonomies]
   category = "categories"

exampleSite/config/_default/languages.toml

@@ -3,9 +3,11 @@
   languageName = "English"
   weight = 1
   languagedir = "ltr"
+  contentdir = "content/en"
 
 [ko]
   title = "Hugo Zzo Theme"
   languageName = "한국어"
   weight = 2
   languagedir = "ltr"
+  contentdir = "content/ko"

exampleSite/config/_default/params.toml

@@ -6,9 +6,9 @@ custom_js = []
 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"]
+notAllowedTypesInHome = ["contact", "talks", "about", "showcase", "publication", "presentation"]
+notAllowedTypesInHomeSidebar = ["about", "archive", "showcase", "publication", "presentation"]
+notAllowedTypesInArchive = ["about", "talks", "showcase", "publication", "presentation"]
 
 # header
 homeHeaderType = "text" # text, img, slide
@@ -26,6 +26,7 @@ archivePaginate = 13
 paginateWindow = 1
 talksPaginate = 5
 talksGroupByDate = "2006"
+pubPaginate = 20
 
 # whoami
 myname = "zzossig"

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

@@ -1,10 +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
----
+---
+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/ko/_index.md

@@ -0,0 +1,96 @@
+---
+header:
+  - type: text
+    height: 200
+    paddingX: 50
+    paddingY: 0
+    align: center
+    title:
+      - HUGO
+    subtitle:
+      - The world’s fastest framework for building websites
+    titleColor: 
+    titleShadow: true
+    titleFontSize: 44
+    subtitleColor: 
+    subtitleCursive: true
+    subtitleFontSize: 18
+    spaceBetweenTitleSubtitle: 16
+  
+  - type: img
+    imageSrc: images/header/background.jpg
+    imageSize: cover
+    imageRepeat: no-repeat
+    imagePosition: center
+    height: 235
+    paddingX: 50
+    paddingY: 0
+    align: center
+    title:
+      -
+    subtitle:
+      -
+    titleColor:
+    titleShadow: false
+    titleFontSize: 44
+    subtitleColor:
+    subtitleCursive: false
+    subtitleFontSize: 16
+    spaceBetweenTitleSubtitle: 20
+
+  - type: slide
+    height: 235
+    options:
+        startSlide: 0
+        auto: 5000
+        draggable: true
+        autoRestart: true
+        continuous: true
+        disableScroll: true
+        stopPropagation: true
+    slide:
+      - paddingX: 50
+        paddingY: 0
+        align: left
+        imageSrc: images/header/background.jpg
+        imageSize: cover
+        imageRepeat: no-repeat
+        imagePosition: center
+        title:
+          - header title1
+        subtitle:
+          - header subtitle1
+        titleFontSize: 44
+        subtitleFontSize: 16
+        spaceBetweenTitleSubtitle: 20
+
+      - paddingX: 50
+        paddingY: 0
+        align: center
+        imageSrc: images/header/background.jpg
+        imageSize: cover
+        imageRepeat: no-repeat
+        imagePosition: center
+        title:
+          - header title2
+        subtitle:
+          - header subtitle2
+        titleFontSize: 44
+        subtitleFontSize: 16
+        spaceBetweenTitleSubtitle: 20
+
+      - paddingX: 50
+        paddingY: 0
+        align: right
+        imageSrc: images/header/background.jpg
+        imageSize: cover
+        imageRepeat: no-repeat
+        imagePosition: center
+        title:
+          - header title3
+        subtitle:
+          - header subtitle3
+        titleFontSize: 44
+        subtitleFontSize: 16
+        spaceBetweenTitleSubtitle: 20
+---

i18n/en.toml

@@ -25,6 +25,9 @@ other = "Jan 2"
 [single-dateformat]
 other = "Jan 2, 2006"
 
+[pub-dateformat]
+other = "2006-01-02"
+
 [single-related]
 other = "See Also"
 

i18n/fa.toml

@@ -25,6 +25,9 @@ other = "Jan 2"
 [single-dateformat]
 other = "Jan 2, 2006"
 
+[pub-dateformat]
+other = "2006-01-02"
+
 [single-related]
 other = "پست های مشابه"
 

i18n/ko.toml

@@ -25,6 +25,9 @@ other = "01월 02일"
 [single-dateformat]
 other = "2006년 01월 02일"
 
+[pub-dateformat]
+other = "2006-01-02"
+
 [single-related]
 other = "관련글"
 

i18n/zh.toml

@@ -25,6 +25,9 @@ other = "01月02日"
 [single-dateformat]
 other = "2006年01月02日"
 
+[pub-dateformat]
+other = "2006-01-02"
+
 [single-related]
 other = "相关内容"
 

layouts/_default/list.json.json

@@ -0,0 +1,22 @@
+{{ if eq .Type "publication" }}
+{{ $paginator := .Paginate (where .Pages "Type" "publication") 100 }}
+[{{ range $index, $page := $paginator.Pages }}
+{{- if ne $page.Type "json" -}}
+{{- if and $index (gt $index 0) -}},{{- end }}
+{
+	"uri": "{{ $page.Permalink }}",
+	"title": "{{ htmlEscape $page.Title}}",
+	"shorttitle": "{{ htmlEscape $page.Params.shorttitle}}",
+	"booktitle": "{{ htmlEscape $page.Params.booktitle}}",
+	"tags": [{{ range $tindex, $tag := $page.Params.tags }}{{ if $tindex }}, {{ end }}"{{ $tag| htmlEscape }}"{{ end }}],
+	"authors": "{{ with $page.Params.authors }}{{ delimit . ", " }}{{ end }}",
+	"abstract": "{{ with $page.Params.abstract }}{{ . | markdownify }}{{ end }}",
+	"ENTRYTYPE": "{{ with $page.Params.ENTRYTYPE }}{{ . }}{{ end }}",
+	"publication": "{{ with $page.Params.publication }}{{ . }}{{ end }}",
+	"publishDate": "{{ with $page.Params.publishDate }}{{ . }}{{ end }}",
+	"permalink": "{{ .Permalink }}",
+	"content": {{$page.Plain | jsonify}}
+}
+{{- end -}}
+{{- end -}}]
+{{ end }}

layouts/partials/head/scripts.html

@@ -78,6 +78,8 @@
   }
   // ===============================================================
 
+  {{ $permalink := .Permalink }}
+  var permalink = JSON.parse({{ $permalink | jsonify }});
 
   document.addEventListener('DOMContentLoaded', function () {
     // ============================ tab ============================
@@ -552,44 +554,6 @@
 
 
   // ========================== search ==========================
-    var baseurl = null;
-    {{ $siteBaseURL:= .Site.BaseURL }}
-    var siteBaseURL = JSON.parse({{ $siteBaseURL | jsonify }});
-    var siteBaseChecker = /\/\w+\//i;
-    var isSlug = siteBaseChecker.test(siteBaseURL);
-    var isThemeSite = location.origin.includes('themes.gohugo.io');
-
-    {{ if .Site.IsMultiLingual }}
-        if (isThemeSite) {
-          baseurl = "{{.Site.BaseURL}}{{.Site.LanguagePrefix}}";
-        } else {
-          var hasLangPostfix = location.pathname.includes("/{{.Site.Language.Lang}}");
-          if (hasLangPostfix) {
-            if (isSlug) {
-              baseurl = location.origin + siteBaseURL.match(siteBaseChecker)[0] + "{{.Site.Language.Lang}}";
-            } else {
-              baseurl = location.origin + "/{{.Site.Language.Lang}}";
-            }
-          } else {
-            if (isSlug) {
-              baseurl = location.origin + siteBaseURL.match(siteBaseChecker)[0];
-            } else {
-              baseurl = location.origin;
-            }
-          }
-        }
-    {{ else }}
-        if (isThemeSite) {
-          baseurl = "{{.Site.BaseURL}}";
-        } else {
-          if (isSlug) {
-            baseurl = location.origin + siteBaseURL.match(siteBaseChecker)[0];
-          } else {
-            baseurl = location.origin;
-          } 
-        }
-    {{ end }}
-
     var searchResults = null;
     var searchMenu = null;
     var searchText = null;
@@ -604,12 +568,8 @@
     }
 
     function initFuse() {
-      if (!endsWith(baseurl, "/")) {
-        baseurl = baseurl + '/';
-      };
-
       var xhr = new XMLHttpRequest();
-      xhr.open('GET', baseurl + "index.json");
+      xhr.open('GET', permalink + "index.json");
       xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
       xhr.onload = function () {
         if (xhr.status === 200) {

layouts/partials/pagination/pagination-single.html

@@ -1,36 +1,36 @@
 <div class="grow"></div>
 <nav class="pagination-single">
   {{ if eq ($.Param "languagedir") "rtl" }}
-    {{ if .NextPage }}
-    <a href="{{ .NextPage.Permalink }}" class="pagination-single__right">
+    {{ with .NextInSection }}
+    <a href="{{ .Permalink }}" class="pagination-single__right">
       <div class="pagination-single__icon">
         {{ partial "svgs/arrow/arrow-forward.svg" (dict "width" 25 "height" 25) }}
       </div>
-      <div class="pagination-single__right-title">{{ .NextPage.Title }}</div>
+      <div class="pagination-single__right-title">{{ .Title }}</div>
     </a>
     {{ end }}
     <div class="grow"></div>
-    {{ if .PrevPage }}
-    <a href="{{ .PrevPage.Permalink }}" class="pagination-single__left">
-      <div class="pagination-single__left-title">{{ .PrevPage.Title }}</div>
+    {{ with .PrevInSection }}
+    <a href="{{ .Permalink }}" class="pagination-single__left">
+      <div class="pagination-single__left-title">{{ .Title }}</div>
       <div class="pagination-single__icon">
         {{ partial "svgs/arrow/arrow-back.svg" (dict "width" 25 "height" 25) }}
       </div>
     </a>
     {{ end }}
   {{ else }}
-    {{ if .PrevPage }}
-      <a href="{{ .PrevPage.Permalink }}" class="pagination-single__left">
+    {{ with .PrevInSection }}
+      <a href="{{ .Permalink }}" class="pagination-single__left">
         <div class="pagination-single__icon">
           {{ partial "svgs/arrow/arrow-back.svg" (dict "width" 25 "height" 25) }}
         </div>
-        <div class="pagination-single__left-title">{{ .PrevPage.Title }}</div>      
+        <div class="pagination-single__left-title">{{ .Title }}</div>      
       </a>
     {{ end }}
     <div class="grow"></div>
-    {{ if .NextPage }}
-      <a href="{{ .NextPage.Permalink }}" class="pagination-single__right">      
-        <div class="pagination-single__right-title">{{ .NextPage.Title }}</div>
+    {{ with .NextInSection }}
+      <a href="{{ .Permalink }}" class="pagination-single__right">      
+        <div class="pagination-single__right-title">{{ .Title }}</div>
         <div class="pagination-single__icon">
           {{ partial "svgs/arrow/arrow-forward.svg" (dict "width" 25 "height" 25) }}
         </div>

layouts/partials/publication/pub-links.html

@@ -0,0 +1,38 @@
+<div class="pub__links">
+  {{ with .Params.link }}
+    <a href="{{ . }}" title="{{ . }}" target="_blank" rel="noreferrer" class="button button__medium" data-color="default">
+      url
+    </a>
+  {{ end }}
+  <button title="Cite Button" aria-label="Cite Button" id="citeBtn" class="button button__medium" data-color="default">
+    cite
+  </button>
+</div>
+
+<div class="modal micromodal-slide" id="modal" aria-hidden="true">
+  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+      <div class="modal__paging">
+        Cite
+      </div>
+      <div class="modal__icon modal__toolbar--close" title="Close" aria-label="Close Button" data-micromodal-close>
+        {{ partial "svgs/etc/close.svg" (dict "width" 25 "height" 25) }}
+      </div>
+      <main class="modal__cite">
+        {{ $filePath := (print .Permalink "cite.bib" | relLangURL) }}
+        {{ if fileExists $filePath }}
+          <div class="modal__cite--exist" id="citeContents">
+            {{ readFile $filePath | markdownify }}
+          </div>
+        {{ else }}
+          <div class="modal__cite--notexist">
+            cite.bib file not found
+          </div>
+        {{ end }}
+      </main>
+      <button id="copyBtn" class="button modal__copy" data-color="default" aria-label="Cite Copy Button" data-clipboard-target="#citeContents">
+        {{ i18n "copy" | default "Copy"}}
+      </button>
+    </div>
+  </div>
+</div>

layouts/partials/publication/pub-list.html

@@ -0,0 +1,34 @@
+<div class="pub__list">
+  {{ $paginator := .Paginate (where .Pages "Type" .Type) ($.Param "pubPaginate") }}
+  <ul>
+    {{ range $paginator.Pages }}
+    <li class="pub__item">
+      <a href="{{ .Permalink }}">
+        {{ .Title }}
+        {{ with .Params.shorttitle }}
+          <span class="p2">
+          - {{ . }}
+          </span>
+        {{ end }}
+        {{ with .Params.booktitle }}
+          <span class="p2">
+          - {{ . }}
+          </span>
+        {{ end }}
+      </a>
+      {{ if not .IsNode }}
+        <div>
+          {{ partial "publication/pub-meta" . }}
+        </div>
+        <div class="pub__summary">
+          {{ .Params.abstract }}
+        </div>
+      {{ else }}
+        <div class="pub__summary">
+          {{ .Params.description | markdownify }}
+        </div>
+      {{ end }}
+    </li>
+    {{ end }}
+  </ul>
+</div>

layouts/partials/publication/pub-meta.html

@@ -0,0 +1 @@
+<span class="caption pub__meta">📅 {{ if .Params.publishDate }}{{ dateFormat (i18n "pub-dateformat") .Params.publishDate }}{{ end }}</span>{{ with .Params.authors }}<span class="caption pub__meta">✍️ {{ delimit . ", " }}</span>{{ end }}{{ with .Params.publication }}<span class="caption pub__meta">📚 {{ . }}</span>{{ end }}{{ with .Params.ENTRYTYPE }}<span class="caption pub__meta" data-entry-type="{{ . }}">🎯 {{ . }}</span>{{ end }}

layouts/partials/publication/pub-toolbar.html

@@ -0,0 +1,18 @@
+{{ $current := . }}
+<nav class="showcase__nav">
+  <div class="pub__toolbar--search search">
+    <input id="pubSearch" aria-label="Publication Search" class="input" type="text" placeholder="{{T "search-placeholder"}}" autocomplete="off"/>
+  </div>
+  <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 .Permalink) (lower $current.Title)) }}
+    {{ $active = or $active (eq (lower .Permalink) (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/script/pub-list-script.html

@@ -0,0 +1,132 @@
+{{ $shave := resources.Get "js/shave.min.js" | resources.Fingerprint }}
+<script defer src="{{ $shave.RelPermalink }}"></script>
+{{ $fuzzysort := resources.Get "js/fuzzysort.min.js" | resources.Fingerprint }}
+<script defer src="{{ $fuzzysort.RelPermalink }}"></script>
+
+<script>
+  {{ $permalink := .Permalink }}
+  var permalink = JSON.parse({{ $permalink | jsonify }});
+  {{ $isRootSection := eq .Permalink .FirstSection.Permalink }}
+  var isRootSection = JSON.parse({{ $isRootSection | jsonify }});
+  var data = null;
+  const options = {
+    limit: 100, // don't return more results than you need!
+    allowTypo: false, // if you don't care about allowing typos
+    threshold: -10000, // don't return bad results
+    keys: ['title', 'abstract'],
+  }
+  
+  document.addEventListener('DOMContentLoaded', function () {
+    // search
+    (function loadData() {
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', permalink + "index.json");
+      xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
+      xhr.onload = function () {
+        if (xhr.status === 200) {
+          data = JSON.parse(xhr.response.toString('utf-8'));
+        } else {
+          console.error('[' + xhr.status + ']Error:', xhr.statusText);
+        }
+      };
+      xhr.send();
+    })();
+
+    var pubSearch = document.getElementById('pubSearch');
+    var pubList = document.querySelector('.pub__list');
+
+    var makeLi = function(ulElem, obj) {
+      var li = document.createElement('li');
+      li.className = 'pub__item';
+      
+      var a = document.createElement('a');
+      a.innerHTML = obj.title;
+      a.setAttribute('href', obj.permalink);
+      if (obj.booktitle) {
+        var span = document.createElement('span');
+        span.className = 'p2';
+        span.innerText = ' - ' + obj.booktitle;
+        a.appendChild(span);
+      } else if (obj.shorttitle) {
+        var span = document.createElement('span');
+        span.className = 'p2';
+        span.innerText = ' - ' + obj.shorttitle;
+        a.appendChild(span);
+      }
+
+      var metaDiv = document.createElement('div');
+      if (obj.publishDate) {
+        var dateSpan = document.createElement('span');
+        dateSpan.className = 'caption pub__meta';
+        dateSpan.innerText = '📅 ' + obj.publishDate.slice(0, 11);
+        metaDiv.appendChild(dateSpan);
+      }
+
+      if (obj.authors) {
+        var authorsSpan = document.createElement('span');
+        authorsSpan.className = 'caption pub__meta';
+        authorsSpan.innerText = '✍️ ' + obj.authors.toString();
+        metaDiv.appendChild(authorsSpan);
+      }
+
+      if (obj.publication) {
+        var pubSpan = document.createElement('span');
+        pubSpan.className = 'caption pub__meta';
+        pubSpan.innerText = '📚 ' + obj.publication;
+        metaDiv.appendChild(pubSpan);
+      }
+
+      if (obj.ENTRYTYPE) {
+        var typeSpan = document.createElement('span');
+        typeSpan.className = 'caption pub__meta';
+        typeSpan.innerText = '🎯 ' + obj.ENTRYTYPE;
+        metaDiv.appendChild(typeSpan);
+      }
+
+      var descDiv = document.createElement('div');
+      descDiv.className = 'pub__summary';
+      if (obj.abstract) {
+        descDiv.innerHTML = obj.abstract.substr(0, 300);
+      }
+      
+      li.appendChild(a);
+      li.appendChild(metaDiv);
+      li.appendChild(descDiv);
+      ulElem.appendChild(li);
+    }
+
+    pubSearch ? 
+    pubSearch.addEventListener('input', function(e) {
+      if (isRootSection) {
+        return null;
+      }
+      var originUl = pubList.querySelector('ul');
+      var ul = document.createElement('ul');
+      
+      if (!e.target.value) {
+        data.forEach(function (elem) {
+          makeLi(ul, elem);
+        });
+        originUl.parentNode.replaceChild(ul, originUl);
+      } else if (data) {
+        var results = fuzzysort.go(e.target.value, data, options);
+        if (results && results.length) {
+          var sortedResult = results.sort(function (a, b) {
+            var aDate = new Date(a.obj.publishDate);
+            var bDate = new Date(b.obj.publishDate);
+            return bDate.getTime() - aDate.getTime();
+          });
+
+          sortedResult.forEach(function (elem) {
+            makeLi(ul, elem.obj);
+          });
+
+          originUl.parentNode.replaceChild(ul, originUl);
+        }
+      }
+    }) : null;
+
+    // shave
+    shave('.pub__summary', 150);
+  });
+</script>

layouts/partials/script/pub-single-script.html

@@ -0,0 +1,30 @@
+{{ $micromodal := resources.Get "js/micromodal.min.js" | resources.Fingerprint }}
+<script defer src="{{ $micromodal.RelPermalink }}"></script>
+{{ $clipboard := resources.Get "js/clipboard.min.js" | resources.Fingerprint }}
+<script defer src="{{ $clipboard.RelPermalink }}"></script>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    // modal
+    MicroModal.init({
+      disableScroll: true,
+      disableFocus: true,
+      awaitOpenAnimation: false,
+      awaitCloseAnimation: false,
+      debugMode: false,
+      onClose: function(modal) {
+        if (clipboard) {
+          clipboard = null;
+        }
+      },
+    });
+
+    var citeBtn = document.getElementById('citeBtn');
+    citeBtn.addEventListener('click', function () {
+      MicroModal.show('modal');
+    });
+
+    // clipboard
+    var clipboard = new ClipboardJS('#copyBtn');
+  });
+</script>

layouts/publication/list.html

@@ -0,0 +1,15 @@
+{{ define "main" }}
+<main class="main pub inner" data-sidebar-position="{{ $.Param "sidebarPosition" }}">
+  <section class="pub__section lmr">
+    {{ partial "publication/pub-toolbar" . }}
+    {{ partial "publication/pub-list" . }}
+    <div class="grow"></div>
+    {{ partial "pagination/pagination" . }}
+  </section>
+  
+  {{ partial "script/pub-list-script" . }}
+  <div class="hide">
+    {{ partial "search/site-search" . }}
+  </div>
+</main>
+{{ end }}

layouts/publication/single.html

@@ -0,0 +1,43 @@
+{{ define "main" }}
+
+<main class="single__main {{ if or ($.Param "enableToc") ($.Param "toc") }}{{ if $.Param "hideToc" }}main{{ else if eq ($.Param "tocPosition") "outer" }}main{{ else }}main-main{{ end }}{{ else }}main{{ end }}">
+  {{ if $.Param "enableBreadcrumb" }}
+    {{ partial "body/breadcrumb" . }}
+  {{ end }}
+  <div class="single">
+    <h2 class="single__title">{{ .Title }}</h2>
+    {{ with .Params.shorttitle }}
+      <h6 class="single__shorttitle">{{ . }}</h6>
+    {{ end }}
+    {{ with .Params.booktitle }}
+      <h6 class="single__shorttitle">{{ . }}</h6>
+    {{ end }}
+    <div class="single__meta">
+      {{ partial "publication/pub-meta" . }}
+    </div>
+    <div class="pub__links">
+      {{ partial "publication/pub-links" . }}
+    </div>
+    <article class="single__contents" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
+      {{ .Params.abstract }}
+      {{ .Content }}
+    </article>
+    {{ partial "body/share" . }}
+    {{ partial "body/donation" . }}
+    {{ partial "body/whoami" . }}
+    {{ partial "comments/comments.html" . }}
+    {{ partial "body/photoswipe" . }}
+
+    <div class="hide">
+      {{ partial "search/site-search" . }}
+    </div>
+  </div>
+</main>
+
+{{ if and (or ($.Param "enableToc") ($.Param "toc")) (ne ($.Param "tocPosition") "outer") }}
+<aside class="single__side {{ if or ($.Param "enableToc") ($.Param "toc") }}main-side{{ end }}">
+  {{ partial "sidebar/sidebar-single" . }}
+</aside>
+{{ end }}
+{{ partial "script/pub-single-script" . }}
+{{ end }}