Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/endlessreform/image-search-demo
A simple in-browser demo for PGLite + Transformers.js, entirely client-side
https://github.com/endlessreform/image-search-demo
Last synced: about 7 hours ago
JSON representation
A simple in-browser demo for PGLite + Transformers.js, entirely client-side
- Host: GitHub
- URL: https://github.com/endlessreform/image-search-demo
- Owner: EndlessReform
- Created: 2024-08-16T00:24:16.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-21T04:45:27.000Z (3 months ago)
- Last Synced: 2024-08-21T05:46:29.595Z (3 months ago)
- Language: JavaScript
- Homepage: https://endlessreform.github.io/image-search-demo/
- Size: 4.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Vite + TS + Tailwind + shadcn/ui Template
## What's this?
A no-nonsense template for when you need to slap a Claude-generated UI somewhere that isn't a chat window.
Uses the exact same UI stack as [Claude Artifacts](https://support.anthropic.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them), for copy-pasting:
- [Vite](https://vitejs.dev) for speed
- TypeScript for sanity
- [Tailwind](https://tailwindcss.com) for style
- [shadcn/ui](https://ui.shadcn.com) for pretty buttons
- File-based routing because ain't nobody got time for that
- My personal Tailwind color scheme and font choices, because I have opinions
## Why use it?
Because you're tired of setting up the same stack for the 100th time. This template is for the "I just want it to work" crowd.
## Quick Start
1. Use this template:
- Click the "Use this template" button on GitHub
- Choose "Create a new repository"
- Give it a snazzy name and hit "Create repository from template"
2. Clone your new repo:
```
git clone https://github.com/yourusername/your-snazzy-new-repo.git
cd your-snazzy-new-repo
```
3. Install dependencies (go grab a coffee, it'll take a minute):
```
npm install
```
4. Run it:
```
npm run dev
```
5. Add a page:
- Throw a new `.tsx` file in `src/pages`
- Magic! It's now a route. (Thanks, [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages))
6. Build for production:
```
npm run build
```
7. Deploy:
- Take the `dist` folder
- Throw it at a static host (Nginx, Netlify, whatever floats your boat)
- Profit!
## "But how do I...?"
- Customize theme? `tailwind.config.js` is your friend. (But my color choices are pretty rad, just saying.)
- Add shadcn/ui components? `npx shadcn-ui add `. Done.
- Need more? Check out the [Vite docs](https://vitejs.dev/), [Tailwind docs](https://tailwindcss.com/docs), or [shadcn/ui docs](https://ui.shadcn.com/).
## Deployment
This template comes with an easy GitHub Pages deployment setup.
1. Push your changes to GitHub.
2. Run the deployment command:
```
npm run deploy
```
3. Set up GitHub Pages:
- Go to your repository settings
- Navigate to Pages
- Set the source to "gh-pages" branch
- Save
Your site will be live at `https://yourusername.github.io/your-repo-name/`
Note: This setup uses HashRouter, which works out of the box with GitHub Pages. No additional configuration is needed for routing to work correctly.
## Credits
- UI components lovingly generated by Claude, Anthropic's AI assistant. (No, it can't do your laundry. We asked.)
- Template crafted by [Your Name] with only minimal cursing.
- Comes with a personal touch of color and typography. You're welcome.
Now go build something cool. Or don't. I'm a README, not a cop.