Migrate frontend to Vite 5 + Bootstrap 5 + Vue 3

[mingtsay]

Summary

• Migrate the entire frontend build pipeline from Bootstrap 3 + Vue 2 + jQuery + jekyll-babel to Vite 5 + Bootstrap 5 + Vue 3 + TypeScript, based on tuna/master upstream
• Upgrade Jekyll 3 (github-pages gem) to Jekyll 4.3 with vite_ruby integration
• Full English localization of all templates, pages, and Vue components with TWDS branding
• Add @vitejs/plugin-legacy for SystemJS fallback on older browsers

Changes

Build system:

• Add Vite 5 build pipeline (_vite.config.mjs, jekyll-vite.rb plugin)
• Rewrite Gemfile for standalone Jekyll 4.3 + vite_ruby
• Add package.json with all Node.js dependencies
• Update build.sh and rebuild-iso.sh to use twds/mirror-web Docker image
• Update Dockerfiles for Node.js + Vite build
• Add .nvmrc (Node 22)

Frontend source (_src/):

• 8 Vue 3 SFC components (DiskBar, IsoModal, MainMirrorList, SearchBox, Sponsors, etc.)
• TypeScript entrypoints replacing legacy ES6 scripts
• SCSS styles with Bootstrap 5 variables
• NJS build targets for NGINX JavaScript

Templates & pages:

• Convert all _includes/ and _layouts/ to Bootstrap 5 markup
• Translate all Chinese UI text to English (templates, Vue components, mirror descriptions)
• Update TWDS sponsors (Gold: Sky Digital, TWDS, YUAN JHEN + personal sponsors via Vue 3 component)
• Add official mirror badges (blue checkmarks) support
• Remove help/news system (not used by TWDS)
• Update _data/options.yml label classes (label-* → text-bg-*)

Infrastructure:

• Fix gen_robot.sh default host and add linuxbrew-bottles exclusion
• Fix select.rb nil guard for missing help category
• Migrate genisolist to mirrorz-org/genisolist submodule

Documentation:

• Rewrite README with TWDS-specific documentation, including prerequisites, local dev, production build, and Docker build instructions

Cleanup:

• Remove all Bootstrap 3 static assets (~50 files: JS, CSS, fonts)

Test plan

• npm ci installs successfully
• bundle install installs successfully
• bundle exec jekyll build completes without errors
• Main page mirror list renders correctly (Vue 3 app)
• Legacy page (/legacy_index.html) works with SystemJS fallback
• ISO download modal functions properly
• Sync status page (/status/) displays correctly
• All UI text is in English (no residual Chinese)
• Sponsor section and progress bar display correctly
• Official mirror badges (blue checkmarks) show up
• Docker build succeeds

🤖 Generated with Claude Code

[Copilot]

Pull request overview

This PR modernizes the entire frontend build pipeline from a legacy Bootstrap 3 + Vue 2 + jQuery stack to Vite 5 + Bootstrap 5 + Vue 3 + TypeScript, while upgrading Jekyll from 3 to 4.3 with vite_ruby integration. All UI text has been translated to English with TWDS-specific branding, and the project now supports legacy browsers via SystemJS fallback.

Changes:

• Complete frontend rewrite: Vue 2 → Vue 3 SFC, jQuery → vanilla JS/Vue, Bootstrap 3 → Bootstrap 5, legacy ES6 → TypeScript
• Build system upgrade: Jekyll 3 → Jekyll 4.3, add Vite 5 pipeline with vite_ruby plugin, remove jekyll-babel
• English localization of all templates, components, and mirror descriptions with TWDS branding

Reviewed changes

Copilot reviewed 93 out of 131 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
_vite.config.mjs	New Vite 5 configuration with Vue 3, TypeScript, legacy plugin, and NJS build support
package.json	Node.js dependencies for Vite 5, Bootstrap 5, Vue 3, TypeScript, and polyfills
Gemfile	Standalone Jekyll 4.3 setup with vite_ruby integration
_plugins/jekyll-vite.rb	Custom Jekyll plugin for Vite integration
_src/entrypoints/*.ts	TypeScript entrypoints replacing legacy ES6 scripts
_src/components/*.vue	Vue 3 SFC components for mirror list, ISO modal, sponsors, etc.
_src/styles/*.scss	Bootstrap 5 SCSS with custom variables
_layouts/index.html	Bootstrap 5 markup with Liquid templates for legacy/modern rendering
_includes/*.html	Updated templates for Bootstrap 5 classes and Vite script loading
_data/options.yml	Updated label classes from Bootstrap 3 (label-*) to Bootstrap 5 (text-bg-*)
status.html	Simplified markup with Vue 3 component mounts
404.html	Added AI/LLM warning note and TypeScript entrypoint
gen_robot.sh	Fixed default host to mirror.twds.com.tw and excluded linuxbrew-bottles
_plugins/select.rb	Added nil guard for missing help category
geninfo/z-geninfo	Added mirrorz-org/genisolist submodule
README.md	Comprehensive TWDS-specific documentation
Dockerfile.build	Updated for Node.js 22 and Vite build
.nvmrc	Node.js version specification
static/js/*.es6	Removed legacy ES6 scripts
static/css/*.scss	Removed legacy SCSS files
static/js/*.min.js	Removed legacy vendor libraries

Comments suppressed due to low confidence (1)

status.html:1

• Corrected spelling of 'jsEntry' to 'jsEntrypoint' for consistency with standard naming conventions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The English description is generic. Consider adding more specific details about what Ubuntu repositories are mirrored (e.g., 'Ubuntu packages and official repositories including main, universe, restricted, and multiverse').

Suggested change

	desc: Popular Linux distribution Ubuntu packages and official repositories
	desc: Popular Linux distribution Ubuntu packages and official repositories, including main, universe, restricted, and multiverse components

[Copilot]

The integrity attribute contains a placeholder hash value ('OnlyforlegacybrowsersAAAAAAAAAAAAAAAAAAAAAA='). This will cause the stylesheet to fail integrity checks in modern browsers that support SRI. While the script later removes/reloads it, this could cause a flash of unstyled content or unexpected behavior. Consider using a valid hash or removing the integrity attribute entirely if it's intentionally invalid.

Suggested change

	<link rel="stylesheet" id="style-polyfill-bs3" title="style-polyfill-bs3" href="{% vite_asset_path bs3-polyfill.scss %}" media="screen" integrity="sha256-OnlyforlegacybrowsersAAAAAAAAAAAAAAAAAAAAAA=" />
	<link rel="stylesheet" id="style-polyfill-bs3" title="style-polyfill-bs3" href="{% vite_asset_path bs3-polyfill.scss %}" media="screen" />

[Haraguroicha]

here should be remove integrity attribute placeholder to make sure that stylesheets will be load successful

[mingtsay]

This integrity attribute with a deliberately invalid hash is intentional. It serves as a browser capability detection mechanism:

• Modern browsers support SRI (Subresource Integrity), so they will reject loading this stylesheet because the hash doesn't match — which is the desired behavior, since modern browsers don't need the BS3 polyfill.
• Legacy browsers don't support SRI, so they ignore the integrity attribute entirely and load the polyfill stylesheet normally — which is exactly what we want.

The hash value sha256-OnlyforlegacybrowsersAAAAAAAAAAAAAAAAAAAAAA= is self-documenting: it's only meant to be loaded by legacy browsers. Removing it would cause the polyfill to load on all browsers, defeating its purpose.

[pan93412]

That is quite a dirty method! Is it the upstream practice?

[Copilot]

Consider also checking for empty arrays to make the function more robust. The current implementation will still attempt to map over an empty array, which while not an error, could be handled more explicitly: return [] if input.nil? || input.empty?

Suggested change

	return [] if input.nil?
	return [] if input.nil? || input.empty?