v2.0.2

wasn't causing setter to trigger and save to localStorage

.eslintignore

@@ -7,6 +7,8 @@ node_modules
 .env.*
 !.env.example
 
+/doc
+
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml
 package-lock.json

.eslintrc.cjs

@@ -1,20 +1,27 @@
 module.exports = {
 	root: true,
-	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
+	parser: "@typescript-eslint/parser",
+	extends: ["plugin:svelte/recommended"],
+	plugins: ["@typescript-eslint"],
+	ignorePatterns: ["*.cjs", "*.config.js"],
+	overrides: [
+		{
+			files: ["*.svelte"],
+			parser: "svelte-eslint-parser",
+			parserOptions: {
+				parser: "@typescript-eslint/parser",
+			},
+		},
+	],
 	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020
+		project: "./tsconfig.json",
+		extraFileExtensions: [".svelte"],
+		sourceType: "module",
+		ecmaVersion: 2020,
 	},
 	env: {
 		browser: true,
 		es2017: true,
-		node: false
-	}
+		node: false,
+	},
 };

.github/ISSUE_TEMPLATE/01-bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ""
+labels: bug
+assignees: ""
+---
+
+<!-- It's harder to track bugs when multiple are reported in one issue. If you have more than one (unrelated) bugs to report, please make one issue per bug. -->
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Platform (please complete the following information):**
+
+- OS: [e.g. Linux, Windows, Android, iOS]
+- Browser (latest version): [e.g. chrome, safari, firefox]
+- Watcharr Version: [e.g. v1.45.0]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/02-feature_request.md

@@ -0,0 +1,24 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ""
+labels: enhancement
+assignees: ""
+---
+
+<!-- Feature requests can be hard to track when two or more unrelated ideas are included in one issue. Please make a new issue for each idea (make as many as you need to). -->
+
+**Idea Overview**
+A quick overview of the idea you are proposing.
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/documentation.md

@@ -0,0 +1,15 @@
+---
+name: Documentation
+about: Help us with our documentation. Is something important missing?
+title: ""
+labels: documentation
+assignees: IRHM
+---
+
+<!-- Did you know: You can click `Edit this page` at the bottom of any page on the docs to propose exact changes? If this doesn't apply to you, continue below and fill out the issue. -->
+
+**What is missing or needs updating on the documentation site?**
+Please describe in detail what is missing or needs updating on the documentation site.
+
+**(optional) How would you write/update this doc?**
+How would you write out this documentation?

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,5 @@
+<!-- Make sure your code is formatted by running `npm run format` or using prettier manually. -->
+
+### Changes made
+
+<!-- Describe changes made here. If changes are visual a screenshot could be useful! -->

.github/dependabot.yml

@@ -0,0 +1,27 @@
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  # Web UI
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    commit-message:
+      prefix: "ui"
+
+  # Server
+  - package-ecosystem: "gomod"
+    directory: "/server"
+    schedule:
+      interval: "weekly"
+    commit-message:
+      prefix: "server"
+
+  # Workflows
+  - package-ecosystem: "github-actions"
+    directory: "/" # / will look in /.github/workflows directory by default
+    schedule:
+      interval: "weekly"
+    commit-message:
+      prefix: "workflow"

.github/workflows/container-dev.yml

@@ -1,10 +1,13 @@
-name: Development Watcharr Container Release
+# Multi arch support doc/guide:
+# https://docs.docker.com/build/ci/github-actions/multi-platform/
+
+name: Development Watcharr Image Release
 
 on:
   workflow_dispatch:
 
 env:
-  image: ghcr.io/sbondco/watcharr
+  image: sbondco/watcharr
 
 jobs:
   release-dev-image:
@@ -16,20 +19,37 @@ jobs:
 
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Log in to the Container registry
-        uses: docker/login-action@v2
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: sbondco
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
       - name: Build and push Docker image
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
           push: true
-          tags: ${{ env.image }}:dev
-          labels: ${{ env.image }}:${{ github.sha }}
+          tags: |
+            ${{ env.image }}:dev
+            ghcr.io/${{ env.image }}:dev
+          labels: |
+            ${{ env.image }}:${{ github.sha }}
+            ghcr.io/${{ env.image }}:${{ github.sha }}

.github/workflows/container-release.yml

@@ -1,13 +1,12 @@
-name: Release Watcharr Containers
+name: Release Watcharr Image
 
 on:
-  workflow_dispatch:
   push:
     tags:
       - v*
 
 env:
-  image: ghcr.io/sbondco/watcharr
+  image: sbondco/watcharr
 
 jobs:
   release-images:
@@ -19,26 +18,45 @@ jobs:
 
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Log in to the Container registry
-        uses: docker/login-action@v2
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: sbondco
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
-          images: ${{ env.image }}
+          images: |
+            ${{ env.image }}
+            ghcr.io/${{ env.image }}
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
           push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          tags: |
+            ${{ steps.meta.outputs.tags }}
+            ghcr.io/${{ steps.meta.outputs.tags }}
+          labels: |
+            ${{ steps.meta.outputs.labels }}
+            ghcr.io/${{ steps.meta.outputs.labels }}

.github/workflows/publish-docs.yml

@@ -0,0 +1,50 @@
+name: Publish Docs
+
+on:
+  push:
+    branches:
+      - dev
+    paths:
+      - ".github/workflows/publish-docs.yml"
+      - "doc/**"
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    defaults:
+      run:
+        working-directory: doc
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Build website
+        run: npm run build
+
+      # Popular action to deploy to GitHub Pages:
+      # Docs: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-docusaurus
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          # Build output to publish to the `gh-pages` branch:
+          publish_dir: ./doc/build
+          cname: watcharr.app
+          # The following lines assign commit authorship to the official
+          # GH-Actions bot for deploys to `gh-pages` branch:
+          # https://github.com/actions/checkout/issues/13#issuecomment-724415212
+          # The GH actions bot is used by default if you didn't specify the two fields.
+          # You can swap them out with your own user credentials.
+          user_name: github-actions[bot]
+          user_email: 41898282+github-actions[bot]@users.noreply.github.com

.github/workflows/test-docs.yml

@@ -0,0 +1,28 @@
+name: Test doc deployment
+
+on:
+  pull_request:
+    branches:
+      - dev
+    paths:
+      - ".github/workflows/test-docs.yml"
+      - "doc/**"
+
+jobs:
+  test-deploy:
+    name: Test deployment
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: doc
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Test build website
+        run: npm run build

.github/workflows/test-pr-server.yml

@@ -0,0 +1,31 @@
+name: Test PR (server)
+
+on:
+  pull_request:
+    branches:
+      - "**"
+    tags-ignore:
+      - v*
+    paths:
+      - ".github/workflows/test-pr-server.yml"
+      - "server/**"
+
+jobs:
+  format_check_go:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-go@v5
+
+      - name: gofmt test
+        run: |
+          outp=$(gofmt -l .)
+          if [ -n "$outp" ]; then
+            echo "Need to fix formatting!"
+            echo "$outp"
+            exit 1
+          else
+            echo "Everything looks formatted"
+            exit 0
+          fi

.github/workflows/test-pr-web.yml

@@ -0,0 +1,36 @@
+name: Test PR (web)
+
+on:
+  pull_request:
+    branches:
+      - "**"
+    tags-ignore:
+      - v*
+    paths:
+      - ".github/workflows/test-pr-web.yml"
+      - "package*.json"
+      - "svelte.config.json"
+      - "vite.config.json"
+      - "tsconfig.json"
+      - ".prettier*"
+      - "src/**"
+
+jobs:
+  linter_check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Get dependencies
+        run: npm i
+
+      - name: Check for linting/formatting errors
+        run: npm run lint

.gitignore

@@ -40,3 +40,8 @@ vite.config.ts.timestamp-*
 
 # Docker dev volume
 container_data/
+data/
+
+# Build artifacts
+server/ui
+server/watcharr

.prettierignore

@@ -6,6 +6,10 @@ node_modules
 .env
 .env.*
 !.env.example
+/.vscode
+
+doc/.docusaurus/
+doc/build/
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

.prettierrc

@@ -2,16 +2,11 @@
 	"tabWidth": 2,
 	"semi": true,
 	"singleQuote": false,
-	"printWidth": 100,
-	"useTabs": false,
-	"trailingComma": "none",
+	"printWidth": 80,
+	"useTabs": true,
+	"trailingComma": "all",
 	"arrowParens": "always",
-	"plugins": [
-		"prettier-plugin-svelte"
-	],
-	"pluginSearchDirs": [
-		"."
-	],
+	"plugins": ["prettier-plugin-svelte"],
 	"overrides": [
 		{
 			"files": "*.svelte",
@@ -20,4 +15,4 @@
 			}
 		}
 	]
-}
+}

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Launch Package",
+			"type": "go",
+			"request": "launch",
+			"mode": "auto",
+			"program": "${fileDirname}"
+		}
+	]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"editor.insertSpaces": false
+}

ATTRIBUTION.md

@@ -0,0 +1,28 @@
+# Attribution
+
+We haven't rebuilt the wheel from scratch, here are the tools that have helped this project come to fruition.
+
+(I am creating this file a bit late, some tools may be missing, hopefully over time I can get everything listed here).
+
+## Web Client
+
+Look at our [package.json](./package.json) for the packages we directly use.
+
+- [Ionicons](https://ionic.io/ionicons) When looking for high quality icons, I go here first. Most of the icons in Watcharr are from here.
+- [Wikimedia Commons](https://commons.wikimedia.org) For [Streaming provider icons](https://commons.wikimedia.org/wiki/Category:SVG_logos_of_video_streaming_services).
+- [Penpot](https://github.com/penpot/penpot) For initial UI design and creating the logo.
+- [Google Fonts](https://fonts.google.com/) For custom fonts and for a few icons too. Don't worry though, fonts/icons are included in the Watcharr download, there are **no** requests made to google.
+
+## Server
+
+Look at our [go.mod](./server/go.mod) for the packages we use.
+
+- [TMDB](https://developer.themoviedb.org) Movie/show data.
+- [IGDB](https://www.igdb.com/api) Game data.
+
+## README.md
+
+The tools I have used to create the projects README.
+
+- [deviceframes](https://deviceframes.com)
+  Created the devices mockup preview image with this tool (and GIMP).

CONTRIBUTING.md

@@ -0,0 +1,11 @@
+# Contributing 🎉
+
+First of all, thank you for looking into contributing! 🫡
+
+Feel free to contribute in any way: 🐞 bug reports, 💡 ideas, 🥖 new features etc - everything is welcome!
+
+For big PRs (lots of changes/big change in the way something works), if you'd like, it can be discussed first in an issue (dont want to waste anyones time!).
+
+## Project Board
+
+We have a [board to organize new features and bug fixes](https://github.com/orgs/sbondCo/projects/9/views/2) to be worked on. If you see something you'd like to work on, just ask in the issue and it can be assigned to you. Even if it isn't set for the next milestone already, it can be.

Dockerfile

@@ -1,13 +1,23 @@
+#
 # Backend
-FROM golang:1.20 AS server
+#
+FROM golang:1.22-alpine AS server
 
 WORKDIR /server
 COPY server/*.go server/go.* ./
+COPY server/arr/*.go ./arr/
+COPY server/game/*.go ./game/
 
-RUN go mod download && GOOS=linux go build -o ./watcharr
+# Required so we can build with cgo
+RUN apk update && apk add --no-cache musl-dev gcc build-base
 
+# CGO_CFLAGS: https://github.com/mattn/go-sqlite3/issues/1164#issuecomment-1635253695
+RUN go mod download && GOOS=linux CGO_ENABLED=1 CGO_CFLAGS="-D_LARGEFILE64_SOURCE" go build -o ./watcharr
+
+#
 # Frontend
-FROM node:19 AS ui
+#
+FROM node:20-alpine AS ui
 
 WORKDIR /app
 COPY package*.json vite.config.ts svelte.config.js tsconfig.json ./
@@ -16,25 +26,19 @@ COPY ./static ./static
 
 RUN npm install && npm run build
 
+#
 # Production
-FROM debian:11.6 AS runner
-
-RUN apt-get update && apt-get install ca-certificates -y
-
-ENV NODE_VERSION=18.13.0
-RUN apt install -y curl
-RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
-ENV NVM_DIR=/root/.nvm
-RUN . "$NVM_DIR/nvm.sh" && nvm install ${NODE_VERSION}
-RUN . "$NVM_DIR/nvm.sh" && nvm use v${NODE_VERSION}
-RUN . "$NVM_DIR/nvm.sh" && nvm alias default v${NODE_VERSION}
-ENV PATH="/root/.nvm/versions/node/v${NODE_VERSION}/bin/:${PATH}"
-RUN node --version
+#
+FROM node:20-alpine AS runner
 
 COPY --from=server /server/watcharr /
 COPY --from=ui /app/build /ui
 COPY --from=ui /app/package.json /app/package-lock.json /ui
-RUN cd /ui && npm ci
+
+# Install just the prod dependencies for final step.
+# We --ignore-scripts, to stop the `prepare` script from auto-
+# running, which is only meant for development (will error).
+RUN cd /ui && npm ci --omit=dev --ignore-scripts=true
 
 EXPOSE 3080
 

README.md

@@ -1,62 +1,77 @@
 <h1 align="center">Watcharr</h1>
-<p align="center"><img src="./static/logo-col.png" alt="logo" /></p>
+<p align="center"><img src="./static/logo-col.png" alt="logo" width="250" /></p>
 
-I'm the place you store your watched content for later rememberance, sadly I am still in my infancy. I aspire to be easily self hosted.
+<p align="center">
+  <a href="https://github.com/sbondCo/Watcharr/pkgs/container/watcharr"><img src="https://img.shields.io/github/v/release/sbondCo/Watcharr?label=version&style=for-the-badge" /></a>
+  <a href="https://beta.watcharr.app"><img src="https://img.shields.io/website?label=DEMO&style=for-the-badge&url=https%3A%2F%2Fbeta.watcharr.app" /></a>
+  <a href="https://watcharr.app"><img src="https://img.shields.io/website?label=DOCS&style=for-the-badge&url=https%3A%2F%2Fwatcharr.app" /></a>
+  <a href="https://github.com/sbondCo/Watcharr/issues"><img src="https://img.shields.io/github/issues-raw/sbondCo/Watcharr?label=ISSUES&style=for-the-badge" /></a>
+  <a href="/LICENSE"><img src="https://img.shields.io/github/license/sbondCo/Watcharr?style=for-the-badge" /></a>
+  <a href="https://matrix.to/#/#watcharr:matrix.org"><img src="https://img.shields.io/matrix/watcharr%3Amatrix.org?style=for-the-badge&logo=matrix" /></a>
+</p>
+
+I'm your new easily self-hosted content watched list. The place you store your watched (or watching, planned, etc) **movies** and **tv shows** (and **anime**), rate them and track their status.
+
+With [some extra configuration](https://watcharr.app/docs/server_config/game-support-igdb) I can also track your **video games**.
 
 I am built with Go and Svelte(Kit).
 
-Feel free to abuse this demo instance (nicely), which runs on the latest `dev` build (there may be bugs, as new features are tested on here too before release): [https://watcharr.lab.sbond.co/](https://watcharr.lab.sbond.co/)
+Feel free to abuse this demo instance (nicely), which runs on the latest `dev` build (there may be bugs, as new features are tested on here too): [https://beta.watcharr.app/](https://beta.watcharr.app/)
+
+[Track progress for the next version](https://github.com/orgs/sbondCo/projects/9/views/3).
+
+### Contents
+
+- [Screenshots](#screenshots)
+- [Set Up](#set-up)
+- [Community Made Tools](#community-made-tools)
+- [Getting Help](#getting-help)
+- [Contributing](#contributing)
 
 # Screenshots
 
-<h3 align="center">Watched List</h3>
 <p align="center">
-<img src="./screenshot/homepage.png" alt="Watched List" />
 
-| Watched Show Hover                                                      | Watched Show Status Change                                                              | Show Details                                                                |
-| ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
-| <img src="./screenshot/homepage-poster-hover.png" alt="Watched List" /> | <img src="./screenshot/homepage-poster-change-status.png" alt="Changing Show Status" /> | <img src="./screenshot/show-details-page.png" alt="Content Details Page" /> |
+<img src="./screenshot/devices-mock.png" alt="Overview" />
+
+| Homepage                                                       | Watched Show Hover                                                          |
+| -------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| <img src="./screenshot/homepage.png?v=2" alt="Watched List" /> | <img src="./screenshot/homepage-poster-hover.png?v=2" alt="Watched List" /> |
+
+| Watched Show Status Change                                                                  | Movie Details                                                                      |
+| ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| <img src="./screenshot/homepage-poster-change-status.png?v=2" alt="Changing Show Status" /> | <img src="./screenshot/content-details-page.png?v=2" alt="Content Details Page" /> |
+
+| User Profile                                                            | Discover                                                             |
+| ----------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| <img src="./screenshot/user-profile.png?v=2" alt="User Profile Page" /> | <img src="./screenshot/discover-page.png?v=2" alt="Discover Page" /> |
+
+| Dark Homepage                                                              | Dark Content Details                                                                       |
+| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| <img src="./screenshot/homepage-dark.png?v=2" alt="Dark Theme Homepage" /> | <img src="./screenshot/content-details-page-dark.png?v=2" alt="Dark Theme Content Page" /> |
 
 </p>
 
 # Set Up
 
-Currently only a [docker image](https://github.com/sbondCo/Watcharr/pkgs/container/watcharr) is provided.
+[Checkout our documentation](https://watcharr.app/docs/category/installation) for an up to date guide on setup! If you hate manuals, but love docker, this [docker-compose.yml](./docker-compose.yml) file is your friend.
 
-Here is a simple setup you can use yourself, using docker compose:
+# Community Made Tools
 
-**docker-compose.yml**
+Third-party tools made by the community for enhancing your Watcharr experience!
 
-```
-version: "3"
+- [Kodi Plugin](https://github.com/airdogvan/watcharr_kodi) by [airdogvan](https://github.com/airdogvan) for automatically tracking your watched shows/movies.
 
-services:
-  watcharr:
-    # The :latest tag is used for simplicity, it is recommended
-    # to use an actual version, then when updating check the releases for changelogs.
-    image: ghcr.io/sbondco/watcharr:latest
-    container_name: watcharr
-    ports:
-      - 3080:3080
-    volumes:
-      # .env file used to configure watcharr
-      - .env:/.env
-      # Contains all of watcharr data (database & cache)
-      - ./data:/data
-```
+Thanks to anyone that has made a script or tool for Watcharr. Feel free to add your own to the list if you have one!
 
-**.env**
+**Note:** I cannot provide any assurances for these tools or stay on top of them (code review, etc), if you have any problems please open an issue in the project for the tool so that they can stay organized.
 
-```
-# Used to sign JWT tokens. Make sure to make
-# it strong, just like a very long, complicated password.
-JWT_SECRET=MAKE_ME_RANDOM_AND_LONG
+# Getting Help
 
-# Optional: Point to your Jellyfin install
-# to enable it as an auth provider.
-JELLYFIN_HOST=https://my.jellyfin.example
+If something isn't working for you or you are stuck, [creating an issue](https://github.com/sbondCo/Watcharr/issues/new) is the best way to get help! Every type of issue is accepted, so don't be afraid to ask anything!
 
-# Optional: When not set we assume production, when set to
-# DEV extra logging will appear which could help solve issues.
-MODE=prod
-```
+You can also [join our space on Matrix](https://matrix.to/#/#watcharr:matrix.org) for support.
+
+# Contributing
+
+Please continue to our [contributing guide](CONTRIBUTING.md).

SECURITY.md

@@ -0,0 +1,7 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+**Please do not report security vulnerabilities through public GitHub issues.**
+
+You can reach out directly to [@irhm:matrix.org](https://matrix.to/#/@irhm:matrix.org) on matrix to discuss the vulnerability or you may [draft a new security advisory on this repository](https://github.com/sbondCo/Watcharr/security/advisories/new).

doc/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

doc/README.md

@@ -0,0 +1,43 @@
+# Watcharr Docs
+
+View the live site at [watcharr.app](https://watcharr.app/).
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

doc/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+	presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+};

doc/docs/importing/_category_.json

@@ -0,0 +1,8 @@
+{
+	"label": "Importing",
+	"position": 3,
+	"link": {
+		"type": "generated-index",
+		"description": "Guides for importing your data from other services."
+	}
+}

doc/docs/importing/myanimelist.md

@@ -0,0 +1,17 @@
+---
+sidebar_position: 1
+---
+
+# MyAnimeList
+
+:::info Backup?
+You may consider a backup of your server before starting any import. They are not easily reversible, though we do our best to ensure they are accurate and bug free!
+:::
+
+1. Export your list from MyAnimeList at: https://myanimelist.net/panel.php?go=export
+
+   ![Hovering over poster](./img/mal/export.png)
+
+2. Save the export anywhere and extract it to get your export `.xml` file.
+
+3. Drag and drop your `.xml` file into Watcharr.

doc/docs/installation/_category_.json

@@ -0,0 +1,8 @@
+{
+	"label": "Installation",
+	"position": 2,
+	"link": {
+		"type": "generated-index",
+		"description": "Choose how you would like to install Watcharr."
+	}
+}

doc/docs/installation/docker-compose.md

@@ -0,0 +1,68 @@
+---
+sidebar_position: 1
+description: Install and setup with Docker Compose.
+---
+
+# Docker Compose
+
+## Installing
+
+Installing Watcharr with a docker compose file is easy. You can copy the example below to get started:
+
+```yaml title="docker-compose.yml"
+services:
+  watcharr:
+    # The :latest tag is used for simplicity, it is recommended
+    # to use an actual version, then when updating check the releases for changelogs.
+    image: ghcr.io/sbondco/watcharr:latest
+    container_name: watcharr
+    ports:
+      - 3080:3080
+    volumes:
+      # Contains all of watcharr data (database & cache)
+      - ./data:/data
+    restart: unless-stopped
+```
+
+:::danger first account
+
+When **first** running Watcharr, make sure only you have access. The first user created will become admin.
+
+:::
+
+You can now start `Watcharr` like so:
+
+```bash
+docker compose up -d
+```
+
+If you didn't change the ports in the example, the server will be available at [http://localhost:3080/](http://localhost:3080/).
+
+## Updating
+
+:::danger Take care
+
+We try taking care as to not release breaking changes, however it is still recommended that
+you lookover changelogs before updating!
+
+Breaking changes are marked at the top of releases: https://github.com/sbondCo/Watcharr/releases
+
+:::
+
+Updating your server can be done in two steps:
+
+1. Update the `image` version in your `docker-compose.yml` file.
+   Skip this step if you are using the `latest` tag.
+
+   ```yaml
+   # eg. update v1.19.0 to v1.20.0 (or whatever version you are updating to)
+   image: ghcr.io/sbondco/watcharr:v1.19.0
+   ```
+
+2. Pull the new changes and re-create your container:
+
+   ```bash
+   docker compose pull && docker compose down && docker compose up -d
+   ```
+
+And that is it!

doc/docs/installation/for-development.md

@@ -0,0 +1,77 @@
+---
+sidebar_position: 11
+description: Building from source for developing upon Watcharr.
+---
+
+# For Development
+
+This guide will help you setup Watcharr for development in your local environment.
+
+## Setup
+
+This section assumes you will be forking the repo on Github, of course you can alter this section to work with your workflow, but if you intend to create a pull request with your work, it may be difficult if you're not also using Github (I don't know :()).
+
+1. Fork the repository
+
+   On GitHub you can fork the repository with the 'Fork' button at the top.
+
+   ![Fork button](./img/forking-repo.png)
+
+2. Get the code by cloning your fork
+
+   ```bash
+   git clone https://github.com/<your username>/Watcharr.git && \
+   cd Watcharr
+   ```
+
+## Setting Up Dependencies
+
+You only need to do this once after pulling the codebase for the first time, and again every time the dependencies are changed/updated.
+
+1. Install frontend dependencies (in the project root folder)
+
+   ```
+   npm i
+   ```
+
+2. Install server dependencies (in the `server` folder)
+
+   ```
+   go get .
+   ```
+
+## Running The Code
+
+To run the code, you will need to open up two terminals, one for the frontend and the other for the backend.
+
+1. Run the frontend (first terminal, in the project root folder)
+
+   ```bash
+   npm run dev
+   ```
+
+2. Run the server (second terminal, in the project root folder)
+
+   ```bash
+   npm run server
+   ```
+
+   **Note:** If you're using Windows, running the server can be a little more complicated. You can follow this: https://github.com/sbondCo/Watcharr/discussions/430#discussioncomment-8894110 which amounts to these steps (the first 3 steps only need to be done once):
+
+   1. Set CGO_ENABLED environment variable with go
+
+      ```
+      go env -w CGO_ENABLED=1
+      ```
+
+   2. Install `gcc` (if you don't already have it installed) from https://jmeubank.github.io/tdm-gcc/ (found from this answer on stackoverflow: https://stackoverflow.com/a/43588236).
+
+   3. Install server dependencies again with `go get .` in the `server` folder.
+
+   4. Manually run the server, setting the MODE environment variable in powershell (from the `server` folder)
+
+      ```
+      cmd /V /C "set MODE=DEV&& go run ."
+      ```
+
+3. Visit [http://localhost:5173/](http://localhost:5173/) and setup Watcharr.

doc/docs/installation/from-source.md

@@ -0,0 +1,75 @@
+---
+sidebar_position: 10
+description: Building and installing from source.
+---
+
+# From Source
+
+## Installing
+
+1. Get the code
+
+   ```bash
+   git clone https://github.com/sbondCo/Watcharr.git && \
+   cd Watcharr
+   ```
+
+   If you want a specific version, checkout a version tag (replace `<tag>` with the tag):
+
+   ```bash
+   git checkout <tag>
+   ```
+
+2. Build the frontend
+
+   The server will use the built files, so we move them to the `ui` folder, besides where it's binary will be built.
+
+   ```bash
+   npm i && \
+   npm run build && \
+   mv ./build ./server/ui
+   ```
+
+3. Build the server
+
+   ```bash
+   cd server && \
+   go mod download && \
+   GOOS=linux go build -o ./watcharr
+   ```
+
+4. Run the server
+
+   :::danger first account
+
+   When **first** running Watcharr, make sure only you have access. The first user created will become admin.
+
+   :::
+
+   ```bash
+   ./watcharr
+   ```
+
+5. Visit [http://localhost:3080/](http://localhost:3080/) and setup Watcharr.
+
+## Updating
+
+:::danger Take care
+
+We try taking care as to not release breaking changes, however it is still recommended that
+you lookover changelogs before updating!
+
+Breaking changes are marked at the top of releases: https://github.com/sbondCo/Watcharr/releases
+
+:::
+
+Updating is the same as installing except:
+
+1. Cleanup old build. Delete the `ui` folder and the `watcharr` binary.
+2. Replace step one with getting the new code:
+
+   ```bash
+   git pull
+   ```
+
+   If you checked out a tag, update to the new tag as well.

doc/docs/introduction.md

@@ -0,0 +1,10 @@
+---
+sidebar_position: 1
+---
+
+# Introduction
+
+Watcharr is for the peeps who like to keep a list of all the content they have ever watched.
+
+If you would like more insight, the [adding to your watchlist guide](/docs/usage/adding-to-watchlist)
+is a great example of how Watcharr is used.

doc/docs/server_config/_category_.json

@@ -0,0 +1,8 @@
+{
+	"label": "Server Configuration",
+	"position": 2,
+	"link": {
+		"type": "generated-index",
+		"description": "Learn how to configure your server."
+	}
+}

doc/docs/server_config/backup.md

@@ -0,0 +1,41 @@
+---
+sidebar_position: 100
+description: Backing up your server.
+---
+
+# Backing Up
+
+Watcharr cannot handle backing up for you, but its simple structure should make it easy to slide it into your existing backup routine.
+
+Once you have created your first backup, it's recommended that you try restoring from that backup to make sure everything is correct and will work in case you need to restore from it in the future.
+
+:::danger Shutdown your server!
+Always shutdown Watcharr before backing up its data, otherwise you run the risk of corrupting files (mainly your database).
+:::
+
+## Simple Steps
+
+:::success Recommended
+This is the recommended way to backup.
+:::
+
+Here are the steps that are run daily for the `beta.watcharr.app` instance.
+
+1. Shutdown Watcharr.
+2. Copy and backup the entire `data` folder (default location is `./data`, backup whichever folder your server is configured to store its data in).
+3. Start Watcharr.
+
+I call these the simple steps because they simply backup your entire server, if you ever need to restore your server, it will start up from its exact state at backup.
+
+## Advanced Steps
+
+:::danger Discouraged
+Backing up this way is discouraged because new important files could be added later and missed.
+:::
+
+If you don't care about the warning not to backup this way, here are the "important" files that you can single out for backup:
+
+- `watcharr.db` Your database, holds all users, their watchlists, etc.
+- `watcharr.json` Server config.
+- `img/up` Profile picture uploads.
+- `img/games` Game posters (not exactly important, but scenarios in which this folder is not backed up have not been tested, only relevant for servers with game support enabled).

doc/docs/server_config/environment-variables.md

@@ -0,0 +1,14 @@
+---
+sidebar_position: 11
+description: All environment variables you can use to start your server in a specific way.
+---
+
+# Environment Variables
+
+Currently there is only one, and maybe it will stay that way forever (because the admin interface can handle most settings). A very lonely page right now ;(.
+
+## `WATCHARR_DATA`
+
+Make Watcharr use a custom directory for all of its data.
+
+Defaults to `./data`.

doc/docs/server_config/game-support-igdb.md

@@ -0,0 +1,46 @@
+---
+sidebar_position: 1
+description: Setting up video game support.
+---
+
+# Games Support (via IGDB/Twitch)
+
+Game support in Watcharr, currently, must be enabled by you.
+
+This involves setting up a Twitch developer account (phone number needed for 2FA which is required) and entering application credentials into Watcharr, that can then be used for looking up game info via IGDB.
+
+P.S. These steps are stolen from [igdb api docs](https://api-docs.igdb.com/#account-creation), I've tried to make it easier to follow with screenshots.
+
+## Setup Steps
+
+### Setup On Twitch
+
+1. Sign up for a [Twitch](https://dev.twitch.tv/login) account.
+   Click login with twitch, then create an account in the Sign Up tab.
+2. Enable two factor authentication in your [account Security settings](https://www.twitch.tv/settings/security) (currently requires a phone number).
+3. [Register a new Application in the Twitch Developer Console](https://dev.twitch.tv/console/apps/create).
+   These settings will do (name can be anything, we don't use OAuth, but a redirect url is required; localhost will do):
+
+   ![Registering twitch application](./img/twitch-register-app.png)
+
+4. [Click manage](https://dev.twitch.tv/console/apps) on your newly created application.
+5. Click 'New Secret' to generate a new Client Secret.
+6. Take a note of your Client ID and new Client Secret (by leaving this tab open, until we are ready to copy the values into Watcharr).
+
+### Setup On Watcharr
+
+1. Login to Watcharr with an Admin account and navigate to server settings.
+
+   ![Navigating to server settings in Watcharr](./img/watcharr-settings-dropdown.png)
+
+2. Scroll down and click on the Twitch service.
+
+   ![Twitch service config button](./img/watcharr-twitch-service.png)
+
+3. Enter your Client ID and Client Secret (from Twitch Application page, step 6 on twitch setup steps)
+
+   ![Twitch service config](./img/watcharr-twitch-config.png)
+
+4. Click save, and start searching for your favourite games!
+
+   ![Watcharr game details page](./img/watcharr-game-details.png)

doc/docs/server_config/jellyfin-auth.md

@@ -0,0 +1,28 @@
+---
+sidebar_position: 9
+description: Enabling Jellyfin as an authentication provider.
+---
+
+# Jellyfin Authentication
+
+Watcharr can use your Jellyfin server as an authentication provider. There is just one simple step to set this up.
+
+:::danger Take care
+
+It is not recommended that this value is changed once it has been set and users have signed up.
+
+Changing this setting can cause users to be unable to login to the correct account.
+
+:::
+
+## Setup Steps
+
+1. Login to Watcharr with an Admin account and navigate to server settings.
+
+   ![Navigating to server settings in Watcharr](./img/watcharr-settings-dropdown.png)
+
+2. Scroll down to find the Jellyfin Host setting and enter the URL to your Jellyfin server.
+
+   ![Entering Jellyfin server URL into input](./img/watcharr-jellyfin-host-setting.png)
+
+3. Jellyfin authentication has now been enabled! Go back to the login screen and you will be able to login via Jellyfin.

doc/docs/server_config/plex-auth.md

@@ -0,0 +1,24 @@
+---
+sidebar_position: 10
+description: Enabling Plex as an authentication provider.
+---
+
+# Plex Authentication
+
+Watcharr can use Plex as an authentication provider. There is just one simple step to set this up.
+
+## Setup Steps
+
+1. Login to Watcharr with an Admin account and navigate to server settings.
+
+   ![Navigating to server settings in Watcharr](./img/watcharr-settings-dropdown.png)
+
+2. Scroll down and find the Plex Host setting.
+
+   ![Plex host setting input](./img/watcharr-plex-host-setting.png)
+
+3. Enter the URL to your home Plex server.
+   You will see your Plex machine identifier popup below the input after it's saved, if it worked.
+   Only users with access to your library will be able to signup via Plex.
+
+   ![Entering home Plex server URL into input](./img/watcharr-plex-host-setting-filled.png)

doc/docs/server_config/restoring-admin.md

@@ -0,0 +1,28 @@
+---
+sidebar_position: 10
+description: Getting admin privileges for your account without already having access to an account with admin.
+---
+
+# Restoring Admin Priviliges
+
+This guide will help you restore/give admin access to any account without needing an account with admin. If you ever accidentally remove your permissions, this is the easiest way to get them back.
+
+All you will need is access to the `watcharr.log` file.
+
+## Steps
+
+1. Login with the account you'd like to give admin to.
+
+2. Navigate to the `/request_admin` page manually (ex: `127.0.0.1:3080/request_admin`) and click the `request` button.
+
+   ![requesting an admin token](./img/request-admin/request-admin-btn.png)
+
+3. Check your `watcharr.log` file (or simply check `docker compose logs` if using docker compose) and look for the generated admin token (highlighted in the image below).
+
+   ![finding admin token in log](./img/request-admin/admin-token-generated-log-example.png)
+
+4. Enter the code from the log (you should have been taken here after clicking the request button in step 2).
+
+   ![redeeming admin token](./img/request-admin/redeeming-admin-token.png)
+
+5. Click `Check Token`, if it is correct and still valid (they expire after ~2 minutes or once used), your account will now have admin.

doc/docs/usage/_category_.json

@@ -0,0 +1,8 @@
+{
+	"label": "Usage",
+	"position": 3,
+	"link": {
+		"type": "generated-index",
+		"description": "Hopefully Watcharr is easy enough to get started with and use, but incase you are stuck, one of these usage guides may help."
+	}
+}

doc/docs/usage/adding-to-watchlist.md

@@ -0,0 +1,39 @@
+---
+sidebar_position: 1
+---
+
+# Adding To Your Watchlist
+
+Adding movies or shows to your watchlist is the core feature of Watcharr.
+
+The homepage is where your list will appear once you have added some.
+
+To get started, you can follow along with these steps to add your first movie/show:
+
+1. Search for the content:
+
+   ![Searching For Content](./img/search-for-content.png)
+
+2. Hover or click on the content you want to add:
+
+   ![Hovering over poster](./img/search-for-content-hover-poster.png)
+
+3. Clicking the + (Plus) icon will let you give the content a status.
+
+   Currently supported statuses include: `Finished`, `Watching`, `Held`, `Planned`, `Dropped`.
+
+   ![Giving content a status](./img/search-for-content-hover-poster-status.png)
+
+4. Rate the content.
+
+   ![Giving content a rating](./img/search-for-content-hover-poster-rate.png)
+
+If you prefer, you can also do this by clicking/tapping on the active poster again.
+This will take you to the contents full page. Here you can see all the options, including
+adding `Thoughts` for the content.
+
+![Content full page](./img/content-full-page.png)
+
+`Thoughts` can be anything you would like to write down or remember about the specific movie/show.
+For example, sometimes I like to write something specific that I _really_ liked about the content,
+or for some shows, I write down my favourite seasons and how many times I have watched them.

doc/docusaurus.config.js

@@ -0,0 +1,110 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const { themes } = require("prism-react-renderer");
+const lightTheme = themes.github;
+const darkTheme = themes.dracula;
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+	title: "Watcharr Docs",
+	tagline:
+		"Open source, self-hostable watched list for all your content with user authentication, modern and clean UI and a very simple setup. ",
+	favicon: "img/favicon.png",
+
+	// Set the production url of your site here
+	url: "https://watcharr.app",
+	// Set the /<baseUrl>/ pathname under which your site is served
+	// For GitHub pages deployment, it is often '/<projectName>/'
+	baseUrl: "/",
+
+	// GitHub pages deployment config.
+	// If you aren't using GitHub pages, you don't need these.
+	organizationName: "sbondCo", // Usually your GitHub org/user name.
+	projectName: "Watcharr", // Usually your repo name.
+
+	onBrokenLinks: "throw",
+	onBrokenMarkdownLinks: "warn",
+
+	trailingSlash: false,
+
+	// Even if you don't use internalization, you can use this field to set useful
+	// metadata like html lang. For example, if your site is Chinese, you may want
+	// to replace "en" with "zh-Hans".
+	i18n: {
+		defaultLocale: "en",
+		locales: ["en"],
+	},
+
+	presets: [
+		[
+			"classic",
+			/** @type {import('@docusaurus/preset-classic').Options} */
+			({
+				docs: {
+					sidebarPath: require.resolve("./sidebars.js"),
+					// Please change this to your repo.
+					// Remove this to remove the "edit this page" links.
+					editUrl: "https://github.com/sbondCo/Watcharr/tree/dev/doc",
+				},
+				blog: {
+					showReadingTime: true,
+					// Please change this to your repo.
+					// Remove this to remove the "edit this page" links.
+					editUrl: "https://github.com/sbondCo/Watcharr/tree/dev/doc",
+				},
+				theme: {
+					customCss: [
+						"./node_modules/viewerjs/dist/viewer.css",
+						require.resolve("./src/css/custom.css"),
+					],
+				},
+			}),
+		],
+	],
+
+	themeConfig:
+		/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+		({
+			image: "img/social-card.png",
+			navbar: {
+				title: "Watcharr",
+				logo: {
+					alt: "Watcharr Logo",
+					src: "img/favicon.png",
+				},
+				items: [
+					{
+						type: "docSidebar",
+						sidebarId: "tutorialSidebar",
+						position: "left",
+						label: "Docs",
+					},
+					{
+						type: "docsVersionDropdown",
+					},
+					{
+						href: "https://beta.watcharr.app",
+						label: "Demo",
+						position: "right",
+					},
+					{
+						href: "https://github.com/sbondCo/Watcharr",
+						label: "GitHub",
+						position: "right",
+					},
+				],
+			},
+			prism: {
+				theme: lightTheme,
+				darkTheme: darkTheme,
+			},
+			colorMode: {
+				defaultMode: "light",
+				// Dark theme currently disabled.. no time to fix the icons etc.
+				disableSwitch: true,
+			},
+		}),
+};
+
+module.exports = config;

doc/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "watcharr-doc",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"docusaurus": "docusaurus",
+		"start": "docusaurus start",
+		"build": "docusaurus build",
+		"swizzle": "docusaurus swizzle",
+		"deploy": "docusaurus deploy",
+		"clear": "docusaurus clear",
+		"serve": "docusaurus serve",
+		"write-translations": "docusaurus write-translations",
+		"write-heading-ids": "docusaurus write-heading-ids"
+	},
+	"dependencies": {
+		"@docusaurus/core": "3.1.1",
+		"@docusaurus/preset-classic": "3.1.1",
+		"@mdx-js/react": "^3.0.0",
+		"clsx": "^2.1.0",
+		"prism-react-renderer": "^2.3.1",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"viewerjs": "^1.11.6"
+	},
+	"devDependencies": {
+		"@docusaurus/module-type-aliases": "3.1.1"
+	},
+	"browserslist": {
+		"production": [
+			">0.5%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"engines": {
+		"node": ">=18.0"
+	}
+}

doc/sidebars.js

@@ -0,0 +1,33 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+	// By default, Docusaurus generates a sidebar from the docs folder structure
+	tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
+
+	// But you can create a sidebar manually
+	/*
+  tutorialSidebar: [
+    'intro',
+    'hello',
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['tutorial-basics/create-a-document'],
+    },
+  ],
+   */
+};
+
+module.exports = sidebars;

doc/src/components/HomepageFeatures/index.js

@@ -0,0 +1,64 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+const FeatureList = [
+	{
+		title: "Free and Open",
+		Svg: require("@site/static/img/icon/code-slash.svg").default,
+		description: (
+			<>
+				Watcharr is free and open source software distributed under the MIT
+				license. Feel free to browse, modify or contribute!
+			</>
+		),
+	},
+	{
+		title: "Simple",
+		Svg: require("@site/static/img/icon/happy.svg").default,
+		description: (
+			<>
+				Watcharr is incredibly easy to dive into. Install without hassle and get
+				started with the seamless and intuitive user experience.
+			</>
+		),
+	},
+	{
+		title: "Built With Go and Svelte",
+		Svg: require("@site/static/img/icon/go.svg").default,
+		description: (
+			<>
+				Don't know what else to add here, so now you know Watcharr is built with
+				Go and Svelte.
+			</>
+		),
+	},
+];
+
+function Feature({ Svg, title, description }) {
+	return (
+		<div className={clsx("col col--4")}>
+			<div className="text--center">
+				<Svg className={styles.featureSvg} role="img" />
+			</div>
+			<div className="text--center padding-horiz--md">
+				<h3>{title}</h3>
+				<p>{description}</p>
+			</div>
+		</div>
+	);
+}
+
+export default function HomepageFeatures() {
+	return (
+		<section className={styles.features}>
+			<div className="container">
+				<div className="row">
+					{FeatureList.map((props, idx) => (
+						<Feature key={idx} {...props} />
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}

doc/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
+}
+
+.featureSvg {
+	height: 200px;
+	width: 200px;
+}

doc/src/components/TwoColFeat/index.js

@@ -0,0 +1,71 @@
+import React, { useEffect } from "react";
+import styles from "./styles.module.css";
+import clsx from "clsx";
+import Viewer from "viewerjs";
+
+function TwoColFeat({ title, description, imgSrc }) {
+	return (
+		<div className={clsx(styles.twoCol)}>
+			<div>
+				<h2>{title}</h2>
+				<p>{description}</p>
+			</div>
+			<div>
+				<img src={imgSrc} alt="" loading="lazy" />
+			</div>
+		</div>
+	);
+}
+
+export function HomepageTwoColFeats() {
+	useEffect(() => {
+		const ctr = document.getElementById("homepage-two-col-feats");
+		console.debug("Starting image viewer", ctr);
+		new Viewer(ctr, {
+			navbar: 0,
+			toolbar: {
+				zoomIn: 2,
+				zoomOut: 2,
+				next: 2,
+				prev: 2,
+			},
+			title: 0,
+			className: "twoColViewer",
+		});
+	}, []);
+
+	return (
+		<section id="homepage-two-col-feats" className={styles.twoColFeats}>
+			<TwoColFeat
+				title="Neat UI"
+				description="We just look lightweight."
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/homepage.png?v=2"
+			/>
+			<TwoColFeat
+				title="Easy To Use"
+				description="Not much to it, other than ease of use."
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/homepage-poster-change-status.png?v=2"
+			/>
+			<TwoColFeat
+				title="In-Depth Details"
+				description="About your favourite content."
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/content-details-page.png?v=2"
+			/>
+			<TwoColFeat
+				title="Personal Stats and Configuration"
+				description="Make it how you like."
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/user-profile.png?v=2"
+			/>
+			<TwoColFeat
+				title="Discovery"
+				description="Find the latest trending content."
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/discover-page.png?v=2"
+			/>
+			<TwoColFeat
+				title="Dark Theme"
+				description="For you who are still unsatisfied. ;("
+				imgSrc="https://github.com/sbondCo/Watcharr/raw/dev/screenshot/content-details-page-dark.png?v=2"
+			/>
+		</section>
+	);
+}

doc/src/components/TwoColFeat/styles.module.css

@@ -0,0 +1,53 @@
+.twoColFeats {
+	display: flex;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	flex-flow: column;
+	width: 100%;
+	max-width: 1300px;
+}
+
+.twoCol {
+	display: flex;
+	flex-flow: row;
+	width: 100%;
+	padding: 2.5rem 5rem;
+	gap: 50px;
+	background-color: rgb(236, 236, 236);
+}
+
+.twoCol:nth-child(even) {
+	flex-flow: row-reverse;
+	background-color: transparent;
+}
+
+.twoCol > div {
+	width: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-flow: column;
+}
+
+.twoCol > div > img {
+	width: 100%;
+	border-radius: 12px;
+	box-shadow: 0px 0px 5px rgb(121, 121, 121);
+	cursor: pointer;
+}
+
+@media screen and (max-width: 850px) {
+	.twoCol,
+	.twoCol:nth-child(even) {
+		flex-flow: column;
+	}
+
+	.twoCol > div {
+		width: 100%;
+	}
+
+	.twoCol > div > img {
+		max-width: 500px;
+	}
+}

doc/src/css/custom.css

@@ -0,0 +1,44 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+	--ifm-color-primary: #2e8555;
+	--ifm-color-primary-dark: #29784c;
+	--ifm-color-primary-darker: #277148;
+	--ifm-color-primary-darkest: #205d3b;
+	--ifm-color-primary-light: #33925d;
+	--ifm-color-primary-lighter: #359962;
+	--ifm-color-primary-lightest: #3cad6e;
+	--ifm-code-font-size: 95%;
+	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme="dark"] {
+	--ifm-color-primary: #25c2a0;
+	--ifm-color-primary-dark: #21af90;
+	--ifm-color-primary-darker: #1fa588;
+	--ifm-color-primary-darkest: #1a8870;
+	--ifm-color-primary-light: #29d5b0;
+	--ifm-color-primary-lighter: #32d8b4;
+	--ifm-color-primary-lightest: #4fddbf;
+	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+.twoColViewer .viewer-close {
+	right: 10px;
+	top: 10px;
+	width: 50px;
+	height: 50px;
+}
+
+/* Stupid poopin fix for viewerjs because whatever is bundling the css
+isn't keeping the order of this correctly. All this time wasted and it
+was just opaque ;( BUT ONLY IN THE BUILD AAAAAAAAAAAAAAAAAAAAAA */
+.viewer-in {
+	opacity: 1 !important;
+}

doc/src/pages/index.js

@@ -0,0 +1,56 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import LogoCol from "@site/static/img/logo-col.png";
+
+import styles from "./index.module.css";
+import clsx from "clsx";
+import { HomepageTwoColFeats } from "../components/TwoColFeat";
+
+function HomepageHeader() {
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<header className="hero shadow--lw">
+			<div className={styles.heroContainer}>
+				<div className={styles.heroWrapper}>
+					<img src={LogoCol} />
+					<h1 className="hero__title">{siteConfig.title}</h1>
+					<p className="hero__subtitle">{siteConfig.tagline}</p>
+					<div className={styles.buttons}>
+						<Link
+							className="button button--secondary button--lg"
+							to="/docs/introduction"
+						>
+							Get Started
+						</Link>
+						<Link
+							className="button button--secondary button--outline button--lg"
+							to="https://beta.watcharr.app"
+							target="_blank"
+						>
+							Demo
+						</Link>
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}
+
+export default function Home() {
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<Layout
+			title={`${siteConfig.title}`}
+			description="Description will go into a meta tag in <head />"
+		>
+			<HomepageHeader />
+			<main>
+				<HomepageFeatures />
+				<HomepageTwoColFeats />
+			</main>
+		</Layout>
+	);
+}

doc/src/pages/index.module.css

@@ -0,0 +1,34 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroContainer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+}
+
+.heroWrapper {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-flow: column;
+	max-width: 600px;
+	padding-left: 2rem;
+	padding-right: 2rem;
+	text-align: center;
+}
+
+.heroWrapper img {
+	width: 30vh;
+	max-width: 250px;
+}
+
+.buttons {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+}

doc/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

doc/static/img/icon/code-slash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M160 389a20.91 20.91 0 01-13.82-5.2l-128-112a21 21 0 010-31.6l128-112a21 21 0 0127.66 31.61L63.89 256l109.94 96.19A21 21 0 01160 389zM352 389a21 21 0 01-13.84-36.81L448.11 256l-109.94-96.19a21 21 0 0127.66-31.61l128 112a21 21 0 010 31.6l-128 112A20.89 20.89 0 01352 389zM208 437a21 21 0 01-20.12-27l96-320a21 21 0 1140.23 12l-96 320A21 21 0 01208 437z"/></svg>

doc/static/img/icon/go.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Go</title><path d="M1.811 10.231c-.047 0-.058-.023-.035-.059l.246-.315c.023-.035.081-.058.128-.058h4.172c.046 0 .058.035.035.07l-.199.303c-.023.036-.082.07-.117.07zM.047 11.306c-.047 0-.059-.023-.035-.058l.245-.316c.023-.035.082-.058.129-.058h5.328c.047 0 .07.035.058.07l-.093.28c-.012.047-.058.07-.105.07zm2.828 1.075c-.047 0-.059-.035-.035-.07l.163-.292c.023-.035.07-.07.117-.07h2.337c.047 0 .07.035.07.082l-.023.28c0 .047-.047.082-.082.082zm12.129-2.36c-.736.187-1.239.327-1.963.514-.176.046-.187.058-.34-.117-.174-.199-.303-.327-.548-.444-.737-.362-1.45-.257-2.115.175-.795.514-1.204 1.274-1.192 2.22.011.935.654 1.706 1.577 1.835.795.105 1.46-.175 1.987-.77.105-.13.198-.27.315-.434H10.47c-.245 0-.304-.152-.222-.35.152-.362.432-.97.596-1.274a.315.315 0 01.292-.187h4.253c-.023.316-.023.631-.07.947a4.983 4.983 0 01-.958 2.29c-.841 1.11-1.94 1.8-3.33 1.986-1.145.152-2.209-.07-3.143-.77-.865-.655-1.356-1.52-1.484-2.595-.152-1.274.222-2.419.993-3.424.83-1.086 1.928-1.776 3.272-2.02 1.098-.2 2.15-.07 3.096.571.62.41 1.063.97 1.356 1.648.07.105.023.164-.117.2m3.868 6.461c-1.064-.024-2.034-.328-2.852-1.029a3.665 3.665 0 01-1.262-2.255c-.21-1.32.152-2.489.947-3.529.853-1.122 1.881-1.706 3.272-1.95 1.192-.21 2.314-.095 3.33.595.923.63 1.496 1.484 1.648 2.605.198 1.578-.257 2.863-1.344 3.962-.771.783-1.718 1.273-2.805 1.495-.315.06-.63.07-.934.106zm2.78-4.72c-.011-.153-.011-.27-.034-.387-.21-1.157-1.274-1.81-2.384-1.554-1.087.245-1.788.935-2.045 2.033-.21.912.234 1.835 1.075 2.21.643.28 1.285.244 1.905-.07.923-.48 1.425-1.228 1.484-2.233z"/></svg>

doc/static/img/icon/happy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M414.39 97.61A224 224 0 1097.61 414.39 224 224 0 10414.39 97.61zM184 208a24 24 0 11-24 24 23.94 23.94 0 0124-24zm167.67 106.17c-12 40.3-50.2 69.83-95.62 69.83s-83.62-29.53-95.72-69.83a8 8 0 017.83-10.17h175.69a8 8 0 017.82 10.17zM328 256a24 24 0 1124-24 23.94 23.94 0 01-24 24z"/></svg>

docker-compose.dev.yml

@@ -1,5 +1,3 @@
-version: "3"
-
 # To test prod
 services:
   watcharr:
@@ -10,5 +8,4 @@ services:
     ports:
       - 3080:3080
     volumes:
-      - ./server/.env:/.env
       - ./container_data:/data

docker-compose.yml

@@ -1,11 +1,12 @@
-version: "3"
-
 services:
   watcharr:
+    # The :latest tag is used for simplicity, it is recommended
+    # to use an actual version, then when updating check the releases for changelogs.
     image: ghcr.io/sbondco/watcharr:latest
     container_name: watcharr
     ports:
       - 3080:3080
     volumes:
-      - ./server/.env:/.env
-      - ./container_data:/data
+      # Contains all of watcharr data (database & cache)
+      - ./data:/data
+    restart: unless-stopped

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "watcharr",
-	"version": "1.9.2",
+	"version": "2.0.2",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -8,27 +8,35 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"prepare": "svelte-kit sync",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"server": "cd ./server && MODE=DEV go run ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-node": "^1.2.4",
-		"@sveltejs/kit": "^1.15.2",
-		"@typescript-eslint/eslint-plugin": "^5.57.1",
-		"@typescript-eslint/parser": "^5.57.1",
-		"eslint": "^8.38.0",
-		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.8.7",
-		"prettier-plugin-svelte": "^2.10.0",
-		"svelte": "^3.58.0",
-		"svelte-check": "^3.2.0",
-		"tslib": "^2.5.0",
-		"typescript": "^5.0.4",
-		"vite": "^4.2.1"
+		"@sveltejs/adapter-node": "^5.2.12",
+		"@sveltejs/kit": "^2.16.0",
+		"@types/papaparse": "^5.3.15",
+		"@typescript-eslint/eslint-plugin": "^8.18.2",
+		"@typescript-eslint/parser": "^8.18.2",
+		"@vite-pwa/sveltekit": "^0.6.6",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.45.1",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"sass": "^1.83.0",
+		"svelte": "^5.17.3",
+		"svelte-check": "^4.1.3",
+		"svelte-eslint-parser": "^0.42.0",
+		"svelte-preprocess": "^6.0.3",
+		"typescript": "^5.7.2",
+		"vite": "^6.0.7"
 	},
 	"type": "module",
 	"dependencies": {
-		"axios": "^1.3.4"
+		"axios": "^1.7.4",
+		"blurhash": "^2.0.5",
+		"papaparse": "^5.4.1"
 	}
 }

screenshot/retired-19-01-25/README.md

@@ -0,0 +1 @@
+These screenshots were first uploaded Dec 10, 2023. They were retired on Jan 19, 2025.