You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+40-20Lines changed: 40 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,23 +20,41 @@ Click each one to go into depth about the inner workings of each. Here's a graph
20
20
21
21
```mermaid
22
22
---
23
-
title: "Vector: Interior Design Architecture"
23
+
title: "Vector: Interior Design flowchart"
24
24
---
25
25
26
-
graph RL
27
-
D@{ shape: cyl, label: "Database" }
28
-
D -.- AB(Admin-backend)
29
-
D -.- UB(User-backend)
30
-
UB -.- UF[User-frontend]
31
-
AB -.- AF[Admin-frontend]
32
-
AF === N((Nginx))
33
-
P{Admin?}---N
34
-
P---|Yes|AB
35
-
P---|No|UB
36
-
UF -.- N
37
-
N === AW(admin.vectorinterior.design)
38
-
N -.- W[vectorinterior.design]
39
-
N ---|Called from frontends|BW(backend.vectorinterior.design)
26
+
flowchart LR
27
+
28
+
pc --> cloudflare
29
+
cloudflare --> vps
30
+
vps -->|"registry.vectorinterior.design (DNS only due to size limit)"|registry
31
+
vps -->|"else (Cloudflare Proxy)"|nginx
32
+
33
+
nginx -->|admin.vectorinterior.design|a
34
+
a -->|/|af
35
+
a -->|/api/|ab
36
+
af -->|Requests resources|ab
37
+
38
+
nginx -->|vectorinterior.design|u
39
+
u -->|/|uf
40
+
u -->|/api/|ub
41
+
uf -->|Requests resources|ub
42
+
43
+
ab -->|Reads & Writes|database
44
+
ub -->|Reads|database
45
+
46
+
pc@{shape: circle, label: "Client" }
47
+
cloudflare@{shape: rect, label: Cloudflare}
48
+
vps@{shape: diam, label: VPS}
49
+
registry@{shape: rect, label: Docker registry}
50
+
nginx@{shape: diam, label: Nginx}
51
+
a@{shape: diam, label: Admin panel}
52
+
af@{shape: hex, label: Admin frontend}
53
+
ab@{shape: hex, label: Admin backend}
54
+
u@{shape: diam, label: User site}
55
+
uf@{shape: hex, label: User frontend}
56
+
ub@{shape: hex, label: User backend}
57
+
database@{shape: database, label: Database}
40
58
```
41
59
42
60
# Environment
@@ -51,7 +69,7 @@ graph RL
51
69
|`ADMIN_USERNAME`| The database username for the admin backend | admin | ✓ | ✓ ||||||
52
70
|`ADMIN_URL`| The url for admin site (**Without protocol or slashes**). Used reverse proxy. |*Required*|||| ✓ ||||
53
71
|`ADMIN_IMAGES_URL`| The url to access images from the admin (**Include trailing slash**). **Recommended to use protocol-relative URL** panel. |*Required*|| ✓ ||||||
54
-
|`ADMIN_API_PATH`| The path relative to `ADMIN_URL` to access the API. ***Include slashes before and after**|*Required*|||| ✓ | ✓ |||
72
+
|`ADMIN_API_PATH`| The path relative to `ADMIN_URL` to access the API. **Include slashes before and after**|*Required*|||| ✓ | ✓ |||
55
73
|`USER_USERNAME`| The database username for the user backend. | frontend | ✓ || ✓ |||||
56
74
|`USER_URL`| The url for user frontend **(without protocol or slashes)**. Used reverse proxy |*Required*|||| ✓ | ✓ |||
57
75
|`USER_IMAGES_URL`| The url to access images from the user frontend **(Include protocol and slashes)**. |*Required*|||||| ✓ ||
@@ -68,18 +86,20 @@ Secrets must be added to `./secrets/<secret>` relative to the `docker-compose` d
68
86
69
87
# Development
70
88
71
-
run`docker-compose --profile -f docker-compose.yml -f docker-compose.prod.yml prod up` (or `--profile tests` to run tests). This command launches the application in production mode. To run the hmr for both backend and frontend add the options `-f docker-compose.yml -f docker-compose.dev.yml`.
89
+
Run`docker-compose --profile -f docker-compose.yml -f docker-compose.prod.yml prod up` (or `--profile tests` to run tests). This command launches the application in production mode. To run the hmr for both backend and frontend add the options `-f docker-compose.yml -f docker-compose.dev.yml`.
72
90
73
91
# Deployment
74
92
75
93
Push all changes to the main branch. A github action is setup to build the docker image, push it to the VPS and deploy the application.
76
94
77
95
## Registry
78
96
79
-
Since the easiest way to update a docker container is to upload the image to a registry and all registries charge for the storage than it is required for this project I have setup a self hosted registry in the same VPS that's running the website at the url `REGISTRY_URL` env variable. All you have to do to create a new version is push the changes to the master branch.
97
+
Since the easiest way to update a docker container is to upload the image to a registry and all registries charge for the storage than it is required for this project I have setup a self hosted registry in the same VPS that's running the website at the url `REGISTRY_URL`(**without protocol or slashes**) env variable. All you have to do to create a new version is push the changes to the master branch.
80
98
81
-
To deploy the registry go to the [Dockerfile folder](/registry/Dockerfile), run `docker build . --target base` and deploy it with `docker run --mount type=bind,src=${PWD}/password,dst=/auth/htpasswd vector-registry`. The htpasswd file must contain the username and password in the following format `username:password-bcrypt-hash`. **Important to note that it requires the hash not the actual password**.
99
+
To deploy the registry go to the [Dockerfile folder](/registry/Dockerfile), run `docker build -t vector-registry . --target base` and deploy it with `docker run --mount type=bind,src=${PWD}/password,dst=/auth/htpasswd -p 127.0.0.1:5000:5000 -v /var/lib/registry --name vector-registry vector-registry`. The htpasswd file must contain the username and password in the following format `username:password-bcrypt-hash`. **Important to note that it requires the hash not the actual password**.
82
100
83
101
All services are tagged with `service:latest` and the production [docker-compose.prod.yml](/docker-compose.prod.yml) pulls from this image so all commits will update the service. To keep some backups just in case an additional tag is added to every service which are defined by the `ADMIN_BACKEND_TAG`, `USER_BACKEND_TAG`, `ADMIN_FRONTEND_TAG`, `USER_FRONTEND_TAG`, `DATABASE_TAG`, and `NGINX_TAG` environment variables respectively. Recommended to use Semantic Versioning but anything will do.
84
102
85
-
Since uploading images can get storage heavy really quick I have setup a helper script that **will only keep the latests 5 versions of an image**. To run it go to [the script](/registry/cleanup/registry.py) and run `registry.py -l "username:password" -r REGISTRY_URL --delete --num 5 --keep-tags "latest"`.
103
+
Since uploading images can get storage heavy really quick I have setup a helper script that **will only keep the latests 5 versions of an image**. To run it go to [the script](/registry/cleanup/registry.py) and run `python registry.py -l "username:password" -r REGISTRY_URL --delete --num 5 --keep-tags "latest"`.
104
+
105
+
All this is handled by the Github Action so there's no need to manually trigger. This documentation is here just in case.
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
3
+
This is admin frontend for the Vector: Interior Design website. It is written in sveltekit and it interfaces with the admin backend. Most people won't see or be able to access this site since it's purpose is to setup and configure the user frontend.
4
4
5
-
## Creating a project
5
+
It consists of panels to edit project and image data such as description, alt text, and names. It also consists of 3 editors that correspond to the visual aspect of the main page, project page, and sculptures page, all with a desktop and mobile version.
6
6
7
-
If you're seeing this, you've probably already done this step. Congrats!
7
+
# Routes
8
8
9
-
```bash
10
-
# create a new project in the current directory
11
-
npx sv create
9
+
-`/cuenta`: Path to the login form. It works by sending an email and password in a form and if validated an http-only cookie is generated with a session id. All other paths are blocked if not logged in.
12
10
13
-
# create a new project in my-app
14
-
npx sv create my-app
15
-
```
16
-
17
-
## Developing
18
-
19
-
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20
-
21
-
```bash
22
-
npm run dev
23
-
24
-
# or start the server and open the app in a new browser tab
25
-
npm run dev -- --open
26
-
```
27
-
28
-
## Building
29
-
30
-
To create a production version of your app:
31
-
32
-
```bash
33
-
npm run build
34
-
```
35
-
36
-
You can preview the production build with `npm run preview`.
37
-
38
-
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
11
+
-`/proyectos`: Path to a list of all projects. From here you can access, reorder, or create new projects through `/proyectos/crear`.
12
+
-`/proyectos/esculturas`: Sculptures editor. From here you can change the order of sculptures, add description and change background color.
13
+
-`/proyectos/paginaPrincipal`: The editors for the main page. Either redirects to `/movil` or `/escritorio` for the mobile or desktop editor respectively.
14
+
-`/proyectos/<project-id>`: The configuration for a specific project. Here you can change the name, description, reorder the images of a project and publish or privatize a project.
15
+
-`/proyectos/<project-id>/ambientes/crear`: Creates a new ambient in the project. These are used for organizational purposes only since in the user frontend they aren't hinted at whatsoever.
16
+
-`/proyectos/<project-id>/ambientes/<ambient-id>/imagenes/crear`: Creates a new image for the given ambient of the given project.
17
+
-`/proyectos/<project-id>/ambientes/<ambient-id>/<filename>`: Page to edit a given image. Here you can change an image's description, it's alt text, set is as the project's thumbnail, put it in the main page, mark it as a sculpture, or hide it from the project view.
18
+
-`/proyectos/<project-id>/escritorio`: The desktop editor of the project.
19
+
-`/proyectos/<project-id>/movil`: The mobile editor of the project.
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
3
+
This is the user frontend of the Vector: Interior Design website and it's the site most people will see. It is written in Sveltekit.
4
4
5
-
## Creating a project
5
+
#Routes
6
6
7
-
If you're seeing this, you've probably already done this step. Congrats!
7
+
All routes are nested under `/<lang>/<route>` which allows the site to be displayed in multiple languages. This language is first determined by the `Accept-Language` header but can be changed manually which sets a cookie. Currently available languages are English and Spanish.
8
8
9
-
```bash
10
-
# create a new project in the current directory
11
-
npx sv create
9
+
-`/`: The main page. It includes all images marked as main page in the admin panel.
10
+
-`/sitemap.xml`: The sitemap of the site.
11
+
-`/esculturas`: Includes all the images marked as sculptures.
12
+
-`/proyectos`: Displays a list of all public projects.
13
+
-`/proyectos/<project-id>`: Displays all images of a project.
14
+
-`proyectos/conclusion`: A conclusion message shown after the last project.
12
15
13
-
# create a new project in my-app
14
-
npx sv create my-app
15
-
```
16
+
# Quirks
16
17
17
-
## Developing
18
+
- During site setup if the main page, projects, or project-id endpoints return an empty list a 403 error is raised indicating that the site is not yet setup showing an under construction page.
18
19
19
-
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20
+
- In sculptures for two images to be grouped they both need to be marked as sculptures and be grouped in the project page. The description and background image are taken from the last image so the first one has no effect on the visuals.
20
21
21
-
```bash
22
-
npm run dev
23
-
24
-
# or start the server and open the app in a new browser tab
25
-
npm run dev -- --open
26
-
```
27
-
28
-
## Building
29
-
30
-
To create a production version of your app:
31
-
32
-
```bash
33
-
npm run build
34
-
```
35
-
36
-
You can preview the production build with `npm run preview`.
37
-
38
-
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
22
+
- In projects image grouping works the following way: The entire list of images is traversed. When an image marked as group is found it will keep going until it either finds an image with no group or marked as `groupEnd`. This will be considered a group and the images will be put side by side.
0 commit comments