damien/neroshitron
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/neroshitron.git synced 2025-03-14 10:05:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Damien Ostler 2024-05-26 13:10:20 -04:00
parent c9e044baaa
commit 72a7a12cce
1 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
README.md
View File

@ -2,74 +2,73 @@
![image](https://github.com/D4M13N-D3V/neroshitron/assets/13697702/e4a9e11b-0e52-42e0-ad9a-821a81e92e90) ![image](https://github.com/D4M13N-D3V/neroshitron/assets/13697702/e4a9e11b-0e52-42e0-ad9a-821a81e92e90)
## Development # Documentation For Initial Project Setup
### Documentation For Initial Project Setup
- https://nextjs.org/docs - https://nextjs.org/docs
- https://supabase.com/docs/guides/self-hosting/docker - https://supabase.com/docs/guides/self-hosting/docker
- https://www.docker.com/products/docker-desktop/ - https://www.docker.com/products/docker-desktop/
### Running Backend # Running Backend
1) Open your terminal and navigate to the root of the git repository. 1) Open your terminal and navigate to the root of the git repository.
2) Make sure that docker and docker compose are installed. 2) Make sure that docker and docker compose are installed.
3) Run `docker-compose --env-file ./docker.env up` which will start up OwnCast, AppWrite, and the UI. 3) Run `docker-compose --env-file ./docker.env up` which will start up OwnCast, AppWrite, and the UI.
#### MailDev ## MailDev
http://localhost:1080 http://localhost:1080
This is where all mail being sent shows up from the application for developers. This is where all mail being sent shows up from the application for developers.
#### OwnCast ## OwnCast
http://localhost:8080/ http://localhost:8080/
Configuration is done through the Owncast administration page located on your server under /admin. The login username is admin and the password is your stream key, the default being abc123. Configuration is done through the Owncast administration page located on your server under /admin. The login username is admin and the password is your stream key, the default being abc123.
#### Supabase ## Supabase
http://localhost:8000/ http://localhost:8000/
You will need to register and sign up, the first account on the appwrite instance will be the admin account.çConfiguration is done through the Owncast administration page located on your server under /admin. The login username is admin and the password is your stream key, the default being abc123. You will need to register and sign up, the first account on the appwrite instance will be the admin account.çConfiguration is done through the Owncast administration page located on your server under /admin. The login username is admin and the password is your stream key, the default being abc123.
### Running UI # Running UI
1) Open your terminal and navigate to the root folder of the git repository. 1) Open your terminal and navigate to the root folder of the git repository.
2) Run the command `npm update`. 2) Run the command `npm update`.
3) Once the depedencies are pulled and installed you can run the command `npm run dev` to run the application in development mode. 3) Once the depedencies are pulled and installed you can run the command `npm run dev` to run the application in development mode.
4) Open http://localhost:3000/ 4) Open http://localhost:3000/
### React Components # React Components
##### Gallery Component ## Gallery Component
The `Gallery` component is a React component used to display a gallery of images. It fetches images from an API and displays them in a Masonry layout. The `Gallery` component is a React component used to display a gallery of images. It fetches images from an API and displays them in a Masonry layout.
###### Props ### Props
- `id` (number): The ID of the gallery to fetch images from. - `id` (number): The ID of the gallery to fetch images from.
- `closeMenu` (function): A function to close the menu. - `closeMenu` (function): A function to close the menu.
###### State ### State
- `isSingle` (boolean): A state to check if only a single image is to be displayed. - `isSingle` (boolean): A state to check if only a single image is to be displayed.
- `loaded` (object): A state to keep track of loaded images. - `loaded` (object): A state to keep track of loaded images.
- `selectedImage` (string | null): A state to keep track of the selected image. - `selectedImage` (string | null): A state to keep track of the selected image.
- `images` (string[]): A state to store the fetched images. - `images` (string[]): A state to store the fetched images.
- `galleryId` (number): A state to store the gallery ID. - `galleryId` (number): A state to store the gallery ID.
###### Functions ### Functions
- `getData`: An async function to fetch images from the API. - `getData`: An async function to fetch images from the API.
- `generateRandomString`: A function to generate a random string of a given length. - `generateRandomString`: A function to generate a random string of a given length.
- `handleDownload`: A function to handle the download of an image. - `handleDownload`: A function to handle the download of an image.
###### Usage ### Usage
The example below will load the images of the the gallery with an ID of `58201557-b392-471e-ac55-dcf6171cd18d` and will call the function for `setIsOpen(false)` when the back button is clicked. The example below will load the images of the the gallery with an ID of `58201557-b392-471e-ac55-dcf6171cd18d` and will call the function for `setIsOpen(false)` when the back button is clicked.
```tsx ```tsx
<Gallery id={"58201557-b392-471e-ac55-dcf6171cd18d"} closeMenu={() => setIsOpen(false)}></Gallery> <Gallery id={"58201557-b392-471e-ac55-dcf6171cd18d"} closeMenu={() => setIsOpen(false)}></Gallery>
``` ```
##### GalleryThumbnail Component ## GalleryThumbnail Component
The `GalleryThumbnail` component is a React component used to display a thumbnail of a gallery. It fetches the thumbnail image from an API and displays it. When clicked, it triggers a callback function with the gallery ID. The `GalleryThumbnail` component is a React component used to display a thumbnail of a gallery. It fetches the thumbnail image from an API and displays it. When clicked, it triggers a callback function with the gallery ID.
###### Props ### Props
- `id` (string): The ID of the gallery to fetch the thumbnail for. - `id` (string): The ID of the gallery to fetch the thumbnail for.
- `onSelect` (function): A function to be called when the thumbnail is clicked. The gallery ID is passed as an argument. - `onSelect` (function): A function to be called when the thumbnail is clicked. The gallery ID is passed as an argument.
###### State ### State
- `galleryId` (string): A state to store the gallery ID. - `galleryId` (string): A state to store the gallery ID.
- `thumbnailUrl` (string): A state to store the fetched thumbnail URL. - `thumbnailUrl` (string): A state to store the fetched thumbnail URL.
- `isLoading` (boolean): A state to keep track of the loading status. - `isLoading` (boolean): A state to keep track of the loading status.
###### Functions ### Functions
- `openGallery`: A function to call the `onSelect` prop with the gallery ID. - `openGallery`: A function to call the `onSelect` prop with the gallery ID.
- `getData`: An async function to fetch the thumbnail from the API. - `getData`: An async function to fetch the thumbnail from the API.
###### Usage ### Usage
This will render a thumbnail for the gallery with the ID of "1". When the thumbnail is clicked, it will log the gallery ID to the console. This will render a thumbnail for the gallery with the ID of "1". When the thumbnail is clicked, it will log the gallery ID to the console.
```tsx ```tsx
<GalleryThumbnail id="1" onSelect={(id) => console.log(id)} /> <GalleryThumbnail id="1" onSelect={(id) => console.log(id)} />