chore(release): 7.2.0

## [7.2.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.1.1...v7.2.0) (2024-11-28)

### Features

* show toc on mobile screens ([#1964](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1964)) ([8a064a5](8a064a5e5a))
* support vertical scrolling for toc in desktop mode ([#2064](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2064)) ([5265b03](5265b03974))

### Bug Fixes

* pagination error when pinned posts exceed the page size ([#1965](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1965)) ([93f616b](93f616b25d))

### Improvements

* modular sass architecture ([#2052](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2052)) ([35c794c](35c794cf58))
* speed up page rendering and jekyll build process ([#2034](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2034)) ([65f960c](65f960c31a))

.github/workflows/style-lint.yml

@@ -1,25 +0,0 @@
-name: Style Lint
-
-on:
-  push:
-    branches:
-      - master
-      - "hotfix/*"
-    paths: ["_sass/**/*.scss"]
-  pull_request:
-    paths: ["_sass/**/*.scss"]
-
-jobs:
-  stylelint:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-      - run: npm i
-      - run: npm test

.gitignore

@@ -23,5 +23,5 @@ package-lock.json
 !.vscode/tasks.json
 
 # Misc
-_sass/vendor
+_sass/vendors
 assets/js/dist

.stylelintrc.json

@@ -0,0 +1,31 @@
+{
+  "ignoreFiles": ["_sass/vendors/**"],
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "no-descending-specificity": null,
+    "shorthand-property-no-redundant-values": null,
+    "at-rule-no-vendor-prefix": null,
+    "property-no-vendor-prefix": null,
+    "selector-no-vendor-prefix": null,
+    "value-no-vendor-prefix": null,
+    "color-function-notation": "legacy",
+    "alpha-value-notation": "number",
+    "selector-not-notation": "simple",
+    "color-hex-length": "long",
+    "declaration-block-single-line-max-declarations": 3,
+    "scss/operator-no-newline-after": null,
+    "rule-empty-line-before": [
+      "always",
+      {
+        "ignore": ["after-comment", "first-nested"]
+      }
+    ],
+    "value-keyword-case": [
+      "lower",
+      {
+        "ignoreProperties": ["/^\\$/"]
+      }
+    ],
+    "media-feature-range-notation": "prefix"
+  }
+}

_data/origin/cors.yml

@@ -20,17 +20,17 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
 # Libraries
 
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.js
+  css: https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css
 
 search:
   js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
 
 mermaid:
-  js: https://cdn.jsdelivr.net/npm/mermaid@11.0.2/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@11.4.0/dist/mermaid.min.js
 
 dayjs:
   js:

_includes/toc.html

@@ -1,8 +1,9 @@
 {% include toc-status.html %}
 
 {% if enable_toc %}
-  <section id="toc-wrapper" class="ps-0 pe-4">
-    <h2 class="panel-heading ps-3 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+  <div class="toc-border-cover z-3"></div>
+  <section id="toc-wrapper" class="position-sticky ps-0 pe-4">
+    <h2 class="panel-heading ps-3 pb-2 mb-0">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
   </section>
 {% endif %}

_layouts/default.html

@@ -33,7 +33,7 @@ layout: compress
           </main>
 
           <!-- panel -->
-          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
             <div class="access">
               {% include_cached update-list.html lang=lang %}
               {% include_cached trending-tags.html lang=lang %}

_sass/abstracts/_placeholders.scss

@@ -154,3 +154,7 @@
 %max-w-100 {
   max-width: 100%;
 }
+
+%panel-border {
+  border-left: 1px solid var(--main-border-color);
+}

_sass/layout/_panel.scss

@@ -6,7 +6,6 @@
   top: 2rem;
   transition: top 0.2s ease-in-out;
   margin-top: 3rem;
-  margin-bottom: 4rem;
 
   &:only-child {
     position: -webkit-sticky;
@@ -14,11 +13,12 @@
   }
 
   > section {
-    padding-left: 1rem;
-    border-left: 1px solid var(--main-border-color);
+    @extend %panel-border;
 
-    &:not(:last-child) {
-      margin-bottom: 4rem;
+    padding-left: 1rem;
+
+    &:not(:first-child) {
+      margin-top: 4rem;
     }
   }
 
@@ -48,6 +48,10 @@
     }
   }
 
+  > :last-child {
+    margin-bottom: 4rem;
+  }
+
   @include bp.lt(bp.get(xl)) {
     display: none;
   }
@@ -64,139 +68,3 @@
     @extend %no-bottom-border;
   }
 }
-
-.footnotes > ol {
-  padding-left: 2rem;
-  margin-top: 0.5rem;
-
-  > li {
-    &:not(:last-child) {
-      margin-bottom: 0.3rem;
-    }
-
-    @extend %sup-fn-target;
-
-    > p {
-      margin-left: 0.25em;
-
-      @include mx.mt-mb(0);
-    }
-  }
-}
-
-.footnote {
-  @at-root a#{&} {
-    @include mx.ml-mr(1px);
-    @include mx.pl-pr(2px);
-
-    border-bottom-style: none !important;
-  }
-}
-
-sup {
-  @extend %sup-fn-target;
-}
-
-.reversefootnote {
-  @at-root a#{&} {
-    font-size: 0.6rem;
-    line-height: 1;
-    position: relative;
-    bottom: 0.25em;
-    margin-left: 0.25em;
-    border-bottom-style: none !important;
-  }
-}
-
-/* --- Begin of Markdown table style --- */
-
-/* it will be created by Liquid */
-.table-wrapper {
-  overflow-x: auto;
-  margin-bottom: 1.5rem;
-
-  > table {
-    min-width: 100%;
-    overflow-x: auto;
-    border-spacing: 0;
-
-    thead {
-      border-bottom: solid 2px rgba(210, 215, 217, 0.75);
-
-      th {
-        @extend %table-cell;
-      }
-    }
-
-    tbody {
-      tr {
-        border-bottom: 1px solid var(--tb-border-color);
-
-        &:nth-child(2n) {
-          background-color: var(--tb-even-bg);
-        }
-
-        &:nth-child(2n + 1) {
-          background-color: var(--tb-odd-bg);
-        }
-
-        td {
-          @extend %table-cell;
-        }
-      }
-    } /* tbody */
-  } /* table */
-}
-
-/* --- post --- */
-
-.preview-img {
-  aspect-ratio: 40 / 21;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  @extend %rounded;
-
-  &:not(.no-bg) {
-    background: var(--img-bg);
-  }
-
-  img {
-    height: 100%;
-    -o-object-fit: cover;
-    object-fit: cover;
-
-    @extend %rounded;
-
-    @at-root #post-list & {
-      width: 100%;
-    }
-  }
-}
-
-.post-preview {
-  @extend %rounded;
-
-  border: 0;
-  background: var(--card-bg);
-  box-shadow: var(--card-shadow);
-
-  &::before {
-    @extend %rounded;
-
-    content: '';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background-color: var(--card-hovor-bg);
-    opacity: 0;
-    transition: opacity 0.35s ease-in-out;
-  }
-
-  &:hover {
-    &::before {
-      opacity: 0.3;
-    }
-  }
-}

_sass/main.bundle.scss

@@ -1,2 +1,2 @@
-@use 'vendor/bootstrap';
+@use 'vendors/bootstrap';
 @use 'main';

_sass/pages/_home.scss

@@ -44,7 +44,7 @@
       padding: 1rem;
 
       @include bp.md {
-        padding: 1.75rem 1.75rem 1.25rem 1.75rem;
+        padding: 1.75rem 1.75rem 1.25rem;
       }
 
       .card-title {

_sass/pages/_post.scss

@@ -246,14 +246,26 @@ header {
 }
 
 /* TOC panel */
-#toc-wrapper {
-  border-left: 1px solid rgba(158, 158, 158, 0.17);
-  position: -webkit-sticky;
+
+%top-cover {
+  content: '';
+  display: block;
   position: sticky;
-  top: 4rem;
+  top: 0;
+  width: 100%;
+  height: 3rem;
+  background: linear-gradient(var(--main-bg) 50%, transparent);
+}
+
+#toc-wrapper {
+  top: 0;
   transition: top 0.2s ease-in-out;
   -webkit-animation: fade-up 0.8s;
   animation: fade-up 0.8s;
+  overflow-y: auto;
+  max-height: calc(100vh - 2rem);
+  scrollbar-width: none;
+  margin-top: 2rem;
 
   ul {
     list-style: none;
@@ -266,6 +278,10 @@ header {
         margin: 0.4rem 0;
       }
 
+      &:first-child {
+        margin-top: 0;
+      }
+
       a {
         padding: 0.2rem 0 0.2rem 1.25rem;
       }
@@ -295,7 +311,6 @@ header {
       &::before {
         display: inline-block;
         width: 1px;
-        left: -1px;
         height: 1.25rem;
         background-color: var(--toc-highlight) !important;
       }
@@ -305,6 +320,30 @@ header {
       padding-left: 0.75rem;
     }
   }
+
+  @at-root .toc-border-cover {
+    @extend %top-cover;
+
+    margin-bottom: -4rem;
+  }
+
+  &::before {
+    @extend %top-cover;
+  }
+
+  &::after {
+    content: '';
+    position: fixed;
+    bottom: 0;
+    width: 15%;
+    height: 3.25rem;
+    margin-left: -1px;
+    background: linear-gradient(transparent, var(--main-bg) 70%);
+  }
+
+  > * {
+    @extend %panel-border;
+  }
 }
 
 /* --- TOC button, bar and popup in mobile/tablet --- */

docs/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [7.2.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.1.1...v7.2.0) (2024-11-28)
+
+### Features
+
+* show toc on mobile screens ([#1964](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1964)) ([8a064a5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8a064a5e5a95cd22aa654f7c80da09d107262508))
+* support vertical scrolling for toc in desktop mode ([#2064](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2064)) ([5265b03](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5265b039741555943f9a6f0451287aefb6810f28))
+
+### Bug Fixes
+
+* pagination error when pinned posts exceed the page size ([#1965](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1965)) ([93f616b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/93f616b25d7ed6c4f090c50c8663f8c1f59947f4))
+
+### Improvements
+
+* modular sass architecture ([#2052](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2052)) ([35c794c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/35c794cf5896565430389f35c660b88a93cebb17))
+* speed up page rendering and jekyll build process ([#2034](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2034)) ([65f960c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/65f960c31a734b5306a8b919040c3aae9b783efd))
+
 ## [7.1.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.1.0...v7.1.1) (2024-09-23)
 
 ### Bug Fixes

jekyll-theme-chirpy.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-chirpy"
-  spec.version       = "7.1.1"
+  spec.version       = "7.2.0"
   spec.authors       = ["Cotes Chung"]
   spec.email         = ["cotes.chung@gmail.com"]
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "7.1.1",
+  "version": "7.2.0",
   "description": "A minimal, responsive, and feature-rich Jekyll theme for technical writing.",
   "repository": {
     "type": "git",
@@ -28,25 +28,25 @@
     "bootstrap": "^5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/plugin-transform-class-properties": "^7.25.4",
-    "@babel/plugin-transform-private-methods": "^7.25.7",
-    "@babel/preset-env": "^7.25.4",
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-private-methods": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@commitlint/cli": "^19.6.0",
+    "@commitlint/config-conventional": "^19.6.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "concurrently": "^9.0.1",
+    "concurrently": "^9.1.0",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "husky": "^9.1.6",
-    "purgecss": "^6.0.0",
-    "rollup": "^4.21.3",
-    "semantic-release": "^24.1.1",
-    "stylelint": "^16.9.0",
+    "husky": "^9.1.7",
+    "purgecss": "^7.0.2",
+    "rollup": "^4.27.4",
+    "semantic-release": "^24.2.0",
+    "stylelint": "^16.10.0",
     "stylelint-config-standard-scss": "^13.1.0"
   },
   "prettier": {
@@ -68,44 +68,6 @@
       ]
     }
   },
-  "stylelint": {
-    "ignoreFiles": [
-      "_sass/vendor/**"
-    ],
-    "extends": "stylelint-config-standard-scss",
-    "rules": {
-      "no-descending-specificity": null,
-      "shorthand-property-no-redundant-values": null,
-      "at-rule-no-vendor-prefix": null,
-      "property-no-vendor-prefix": null,
-      "selector-no-vendor-prefix": null,
-      "value-no-vendor-prefix": null,
-      "color-function-notation": "legacy",
-      "alpha-value-notation": "number",
-      "selector-not-notation": "simple",
-      "color-hex-length": "long",
-      "declaration-block-single-line-max-declarations": 3,
-      "scss/operator-no-newline-after": null,
-      "rule-empty-line-before": [
-        "always",
-        {
-          "ignore": [
-            "after-comment",
-            "first-nested"
-          ]
-        }
-      ],
-      "value-keyword-case": [
-        "lower",
-        {
-          "ignoreProperties": [
-            "/^\\$/"
-          ]
-        }
-      ],
-      "media-feature-range-notation": "prefix"
-    }
-  },
   "release": {
     "branches": [
       "production"

purgecss.js

@@ -1,13 +1,13 @@
 const fs = require('fs').promises;
 const { PurgeCSS } = require('purgecss');
-const DIST_PATH = '_sass/vendor';
+const DIST_PATH = '_sass/vendors';
+const output = `${DIST_PATH}/_bootstrap.scss`;
 
 const config = {
   content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'],
   css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'],
   keyframes: true,
   variables: true,
-  output: `${DIST_PATH}/bootstrap.css`,
   // The `safelist` should be changed appropriately for future development
   safelist: {
     standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'],
@@ -20,7 +20,7 @@ function main() {
     .then(() => fs.mkdir(DIST_PATH))
     .then(() => new PurgeCSS().purge(config))
     .then((result) => {
-      return fs.writeFile(`${DIST_PATH}/bootstrap.scss`, result[0].css);
+      return fs.writeFile(output, result[0].css);
     })
     .catch((err) => {
       console.error('Error during PurgeCSS process:', err);

tools/init.sh

@@ -92,7 +92,7 @@ init_files() {
   npm i && npm run build
 
   # track the CSS/JS output
-  _sedi "/^_sass\/vendor/d" .gitignore
+  _sedi "/^_sass\/vendors/d" .gitignore
   _sedi "/^assets\/js\/dist/d" .gitignore
 }
 

tools/release.sh

@@ -15,7 +15,7 @@ NODE_SPEC="package.json"
 CHANGELOG="docs/CHANGELOG.md"
 CONFIG="_config.yml"
 
-CSS_DIST="_sass/vendor"
+CSS_DIST="_sass/vendors"
 JS_DIST="assets/js/dist"
 
 FILES=(