Skip to content

feat: replace Vue 2 + Vuetify 2 with Oat UI + vanilla JS#153

Merged
maxandersen merged 2 commits into
jbangdev:mainfrom
maxandersen:oat-migration
May 10, 2026
Merged

feat: replace Vue 2 + Vuetify 2 with Oat UI + vanilla JS#153
maxandersen merged 2 commits into
jbangdev:mainfrom
maxandersen:oat-migration

Conversation

@maxandersen
Copy link
Copy Markdown
Contributor

Summary

Remove EOL Vue 2 + Vuetify 2 stack and replace with Oat UI (~8 KB) + vanilla JavaScript.

Changes

  • Global head cleanup: Remove Vue 2, Vuetify 2, Axios, ClipboardJS, MDI fonts from templates/partials/head/custom.html (~620 KB removed from every page load)
  • AppStore page rewrite: Oat styling + vanilla JS with:
    • fetch() instead of Axios
    • navigator.clipboard instead of ClipboardJS
    • Search with URL deep-linking (?q=...)
    • Pagination (20 repo groups per page)
    • Collapsible repo groups via <details>/<summary>
    • Loading spinner, error state, clipboard toast
    • Mobile-responsive layout
  • IDE page rewrite: Vuetify v-tabs → Oat <ot-tabs> web component
  • Test fix: Add **.vscode/** to site.default-ignored-files — fixes pre-existing test failures caused by .vscode/settings.json being picked up by Roq as content (500 errors during RoqAndRoll init)

Why

  • Vue 2 reached EOL on 31 Dec 2023; Vuetify 2 is also unmaintained
  • These libraries were loaded globally on every page (~620 KB) but only used on AppStore and IDE pages
  • Oat is loaded only on pages that need it

Testing

  • mvn package — BUILD SUCCESS, all 4 tests pass
  • Verified generated HTML in target/roq/

Follow-up ideas

  • AppStore JSON could be normalized to reduce ~545 KB payload
  • Templates data (84 items) exists in JSON but has no UI — could add a Templates page
  • highlight.js in global head is v10.7.2 (old) — could modernize separately

- Remove Vue 2 (EOL), Vuetify 2, Axios, ClipboardJS, MDI fonts from
  global head (~620 KB removed from every page)
- Rewrite AppStore page: Oat + vanilla JS with fetch(), search with
  URL deep-linking (?q=), pagination, collapsible repo groups,
  clipboard toast via navigator.clipboard
- Rewrite IDE page: Vuetify v-tabs replaced with Oat <ot-tabs>
- Oat 0.6.1 loaded only on pages that need it (not globally)
- Fix pre-existing test failures: add **.vscode/** to ignored files
  (was causing 500 errors during RoqAndRoll test init)
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 10, 2026

🙈 The PR is closed and the preview is expired.

- Fix dark background on /appstore and /ide when OS is in dark mode
  (force color-scheme: light to override Oat's light-dark())
- Fix /appstore layout: full-width separator lines, left-aligned
  headers, override Oat's details/summary chevron
- Fix /download missing icons: load MDI font locally on the page
- Fix /download tab overflow: reduce padding/font-size/min-width
- Unify copy-to-clipboard: global click-to-copy on all pre blocks
  with consistent toast feedback ('Copied: <content>')
- Remove highlightjs-copy plugin (replaced by global click-to-copy)
- Appstore alias rows now clickable anywhere to copy command
@maxandersen maxandersen merged commit 0a9260c into jbangdev:main May 10, 2026
3 checks passed
@maxandersen maxandersen deleted the oat-migration branch May 10, 2026 22:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant