Merge pull request #2732 from freeCodeCamp/webp

Re-encode scraped images as WebP

Author: simon04

.devcontainer/devcontainer.json

@@ -1,7 +1,7 @@
 {
   "image": "mcr.microsoft.com/devcontainers/ruby:4",
   "postAttachCommand": "bundle exec rackup",
-  "postCreateCommand": "bundle install",
+  "postCreateCommand": "sudo apt-get update && sudo apt-get install -y webp && bundle install",
   "mounts": [
     "source=${localEnv:HOME}/.claude,target=/home/vscode/.claude,type=bind"
   ],

.github/workflows/test.yml

@@ -11,6 +11,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+    - name: Install libwebp tools
+      run: sudo apt-get update && sudo apt-get install -y webp
     - name: Set up Ruby
       uses: ruby/setup-ruby@95ef2b042f9d7a56d8268cba8559e2842e2ad01b # v1.321.0
       with:

Dockerfile

@@ -5,7 +5,7 @@ ENV ENABLE_SERVICE_WORKER=true
 WORKDIR /devdocs
 
 RUN apt-get update && \
-    apt-get -y install git nodejs libcurl4 libarchive-tools && \
+    apt-get -y install git nodejs libcurl4 libarchive-tools webp && \
     gem install bundler && \
     rm -rf /var/lib/apt/lists/*
 

Dockerfile-alpine

@@ -7,7 +7,7 @@ WORKDIR /devdocs
 
 COPY . /devdocs
 
-RUN apk --update add nodejs build-base libstdc++ libarchive-tools git zlib-dev libcurl && \
+RUN apk --update add nodejs build-base libstdc++ libarchive-tools git zlib-dev libcurl libwebp-tools && \
     gem install bundler && \
     bundle config set path.system true && \
     bundle config set without 'test' && \

assets/javascripts/app/config.js.erb

@@ -16,7 +16,7 @@ export const config = {
   version: <%= Time.now.to_i %>,
   release: <%= Time.now.utc.httpdate.to_json %>,
   mathml_stylesheet: '/mathml.css',
-  favicon_spritesheet: '<%= image_path('sprites/docs.png') %>',
+  favicon_spritesheet: '<%= image_path('sprites/docs.webp') %>',
   service_worker_path: '/service-worker.js',
   service_worker_enabled: <%= App.environment == :production || ENV['ENABLE_SERVICE_WORKER'] == 'true' %>,
 }

assets/stylesheets/components/_environment.scss.erb

@@ -1,3 +1,3 @@
 ._hide-in-development {
-  <%= App.environment != :production ? 'display: none;' : '' %>
+  <%= environment != :production ? 'display: none;' : '' %>
 }

assets/stylesheets/global/_icons.scss.erb

@@ -14,12 +14,12 @@
   display: block;
   width: 1rem;
   height: 1rem;
-  background-image: image-url('sprites/docs.png');
+  background-image: image-url('sprites/docs.webp');
   background-size: <%= manifest['icons_per_row'] %>rem <%= manifest['icons_per_row'] %>rem;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-  %doc-icon { background-image: image-url('sprites/docs@2x.png'); }
+  %doc-icon { background-image: image-url('sprites/docs@2x.webp'); }
 }
 
 html._theme-dark {

docs/filter-reference.md

@@ -82,6 +82,7 @@ The `call` method must return either `doc` or `html`, depending on the type of f
 * [`InnerHtmlFilter`](https://github.com/freeCodeCamp/devdocs/blob/main/lib/docs/filters/core/inner_html.rb) — converts the document to a string
 * [`CleanTextFilter`](https://github.com/freeCodeCamp/devdocs/blob/main/lib/docs/filters/core/clean_text.rb) — removes empty nodes
 * [`AttributionFilter`](https://github.com/freeCodeCamp/devdocs/blob/main/lib/docs/filters/core/attribution.rb) — appends the license info and link to the original document
+* [`ImagesFilter`](https://github.com/freeCodeCamp/devdocs/blob/main/lib/docs/filters/core/images.rb) — downloads and inlines images as data URIs, optimizing them and re-encoding PNGs and GIFs as lossless WebP and JPEGs as lossy WebP
 * [`TitleFilter`](https://github.com/freeCodeCamp/devdocs/blob/main/lib/docs/filters/core/title.rb) — prepends the document with a title (disabled by default)
 * [`EntriesFilter`](https://github.com/freeCodeCamp/devdocs/blob/main/lib/docs/filters/core/entries.rb) — abstract filter for extracting the page's metadata
 

docs/scraper-reference.md

@@ -109,6 +109,7 @@ Default `html_filters`:
 
 Default `text_filters`:
 
+* [`ImagesFilter`](https://github.com/freeCodeCamp/devdocs/blob/main/lib/docs/filters/core/images.rb) — downloads and inlines images as data URIs, optimizing them and re-encoding PNGs and GIFs as lossless WebP and JPEGs as lossy WebP
 * [`InnerHtmlFilter`](https://github.com/freeCodeCamp/devdocs/blob/main/lib/docs/filters/core/inner_html.rb) — converts the document to a string
 * [`CleanTextFilter`](https://github.com/freeCodeCamp/devdocs/blob/main/lib/docs/filters/core/clean_text.rb) — removes empty nodes
 * [`AttributionFilter`](https://github.com/freeCodeCamp/devdocs/blob/main/lib/docs/filters/core/attribution.rb) — appends the license info and link to the original document

lib/app.rb

@@ -56,7 +56,7 @@ class App < Sinatra::Application
                         .sort
                         .freeze
 
-    set :assets_compile, %w(*.png docs.json vendor.js unsupported.js application.css application-dark.css) + js_modules
+    set :assets_compile, %w(sprites/docs.webp sprites/docs@2x.webp docs.json vendor.js unsupported.js application.css application-dark.css) + js_modules
 
     require 'json'
     set :docs_prefix, 'docs'
@@ -267,8 +267,8 @@ def service_worker_asset_urls
         javascript_path('vendor'),
         javascript_path('unsupported'),
         stylesheet_path('application'),
-        image_path('sprites/docs.png'),
-        image_path('sprites/docs@2x.png'),
+        image_path('sprites/docs.webp'),
+        image_path('sprites/docs@2x.webp'),
       ].compact
     end