Merge 4782161c4c into 65f960c31a

- Modularized the Sass architecture to enhance code maintainability and reduce the output file size
- Replaced deprecated `@import` with `@use` / `@forward`

.github/workflows/style-lint.yml

@@ -0,0 +1,25 @@
+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/vendors
+_sass/vendor
 assets/js/dist

.stylelintrc.json

@@ -1,31 +0,0 @@
-{
-  "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.32.2/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js
+  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
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/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.4.0/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@11.0.2/dist/mermaid.min.js
 
 dayjs:
   js:

_includes/toc.html

@@ -1,9 +1,8 @@
 {% include toc-status.html %}
 
 {% if enable_toc %}
-  <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>
+  <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>
     <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 text-muted">
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
             <div class="access">
               {% include_cached update-list.html lang=lang %}
               {% include_cached trending-tags.html lang=lang %}

_sass/abstracts/_placeholders.scss

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

_sass/layout/_panel.scss

@@ -6,6 +6,7 @@
   top: 2rem;
   transition: top 0.2s ease-in-out;
   margin-top: 3rem;
+  margin-bottom: 4rem;
 
   &:only-child {
     position: -webkit-sticky;
@@ -13,12 +14,11 @@
   }
 
   > section {
-    @extend %panel-border;
-
     padding-left: 1rem;
+    border-left: 1px solid var(--main-border-color);
 
-    &:not(:first-child) {
-      margin-top: 4rem;
+    &:not(:last-child) {
+      margin-bottom: 4rem;
     }
   }
 
@@ -48,10 +48,6 @@
     }
   }
 
-  > :last-child {
-    margin-bottom: 4rem;
-  }
-
   @include bp.lt(bp.get(xl)) {
     display: none;
   }

_sass/main.bundle.scss

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

_sass/pages/_home.scss

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

_sass/pages/_post.scss

@@ -246,26 +246,14 @@ header {
 }
 
 /* TOC panel */
-
-%top-cover {
-  content: '';
-  display: block;
-  position: sticky;
-  top: 0;
-  width: 100%;
-  height: 3rem;
-  background: linear-gradient(var(--main-bg) 50%, transparent);
-}
-
 #toc-wrapper {
-  top: 0;
+  border-left: 1px solid rgba(158, 158, 158, 0.17);
+  position: -webkit-sticky;
+  position: sticky;
+  top: 4rem;
   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;
@@ -278,10 +266,6 @@ header {
         margin: 0.4rem 0;
       }
 
-      &:first-child {
-        margin-top: 0;
-      }
-
       a {
         padding: 0.2rem 0 0.2rem 1.25rem;
       }
@@ -311,6 +295,7 @@ header {
       &::before {
         display: inline-block;
         width: 1px;
+        left: -1px;
         height: 1.25rem;
         background-color: var(--toc-highlight) !important;
       }
@@ -320,30 +305,6 @@ 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,21 +1,5 @@
 # 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.2.0"
+  spec.version       = "7.1.1"
   spec.authors       = ["Cotes Chung"]
   spec.email         = ["cotes.chung@gmail.com"]
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "7.2.0",
+  "version": "7.1.1",
   "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.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",
+    "@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",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@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.1.0",
+    "concurrently": "^9.0.1",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "husky": "^9.1.7",
-    "purgecss": "^7.0.2",
-    "rollup": "^4.27.4",
-    "semantic-release": "^24.2.0",
-    "stylelint": "^16.10.0",
+    "husky": "^9.1.6",
+    "purgecss": "^6.0.0",
+    "rollup": "^4.21.3",
+    "semantic-release": "^24.1.1",
+    "stylelint": "^16.9.0",
     "stylelint-config-standard-scss": "^13.1.0"
   },
   "prettier": {
@@ -68,6 +68,44 @@
       ]
     }
   },
+  "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/vendors';
-const output = `${DIST_PATH}/_bootstrap.scss`;
+const DIST_PATH = '_sass/vendor';
 
 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(output, result[0].css);
+      return fs.writeFile(`${DIST_PATH}/bootstrap.scss`, 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\/vendors/d" .gitignore
+  _sedi "/^_sass\/vendor/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/vendors"
+CSS_DIST="_sass/vendor"
 JS_DIST="assets/js/dist"
 
 FILES=(