⬆️ Bumped up to v3.0

Original folder state

.github/workflows/documentation.yml

@@ -39,7 +39,7 @@ jobs:
       - name: Release to GitHub Pages
         env:
           USE_SSH: true
-          GIT_USER: git
+          GIT_USER: rishighan
         run: |
           git config --global user.email "rishi.ghan@gmail.com"
           git config --global user.name "rishighan"

docs/architecture.md

@@ -0,0 +1,33 @@
+---
+sidebar_position: 4 
+id: architecture
+title: Technical Architecture
+---
+
+### High-level Architecture
+
+`ThreeTwo!`, the app is built upon the microservice architecture. The UI is a standalone `node.js` app and the rest of the logic is broken into microservices.
+
+The microservices deal with: 
+
+1. Library functions (model orchestration, CRUD ops on comics, metadata)
+2. Comic Vine (scraping issues, volumes and more)
+3. Grand Comics Database (scraping, aggregations and more)
+4. Helpers (image transformation, file-system ops, compression/uncompression)
+
+### Technical stack
+
+`ThreeTwo!` is written in `TypeScript` from UI to the services layer.
+
+The technologies used are: 
+
+1. React
+2. Redux
+3. moleculer
+4. RabbitMQ
+5. socket.io
+6. node.js
+7. Express
+8. MongoDB
+9. mongoose
+

docs/resources.md

@@ -0,0 +1,12 @@
+---
+sidebar_position: 3 
+id: resources
+title: Resources & Help
+---
+
+### Quick Links
+
+- The source code for `ThreeTwo!` is located here: https://github.com/rishighan/threetwo
+- The official `Discord` server is here: https://discord.gg/DbpcSNuM
+- If you encounter problems, the best recourse to getting help is creating an issue on the repo, https://github.com/rishighan/threetwo/issues
+- For other questions just pop them into the Discord channel

docs/tutorial-basics/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Tutorial - Basics",
-  "position": 2
-}

docs/tutorial-basics/congratulations.md

@@ -1,21 +0,0 @@
----
-sidebar_position: 6
----
-
-# Congratulations!
-
-You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
-
-Docusaurus has **much more to offer**!
-
-Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
-
-Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
-
-## What's next?
-
-- Read the [official documentation](https://docusaurus.io/).
-- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
-- Add a [search bar](https://docusaurus.io/docs/search)
-- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
-- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)

docs/tutorial-basics/create-a-blog-post.md

@@ -1,34 +0,0 @@
----
-sidebar_position: 3
----
-
-# Create a Blog Post
-
-Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
-
-## Create your first Post
-
-Create a file at `blog/2021-02-28-greetings.md`:
-
-```md title="blog/2021-02-28-greetings.md"
----
-slug: greetings
-title: Greetings!
-authors:
-  - name: Joel Marcey
-    title: Co-creator of Docusaurus 1
-    url: https://github.com/JoelMarcey
-    image_url: https://github.com/JoelMarcey.png
-  - name: Sébastien Lorber
-    title: Docusaurus maintainer
-    url: https://sebastienlorber.com
-    image_url: https://github.com/slorber.png
-tags: [greetings]
----
-
-Congratulations, you have made your first post!
-
-Feel free to play around and edit this post as much you like.
-```
-
-A new blog post is now available at `http://localhost:3000/blog/greetings`.

docs/tutorial-basics/create-a-document.md

@@ -1,55 +0,0 @@
----
-sidebar_position: 2
----
-
-# Create a Document
-
-Documents are **groups of pages** connected through:
-
-- a **sidebar**
-- **previous/next navigation**
-- **versioning**
-
-## Create your first Doc
-
-Create a markdown file at `docs/hello.md`:
-
-```md title="docs/hello.md"
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-A new document is now available at `http://localhost:3000/docs/hello`.
-
-## Configure the Sidebar
-
-Docusaurus automatically **creates a sidebar** from the `docs` folder.
-
-Add metadatas to customize the sidebar label and position:
-
-```md title="docs/hello.md" {1-4}
----
-sidebar_label: 'Hi!'
-sidebar_position: 3
----
-
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-It is also possible to create your sidebar explicitly in `sidebars.js`:
-
-```diff title="sidebars.js"
-module.exports = {
-  tutorialSidebar: [
-    {
-      type: 'category',
-      label: 'Tutorial',
--     items: [...],
-+     items: ['hello'],
-    },
-  ],
-};
-```

docs/tutorial-basics/create-a-page.md

@@ -1,43 +0,0 @@
----
-sidebar_position: 1
----
-
-# Create a Page
-
-Add **Markdown or React** files to `src/pages` to create a **standalone page**:
-
-- `src/pages/index.js` -> `localhost:3000/`
-- `src/pages/foo.md` -> `localhost:3000/foo`
-- `src/pages/foo/bar.js` -> `localhost:3000/foo/bar`
-
-## Create your first React Page
-
-Create a file at `src/pages/my-react-page.js`:
-
-```jsx title="src/pages/my-react-page.js"
-import React from 'react';
-import Layout from '@theme/Layout';
-
-export default function MyReactPage() {
-  return (
-    <Layout>
-      <h1>My React page</h1>
-      <p>This is a React page</p>
-    </Layout>
-  );
-}
-```
-
-A new page is now available at `http://localhost:3000/my-react-page`.
-
-## Create your first Markdown Page
-
-Create a file at `src/pages/my-markdown-page.md`:
-
-```mdx title="src/pages/my-markdown-page.md"
-# My Markdown page
-
-This is a Markdown page
-```
-
-A new page is now available at `http://localhost:3000/my-markdown-page`.

docs/tutorial-basics/deploy-your-site.md

@@ -1,31 +0,0 @@
----
-sidebar_position: 5
----
-
-# Deploy your site
-
-Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
-
-It builds your site as simple **static HTML, JavaScript and CSS files**.
-
-## Build your site
-
-Build your site **for production**:
-
-```bash
-npm run build
-```
-
-The static files are generated in the `build` folder.
-
-## Deploy your site
-
-Test your production build locally:
-
-```bash
-npm run serve
-```
-
-The `build` folder is now served at `http://localhost:3000/`.
-
-You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).

docs/tutorial-basics/markdown-features.mdx

@@ -1,144 +0,0 @@
----
-sidebar_position: 4
----
-
-# Markdown Features
-
-Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
-
-## Front Matter
-
-Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
-
-```text title="my-doc.md"
-// highlight-start
----
-id: my-doc-id
-title: My document title
-description: My document description
-slug: /my-custom-url
----
-// highlight-end
-
-## Markdown heading
-
-Markdown text with [links](./hello.md)
-```
-
-## Links
-
-Regular Markdown links are supported, using url paths or relative file paths.
-
-```md
-Let's see how to [Create a page](/create-a-page).
-```
-
-```md
-Let's see how to [Create a page](./create-a-page.md).
-```
-
-**Result:** Let's see how to [Create a page](./create-a-page.md).
-
-## Images
-
-Regular Markdown images are supported.
-
-Add an image at `static/img/docusaurus.png` and display it in Markdown:
-
-```md
-![Docusaurus logo](/img/docusaurus.png)
-```
-
-![Docusaurus logo](/img/docusaurus.png)
-
-## Code Blocks
-
-Markdown code blocks are supported with Syntax highlighting.
-
-    ```jsx title="src/components/HelloDocusaurus.js"
-    function HelloDocusaurus() {
-        return (
-            <h1>Hello, Docusaurus!</h1>
-        )
-    }
-    ```
-
-```jsx title="src/components/HelloDocusaurus.js"
-function HelloDocusaurus() {
-  return <h1>Hello, Docusaurus!</h1>;
-}
-```
-
-## Admonitions
-
-Docusaurus has a special syntax to create admonitions and callouts:
-
-    :::tip My tip
-
-    Use this awesome feature option
-
-    :::
-
-    :::danger Take care
-
-    This action is dangerous
-
-    :::
-
-:::tip My tip
-
-Use this awesome feature option
-
-:::
-
-:::danger Take care
-
-This action is dangerous
-
-:::
-
-## MDX and React Components
-
-[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
-
-```jsx
-export const Highlight = ({children, color}) => (
-  <span
-    style={{
-      backgroundColor: color,
-      borderRadius: '20px',
-      color: '#fff',
-      padding: '10px',
-      cursor: 'pointer',
-    }}
-    onClick={() => {
-      alert(`You clicked the color ${color} with label ${children}`)
-    }}>
-    {children}
-  </span>
-);
-
-This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
-
-This is <Highlight color="#1877F2">Facebook blue</Highlight> !
-```
-
-export const Highlight = ({children, color}) => (
-  <span
-    style={{
-      backgroundColor: color,
-      borderRadius: '20px',
-      color: '#fff',
-      padding: '10px',
-      cursor: 'pointer',
-    }}
-    onClick={() => {
-      alert(`You clicked the color ${color} with label ${children}`);
-    }}>
-    {children}
-  </span>
-);
-
-This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
-
-This is <Highlight color="#1877F2">Facebook blue</Highlight> !

docs/tutorial-extras/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Tutorial - Extras",
-  "position": 3
-}

docs/tutorial-extras/manage-docs-versions.md

@@ -1,55 +0,0 @@
----
-sidebar_position: 1
----
-
-# Manage Docs Versions
-
-Docusaurus can manage multiple versions of your docs.
-
-## Create a docs version
-
-Release a version 1.0 of your project:
-
-```bash
-npm run docusaurus docs:version 1.0
-```
-
-The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created.
-
-Your docs now have 2 versions:
-
-- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs
-- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs**
-
-## Add a Version Dropdown
-
-To navigate seamlessly across versions, add a version dropdown.
-
-Modify the `docusaurus.config.js` file:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  themeConfig: {
-    navbar: {
-      items: [
-        // highlight-start
-        {
-          type: 'docsVersionDropdown',
-        },
-        // highlight-end
-      ],
-    },
-  },
-};
-```
-
-The docs version dropdown appears in your navbar:
-
-![Docs Version Dropdown](/img/tutorial/docsVersionDropdown.png)
-
-## Update an existing version
-
-It is possible to edit versioned docs in their respective folder:
-
-- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello`
-- `docs/hello.md` updates `http://localhost:3000/docs/next/hello`

docs/tutorial-extras/translate-your-site.md

@@ -1,88 +0,0 @@
----
-sidebar_position: 2
----
-
-# Translate your site
-
-Let's translate `docs/intro.md` to French.
-
-## Configure i18n
-
-Modify `docusaurus.config.js` to add support for the `fr` locale:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en', 'fr'],
-  },
-};
-```
-
-## Translate a doc
-
-Copy the `docs/intro.md` file to the `i18n/fr` folder:
-
-```bash
-mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
-
-cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
-```
-
-Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French.
-
-## Start your localized site
-
-Start your site on the French locale:
-
-```bash
-npm run start -- --locale fr
-```
-
-Your localized site is accessible at `http://localhost:3000/fr/` and the `Getting Started` page is translated.
-
-:::caution
-
-In development, you can only use one locale at a same time.
-
-:::
-
-## Add a Locale Dropdown
-
-To navigate seamlessly across languages, add a locale dropdown.
-
-Modify the `docusaurus.config.js` file:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  themeConfig: {
-    navbar: {
-      items: [
-        // highlight-start
-        {
-          type: 'localeDropdown',
-        },
-        // highlight-end
-      ],
-    },
-  },
-};
-```
-
-The locale dropdown now appears in your navbar:
-
-![Locale Dropdown](/img/tutorial/localeDropdown.png)
-
-## Build your localized site
-
-Build your site for a specific locale:
-
-```bash
-npm run build -- --locale fr
-```
-
-Or build your site to include all the locales at once:
-
-```bash
-npm run build
-```

docs/unraid_dockercompose.md

@@ -0,0 +1,203 @@
+---
+sidebar_position: 2 
+id: unRAID_dockercompose
+title: Install ThreeTwo! on unRAID with the docker-compose plugin
+---
+
+### Notes
+
+This guide goes over ThreeTwo! installation on unRAID using the [docker-compose manager](https://forums.unRAID.net/topic/114415-plugin-docker-compose-manager/) plugin. Currently, this is the recommended approach for unRAID users.
+
+With the help of this plugin, you are able to pull the entire ThreeTwo! `docker-compose` stack up, down with the click of a button. It abstracts away a lot of complexity associated with writing out commands in the console.
+
+That said, the plugin is still in beta, so you may experience strange behavior.  
+
+### Pre-requisites
+
+First things first, let's go over what the pre-requisites are:
+
+1. The `docker-compose` configuration for ThreeTwo! now resides in its own repo here: https://github.com/rishighan/threetwo-docker-compose You will be using this as reference.
+2. A working `AirDC++` install is necessary for `DC++` searching/downloading to work. You can install it through the unRAID via the CA store or via a [docker](https://airdcpp.net/download#linux-nas-docker-other)
+3. `comics` and `userdata` folders.
+   1. The `comics` folder _must_ be the folder `AirDC++` downloads comics to.
+   2. Create the `userdata` folder under `/mnt/user/appdata/threetwo`
+4. To get ComicVine to work for metadata scraping and other functions, you _must_ have a ComicVine API key. You can get one [here](https://comicvine.gamespot.com/api/). Metadata scraping will not work unless you supply an API key.
+5. Open an unRAID terminal and create an `.env` file:
+   1. Run this command: `nano /boot/config/plugins/compose.manager/projects/ThreeTwo/.env`
+   2. Paste this into the file, replacing anything within `<>` with actual values:
+   ```bash
+   UNDERLYING_HOSTNAME=<UNRAID_HOSTNAME>
+   COMICS_DIRECTORY=<PATH_TO_COMICS_DIRECTORY>
+   USERDATA_DIRECTORY=/mnt/user/appdata/threetwo/userdata
+
+   COMICVINE_API_KEY=<YOUR_COMICVINE_API_KEY>
+
+   LOGGER=true
+   LOGLEVEL=info
+   SERVICEDIR=dist/services
+
+   CHOKIDAR_USEPOLLING=true
+
+   UNRAR_BIN_PATH=/usr/bin/unrar
+   SEVENZ_BINARY_PATH=/usr/bin/7za
+   MONGO_URI=mongodb://db:27017/threetwo
+   ELASTICSEARCH_URI=http://elasticsearch:9200
+   REDIS_URI=redis://redis:6379
+   TRANSPORTER=redis://redis:6379
+   CACHER=Memory
+      ```
+
+### Installation
+
+1. Install the `docker-compose manager` plugin from the unRAID CA store. After installation, you can find the plugin UI under the `Docker` tab.
+2. Create a new stack, give it a name.
+3. Hover over the gear next to it and click on `Edit Stack`.
+4. Copy-paste this into the textarea:
+```yaml
+version: "3.7"
+
+x-userdata-volume: &userdata-volume
+  type: bind
+  source: ${USERDATA_DIRECTORY}
+  target: /userdata
+
+x-comics-volume: &comics-volume
+  type: bind
+  source: ${COMICS_DIRECTORY}
+  target: /comics
+
+services:
+threetwo:
+   build:
+      context: https://github.com/rishighan/threetwo.git
+      dockerfile: Dockerfile
+   image: frishi/threetwo
+   container_name: threetwo-ui
+   env_file: /boot/config/plugins/compose.manager/projects/ThreeTwo/.env
+   restart: unless-stopped
+   ports:
+      - "8050:8050"
+      - "3050:3050"
+   links:
+      - core-services
+   depends_on:
+      - db
+      - elasticsearch
+      - redis
+   networks:
+      - proxy
+
+metadata-service:
+   build:
+      context: https://github.com/rishighan/threetwo-metadata-service.git
+   image: frishi/threetwo-metadata-service
+   container_name: metadata-service
+   ports:
+      - "3080:3080"
+   environment:
+      SERVICES: api,comicvine
+   env_file: /boot/config/plugins/compose.manager/projects/ThreeTwo/.env
+   depends_on:
+      - redis
+   volumes:
+      - *comics-volume
+      - *userdata-volume
+   networks:
+      - proxy
+
+core-services:
+   build:
+      context: https://github.com/rishighan/threetwo-core-service.git
+   image: frishi/threetwo-core-service
+   container_name: core-services
+   ports:
+      - "3000:3000"
+      - "3001:3001"
+   depends_on:
+      - db
+      - redis
+      - elasticsearch
+   environment:
+      name: core-services
+      SERVICES: api,library,importqueue,settings,search,socket,imagetransformation,opds
+   env_file: /boot/config/plugins/compose.manager/projects/ThreeTwo/.env
+   volumes:
+      - *comics-volume
+      - *userdata-volume
+
+   networks:
+      - proxy
+
+db:
+   image: "bitnami/mongodb:latest"
+   container_name: database
+   networks:
+      - proxy
+   ports:
+      - "27017:27017"
+   volumes:
+      - "mongodb_data:/bitnami/mongodb"
+
+redis:
+   image: "bitnami/redis:latest"
+   container_name: queue
+   environment:
+      ALLOW_EMPTY_PASSWORD: "yes"
+   networks:
+      - proxy
+   ports:
+      - "6379:6379"
+
+elasticsearch:
+   image: docker.elastic.co/elasticsearch/elasticsearch:7.16.2
+   container_name: elasticsearch
+   environment:
+      - "discovery.type=single-node"
+      - "ES_JAVA_OPTS=-Xms512m -Xmx512m"
+      - "xpack.security.enabled=true"
+      - "xpack.security.authc.api_key.enabled=true"
+      - "ELASTIC_PASSWORD=password"
+   ulimits:
+      memlock:
+      soft: -1
+      hard: -1
+   ports:
+      - 9200:9200
+   networks:
+      - proxy
+
+networks:
+proxy:
+   external: true
+
+volumes:
+mongodb_data:
+   driver: local
+elastic:
+  driver: local
+   ```
+
+5. Click `Save Changes`
+6. Click `Compose Up` and check for errors.
+7. If all goes well, you should see the following containers appear as icons without images in the unRAID `Docker Containers` panel:
+   1. `threetwo-ui`
+   2. `core-services`
+   3. `metadata-service`
+   4. `elasticsearch`
+   5. `database`
+   6. `queue`
+8. You can look at the logs for these containers by clicking on their icons and then `Logs`
+
+### Ports
+
+1. `threetwo-ui`, runs on port 8050
+2. `threetwo-core-service` on 3000
+3. `threetwo-metadata-service` on 3080
+
+### Getting Updates
+
+Go to the `Docker Containers` tab from the unRAID web UI:
+
+1. Click on `Compose Down`, and let the command finish running.
+2. Click on `Compose Pull`, and let it finish running.
+3. Click on `Compose Up` to bring up the stack. 

docs/unraid_install.md

@@ -0,0 +1,64 @@
+---
+sidebar_position: 2 
+id: unraid_install
+title: Install ThreeTwo! on unRaid
+---
+
+### Notes
+
+- Currently, `ThreeTwo!` is installed along with its dependencies using `docker-compose`. The easiest way to install it on `unRAID` is to use a VM.
+- Skip the VM creation steps, if you already have a Debian VM
+
+### Pre-requisites
+
+This guide assumes the following is installed or readily available:
+
+- `unRaid 6.9.2` (this version was tested against `6.9.2`)
+- `Debian 10.x` (Grab the install `.iso` [here](https://cdimage.debian.org/debian-cd/current/amd64/iso-cd/debian-11.1.0-amd64-netinst.iso))
+
+### Getting the VM up and running
+
+1. Download the `Debian` install `.iso`
+2. Place it in a folder accessible by the VM
+3. Go to the `VM` tab in your `unRaid` navigation
+4. Click `Add VM`
+5. From the list presented to you, click `Debian` under `Linux`
+6. On the VM configration page, enter the desired options for memory, CPU cores, vdisk allocation
+7. Make sure that you have set the volume containing the comics correctly for `Unraid Share`
+8. Make sure that you have also set the `Unraid Mount tag` option
+9. Make sure that the network bridge is set to `br0`
+10. Set a password for `VNC` so you can follow through with a graphical install if you so wish
+
+### Installing Debian on the VM
+
+1. Launch the VM via `VNC Remote` option
+2. Follow the steps of the graphical installer
+3. Create a `root` user and a normal `user` and set the passwords for both
+   
+### Docker pre-requisites
+
+1. [Make sure you have](https://unix.stackexchange.com/questions/354928/bash-sudo-command-not-found) `sudo`
+2. Make sure you have `ssh` access for the user you created earlier
+3. `ssh` into the VM as the non-root user
+4. Install [Docker Engine](https://docs.docker.com/engine/install/debian/)
+5. Install [docker-compose](https://docs.docker.com/compose/install/#install-compose-on-linux-systems)
+6. Verify that `docker` and `docker-compose` commands work
+
+### Installation
+
+1. Clone the repo: `git clone https://github.com/rishighan/threetwo.git`
+2. Change the directory: `cd threetwo`
+3. Create directories within `threetwo`
+    ```bash
+    mkdir comics userdata
+
+    mkdir userdata/covers userdata/temporary userdata/expanded
+    ```
+4. Create an external docker network using `sudo docker network create proxy`
+5. Run `sudo docker-compose up --build -d`
+6. Wait for a hot minute
+
+### Post-install checks
+
+1. Once the `docker-compose up` command successfully completes, you can check the spun-up containers using `docker ps`
+2. 

docusaurus.config.js

@@ -1,39 +1,40 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
-
+// const lightCodeTheme = require("prism-react-renderer/themes/github");
+// const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+import { themes } from "prism-react-renderer";
+console.log("endha", themes);
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'ThreeTwo!',
-  tagline: 'Start Flipping!',
-  url: 'https://rishighan.github.io',
-  baseUrl: '/threetwo-docs/',
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/favicon.ico',
-  organizationName: 'rishighan', // Usually your GitHub org/user name.
-  projectName: 'threetwo-docs', // Usually your repo name.
+  title: "ThreeTwo!",
+  tagline: "Start Flipping!",
+  url: "https://rishighan.github.io",
+  baseUrl: "/threetwo-docs/",
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+  favicon: "img/favicon.ico",
+  organizationName: "rishighan", // Usually your GitHub org/user name.
+  projectName: "threetwo-docs", // Usually your repo name.
 
   presets: [
     [
-      '@docusaurus/preset-classic',
+      "@docusaurus/preset-classic",
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
-          sidebarPath: require.resolve('./sidebars.js'),
+          sidebarPath: require.resolve("./sidebars.js"),
           // Please change this to your repo.
-          editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
+          editUrl: "https://github.com/facebook/docusaurus/edit/main/website/",
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
           editUrl:
-            'https://github.com/facebook/docusaurus/edit/main/website/blog/',
+            "https://github.com/facebook/docusaurus/edit/main/website/blog/",
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: require.resolve("./src/css/custom.css"),
         },
       }),
     ],
@@ -43,74 +44,74 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       navbar: {
-        title: 'My Site',
+        title: "ThreeTwo!",
         logo: {
-          alt: 'My Site Logo',
-          src: 'img/logo.svg',
+          alt: "My Site Logo",
+          src: "img/threetwo.png",
         },
         items: [
           {
-            type: 'doc',
-            docId: 'intro',
-            position: 'left',
-            label: 'Tutorial',
+            type: "doc",
+            docId: "intro",
+            position: "left",
+            label: "Quick Start",
           },
-          {to: '/blog', label: 'Blog', position: 'left'},
+          { to: "/blog", label: "Blog", position: "left" },
           {
-            href: 'https://github.com/facebook/docusaurus',
-            label: 'GitHub',
-            position: 'right',
+            href: "https://github.com/rishighan/threetwo",
+            label: "GitHub",
+            position: "right",
           },
         ],
       },
       footer: {
-        style: 'dark',
+        style: "dark",
         links: [
           {
-            title: 'Docs',
+            title: "Docs",
             items: [
               {
-                label: 'Tutorial',
-                to: '/docs/intro',
+                label: "Tutorial",
+                to: "/docs/intro",
               },
             ],
           },
           {
-            title: 'Community',
+            title: "Community",
             items: [
               {
-                label: 'Stack Overflow',
-                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
+                label: "Github",
+                href: "https://github.com/rishighan/threetwo",
               },
               {
-                label: 'Discord',
-                href: 'https://discordapp.com/invite/docusaurus',
-              },
-              {
-                label: 'Twitter',
-                href: 'https://twitter.com/docusaurus',
+                label: "Discord",
+                href: "https://discord.gg/n4HZ4j33uT",
               },
             ],
           },
           {
-            title: 'More',
+            title: "More",
             items: [
               {
-                label: 'Blog',
-                to: '/blog',
+                label: "Blog",
+                to: "/blog",
               },
               {
-                label: 'GitHub',
-                href: 'https://github.com/facebook/docusaurus',
+                label: "Rishi Ghan",
+                href: "https://rishighan.com",
               },
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+        copyright: `Copyright © ${new Date().getFullYear()} Quasar Software, LLC. Built with Docusaurus.`,
+      },
+      colorMode: {
+        disableSwitch: false,
+        respectPrefersColorScheme: false,
       },
       prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        theme: themes.github,
+        darkTheme: themes.dracula,
       },
     }),
 };

package.json

@@ -15,21 +15,25 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.6",
-    "@docusaurus/preset-classic": "^2.0.0-beta.6",
-    "@mdx-js/react": "^1.6.21",
+    "@docusaurus/core": "^3.1.1",
+    "@docusaurus/preset-classic": "^3.1.1",
+    "@mdx-js/react": "^3.0.0",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",
-    "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.6",
-    "@tsconfig/docusaurus": "^1.0.4",
-    "typescript": "^4.3.5"
+    "@docusaurus/module-type-aliases": "^3.1.1",
+    "@docusaurus/tsconfig": "^3.1.1",
+    "@docusaurus/types": "^3.1.1",
+    "@types/react": "^18.2.29"
+  },
+  "engines": {
+    "node": ">=18.0"
   },
   "browserslist": {
     "production": [

src/components/HomepageFeatures.module.css

@@ -6,6 +6,6 @@
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  min-height: 200px;
+  min-width: 200px;
 }

src/components/HomepageFeatures.tsx

@@ -16,32 +16,29 @@ type FeatureItem = {
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
-    image: '/img/undraw_docusaurus_mountain.svg',
+    title: 'Don\'t Hate, Curate.',
+    image: './img/curate.svg',
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        Browse, search, discover your comic book library that you have so proudly built from scratch.
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
-    image: '/img/undraw_docusaurus_tree.svg',
+    title: 'No Fuss DC++',
+    image: './img/dcpp.svg',
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        With first-class support for the excellent <code>AirDC++</code>, find and acquire hidden gems.
       </>
     ),
   },
   {
-    title: 'Powered by React',
-    image: '/img/undraw_docusaurus_react.svg',
+    title: 'Shine with Comic Vine',
+    image: './img/cv.svg',
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        Scrape Comic Vine's exhaustive comic book database to analyze and clean up your library's metadata.
       </>
     ),
   },

src/pages/index.tsx

@@ -17,7 +17,7 @@ function HomepageHeader() {
           <Link
             className="button button--secondary button--lg"
             to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
+            Start Flipping! 
           </Link>
         </div>
       </div>