feat(code): add support for code block folding (#259)

assets/css/_core/_base.scss

@@ -50,4 +50,5 @@ a {
 @include link(true, true);
 
 @import "../_partial/icon";
+@import "../_partial/details";
 @import "../_partial/fixed-button";

assets/css/_core/_media.scss

@@ -1,12 +1,12 @@
 @media only screen and (max-width: 1440px) {
   .page {
-    max-width: 56%;
+    width: 56%;
   }
 }
 
 @media only screen and (max-width: 1200px) {
   .page {
-    max-width: 52%;
+    width: 52%;
   }
 }
 
@@ -20,7 +20,7 @@
   }
 
   .page {
-    max-width: 80%;
+    width: 80%;
   }
 }
 
@@ -38,7 +38,7 @@
   }
 
   .page {
-    max-width: 100%;
+    width: 100%;
     padding-top: $page-padding-top-mobile;
 
     .categories-card {

assets/css/_page/_index.scss

@@ -1,7 +1,7 @@
 .page {
   position: relative;
-  width: 100%;
+  max-width: 800px;
-  max-width: 60%;
+  width: 60%;
   margin: 0 auto;
   padding-top: $page-padding-top-desktop;
 

assets/css/_page/_single.scss

@@ -4,6 +4,7 @@
   .single-title {
     margin: 1rem 0 .5rem;
     font-size: 1.6rem;
+    font-weight: bold;
     line-height: 140%;
   }
 
@@ -35,7 +36,7 @@
   }
 
   .featured-image {
-    margin: .5rem 0;
+    margin: .5rem 0 1rem 0;
 
     img {
       display: block;
@@ -194,10 +195,10 @@
 
         th, td {
           padding: .3rem 1rem;
-          border: 1px double $global-border-color;
+          border: 1px solid darken($table-thead-color, 2%);
 
           .dark & {
-            border: 1px double $global-border-color-dark;
+            border-color: darken($table-thead-color-dark, 2%);
           }
         }
       }

assets/css/_partial/_details.scss

@@ -0,0 +1,33 @@
+.details {
+  .details-summary {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  i.details-icon {
+    color: $global-font-secondary-color;
+    @include transition(transform 0.2s ease);
+
+    .dark & {
+      color: $global-font-secondary-color-dark;
+    }
+  }
+
+  .details-content {
+    max-height: 0;
+    overflow-y: hidden;
+    @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+  }
+
+  &.open {
+    i.details-icon {
+      @include transform(rotate(180deg));
+    }
+
+    .details-content {
+      max-height: $MAX_LENGTH;
+      @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+    }
+  }
+}

assets/css/_partial/_fixed-button.scss

@@ -12,7 +12,6 @@
   padding: .6rem .6rem;
   color: $global-font-secondary-color;
   background: $header-background-color;
-  border: 1px solid darken($global-border-color, 10%);
   @include border-radius(2rem);
 
   @include blur;
@@ -29,7 +28,6 @@
   .dark & {
     color: $global-font-secondary-color-dark;
     background: $header-background-color-dark;
-    border-color: darken($global-border-color-dark, 10%);
 
     &:hover, &:active {
       color: $global-font-color-dark;

assets/css/_partial/_header.scss

@@ -2,7 +2,6 @@ header {
   width: 100%;
   z-index: 150;
   background-color: $header-background-color;
-  @include box-shadow(0px 1px 4px rgba(0, 0, 0, .1));
 
   .dark & {
     background-color: $header-background-color-dark;
@@ -65,7 +64,7 @@ header {
     outline: none;
     background-color: $header-background-color;
     vertical-align: baseline !important;
-    @include transition(width 0.3s ease 0s);
+    @include transition(width 0.3s ease);
 
     .dark & {
       background-color: $header-background-color-dark;
@@ -208,7 +207,7 @@ header {
     .header-wrapper {
       padding: 0 1rem;
       font-size: 1.125rem;
-      @include transition(margin-top 0.3s ease 0s);
+      @include transition(margin-top 0.3s ease);
 
       .header-title {
         font-size: $header-title-font-size;
@@ -218,7 +217,7 @@ header {
       .menu-toggle {
         line-height: 4rem;
         cursor: pointer;
-        @include transition(width 0.3s ease 0s);
+        @include transition(width 0.3s ease);
 
         span {
           display: block;

assets/css/_partial/_single/_admonition.scss

@@ -9,23 +9,32 @@
   .admonition-title {
     margin: 0 -0.75rem;
     padding: .2rem .75rem .2rem 1.8rem;
-    border-bottom: .05rem solid map-get($admonition-background-color-map, 'note');
+    border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
     background-color: map-get($admonition-background-color-map, 'note');
   }
 
+  .details-summary.admonition-title:hover {
+    background-color: darken(map-get($admonition-background-color-map, 'note'), 6%);
+  }
+
   .admonition-content {
-    margin: .5rem 0;
+    padding: .5rem 0;
   }
 
   i.icon {
     font-size: 0.85rem;
     color: map-get($admonition-color-map, 'note');
-    cursor: auto;
     position: absolute;
     left: .6rem;
     top: .6rem;
   }
 
+  i.details-icon {
+    position: absolute;
+    top: .5rem;
+    right: .5rem;
+  }
+
   @each $type, $color in $admonition-color-map {
     &.#{$type} {
       border-left-color: $color;
@@ -44,6 +53,10 @@
         border-bottom-color: $color;
         background-color: $color;
       }
+
+      .details-summary.admonition-title:hover {
+        background-color: darken($color, 6%);
+      }
     }
   }
 
@@ -51,32 +64,3 @@
     margin-bottom: .75rem;
   }
 }
-
-details.admonition {
-  summary {
-    display: block;
-    outline: none;
-    cursor: pointer;
-
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    i.details {
-      position: absolute;
-      top: .5rem;
-      right: .5rem;
-      color: $global-font-color;
-
-      .dark & {
-        color: $global-font-color-dark;
-      }
-    }
-  }
-}
-
-details.admonition[open] {
-  i.details {
-    @include transform(rotate(180deg));
-  }
-}

assets/css/_partial/_single/_code.scss

@@ -1,51 +1,27 @@
 code {
+  display:inline-block;
   font-size: $code-font-size;
   font-family: $code-font-family;
   color: $code-color;
-
+  padding: 0 .4rem;
-  img {
-    min-height: 1.25em;
-    max-height: 1.25em;
-  }
 
   .dark & {
     color: $code-color-dark;
   }
-
-  &:not(.block) {
-    padding: .2rem .4rem;
-  }
 }
 
 pre {
-  position: relative;
   margin: 0;
   padding: .25rem 0 .25rem .5rem;
   @include tab-size(4);
 
-  .copy-button {
+  code {
-    font-size: $code-font-size;
+    padding: 0;
-    line-height: 1.4em;
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: .3rem .5rem;
-    color: $code-info-color;
-    background: darken($code-background-color, 3%);
-
-    .dark & {
-      color: $code-info-color-dark;
-      background: darken($code-background-color-dark, 3%);
-    }
   }
 
-  .copy-button:hover, .copy-button:focus {
+  img {
-    cursor: pointer;
+    min-height: 1.25em;
-    color: $global-link-hover-color;
+    max-height: 1.25em;
-
-    .dark & {
-      color: $global-link-hover-color-dark;
-    }
   }
 }
 
@@ -57,41 +33,62 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   }
 }
 
-.highlight > .chroma, .gist {
+.highlight, .gist {
-  table, tr, td {
+  font-family: $code-font-family;
-    margin: 0;
+  font-size: $code-font-size;
-    padding: 0;
+
-    border: none !important;
+  .table-wrapper {
-    white-space: nowrap;
+    > table,
+    > table thead,
+    > table tr,
+    > table td {
+      margin: 0;
+      padding: 0;
+      border: none !important;
+      white-space: nowrap;
+    }
   }
 }
 
 .highlight > .chroma {
   position: relative;
+  line-height: 1.4em;
   margin: .5rem 0;
 
-  pre {
+  .code-header {
-    position: unset;
+    display: flex;
-  }
+    justify-content: space-between;
-
+    align-items: center;
-  &::before {
+    box-sizing: border-box;
-    display: block;
+    width: 100%;
-    padding: .3rem .4rem;
     font-family: $global-font-family;
     font-weight: bold;
     color: $code-info-color;
-    background: darken($code-background-color, 3%);
+    background: darken($code-background-color, 8%);
-    content: 'Code';
 
     .dark & {
       color: $code-info-color-dark;
-      background: darken($code-background-color-dark, 3%);
+      background: darken($code-background-color-dark, 6%);
     }
-  }
 
-  @each $type, $text in $code-type-map {
+    &:hover {
-    &.#{$type}::before {
+      cursor: pointer;
-      content: $text;
+    }
+
+    .code-title {
+      width: 100%;
+      padding: .4rem;
+    }
+
+    .code-title::after {
+      padding-left: .2rem;
+      content: 'Code';
+    }
+
+    @each $type, $text in $code-type-map {
+      &.#{$type} .code-title::after {
+        content: $text;
+      }
     }
   }
 
@@ -124,12 +121,62 @@ code, pre, .highlight table, .highlight tr, .highlight td {
       color: $global-font-secondary-color-dark;
     }
   }
-}
 
-.highlight {
+  .arrow {
-  font-family: $code-font-family;
+    @include transition(transform 0.2s ease);
-  font-size: $code-font-size;
+  }
-  line-height: 1.4em;
+
+  .ellipses {
+    padding: .4rem;
+  }
+
+  .copy {
+    display: none;
+    padding: .4rem;
+
+    &:hover {
+      cursor: pointer;
+      color: $global-link-hover-color;
+
+      .dark & {
+        color: $global-link-hover-color-dark;
+      }
+    }
+  }
+
+  .table-wrapper {
+    max-height: 0;
+    overflow-y: hidden;
+    @include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
+  }
+
+  &.open {
+    .code-header {
+      background: darken($code-background-color, 3%);
+
+      .dark & {
+        background: darken($code-background-color-dark, 3%);
+      }
+    }
+
+    .table-wrapper {
+      max-height: $MAX_LENGTH;
+      @include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
+    }
+
+    .arrow {
+      @include transform(rotate(90deg));
+    }
+
+    .ellipses {
+      display: none;
+    }
+
+    .copy {
+      display: inline;
+    }
+  }
+
   /* Comment */  .c,
   /* CommentHashbang */  .ch,
   /* CommentMultiline */  .cm,

assets/css/_partial/_single/_toc.scss

@@ -1,38 +1,16 @@
-#toc-auto {
+.toc {
-  display: block;
-  position: absolute;
-  width: 1000px;
-  padding: 0 .8rem;
-  border-left: 1px solid $global-border-color;
-  overflow-wrap: break-word;
-  box-sizing: border-box;
-  top: if($header-normal-mode-desktop, 5rem, 10rem);
-  left: 10000px;
-
-  @include blur;
-
-  .dark & {
-    border-left: 1px solid $global-border-color-dark;
-  }
-
   .toc-title {
-    font-weight: 400;
+    font-size: $toc-title-font-size;
-    margin: .8rem 0;
+    font-weight: bold;
     text-transform: uppercase;
   }
 
   .toc-content {
-    &.always-active ul {
+    font-size: $toc-content-font-size;
-      display: block;
-    }
-
-    >nav>ul {
-      margin: .625rem 0;
-    }
 
     ul {
       text-indent: -0.85rem;
-      padding-left: .625rem;
+      padding-left: .8rem;
       list-style: none;
 
       a::before {
@@ -47,7 +25,60 @@
       }
 
       ul {
-        padding-left: 1.25rem;
+        padding-left: 1.5rem;
+      }
+    }
+  }
+
+  ruby {
+    background: $code-background-color;
+
+    rt {
+      color: $global-font-secondary-color;
+    }
+
+    .dark & {
+      background: $code-background-color-dark;
+
+      rt {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+  }
+}
+
+#toc-auto {
+  display: block;
+  position: absolute;
+  width: $MAX_LENGTH;
+  padding: 0 .8rem;
+  border-left: 4px solid $global-border-color;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  top: if($header-normal-mode-desktop, 5rem, 10rem);
+  left: $MAX_LENGTH;
+
+  @include blur;
+
+  .dark & {
+    border-left: 1px solid $global-border-color-dark;
+  }
+
+  .toc-title {
+    margin: .8rem 0;
+  }
+
+  .toc-content {
+    &.always-active ul {
+      display: block;
+    }
+
+    > nav > ul {
+      margin: .625rem 0;
+    }
+
+    ul {
+      ul {
         display: none;
       }
 
@@ -79,41 +110,23 @@
   display: none;
   margin: .8rem 0;
 
-  details {
+  .toc-title {
-    summary {
+    display: flex;
-      list-style: none;
+    justify-content: space-between;
-      background: darken($code-background-color, 3%);
+    line-height: 2em;
+    padding: 0 .75rem;
+    background: darken($code-background-color, 3%);
+
+    .dark & {
+      background: darken($code-background-color-dark, 3%);
+    }
+
+    &:hover {
+      background: darken($code-background-color, 6%);
 
       .dark & {
-        background: darken($code-background-color-dark, 3%);
+        background: darken($code-background-color-dark, 5%);
       }
-
-      .toc-title {
-        display: block;
-        display: flex;
-        justify-content: space-between;
-        font-weight: bold;
-        line-height: 2em;
-        padding: 0 .625rem;
-
-        i.details {
-          line-height: 2em;
-        }
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
-
-      &::-webkit-details-marker {
-        display: none;
-      }
-    }
-  }
-
-  details[open] {
-    i.details {
-      @include transform(rotate(180deg));
     }
   }
 
@@ -122,15 +135,7 @@
 
     > nav > ul {
       margin: 0;
-      padding: .4rem .8rem;
+      padding: .4rem 1rem .4rem 1.8rem;
-    }
-
-    ul {
-      list-style: none;
-
-      ul {
-        padding-left: 1.25rem;
-      }
     }
 
     .dark & {
@@ -138,29 +143,3 @@
     }
   }
 }
-
-.toc {
-  .toc-title {
-    font-size: $toc-title-font-size;
-  }
-
-  .toc-content {
-    font-size: $toc-content-font-size;
-  }
-
-  ruby {
-    background: $code-background-color;
-
-    rt {
-      color: $global-font-secondary-color;
-    }
-
-    .dark & {
-      background: $code-background-color-dark;
-
-      rt {
-        color: $global-font-secondary-color-dark;
-      }
-    }
-  }
-}

assets/css/_variables.scss

@@ -122,7 +122,7 @@ $code-color-dark: #E5BF78 !default;
 $code-background-color: #f5f5f5 !default;
 $code-background-color-dark: #272C34 !default;
 
-$code-info-color: #b1b0b0 !default;
+$code-info-color: #acabab !default;
 $code-info-color-dark: #b1b0b0 !default;
 
 // Font size of the code
@@ -370,3 +370,5 @@ $admonition-background-color-map: (
   'quote': hsla(0,0%,62%,.1),
 ) !default;
 // ========== Admonition ========== //
+
+$MAX_LENGTH: 9999px;

exampleSite/config.toml

@@ -678,6 +678,9 @@ enableEmoji = true
       # whether to show the copy button of the code block
       # 是否显示代码块的复制按钮
       copy = true
+      # the maximum number of lines of displayed code by default
+      # 默认展开显示的代码行数
+      maxShownLines = 10
     # KaTeX mathematical formulas config (KaTeX https://katex.org/)
     # KaTeX 数学公式配置 (KaTeX https://katex.org/)
     [params.page.math]

exampleSite/content/posts/basic-markdown-syntax.en.md

@@ -46,7 +46,7 @@ John Gruber, the author of Markdown, puts it like this:
 > While Markdown’s syntax has been influenced by several existing text-to-HTML filters,
 > the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
 >
-> -- _John Gruber_
+> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
 
 Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like!
 

exampleSite/content/posts/basic-markdown-syntax.fr.md

@@ -51,7 +51,7 @@ John Gruber, the author of Markdown, puts it like this:
 > While Markdown’s syntax has been influenced by several existing text-to-HTML filters,
 > the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
 >
-> -- _John Gruber_
+> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
 
 Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like!
 

exampleSite/content/posts/basic-markdown-syntax.zh-cn.md

@@ -46,7 +46,7 @@ John Gruber, Markdown 的作者如是说:
 > 虽然 Markdown 的语法受到几种现有的文本到 HTML 转换工具的影响,
 > 但 Markdown 语法的最大灵感来源是纯文本电子邮件的格式.
 >
-> -- _John Gruber_
+> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
 
 话不多说, 我们来回顾一下 Markdown 的主要语法以及生成的 HTML 样式!
 

exampleSite/content/posts/theme-documentation-basics.en.md

@@ -393,6 +393,8 @@ Note that some of these parameters are explained in details in other sections of
     [params.page.code]
       # whether to show the copy button of the code block
       copy = true
+      # the maximum number of lines of displayed code by default
+      maxShownLines = 10
     # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
     [params.page.mapbox]
       # access token of Mapbox GL JS

exampleSite/content/posts/theme-documentation-basics.fr.md

@@ -398,6 +398,8 @@ Note that some of these parameters are explained in details in other sections of
     [params.page.code]
       # whether to show the copy button of the code block
       copy = true
+      # the maximum number of lines of displayed code by default
+      maxShownLines = 10
     # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
     [params.page.mapbox]
       # access token of Mapbox GL JS

exampleSite/content/posts/theme-documentation-basics.zh-cn.md

@@ -383,6 +383,8 @@ hugo
     [params.page.code]
       # 是否显示代码块的复制按钮
       copy = true
+      # 默认展开显示的代码行数
+      maxShownLines = 10
     # {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} 数学公式
     [params.page.math]
       enable = true

exampleSite/content/posts/theme-documentation-content.zh-cn.md

@@ -37,7 +37,7 @@ math:
 **Hugo** 允许你在文章内容前面添加 `yaml`, `toml` 或者 `json` 格式的前置参数.
 
 {{< admonition >}}
-**不是所有**的上述前置参数都必须在你的每篇文章中设置.
+**不是所有**的以下前置参数都必须在你的每篇文章中设置.
 只有在文章的参数和你的 [网站设置](../theme-documentation-basics/#site-configuration) 中的 `page` 部分不一致时才有必要这么做.
 {{< /admonition >}}
 

exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md

@@ -28,7 +28,7 @@ The `style` shortcode has two positional parameters.
 
 The **first** one is the custom style content.
 
-And the **second** one is the HTML tag around the content you want to change style, and whose default value is `p`.
+And the **second** one is the HTML tag around the content you want to change style, and whose default value is `div`.
 
 Example `style` input:
 

exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md

@@ -33,7 +33,7 @@ The `style` shortcode has two positional parameters.
 
 The **first** one is the custom style content.
 
-And the **second** one is the HTML tag around the content you want to change style, and whose default value is `p`.
+And the **second** one is the HTML tag around the content you want to change style, and whose default value is `div`.
 
 Example `style` input:
 

exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md

@@ -31,7 +31,7 @@ mapbox:
 
 第一个参数是自定义样式的内容.
 
-第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 `p`.
+第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 `div`.
 
 一个 `style` 示例:
 

layouts/_default/section.html

@@ -1,12 +1,12 @@
 {{- define "title" }}
-    {{- .Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
+    {{- .Params.Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
 {{- end -}}
 
 {{- define "content" -}}
     <div class="page archive">
         {{- /* Title */ -}}
         <h2 class="single-title animated pulse faster">
-            {{- .Title | default (T .Section) | default .Section | printf (T "allSome") -}}
+            {{- .Params.Title | default (T .Section) | default .Section | printf (T "allSome") -}}
         </h2>
 
         {{- /* Paginate */ -}}

layouts/partials/assets.html

@@ -52,11 +52,14 @@
     {{- $config = dict "lightGallery" $lightGalleryConfig | merge $config -}}
 {{- end -}}
 
+{{- $code := $params.code | default dict -}}
+{{- $config = cond (ne $code.maxShownLines nil) $code.maxShownLines 10 | dict "maxShownLines" | dict "code" | merge $config -}}
+
 {{- /* clipboard.js */ -}}
-{{- if not $params.code | or (ne $params.code false) -}}
+{{- if ne $code.copy false -}}
     {{- $source := $cdn.clipboardJS | default "lib/clipboard/clipboard.min.js" -}}
     {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
-    {{- $config = T "copyToClipboard" | dict "title" | dict "clipboard" | merge $config -}}
+    {{- $config = T "copyToClipboard" | dict "copyTitle" | dict "code" | merge $config -}}
 {{- end -}}
 
 {{- /* Sharer.js */ -}}

layouts/posts/rss.xml

@@ -1,13 +1,13 @@
 <rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
     <channel>
         <title>
-            {{- .Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
+            {{- .Params.Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
         </title>
         <link>
             {{- .Permalink -}}
         </link>
         <description>
-            {{- .Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
+            {{- .Params.Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
         </description>
         <generator>Hugo -- gohugo.io</generator>
         {{- with .Site.LanguageCode -}}

layouts/posts/single.html

@@ -67,21 +67,17 @@
 
         {{- /* Static TOC */ -}}
         {{- if $params.toc.enable -}}
-            <div class="toc" id="toc-static">
+            <div class="details toc" id="toc-static">
-                <details>
+                <div class="details-summary toc-title">
-                    <summary>
+                    <span>{{ T "contents" }}</span>
-                        <div class="toc-title">
+                    <span><i class="details-icon fas fa-angle-down"></i></span>
-                            <span>{{ T "contents" }}</span>
+                </div>
-                            <span><i class="details icon fas fa-angle-down"></i></span>
+                <div class="details-content toc-content" id="toc-content-static">
-                        </div>
+                    {{- $toc := .TableOfContents -}}
-                    </summary>
+                    {{- $toc = partial "function/fontawesome.html" $toc -}}
-                    <div class="toc-content" id="toc-content-static">
+                    {{- $toc = partial "function/ruby.html" $toc -}}
-                        {{- $toc := .TableOfContents -}}
+                    {{- $toc | safeHTML -}}
-                        {{- $toc = partial "function/fontawesome.html" $toc -}}
+                </div>
-                        {{- $toc = partial "function/ruby.html" $toc -}}
-                        {{- $toc | safeHTML -}}
-                    </div>
-                </details>
             </div>
         {{- end -}}
 

layouts/shortcodes/admonition.html

@@ -16,18 +16,20 @@
 
 {{- if .IsNamedParams -}}
     {{- $type := .Get "type" | default "note" -}}
-    {{- if .Get "details"  -}}
+    {{- if .Get "details" -}}
-        <details class="admonition {{ $type }}">
+        <div class="details admonition {{ $type }}">
-            <summary class="admonition-title">
+            <div class="details-summary admonition-title">
-                <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}<i class="details {{ $iconDetails }}"></i>
+                <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
-            </summary>
-            <div class="admonition-content">
-                {{- $inner -}}
             </div>
-        </details>
+            <div class="details-content">
+                <div class="admonition-content">
+                    {{- $inner -}}
+                </div>
+            </div>
+        </div>
     {{- else -}}
         <div class="admonition {{ $type }}">
-            <p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}</p>
+            <div class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}</div>
             <div class="admonition-content">
                 {{- $inner -}}
             </div>
@@ -36,17 +38,19 @@
 {{- else -}}
     {{- $type := .Get 0 | default "note" -}}
     {{- if .Get 2 -}}
-        <details class="admonition {{ $type }}">
+        <div class="details admonition {{ $type }}">
-            <summary class="admonition-title">
+            <div class="details-summary admonition-title">
-                <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}<i class="details {{ $iconDetails }}"></i>
+                <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
-            </summary>
-            <div class="admonition-content">
-                {{- $inner -}}
             </div>
-        </details>
+            <div class="details-content">
+                <div class="admonition-content">
+                    {{- $inner -}}
+                </div>
+            </div>
+        </div>
     {{- else -}}
         <div class="admonition {{ $type }}">
-            <p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}</p>
+            <div class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}</div>
             <div class="admonition-content">
                 {{- $inner -}}
             </div>

layouts/taxonomy/rss.xml

@@ -1,13 +1,13 @@
 <rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
     <channel>
         <title>
-            {{- .Title }} | {{ T .Data.Singular | default .Data.Singular }} | {{ .Site.Title -}}
+            {{- .Params.Title }} | {{ T .Data.Singular | default .Data.Singular }} | {{ .Site.Title -}}
         </title>
         <link>
             {{- .Permalink -}}
         </link>
         <description>
-            {{- .Title }} | {{ T .Data.Singular | default .Data.Singular }} | {{ .Site.Title -}}
+            {{- .Params.Title }} | {{ T .Data.Singular | default .Data.Singular }} | {{ .Site.Title -}}
         </description>
         <generator>Hugo -- gohugo.io</generator>
         {{- with .Site.LanguageCode -}}

src/js/theme.js

@@ -287,19 +287,20 @@ class Theme {
         } else initAutosearch();
     }
 
+    initDetails() {
+        this.util.forEach(document.getElementsByClassName('details'), $details => {
+            const $summary = $details.getElementsByClassName('details-summary')[0];
+            $summary.addEventListener('click', () => {
+                $details.classList.toggle('open');
+            }, false);
+        });
+    }
+
     initLightGallery() {
         if (this.config.lightGallery) lightGallery(document.getElementById('content'), this.config.lightGallery);
     }
 
     initHighlight() {
-        this.util.forEach(document.querySelectorAll('.highlight > .chroma'), $chroma => {
-            const $elements = $chroma.querySelectorAll('pre.chroma > code');
-            if ($elements.length) {
-                $chroma.className += ' ' + $elements[$elements.length - 1].className.toLowerCase();
-                $elements[0].classList.add('lnc');
-                $elements[$elements.length - 1].classList.remove('lnc');
-            }
-        });
         this.util.forEach(document.querySelectorAll('.highlight > pre.chroma'), $preChroma => {
             const $chroma = document.createElement('div');
             $chroma.className = $preChroma.className;
@@ -314,19 +315,42 @@ class Theme {
             $preChroma.parentElement.replaceChild($chroma, $preChroma);
             $td.appendChild($preChroma);
         });
-        this.util.forEach(document.querySelectorAll('pre > code'), $code => {
+        this.util.forEach(document.querySelectorAll('.highlight > .chroma'), $chroma => {
-            $code.classList.add('block');
+            const $codeElements = $chroma.querySelectorAll('pre.chroma > code');
-            if ($code.classList.contains('lnc') || !this.config.clipboard) return;
+            if ($codeElements.length) {
-            const $button = document.createElement('div');
+                const $code = $codeElements[$codeElements.length - 1];
-            $button.classList.add('copy-button');
+                const $header = document.createElement('div');
-            $button.insertAdjacentHTML('afterbegin', '<i class="far fa-copy fa-fw"></i>');
+                $header.className = 'code-header ' + $code.className.toLowerCase();
-            $button.setAttribute('data-clipboard-text', $code.innerText);
+                const $title = document.createElement('span');
-            $button.title = this.config.clipboard.title;
+                $title.classList.add('code-title');
-            const clipboard = new ClipboardJS($button);
+                $title.insertAdjacentHTML('afterbegin', '<i class="arrow fas fa-chevron-right fa-fw"></i>');
-            clipboard.on('success', e => {
+                $title.addEventListener('click', () => {
-                this.util.animateCSS($code, 'flash');
+                    $chroma.classList.toggle('open');
-            });
+                }, false);
-            $code.after($button);
+                $header.appendChild($title);
+                const $ellipses = document.createElement('span');
+                $ellipses.insertAdjacentHTML('afterbegin', '<i class="fas fa-ellipsis-h fa-fw"></i>');
+                $ellipses.classList.add('ellipses');
+                $ellipses.addEventListener('click', () => {
+                    $chroma.classList.add('open');
+                }, false);
+                $header.appendChild($ellipses);
+                const $copy = document.createElement('span');
+                $copy.insertAdjacentHTML('afterbegin', '<i class="far fa-copy fa-fw"></i>');
+                $copy.classList.add('copy');
+                const code = $code.innerText;
+                if (this.config.code.maxShownLines < 0 || code.split('\n').length < this.config.code.maxShownLines + 2) $chroma.classList.add('open');
+                if (this.config.code.copyTitle) {
+                    $copy.setAttribute('data-clipboard-text', code);
+                    $copy.title = this.config.code.copyTitle;
+                    const clipboard = new ClipboardJS($copy);
+                    clipboard.on('success', e => {
+                        this.util.animateCSS($code, 'flash');
+                    });
+                    $header.appendChild($copy);
+                }
+                $chroma.insertBefore($header, $chroma.firstChild);
+            }
         });
     }
 
@@ -618,6 +642,7 @@ class Theme {
         this.initMenuMobile();
         this.initSwitchTheme();
         this.initSearch();
+        this.initDetails();
         this.initLightGallery();
         this.initHighlight();
         this.initTable();