Merge pull request #149 from sbondCo/finish-docs

from source installation and adding to list guides

.github/workflows/test-docs.yml

@@ -4,6 +4,9 @@ on:
   pull_request:
     branches:
       - dev
+    paths:
+      - ".github/workflows/test-docs.yml"
+      - "doc/**"
 
 jobs:
   test-deploy:

doc/docs/installation/docker-compose.md

@@ -24,6 +24,12 @@ services:
       - ./data:/data
 ```
 
+:::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

doc/docs/installation/from-source.md

@@ -6,8 +6,69 @@ sidebar_position: 10
 
 ## Installing
 
-pull code n stuf
+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
 
-finish this page later
+:::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

@@ -6,4 +6,5 @@ sidebar_position: 1
 
 Watcharr is for the peeps who like to keep a list of all the content they have ever watched.
 
-Below you can find out how Watcharr is used.
+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/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

@@ -62,20 +62,19 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      // Replace with your project's social card
-      image: "img/docusaurus-social-card.jpg",
+      image: "img/social-card.png",
       navbar: {
         title: "Watcharr",
         logo: {
-          alt: "My Site Logo",
+          alt: "Watcharr Logo",
           src: "img/favicon.png"
         },
         items: [
           {
             type: "docSidebar",
             sidebarId: "tutorialSidebar",
             position: "left",
-            label: "Tutorial"
+            label: "Docs"
           },
           {
             type: "docsVersionDropdown"
@@ -88,8 +87,13 @@ const config = {
         ]
       },
       prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme
+        theme: lightCodeTheme
+        // darkTheme: darkCodeTheme
+      },
+      colorMode: {
+        defaultMode: "light",
+        // Dark theme currently disabled.. no time to fix the icons etc.
+        disableSwitch: true
       }
     })
 };

doc/src/pages/index.module.css

@@ -16,6 +16,9 @@
   justify-content: center;
   flex-flow: column;
   max-width: 600px;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  text-align: center;
 }
 
 .heroWrapper img {