Skip to content

Move frontend from Bootstrap to Bulma and remove jQuery; dark theme support; some additional features - #342

Draft
Merlin04 wants to merge 6 commits into
bepasty:masterfrom
Merlin04:master
Draft

Merlin04 wants to merge 6 commits into
bepasty:masterfrom
Merlin04:master

Conversation

@Merlin04

@Merlin04 Merlin04 commented Mar 1, 2026

Copy link
Copy Markdown

Hi, and thanks for the wonderful project - I realize this is a pretty big PR to make without any prior discussion, so please don't feel any obligation to work on this or merge this if it wouldn't be helpful to bepasty! I made these changes for my own personal instance of bepasty (https://paste.tail917c8.ts.net) and I figured I might as well open a PR in case you all might want to merge them.

Screenshots image image image

Architectural changes

  • Migrate frontend from Bootstrap to Bulma, removing jQuery along the way
    • This allows for dark theme, reduced network/JS payload, and removal of legacy dependencies
  • Replace jQuery file uploader with FilePond, an MIT-licensed async chunking file upload widget
  • replace jQuery-based carousel with fslightbox.js

New features

  • Dark theme! Uses the prefers-color-scheme CSS media query to detect user's preference. pygments uses the monokai theme when dark theme is active
  • You can now click a button to instantly undo a binary file upload
screenshot of file upload widget showing a successfully uploaded file, with the text tap to undo
  • New "Copy URLs" feature lets you copy a newline-separated list of urls to uploaded files (inline or preview). This is great for situations where the list feature is overkill, like if you're uploading a few media files to share with someone on a chat app
copy urls tab is open instead of create list tab. there's a selector for inline or preview, and below that a text field with the URLs that you can click to copy to clipboard

Regressions/possible issues

  • Some libraries are being loaded from a CDN because there isn't an xstatic package for them. I'm not super familiar with xstatic or the python packaging ecosystem in general, so maybe there's a better way to do this?
    • specifically, that's bulma.min.css, fslightbox.js, and filepond.js
  • Carousel takes a slightly different format - it's now images on a page, and when you click one a full screen lightbox carousel view opens. I prefer this over the previous behavior, but I'm unsure if others would given how different it is from previous behavior
    • I've been thinking about possibly switching from fslightbox to lightgallery.js or photoswipe. Both of these libraries would provide a much nicer looking gallery view that puts thumbnails in a grid; however, they require knowing the resolution of the images, so I would have to add a function to the backend to calculate this (with similar logic to the thumbnail generator)
  • Use of some inline style tags in templates instead of a single CSS file when they only apply to UI components on a single page - I'm unsure if you have a preference for one or the other, but I didn't see many uses of inline style tags in the codebase so I figure I should bring this up
  • I removed the documentation link from the navbar and adjusted the index page shown to logged-out users a bit to match my personal preference - I like it better this way but that's just personal preference

WIP/TODOs

  • Tests haven't been updated to match new element names (this is why the PR is a draft)
  • AUTHORS and CHANGES.rst have not been updated

@Merlin04

Merlin04 commented Jul 4, 2026

Copy link
Copy Markdown
Author

@ThomasWaldmann Hi, hope you're doing well! I have a bit more time now and might be able to work on this PR more, so I wanted to ask - are you interested in the possibility of merging this, or would you prefer it to remain a fork? If the former, I could try to finish up the remaining bits of the PR so it can exit draft stage.

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