readme changed, new shortcodes, new param

new param
- wideViewAsDefault
new shortcode
- codeblock
- tab

README.md

@@ -1,383 +1,24 @@
-## Zdoc theme for Hugo
+## 📄 Documentation
 
-I'll document all the updates soon.
+[https://zzo-docs.vercel.app/zdoc](https://zzo-docs.vercel.app/zdoc)
 
-## Table of contents
+## ❤️ Sponsor
 
-* [Features](#features)
-* [Minimum Hugo version](#minimum-hugo-version)
-* [Installation](#installation)
-* [Updating](#updating)
-* [Run example site](#run-example-site)
-* [Configuration](#configuration)
-* [How to make Doc](#how-to-make-doc)
-* [Multi Language](#multi-language)
-* [Favicon](#favicon)
-* [Shortcodes](#shortcodes)
+Your support will be of great help in maintaining the project.
 
-## Features
+<a href="https://www.buymeacoffee.com/zzossig" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
+
+## 💡 Features
 
 * Dark mode
-* A mobile menu
-* Simple documentation
+* Mobile menu
 * Search
 * Search Engine Optimization(SEO)
 * Multilingual (i18n)
 * Responsive design
+* Fast code highlighting
+* Blog support
 
 ## Minimum Hugo version
 
-Hugo version 0.60.0 or higher is required.
-
-## Installation
-
-First of all, You need to add config files.
-Follow the [Configuration](#configuration) step.
-
-Then, You can download and unpack the theme manually from Github but it's easier to use git to clone the repo.
-
-From the root of your site:
-
-```bash
-$ git clone https://github.com/zzossig/hugo-theme-zdoc.git themes/zdoc
-```
-
-If you use git to version control your site, highly recommended, it's best to add the zdoc theme as a submodule.
-
-From the root of your site:
-
-```bash
-git submodule add https://github.com/zzossig/hugo-theme-zdoc.git themes/zdoc
-```
-
-## Updating
-
-From the root of your site:
-
-```bash
-git submodule update --remote --merge
-```
-
-## Run example site
-
-From the root of themes/zdoc/exampleSite:
-
-```bash
-hugo server --themesDir ../..
-```
-
-## Configuration
-
-0. From the root of your site: delete config.toml file and add the files below
-
-1. config folder structure. Keep in mind the underscore on the `_default` folder
-
-```bash
-root
-├── config
-│   ├── _default
-│   │   ├── config.toml
-│   │   ├── languages.toml
-│   │   ├── menus.en.toml
-│   │   ├── params.toml
-```
-
-2. config.toml
-
-```bash
-baseURL = "http://example.org"
-title = "Hugo ZDoc Theme"
-theme = "zdoc"
-
-defaultContentLanguage = "en"
-defaultContentLanguageInSubdir = true
-hasCJKLanguage = true
-
-copyright = "&copy;{year}, All Rights Reserved"
-timeout = 10000
-enableEmoji = true
-paginate = 13
-rssLimit = 100
-
-googleAnalytics = ""
-
-[markup]
-  [markup.goldmark]
-    [markup.goldmark.renderer]
-      hardWraps = true
-      unsafe = true
-      xHTML = true
-  [markup.highlight]
-    codeFences = true
-    lineNos = true
-    lineNumbersInTable = true
-    noClasses = false
-  [markup.tableOfContents]
-    endLevel = 4
-    ordered = false
-    startLevel = 2
-
-[outputs]
-  home = ["HTML", "RSS", "JSON"]
-
-[taxonomies]
-  tag = "tags"
-```
-
-3. languages.toml
-
-```bash
-[en]
-  title = "Hugo ZDoc Theme"
-  languageName = "English"
-  weight = 1
-
-[ko]
-  title = "Hugo ZDoc Theme"
-  languageName = "한국어"
-  weight = 2
-```
-
-4. menus.en.toml
-
-You shoud make your own menu.
-
-```bash
-[[main]]
-  identifier = "docs"
-  name = "Docs"
-  url = "docs"
-  weight = 1
-
-[[main]]
-  identifier = "updates"
-  name = "Updates"
-  url = "updates"
-  weight = 2
-
-[[main]]
-  identifier = "blog"
-  name = "Blog"
-  url = "blog"
-  weight = 3
-...
-```
-
-5. params.toml
-
-```bash
-logo = true # Logo that appears in the site navigation bar.
-logoText = "ZDoc" # Logo text that appears in the site navigation bar.
-logoType = "short" # long, short
-description = "The ZDoc theme for Hugo example site." # for SEO
-
-themeOptions = ["light", "dark"] # select options for site color theme
-
-useFaviconGenerator = true # https://www.favicon-generator.org/
-
-enableSearch = true
-enableLangChange = true
-enableDarkMode = true
-enableBreadcrumb = true
-enableToc = true
-enableMenu = true
-enableNavbar = true
-enableFooter = true
-showPoweredBy = true
-
-paginateWindow = 1 # setting it to 1 gives 7 buttons, 2 gives 9, etc. If set 1: [1 ... 4 5 6 ... 356] [1 2 3 4 5 ... 356] etc
-taxoPaginate = 13 # items per page
-taxoGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
-
-github = "https://github.com/zzossig/hugo-theme-zdoc"
-```
-
-## How to make doc
-
-1. Make a folder in the `content` folder. The folder will be appeared in the menu. I'm going to make `doc` folder.
-
-2. Make a `_index.md` file in the `doc` folder.
-
-```yaml
----
-title: "Documentation"
-description: "test doc index"
-date: 2020-01-11T14:09:21+09:00
----
-
-The content here is appeared when you click the manu. So called overview page.
-```
-
-3. There are two types of pages. One is a single page and the other is collapsible page.
-
-- single page - Just make a md file in the `doc` folder
-
-    ```yaml
-    ---
-    title: "Content Formats"
-    description: "test post"
-    date: 2020-01-28T00:38:51+09:00
-    draft: false
-    weight: 1
-    ---
-
-  *Markdown here*
-
-  ```
-
-- collapsible page - We need to make a new folder inside the doc folder. I'll make a folder named `gettingstarted`. And then, make a `_index.md` file.
-
-    `root/content/doc/gettingstarted/_index.md`
-
-    ```yaml
-    ---
-    title: "Getting started"
-    description: "test post index"
-    date: 2020-01-28T00:36:39+09:00
-    draft: false
-    weight: 2
-    collapsible: true
-    ---
-
-    ```
-    
-    The weight defines the order of the post. If the `collapsible` param set `true`, you can see the menu that can be collapsible.
-
-- Make more pages in the collapsible section. Something like `Getting Started`, `Installation`, `Basic usage`, etc... For example, make a file at `root/content/doc/gettingstarted/installation.md`
-
-    ```yaml
-    ---
-    title: "Frontmatter"
-    description: "test post"
-    date: 2020-01-28T00:36:14+09:00
-    draft: false
-    ---
-
-    *Markdown here*
-
-    ```
-
-4. Finally, make a menu in the file at `root/config/_default/menus.en.toml`.
-
-You should make your own menu.
-
-```toml
-[[main]]
-  identifier = "docs"
-  name = "Docs"
-  url = "docs"
-  weight = 1
-
-[[main]]
-  identifier = "updates"
-  name = "Updates"
-  url = "updates"
-  weight = 2
-
-[[main]]
-  identifier = "blog"
-  name = "Blog"
-  url = "blog"
-  weight = 3
-```
-
-## Multi Language
-
-The default language of this theme is English. If you want to use another language, follow these steps
-
-1. Make a menu file.
-
-```bash 
-root
-├── config
-│   ├── _default
-│   │   ├── ...
-│   │   ├── menus.ko.toml
-```
-
-```bash
-config/_default/menus.ko.toml
-
-[[main]]
-  identifier = "about"
-  name = "about"
-  url = "/about/"
-  weight = 1
-
-[[main]]
-    identifier = "archive"
-    name = "archive"
-    url = "/archive/"
-    weight = 2
-...
-```
-
-2. Make a content file. Add your language code before the md extension.
-
-```bash
-hugo new about/index.ko.md
-hugo new posts/markdown-syntax.ko.md
-...
-```
-
-3. Make an i18n file.
-
-```bash
-i18n/ko.toml
-
-[search-placeholder]
-other = "검색..."
-
-[summary-dateformat]
-other = "2006년 01월 02일"
-
-[tags]
-other = "태그"
-
-...
-```
-
-4. Edit config.toml file.
-
-```bash
-defaultContentLanguage = "ko"
-defaultContentLanguageInSubdir = true
-hasCJKLanguage = true
-```
-
-## Favicon
-
-Put your `favicon.ico` file under the static folder. The filename should be `favicon` and the extension should be `ico`.
-
-### Using favicon-genarator
-
-If you want to support mobile favicon, use [favicon-generator](https://www.favicon-generator.org/).
-
-- Make favicons from favicon-generator site.
-- Make a folder at `root/static/favicon`
-- Unzip the generated favicon to that folder.
-- Set the config param `useFaviconGenerator` to `true`
-
-## Shortcodes
-
-### alert
-
-```bash
-{{< alert theme="warning" >}} # warning, success, info, danger
-**this** is a text
-{{< /alert >}}
-```
-
-### expand
-
-```bash
-{{< expand "Expand me" >}}Some Markdown Contents{{< /expand >}}
-```
-
-### notice
-
-```bash
-{{< notice success "This is title" >}} # success, info, warning, error
-success
-{{< /notice >}}
-```
+Hugo version 0.65.0 or higher is required.

assets/sass/components/_alert.scss

@@ -1,6 +1,5 @@
 .alert {
     padding: 0.75rem;
-    margin-bottom: 1rem;
     border: 1px solid transparent;
     border-radius: 0.125rem;
 

assets/sass/components/_box.scss

@@ -0,0 +1,13 @@
+.box {
+  font-size: 0.925rem;
+  font-family: $title-font;
+  word-break: keep-all;
+  padding: 0.5rem;
+  margin: 2rem 1rem;
+  border-radius: 0.5rem;
+
+  @include themify($themes) {
+    border: 1px solid themed('content-box-border-color');
+    background-color: themed('content-box-background-color');
+  }
+}

assets/sass/components/_codetab.scss

@@ -33,10 +33,10 @@
     
     @include transition(all, 0.2s, ease-in);
     @include themify($themes) {
-      color: themed('navbar-title-color');
+      color: themed('title-color');
       border-top: 1px solid transparent;
       &.active {
-        border-top: 1px solid themed('content-pre-header-background-color');
+        border-top: 1px solid themed('title-color');
       }
     }
 

assets/sass/components/_expand.scss

@@ -5,6 +5,7 @@
   &__content {
     overflow: hidden;
     max-height: 0;
+    margin: 0 1rem;
     border-bottom-left-radius: 0.25rem;
     border-bottom-right-radius: 0.25rem;
 
@@ -45,12 +46,14 @@
     border: none;
     font-size: 1rem;
     font-family: $title-font;
+    margin: 0.5rem 0;
 
     @include flexbox();
     @include align-items(center);
     @include themify($themes) {
       color: inherit;
       border-top: 1px solid themed('border-line-color');
+      border-bottom: 1px solid themed('border-line-color');
       background-color: themed('expand-background-color');
       @include on-event {
         background-color: themed('expand-background-color-hover');

assets/sass/components/_menu.scss

@@ -19,7 +19,6 @@
     font-size: 1rem;
     margin: 0.65rem 0;
     padding-bottom: 0.5rem;
-    text-transform: capitalize;
 
     @include themify($themes) {
       color: themed('toc-label-color');

assets/sass/components/_notice.scss

@@ -2,7 +2,7 @@
     position: relative;
     border-radius: .125rem;
     color: #fff;
-    margin: 2rem 0;
+    margin: 0 1rem;
     padding: .3rem 0.5rem .3rem 2rem;
     font-size: 0.95rem;
 
@@ -18,13 +18,13 @@
     }
 
     &.warning {
-        border-top: 30px solid #f1b37e;
+        border-top: 30px solid #ffca28;
         background: #fefaf5;
-        color: rgba(150, 90, 38, 0.995) !important;
+        color: #161209;
 
         &::before {
           position: absolute;
-          content: url("data:image/svg+xml,%0A%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='21px' height='21px'%3E%3Cpath fill='#fefaf5' d='M 12 3.0292969 C 11.436813 3.0292969 10.873869 3.2917399 10.558594 3.8164062 L 1.7617188 18.451172 C 1.1134854 19.529186 1.94287 21 3.2011719 21 L 20.796875 21 C 22.054805 21 22.886515 19.529186 22.238281 18.451172 L 13.441406 3.8164062 C 13.126131 3.29174 12.563187 3.0292969 12 3.0292969 z M 12 5.2988281 L 20.236328 19 L 3.7636719 19 L 12 5.2988281 z M 11 9 L 11 14 L 13 14 L 13 9 L 11 9 z M 11 16 L 11 18 L 13 18 L 13 16 L 11 16 z'/%3E%3C/svg%3E");
+          content: url("data:image/svg+xml,%0A%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='21px' height='21px'%3E%3Cpath fill='#f57f17' d='M 12 3.0292969 C 11.436813 3.0292969 10.873869 3.2917399 10.558594 3.8164062 L 1.7617188 18.451172 C 1.1134854 19.529186 1.94287 21 3.2011719 21 L 20.796875 21 C 22.054805 21 22.886515 19.529186 22.238281 18.451172 L 13.441406 3.8164062 C 13.126131 3.29174 12.563187 3.0292969 12 3.0292969 z M 12 5.2988281 L 20.236328 19 L 3.7636719 19 L 12 5.2988281 z M 11 9 L 11 14 L 13 14 L 13 9 L 11 9 z M 11 16 L 11 18 L 13 18 L 13 16 L 11 16 z'/%3E%3C/svg%3E");
           top: -26.5px;
           left: 0.4rem;
           height: 100%;
@@ -34,9 +34,11 @@
           position: absolute;
           content: attr(data-title);
           font-family: $title-font;
+          font-weight: bold;
           top: -26.5px;
           left: 2rem;
           height: 100%;
+          color: #424242;
         }
 
         a {
@@ -74,11 +76,11 @@
     &.error {
         border-top: 30px solid #d58181;
         background: #fbeded;
-        color: rgba(132, 56, 56, 0.995) !important;
+        color: #161209;
 
         &::before {
           position: absolute;
-          content: url("data:image/svg+xml,%0A%3C%3Fxml version='1.0'%3F%3E%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='21px' height='21px'%3E%3Cpath fill='#fbeded' d='M 5 3 C 3.895 3 3 3.895 3 5 L 3 19 C 3 20.105 3.895 21 5 21 L 19 21 C 20.105 21 21 20.105 21 19 L 21 5 C 21 3.895 20.105 3 19 3 L 5 3 z M 5 5 L 19 5 L 19 19 L 5 19 L 5 5 z M 8.4101562 7 L 7 8.4101562 L 10.589844 12 L 7 15.589844 L 8.4101562 17 L 12 13.410156 L 15.589844 17 L 17 15.589844 L 13.410156 12 L 17 8.4101562 L 15.589844 7 L 12 10.589844 L 8.4101562 7 z'/%3E%3C/svg%3E");
+          content: url("data:image/svg+xml,%0A%3C%3Fxml version='1.0'%3F%3E%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='21px' height='21px'%3E%3Cpath fill='#b71c1c' d='M 5 3 C 3.895 3 3 3.895 3 5 L 3 19 C 3 20.105 3.895 21 5 21 L 19 21 C 20.105 21 21 20.105 21 19 L 21 5 C 21 3.895 20.105 3 19 3 L 5 3 z M 5 5 L 19 5 L 19 19 L 5 19 L 5 5 z M 8.4101562 7 L 7 8.4101562 L 10.589844 12 L 7 15.589844 L 8.4101562 17 L 12 13.410156 L 15.589844 17 L 17 15.589844 L 13.410156 12 L 17 8.4101562 L 15.589844 7 L 12 10.589844 L 8.4101562 7 z'/%3E%3C/svg%3E");
           top: -26.5px;
           left: 0.4rem;
           height: 100%;
@@ -88,9 +90,11 @@
           position: absolute;
           content: attr(data-title);
           font-family: $title-font;
+          font-weight: bold;
           top: -26.5px;
           left: 2rem;
           height: 100%;
+          color: #424242;
         }
 
         a {
@@ -128,11 +132,11 @@
     &.info {
         border-top: 30px solid #6bb1e0;
         background: #e6f3fb;
-        color: rgba(47, 103, 141, 0.995) !important;
+        color: #161209;
 
         &::before {
             position: absolute;
-            content: url("data:image/svg+xml,%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='21px' height='21px'%3E%3Cpath fill='#e6f3fb' d='M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 11 7 L 11 9 L 13 9 L 13 7 L 11 7 z M 11 11 L 11 17 L 13 17 L 13 11 L 11 11 z'/%3E%3C/svg%3E");
+            content: url("data:image/svg+xml,%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='21px' height='21px'%3E%3Cpath fill='#01579b' d='M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 11 7 L 11 9 L 13 9 L 13 7 L 11 7 z M 11 11 L 11 17 L 13 17 L 13 11 L 11 11 z'/%3E%3C/svg%3E");
             top: -26.5px;
             left: 0.4rem;
             height: 100%;
@@ -142,9 +146,11 @@
           position: absolute;
           content: attr(data-title);
           font-family: $title-font;
+          font-weight: bold;
           top: -26.5px;
           left: 2rem;
           height: 100%;
+          color: #424242;
         }
 
         a {
@@ -182,11 +188,11 @@
     &.success {
         border-top: 30px solid #84c578;
         background: #e8f7e6;
-        color: rgba(72, 125, 63, 0.995) !important;
+        color: #161209;
 
         &::before {
           position: absolute;
-          content: url("data:image/svg+xml,%0A%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='21px' height='21px'%3E%3Cpath fill='#e8f7e6' d='M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 16.292969 8.2929688 L 10 14.585938 L 7.7070312 12.292969 L 6.2929688 13.707031 L 10 17.414062 L 17.707031 9.7070312 L 16.292969 8.2929688 z'/%3E%3C/svg%3E");
+          content: url("data:image/svg+xml,%0A%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='21px' height='21px'%3E%3Cpath fill='#1b5e20' d='M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 16.292969 8.2929688 L 10 14.585938 L 7.7070312 12.292969 L 6.2929688 13.707031 L 10 17.414062 L 17.707031 9.7070312 L 16.292969 8.2929688 z'/%3E%3C/svg%3E");
           top: -26.5px;
           left: 0.4rem;
           height: 100%;
@@ -196,9 +202,11 @@
           position: absolute;
           content: attr(data-title);
           font-family: $title-font;
+          font-weight: bold;
           top: -26.5px;
           left: 2rem;
           height: 100%;
+          color: #424242;
         }
 
         a {

assets/sass/components/_switch.scss

@@ -22,13 +22,21 @@
 
   &__abs {
     position: absolute;
-    left: -75px;
-    top: -16px;
     z-index: z('menu');
     width: 50px;
     height: 50px;
     margin: auto 0;
 
+    &[data-dir="rtl"] {
+      right: -75px;
+      top: -16px;
+    }
+
+    &[data-dir="ltr"] {
+      left: -75px;
+      top: -16px;
+    }
+
     @include themify($themes) {
       color: themed('landing-button-default');
       @include on-event {

assets/sass/components/_toc.scss

@@ -2,15 +2,21 @@
   position: -webkit-sticky;
   position: sticky;
   top: $grid-nav-height;
-  padding: 0.5rem;
-  margin: 0.5rem;
+  padding: 0.25rem;
+  margin: 0.25rem;
   margin-top: 0;
   padding-top: 1.25rem;
   height: calc(100vh - $grid-nav-height);
-  overflow-y: auto;
+  overflow: auto;
   font-size: 0.85rem;
   z-index: z('toc');
+  max-height: 100vh;
+
   @include no-select;
+  @include themify($themes) {
+    @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'));
+  }
   
   #TableOfContents {
     position: relative;
@@ -60,7 +66,7 @@
   ul {
     li {
       li {
-        margin-left: 0.85rem;
+        margin-left: 0.6rem;
       }
     }
   }

assets/sass/layout/_grid.scss

@@ -34,7 +34,7 @@
 .divider {
     display: grid;
     height: 100%;
-    grid-template-columns: minmax(200px, 240px) minmax(350px, 769px) minmax(200px, 240px);
+    grid-template-columns: minmax(200px, 240px) minmax(350px, 769px) minmax(240px, 320px);
     grid-template-rows: auto;
     grid-column-gap: 0px;
     grid-row-gap: 0px;

assets/sass/layout/_navbar.scss

@@ -66,7 +66,7 @@
       @include themify($themes) {
         color: themed('navbar-menu-color');
         &.active {
-          font-weight: bold;
+          // font-weight: bold;
           color: themed('active-font-color');
         }
       }

assets/sass/main.scss

@@ -51,6 +51,7 @@ $light-nav-icon-color: {{ .Site.Data.color.light_nav_icon_color }};
 @import 'components/alert';
 @import 'components/tab';
 @import 'components/codetab';
+@import 'components/box';
 
 @import 'layout/grid';
 @import 'layout/footer';

assets/sass/pages/_single.scss

@@ -57,8 +57,8 @@
       overflow: hidden;
     }
 
-    & > p > a {
-      text-decoration: underline;
+    & > p {
+      margin: 0 0 1rem 0;
     }
 
     margin: 1rem 0;
@@ -135,11 +135,14 @@
 
       @include themify($themes) {
         border-top: 1px solid themed('border-line-color');
-        border-bottom: 1px solid themed('border-line-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'));
       }
+
+      @include themify($codeblock) {
+        background-color: themed('content-pre-background-color');
+      }
     }
 
     pre:not(.chroma) {
@@ -147,7 +150,7 @@
       margin: 1rem 0;
 
       @include themify($codeblock) {
-        border-left: 4px solid themed('content-pre-border-background-color');
+        border: 1px solid themed('content-pre-border-background-color');
       }
     }
 
@@ -165,6 +168,7 @@
       padding: 0.25rem 0.5rem;
       @include themify($codeblock) {
         color: themed('content-code-color');
+        background-color: themed('content-code-background-color');
       }
     }
 
@@ -179,12 +183,18 @@
       position: relative;
       
       @include themify($themes) {
-          border-left: 5px solid themed("single-blockquote-border-color");
+        border-left: 5px solid themed("single-blockquote-border-color");
       }
 
       code:not([class^=language]) {
         padding: 3px 7px;
         margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-in-pre-color');
+        }
+      }
+
+      p > code:not([class^=language]) {
         @include themify($codeblock) {
           color: themed('content-code-color');
         }
@@ -198,7 +208,6 @@
     }
 
     p {
-      margin: 0 0 10px 0;
       padding: 0 1rem;      
 
       code:not([class^=language]) {
@@ -224,22 +233,37 @@
 
     &[data-dir="ltr"] {
       li {
-        margin-left: 2rem;
+        margin-left: 3rem;
       }
     }
 
     &[data-dir="rtl"] {
       li {
-        margin-right: 2rem;
+        margin-right: 3rem;
       }
     }
 
     li {
       & > code {
         padding: 2px 7px;
+
+        @include themify($codeblock) {
+          color: themed('content-code-color') !important;
+          background-color: themed('content-code-background-color');
+        }
+      }
+
+      & > p {
+        padding: 0 0.4rem;
       }
 
       code:not([class^=language]) {
+        @include themify($codeblock) {
+          color: themed('content-code-in-pre-color');
+        }
+      }
+      
+      p > code:not([class^=language]) {
         @include themify($codeblock) {
           color: themed('content-code-color');
         }
@@ -298,12 +322,17 @@
           }
 
           th {
-            color: themed('content-pre-header-color');            
+            color: themed('content-pre-header-color');
           }
 
           th, td {
             padding: 0.25rem 0.5rem;
             border: 1px double themed('content-pre-border-background-color');
+
+            code {
+              color: themed('content-code-color') !important;
+              background-color: themed('content-code-background-color');
+            }
           }
         }
       }
@@ -311,6 +340,12 @@
       code:not([class^=language]) {
         padding: 3px 7px;
         margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-in-pre-color');
+        }
+      }
+
+      p > code:not([class^=language]) {
         @include themify($codeblock) {
           color: themed('content-code-color');
         }
@@ -332,7 +367,7 @@
 }
 
 code, pre {
-  padding: 0.25rem 0.5rem;
+  padding: 0.25rem 1rem;
   line-height: 1.5;
   font-family: $code-font-stack;
   overflow: auto;
@@ -363,7 +398,7 @@ code:not([class^=language]) {
   padding: 3px 0;
   border-radius: 4px;
   @include themify($codeblock) {
-    color: themed('content-code-color');
+    color: themed('content-code-in-pre-color');
   }
 }
 
@@ -390,15 +425,14 @@ pre:not(.chroma) {
     left: 0;
     padding: 2px 7px;
     width: 100%;
-    height: 20px;
     z-index: z('toc'); 
     border-top-left-radius: 0.25rem;
     border-top-right-radius: 0.25rem;
     content: '';
 
     @include themify($codeblock) {
-        color: themed('content-pre-header-color');
-        background: themed('content-pre-header-background-color');
+      color: themed('content-pre-header-color');
+      background: themed('content-pre-header-background-color');
     }
   }
 }
@@ -424,7 +458,7 @@ pre:not(.chroma) {
       top: 0;
       right: 0;
       z-index: z('grid');
-      height: 25px;
+      height: 26px;
       width: 100%;
       display: inline-block;
       text-align: right;
@@ -442,19 +476,18 @@ pre:not(.chroma) {
       right: 0;
       z-index: z('clipboard');
       padding: 0.125rem 0.25rem;
-      height: 25px;
+      height: 26px;
       font-family: $title-font;
       font-weight: bold;
       font-size: 0.85rem;
       line-height: 1.5;
       display: inline-block;
-      text-transform: capitalize;
       border-top-left-radius: 0.2rem;
       content: attr(data-lang);
 
       @include themify($themes) {
-        border-top: 1px solid themed('hr-color');
-        border-left: 1px solid themed('hr-color');
+        border: 1px solid themed('border-line-color');
+        border-bottom: none;
       }
 
       @include themify($codeblock) {
@@ -499,9 +532,7 @@ pre:not(.chroma) {
     }
 
     @include themify($codeblock) {
-      td:first-child {
-        border-left: 4px solid themed('content-pre-border-background-color');
-      }
+      border: 1px solid themed('content-pre-border-background-color');
     }
   }
 }
@@ -528,4 +559,4 @@ table:not(.lntable) {
       padding: 2px 7px !important;
     }
   }
-}
+}

assets/sass/themes/_dark.scss

@@ -40,11 +40,13 @@ $dark: (
   breadcrumb-background-color: #2D2A2E,
   single-hr-background-color: #727072,
   single-blockquote-border-color: #FCFCFA,
-  single-contents-title-color: #ccc,
+  single-contents-title-color: #FCFCFA,
   single-header-title-background-color: #212121,
   single-contents-subtitle-color: #FCFCFA,
   expand-background-color: darken(#2D2A2E, 2%),
   expand-background-color-hover: #212121,
   tag-num-background-color: #595B5C,
   tag-text-background-color: #595B5C,
+  content-box-border-color: #616161,
+  content-box-background-color: #403E41,
 );

assets/sass/themes/_darkcode.scss

@@ -1,9 +1,11 @@
 $darkcode: (
-  content-code-color: #fcfcfa,
+  content-code-color: #f48fb1,
+  content-code-in-pre-color: #fcfcfa,
+  content-code-background-color: #ffe56433,
   content-pre-color: #eee,
   content-pre-number-color: #666,
   content-pre-background-color: #2A2C37,
-  content-pre-header-background-color: #1D1E26,
-  content-pre-border-background-color: #595B5C,
+  content-pre-border-background-color: rgba(243, 242, 241, 0.1),
+  content-pre-header-background-color: #262838,
   content-pre-header-color: #FCFCFA,
 );

assets/sass/themes/_light.scss

@@ -42,9 +42,11 @@ $light: (
   single-hr-background-color: #bdbdbd,
   single-blockquote-border-color: #bdbdbd,
   single-header-title-background-color: #eee,
-  single-contents-title-color: #607d8b,
+  single-contents-title-color: lighten(#424242, 4%),
   expand-background-color: #f7f8f9,
   expand-background-color-hover: darken(#f7f8f9, 3%),
   tag-num-background-color: #bdbdbd,
   tag-text-background-color: #eee,
+  content-box-border-color: #aaa,
+  content-box-background-color: #eeeeee,
 );

assets/sass/themes/_lightcode.scss

@@ -1,9 +1,11 @@
 $lightcode: (
-  content-code-color: #607d8b,
+  content-code-color: #344952,
+  content-code-in-pre-color: #607d8b,
+  content-code-background-color: #ffe56433,
   content-pre-color: #344952,
   content-pre-number-color: #aaa,
-  content-pre-background-color: #f7f8f9,
-  content-pre-border-background-color: darken(#eceff1, 7%),
-  content-pre-header-background-color: darken(#eceff1, 3.5%),
+  content-pre-background-color: #eceff1,
+  content-pre-border-background-color: rgba(12, 13, 14, 0.1),
+  content-pre-header-background-color: #e2e6e9,
   content-pre-header-color: #344952,
 );

layouts/blog/single.html

@@ -23,11 +23,13 @@
   </div>
 </div>
 
+{{ partial "script/codeblock-script.html" . }}
 {{ partial "script/single-script.html" . }}
+
 <script>
-  var listSide = document.getElementById('list-side');
-  var listMain = document.getElementById('list-main');
   var singleMenu = document.getElementById('single-menu');
+  var listMain = document.getElementById('list-main');
+  var listSide = document.getElementById('list-side');
   var wideViewAsDefault = JSON.parse({{ $wideViewAsDefault | jsonify }});
 
   enquire.register("screen and (max-width:1280px)", {

layouts/partials/head/scripts.html

@@ -25,10 +25,13 @@
 <script>
   "use strict";
 
-  {{ $languagedir := ($.Param "languagedir" | default "ltr") }}
-  var languagedir = JSON.parse({{ $languagedir | jsonify }});
-
   window.onload = function() {
+    {{ $languagedir := ($.Param "languagedir" | default "ltr") }}
+    var languagedir = JSON.parse({{ $languagedir | jsonify }});
+    {{ $baseurl := $.Site.BaseURL }}
+    var baseurl = JSON.parse({{ $baseurl | jsonify }});
+    {{ $permalink := .Permalink }}
+    var permalink = JSON.parse({{ $permalink | jsonify }});
 
     // ==================== toc visibility ========================
     var toggleSidebarElem = document.getElementById("toggle-sidebar");
@@ -255,13 +258,11 @@
 
         var parent = elem.parentNode;
         while (parent.classList.contains('menu__list') && parent.classList.contains('active')) {
-          console.log('parent');
           parent.style.maxHeight = 100 * parent.children.length + "px";
           parent = parent.parentNode;
         }
 
         if (content.style.maxHeight) {
-          console.log('null');
           content.style.maxHeight = null;
           content.classList.remove('active');
           menuTitleIcon.classList.add('right');
@@ -272,7 +273,6 @@
             menuTitleIcon.classList.remove('down');
           }
         } else {
-          console.log('scrollHeight');
           content.style.maxHeight = content.scrollHeight + "px";
           content.classList.add('active');
           menuTitleIcon.classList.remove('right');
@@ -554,10 +554,6 @@
 
 
   // ========================== search ==========================
-    {{ $baseurl := $.Site.BaseURL }}
-    var baseurl = JSON.parse({{ $baseurl | jsonify }});
-    {{ $permalink := .Permalink }}
-    var permalink = JSON.parse({{ $permalink | jsonify }});
     {{ $langprefix := $.Site.LanguagePrefix }}
     var langprefix = JSON.parse({{ $langprefix | jsonify }});
     var searchResults = null;
@@ -934,7 +930,6 @@
       var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
       dropdownItems ? dropdownItems.forEach(function (item) {
         item.addEventListener('mousedown', function (e) {
-          console.log('mousedown');
           e.target.click();
         });
       }) : null;
@@ -970,7 +965,6 @@
       var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
       dropdownItems ? dropdownItems.forEach(function (item) {
         item.addEventListener('mousedown', function (e) {
-          console.log('mousedown');
           e.target.click();
         });
       }) : null;
@@ -1057,7 +1051,6 @@
       var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
       dropdownItems ? dropdownItems.forEach(function (item) {
         item.addEventListener('mousedown', function (e) {
-          console.log('mousedown');
           e.target.click();
         });
       }) : null;

layouts/partials/main/component/toggle-menu.html

@@ -1,5 +1,5 @@
 {{ if $.Param "enableWideBlogSwitch" }}
-  <label class="switch switch__abs">
+  <label class="switch switch__abs" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
     {{ if ($.Param "wideViewAsDefault") }}
       <input id="toggle-menu" aria-label="Toggle Menu Visibility" type="checkbox" />
       <span class="slider">

layouts/partials/main/component/toggle-sidebar.html

@@ -4,20 +4,20 @@
       <input id="toggle-sidebar" aria-label="Toggle Sidebar Visibility" type="checkbox" />
       <span class="slider">
         <span class="slider__icon {{ if (ne ($.Param "languagedir") "rtl") }}{{ else }}hide{{ end }}">
-          {{ partial "svgs/arrow-forward.svg" (dict "width" 20 "height" 20) }}
+          {{ partial "svgs/arrow-back.svg" (dict "width" 20 "height" 20) }}
         </span>
         <span class="slider__icon {{ if (ne ($.Param "languagedir") "rtl") }}hide{{ end }}">
-          {{ partial "svgs/arrow-back.svg" (dict "width" 20 "height" 20) }}
+          {{ partial "svgs/arrow-forward.svg" (dict "width" 20 "height" 20) }}
         </span>
       </span>
     {{ else }}
       <input id="toggle-sidebar" aria-label="Toggle Sidebar Visibility" type="checkbox" checked />
       <span class="slider">
         <span class="slider__icon {{ if (ne ($.Param "languagedir") "rtl") }}{{ else }}hide{{ end }}">
-          {{ partial "svgs/arrow-back.svg" (dict "width" 20 "height" 20) }}
+          {{ partial "svgs/arrow-forward.svg" (dict "width" 20 "height" 20) }}
         </span>
         <span class="slider__icon {{ if (ne ($.Param "languagedir") "rtl") }}hide{{ end }}">
-          {{ partial "svgs/arrow-forward.svg" (dict "width" 20 "height" 20) }}
+          {{ partial "svgs/arrow-back.svg" (dict "width" 20 "height" 20) }}
         </span>
       </span>
     {{ end }}

layouts/partials/main/list.html

@@ -1,3 +1,4 @@
+{{ $wideViewAsDefault := $.context.Param "wideViewAsDefault" }}
 <div class="mid">
   <div class="divider">
 
@@ -7,7 +8,7 @@
       {{ end }}
     </nav>
 
-    <article id="list-main" class="m" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
+    <article id="list-main" class="{{ if $wideViewAsDefault }}mr{{ else }}m{{ end }}" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
       {{ partial "main/sections/list-main.html" .context }}
       {{ if .section_to_display }}
         {{ partial "main/sections/list-section.html" (dict "section_to_display" .section_to_display) }}
@@ -15,53 +16,73 @@
       {{ partial "main/component/pagination-single.html" .context }}
     </article>
 
-    <section id="list-side" class="r" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
+    <section id="list-side" class="{{ if $wideViewAsDefault }}hide{{ else }}r{{ end }}" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
     </section>
 
   </div>
 </div>
 
 <script>
-  var listSide = document.getElementById('list-side');
-  var listMain = document.getElementById('list-main');
   var listMenu = document.getElementById('list-menu');
+  var listMain = document.getElementById('list-main');
+  var listSide = document.getElementById('list-side');
   var switchElem = document.querySelector('.switch');
+  var wideViewAsDefault = JSON.parse({{ $wideViewAsDefault | jsonify }});
 
   enquire.register("screen and (max-width:1280px)", {
     match: function () {
-      listSide.className = 'r';
-      listMain.className = 'm';
-      listMenu.className = 'l';
+      if (wideViewAsDefault) {
+        listMenu.className = 'l';
+        listMain.className = 'mr';
+        listSide.className = 'hide';
+      } else {
+        listMenu.className = 'l';
+        listMain.className = 'm';
+        listSide.className = 'r';
+      }
     },
     unmatch: function () {
-      listSide.className = 'r';
-      listMain.className = 'm';
-      listMenu.className = 'l';
+      if (wideViewAsDefault) {
+        listMenu.className = 'l';
+        listMain.className = 'mr';
+        listSide.className = 'hide';
+      } else {
+        listMenu.className = 'l';
+        listSide.className = 'r';
+        listMain.className = 'm';
+      }
     },
   }).register("screen and (max-width:960px)", {
     match: function () {
-      listSide.className = 'hide';
-      listMain.className = 'mr';
       listMenu.className = 'l';
+      listMain.className = 'mr';
+      listSide.className = 'hide';
       switchElem.className = 'hide';
     },
     unmatch: function () {
-      listSide.className = 'r';
-      listMain.className = 'm';
-      listMenu.className = 'l';
+      if (wideViewAsDefault) {
+        listMenu.className = 'l';
+        listMain.className = 'mr';
+        listSide.className = 'hide';
+      } else {
+        listMenu.className = 'l';
+        listMain.className = 'm';
+        listSide.className = 'r';
+      }
+      
       switchElem.className = 'switch';
     },
   }).register("screen and (max-width:600px)", {
     match: function () {
-      listSide.className = 'hide';
-      listMain.className = 'lmr';
       listMenu.className = 'hide';
+      listMain.className = 'lmr';
+      listSide.className = 'hide';
       switchElem.className = 'hide';
     },
     unmatch: function () {
-      listSide.className = 'hide';
-      listMain.className = 'mr';
       listMenu.className = 'l';
+      listMain.className = 'mr';
+      listSide.className = 'hide';
       switchElem.className = 'hide';
     },
   });

layouts/partials/main/sections/single-menu.html

@@ -28,7 +28,7 @@
   {{ $active = or $active (in $currentURL $sectionName1) }}
   
   {{ if $ctx.Params.Collapsible }}
-  <span class="menu__title--collapse {{ if $active }}active{{ end }}" data-depth="{{ $depth }}">
+  <span class="menu__title--collapse {{ if $active }}active{{ end }}" data-depth="{{ $depth }}" data-permalink="{{ $ctx.Permalink }}">
     {{ $ctx.Title }}
     <span class="menu__title--icon {{ if $active }}{{ if eq ($root.Param "languagedir") "rtl" }}downrtl{{ else }}down{{ end }}{{ else }}right{{ end }}">
       {{ if eq ($root.Param "languagedir") "rtl" }}

layouts/partials/main/single.html

@@ -24,7 +24,9 @@
   </div>
 </div>
 
+{{ partial "script/codeblock-script.html" . }}
 {{ partial "script/single-script.html" . }}
+
 <script>
   var listSide = document.getElementById('list-side');
   var listMain = document.getElementById('list-main');
@@ -35,12 +37,10 @@
   enquire.register("screen and (max-width:1280px)", {
     match: function () {
       if (wideViewAsDefault) {
-        console.log(1);
         singleMenu.className = 'l';  
         listMain.className = 'mr';
         listSide.className = 'hide';
       } else {
-        console.log(2);
         singleMenu.className = 'l';
         listMain.className = 'm';
         listSide.className = 'r';
@@ -48,12 +48,10 @@
     },
     unmatch: function () {
       if (wideViewAsDefault) {
-        console.log(3);
         singleMenu.className = 'l';
         listMain.className = 'mr';
         listSide.className = 'hide';
       } else {
-        console.log(4);
         listSide.className = 'r';
         listMain.className = 'm';
         singleMenu.className = 'l';
@@ -61,7 +59,6 @@
     },
   }).register("screen and (max-width:960px)", {
     match: function () {
-      console.log(5);
       singleMenu.className = 'l';
       listMain.className = 'mr';
       listSide.className = 'hide';
@@ -69,12 +66,10 @@
     },
     unmatch: function () {
       if (wideViewAsDefault) {
-        console.log(6);
         singleMenu.className = 'l';
         listMain.className = 'mr';
         listSide.className = 'hide';
       } else {
-        console.log(7);
         singleMenu.className = 'l';
         listMain.className = 'm';
         listSide.className = 'r';
@@ -83,14 +78,12 @@
     },
   }).register("screen and (max-width:600px)", {
     match: function () {
-      console.log(8);
       listSide.className = 'hide';
       listMain.className = 'lmr';
       singleMenu.className = 'hide';
       switchElem.className = 'hide';
     },
     unmatch: function () {
-      console.log(9);
       listSide.className = 'hide';
       listMain.className = 'mr';
       singleMenu.className = 'l';

layouts/partials/script/codeblock-script.html

@@ -0,0 +1,37 @@
+<script>
+  'use strict';
+  // ====================== markdown code block ======================
+  function wrap(el, wrapper) {
+    el.parentNode.insertBefore(wrapper, el);
+    wrapper.appendChild(el);
+  }
+
+  (function () {
+    var singleContentsElem = document.querySelector('.single__contents');
+    singleContentsElem ? 
+    singleContentsElem.querySelectorAll('pre > code').forEach(function(elem) {
+      var dataLang = elem.getAttribute('data-lang');
+      var dataLangWrapper = document.createElement('div');
+      var code = null;
+      var codeTitle = null;
+
+      if (dataLang && dataLang.includes(':')) {
+        code = dataLang.split(':')[0];
+        codeTitle = dataLang.split(':')[1];
+
+        dataLangWrapper.className = 'language-' + code;
+        dataLangWrapper.setAttribute('data-lang', codeTitle);
+
+        elem.className = 'language-' + code;
+        elem.setAttribute('data-lang', codeTitle);
+        elem.setAttribute('id', codeTitle);
+      }
+
+      if (!dataLang || codeTitle) {
+        wrap(elem.parentNode, dataLangWrapper);
+      }
+
+    }) : null;
+  })();
+  // =================================================================
+</script>

layouts/partials/script/single-script.html

@@ -82,6 +82,30 @@
     }
     // =================================================================
 
+
+    // ================ codeblock line number to symbol ================
+    var dollarCodeElem = document.querySelectorAll('div.language-\\$');
+    var gtCodeElem = document.querySelectorAll('div.language-\\>');
+    
+    dollarCodeElem ?
+    dollarCodeElem.forEach(function(elem) {
+      var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
+      lnts ? 
+      lnts.forEach(function(lnt) {
+        lnt.innerHTML = '$<br/>';
+      }) : null;
+    }) : null;
+
+    gtCodeElem ?
+    gtCodeElem.forEach(function(elem) {
+      var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
+      lnts ? 
+      lnts.forEach(function(lnt) {
+        lnt.innerHTML = '><br/>';
+      }) : null;
+    }) : null;
+    // =================================================================
+
     
     // ============================ mermaid ============================
     {{ $lib := .Params.libraries }}

layouts/partials/side/toc.html

@@ -1,7 +0,0 @@
-<aside class="side">
-  <div class="toc__wrapper">
-    <div class="toc">
-      {{ .Content }}
-    </div>
-  </div>
-</aside>

layouts/shortcodes/alert.html

@@ -1,6 +1 @@
-<div class="alert{{- " " -}}{{- if .IsNamedParams -}}
-{{- with .Get "theme" -}}alert-{{.}}{{- else -}}alert-info{{- end -}}
-{{- else -}}
-	{{- with .Get 0 -}}alert-{{.}}{{- else -}}alert-info{{- end -}}
-{{- end -}}
-" role="alert" data-dir="{{ with .Get "dir" }}{{.}}{{ else }}ltr{{ end }}">{{ .Inner | markdownify }}</div>
+<div class="alert {{ with .Get "theme" }}alert-{{.}}{{ end }}" role="alert" data-dir="{{ with .Get "dir" }}{{.}}{{ else }}ltr{{ end }}">{{ .Inner | markdownify }}</div>

theme.toml

@@ -1,11 +1,11 @@
 name = "Zdoc"
 description = "Simple Hugo documentation theme."
-homepage = "https://zzodocs.netlify.com"
+homepage = "https://zzo-docs.vercel.app/zdoc"
 license = "MIT"
 licenselink = "https://github.com/zzossig/hugo-theme-zdoc/blob/master/LICENSE.md"
 tags = ["accessible", "multilingual", "responsive", "documentation", "search", "simple", "light", "dark", "mobile"]
 features = ["accessible", "multilingual", "responsive", "grid", "sass", "search", "fast"]
-min_version = "0.60.0"
+min_version = "0.65.0"
 
 [author]
   name = "zzossig"