release: 3.16.0

* Make long KaTeX equations scrollable in the x-axis

Suggested from: https://katex.org/docs/issues.html, I have tested it adding a long equation and activating a phone user agent.

* refactor: move KaTeX style to article.scss

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,45 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
----
-
-<!-- 
-    Before creating this bug report, make sure you have read the theme documentation: https://docs.stack.jimmycai.com/
--->
-
-## Describe the bug
-A clear and concise description of what the bug is.
-
-## Expected behavior
-A clear and concise description of what you expected to happen.
-
-## To Reproduce
-Indicate the steps to reproduce this bug, if applicable.
-
-## Screenshots
-Add screenshots to help explain your problem.
-
-## Environment
-
-- **Hugo version** [e.g: 0.80.0]: 
-- **Hugo extended?**: Yes / No
-
-## Additional context
-Add any other context about the problem here.
-
-If it's a UI issue, fill the following information:
-
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-## Content of config.yaml
-```yaml
-### Paste the content of the config file here
-```
-
-## Link to the demo site and/or source repository

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,75 @@
+name: Bug Report
+description: File a bug report
+title: "[Bug]: "
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report! Please provide as much information as possible and make sure you have checked the [documentation](https://docs.stack.jimmycai.com/).
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: Also tell us, what did you expect to happen? Please be as detailed as possible, include screenshots and any other information that might help us reproduce the problem.
+      placeholder: Tell us what you see!
+    validations:
+      required: true
+  - type: input
+    id: hugo-version
+    attributes:
+      label: Hugo version
+      description: "What is the version of Hugo you are using? (Note: this theme does not support non-extended version of Hugo)"
+      placeholder: ex. 0.100.0
+    validations:
+      required: true
+  - type: input
+    id: theme-version
+    attributes:
+      label: Theme version
+      description: "What is the version of Stack theme you are using?"
+      placeholder: ex. 3.12.0
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+  - type: input
+    id: browser-info
+    attributes:
+      label: More information about the browser
+      description: "E.g: Browser version, OS version, etc."
+      placeholder: ex. Chrome 104, Windows 11
+    validations:
+      required: false
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant log output
+      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+  - type: markdown
+    attributes:
+      value: |
+        If the issue is not present on the [demo site](https://demo.stack.jimmycai.com), in order to better understand the problem, please provide the link to the source code of your website (not the generated HTML). 
+        Or link to a minimal reproduction of the problem if there are sensible data.
+  - type: input
+    id: bug-url
+    attributes:
+      label: Link to the page with bug
+      placeholder: https://demo.stack.jimmycai.com
+      value: https://demo.stack.jimmycai.com
+    validations:
+      required: true
+  - type: input
+    id: source-repo
+    attributes:
+      label: Link to the source repository
+      placeholder: https://github.com/CaiJimmy/hugo-theme-stack

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Discussions
+    url: https://github.com/CaiJimmy/hugo-theme-stack/discussions
+    about: Please ask and answer questions here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/release-drafter.yml

@@ -1,33 +0,0 @@
-name-template: "v$RESOLVED_VERSION 🌈"
-tag-template: "v$RESOLVED_VERSION"
-categories:
-    - title: "🚀 Features"
-      labels:
-          - "feature"
-          - "enhancement"
-    - title: "🐛 Bug Fixes"
-      labels:
-          - "fix"
-          - "bugfix"
-          - "bug"
-    - title: "🧰 Maintenance"
-      label: "chore"
-    - title: "♻️ Refactor"
-      label: refactor
-change-template: "- $TITLE @$AUTHOR (#$NUMBER)"
-change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
-version-resolver:
-    major:
-        labels:
-            - "major"
-    minor:
-        labels:
-            - "minor"
-    patch:
-        labels:
-            - "patch"
-    default: patch
-template: |
-    ## Changes
-
-    $CHANGES

.github/workflows/hugo-artifact.yml

@@ -1,44 +0,0 @@
-name: Build Hugo Artifact
-
-# Controls when the action will run.
-on:
-    # Triggers the workflow on push or pull request events but only for the master branch
-    push:
-        branches: [master]
-
-    # Allows you to run this workflow manually from the Actions tab
-    workflow_dispatch:
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
-    # This workflow contains a single job called "build"
-    build:
-        # The type of runner that the job will run on
-        runs-on: ubuntu-latest
-
-        # Steps represent a sequence of tasks that will be executed as part of the job
-        steps:
-            # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-            - uses: actions/checkout@v2
-
-            - name: Hugo setup
-              uses: peaceiris/[email protected]
-              with:
-                  # The Hugo version to download (if necessary) and use. Example: 0.58.2
-                  hugo-version: latest # optional, default is latest
-                  # Download (if necessary) and use Hugo extended version. Example: true
-                  extended: true # optional, default is false
-
-            # Runs a set of commands using the runners shell
-            - name: Generate Hugo site
-              run: cd exampleSite && hugo --gc --themesDir ../..
-
-            - name: Upload Hugo artifact
-              uses: actions/[email protected]
-              with:
-                  # Artifact name
-                  name: resources
-                  # A file, directory or wildcard pattern that describes what to upload
-                  path: |
-                    exampleSite/resources
-                    !exampleSite/resources/_gen/images

.github/workflows/release-drafter.yml

@@ -1,16 +0,0 @@
-name: Release Drafter
-
-on:
-  push:
-    # branches to consider in the event; optional, defaults to all
-    branches:
-      - master
-
-jobs:
-  update_release_draft:
-    runs-on: ubuntu-latest
-    steps:
-      # Drafts your next Release notes as Pull Requests are merged into "master"
-      - uses: release-drafter/release-drafter@v5
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -1,7 +1,10 @@
-![Stack](https://i.imgur.com/cCiHOGS.jpg)
+![image](https://user-images.githubusercontent.com/5889006/190859441-141b5f81-8483-40d2-bd96-ebf85616a46d.png)
+
 # Hugo Theme Stack
 
-> Card-style Hugo theme designed for bloggers.
+<img align="right" width="150" alt="logo" src="https://user-images.githubusercontent.com/5889006/190859553-5b229b4f-c476-4cbd-928f-890f5265ca4c.png">
+
+Card-style Hugo theme designed for bloggers.
 
 ## Quickstart
 
@@ -9,45 +12,12 @@ Use this template: [CaiJimmy/hugo-theme-stack-starter](https://github.com/CaiJim
 
 ## Demo
 
-[Example Site](https://demo.stack.jimmycai.com/)
-
-[![Netlify Status](https://api.netlify.com/api/v1/badges/a2d2807a-a905-4bcb-97da-8da8d847da3d/deploy-status)](https://app.netlify.com/sites/hugo-theme-stack/deploys)
+* Stater template demo: [demo.stack.jimmycai.com](https://demo.stack.jimmycai.com)
+* Dev build: [dev.stack.jimmycai.com](https://dev.stack.jimmycai.com)
 
 ## Documentation
 
-[Documentation](https://docs.stack.jimmycai.com/) | [中文文档](https://docs.stack.jimmycai.com/zh/)
-
-## Introduction
-
-Stack is a simple card-style Hugo theme designed for bloggers, some of its features are:
-
-- Responsive images support
-- Lazy load images
-- Dark mode
-- Local search
-- [PhotoSwipe](https://photoswipe.com/) integration
-- Archive page template
-- Full native JavaScript, no jQuery or any other frameworks are used
-- No CSS framework, keep it simple and minimal
-- Properly cropped thumbnails
-- Subsection support
-- Table of contents
-- Multilingual mode and RTL support
-
-## Requirements
-
-It's necessary to use **Hugo Extended ≥ 0.87.0**.
-
-## Installation
-
-* Route 1: Clone / Download this repository to `themes` folder
-* Route 2: Turn your site into a hugo module and add this theme as a module dependency
-
- Edit your site config following `exampleSite/config.yaml`.
-
-*Note: Remove `config.toml` if there is one in the site folder.*
-
-Check [documentation](https://docs.stack.jimmycai.com/) for more details.
+Visit [stack.jimmycai.com](https://stack.jimmycai.com)
 
 ## Copyright
 
@@ -56,33 +26,3 @@ Check [documentation](https://docs.stack.jimmycai.com/) for more details.
 Please do not remove the "*Theme Stack designed by Jimmy*" text and link.
 
 If you want to port this theme to another blogging platform, please let me know🙏.
-
-## Sponsoring
-
-If you like this theme, give it a star, and consider supporting its development:
-
-[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C530AXX)
-
-Your support is greatly appreciated :)
-
-## Thanks to
-
-| Project | Description | Licence |
-| ------- | ----------- | ------- |
-| [PhotoSwipe](https://photoswipe.com/) | For the lightbox effect | [MIT](https://github.com/dimsemenov/PhotoSwipe/blob/master/LICENSE) |
-| [Normalize.css](https://github.com/necolas/normalize.css) | - | [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md) |
-| [Node Vibrant](https://github.com/Vibrant-Colors/node-vibrant) | To extract the color from images | [MIT](https://github.com/Vibrant-Colors/node-vibrant/blob/master/LICENSE.md)
-| [Tabler icons](https://github.com/tabler/tabler-icons) | Default menu icons | [MIT](https://github.com/tabler/tabler-icons/blob/master/LICENSE) |
-| [jonsuh/hamburgers](https://github.com/jonsuh/hamburgers) | Hamburger icon of menu | [MIT](https://github.com/jonsuh/hamburgers/blob/master/LICENSE) |
-| [lepture/yue.css](https://github.com/lepture/yue.css) | Part of it is used for styling article content | MIT |
-| [Typlog](https://typlog.com/) | Where the markdown gallery syntax is borrowed from | The author gave me the permission | 
-| [Pure CSS implementation of Google Photos / 500px image layout](https://github.com/xieranmaya/blog/issues/6) | Used for image gallery | - |
-
-### References
-
-Some references that I took while building this theme:
-
-| Project | Licence|
-| ------- | ------|
-| [artchen/hexo-theme-element](https://github.com/artchen/hexo-theme-element) | [MIT](https://github.com/artchen/hexo-theme-element/blob/master/LICENSE) |
-| [MunifTanjim/minimo](https://github.com/MunifTanjim/minimo) | [MIT](https://github.com/MunifTanjim/minimo/blob/master/LICENSE) |

assets/scss/grid.scss

@@ -3,10 +3,12 @@
     margin-right: auto;
 
     .left-sidebar {
+        order: -3;
         max-width: var(--left-sidebar-max-width);
     }
 
     .right-sidebar {
+        order: -1;
         max-width: var(--right-sidebar-max-width);
 
         /// Display right sidebar when min-width: lg
@@ -73,6 +75,7 @@
 }
 
 main.main {
+    order: -2;
     min-width: 0;
     max-width: 100%;
     flex-grow: 1;

assets/scss/partials/highlight/common.scss

@@ -0,0 +1,427 @@
+/* Background */
+.chroma {
+    color: $color;
+    background-color: $background-color;
+}
+
+/* Other */
+.chroma .x {
+}
+
+/* Error */
+.chroma .err {
+    color: $error-color;
+}
+
+/* LineTableTD */
+.chroma .lntd {
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
+
+/* LineTable */
+.chroma .lntable {
+    border-spacing: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    width: 100%;
+    display: block;
+
+    > tbody {
+        display: block;
+        width: 100%;
+        > tr {
+            display: flex;
+            width: 100%;
+            > td:last-child {
+                overflow-x: auto;
+            }
+        }
+    }
+}
+
+/* LineHighlight */
+.chroma .hl {
+    display: block;
+    width: 100%;
+    background-color: #ffffcc;
+}
+
+/* LineNumbersTable */
+.chroma .lnt {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #7f7f7f;
+}
+
+/* LineNumbers */
+.chroma .ln {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #7f7f7f;
+}
+
+/* Keyword */
+.chroma .k {
+    color: $keyword-color;
+}
+
+/* KeywordConstant */
+.chroma .kc {
+    color: $keyword-color;
+}
+
+/* KeywordDeclaration */
+.chroma .kd {
+    color: $keyword-color;
+}
+
+/* KeywordNamespace */
+.chroma .kn {
+    color: #f92672;
+}
+
+/* KeywordPseudo */
+.chroma .kp {
+    color: $keyword-color;
+}
+
+/* KeywordReserved */
+.chroma .kr {
+    color: $keyword-color;
+}
+
+/* KeywordType */
+.chroma .kt {
+    color: $keyword-color;
+}
+
+/* Name */
+.chroma .n {
+    color: $text-color;
+}
+
+/* NameAttribute */
+.chroma .na {
+    color: $name-color;
+}
+
+/* NameBuiltin */
+.chroma .nb {
+    color: $text-color;
+}
+
+/* NameBuiltinPseudo */
+.chroma .bp {
+    color: $text-color;
+}
+
+/* NameClass */
+.chroma .nc {
+    color: $name-color;
+}
+
+/* NameConstant */
+.chroma .no {
+    color: $keyword-color;
+}
+
+/* NameDecorator */
+.chroma .nd {
+    color: $name-color;
+}
+
+/* NameEntity */
+.chroma .ni {
+    color: $text-color;
+}
+
+/* NameException */
+.chroma .ne {
+    color: $name-color;
+}
+
+/* NameFunction */
+.chroma .nf {
+    color: $name-color;
+}
+
+/* NameFunctionMagic */
+.chroma .fm {
+    color: $text-color;
+}
+
+/* NameLabel */
+.chroma .nl {
+    color: $text-color;
+}
+
+/* NameNamespace */
+.chroma .nn {
+    color: $text-color;
+}
+
+/* NameOther */
+.chroma .nx {
+    color: $name-color;
+}
+
+/* NameProperty */
+.chroma .py {
+    color: $text-color;
+}
+
+/* NameTag */
+.chroma .nt {
+    color: #f92672;
+}
+
+/* NameVariable */
+.chroma .nv {
+    color: $text-color;
+}
+
+/* NameVariableClass */
+.chroma .vc {
+    color: $text-color;
+}
+
+/* NameVariableGlobal */
+.chroma .vg {
+    color: $text-color;
+}
+
+/* NameVariableInstance */
+.chroma .vi {
+    color: $text-color;
+}
+
+/* NameVariableMagic */
+.chroma .vm {
+    color: $text-color;
+}
+
+/* Literal */
+.chroma .l {
+    color: #ae81ff;
+}
+
+/* LiteralDate */
+.chroma .ld {
+    color: $literal-color;
+}
+
+/* LiteralString */
+.chroma .s {
+    color: $literal-color;
+}
+
+/* LiteralStringAffix */
+.chroma .sa {
+    color: $literal-color;
+}
+
+/* LiteralStringBacktick */
+.chroma .sb {
+    color: $literal-color;
+}
+
+/* LiteralStringChar */
+.chroma .sc {
+    color: $literal-color;
+}
+
+/* LiteralStringDelimiter */
+.chroma .dl {
+    color: $literal-color;
+}
+
+/* LiteralStringDoc */
+.chroma .sd {
+    color: $literal-color;
+}
+
+/* LiteralStringDouble */
+.chroma .s2 {
+    color: $literal-color;
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+    color: #ae81ff;
+}
+
+/* LiteralStringHeredoc */
+.chroma .sh {
+    color: $literal-color;
+}
+
+/* LiteralStringInterpol */
+.chroma .si {
+    color: $literal-color;
+}
+
+/* LiteralStringOther */
+.chroma .sx {
+    color: $literal-color;
+}
+
+/* LiteralStringRegex */
+.chroma .sr {
+    color: $literal-color;
+}
+
+/* LiteralStringSingle */
+.chroma .s1 {
+    color: $literal-color;
+}
+
+/* LiteralStringSymbol */
+.chroma .ss {
+    color: $literal-color;
+}
+
+/* LiteralNumber */
+.chroma .m {
+    color: #ae81ff;
+}
+
+/* LiteralNumberBin */
+.chroma .mb {
+    color: #ae81ff;
+}
+
+/* LiteralNumberFloat */
+.chroma .mf {
+    color: #ae81ff;
+}
+
+/* LiteralNumberHex */
+.chroma .mh {
+    color: #ae81ff;
+}
+
+/* LiteralNumberInteger */
+.chroma .mi {
+    color: #ae81ff;
+}
+
+/* LiteralNumberIntegerLong */
+.chroma .il {
+    color: #ae81ff;
+}
+
+/* LiteralNumberOct */
+.chroma .mo {
+    color: #ae81ff;
+}
+
+/* Operator */
+.chroma .o {
+    color: #f92672;
+}
+
+/* OperatorWord */
+.chroma .ow {
+    color: #f92672;
+}
+
+/* Punctuation */
+.chroma .p {
+    color: $text-color;
+}
+
+/* Comment */
+.chroma .c {
+    color: #75715e;
+}
+
+/* CommentHashbang */
+.chroma .ch {
+    color: #75715e;
+}
+
+/* CommentMultiline */
+.chroma .cm {
+    color: #75715e;
+}
+
+/* CommentSingle */
+.chroma .c1 {
+    color: #75715e;
+}
+
+/* CommentSpecial */
+.chroma .cs {
+    color: #75715e;
+}
+
+/* CommentPreproc */
+.chroma .cp {
+    color: #75715e;
+}
+
+/* CommentPreprocFile */
+.chroma .cpf {
+    color: #75715e;
+}
+
+/* Generic */
+.chroma .g {
+}
+
+/* GenericDeleted */
+.chroma .gd {
+    color: #f92672;
+}
+
+/* GenericEmph */
+.chroma .ge {
+    font-style: italic;
+}
+
+/* GenericError */
+.chroma .gr {
+}
+
+/* GenericHeading */
+.chroma .gh {
+}
+
+/* GenericInserted */
+.chroma .gi {
+    color: $name-color;
+}
+
+/* GenericOutput */
+.chroma .go {
+}
+
+/* GenericPrompt */
+.chroma .gp {
+}
+
+/* GenericStrong */
+.chroma .gs {
+    font-weight: bold;
+}
+
+/* GenericSubheading */
+.chroma .gu {
+    color: #75715e;
+}
+
+/* GenericTraceback */
+.chroma .gt {
+}
+
+/* GenericUnderline */
+.chroma .gl {
+}
+
+/* TextWhitespace */
+.chroma .w {
+}

assets/scss/partials/highlight/dark.scss

@@ -3,382 +3,12 @@
 *   https://xyproto.github.io/splash/docs/monokai.html
 */
 
-/* Background */
-.chroma {
-    color: #f8f8f2;
-    background-color: #272822
-}
-
-/* Other */
-.chroma .x {}
-
-/* Error */
-.chroma .err {
-    color: #bb0064;
-}
-
-/* LineTableTD */
-.chroma .lntd {
-    vertical-align: top;
-    padding: 0;
-    margin: 0;
-    border: 0;
-}
-
-/* LineTable */
-.chroma .lntable {
-    border-spacing: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    width: auto;
-    overflow: auto;
-    display: block;
-}
-
-/* LineHighlight */
-.chroma .hl {
-    display: block;
-    width: 100%;
-    background-color: #ffffcc
-}
-
-/* LineNumbersTable */
-.chroma .lnt {
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: #7f7f7f
-}
-
-/* LineNumbers */
-.chroma .ln {
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: #7f7f7f
-}
-
-/* Keyword */
-.chroma .k {
-    color: #66d9ef
-}
-
-/* KeywordConstant */
-.chroma .kc {
-    color: #66d9ef
-}
-
-/* KeywordDeclaration */
-.chroma .kd {
-    color: #66d9ef
-}
-
-/* KeywordNamespace */
-.chroma .kn {
-    color: #f92672
-}
-
-/* KeywordPseudo */
-.chroma .kp {
-    color: #66d9ef
-}
-
-/* KeywordReserved */
-.chroma .kr {
-    color: #66d9ef
-}
-
-/* KeywordType */
-.chroma .kt {
-    color: #66d9ef
-}
-
-/* Name */
-.chroma .n {}
-
-/* NameAttribute */
-.chroma .na {
-    color: #a6e22e
-}
-
-/* NameBuiltin */
-.chroma .nb {}
-
-/* NameBuiltinPseudo */
-.chroma .bp {}
-
-/* NameClass */
-.chroma .nc {
-    color: #a6e22e
-}
-
-/* NameConstant */
-.chroma .no {
-    color: #66d9ef
-}
-
-/* NameDecorator */
-.chroma .nd {
-    color: #a6e22e
-}
-
-/* NameEntity */
-.chroma .ni {}
-
-/* NameException */
-.chroma .ne {
-    color: #a6e22e
-}
-
-/* NameFunction */
-.chroma .nf {
-    color: #a6e22e
-}
-
-/* NameFunctionMagic */
-.chroma .fm {}
-
-/* NameLabel */
-.chroma .nl {}
-
-/* NameNamespace */
-.chroma .nn {}
-
-/* NameOther */
-.chroma .nx {
-    color: #a6e22e
-}
-
-/* NameProperty */
-.chroma .py {}
-
-/* NameTag */
-.chroma .nt {
-    color: #f92672
-}
-
-/* NameVariable */
-.chroma .nv {}
-
-/* NameVariableClass */
-.chroma .vc {}
-
-/* NameVariableGlobal */
-.chroma .vg {}
-
-/* NameVariableInstance */
-.chroma .vi {}
-
-/* NameVariableMagic */
-.chroma .vm {}
-
-/* Literal */
-.chroma .l {
-    color: #ae81ff
-}
-
-/* LiteralDate */
-.chroma .ld {
-    color: #e6db74
-}
-
-/* LiteralString */
-.chroma .s {
-    color: #e6db74
-}
-
-/* LiteralStringAffix */
-.chroma .sa {
-    color: #e6db74
-}
-
-/* LiteralStringBacktick */
-.chroma .sb {
-    color: #e6db74
-}
-
-/* LiteralStringChar */
-.chroma .sc {
-    color: #e6db74
-}
-
-/* LiteralStringDelimiter */
-.chroma .dl {
-    color: #e6db74
-}
-
-/* LiteralStringDoc */
-.chroma .sd {
-    color: #e6db74
-}
-
-/* LiteralStringDouble */
-.chroma .s2 {
-    color: #e6db74
-}
-
-/* LiteralStringEscape */
-.chroma .se {
-    color: #ae81ff
-}
-
-/* LiteralStringHeredoc */
-.chroma .sh {
-    color: #e6db74
-}
-
-/* LiteralStringInterpol */
-.chroma .si {
-    color: #e6db74
-}
-
-/* LiteralStringOther */
-.chroma .sx {
-    color: #e6db74
-}
-
-/* LiteralStringRegex */
-.chroma .sr {
-    color: #e6db74
-}
-
-/* LiteralStringSingle */
-.chroma .s1 {
-    color: #e6db74
-}
-
-/* LiteralStringSymbol */
-.chroma .ss {
-    color: #e6db74
-}
-
-/* LiteralNumber */
-.chroma .m {
-    color: #ae81ff
-}
-
-/* LiteralNumberBin */
-.chroma .mb {
-    color: #ae81ff
-}
-
-/* LiteralNumberFloat */
-.chroma .mf {
-    color: #ae81ff
-}
-
-/* LiteralNumberHex */
-.chroma .mh {
-    color: #ae81ff
-}
-
-/* LiteralNumberInteger */
-.chroma .mi {
-    color: #ae81ff
-}
-
-/* LiteralNumberIntegerLong */
-.chroma .il {
-    color: #ae81ff
-}
-
-/* LiteralNumberOct */
-.chroma .mo {
-    color: #ae81ff
-}
-
-/* Operator */
-.chroma .o {
-    color: #f92672
-}
-
-/* OperatorWord */
-.chroma .ow {
-    color: #f92672
-}
-
-/* Punctuation */
-.chroma .p {}
-
-/* Comment */
-.chroma .c {
-    color: #75715e
-}
-
-/* CommentHashbang */
-.chroma .ch {
-    color: #75715e
-}
-
-/* CommentMultiline */
-.chroma .cm {
-    color: #75715e
-}
-
-/* CommentSingle */
-.chroma .c1 {
-    color: #75715e
-}
-
-/* CommentSpecial */
-.chroma .cs {
-    color: #75715e
-}
-
-/* CommentPreproc */
-.chroma .cp {
-    color: #75715e
-}
-
-/* CommentPreprocFile */
-.chroma .cpf {
-    color: #75715e
-}
-
-/* Generic */
-.chroma .g {}
-
-/* GenericDeleted */
-.chroma .gd {
-    color: #f92672
-}
-
-/* GenericEmph */
-.chroma .ge {
-    font-style: italic
-}
-
-/* GenericError */
-.chroma .gr {}
-
-/* GenericHeading */
-.chroma .gh {}
-
-/* GenericInserted */
-.chroma .gi {
-    color: #a6e22e
-}
-
-/* GenericOutput */
-.chroma .go {}
-
-/* GenericPrompt */
-.chroma .gp {}
-
-/* GenericStrong */
-.chroma .gs {
-    font-weight: bold
-}
-
-/* GenericSubheading */
-.chroma .gu {
-    color: #75715e
-}
-
-/* GenericTraceback */
-.chroma .gt {}
-
-/* GenericUnderline */
-.chroma .gl {}
-
-/* TextWhitespace */
-.chroma .w {}
+$color: #f8f8f2;
+$background-color: #272822;
+$error-color: #bb0064;
+$keyword-color: #66d9ef;
+$text-color: $color;
+$name-color: #a6e22e;
+$literal-color: #e6db74;
+
+@import "common.scss";

assets/scss/partials/highlight/light.scss

@@ -3,407 +3,12 @@
 *   https://xyproto.github.io/splash/docs/monokailight.html
 */
 
-/* Background */
-.chroma {
-    color: #272822;
-    background-color: #fafafa;
-}
-
-/* Other */
-.chroma .x {
-}
-
-/* Error */
-.chroma .err {
-    color: #960050;
-}
-
-/* LineTableTD */
-.chroma .lntd {
-    vertical-align: top;
-    padding: 0;
-    margin: 0;
-    border: 0;
-}
-
-/* LineTable */
-.chroma .lntable {
-    border-spacing: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    width: auto;
-    overflow: auto;
-    display: block;
-}
-
-/* LineHighlight */
-.chroma .hl {
-    display: block;
-    width: 100%;
-    background-color: #ffffcc;
-}
-
-/* LineNumbersTable */
-.chroma .lnt {
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: #7f7f7f;
-}
-
-/* LineNumbers */
-.chroma .ln {
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: #7f7f7f;
-}
-
-/* Keyword */
-.chroma .k {
-    color: #00a8c8;
-}
-
-/* KeywordConstant */
-.chroma .kc {
-    color: #00a8c8;
-}
-
-/* KeywordDeclaration */
-.chroma .kd {
-    color: #00a8c8;
-}
-
-/* KeywordNamespace */
-.chroma .kn {
-    color: #f92672;
-}
-
-/* KeywordPseudo */
-.chroma .kp {
-    color: #00a8c8;
-}
-
-/* KeywordReserved */
-.chroma .kr {
-    color: #00a8c8;
-}
-
-/* KeywordType */
-.chroma .kt {
-    color: #00a8c8;
-}
-
-/* Name */
-.chroma .n {
-    color: #111111;
-}
-
-/* NameAttribute */
-.chroma .na {
-    color: #75af00;
-}
-
-/* NameBuiltin */
-.chroma .nb {
-    color: #111111;
-}
-
-/* NameBuiltinPseudo */
-.chroma .bp {
-    color: #111111;
-}
-
-/* NameClass */
-.chroma .nc {
-    color: #75af00;
-}
-
-/* NameConstant */
-.chroma .no {
-    color: #00a8c8;
-}
-
-/* NameDecorator */
-.chroma .nd {
-    color: #75af00;
-}
-
-/* NameEntity */
-.chroma .ni {
-    color: #111111;
-}
-
-/* NameException */
-.chroma .ne {
-    color: #75af00;
-}
-
-/* NameFunction */
-.chroma .nf {
-    color: #75af00;
-}
-
-/* NameFunctionMagic */
-.chroma .fm {
-    color: #111111;
-}
-
-/* NameLabel */
-.chroma .nl {
-    color: #111111;
-}
-
-/* NameNamespace */
-.chroma .nn {
-    color: #111111;
-}
-
-/* NameOther */
-.chroma .nx {
-    color: #75af00;
-}
-
-/* NameProperty */
-.chroma .py {
-    color: #111111;
-}
-
-/* NameTag */
-.chroma .nt {
-    color: #f92672;
-}
-
-/* NameVariable */
-.chroma .nv {
-    color: #111111;
-}
-
-/* NameVariableClass */
-.chroma .vc {
-    color: #111111;
-}
-
-/* NameVariableGlobal */
-.chroma .vg {
-    color: #111111;
-}
-
-/* NameVariableInstance */
-.chroma .vi {
-    color: #111111;
-}
-
-/* NameVariableMagic */
-.chroma .vm {
-    color: #111111;
-}
-
-/* Literal */
-.chroma .l {
-    color: #ae81ff;
-}
-
-/* LiteralDate */
-.chroma .ld {
-    color: #d88200;
-}
-
-/* LiteralString */
-.chroma .s {
-    color: #d88200;
-}
-
-/* LiteralStringAffix */
-.chroma .sa {
-    color: #d88200;
-}
-
-/* LiteralStringBacktick */
-.chroma .sb {
-    color: #d88200;
-}
-
-/* LiteralStringChar */
-.chroma .sc {
-    color: #d88200;
-}
-
-/* LiteralStringDelimiter */
-.chroma .dl {
-    color: #d88200;
-}
-
-/* LiteralStringDoc */
-.chroma .sd {
-    color: #d88200;
-}
-
-/* LiteralStringDouble */
-.chroma .s2 {
-    color: #d88200;
-}
-
-/* LiteralStringEscape */
-.chroma .se {
-    color: #8045ff;
-}
-
-/* LiteralStringHeredoc */
-.chroma .sh {
-    color: #d88200;
-}
-
-/* LiteralStringInterpol */
-.chroma .si {
-    color: #d88200;
-}
-
-/* LiteralStringOther */
-.chroma .sx {
-    color: #d88200;
-}
-
-/* LiteralStringRegex */
-.chroma .sr {
-    color: #d88200;
-}
-
-/* LiteralStringSingle */
-.chroma .s1 {
-    color: #d88200;
-}
-
-/* LiteralStringSymbol */
-.chroma .ss {
-    color: #d88200;
-}
-
-/* LiteralNumber */
-.chroma .m {
-    color: #ae81ff;
-}
-
-/* LiteralNumberBin */
-.chroma .mb {
-    color: #ae81ff;
-}
-
-/* LiteralNumberFloat */
-.chroma .mf {
-    color: #ae81ff;
-}
-
-/* LiteralNumberHex */
-.chroma .mh {
-    color: #ae81ff;
-}
-
-/* LiteralNumberInteger */
-.chroma .mi {
-    color: #ae81ff;
-}
-
-/* LiteralNumberIntegerLong */
-.chroma .il {
-    color: #ae81ff;
-}
-
-/* LiteralNumberOct */
-.chroma .mo {
-    color: #ae81ff;
-}
-
-/* Operator */
-.chroma .o {
-    color: #f92672;
-}
-
-/* OperatorWord */
-.chroma .ow {
-    color: #f92672;
-}
-
-/* Punctuation */
-.chroma .p {
-    color: #111111;
-}
-
-/* Comment */
-.chroma .c {
-    color: #75715e;
-}
-
-/* CommentHashbang */
-.chroma .ch {
-    color: #75715e;
-}
-
-/* CommentMultiline */
-.chroma .cm {
-    color: #75715e;
-}
-
-/* CommentSingle */
-.chroma .c1 {
-    color: #75715e;
-}
-
-/* CommentSpecial */
-.chroma .cs {
-    color: #75715e;
-}
-
-/* CommentPreproc */
-.chroma .cp {
-    color: #75715e;
-}
-
-/* CommentPreprocFile */
-.chroma .cpf {
-    color: #75715e;
-}
-
-/* Generic */
-.chroma .g {
-}
-/* GenericDeleted */
-.chroma .gd {
-    color: #f92672;
-}
-/* GenericEmph */
-.chroma .ge {
-    font-style: italic;
-}
-/* GenericError */
-.chroma .gr {
-}
-/* GenericHeading */
-.chroma .gh {
-}
-/* GenericInserted */
-.chroma .gi {
-    color: #7ca727;
-}
-/* GenericOutput */
-.chroma .go {
-}
-/* GenericPrompt */
-.chroma .gp {
-}
-/* GenericStrong */
-.chroma .gs {
-    font-weight: bold;
-}
-/* GenericSubheading */
-.chroma .gu {
-    color: #75715e;
-}
-/* GenericTraceback */
-.chroma .gt {
-}
-/* GenericUnderline */
-.chroma .gl {
-}
-/* TextWhitespace */
-.chroma .w {
-}
+$color: #272822;
+$background-color: #fafafa;
+$error-color: #960050;
+$keyword-color: #00a8c8;
+$text-color: #111111;
+$name-color: #75af00;
+$literal-color: #d88200;
+
+@import "common.scss";

assets/scss/partials/layout/article.scss

@@ -387,6 +387,18 @@
         }
     }
 
+    .gitlab-embed-snippets {
+        margin: 0 !important;
+
+        .file-holder.snippet-file-content {
+            margin-block-end: 0 !important;
+            margin-block-start: 0 !important;
+            margin-left: calc((var(--card-padding)) * -1) !important;
+            margin-right: calc((var(--card-padding)) * -1) !important;
+            padding: 0 var(--card-padding) !important;
+        }
+    }
+
     /// Negative margins
     blockquote,
     figure,
@@ -400,4 +412,10 @@
         margin-right: calc((var(--card-padding)) * -1);
         width: calc(100% + var(--card-padding) * 2);
     }
+
+    /// Make long KaTeX equations scrollable in the x-axis
+    .katex-display > .katex {
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
 }

assets/ts/smoothAnchors.ts

@@ -21,12 +21,15 @@ function setupSmoothAnchors() {
         aElement.addEventListener("click", clickEvent => {
             clickEvent.preventDefault();
 
-            let targetId = aElement.getAttribute("href").substring(1);
-            // The replace done on ':' is here for footnotes, as this character would otherwise interfere when used as a CSS selector.
-            let target = document.getElementById(targetId.replace(":", "\\:")) as HTMLElement;
+            const targetId = aElement.getAttribute("href").substring(1),
+                target = document.getElementById(targetId) as HTMLElement, 
+                offset = target.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top;
 
             window.history.pushState({}, "", aElement.getAttribute("href"));
-            scrollTo({ top: target.offsetTop, behavior: "smooth" });
+            scrollTo({
+                top: offset,
+                behavior: "smooth"
+            });
         });
     });
 }

config.yaml

@@ -92,10 +92,12 @@ params:
             category:
             categoryID:
             mapping:
+            strict:
             lightTheme:
             darkTheme:
             reactionsEnabled: 1
             emitMetadata: 0
+            inputPosition:
             lang:
 
         gitalk:

exampleSite/config.yaml

@@ -8,15 +8,18 @@ languages:
     en:
         languageName: English
         title: Example Site
+        description: Example description
         weight: 1
     zh-cn:
         languageName: 中文
         title: 演示站点
+        description: 演示说明
         weight: 2
     ar:
         languageName: عربي
         languagedirection: rtl
         title: موقع تجريبي
+        description: وصف تجريبي
         weight: 3
 
 # Change it to your Disqus shortname before using
@@ -42,7 +45,7 @@ params:
         - post
     featuredImageField: image
     rssFullContent: true
-    favicon:
+    favicon:  # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)
 
     footer:
         since: 2020

exampleSite/content/post/rich-content/index.md

@@ -23,7 +23,7 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
 
 ## Twitter Simple Shortcode
 
-{{< twitter_simple 1085870671291310081 >}}
+{{< twitter_simple user="DesignReviewed" id="1085870671291310081" >}}
 
 <br>
 
@@ -41,6 +41,10 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
 
 {{< gist spf13 7896402 >}}
 
+## Gitlab Snippets Shortcode
+
+{{< gitlab 2349278 >}}
+
 ## Quote Shortcode
 
 Stack adds a `quote` shortcode.  For example:

i18n/ar.yaml

@@ -52,6 +52,10 @@ widget:
         title:
             other: وسوم
             
+    categoriesCloud:
+        title:
+            other: التصنيفات
+
 search:
     title:
         other: بحث

i18n/bn.yaml

@@ -6,19 +6,19 @@ darkMode:
 
 list:
     page:
-        one: "{{ .Count }} পৃষ্ঠা"
-        other: "{{ .Count }} পৃষ্ঠা"
+        one: "{{ .Count }} পাতা"
+        other: "{{ .Count }} পাতা"
 
     section:
         other: অনুচ্ছেদ
 
     subsection:
-        one: উপঅনুচ্ছেদ
-        other: উপঅনুচ্ছেদ
+        one: উপ-অনুচ্ছেদ
+        other: উপ-অনুচ্ছেদ
 
 article:
     back:
-        other: পেছনে যান
+        other: পেছনে
 
     tableOfContents:
         other: সূচিপত্র
@@ -27,7 +27,7 @@ article:
         other: সম্পর্কিত বিষয়বস্তু
 
     lastUpdatedOn:
-        other: শেষ হালনাগাদ করা হয়েছে
+        other: সর্বশেষ আপডেট করা হয়েছে
 
     readingTime:
         one: "{{ .Count }} মিনিটে পড়া যাবে"
@@ -38,7 +38,7 @@ notFound:
         other: পাওয়া যায়নি
 
     subtitle:
-        other: এই পৃষ্ঠাটি বিদ্যমান নেই
+        other: এই পাতাটি বিদ্যমান নেই
 
 widget:
     archives:
@@ -63,7 +63,7 @@ search:
         other: কিছু টাইপ করুন...
 
     resultTitle:
-        other: "#PAGES_COUNT পৃষ্ঠা (#TIME_SECONDS সেকেন্ড)"
+        other: "#PAGES_COUNT পাতা (#TIME_SECONDS সেকেন্ড)"
 
 footer:
     builtWith:

i18n/ko.yaml

@@ -47,6 +47,10 @@ widget:
         more:
             other: 더보기
             
+    categoriesCloud:
+        title:
+            other: 카테고리
+            
     tagCloud:
         title:
             other: 태그

i18n/pt-br.yaml

@@ -48,6 +48,9 @@ widget:
     tagCloud:
         title:
             other: Tags
+    categoriesCloud:
+        title:
+            other: Categorias
 
 search:
     title:

i18n/pt-pt.yaml

@@ -0,0 +1,67 @@
+toggleMenu:
+    other: Alternar Menu
+
+darkMode:
+    other: Modo Escuro
+
+list:
+    page:
+        one: "{{ .Count }} página"
+        other: "{{ .Count }} páginas"
+
+    section:
+        other: Secção
+
+    subsection:
+        one: Subsecção
+        other: Subsecções
+
+article:
+    back:
+        other: Voltar
+
+    tableOfContents:
+        other: Índice
+
+    relatedContent:
+        other: Conteúdo relacionado
+
+    lastUpdatedOn:
+        other: Última atualização a
+
+    readingTime:
+        one: "{{ .Count }} minuto de leitura"
+        other: "{{ .Count }} minutos de leitura"
+
+notFound:
+    title:
+        other: Não Encontrado
+    subtitle:
+        other: Esta página não existe.
+
+widget:
+    archives:
+        title:
+            other: Arquivos
+        more:
+            other: Mais
+    tagCloud:
+        title:
+            other: Tags
+    categoriesCloud:
+        title:
+            other: Categorias
+
+search:
+    title:
+        other: Pesquisa
+    placeholder:
+        other: Escreva algo...
+    resultTitle:
+        other: "#PAGES_COUNT páginas (#TIME_SECONDS segundos)"
+
+footer:
+    builtWith:
+        other: Criado com {{ .Generator }}
+    designedBy:
+        other: Tema {{ .Theme }} desenvolvido por {{ .DesignedBy }}

layouts/_default/baseof.html

@@ -18,10 +18,10 @@
             {{- block "left-sidebar" . -}}
                 {{ partial "sidebar/left.html" . }}
             {{- end -}}
+            {{- block "right-sidebar" . -}}{{ end }}
             <main class="main full-width">
                 {{- block "main" . }}{{- end }}
             </main>
-            {{- block "right-sidebar" . -}}{{ end }}
         </div>
         {{ partial "footer/include.html" . }}
     </body>

layouts/partials/article/components/details.html

@@ -23,9 +23,12 @@
         {{ end }}
     </div>
 
-    {{ if or (not .Date.IsZero) (.Site.Params.article.readingTime) }}
+    {{ $showReadingTime := .Params.readingTime | default (.Site.Params.article.readingTime) }}
+    {{ $showDate := not .Date.IsZero }}
+    {{ $showFooter := or $showDate $showReadingTime }}
+    {{ if $showFooter }}
     <footer class="article-time">
-        {{ if not .Date.IsZero }}
+        {{ if $showDate }}
             <div>
                 {{ partial "helper/icon" "date" }}
                 <time class="article-time--published">
@@ -34,7 +37,7 @@
             </div>
         {{ end }}
 
-        {{ if .Site.Params.article.readingTime }}
+        {{ if $showReadingTime }}
             <div>
                 {{ partial "helper/icon" "clock" }}
                 <time class="article-time--reading">

layouts/partials/comments/provider/giscus.html

@@ -6,8 +6,10 @@
     data-category="{{- .category -}}"
     data-category-id="{{- .categoryID -}}"
     data-mapping="{{- default `title` .mapping -}}"
+    data-strict="{{- default 0 .strict -}}"
     data-reactions-enabled="{{- default 1 .reactionsEnabled -}}"
     data-emit-metadata="{{- default 0 .emitMetadata -}}"
+    data-input-position="{{- default `top` .inputPosition -}}"
     data-theme="{{- default `light` .lightTheme -}}"
     data-lang="{{- default `en` .lang -}}"
     crossorigin="anonymous"

layouts/partials/comments/provider/remark42.html

@@ -2,10 +2,10 @@
 <div id="remark42"></div>
 <script>
     var remark_config = {
-        host: "{{ .host }}",
+        host: '{{ .host }}',
         site_id: '{{ .site }}',
         components: ['embed'],
-        url: "{{ $.Permalink }}",
+        url: '{{ $.Permalink }}',
         max_shown_comments: {{ default 15 .max_shown_comments }},
         theme: document.documentElement.dataset.scheme,
         page_title: '{{ $.Title }}',
@@ -13,14 +13,14 @@
         show_email_subscription: {{ default true .show_email_subscription }}
     };
 
-    (function (c) {
-        for (var i = 0; i < c.length; i++) {
-            var d = document, s = d.createElement('script');
-            s.src = remark_config.host + '/web/' + c[i] + '.js';
-            s.defer = true;
-            (d.head || d.body).appendChild(s);
+    function(e, n) {
+        for (var o = 0; o < e.length; o++) {
+            var r = n.createElement('script'),
+            c = '.js',
+            d = n.head || n.body;
+            'noModule' in r ? (r.type = 'module', c = '.mjs') : r.async = !0, r.defer = !0, r.src = remark_config.host + '/web/' + e[o] + c, d.appendChild(r)
         }
-    })(remark_config.components || ['embed']);
+    }(remark_config.components || ['embed'], document);
 
     window.addEventListener('onColorSchemeChange', (e) => {
         window.REMARK42.changeTheme(e.detail);

layouts/partials/data/description.html

@@ -1,6 +1,11 @@
 <!-- Use site subtitle by default -->
 {{ $description := .Site.Params.sidebar.subtitle }}
 
+<!-- Seprate description exists -->
+{{ if .Site.Params.description }}
+    {{ $description = .Site.Params.description }}
+{{ end }}
+
 {{ if .Description }}
     <!-- Page description exists -->
     {{ $description = .Description }}

layouts/partials/footer/footer.html

@@ -1,4 +1,4 @@
-{{- $ThemeVersion := "3.12.0" -}}
+{{- $ThemeVersion := "3.16.0" -}}
 <footer class="site-footer">
     <section class="copyright">
         &copy; 

layouts/partials/head/head.html

@@ -3,6 +3,7 @@
 
 {{- $description := partialCached "data/description" . .RelPermalink -}}
 <meta name='description' content='{{ $description }}'>
+{{ with .Params.Keywords }}<meta name="keywords" content="{{ delimit . ", " }}">{{ end }}
 
 {{- $title := partialCached "data/title" . .RelPermalink -}}
 <title>{{ $title }}</title>

layouts/partials/sidebar/left.html

@@ -45,6 +45,7 @@
                         href='{{ .URL }}'
                         {{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
                         {{ with .Name }}title="{{ . }}"{{ end }}
+                        rel="me"
                     >
                         {{ $icon := default "link" .Params.Icon }}
                         {{ with $icon }}

layouts/shortcodes/gitlab.html

@@ -0,0 +1,4 @@
+<script
+    type="application/javascript"
+    src="https://gitlab.com/-/snippets/{{ index .Params 0 }}.js"
+></script>

netlify.toml

@@ -2,7 +2,7 @@
     publish = "exampleSite/public"
 
 [build.environment]
-    HUGO_VERSION = "0.87.0"
+    HUGO_VERSION = "0.100.2"
     HUGO_THEME = "repo"
 
 [context.production]