outer toc option added, fixed deprecation page.URL warning

README.ko.md

@@ -270,6 +270,7 @@ enableHomeSidebarTitles = true
 enableListSidebarTitles = true
 enableToc = true # single page table of contents, you can replace this param to toc(toc = true)
 hideToc = false # Hide or Show toc
+tocPosition = "inner" # inner, outer
 enableTocSwitch = true # single page table of contents visibility switch
 itemsPerCategory = 5 # maximum number of posts shown in the sidebar.
 sidebarPosition = "right" # bio, profile component layout position

README.md

@@ -263,6 +263,7 @@ enableHomeSidebarTitles = true
 enableListSidebarTitles = true
 enableToc = true # single page table of contents, you can replace this param to toc(toc = true)
 hideToc = false # Hide or Show toc
+tocPosition = "inner" # inner, outer
 enableTocSwitch = true # single page table of contents visibility switch
 itemsPerCategory = 5 # maximum number of posts shown in the sidebar.
 sidebarPosition = "right" # bio, profile component layout position

archetypes/default.md

@@ -6,6 +6,7 @@ draft: false
 hideToc: false
 enableToc: true
 enableTocContent: false
+tocPosition: inner
 tags:
 -
 series:

assets/sass/components/_summary.scss

@@ -138,6 +138,8 @@
       min-width: 130px;
       overflow: hidden;
       border-radius: 0.25rem;
+      padding: 0.25rem;
+      margin-right: .5rem;
       
       @include transition(all, 0.25s, ease-in);
       @include align-self(center);

assets/sass/components/_toc.scss

@@ -80,6 +80,16 @@
       }
     }
   }
+
+  &__outer {
+    padding-right: 1rem;
+    padding-left: 2.5rem;
+    max-width: calc((100vw - 980px) / 2);
+
+    @media only screen and (max-width: 1300px) {
+      display: none;
+    }
+  }
 }
 
 .expand__content {

assets/sass/layout/_body.scss

@@ -1,5 +1,8 @@
 #container {
   position: relative;
+  
+  @include flexbox();
+  
   @include themify($themes) {
       color: themed('body-color');
       background-color: themed('backdrop-background-color');

assets/sass/layout/_grid.scss

@@ -12,17 +12,6 @@ $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
     grid-template-rows: $grid_navbar_height auto 1fr auto;
     grid-column-gap: $grid_column_gap;
     grid-row-gap: $grid_row_gap;
-    
-    margin: 0 auto;
-    position: relative;
-
-    @include justify-content(center);
-    @include themify($themes) {
-        background-color: themed('body-background-color');
-    }
-    @media only screen and (max-width: 769px) {
-        grid-template-columns: minmax(0, $grid_main_main) minmax(0, $grid_main_side);
-    }
 }
 
 .header-main {

assets/sass/main.scss

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

assets/sass/pages/_showcase.scss

@@ -6,7 +6,7 @@
     position: sticky;
     top: $grid_navbar_height * 1.25;
     display: block;
-    margin-top: 1rem;
+    margin-top: 0.5rem;
 
     @media only screen and (max-width: 600px) {
       display: none;
@@ -64,14 +64,9 @@
     }
   }
 
-  &__title {
-    margin: 2rem 0.5rem 0.25rem 0;
-    font-size: 1.125rem;
-  }
-
   &__box {
     width: 100%;
-    max-width: 48.2%;
+    max-width: 48%;
     height: auto;
     border-radius: 0.2rem;
     padding: 1rem;
@@ -101,7 +96,7 @@
     }
 
     @media only screen and (max-width: 1180px) {
-      max-width: 48.2%;
+      max-width: 48%;
     }
 
     @media only screen and (max-width: 769px) {

assets/sass/pages/_wrapper.scss

@@ -0,0 +1,30 @@
+$grid_max: $grid_max_width + $grid_max_unit;
+
+.wrapper {
+  margin: 0 auto;
+  position: relative;
+
+  @include justify-content(center);
+  @include themify($themes) {
+      background-color: themed('body-background-color');
+  }
+  @media only screen and (max-width: 769px) {
+      grid-template-columns: minmax(0, $grid_main_main) minmax(0, $grid_main_side);
+  }
+  
+  &__left {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: calc((100vw - 980px) / 2);
+  }
+
+  &__right {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: calc((100vw - 980px) / 2);
+  }
+}

exampleSite/config/_default/params.toml

@@ -46,6 +46,7 @@ enableHomeSidebarTitles = true
 enableListSidebarTitles = true
 enableToc = true
 hideToc = false
+tocPosition = "inner" # inner, outer
 enableTocSwitch = true
 itemsPerCategory = 5
 sidebarPosition = "right"

layouts/_default/baseof.html

@@ -22,7 +22,7 @@
     </script>    
     
     <div id="container">
-        {{ partial "body/custom-wrapper" . }}
+        {{ partial "body/main-left" . }}
         <div class="wrapper">
             {{ partial "navbar/site-nav" . }}
             {{ partial "header/site-header" . }}
@@ -30,6 +30,7 @@
             {{ partial "body/custom-body" . }}
             {{ partial "footer/site-footer" . }}
         </div>
+        {{ partial "body/main-right" . }}
     </div>
 </body>
 

layouts/_default/single.html

@@ -3,7 +3,7 @@
 {{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
 <script src="{{ $enquire.RelPermalink }}"></script>
 
-<main class="single__main {{ if or ($.Param "enableToc") ($.Param "toc") }}{{ if $.Param "hideToc" }}main{{ else }}main-main{{ end }}{{ else }}main{{ end }}">
+<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 eq .Site.Params.enableBreadcrumb true }}
   {{ partial "body/breadcrumb" . }}
   {{ end }}
@@ -30,7 +30,7 @@
   </div>
 </main>
 
-{{ if or ($.Param "enableToc") ($.Param "toc") }}
+{{ 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>
@@ -38,27 +38,48 @@
 <script>
   {{ $enableToc:= $.Param "enableToc" }}
   {{ $toc:= $.Param "toc" }}
+  {{ $tocPosition:= $.Param "tocPosition" }}
+
   var enableToc = JSON.parse({{ $enableToc | jsonify }});
   var toc = JSON.parse({{ $toc | jsonify }});
+  var tocPosition = JSON.parse({{ $tocPosition | jsonify }});
   
   var singleMainElem = document.querySelector('.single__main');
   var singleSideElem = document.querySelector('.single__side');
 
   enquire.register("screen and (max-width: 769px)", {
     match: function () {
-      if (enableToc || toc) {
+      if ((enableToc || toc) && tocPosition !== "outer") {
+        if (singleMainElem && singleSideElem) {
           singleMainElem.classList.remove('main-main');
           singleMainElem.classList.add('main');
           singleSideElem.classList.remove('main-side');
           singleSideElem.classList.add('hide');
         }
+      } else if (tocPosition === "outer") {
+        if (singleMainElem && !singleMainElem.classList.contains('main-main')) {
+          singleMainElem.classList.remove('main-main');
+          singleMainElem.classList.add('main');
+        }
+        if (singleSideElem && !singleSideElem.classList.contains('hide')) {
+          singleSideElem.classList.add('hide');
+        }
+      }
     },
     unmatch: function () {
-      if (enableToc || toc) {
+      if ((enableToc || toc) && tocPosition !== "outer") {
         singleMainElem.classList.remove('main');
         singleMainElem.classList.add('main-main');
         singleSideElem.classList.remove('hide');
         singleSideElem.classList.add('main-side');
+      } else if (tocPosition === "outer") {
+        if (singleMainElem && !singleMainElem.classList.contains('main-main')) {
+          singleMainElem.classList.remove('main-main');
+          singleMainElem.classList.add('main');
+        }
+        if (singleSideElem && !singleSideElem.classList.contains('hide')) {
+          singleSideElem.classList.add('hide');
+        }
       }
 
       document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');

layouts/partials/body/custom-wrapper.html

@@ -1 +0,0 @@
-<!-- override this file -->

layouts/partials/body/main-left.html

@@ -0,0 +1 @@
+<div class="wrapper__left"></div>

layouts/partials/body/main-right.html

@@ -0,0 +1,9 @@
+<div class="wrapper__right">
+  {{ if eq ($.Param "tocPosition") "outer" }}
+    {{ if or ($.Param "enableToc") ($.Param "toc") }}
+      <div class="toc toc__outer {{ if $.Param "hideToc" }}hide{{ end }}">
+        {{ .TableOfContents }}
+      </div>
+    {{ end }}
+  {{ end }}
+</div>

layouts/partials/pagination/pagination.html

@@ -20,6 +20,8 @@
   <ul class="pagination">
     {{ range $pag.Pagers }}
       {{ $cur := .PageNumber }}
+      <script>
+      </script>
       {{ if in ($.Scratch.Get "show") $cur }}
         <li
         {{ if eq . $pag }}class="active"{{ end }}><a href="{{ .URL }}">{{ .PageNumber }}</a></li>

layouts/partials/script/single-script.html

@@ -116,7 +116,7 @@
     var toc = JSON.parse({{ $toc | jsonify }});
     var hideToc = JSON.parse({{ $hideToc | jsonify }});
     
-    if (enableToc || toc) {
+    if ((enableToc || toc) && document.querySelector('.toc')) {
       var tableOfContentsElem = document.querySelector('.toc').querySelector('#TableOfContents');
       tableOfContentsElem.querySelectorAll('ul > li').forEach(function (liElem) {
         liElem.querySelectorAll('ul').forEach(function (ulElem) {

layouts/partials/showcase/show-nav.html

@@ -6,8 +6,8 @@
   {{ 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)) }}
+    {{ $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>

layouts/partials/showcase/show-pinned.html

@@ -6,9 +6,6 @@
   {{ end }}
 
   {{ if gt $pinnedNum 0 }}
-    <div class="showcase__title">
-      {{ i18n "showcase-pinned" }}
-    </div>
     <div style="display: flex; justify-content: center">
     <ol class="showcase__box--wrapper">
       {{ range .Pages }}

layouts/partials/showcase/show-section.html

@@ -10,14 +10,17 @@
           <a href="{{ .Params.Link }}" class="showcase__box--title" target="_blank" rel="noreferrer">
             {{ .Title }}
           </a>
-          {{ if (isset .Params "thumb") | or (eq .Params.thumb "") }}
+          
+          {{ if .Params.thumb }}
           <a href="{{ .Params.Link }}" class="showcase__box--img" target="_blank" rel="noreferrer">
             <img src="{{ (print "images/" .Params.thumb) | relURL }}" alt="{{ .Title }}">
           </a>
           {{ end }}
+
           <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) }}

layouts/partials/sidebar/sidebar-single.html

@@ -1,5 +1,5 @@
 {{ if $.Param "enableSidebar" }}
-{{ if or ($.Param "enableToc") ($.Param "toc") }}
+{{ if and (or ($.Param "enableToc") ($.Param "toc")) (ne ($.Param "tocPosition") "outer") }}
 
 <section class="sidebar">
   <div class="toc__flexbox" data-position="{{ if $.Param "hideToc" }}absolute{{ else }}fixed{{ end }}">