https://github.com/zernonia/supaembed
Embed custom tools on your website with your Supabase instance.
https://github.com/zernonia/supaembed
supabase vue3
Last synced: about 1 year ago
JSON representation
Embed custom tools on your website with your Supabase instance.
- Host: GitHub
- URL: https://github.com/zernonia/supaembed
- Owner: zernonia
- Created: 2022-07-20T16:32:22.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-23T12:50:48.000Z (almost 4 years ago)
- Last Synced: 2025-03-17T11:21:32.363Z (about 1 year ago)
- Topics: supabase, vue3
- Language: Vue
- Homepage: https://www.aurora.courses/supaembed
- Size: 753 KB
- Stars: 24
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Supaembed
Embed custom tools on your website with your Supabase instance.
Free โข Open Source
View Demo
ยท
Report Bug
ยท
Request Feature

## ๐ Features
- ๐คฉ Free & Open Source
- ๐ Your own Supabase instance
- ๐ Your user can interact without signing in (Respect RLS too)
- ๐จ Alowed to use on your own project
- ๐ No stealing your data, so don't worry ๐
## ๐ About The Project
I wanted to have a **bug/feature request/roadmap tools** in my [latest project, Aurora](https://www.aurora.courses), but I don't want users to sign in another tool just to do that.
Then I discovered the amazing Embedding features by [Dashibase](https://github.com/Dashibase/dashibase-insert), which allow user to embed form and still respect the RLS. I reached out to [SK](https://github.com/greentfrapp) (Thank you! ๐๐ผ) to learn the mechanism.

After that, I expose the NEW schema (so that it won't clogged up public schema), and utilized Supabase powerful Postgrest endpoint, as well as the embedding feature above to build this tool.
Enjoy! ๐
### ๐จ Built With
- [Vue 3](https://vuejs.org/)
- [Vite](https://vitejs.dev/)
- [WindiCSS](https://windicss.org/)
- [Supabase](https://supabase.com/)
## Setup (v1)
1. Login to your [Supabase](https://app.supabase.com/) instance that you want to setup this tool.
2. Copy SQL script from [`sql/v1`](/sql/v1), following the file number 1,2,3, and paste it into your Supabase SQL editor and `RUN` it.
> In [1.supabase_function.sql](/sql/v1/1.supabase_function.sql), you will need to add your admin users' uuid to make sure the admin have the capabiltites to handle admin stuff.
3. Go to Dashboard Settings โ API โ Settings โ Schema, and add the newly created **supaembed** schema into the Schema field.

4. Copy the `script` below and paste in the HTML where you want it to be rendered.
> It's ok to paste your url and keys here because it's gonna be public anyway ๐
```html
```
5. That's it! You should be able to see Supaembed on your website now!
> Let me know if anything stuck!
## ๐ Local Development
### Prerequisites
Yarn
- ```sh
npm install --global yarn
```
### Development
1. Clone the repo
```sh
git clone https://github.com/zernonia/supaembed.git
```
2. Install NPM packages
```sh
cd supaembed
yarn install
```
3. Run local Vercel development instance
```sh
yarn dev
```
## โ Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## ๐งก Acknowledgement
- Thank you [SK](https://github.com/greentfrapp) for discovering the possibilities of embedding tools that respect User's RLS and share it with me! Check out [Dashibase](https://dashibase.com/)!
- Thank you [Austin Malerba](https://github.com/malerba118) for [Supabase Comment Extension](https://github.com/malerba118/supabase-comments-extension) that scaffold the comment for this project. Check out [Scrollex](https://scrollex-docs.vercel.app/)
## ๐ License
Not Associated with Supabase.
Distributed under the MIT License. See `LICENSE` for more information.
# ๐ง Contact
Zernonia - [@zernonia](https://twitter.com/zernonia) - zernonia@gmail.com
Also, if you like my work, please buy me a coffee โ๐ณ