feat: modernize dx

.devcontainer/Dockerfile

@@ -0,0 +1,15 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/ruby/.devcontainer/base.Dockerfile
+
+ARG VARIANT="3.4-bullseye"
+FROM mcr.microsoft.com/vscode/devcontainers/ruby:${VARIANT}
+
+ARG NODE_VERSION="22"
+RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"
+
+# [Optional] Uncomment this section to install additional OS packages.
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get -y install --no-install-recommends \
+    make
+
+# [Optional] Uncomment this line to install additional gems.
+# RUN gem install <your-gem-names-here>

.devcontainer/devcontainer.json

@@ -0,0 +1,18 @@
+{
+  "name": "Jekyll",
+  "build": {
+    "dockerfile": "Dockerfile"
+  },
+  "forwardPorts": [4000],
+  "postCreateCommand": "make setup",
+  "postStartCommand": "make serve",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "sissel.shopify-liquid",
+        "esbenp.prettier-vscode",
+        "ms-vscode.makefile-tools"
+      ]
+    }
+  }
+}

.github/dependabot.yml

@@ -1,24 +1,24 @@
 version: 2
 updates:
-- package-ecosystem: bundler
-  directory: "/"
-  schedule:
-    interval: weekly
-  open-pull-requests-limit: 10
-  allow:
-    - dependency-type: direct
-    - dependency-type: indirect
-  groups:
-    ruby:
-      patterns:
-        - "*"
-- package-ecosystem: 'npm'
-  directory: "/"
-  schedule:
-    interval: weekly
-  allow:
-    - dependency-type: direct
-  groups:
-    npm:
-      patterns:
-        - "*"
+  - package-ecosystem: bundler
+    directory: "/"
+    schedule:
+      interval: weekly
+    open-pull-requests-limit: 10
+    allow:
+      - dependency-type: direct
+      - dependency-type: indirect
+    groups:
+      ruby:
+        patterns:
+          - "*"
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: weekly
+    allow:
+      - dependency-type: direct
+    groups:
+      npm:
+        patterns:
+          - "*"

.github/workflows/gh-pages.yml

@@ -11,14 +11,13 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    if: github.ref != 'refs/heads/main'
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.2
+          ruby-version: 3.4
           bundler-cache: true
 
       - name: Build the site
@@ -28,26 +27,24 @@ jobs:
           ./bin/data-update
           bundle exec jekyll build
 
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: _site
+          path: _site
+
   deploy:
     runs-on: ubuntu-latest
+    needs: build
     if: github.ref == 'refs/heads/main'
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Set up Ruby
-        uses: ruby/setup-ruby@v1
+      - name: Download artifact
+        uses: actions/download-artifact@v4
         with:
-          ruby-version: 3.2
-          bundler-cache: true
-
-      - name: Build the site
-        env:
-          JEKYLL_ENV: production
-        run: |
-          ./bin/data-update
-          bundle exec jekyll build
+          name: _site
+          path: _site
 
-      - name: deploy
+      - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}

.rubocop.yml

@@ -1,6 +1,6 @@
 AllCops:
   NewCops: enable
-  TargetRubyVersion: 2.6
+  TargetRubyVersion: 3.4
   DisplayCopNames: true
 
 Style/DoubleNegation:

Gemfile

@@ -2,7 +2,7 @@
 
 source 'https://rubygems.org'
 
-gem 'jekyll', '~> 4.4.1'
+gem 'jekyll', '~> 4.4'
 gem 'just-the-docs'
 
 gem 'html2rss', git: 'https://github.com/html2rss/html2rss.git'

Gemfile.lock

@@ -86,9 +86,13 @@ GEM
       faraday (>= 1, < 3)
     faraday-net_http (3.4.1)
       net-http (>= 0.5.0)
+    ffi (1.17.2-aarch64-linux-gnu)
     ffi (1.17.2-arm64-darwin)
     ffi (1.17.2-x86_64-linux-gnu)
     forwardable-extended (2.6.0)
+    google-protobuf (4.31.1-aarch64-linux-gnu)
+      bigdecimal
+      rake (>= 13)
     google-protobuf (4.31.1-arm64-darwin)
       bigdecimal
       rake (>= 13)
@@ -135,7 +139,7 @@ GEM
       nokogiri (~> 1.10)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    json (2.12.2)
+    json (2.13.0)
     just-the-docs (0.10.1)
       jekyll (>= 3.8.5)
       jekyll-include-cache
@@ -156,9 +160,11 @@ GEM
     mime-types (3.7.0)
       logger
       mime-types-data (~> 3.2025, >= 3.2025.0507)
-    mime-types-data (3.2025.0708)
+    mime-types-data (3.2025.0715)
     net-http (0.6.0)
       uri
+    nokogiri (1.18.8-aarch64-linux-gnu)
+      racc (~> 1.4)
     nokogiri (1.18.8-arm64-darwin)
       racc (~> 1.4)
     nokogiri (1.18.8-x86_64-linux-gnu)
@@ -199,21 +205,23 @@ GEM
       rubocop-ast (>= 1.45.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.45.1)
+    rubocop-ast (1.46.0)
       parser (>= 3.3.7.2)
       prism (~> 1.4)
     ruby-progressbar (1.13.0)
     safe_yaml (1.0.5)
     sanitize (7.0.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.16.8)
+    sass-embedded (1.89.2-aarch64-linux-gnu)
+      google-protobuf (~> 4.31)
     sass-embedded (1.89.2-arm64-darwin)
       google-protobuf (~> 4.31)
     sass-embedded (1.89.2-x86_64-linux-gnu)
       google-protobuf (~> 4.31)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
-    thor (1.3.2)
+    thor (1.4.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.6.0)
@@ -226,13 +234,15 @@ GEM
     zeitwerk (2.7.3)
 
 PLATFORMS
+  aarch64-linux
   arm64-darwin-23
+  arm64-darwin-24
   x86_64-linux
 
 DEPENDENCIES
   html2rss!
   html2rss-configs!
-  jekyll (~> 4.4.1)
+  jekyll (~> 4.4)
   jekyll-feed (~> 0.17)
   jekyll-loading-lazy
   jekyll-sitemap

assets/css/sass/base.scss

@@ -1,25 +1,55 @@
+:root {
+  --color-text: inherit;
+  --color-accent: rgba(0, 128, 0, 0.5);
+  --color-accent-bg: rgba(0, 128, 0, 0.15);
+  --color-error: #f00;
+  --color-error-bg: #fff0f0;
+  --font-family-mono: monospace;
+  --font-size-base: 1rem;
+  --line-height-base: 1.5;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --button-padding-y: 0.4em;
+  --button-padding-x: 0.75em;
+  --border-radius-sm: 0.25em;
+  --transition-border: border-color 0.2s linear;
+  --transition-shadow: box-shadow 0.2s ease-in-out;
+}
+
 #configs input {
   width: 100%;
-  font-family: monospace;
+  padding: var(--spacing-xs);
+  box-sizing: border-box;
+  line-height: var(--line-height-base);
+  font-size: var(--font-size-base);
+  color: var(--color-text);
+  font-family: var(--font-family-mono);
   background-color: transparent;
   border: 0;
   border-radius: 0;
+  outline: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .config__headline > span,
-.config__url.config__url {
+.config__url {
   hyphens: none;
   word-break: break-word;
+  overflow-wrap: break-word;
+  text-wrap: wrap;
 }
 
 .config__url em {
   padding-right: 0.125em;
   letter-spacing: -0.05em;
   opacity: 0.75;
+  font-style: italic;
 }
 
 .config__url .config__url-amp:last-child {
-  display: none;
+  display: none !important;
 }
 
 .js__copy-element {
@@ -29,27 +59,42 @@
   width: 0;
   height: 0;
   opacity: 0;
+  pointer-events: none;
+  user-select: text;
+}
 
-  &::selection {
-    background-color: transparent;
-  }
+.js__copy-element::selection {
+  background-color: transparent;
 }
 
 .noscript {
   font-weight: 600;
-  color: #f00;
+  color: var(--color-error);
+  background: var(--color-error-bg);
+  padding: var(--spacing-sm);
+  border: 1px solid var(--color-error);
 }
 
 button[data-bind-click="copy"] {
+  padding: var(--button-padding-y) var(--button-padding-x);
   border: 2px solid transparent;
-  transition: border-color 0.2s linear;
+  border-radius: var(--border-radius-sm);
+  background-color: #fff;
+  color: var(--color-text);
+  cursor: pointer;
+  font: inherit;
+  line-height: 1.2;
+  transition: var(--transition-border), var(--transition-shadow);
+}
+
+button[data-bind-click="copy"]:focus-visible {
+  outline: 2px dashed var(--color-accent);
+  outline-offset: 2px;
 }
 
-button[data-bind-click="copy"].copied {
-  &,
-  &:hover,
-  &:active {
-    border-color: rgba(0, 128, 0, 0.5);
-    box-shadow: inset 0 2px 4px rgba(0, 128, 0, 0.15);
-  }
+button[data-bind-click="copy"].copied,
+button[data-bind-click="copy"].copied:hover,
+button[data-bind-click="copy"].copied:active {
+  border-color: var(--color-accent);
+  box-shadow: inset 0 2px 4px var(--color-accent-bg);
 }