Windmill Dashboard Svelte
Windmill Dashboard Svelte
A multi theme, completely accessible, with components and pages examples, ready for production dashboard.
- 🦮 Thoroughly accessible
- 🌗 Light and dark themes
- 💅 Styled with Tailwind CSS
- 🧩 Various components
🔍 Credits
All credits to the Estevan Maito and the original windmill-dashboard
🚀 Usage
Clone this repository and install dependencies
git clone https://github.com/xenking/windmill-dashboard-svelte.git
npm install
...then start Rollup:
npm run dev
Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.
Building and running in production mode
To create an optimised version of the app:
npm run build
You can run the newly built app with npm run start. This uses sirv, which is included in your package.json's dependencies so that the app will work when you deploy to platforms like Heroku.
Deploying to the web
With Vercel
Install vercel if you haven't already:
npm install -g vercel
Then, from within your project folder:
cd public
vercel deploy --name my-project
With surge
Install surge if you haven't already:
npm install -g surge
Then, from within your project folder:
npm run build
surge public my-project.surge.sh
🦮 Accessibility
This dashboard was developed with a11y in mind since the beginning.
- Every text passes the WCAG Level AA (at least)
- It is completely keyboard navigable
- I actually used NVDA to read my screen during development
Everybody can benefit with good accessibility practices, like the modal, for example (test it live). It uses focus trap techniques to not loose focus when navigating via keyboard and thinking of mobile users with large screen devices, it is placed in the bottom of the screen.
🌗 Multi theme
It uses Tailwind CSS for styling, and some may say it is totally biased, but it uses simplest theming plugin there is for it, Tailwind Multi Theme plugin (made by me). The result is that, as with regular Tailwind, you have control over every style in your pages.
You can see that by navigating through the examples, changing theme and going visiting pages like login or create account, to see different images served for different themes.
Theme auto detection based on user's OS preferences and local setting's storage are enabled by default.
OSS used
