[refactor] Update to advanced asset pipeline

.gitignore

@@ -17,3 +17,10 @@
 .DS_Store
 
 *.swp
+
+# Vite Ruby
+/public/vite*
+node_modules
+# Vite uses dotenv and suggests to ignore local-only env files. See
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+*.local

Gemfile

@@ -10,8 +10,8 @@ gem 'middleman-syntax', '~> 3.0'
 
 gem 'middleman-blog', '~> 4.0', '>= 4.0.2'
 gem 'nokogiri'
-gem 'middleman-sprockets'
-gem 'sprockets', '3.7.2'
+gem "vite_padrino"
+gem "vite_ruby"
 gem 'haml', '~> 5.2', '>= 5.2.2'
 
 # Live-reloading plugin

Gemfile.lock

@@ -19,6 +19,7 @@ GEM
     concurrent-ruby (1.1.10)
     contracts (0.13.0)
     dotenv (2.8.1)
+    dry-cli (0.7.0)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
@@ -89,9 +90,6 @@ GEM
       middleman-core (>= 3.0.2)
       multi_json (~> 1.0)
       rack-livereload
-    middleman-sprockets (4.1.1)
-      middleman-core (~> 4.0)
-      sprockets (>= 3.0)
     middleman-syntax (3.3.0)
       middleman-core (>= 3.2)
       rouge (~> 3.2)
@@ -117,15 +115,14 @@ GEM
     rack (2.2.4)
     rack-livereload (0.3.17)
       rack
+    rack-proxy (0.7.4)
+      rack
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rouge (3.30.0)
     sass (3.4.25)
     servolux (0.13.0)
-    sprockets (3.7.2)
-      concurrent-ruby (~> 1.0)
-      rack (> 1, < 3)
     temple (0.9.1)
     thor (1.2.1)
     thread_safe (0.3.6)
@@ -134,6 +131,13 @@ GEM
       thread_safe (~> 0.1)
     uglifier (3.2.0)
       execjs (>= 0.3.0, < 3)
+    vite_padrino (3.0.0)
+      vite_ruby (~> 3.0)
+    vite_ruby (3.2.12)
+      dry-cli (~> 0.7.0)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
+    zeitwerk (2.6.6)
 
 PLATFORMS
   ruby
@@ -146,11 +150,11 @@ DEPENDENCIES
   middleman-deploy (~> 2.0.0.pre.alpha)
   middleman-disqus
   middleman-livereload (~> 3.1.0)
-  middleman-sprockets
   middleman-syntax (~> 3.0)
   nokogiri
-  sprockets (= 3.7.2)
+  vite_padrino
+  vite_ruby
   wdm (~> 0.1.0)
 
 BUNDLED WITH
-   1.16.1
+   1.17.2

Procfile

@@ -0,0 +1,2 @@
+vite: bin/vite build
+web: bundle exec middleman server

Procfile.dev

@@ -0,0 +1,2 @@
+vite: bin/vite dev
+web: bundle exec middleman server

README.md

@@ -4,24 +4,30 @@
 
 This website is powered by [Middleman](http://middlemanapp.com).
 
-
 ## How to build the website?
 
-* Clone the repository
-* Change to **source** branch
-```
+- Clone the repository
+- Change to **source** branch
+
+```bash
 git checkout source
 ```
-* Install all the dependencies
-```
+
+- Install all the dependencies
+
+```bash
 bundle install
 ```
-* Run the server
-```
-middleman server
-```
-* The website is in http://localhost:4567
-* To deploy the site:
+
+- Run the server and visit http://localhost:4567
+
+```bash
+gem install foreman
+foreman start -f Procfile.dev
 ```
+
+- To deploy the site:
+
+```bash
 middleman deploy
 ```

bin/vite

@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'vite' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+bundle_binstub = File.expand_path("../bundle", __FILE__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 300) =~ /This file was generated by Bundler/
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("vite_ruby", "vite")

config.rb

@@ -4,6 +4,13 @@
 require 'builder'
 require 'uri'
 # Time.zone = "UTC"
+require 'vite_ruby'
+require 'vite_padrino/tag_helpers'
+
+configure :development do
+  use ViteRuby::DevServerProxy, ssl_verify_none: true
+end
+helpers VitePadrino::TagHelpers
 
 activate :blog do |blog|
   # This will add a prefix to all links, template references and source paths
@@ -81,12 +88,6 @@ def trivia? articulo
    end
  end
 
-set :css_dir, 'stylesheets'
-
-set :js_dir, 'javascripts'
-
-set :images_dir, 'images'
-
 # Build-specific configuration
 configure :build do
   # For example, change the Compass output style for deployment
@@ -118,7 +119,6 @@ def trivia? articulo
 activate :i18n, langs: [:es]
 
 activate :syntax
-activate :sprockets
 
 set :markdown_engine, :kramdown
 

config/vite.json

@@ -0,0 +1,16 @@
+{
+  "all": {
+    "sourceCodeDir": "frontend",
+    "watchAdditionalPaths": []
+  },
+  "development": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-dev",
+    "port": 3036
+  },
+  "test": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-test",
+    "port": 3037
+  }
+}

frontend/entrypoints/application.js

@@ -0,0 +1,8 @@
+// To see this message, follow the instructions for your Ruby framework.
+//
+// When using a plain API, perhaps it's better to generate an HTML entrypoint
+// and link to the scripts and stylesheets, and let Vite transform it.
+console.log("Vite ⚡️ Ruby and Middleman");
+
+import "~/stylesheets/all.scss";
+import "~/javascripts/app";

frontend/javascripts/app.js

@@ -0,0 +1,15 @@
+console.log("start");
+import "./vendor/jquery";
+import "./vendor/jquery.cookie";
+import "./vendor/fastclick";
+import "./vendor/modernizr";
+import "./vendor/placeholder";
+import "./foundation";
+import "./vendor/socialite";
+
+$(document).foundation();
+
+$(document).on("ready", function () {
+  Socialite.load("blog-social");
+});
+console.log("end");

source/stylesheets/all.css.scss → frontend/stylesheets/all.scss

@@ -5,7 +5,7 @@
 @import "foundation";
 @import "foundation-icons";
 @import "foundation/functions";
-@import "highlight.css";
+// @import "highlight.css";
 
 $main-color: #CC342D;
 $opaque-primary: #85140F;