refactor: migrate jQuery and Bootstrap to Vanilla JS (#17)

elct9620 · claude · web-flow · commit 3b363cdf4363 · 2026-02-14T16:59:42.000+08:00
* refactor(js): replace jQuery with Importmap, Turbo and Stimulus

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;

* ci: remove obsolete static branch from deploy trigger

The static branch has been merged and is no longer needed.

---------

Co-authored-by: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/.github/workflows/jekyll.yml b/.github/workflows/jekyll.yml
@@ -5,7 +5,6 @@ on:
   push:
     branches:
       - master
-      - static # Current branch, after merging, will be deleted
 
   workflow_dispatch:
 
diff --git a/_includes/blogs.html b/_includes/blogs.html
@@ -1,33 +1,33 @@
-<section id="blogs">
-  <div class="blog-card">
+<section id="blogs" data-controller="modal">
+  <div class="blog-card" data-controller="toggle">
     <h3 class="section-title">{{ site.data.i18n.section.blog }}</h3>
 
-    <div class="blog-list">
+    <div class="blog-list" data-toggle-target="wrapper">
       {% for post in site.posts %}
       <div class="blog{% if forloop.index > 5 %} more{% endif %}">
         <span class="blog-date">{{ post.date | date: "%b %d %Y" }}</span>
         <a href="{{ post.url }}" class="blog-title"
-           data-blog-index="{{ forloop.index0 }}">{{ post.title }}</a>
-        <div class="blog-modal-content" id="blog-content-{{ forloop.index0 }}" style="display:none">
-          <span class="content-date">{{ post.date | date: "%b %d, %Y" }}</span>
-          <h1 class="content-title">{{ post.title }}</h1>
-          {{ post.content }}
-        </div>
+           data-turbo-frame="blog-modal-content"
+           data-turbo-action="advance"
+           data-action="click->modal#open">{{ post.title }}</a>
       </div>
       {% endfor %}
     </div>
 
     {% if site.posts.size >= 5 %}
-    <button class="button-more blog-more">{{ site.data.i18n.helper.view_more }}</button>
+    <button class="button-more blog-more" data-action="click->toggle#toggle">{{ site.data.i18n.helper.view_more }}</button>
     {% endif %}
   </div>
 
-  <div id="blog-modal" class="modal fade" tabindex="-1">
+  <div id="blog-modal" class="modal fade" tabindex="-1" data-modal-target="dialog"
+       data-action="click->modal#closeOnOverlay">
     <div class="modal-dialog">
       <div class="modal-content">
-        <div class="modal-close" data-dismiss="modal" aria-label="Close"></div>
+        <div class="modal-close" data-action="click->modal#close" aria-label="Close"></div>
         <div class="modal-body">
-          <div class="content"></div>
+          <turbo-frame id="blog-modal-content">
+            <div class="content"></div>
+          </turbo-frame>
         </div>
       </div>
     </div>
diff --git a/_includes/campaigns.html b/_includes/campaigns.html
@@ -12,17 +12,23 @@ <h4 class="campaign-title">{{ campaign.title }}</h4>
       {%- endfor -%}
     </div>
 
-    <div class="campaign-photos carousel slide" data-ride="carousel" id="{{ campaign.id }}-photo">
+    <div class="campaign-photos carousel slide" id="{{ campaign.id }}-photo"
+         data-controller="carousel"
+         data-action="touchstart->carousel#onTouchStart touchend->carousel#onTouchEnd">
       <!-- Indicators -->
       <ol class="carousel-indicators">
         {% for photo in campaign.photo %}
-        <li data-slide-to="{{ forloop.index0 }}" data-target="#{{ campaign.id }}-photo"{% if forloop.first %} class="active"{% endif %}></li>
+        <li data-carousel-target="indicator"
+            data-action="click->carousel#goToIndicator"
+            {% if forloop.first %}class="active"{% endif %}></li>
         {% endfor %}
       </ol>
       <!-- Wrapper for slides -->
       <div class="carousel-inner" role="listbox">
         {% for photo in campaign.photo %}
-        <div class="item{% if forloop.first %} active{% endif %}" id="{{ campaign.id }}-photo-{{ forloop.index0 }}">
+        <div class="item{% if forloop.first %} active{% endif %}"
+             data-carousel-target="slide"
+             id="{{ campaign.id }}-photo-{{ forloop.index0 }}">
           <img src="{{ '/assets/images/campaigns/' | append: photo | relative_url }}" alt="{{ campaign.title }}" title="{{ campaign.title }}">
         </div>
         {% endfor %}
diff --git a/_includes/events.html b/_includes/events.html
@@ -1,7 +1,7 @@
-<section id="events">
+<section id="events" data-controller="toggle">
   <h3 class="section-title">{{ site.data.i18n.section.events }}</h3>
 
-  <div class="events-list">
+  <div class="events-list" data-toggle-target="wrapper">
     {% assign ended_events = site.events | where: "ended", true %}
     {% assign active_events = site.events | where_exp: "event", "event.ended != true" %}
 
@@ -64,6 +64,6 @@ <h3 class="section-title">{{ site.data.i18n.section.events }}</h3>
   </div>
 
   {% if ended_events.size > 0 %}
-  <button class="button-more events-more">{{ site.data.i18n.helper.order_events }}</button>
+  <button class="button-more events-more" data-action="click->toggle#toggle">{{ site.data.i18n.helper.order_events }}</button>
   {% endif %}
 </section>
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,24 +1,31 @@
-<nav id="affixNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
+<nav id="affixNav" class="navbar navbar-default navbar-custom navbar-fixed-top"
+     data-controller="navbar scroll">
   <div class="container-fluid">
     <div class="navbar-header page-scroll">
-      <button class="navbar-toggle" data-target="#navbar-collapse" data-toggle="collapse" type="button">
+      <button class="navbar-toggle" type="button"
+              data-action="click->navbar#toggleCollapse">
         <i class="fa fa-bars"></i>
       </button>
-      <a class="navbar-brand page-scroll" href="#cover">
+      <a class="navbar-brand page-scroll" href="#cover"
+         data-action="click->scroll#scroll">
         {% include cover/ruby_taiwan_logotype.svg %}
       </a>
     </div>
 
-    <div id="navbar-collapse" class="collapse navbar-collapse">
+    <div id="navbar-collapse" class="collapse navbar-collapse"
+         data-navbar-target="collapse">
       <ul class="nav navbar-nav navbar-right">
         <li>
-          <a class="page-scroll" href="#blogs">{{ site.data.i18n.section.blog }}</a>
+          <a class="page-scroll" href="#blogs"
+             data-action="click->scroll#scroll click->navbar#closeCollapse">{{ site.data.i18n.section.blog }}</a>
         </li>
         <li>
-          <a class="page-scroll" href="#events">{{ site.data.i18n.section.events }}</a>
+          <a class="page-scroll" href="#events"
+             data-action="click->scroll#scroll click->navbar#closeCollapse">{{ site.data.i18n.section.events }}</a>
         </li>
         <li>
-          <a class="page-scroll" href="#communities">{{ site.data.i18n.section.communities }}</a>
+          <a class="page-scroll" href="#communities"
+             data-action="click->scroll#scroll click->navbar#closeCollapse">{{ site.data.i18n.section.communities }}</a>
         </li>
         <li class="social-media">
           <a href="{{ site.data.social_media.twitter }}" target="_blank">
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>{{ page.title | default: site.title }}</title>
   {% seo %}
-  <meta content="yes" name="apple-mobile-web-app-capable">
+  <meta content="yes" name="mobile-web-app-capable">
   <meta content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 
   <!-- Favicons -->
@@ -23,10 +23,14 @@
   {{ content }}
 
   <!-- JS -->
-  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
-  <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
+  <script type="importmap" data-turbo-permanent id="importmap">
+  {
+    "imports": {
+      "@hotwired/turbo": "https://cdn.jsdelivr.net/npm/@hotwired/turbo@8/dist/turbo.es2017-esm.min.js",
+      "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3/dist/stimulus.js"
+    }
+  }
+  </script>
+  <script type="module" src="{{ '/assets/js/application.js' | relative_url }}"></script>
 </body>
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -36,12 +36,14 @@
     </div>
   </nav>
 
-  <div class="content">
-    <span class="content-date">{{ page.date | date: "%b %d, %Y" }}</span>
-    <h1 class="content-title">{{ page.title }}</h1>
-    {% include icon_ruby.svg %}
-    {{ content }}
-  </div>
+  <turbo-frame id="blog-modal-content">
+    <div class="content">
+      <span class="content-date">{{ page.date | date: "%b %d, %Y" }}</span>
+      <h1 class="content-title">{{ page.title }}</h1>
+      {% include icon_ruby.svg %}
+      {{ content }}
+    </div>
+  </turbo-frame>
 </div>
 
 {% include footer.html %}
diff --git a/_sass/style/_blog.sass b/_sass/style/_blog.sass
@@ -33,7 +33,7 @@
         @extend .flexbox
         align-items: center
         justify-content: flex-start
-      
+
         + .blog
           border-top: solid 1px $light-grey
           padding-top: 30px
@@ -71,4 +71,7 @@
           .blog-date
             background-color: $red
           .blog-title
-            color: $red
+            color: $red
+
+      &.more--visible .blog.more
+        display: flex
diff --git a/_sass/style/_events.sass b/_sass/style/_events.sass
@@ -34,6 +34,9 @@
       &.ended
         display: none
 
+    &.more--visible .event-card.ended
+      display: block
+
       .event-photo
         position: relative
         overflow: hidden
diff --git a/assets/js/application.js b/assets/js/application.js
@@ -0,0 +1,15 @@
+import "@hotwired/turbo"
+import { Application } from "@hotwired/stimulus"
+
+import ScrollController from "./controllers/scroll_controller.js"
+import NavbarController from "./controllers/navbar_controller.js"
+import ToggleController from "./controllers/toggle_controller.js"
+import ModalController from "./controllers/modal_controller.js"
+import CarouselController from "./controllers/carousel_controller.js"
+
+const application = Application.start()
+application.register("scroll", ScrollController)
+application.register("navbar", NavbarController)
+application.register("toggle", ToggleController)
+application.register("modal", ModalController)
+application.register("carousel", CarouselController)
diff --git a/assets/js/controllers/carousel_controller.js b/assets/js/controllers/carousel_controller.js
@@ -0,0 +1,125 @@
+import { Controller } from "@hotwired/stimulus"
+
+const SWIPE_THRESHOLD = 50
+const TRANSITION_FALLBACK_MS = 700
+
+export default class extends Controller {
+  static targets = ["slide", "indicator"]
+  static values = { interval: { type: Number, default: 5000 } }
+
+  connect() {
+    this.currentIndex = 0
+    this.touchStartX = 0
+    this.transitioning = false
+
+    this.observer = new IntersectionObserver(this.onVisibilityChange, {
+      threshold: 0.5,
+    })
+    this.observer.observe(this.element)
+  }
+
+  disconnect() {
+    this.stopAutoPlay()
+    this.observer?.disconnect()
+  }
+
+  onVisibilityChange = ([entry]) => {
+    if (entry.isIntersecting) {
+      this.startAutoPlay()
+    } else {
+      this.stopAutoPlay()
+    }
+  }
+
+  startAutoPlay() {
+    this.stopAutoPlay()
+    this.timer = setInterval(() => this.next(), this.intervalValue)
+  }
+
+  stopAutoPlay() {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+  }
+
+  next() {
+    if (this.transitioning) return
+    const nextIndex = (this.currentIndex + 1) % this.slideTargets.length
+    this.slideTo(nextIndex, "next")
+  }
+
+  prev() {
+    if (this.transitioning) return
+    const prevIndex =
+      (this.currentIndex - 1 + this.slideTargets.length) %
+      this.slideTargets.length
+    this.slideTo(prevIndex, "prev")
+  }
+
+  goToIndicator(event) {
+    if (this.transitioning) return
+    const index = this.indicatorTargets.indexOf(event.currentTarget)
+    if (index >= 0 && index !== this.currentIndex) {
+      const direction = index > this.currentIndex ? "next" : "prev"
+      this.slideTo(index, direction)
+      this.startAutoPlay()
+    }
+  }
+
+  slideTo(index, direction) {
+    const currentSlide = this.slideTargets[this.currentIndex]
+    const nextSlide = this.slideTargets[index]
+    if (!currentSlide || !nextSlide) return
+
+    this.transitioning = true
+
+    const orderClass = direction === "next" ? "next" : "prev"
+    const moveClass = direction === "next" ? "left" : "right"
+
+    nextSlide.classList.add(orderClass)
+    nextSlide.offsetHeight
+
+    currentSlide.classList.add(moveClass)
+    nextSlide.classList.add(moveClass)
+
+    let called = false
+    const onTransitionEnd = () => {
+      if (called) return
+      called = true
+
+      currentSlide.removeEventListener("transitionend", onTransitionEnd)
+
+      nextSlide.classList.remove(orderClass, moveClass)
+      nextSlide.classList.add("active")
+      currentSlide.classList.remove("active", moveClass)
+
+      this.transitioning = false
+    }
+
+    currentSlide.addEventListener("transitionend", onTransitionEnd)
+    setTimeout(onTransitionEnd, TRANSITION_FALLBACK_MS)
+
+    this.indicatorTargets.forEach((ind) => ind.classList.remove("active"))
+    this.indicatorTargets[index]?.classList.add("active")
+    this.currentIndex = index
+  }
+
+  onTouchStart(event) {
+    this.touchStartX = event.changedTouches[0].screenX
+  }
+
+  onTouchEnd(event) {
+    const touchEndX = event.changedTouches[0].screenX
+    const diff = this.touchStartX - touchEndX
+
+    if (Math.abs(diff) > SWIPE_THRESHOLD) {
+      if (diff > 0) {
+        this.next()
+      } else {
+        this.prev()
+      }
+      this.startAutoPlay()
+    }
+  }
+}
diff --git a/assets/js/controllers/modal_controller.js b/assets/js/controllers/modal_controller.js
diff --git a/assets/js/controllers/navbar_controller.js b/assets/js/controllers/navbar_controller.js
diff --git a/assets/js/controllers/scroll_controller.js b/assets/js/controllers/scroll_controller.js
diff --git a/assets/js/controllers/toggle_controller.js b/assets/js/controllers/toggle_controller.js
diff --git a/assets/js/main.js b/assets/js/main.js
