Update documentation README

This commit is contained in:
Leo Vasanko 2023-11-15 00:23:00 +00:00
parent 51fd07d4fa
commit 669762dfe7
4 changed files with 131 additions and 132 deletions

View File

@ -1,8 +1,8 @@
# Cista Web Storage # Cista Web Storage
<img src="https://git.zi.fi/Vasanko/cista-storage/raw/branch/main/docs/cista.jpg" align=right width=250> <img src="https://git.zi.fi/Vasanko/cista-storage/raw/branch/main/docs/cista.webp" align=left width=250>
Cista takes its name from the ancient cistae, metal containers used by Greeks and Egyptians to safeguard valuable items. This modern application provides a browser interface for secure and accessible file storage, echoing the trust and reliability of its historical namesake. Cista takes its name from the ancient *cistae*, metal containers used by Greeks and Egyptians to safeguard valuable items. This modern application provides a browser interface for secure and accessible file storage, echoing the trust and reliability of its historical namesake.
This is a cutting-edge **file and document server** designed for speed, efficiency, and unparalleled ease of use. Experience **lightning-fast browsing**, thanks to the file list maintained directly in your browser and updated from server filesystem events, coupled with our highly optimized code. Fully **keyboard-navigable** and with a responsive layout, Cista flawlessly adapts to your devices, providing a seamless experience wherever you are. Our powerful **instant search** means you're always just a few keystrokes away from finding exactly what you need. Press **1/2/3** to switch ordering, navigate with all four arrow keys (+Shift to select). Or click your way around on **breadcrumbs that remember where you were**. This is a cutting-edge **file and document server** designed for speed, efficiency, and unparalleled ease of use. Experience **lightning-fast browsing**, thanks to the file list maintained directly in your browser and updated from server filesystem events, coupled with our highly optimized code. Fully **keyboard-navigable** and with a responsive layout, Cista flawlessly adapts to your devices, providing a seamless experience wherever you are. Our powerful **instant search** means you're always just a few keystrokes away from finding exactly what you need. Press **1/2/3** to switch ordering, navigate with all four arrow keys (+Shift to select). Or click your way around on **breadcrumbs that remember where you were**.
@ -46,7 +46,9 @@ To use your own TLS certificates, place them in the config folder and run:
cista -l cista.example.com cista -l cista.example.com
``` ```
Most admins instead find the [Caddy](https://caddyserver.com/) web server convenient for its auto TLS certificates and all. A proxy also allows running multiple web services or Cista instances on the same IP address. Caddy configuration **/etc/caddy/Caddyfile** is dead simple: Most admins instead find the [Caddy](https://caddyserver.com/) web server convenient for its auto TLS certificates and all. A proxy also allows running multiple web services or Cista instances on the same IP address but different (sub)domains.
`/etc/caddy/Caddyfile`:
```Caddyfile ```Caddyfile
cista.example.com { cista.example.com {
@ -72,7 +74,7 @@ pip install -e '.[dev]'
cista --dev -l :8000 /path/to/files cista --dev -l :8000 /path/to/files
``` ```
We use `hatch shell` for installing on a virtual environment, to not disturb the rest of the system with our hacking. We use `hatch shell` for installing on a virtual environment, to avoid disturbing the rest of the system with our hacking.
Vue is used to build files in `cista/wwwroot`, included prebuilt in the Python package. Running `hatch build` builds the frontend and creates a NodeJS-independent Python package. Vue is used to build files in `cista/wwwroot`, included prebuilt in the Python package. Running `hatch build` builds the frontend and creates a NodeJS-independent Python package.
@ -80,9 +82,9 @@ Vue is used to build files in `cista/wwwroot`, included prebuilt in the Python p
This setup allows easy addition of storages, each with its own domain, configuration, and files. This setup allows easy addition of storages, each with its own domain, configuration, and files.
Assuming a restricted user account **storage** for serving files and that cista is installed system-wide or on this account (check with `sudo -u storage -s`). Alternatively, use `pipx run cista` or `hatch run cista` as the ExecStart command. Assuming a restricted user account `storage` for serving files and that cista is installed system-wide or on this account (check with `sudo -u storage -s`). Alternatively, use `pipx run cista` or `hatch run cista` as the ExecStart command.
Create **/etc/systemd/system/cista@.service**: Create `/etc/systemd/system/cista@.service`:
```ini ```ini
[Unit] [Unit]
@ -90,7 +92,7 @@ Description=Cista storage %i
[Service] [Service]
User=storage User=storage
ExecStart=cista -c /srv/cista/%i -l /srv/cista/%i/socket /media/storage/@%i/ ExecStart=cista -c /srv/cista/%i -l /srv/cista/%i/socket /media/storage/%i
Restart=always Restart=always
[Install] [Install]
@ -105,9 +107,9 @@ systemctl enable --now cista@foo.example.com
systemctl enable --now cista@bar.example.com systemctl enable --now cista@bar.example.com
``` ```
Public exposure is easiest using the Caddy web server, but Nginx or others also work. Run the server with -l domain.example.com if you have TLS certificates in the config folder. Public exposure is easiest using the Caddy web server.
**/etc/caddy/Caddyfile**: `/etc/caddy/Caddyfile`:
```Caddyfile ```Caddyfile
foo.example.com, bar.example.com { foo.example.com, bar.example.com {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

BIN
docs/cista.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 363 KiB

View File

@ -2,11 +2,6 @@
The frontend is a Single-Page App implemented with Vue 3. Development uses the Vite server together with the main Python backend, but in production the latter also serves the prebuilt frontend files. The frontend is a Single-Page App implemented with Vue 3. Development uses the Vite server together with the main Python backend, but in production the latter also serves the prebuilt frontend files.
```fish
npm install
npm run dev
```
## Recommended IDE Setup ## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
@ -22,28 +17,30 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has a
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration ## Hot-Reload for Development
See [Vite Configuration Reference](https://vitejs.dev/config/). ### Run the backend
## Project Setup ```fish
hatch shell
```sh cista --dev -l :8000
npm install
``` ```
### Compile and Hot-Reload for Development ### And the Vite server (in another terminal)
```sh ```fish
cd frontend
npm install
npm run dev npm run dev
``` ```
Browse to Vite, which will proxy API requests to port 8000. Both servers live reload changes.
Note: you need to run the `cista --dev -l :8000` backend server, where Vite will forward the API requests, concurrently in another terminal.
### Type-Check, Compile and Minify for Production ### Type-Check, Compile and Minify for Production
```sh This is also called by `hatch build` during Python packaging:
```fish
npm run build npm run build
``` ```
This is also called by `hatch build` during Python packaging.