esimkowitz / dev-widgets Goto Github PK

View Code? Open in Web Editor NEW

11.0 5.0 1.0 513 KB

Collection of useful conversions and widgets implemented as a portable Rust app

Home Page: https://widgets.fyi/

License: MIT License

Rust 85.99% SCSS 9.56% HTML 3.92% JavaScript 0.53%

developer-tools dioxus portable rust single-page-app wasm devtoys tools widget

dev-widgets's Introduction

dev-widgets

Overview

Collection of useful conversions and widgets built as a pure Rust app on the Dioxus framework.

The following widgets are now stable:

Number Base Converter
Base64 Encoder/Decoder
QR Code Generator
Date/Timestamp Converter
UUID Generator
Hash Generator
CIDR Decoder
Color Picker

Development Setup

If you haven't already, install Rust.

Follow the Dioxus instructions to install platform-specific dependencies.

Clone this repository and enter its root directory.

Desktop App

The primary target for this project is a universal desktop app. Currently, it has been manually validated on macOS and Windows. I plan to setup automated releases soon.

Run app from command-line

Run cargo run to start the application. The first build should take a couple minutes as it fetches Bootstrap and all other Rust packages, subsequent builds should only take a few seconds.

If you would like to enable hot-reloading, you can do so by setting the USE_HOT_RELOAD flag in main.rs. This is only necessary for the desktop app, hot-reload is on by default for web development.

Bundle app

You can bundle the app into an executable for your platform using cargo-bundle. If you haven't already, run the following command to install cargo-bundle:

cargo install cargo-bundle

Once you have cargo-bundle installed, run the following command to package the application for your platform:

cargo bundle --release

Web App

Dev Widgets now works as a web app! You can find it hosted at https://widgets.fyi. It will stay up to date with the main branch using GitHub Actions.

Run from command line - Dioxus CLI

You can run the web app locally using the dioxus-cli. Because this repo depends on unstable releases of Dioxus, you need to install Dioxus CLI via Git to make sure it is compatible:

cargo install dioxus-cli --git https://github.com/DioxusLabs/dioxus.git --rev b25501af48977817d9d0bb2534c94cff30317c8c

Once you have the CLI installed, you can launch the web app using the following command:

dioxus serve

This will automatically enable hot-reloading for any changes you make to the source code.

Validate release buld - Trunk CLI

When packaging for release, I use Trunk as it is more-readily installable on the Github Actions agents. I found that installing the Dioxus CLI would compile the binary from scratch, which took too long and would hit out-of-memory errors unless I increased the swap file size.

You can install Trunk using the following command:

cargo install trunk --locked

You won't be able to run the app locally using Trunk, but you can validate that it builds correctly by running the following command:

trunk build --release

Roadmap

This app is heavily inspired by DevToys and DevToysMac and my roadmap for widgets I plan to support will align with these projects.

Currently, I have only validated on macOS, and performed very crude validations on Windows, though I now have a fairly stable programming model so I plan to set up some automated testing for macOS, Windows, and Linux soon, as well as start publishing releases.

I also plan to publish this as a single-page application using dioxus-web and Github Pages.

I will be tracking new development in the dev-widgets project board. New widgets will be organized under the "Widgets" area, and all other development will be tracked under the "Platform" area.

dev-widgets's People

Contributors

Stargazers

Watchers

Forkers

lenonhere

dev-widgets's Issues

Improve Datetime converter time zone selector

Update the datetime converter time zone selector to be more intuitive. Right now, it is a list of all ~500 entries in the IANA time zone/locale database, provided by the chrono_tz crate. I want to improve this by allowing for filtering of time zones by area, etc.

Add ability to set datetime to current time in Datetime converter

Add field to describe Datetime converter time zone features

Similar to how things work in OG DevToys, show a field containing whether it is daylight savings, offset from UTC, offset from local time, etc.

GUID/UUID generator

Collapsible sidebar

The sidebar should have a button that can collapse it. Ideally, this should be in the title bar, though temporarily it can be inline with the home link.

Add cross-platform NumberInput spinner buttons

Right now the increment/decrement spinner buttons are small and don't match the rest of the styling

Looking into it, these are webkit-specific spinners. I may disable the spinners and make some form hover buttons that appear onfocus

Marking as high priority as it will block cross platform support

Handle GitHub Pages 404 for sub-paths

With the new routing changes, Dioxus modifies the URL path. When refreshing the page on a browser, GitHub Pages tries to match the URL path, even though we only host the site at the root path. This is causing GitHub Pages to issue 404 errors. I want to capture that URL path and navigate to the root site, while preserving the intent (i.e. if someone's path shows they want to navigate to the QR Code generator, refreshing the page should take them back to the QR Code generator, rather than the home page)

Fix widget-title covering top of cards when it is at its max font size and the cards are being hovered over

Support find/replace in TextAreaForm component

Add a find/replace dialog to the TextAreaForm component

Builds are failing

Date/Time converter

I want to get something between the version in DevToysMac and DevToys. I want a text field where a timestamp can be entered in pretty print and parsed. I also want to have a calendar/date selector, a dropdown to select the time zone to convert the timestamp to, and a field to paste in a Unix timestamp.

QR code reader

Add unit tests

Regex tester

Hash generator

Custom title bar

Right now, I am using the standard Tauri window title bar, but I want to make a custom one that i can put the sidebar collapse button (#59) and the widget title inside.

Add ability to select pixels from anywhere onscreen for color picker

Could potentially use something like https://github.com/rustdesk/rustdesk/tree/master/libs/scrap if I can get it to support WASM targets. That would involve something like the MediaDevices API.

It would also require being able to track the cursor outside of the bounds of the window, though I'm going to make that a separate issue as the rest of the color picker/any other sliders I add would benefit from this.

Datetime ymd/hms selectors should increment/decrement next value when they wrap around

Add ability to track cursor outside of the window/scope

Record the cursor position when it is outside the window/scope bounds so sliders don't abruptly stop moving if they go out of focus while still being tracked.

Modify SelectForm to fill options from enum variants

Add ability to deploy PWA to Github Pages

Replace sidebar and add widget-type-specific homepages

I think the next set of changes I want to make are to rework the sidebar and create widget-type-specific homepages. The new router layout mechanism added a bunch of hidden pre tags to the sidebar that are causing the accordion sections to display an extra lower border that I don't like. Rather than try and address that here, I am just going to rewrite this so it's more flexible. I want to be able to click on the widget type and show a homepage with just widgets of that type. Clicking on the chevron itself should be the only thing that collapses the section. This PR adds new mod.rs files for each widget type module so I can host this sub-home-page there and reuse the layout and logic from the current global home page.

Checksum generator

This will require adding a file drop handler, which Tauri supports as part of the WindowBuilder, but it may not be super intuitive. We should also support the native file selector interface if possible. For now, we can just focus on getting it working for desktop, but we should plan to support the web api too.

Setup CI/CD for bundling releases

Text diff helper

Support dioxus-web for running as a web-app in the browser

Fix odd rasterization artifact when hovering over cards

Cards transform to a slightly larger size when hovered over, but there's a slight rasterization artifact when this happens. The fonts and icons rasterize after transforming, but the icons sometimes shift slightly when this happens.

Fix code scanning alert - writing &PathBuf instead of &Path involves a new object where a slice will do

Tracking issue for:

https://github.com/esimkowitz/dev-widgets/security/code-scanning/6

PNG/JPEG compressor

JSON/YAML converter

Add shadow under widget-title when scrolling widget-body

Color picker

JWT Encoder/Decoder

Image converter

Update to Dioxus 0.4.0

Dioxus has released 0.4.0 https://github.com/DioxusLabs/dioxus/releases/tag/v0.4.0

Most of the changes are straight-forward and already in the dev branch.

The biggest change is a complete revamp of the dioxus-router crate. I am going to need to rework/replace the WidgetEntry struct and PHF map with something that more closely resembles the new Routable trait that their router expects. I will also need to rethink how to display available widgets in the sidebar and home page.