Modernize TubeSync Frontend & Codebase Cleanup

.gitignore

@@ -146,5 +146,10 @@ Pipfile.lock
 /tubesync/tasks/*.db-shm
 /tubesync/tasks/*.db-wal
 
-# Compiled CSS
-/tubesync/common/static/styles/*.css
+# Tailwind CLI binary (downloaded per platform)
+/tailwindcss
+
+# Compiled CSS output (generated by Tailwind CLI)
+/tubesync/common/static/styles/output.css
+tubesync/tubesync/local_settings.py
+tubesync/tubesync/downloads

Dockerfile

@@ -403,7 +403,7 @@ FROM tubesync-base AS tubesync-prepare-app
 
 COPY tubesync /app
 
-RUN --mount=type=bind,source=fontawesome-free,target=/fontawesome-free \
+RUN --mount=type=bind,source=assets/fontawesome-free,target=/fontawesome-free \
   set -x && \
   # turn any symbolic links into files
   ( \
@@ -486,7 +486,6 @@ RUN --mount=type=cache,id=apt-lib-cache-${TARGETARCH},sharing=private,target=/va
   libonig5 \
   pkgconf \
   python3 \
-  python3-libsass \
   python3-pip-whl \
   python3-socks \
   curl \
@@ -679,7 +678,6 @@ RUN set -x && \
   # Make absolutely sure we didn't accidentally bundle a SQLite dev database
   test '!' -e /app/db.sqlite3 && \
   # Run any required app commands
-  /usr/bin/python3 -B /app/manage.py compilescss && \
   /usr/bin/python3 -B /app/manage.py collectstatic --no-input --link && \
   rm -rf /config /downloads /run/app && \
   # Create config, downloads and run dirs

Makefile

@@ -11,7 +11,13 @@ dev:
 	$(python) tubesync/manage.py runserver
 
 
-build:
+css:
+	./tailwindcss --input tubesync/common/static/styles/tubesync.css --output tubesync/common/static/styles/output.css
+
+css-watch:
+	./tailwindcss --input tubesync/common/static/styles/tubesync.css --output tubesync/common/static/styles/output.css --watch
+
+build: css
 	mkdir -p tubesync/media
 	mkdir -p tubesync/static
 	$(python) tubesync/manage.py collectstatic --noinput

README.md

@@ -25,25 +25,30 @@ ghcr.io/meeb/tubesync:latest
 
 # Screenshots
 
+<details>
+<summary>Click to expand screenshots</summary>
+
 ### Dashboard
 
-![TubeSync Dashboard](https://github.com/meeb/tubesync/blob/main/docs/dashboard-v0.5.png?raw=true)
+![TubeSync Dashboard](docs/assets/dashboard-v0.5.png)
 
 ### Sources overview
 
-![TubeSync sources overview](https://github.com/meeb/tubesync/blob/main/docs/sources-v0.5.png?raw=true)
+![TubeSync sources overview](docs/assets/sources-v0.5.png)
 
 ### Source details
 
-![TubeSync source details](https://github.com/meeb/tubesync/blob/main/docs/source-v0.5.png?raw=true)
+![TubeSync source details](docs/assets/source-v0.5.png)
 
 ### Media overview
 
-![TubeSync media overview](https://github.com/meeb/tubesync/blob/main/docs/media-v0.5.png?raw=true)
+![TubeSync media overview](docs/assets/media-v0.5.png)
 
 ### Media details
 
-![TubeSync media-details](https://github.com/meeb/tubesync/blob/main/docs/media-item-v0.5.png?raw=true)
+![TubeSync media-details](docs/assets/media-item-v0.5.png)
+
+</details>
 
 
 # Requirements
@@ -146,36 +151,9 @@ services:
 
 ## Optional authentication
 
-Available in `v1.0` (or `:latest`) and later. If you want to enable a basic username and
-password to be required to access the TubeSync dashboard you can set them with the
-following environment variables:
-
-```bash
-HTTP_USER
-HTTP_PASS
-```
-
-For example, in the `docker run ...` line add in:
-
-```bash
-...
--e HTTP_USER=some-username \
--e HTTP_PASS=some-secure-password \
-...
-```
-
-Or in your Docker Compose file you would add in:
-
-```yaml
-...
-    environment:
-      - HTTP_USER=some-username
-      - HTTP_PASS=some-secure-password
-...
-```
-
-When BOTH `HTTP_USER` and `HTTP_PASS` are set then basic HTTP authentication will be
-enabled.
+You can enable basic HTTP authentication by setting the `HTTP_USER` and `HTTP_PASS`
+environment variables. See the [environment variables reference](docs/environment-variables.md#authentication)
+for details.
 
 
 # Updating
@@ -253,19 +231,27 @@ docker logs -t tubesync > TubeSync.logs.txt 2>&1
 ```
 
 
-# Advanced usage guides
+# Documentation
+
+### Getting started
+
+ * [Development guide](docs/dev.md) - Local setup, running tests, contributing
+ * [Environment variables](docs/environment-variables.md) - Full configuration reference
+
+### Usage guides
+
+ * [Using Plex](docs/plex-notes.md) - Plex integration with YouTube-Agent
+ * [Using cookies](docs/using-cookies.md) - Authenticate with YouTube via cookies
+ * [Writing custom filters](docs/custom-filters.md) - Filter media with custom Python code
+ * [YouTube Proof-of-Origin Tokens](docs/youtube-pot.md) - PoT setup for rate-limiting
 
-Once you're happy using TubeSync there are some advanced usage guides for more complex
-and less common features:
+### Administration
 
- * [Using Plex](https://github.com/meeb/tubesync/blob/main/docs/plex-notes.md)
- * [Import existing media into TubeSync](https://github.com/meeb/tubesync/blob/main/docs/import-existing-media.md)
- * [Sync or create missing metadata files](https://github.com/meeb/tubesync/blob/main/docs/create-missing-metadata.md)
- * [Reset tasks from the command line](https://github.com/meeb/tubesync/blob/main/docs/reset-tasks.md)
- * [Using PostgreSQL, MySQL or MariaDB as database backends](https://github.com/meeb/tubesync/blob/main/docs/other-database-backends.md)
- * [YouTube Proof-of-Origin Tokens](https://github.com/meeb/tubesync/blob/main/docs/youtube-pot.md)
- * [Using cookies](https://github.com/meeb/tubesync/blob/main/docs/using-cookies.md)
- * [Reset metadata](https://github.com/meeb/tubesync/blob/main/docs/reset-metadata.md)
+ * [Import existing media](docs/import-existing-media.md) - Import already-downloaded files
+ * [Sync or create missing metadata](docs/create-missing-metadata.md) - Re-generate metadata files
+ * [Reset tasks](docs/reset-tasks.md) - Reset stuck or failed tasks from the CLI
+ * [Reset metadata](docs/reset-metadata.md) - Reset cached metadata
+ * [Using PostgreSQL, MySQL or MariaDB](docs/other-database-backends.md) - External database setup
 
 
 # Warnings
@@ -384,29 +370,9 @@ Make sure that you have `mysql_config` or `mariadb_config` available, as require
 
 # Advanced configuration
 
-There are a number of other environment variables you can set. These are, mostly,
-**NOT** required to be set in the default container installation, they are really only
-useful if you are manually installing TubeSync in some other environment. These are:
-
-| Name                         | What                                                          | Example                                                                       |
-| ---------------------------- | ------------------------------------------------------------- |-------------------------------------------------------------------------------|
-| DJANGO_SECRET_KEY            | Django's SECRET_KEY                                           | YJySXnQLB7UVZw2dXKDWxI5lEZaImK6l                   |
-| DJANGO_URL_PREFIX            | Run TubeSync in a sub-URL on the web server                   | /somepath/                                                                    |
-| TUBESYNC_DEBUG               | Enable debugging                                              | True                                                                          |
-| TUBESYNC_HOSTS               | Django's ALLOWED_HOSTS, defaults to `*`                       | tubesync.example.com,otherhost.com                 |
-| TUBESYNC_RESET_DOWNLOAD_DIR  | Toggle resetting `/downloads` permissions, defaults to True   | True                                                                          |
-| TUBESYNC_VIDEO_HEIGHT_CUTOFF | Smallest video height in pixels permitted to download         | 240                                                                           |
-| TUBESYNC_RENAME_SOURCES      | Rename media files from selected sources                      | Source1_directory,Source2_directory                |
-| TUBESYNC_RENAME_ALL_SOURCES  | Rename media files from all sources                           | True                                                                          |
-| TUBESYNC_DIRECTORY_PREFIX    | Enable `video` and `audio` directory prefixes in `/downloads` | True                                                                          |
-| TUBESYNC_SHRINK_NEW          | Filter unneeded information from newly retrieved metadata     | True                                                                          |
-| TUBESYNC_SHRINK_OLD          | Filter unneeded information from metadata loaded from the database | True                                                                     |
-| GUNICORN_WORKERS             | Number of `gunicorn` (web request) workers to spawn           | 3                                                                             |
-| LISTEN_HOST                  | IP address for `gunicorn` to listen on                        | 127.0.0.1                                                                     |
-| LISTEN_PORT                  | Port number for `gunicorn` to listen on                       | 8080                                                                          |
-| HTTP_USER                    | Sets the username for HTTP basic authentication               | some-username                                                                 |
-| HTTP_PASS                    | Sets the password for HTTP basic authentication               | some-secure-password                                                          |
-| DATABASE_CONNECTION          | Optional external database connection details                 | postgresql://user:pass@host:port/database          |
+See the full [environment variables reference](docs/environment-variables.md) for all
+available configuration options (database, web server, downloads, metadata, debugging,
+etc.).
 
 
 # Manual, non-containerised, installation