I'm back, with help from Claude

chore: upgrade dev dependencies and fix deprecation warnings

- Bump npm devDependencies to latest major versions:
  @commitlint/cli 8→21, eslint 6→10, husky 4→9,
  stylelint 13→17, stylelint-config-standard 19→40
- Migrate ESLint config from .eslintrc to flat config (eslint.config.mjs)
- Update stylelint config for v17: remove deprecated stylistic rules
- Migrate husky from v4 package.json hooks to v9 .husky/ directory
- Replace Sass '/' division with math.div() in _variables.scss,
  _grid.scss, _toc.scss, _extensions.scss
- Tighten gem dependency lower bounds to match GitHub Pages versions
- Fix JS lint issues: unused variable, hasOwnProperty call
- Update copyright year from 2021 to 2026 in all locale files
- Add CLAUDE.md with project architecture documentation

Author: kitian616

.eslintrc

@@ -0,0 +1 @@
+npx --no -- commitlint --edit "$1"

.husky/commit-msg

@@ -1,42 +1,53 @@
-
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-recommended-scss"
+  ],
   "plugins": [
     "stylelint-order"
   ],
   "rules": {
+    "alpha-value-notation": "number",
     "at-rule-empty-line-before": null,
-    "at-rule-name-space-after": "always",
-    "at-rule-no-vendor-prefix": true,
-    "at-rule-semicolon-space-before": "never",
-    "block-closing-brace-empty-line-before": null,
-    "block-closing-brace-newline-after": null,
-    "block-opening-brace-space-before": null,
+    "at-rule-no-vendor-prefix": null,
+    "color-function-alias-notation": null,
+    "color-function-notation": "legacy",
     "color-named": "never",
-    "color-hex-case": "lower",
     "color-hex-length": "short",
-    "declaration-block-semicolon-newline-after": "always-multi-line",
-    "declaration-block-semicolon-newline-before": "never-multi-line",
-    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-single-line-max-declarations": null,
     "declaration-empty-line-before": null,
-    "declaration-no-important": true,
+    "declaration-no-important": null,
     "font-family-name-quotes": "always-where-recommended",
     "font-weight-notation": null,
     "function-url-no-scheme-relative": true,
     "function-url-quotes": "always",
+    "import-notation": "string",
     "length-zero-no-unit": true,
-    "max-empty-lines": 2,
-    "max-line-length": null,
     "media-feature-name-no-vendor-prefix": true,
-    "media-feature-parentheses-space-inside": "never",
-    "media-feature-range-operator-space-after": "always",
-    "media-feature-range-operator-space-before": "never",
     "no-descending-specificity": null,
-    "no-duplicate-selectors": true,
-    "number-leading-zero": "never",
-    "media-feature-name-no-unknown": [true, {
-      "ignoreMediaFeatureNames": ["prefers-reduced-motion"]
-    }],
+    "no-duplicate-selectors": null,
+    "no-empty-source": null,
+    "property-no-deprecated": null,
+    "property-no-vendor-prefix": null,
+    "rule-empty-line-before": null,
+    "selector-class-pattern": null,
+    "selector-max-attribute": 2,
+    "selector-max-class": 4,
+    "selector-max-combinators": 4,
+    "selector-max-compound-selectors": 4,
+    "selector-max-id": 0,
+    "selector-max-specificity": null,
+    "selector-max-type": 2,
+    "selector-max-universal": 1,
+    "selector-no-qualifying-type": null,
+    "selector-no-vendor-prefix": null,
+    "shorthand-property-no-redundant-values": null,
+    "value-keyword-case": null,
+    "value-no-vendor-prefix": null,
+    "scss/at-extend-no-missing-placeholder": null,
+    "scss/at-if-no-null": null,
+    "scss/comment-no-empty": null,
+    "scss/no-global-function-names": null,
     "order/properties-order": [
       "position",
       "top",
@@ -247,30 +258,6 @@
       "animation-fill-mode",
       "fill",
       "stroke"
-    ],
-    "property-no-vendor-prefix": true,
-    "rule-empty-line-before": null,
-    "selector-attribute-quotes": "always",
-    "selector-list-comma-newline-after": "always-multi-line",
-    "selector-list-comma-newline-before": "never-multi-line",
-    "selector-list-comma-space-after": "always-single-line",
-    "selector-list-comma-space-before": "never-single-line",
-    "selector-max-attribute": 2,
-    "selector-max-class": 4,
-    "selector-max-combinators": 4,
-    "selector-max-compound-selectors": 4,
-    "selector-max-empty-lines": 1,
-    "selector-max-id": 0,
-    "selector-max-specificity": null,
-    "selector-max-type": 2,
-    "selector-max-universal": 1,
-    "selector-no-qualifying-type": null,
-    "selector-no-vendor-prefix": true,
-    "string-quotes": "double",
-    "value-keyword-case": "lower",
-    "value-list-comma-newline-after": "never-multi-line",
-    "value-list-comma-newline-before": "never-multi-line",
-    "value-list-comma-space-after": "always",
-    "value-no-vendor-prefix": true
+    ]
   }
 }

.stylelintrc

@@ -0,0 +1,93 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+# Build the production site
+npm run build
+
+# Serve locally with live reload (default)
+npm run serve
+
+# Serve with tracing output
+npm run default
+
+# Serve docs/demo site (dev, beta, production variants)
+npm run dev          # docs/_config.dev.yml
+npm run demo-dev     # docs/_config.yml (dev env)
+npm run demo-prod    # docs/_config.yml (production env)
+
+# Lint JS in _includes/**/*.js
+npm run eslint
+npm run eslint-fix
+
+# Lint SCSS in _sass/**/*.scss
+npm run stylelint
+npm run stylelint-fix
+
+# Build & publish gem (release flow only)
+npm run gem-build
+npm run gem-push
+
+# Docker-based development
+npm run docker-dev:default
+npm run docker-dev:dev
+npm run docker-dev:demo-dev
+
+# Docker production build + serve
+npm run docker-prod:build
+npm run docker-prod:serve
+```
+
+**CI**: Travis builds the docs site via `JEKYLL_ENV=production bundle exec jekyll build --config ./docs/_config.yml` and deploys to `gh-pages` branch.
+
+**Commit style**: Conventional Commits via commitlint (`feat:`, `fix:`, `docs:`, `refactor:`, `release:`, etc.).
+
+## Project Architecture
+
+### Skin System
+6 built-in skins (`default`, `dark`, `forest`, `ocean`, `chocolate`, `orange`) + 5 highlight themes. A skin is a SCSS file at `_sass/skins/_<name>.scss` that defines CSS custom properties (colors, fonts, borders). Selected via `text_skin` in `_config.yml`. The main entry point `assets/css/main.scss` dynamically `@import`s the active skin.
+
+### Layout Inheritance
+Layouts in `_layouts/` form a chain: `none` ← `base` ← `page` ← `article` / `home` / `landing` / `articles` / `archive` / `404`. `base.html` is the root — it sets up the HTML shell, analytics, head, and core JS utilities. Page-level layouts extend it and add content wrappers.
+
+### Include System
+`_includes/` is organized by concern:
+- **article/** — header, footer, info, list components
+- **aside/** — sidebar content (TOC, affix)
+- **scripts/** — vanilla JS (no framework): lib/ (third-party), utils/, components/ (search, lightbox, sidebar)
+- **head/**, **footer/**, **sidebar/** — structural includes
+- **comments-providers/**, **analytics-providers/**, **search-providers/**, **sharing-providers/**, **pageview-providers/** — pluggable third-party integrations
+
+### JavaScript Architecture
+Vanilla JS (no build step, no framework). Scripts are included directly via Liquid `{%- include scripts/...js -%}` in `base.html`. The JS is split into:
+- **lib/** — isolated utilities (lazyload, throttle, affix, TOC, swiper, modal, gallery, scroll-to)
+- **components/** — stateful UI (search, lightbox, sidebar)
+- **utils/** — helpers (image loading, general utils)
+- Page-level scripts: `article.js`, `page.js`, `home.js`, `archieve.js`
+
+No bundler — all JS is served raw from `_includes/scripts/`.
+
+### SCSS Organization
+`_sass/` is structured as:
+- **skins/** — color/font themes (each skin is a standalone variable file)
+- **common/** — shared variables, functions, classes, reset, print styles, reusable components (button, card, modal, gallery, etc.)
+- **components/** — page-level component styles (header, footer, search, lightbox, etc.)
+- **layout/** — page layout styles (base, page, article, home, archive, etc.)
+- **additional/** — optional utility styles (alerts, tags, photo frames)
+- **animate/** — keyframe animations (fade-in variants)
+- **custom.scss** — user overrides placeholder
+
+### Content & Data
+- `_data/` — YAML files for authors, licenses, locale (i18n), navigation, and theme variables
+- `_posts/` — sample/blog posts directory
+- `docs/` — standalone documentation site (has its own `_config.yml`, posts, sample pages, and shared `_includes` from root via Travis `before_script`)
+- `test/` — minimal test site (used for smoke testing the theme)
+
+### Building a Release
+1. Update version in `jekyll-text-theme.gemspec`, `package.json`, and `_includes/scripts/variables.html`
+2. Update `CHANGELOG.md`
+3. Run `npm run gem-build && npm run gem-push`
+4. Tag and push with `release: vx.x.x` commit message

CLAUDE.md

@@ -19,7 +19,7 @@ en: &EN
   FOLLOW_US               : "Follow us on [NAME]."
   EMAIL_ME                : "Send me an Email."
   EMAIL_US                : "Send us an Email."
-  COPYRIGHT_DATES         : "2021"
+  COPYRIGHT_DATES         : "2026"
 
 en-GB:
   <<: *EN
@@ -50,7 +50,7 @@ zh-Hans: &ZH_HANS
   FOLLOW_US               : "在 [NAME] 上关注我们。"
   EMAIL_ME                : "给我发邮件。"
   EMAIL_US                : "给我们发邮件。"
-  COPYRIGHT_DATES         : "2021"
+  COPYRIGHT_DATES         : "2026"
 
 zh:
   <<: *ZH_HANS
@@ -79,7 +79,7 @@ zh-Hant: &ZH_HANT
   FOLLOW_US               : "在 [NAME] 上關注我們。"
   EMAIL_ME                : "給我發郵件。"
   EMAIL_US                : "給我們發郵件。"
-  COPYRIGHT_DATES         : "2021"
+  COPYRIGHT_DATES         : "2026"
 
 zh-TW:
   <<: *ZH_HANT
@@ -106,7 +106,7 @@ ko: &KO
   FOLLOW_US               : "[NAME]에서 팔로우하기"
   EMAIL_ME                : "이메일 보내기"
   EMAIL_US                : "이메일 보내기"
-  COPYRIGHT_DATES         : "2021"
+  COPYRIGHT_DATES         : "2026"
 
 ko-KR:
   <<: *KO
@@ -131,7 +131,7 @@ fr: &FR
   FOLLOW_US               : "Suivez-nous sur [NAME]."
   EMAIL_ME                : "Envoyez-moi un courriel."
   EMAIL_US                : "Envoyez-nous un courriel"
-  COPYRIGHT_DATES         : "2021"
+  COPYRIGHT_DATES         : "2026"
   DONATE                  : "Faites un don de [NAME]."
 
 fr-BE:
@@ -164,6 +164,6 @@ tr: &TR
   FOLLOW_US               : "Bizi [NAME] üzerinden takip edin."
   EMAIL_ME                : "Bana email ile ulaşın."
   EMAIL_US                : "Bize email ile ulaşın."
-  COPYRIGHT_DATES         : "2021"
+  COPYRIGHT_DATES         : "2026"
 
 # @end locale config

_data/locale.yml

@@ -3,7 +3,7 @@
   function queryString() {
     // This function is anonymous, is executed immediately and
     // the return value is assigned to QueryString!
-    var i = 0, queryObj = {}, pair;
+    var i, queryObj = {}, pair;
     var queryStr = window.location.search.substring(1);
     var queryArr = queryStr.split('&');
     for (i = 0; i < queryArr.length; i++) {

_includes/scripts/archieve.js

@@ -15,7 +15,7 @@
 
     var $searchBox = null;
     var $searchInput = null;
-    var $searchClear = null;
+    var $searchClear;
 
     function getModalVisible() {
       return modalVisible;

_includes/scripts/components/search.js

@@ -58,7 +58,7 @@
     var createNode = function(name, attrs) {
       var node = doc.createElement(name), attr;
       for (attr in attrs) {
-        if (attrs.hasOwnProperty(attr)) {
+        if (Object.prototype.hasOwnProperty.call(attrs, attr)) {
           node.setAttribute(attr, attrs[attr]);
         }
       }

_includes/scripts/lib/lazyload.js

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 $base: (
   font-family:            (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
   font-family-code:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
@@ -114,16 +116,16 @@ $button-height-sm:        1.5rem;
 $button-height-xs:        1.2rem;
 
 $button: (
-  padding-y-xl:           ($button-height-xl - map-get($base, font-size-xl)) / 2,
-  padding-x-xl:           $button-height-xl / 3,
-  padding-y-lg:           ($button-height-lg - map-get($base, font-size-lg)) / 2,
-  padding-x-lg:           $button-height-lg / 3,
-  padding-y:              ($button-height - map-get($base, font-size)) / 2,
-  padding-x:              $button-height / 3,
-  padding-y-sm:           ($button-height-sm - map-get($base, font-size-sm)) / 2,
-  padding-x-sm:           $button-height-sm / 3,
-  padding-y-xs:           ($button-height-xs - map-get($base, font-size-xs)) / 2,
-  padding-x-xs:           $button-height-xs / 3,
+  padding-y-xl:           math.div($button-height-xl - map-get($base, font-size-xl), 2),
+  padding-x-xl:           math.div($button-height-xl, 3),
+  padding-y-lg:           math.div($button-height-lg - map-get($base, font-size-lg), 2),
+  padding-x-lg:           math.div($button-height-lg, 3),
+  padding-y:              math.div($button-height - map-get($base, font-size), 2),
+  padding-x:              math.div($button-height, 3),
+  padding-y-sm:           math.div($button-height-sm - map-get($base, font-size-sm), 2),
+  padding-x-sm:           math.div($button-height-sm, 3),
+  padding-y-xs:           math.div($button-height-xs - map-get($base, font-size-xs), 2),
+  padding-x-xs:           math.div($button-height-xs, 3),
 
   pill-radius:            6rem,
 

_sass/common/_variables.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 $grid-columns: 12;
 
 .grid-container {
@@ -18,7 +20,7 @@ $grid-columns: 12;
     @include flex(1);
   } @else {
     @include flex(none);
-    width: percentage($columns / $grid-columns);
+    width: percentage(math.div($columns, $grid-columns));
   }
 }