'Sheet

.bithoundrc

@@ -1,7 +0,0 @@
-{
-  "dependencies": {
-    "unused-ignores": [
-      "react-dom"
-    ]
-  }
-}

.circleci/config.yml

@@ -1,98 +0,0 @@
-# Javascript Node CircleCI 2.0 configuration file
-#
-# Check https://circleci.com/docs/2.0/language-javascript/ for more details
-#
-version: 2.1
-
-orbs:
-  node: circleci/node@5.1.0
-
-jobs:
-  build:
-    docker:
-      - image: cimg/node:20.18.0
-      - image: mongo:4.4
-
-    working_directory: ~/homebrewery
-    executor: node/default
-
-    steps:
-      - checkout:
-          path: ~/homebrewery
-
-      # Download and cache dependencies
-      - restore_cache:
-          keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-          # fallback to using the latest cache if no exact match is found
-          - v1-dependencies-
-
-      - run: sudo npm install -g npm@10.8.2
-      - node/install-packages:
-          app-dir: ~/homebrewery
-          cache-path: node_modules
-          override-ci-command: npm i
-
-      - save_cache:
-          paths:
-            - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
-
-      - persist_to_workspace:
-          root: .
-          paths:
-            - .
-
-  test:
-    docker:
-      - image: cimg/node:20.17.0
-
-    working_directory: ~/homebrewery
-    parallelism: 1
-
-    steps:
-      - attach_workspace:
-          at: .
-
-      # run tests!
-      - run:
-          name: Test - API Unit Tests
-          command: npm run test:api-unit
-      - run:
-          name: Test - Basic
-          command: npm run test:basic
-      - run:
-          name: Test - Mustache Spans
-          command: npm run test:mustache-syntax
-      - run:
-          name: Test - Hard Breaks
-          command: npm run test:hard-breaks
-      - run:
-          name: Test - Non-Breaking Spaces
-          command: npm run test:non-breaking-spaces
-      - run:
-          name: Test - Variables
-          command: npm run test:variables
-      - run:
-          name: Test - Emojis
-          command: npm run test:emojis
-      - run:
-          name: Test - Routes
-          command: npm run test:route
-      - run:
-          name: Test - HTML sanitization
-          command: npm run test:safehtml
-      - run:
-          name: Test - Coverage
-          command: npm run test:coverage
-      - run:
-          name: Test - Content Negotiation
-          command: npm run test:content-negotiation
-
-workflows:
-  build_and_test:
-    jobs:
-      - build
-      - test:
-          requires:
-            - build

.dockerignore

@@ -1,6 +0,0 @@
-node_modules
-npm-debug.log
-.git
-Dockerfile
-docker-compose.yml
-tests

.gitattributes

@@ -1,3 +0,0 @@
-package-lock.json binary
-
-*.json text eol=lf

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +0,0 @@
-contact_links:
-  - name: /r/Homebrewery Subreddit
-    url: https://www.reddit.com/r/homebrewery
-    about: The Homebrewery community on Reddit!
-  - name: Discord of Many Things
-    url: https://discord.gg/domt
-    about: "Join the conversation in the #formatting channel on DoMT!"

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,17 +0,0 @@
-name: Feature Request
-description: Have an idea to improve the Homebrewery? Let us know!
-labels: ["feature request"]
-body:
-  - type: markdown
-    attributes:
-      value: "We'd love to hear your idea!  Please be sure to [search the current Issues](https://github.com/naturalcrit/homebrewery/issues) for any duplicate requests."
-  - type: textarea
-    id: user-request
-    attributes:
-      label: "Your idea:"
-      description: The best feature requests provide an explanation of the current issue and then an explanation of how it could be improved.  Screenshots/images can be pasted right in as well!
-    validations:
-      required: true
-  - type: markdown
-    attributes:
-      value: "Please be sure to search for any close matches to your request in the GitHub Issues tracker before opening a new request, thanks!"

.github/ISSUE_TEMPLATE/general_issue.yml

@@ -1,55 +0,0 @@
-name: General Issue
-description: Report an issue unrelated to Saving
-body:
-  - type: markdown
-    attributes:
-      value: Please include as much information as possible.
-  - type: dropdown
-    id: renderer
-    attributes:
-      label: Renderer
-      description: Which renderer does this issue occur on?  If you are unsure, you can check the renderer in the Properties Editor (click the "i" in the Snippet Menu bar above the editor).
-      options:
-        - v3
-        - Legacy
-        - Both
-    validations:
-      required: true
-  - type: dropdown
-    id: browser
-    attributes:
-      label: Browser
-      description: Which browser were you using when the issue occurred?
-      options:
-        - Chrome
-        - Firefox
-        - Edge
-        - Safari
-        - other
-    validations:
-      required: true
-  - type: dropdown
-    id: operating-system
-    attributes:
-      label: Operating System
-      description: Which OS were you using when the issue occurred?
-      options:
-        - Windows
-        - MacOS
-        - Linux
-        - other
-    validations:
-      required: true
-  - type: textarea
-    id: user-description
-    attributes:
-      label: "What happened?"
-      description: Please include any steps you took leading up to the issue and if you can reproduce it.  Let us know what you expected to happen, and what did happen.
-    validations:
-      required: true
-  - type: textarea
-    id: code
-    attributes:
-      label: Code
-      description: Paste in any relevant code snippet below.
-      render: gfm

.github/ISSUE_TEMPLATE/save_issue.yml

@@ -1,26 +0,0 @@
-name: Saving Issue
-description: Report an issue Saving
-labels: ["Saving"]
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Woops, sorry there was an issue Saving.  Please add any detail you can to this report and check back soon!
-  - type: textarea
-    id: error-code
-    attributes:
-      label: Error Code
-      render: shell
-  - type: textarea
-    id: user-description
-    attributes:
-      label: "Your description of what happened:"
-    validations:
-      required: true
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for the report.  Here are some steps that may help in the meantime:
-        1. Refreshing your Google credentials in Homebrewery by signing out, and back in (they expire after one year).
-        2. Waiting a few minutes and trying again - sometimes there is just a momentary blip in the server.
-        3. Check the Issues in Github or the /r/homebrewery subreddit to see if others are experiencing the same issue.

.github/actions/limit-pull-requests/action.yml

@@ -1,103 +0,0 @@
-name: Limit pull requests
-description: >
-  Limit the number of open pull requests to the repository created by a user
-author: ZhongRuoyu (from Homebrew repository)
-branding:
-  icon: alert-triangle
-  color: yellow
-
-inputs:
-  token:
-    description: GitHub token
-    required: false
-    default: ${{ github.token }}
-  except-users:
-    description: The users exempted from the limit, one per line
-    required: false
-  # https://docs.github.com/en/graphql/reference/enums#commentauthorassociation
-  except-author-associations:
-    description: The author associations exempted from the limit, one per line
-    required: false
-  comment-limit:
-    description: >
-      Post the comment when the user's number of open pull requests exceeds this
-      number and `comment` is not empty
-    required: true
-    default: "10"
-  comment:
-    description: The comment to post when the limit is reached
-    required: false
-  close-limit:
-    description: >
-      Close the pull request when the user's number of open pull requests
-      exceeds this number and `close` is set to `true`
-    required: true
-    default: "50"
-  close:
-    description: Whether to close the pull request when the limit is reached
-    required: true
-    default: "false"
-
-runs:
-  using: composite
-  steps:
-    - name: Check the number of pull requests
-      id: count-pull-requests
-      run: |
-        # If the user is exempted, assume they have no pull requests.
-        if grep -Fiqx '${{ github.actor }}' <<<"$EXCEPT_USERS"; then
-          echo "::notice::@${{ github.actor }} is exempted from the limit."
-          echo "count=0" >>"$GITHUB_OUTPUT"
-          exit 0
-        fi
-        if grep -Fiqx '${{ github.event.pull_request.author_association }}' <<<"$EXCEPT_AUTHOR_ASSOCIATIONS"; then
-          echo "::notice::@{{ github.actor }} is a ${{ github.event.pull_request.author_association }} exempted from the limit."
-          echo "count=0" >>"$GITHUB_OUTPUT"
-          exit 0
-        fi
-
-        count="$(
-          gh api \
-            --method GET \
-            --header 'Accept: application/vnd.github+json' \
-            --header 'X-GitHub-Api-Version: 2022-11-28' \
-            --field state=open \
-            --paginate \
-            '/repos/{owner}/{repo}/pulls' |
-            jq \
-              --raw-output \
-              --arg USER '${{ github.actor }}' \
-              'map(select(.user.login == $USER)) | length'
-        )"
-        echo "::notice::@${{ github.actor }} has $count open pull request(s)."
-        echo "count=$count" >>"$GITHUB_OUTPUT"
-      env:
-        GH_REPO: ${{ github.repository }}
-        GH_TOKEN: ${{ inputs.token }}
-        EXCEPT_USERS: ${{ inputs.except-users }}
-        EXCEPT_AUTHOR_ASSOCIATIONS: ${{ inputs.except-author-associations }}
-      shell: bash
-
-    - name: Comment on pull request
-      if: >
-        fromJSON(steps.count-pull-requests.outputs.count) > fromJSON(inputs.comment-limit) &&
-        inputs.comment != ''
-      run: |
-        gh pr comment '${{ github.event.pull_request.number }}' \
-          --body="${COMMENT_BODY}"
-      env:
-        GH_REPO: ${{ github.repository }}
-        GH_TOKEN: ${{ inputs.token }}
-        COMMENT_BODY: ${{ inputs.comment }}
-      shell: bash
-
-    - name: Close pull request
-      if: >
-        fromJSON(steps.count-pull-requests.outputs.count) > fromJSON(inputs.close-limit) &&
-        inputs.close == 'true'
-      run: |
-        gh pr close '${{ github.event.pull_request.number }}'
-      env:
-        GH_REPO: ${{ github.repository }}
-        GH_TOKEN: ${{ inputs.token }}
-      shell: bash

.github/dependabot.yml

@@ -1,78 +0,0 @@
-version: 2
-updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: daily
-  open-pull-requests-limit: 99
-  groups:
-    dev-dependencies:
-      dependency-type: "development"
-      patterns: ["*"]
-      update-types: ["patch", "minor"]
-    prod-dependencies:
-      dependency-type: "production"
-      patterns: ["*"]
-      update-types: ["patch", "minor"]
-  ignore:
-  - dependency-name: eslint
-    versions:
-    - 7.19.0
-    - 7.22.0
-    - 7.23.0
-    - 7.24.0
-  - dependency-name: "@babel/core"
-    versions:
-    - 7.12.13
-    - 7.12.16
-    - 7.12.17
-    - 7.13.13
-    - 7.13.14
-    - 7.13.15
-  - dependency-name: googleapis
-    versions:
-    - 68.0.0
-    - 70.0.0
-    - 71.0.0
-  - dependency-name: "@babel/preset-env"
-    versions:
-    - 7.12.13
-    - 7.12.16
-    - 7.12.17
-    - 7.13.0
-    - 7.13.12
-    - 7.13.8
-  - dependency-name: mongoose
-    versions:
-    - 5.11.14
-    - 5.11.15
-    - 5.11.16
-    - 5.11.17
-    - 5.11.18
-    - 5.11.19
-    - 5.12.1
-    - 5.12.2
-    - 5.12.3
-  - dependency-name: eslint-plugin-react
-    versions:
-    - 7.23.0
-    - 7.23.1
-  - dependency-name: query-string
-    versions:
-    - 7.0.0
-  - dependency-name: nanoid
-    versions:
-    - 3.1.22
-  - dependency-name: "@babel/preset-react"
-    versions:
-    - 7.13.13
-  - dependency-name: codemirror
-    versions:
-    - 5.59.3
-    - 5.60.0
-  - dependency-name: classnames
-    versions:
-    - 2.3.0
-  - dependency-name: marked
-    versions:
-    - 1.2.8

.github/issue_template.md

@@ -1,28 +1,14 @@
-<!-- CLICK "Preview" FOR INSTRUCTIONS IN A MORE READABLE FORMAT -->
+**Browser Type/Version**: [Google Ultron v90.01]
 
-## Before you submit
+**Operating System**: [GLaDOS v34.5.8]
 
-- Support questions are better asked on the subreddit [r/homebrewery](https://www.reddit.com/r/homebrewery/)
-- Read the [contributing guidelines](https://github.com/stolksdorf/homebrewery/blob/master/contributing.md).
-- If it's an issue, please make sure it's reproducible
-- Ensure the issue isn't already reported.
+**Issue Description**: [The thing won't thing]
 
+**Markdown code to reproduce**:
 
-*Delete the above section and the instructions in the sections below before submitting*
+```
+# thing
+> thing 2
+```
 
-
-## Description
-
-If this is a *feature request*, explain why it should be added. Specific use-cases are best.
-
-For *bug reports*, please provide as much *relevant* info as possible.
-
-**Share Link** :
-
-or
-
-**Brew code to reproduce** : <details><summary>Click to expand</summary><code><pre>
-
-PASTE BREW CODE HERE
-
-</pre></code></details>
+**Related Images** :

.github/pull_request_template.md

@@ -1,37 +0,0 @@
-> [!TIP]
-> Before submitting a Pull Request, please consider the following to speed up reviews:
-> - 👷‍♀️ Create small PRs. Large PRs can usually be broken down into incremental PRs.
-> - 🚩 Do you already have several open PRs? Consider finishing or asking for help with existing PRs first.
-> - 🔧 Does your PR reference a discussed and approved issue, especially for personal or edge-case requests?
-> - 💡 Is the solution agreed upon? Save rework time by discussing strategy before coding.
-
-## Description
-
-_Describe what your PR accomplishes. Consider walking through the main changes to aid reviewers in following your code, especially if it covers multiple files._
-
-## Related Issues or Discussions
-
-> [!CAUTION]
-> If no issue exists yet, create it, and get agreement on the approach (or paste in a previous agreement from chat, etc.) before moving forward. (Experimental PRs are OK without prior discussion, but do not expect to get merged.)
-
-- Closes #
-
-## QA Instructions, Screenshots, Recordings
-
-_Replace this line with instructions on how to test or view your changes, as well as any before/after
-screenshots or recordings for UI changes._
-
-### Reviewer Checklist
-
-_Replace the list below with specific features you want reviewers to look at._
-
-*Reviewers, refer to this list when testing features, or suggest new items *
-- [ ] Verify new features are functional
-  - [ ] Feature A does X
-  - [ ] Feature B does Y
-- [ ] Verify old features have not broken
-  - [ ] Feature Z can still be used
-- [ ] Test for edge cases / try to break things
-  - [ ] Feature A handles negative numbers
-- [ ] Identify opportunities for simplification and refactoring
-- [ ] Check for code legibility and appropriate comments

.github/workflows/pr-check.yml

@@ -1,29 +0,0 @@
-name: PR Check
-on: pull_request_target
-env:
-  GH_REPO: ${{ github.repository }}
-  GH_NO_UPDATE_NOTIFIER: 1
-  GH_PROMPT_DISABLED: 1
-permissions:
-  contents: read
-  issues: write
-  pull-requests: write
-  statuses: write
-jobs:
-  limit-pull-requests:
-    if: always() && github.repository_owner == 'naturalcrit'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name : Run limit-pull-requests action
-        uses: ./.github/actions/limit-pull-requests
-        with:
-          except-users: |
-            dependabot
-          comment-limit: 3
-          comment: |
-            Hi, thanks for your contribution to the Homebrewery! You already have >=3 open pull requests. Consider completing some of your existing PRs before opening new ones. Thanks!
-          close-limit: 5
-          close: false

.gitignore

@@ -1,16 +1,16 @@
-node_modules
-storage
-.idea
-*.swp
-
-*.log
-build/*
-config/local.*
-config/docker.*
-
-todo.md
-startDB.bat
-startMViewer.bat
-.vscode
-
-coverage
+# Logs
+logs
+*.log
+
+#Ignore our built files
+build/*
+architecture.json
+
+# Ignore sensitive stuff
+/config/*
+!/config/default.json
+
+node_modules
+storage
+.idea
+*.swp

.stylelintrc.json

@@ -1,48 +0,0 @@
-{
-	"extends": [
-		"stylelint-config-recess-order",
-		"stylelint-config-recommended"],
-	"plugins": [
-		"@stylistic/stylelint-plugin",
-		"./stylelint_plugins/declaration-colon-align.js",
-		"./stylelint_plugins/declaration-colon-min-space-before",
-		"./stylelint_plugins/declaration-block-multi-line-min-declarations"
-	],
-	"customSyntax": "postcss-less",
-	"rules": {
-		"no-descending-specificity"                                 : null,
-		"at-rule-no-unknown"                                        : null,
-		"function-no-unknown"                                       : null,
-		"font-family-no-missing-generic-family-keyword"             : null,
-		"font-weight-notation"                                      : "named-where-possible",
-		"font-family-name-quotes"                                   : "always-unless-keyword",
-		"@stylistic/indentation"                                    : "tab",
-		"no-duplicate-selectors"                                    : true,
-		"@stylistic/color-hex-case"                                 : "upper",
-		"color-hex-length"                                          : "long",
-		"@stylistic/selector-combinator-space-after"                : "always",
-		"@stylistic/selector-combinator-space-before"               : "always",
-		"@stylistic/selector-attribute-operator-space-before"       : "never",
-		"@stylistic/selector-attribute-operator-space-after"        : "never",
-		"@stylistic/selector-attribute-brackets-space-inside"       : "never",
-		"selector-attribute-quotes"                                 : "always",
-		"selector-pseudo-element-colon-notation"                    : "double",
-		"@stylistic/selector-pseudo-class-parentheses-space-inside" : "never",
-		"@stylistic/block-opening-brace-space-before"               : "always",
-		"naturalcrit/declaration-colon-min-space-before"            : 1,
-		"@stylistic/declaration-block-trailing-semicolon"           : "always",
-		"@stylistic/declaration-colon-space-after"                  : "always",
-		"@stylistic/number-leading-zero"                            : "always",
-		"function-url-quotes"                                       : ["always", { "except": ["empty"] }],
-		"function-url-scheme-disallowed-list"                       : ["data","http"],
-		"comment-whitespace-inside"                                 : "always",
-		"@stylistic/string-quotes"                                  : "single",
-		"@stylistic/media-feature-range-operator-space-before"      : "always",
-		"@stylistic/media-feature-range-operator-space-after"       : "always",
-		"@stylistic/media-feature-parentheses-space-inside"         : "never",
-		"@stylistic/media-feature-colon-space-before"               : "always",
-		"@stylistic/media-feature-colon-space-after"                : "always",
-		"naturalcrit/declaration-colon-align"                       : true,
-		"naturalcrit/declaration-block-multi-line-min-declarations" : 1
-	}
-}

Dockerfile

@@ -1,23 +1,29 @@
-FROM node:22-alpine
-RUN apk --no-cache add git
+FROM node:latest
 
-ENV NODE_ENV=docker
+MAINTAINER David Hudson <jendave@yahoo.com>
 
-# Create app directory
-WORKDIR /usr/src/app
+# System update
+RUN apt-get -q -y update
 
-# Copy package.json into the image, then run yarn install
-# This improves caching so we don't have to download the dependencies every time the code changes
-COPY package.json ./
-COPY config/docker.json usr/src/app/config
-# --ignore-scripts tells yarn not to run postbuild.  We run it explicitly later
-RUN node --version
-RUN npm --version
-RUN npm install --ignore-scripts
+RUN apt-get -q -y install npm
+RUN apt-get -q -y install mongodb
 
-# Bundle app source and build application
-COPY . .
-RUN npm run build
+RUN apt-get clean && rm -r /var/lib/apt/lists/*
 
+EXPOSE 22 
 EXPOSE 8000
-CMD [ "npm", "start" ]
+
+ADD start.sh /start.sh 
+RUN chmod +x /start.sh 
+
+VOLUME ["/opt/apps"]
+COPY . /opt/apps/naturalcrit/
+WORKDIR /opt/apps/naturalcrit/
+
+RUN npm install 
+RUN npm install -g gulp-cli
+RUN npm install gulp
+RUN gulp fresh
+
+CMD ["/start.sh"] 
+

README.DOCKER.md

@@ -1,130 +0,0 @@
-# Offline Install Instructions: Docker
-
-These instructions are for setting up a persistent instance of the Homebrewery application locally using Docker.
-
-If you intend to develop with Homebrewery, following the Homebrewery application section of this guide is not recommended. Using docker to deploy MongoDB locally for development is not a bad idea at all, however.
-
-# Install Docker
-
-## Docker Desktop (MacOS/Windows)
-
-Windows and Mac installs use Docker Desktop. Current install instructions are below.
-
-* [Mac](https://docs.docker.com/desktop/mac/install/)
-* [Windows](https://docs.docker.com/desktop/windows/install/)
-
-You can set up the docker engine to start on boot via the Docker desktop UI.
-
-## Docker Engine
-
-Linux installs use Docker Engine. Docker provides installers and instructions for several of the most common distrubutions. If you do not see yours listed, it is very likely supported indirectly by your distribution.
-
-* [Arch](https://docs.docker.com/desktop/setup/install/linux/archlinux/)
-* [CentOS](https://docs.docker.com/engine/install/centos/)
-* [Debian](https://docs.docker.com/engine/install/debian/)
-* [Fedora](https://docs.docker.com/engine/install/fedora/)
-* [RHEL](https://docs.docker.com/engine/install/rhel/)
-* [Ubuntu](https://docs.docker.com/engine/install/ubuntu/)
-
-### Post installation steps
-[Manage Docker as a non-root user (highly recommended)](https://docs.docker.com/engine/install/linux-postinstall/#manage-docker-as-a-non-root-user) 
-[Enable Docker to start on boot (highly recommended)](https://docs.docker.com/engine/install/linux-postinstall/#configure-docker-to-start-on-boot)
-
-# Build Homebrewery Image
-
-Next we build the homebrewery docker image. Start by cloning the repository. 
-
-```shell
-git clone https://github.com/naturalcrit/homebrewery.git
-cd homebrewery
-```
-
-Make an changes you need to `config/docker.json` then build the image. If it does not exist,the below as a template.
-
-```
-{
-"host" : "localhost:8000",
-"naturalcrit_url" : "local.naturalcrit.com:8010",
-"secret" : "secret",
-"web_port" : 8000,
-"mongodb_uri": "mongodb://172.17.0.2/homebrewery",
-}
-```
-
-```shell
-docker-compose build homebrewery
-```
-
-# Add Mongo container
-
-Once docker is installed and running, it is time to set up the containers. First up, Mongo.
-
-```shell
-docker run --name homebrewery-mongodb -d --restart unless-stopped -v mongodata:/data/db -p 27017:27017 mongo:latest
-```
-
-Older CPUs may run into an issue with AVX support. 
-```
-WARNING: MongoDB 5.0+ requires a CPU with AVX support, and your current system does not appear to have that!
- see https://jira.mongodb.org/browse/SERVER-54407
- see also https://www.mongodb.com/community/forums/t/mongodb-5-0-cpu-intel-g4650-compatibility/116610/2
- see also https://github.com/docker-library/mongo/issues/485#issuecomment-891991814
-```
-If you see a message similar to this, try using the bitnami mongo instead.
-
-```shell
-docker run --name homebrewery-mongodb -d --restart unless-stopped -v mongodata:/data/db -p 27017:27017 bitnami/mongo:latest
-```
-
-If your distribution is running on an arm device such as a Raspberry Pi, you will need to run the arm-built MongoDB v4.4.
-
-```shell
-docker run --name homebrewery-mongodb -d --restart unless-stopped -v mongodata:/data/db -p 27017:27017 arm64v8/mongo:4.4
-```
-
-## Run the Homebrewery Image
-```shell
-# Make sure you run this in the homebrewery directory
-docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v $(pwd)/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
-```
-
-**NOTE:** If you are running from the Windows command line, this will not work as `$(pwd)` is not valid syntax. Use this command instead:
-```shell
-# Make sure you run this in the homebrewery directory
-docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v %cd%/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
-```
-
-
-## Updating the Image
-
-When Homebrewery code updates, your docker container will not automatically follow the changes. To do so you will need to rebuild your homebrewery image. 
-
-First, return to your homebrewery clone (from Build Homebrewery Image above) or recreate the clone if you deleted your copy of the code. 
-
-First, delete the existing image.
-
-```shell
-docker rm -f homebrewery-app
-```
-
-Next, update the clone's code to the latest version.
-
-```shell
-cd homebrewery
-git checkout master
-git pull upstream master
-```
-
-Finally, rebuild and restart the homebrewery image.
-
-```shell
-docker-compose build homebrewery
-docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v $(pwd)/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
-```
-
-**NOTE:** If you are running from the Windows command line, this will not work as `$(pwd)` is not valid syntax. Use this command instead:
-```shell
-# Make sure you run this in the homebrewery directory
-docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v %cd%/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
-```
-

README.md

@@ -1,149 +1,33 @@
-# The Homebrewery
-
-[![Homebrewery](https://circleci.com/gh/naturalcrit/homebrewery/tree/master.svg?style=svg)](https://app.circleci.com/pipelines/github/naturalcrit/homebrewery?branch=master)
-
-The Homebrewery is a tool for making authentic looking [D&D content][dnd-content-url]
-using [Markdown][markdown-url]. It is distributed under the terms of the [MIT License](./license).
-
-[dnd-content-url]: https://dnd.wizards.com/products/tabletop-games/rpg-products/rpg_playershandbook
-[markdown-url]: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
-
-## Quick Start
-The easiest way to get started using The Homebrewery is to use it
-[on our website][homebrewery-url]. The code is open source, so feel free to
-clone it and tinker with it. If you want to make changes to the code, you can run
-your own local version for testing by following the installation instructions
-below.
-
-[homebrewery-url]: https://homebrewery.naturalcrit.com
-
-### Installation
-First, install three programs that The Homebrewery requires to run and retrieve
-updates:
-
-1. install [node](https://nodejs.org/en/), version v16 or higher.
-1. install [mongodb](https://www.mongodb.com/try/download/community) (Community version)
-
-    For the easiest installation, follow these steps:
-    1. In the installer, uncheck the option to run as a service.
-    1. You can install MongoDB Compass if you want a GUI to view your database documents.
-    1. If you install any version over 6.0, you will have to install [MongoDB Shell](https://www.mongodb.com/try/download/shell).
-    1. Go to the C:\ drive and create a folder called "data".
-    1. Inside the "data" folder, create a new folder called "db".
-    1. Open a command prompt or other terminal and navigate to your MongoDB install folder (C:\Program Files\Mongo\Server\6.0\bin).
-    1. In the command prompt, run "mongod", which will start up your local database server.
-    1. While MongoD is running, open a second command prompt and navigate to the MongoDB install folder.
-    1. Search in Windows for "Advanced system settings" and open it.
-    1. Click "Environment variables", find the "path" variable, and double-click to open it.
-    1. Click "New" and paste in the path to the MongoDB "bin" folder.
-    1. Click "OK" three times to close all the windows.
-    1. In the second command prompt, run "mongo", which allows you to edit the database.
-    1. Type `use homebrewery` to create The Homebrewery database. You should see `switched to db homebrewery`.
-    1. Type `db.brews.insertOne({"title":"test"})` to create a blank document. You should see `{
-acknowledged: true,
-insertedId: ObjectId("63c2fce9e5ac5a94fe2410cf")
-}`
-   
-1. install [git](https://git-scm.com/downloads) (select the option that allows Git to run from the command prompt).
-
-Checkout the repo ([documentation][github-clone-repo-docs-url]):
-```
-git clone https://github.com/naturalcrit/homebrewery.git
-```
-
-[github-clone-repo-docs-url]: https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/cloning-a-repository
-
-Second, you will need to add the environment variable `NODE_ENV=local` to allow
-the project to run locally.
-
-You can set this **temporarily** (until you close the terminal) in your shell of choice with admin privileges:
-* Windows Powershell: `$env:NODE_ENV="local"`
-* Windows CMD: `set NODE_ENV=local`
-* Linux / macOS: `export NODE_ENV=local`
-
-If you want to add this variable **permanently** the steps are as follows:
-    1. Search in Windows for "Advanced system settings" and open it.
-    1. Click "Environment variables".
-    1. In System Variables, click "New"
-    1. Click "New" and write `NODE_ENV` as a name and `local` as the value.
-    1. Click "OK" three times to close all the windows.
-  This can be undone at any time if needed.
-
-Third, you will need to install the Node dependencies, compile the app, and run
-it using the two commands:
-
-1. `npm install`
-1. `npm start`
-
-When the Homebrewery server is started for the first time, it will modify the database to create the indexes required for better Homebrewery performance. This may take a few moments to complete for each index, dependent on how much content is in your local database - a brand new, empty database should be done in seconds.
-
-On completion, you should be able to go to [http://localhost:8000](http://localhost:8000) in your browser and use The Homebrewery offline.
-
-If you had any issue at all, here are some links that may be useful:
-- [Course](https://learn.mongodb.com/courses/m103-basic-cluster-administration) on cluster administration, useful for beginners
-- [Mongo community forums](https://www.mongodb.com/community/forums/)
-- Useful Stack Overflow links for your most probable errors: [1](https://stackoverflow.com/questions/44962540/mongod-and-mongo-commands-not-working-on-windows-10), [2](https://stackoverflow.com/questions/15053893/mongo-command-not-recognized-when-trying-to-connect-to-a-mongodb-server/41507803#41507803), [3](https://stackoverflow.com/questions/51224959/mongo-is-not-recognized-as-an-internal-or-external-command-operable-program-o)
-
-If you still have problems, post in [Our Subreddit](https://www.reddit.com/r/homebrewery/) and we will help you.
-
-### Running the application via Docker
-
-Please see the docs here: [README.DOCKER.md](./README.DOCKER.md)
-
-### Running the application on FreeBSD or FreeNAS
-
-Please see the docs here: [README.FreeBSD.md](./README.FREEBSD.md)
-
-### Standalone PHB Stylesheet
-If you just want the stylesheet that is generated to make pages look like they
-are from the Player's Handbook, you will find it in the
-[phb.standalone.css](./phb.standalone.css) file.
-
-If you are developing locally and would like to generate your own, follow the
-above steps and then run `npm run phb`.
-
-## Issues, Suggestions, and Bugs
-If you run into any issues using The Homebrewery or have suggestions for
-improvement, please submit an issue [on GitHub][repo-issues-url].
-You can also get help for issues on the subreddit [r/homebrewery][subreddit-url]
-
-[repo-issues-url]: https://github.com/naturalcrit/homebrewery/issues
-[subreddit-url]: https://www.reddit.com/r/homebrewery
-
-## Changelog
-
-You can check out the [changelog](./changelog.md).
-
-## License
-
-This project is licensed under the [MIT license](./license), which means you
-are free to use The Homebrewery in any way that you want, except for claiming
-that you made it yourself.
-
-If you wish to sell, or in some way gain profit for, what's created on this site,
-it's your responsibility to ensure you have the proper licenses/rights for any
-images or resources used.
-
-## Contributing
-
-You are welcome to contribute to the development and maintenance of the
-project! There are several ways of doing that:
-- At the moment, we have a huge backlog of [issues][repo-issues-url] and some
-  of them are outdated, duplicates, or don't contain any useful info. To help, you can [mark duplicates][github-mark-duplicate-url], try to
-  reproduce some complex or weird issues, try finding a workaround for a
-  reported bug, or just mention our issue managers team to let them know about
-  outdated issues via `@naturalcrit/issue-managers`.
-- Our [subreddit][subreddit-url] is constantly growing and there are number of
-  bug reports. Any help with sorting them out is very welcome.
-- And of course you can contribute by fixing a bug or implementing a new
-  feature by yourself, we are waiting for your
-  [pull requests][github-pr-docs-url]!
-
-Anyway, if you would like to get in touch with the team and discuss/coordinate
-your contribution to the project, please join our [gitter chat][gitter-url].
-
-[github-mark-duplicate-url]: https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/about-duplicate-issues-and-pull-requests
-[github-pr-docs-url]: https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request
-[gitter-url]: https://gitter.im/naturalcrit/Lobby
-
-
+# NaturalCrit
+A tool suite for DMs to use for D&D. Check it out [here](http://www.naturalcrit.com).
+
+
+### Getting started
+1. Make sure you have [node](https://nodejs.org/en/)
+1. Clone down the repo
+1. In your terminal, head to the repo
+1. Run `npm install` to get all the dependacies
+2. Run `npm install -g gulp` to install the gulp build tool
+1. Run `gulp fresh`, this will compile and build all the needed libraries (this only has to be done once, unless you add more libs)
+1. Run `gulp` to run the project locally. Should be accessible at `localhost:8000`
+2. Any changes to files within the proejct will be detected and the propject will automatically re-build
+
+**Notes:** If you'd like to create and edit homebrews, you'll need to have MongoDB installed and running.
+
+Have fun!
+
+### Docker Image
+You can use [Docker](https://docs.docker.com) to get up and running with NaturalCrit.
+
+1. Install Docker
+1. Clone the repo
+1. In the terminal, go to the repo
+1. Build the docker image `docker build -t naturalcrit .`
+1. Run the docker container `docker run -dit -p 8000:8000 naturalcrit`
+1. You can check out the website on your computer on port 8000
+	1. You may have to use `docker-machine env` to get the IP address of your docker instance	
+
+
+### changelog
+
+You can check out the changelog [here](https://github.com/stolksdorf/NaturalCrit/blob/master/changelog.md)

babel.config.json

@@ -1,10 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "@babel/plugin-transform-runtime",
-    "babel-plugin-transform-import-meta"
-  ]
-}

client/admin/admin.jsx

@@ -1,52 +1,41 @@
-import './admin.less';
-import React, { useEffect, useState } from 'react';
-const BrewUtils = require('./brewUtils/brewUtils.jsx');
-const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
-import AuthorUtils from './authorUtils/authorUtils.jsx';
-import LockTools  from './lockTools/lockTools.jsx';
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
 
-const tabGroups = ['brew', 'notifications', 'authors', 'locks'];
+var HomebrewAdmin = require('./homebrewAdmin/homebrewAdmin.jsx');
 
-const ADMIN_TAB = 'HB_adminPage_currentTab';
+var Admin = React.createClass({
+	getDefaultProps: function() {
+		return {
+			url : "",
+			admin_key : "",
+			homebrews : [],
+		};
+	},
 
-const Admin = ()=>{
-	const [currentTab, setCurrentTab] = useState('');
+	render : function(){
+		var self = this;
+		return(
+			<div className='admin'>
 
-	useEffect(()=>{
-		setCurrentTab(localStorage.getItem(ADMIN_TAB) || 'brew');
-	}, []);
+				<header>
+					<div className='container'>
+						<i className='fa fa-rocket' />
+						naturalcrit admin
+					</div>
+				</header>
 
-	useEffect(()=>{
-		localStorage.setItem(ADMIN_TAB, currentTab);
-	}, [currentTab]);
-
-	return (
-		<div className='admin'>
-			<header>
 				<div className='container'>
-					<i className='fas fa-rocket' />
-					The Homebrewery Admin Page
-					<a href='/'>back to homepage</a>
+
+					<a target="_blank" href='https://www.google.com/analytics/web/?hl=en#report/defaultid/a72212009w109843310p114529111/'>Link to Google Analytics</a>
+
+					<HomebrewAdmin homebrews={this.props.homebrews} admin_key={this.props.admin_key} />
 				</div>
-			</header>
-			<main className='container'>
-				<nav className='tabs'>
-					{tabGroups.map((tab, idx)=>(
-						<button
-							className={tab === currentTab ? 'active' : ''}
-							key={idx}
-							onClick={()=>setCurrentTab(tab)}>
-							{tab.toUpperCase()}
-						</button>
-					))}
-				</nav>
-				{currentTab === 'brew' && <BrewUtils />}
-				{currentTab === 'notifications' && <NotificationUtils />}
-				{currentTab === 'authors' && <AuthorUtils />}
-        		{currentTab === 'locks' && <LockTools />}
-			</main>
-		</div>
-	);
-};
+
+
+			</div>
+		);
+	}
+});
 
 module.exports = Admin;

client/admin/admin.less

@@ -1,138 +1,39 @@
-@import 'naturalcrit/styles/reset.less';
-@import 'naturalcrit/styles/elements.less';
-@import 'naturalcrit/styles/animations.less';
-@import 'naturalcrit/styles/colors.less';
-@import 'naturalcrit/styles/tooltip.less';
-@import './themes/fonts/iconFonts/fontAwesome.less';
-
-@import 'font-awesome/css/font-awesome.css';
-
-html,body, #reactContainer, .naturalCrit { min-height : 100%; }
-
-@sidebarWidth : 250px;
-
-body {
-	height           : 100%;
-	padding          : 0;
-	margin           : 0;
-	font-family      : 'Open Sans', sans-serif;
-	font-weight      : 100;
-	color            : #4B5055;
-	background-color : #EEEEEE;
-	text-rendering   : optimizeLegibility;
-}
-
-:where(.admin) {
-	padding-bottom : 50px;
-	header {
-		padding          : 20px 0px;
-		margin-bottom    : 30px;
-		font-size        : 2em;
-		color            : white;
-		background-color : @red;
-		i { margin-right : 30px; }
-		a { float : right; }
-	}
-
-	hr { margin : 30px 0px; }
-
-	:where(.container) {
-		input {
-			height        : 33px;
-			padding       : 0px 10px;
-			margin-bottom : 20px;
-			font-family   : monospace;
-		}
-
-		button {
-			height         : 37px;
-			vertical-align : middle;
-		}
-
-		dl {
-			display               : grid;
-			grid-template-columns : 120px 1fr;
-			row-gap               : 10px;
-			align-items           : center;
-			justify-items         : start;
-			padding-top           : 0.5em;
-			dt {
-				float       : left;
-				clear       : left;
-				height      : fit-content;
-				font-weight : 900;
-				text-align  : right;
-				&::after { content : ' : '; }
-			}
-			dd { height      : fit-content; }
-		}
-		
-		.tabs button {
-			margin-right     : 3px;
-			margin-left      : 3px;
-			color            : black;
-			background-color : #EEEEEE;
-			border           : 1px solid #444444;
-			border-radius    : 5px;
-			&:hover {
-				color            : #EEEEEE;
-				background-color : #444444;
-			}
-			&.active {
-				margin-right     : 2px;
-				margin-left      : 2px;
-				text-decoration  : underline;
-				background-color : #CCCCCC;
-				border           : 2px solid #444444;
-			}
-		}
-
-		.notificationUtils {
-			display         : flex;
-			gap             : 50px;
-			justify-content : space-between;
-		}
-	}
-
-	table {
-		padding    : 10px;
-
-		tr {
-			border-bottom : 1px solid;
-			&:last-of-type { border : none; }
-			&:nth-child(even) { background : #DDDDDD; }
-		}
-
-		thead {
-			background    : rgb(193,236,230);
-			border-bottom : 2px solid;
-		}
-        
-		th, td {
-			padding        : 5px 10px;
-			vertical-align : middle;
-			text-align     : center;
-			border-right   : 1px solid;
-
-			&:last-child { border-right : none; }
-		}
-
-		th { font-weight : 900; }
-
-		td {
-			&:first-child {
-				font-weight  : 900;
-				text-align   : left;
-			}
-		}
-	}
-
-	.error {
-		float        : right;
-		padding      : 10px;
-		margin-block : 10px;
-		font-weight  : 900;
-		color        : white;
-		background   : rgb(178, 54, 54);
-	}
-}
+@import 'naturalcrit/styles/reset.less';
+@import 'naturalcrit/styles/elements.less';
+@import 'naturalcrit/styles/animations.less';
+@import 'naturalcrit/styles/colors.less';
+@import 'naturalcrit/styles/tooltip.less';
+
+@import 'font-awesome/css/font-awesome.css';
+
+html,body, #reactContainer, .naturalCrit{
+	min-height : 100%;
+}
+
+@sidebarWidth : 250px;
+
+body{
+	background-color : #eee;
+	font-family      : 'Open Sans', sans-serif;
+	color            : #4b5055;
+	font-weight      : 100;
+	text-rendering   : optimizeLegibility;
+	margin           : 0;
+	padding          : 0;
+	height : 100%;
+}
+
+.admin{
+
+	header{
+		background-color : @red;
+		font-size: 2em;
+		padding : 20px 0px;
+		color : white;
+		margin-bottom: 30px;
+		i{
+			margin-right: 30px;
+		}
+	}
+
+}

client/admin/authorUtils/authorLookup/authorLookup.jsx

@@ -1,87 +0,0 @@
-import './authorLookup.less';
-
-import React from 'react';
-import request from 'superagent';
-
-const authorLookup = ()=>{
-	const [author, setAuthor] = React.useState('');
-	const [searching, setSearching] = React.useState(false);
-	const [results, setResults] = React.useState([]);
-
-	const lookup = async ()=>{
-		if(!author) return;
-
-		setSearching(true);
-		setResults([]);
-
-		const brews = await request.get(`/admin/user/list/${author}`);
-		setResults(brews.body);
-		setSearching(false);
-	};
-
-	const renderResults = ()=>{
-		if(results.length == 0) return <>
-			<h2>Results</h2>
-			<p>None found.</p>
-		</>;
-
-		return <>
-			<h2>{`Results - ${results.length} brews` }</h2>
-			<table className='resultsTable'>
-				<thead>
-					<tr>
-						<th>Title</th>
-						<th>Share</th>
-						<th>Edit</th>
-						<th>Last Update</th>
-						<th>Storage</th>
-					</tr>
-				</thead>
-				<tbody>
-					{results
-						.sort((a, b)=>{         // Sort brews from most recently updated
-							if(a.updatedAt > b.updatedAt) return -1;
-							return 1;
-						})
-						.map((brew, idx)=>{
-							return <tr key={idx}>
-								<td><strong>{brew.title}</strong></td>
-								<td><a href={`/share/${brew.shareId}`}>{brew.shareId}</a></td>
-								<td>{brew.editId}</td>
-								<td style={{ width: '200px' }}>{brew.updatedAt}</td>
-								<td>{brew.googleId ? 'Google' : 'Homebrewery'}</td>
-							</tr>;
-						})}
-				</tbody>
-			</table>
-		</>;
-	};
-
-	const handleKeyPress = (evt)=>{
-		if(evt.key === 'Enter') return lookup();
-	};
-
-	const handleChange = (evt)=>{
-		setAuthor(evt.target.value);
-	};
-
-	return (
-		<div className='authorLookup'>
-			<div className='authorLookupInputs'>
-				<h2>Author Lookup</h2>
-				<label className='field'>
-					Author Name:
-					<input className='fieldInput' value={author} onKeyDown={handleKeyPress} onChange={handleChange} />
-					<button onClick={lookup}>
-						<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
-					</button>
-				</label>
-			</div>
-			<div className='authorLookupResults'>
-				{renderResults()}
-			</div>
-		</div>
-	);
-};
-
-module.exports = authorLookup;

client/admin/authorUtils/authorLookup/authorLookup.less

@@ -1,29 +0,0 @@
-.authorLookup {
-	position       : relative;
-	display        : flex;
-	flex-direction : column;
-
-	.field {
-		display               : flex;
-		gap                   : 5px;
-		align-items           : center;
-		justify-items         : stretch;
-		width                 : 100%;
-		margin-bottom         : 20px;
-   
-	
-		input {
-			height        : 33px;
-			padding       : 0px 10px;
-			margin-bottom : unset;
-			font-family   : monospace;
-		}
-	
-		button {
-			width : 50px;
-				
-			i { margin-right : 10px; }
-		}
-	}
-
-}

client/admin/authorUtils/authorUtils.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-import AuthorLookup from './authorLookup/authorLookup.jsx';
-
-const authorUtils = ()=>{
-	return (
-		<section className='authorUtils'>
-			<AuthorLookup />
-		</section>
-	);
-};
-
-module.exports = authorUtils;

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

@@ -1,72 +0,0 @@
-const React       = require('react');
-const createClass = require('create-react-class');
-
-const request = require('superagent');
-
-const BrewCleanup = createClass({
-	displayName : 'BrewCleanup',
-	getDefaultProps(){
-		return {};
-	},
-	getInitialState() {
-		return {
-			count : 0,
-
-			pending : false,
-			primed  : false,
-			err     : null
-		};
-	},
-	prime(){
-		this.setState({ pending: true });
-
-		request.get('/admin/cleanup')
-			.then((res)=>this.setState({ count: res.body.count, primed: true }))
-			.catch((err)=>this.setState({ error: err }))
-			.finally(()=>this.setState({ pending: false }));
-	},
-	cleanup(){
-		this.setState({ pending: true });
-
-		request.post('/admin/cleanup')
-			.then((res)=>this.setState({ count: res.body.count }))
-			.catch((err)=>this.setState({ error: err }))
-			.finally(()=>this.setState({ pending: false, primed: false }));
-	},
-	renderPrimed(){
-		if(!this.state.primed) return;
-
-		if(!this.state.count){
-			return <div className='result noBrews'>No Matching Brews found.</div>;
-		}
-		return <div className='result'>
-			<button onClick={this.cleanup} className='remove'>
-				{this.state.pending
-					? <i className='fas fa-spin fa-spinner' />
-					: <span><i className='fas fa-times' /> Remove</span>
-				}
-			</button>
-			<span>Found {this.state.count} Brews that could be removed. </span>
-		</div>;
-	},
-	render(){
-		return <div className='brewUtil brewCleanup'>
-			<h2> Brew Cleanup </h2>
-			<p>Removes very short brews to tidy up the database</p>
-
-			<button onClick={this.prime} className='query'>
-				{this.state.pending
-					? <i className='fas fa-spin fa-spinner' />
-					: 'Query Brews'
-				}
-			</button>
-			{this.renderPrimed()}
-
-			{this.state.error
-				&& <div className='error noBrews'>{this.state.error.toString()}</div>
-			}
-		</div>;
-	}
-});
-
-module.exports = BrewCleanup;

client/admin/brewUtils/brewCompress/brewCompress.jsx

@@ -1,88 +0,0 @@
-const React       = require('react');
-const createClass = require('create-react-class');
-const request = require('superagent');
-
-const BrewCompress = createClass({
-	displayName : 'BrewCompress',
-	getDefaultProps(){
-		return {};
-	},
-	getInitialState() {
-		return {
-			count      : 0,
-			batchRange : 0,
-
-			pending : false,
-			primed  : false,
-			err     : null,
-			ids     : null
-		};
-	},
-	prime(){
-		this.setState({ pending: true });
-
-		request.get('/admin/finduncompressed')
-			.then((res)=>this.setState({ count: res.body.count, primed: true, ids: res.body.ids }))
-			.catch((err)=>this.setState({ error: err }))
-			.finally(()=>this.setState({ pending: false }));
-	},
-	cleanup(){
-		const brews = this.state.ids;
-		const compressBatches = ()=>{
-			if(brews.length == 0){
-				this.setState({ pending: false, primed: false });
-				return;
-			}
-			const batch = brews.splice(0, 1000);	// Process brews in batches of 1000
-			this.setState({ batchRange: this.state.count - brews.length });
-			batch.forEach((id, idx)=>{
-				request.put(`/admin/compress/${id}`)
-					.catch((err)=>this.setState({ error: err }));
-			});
-			setTimeout(compressBatches, 10000);		//Wait 10 seconds between batches
-		};
-
-		this.setState({ pending: true });
-
-		compressBatches();
-	},
-	renderPrimed(){
-		if(!this.state.primed) return;
-
-		if(!this.state.count){
-			return <div className='result noBrews'>No Matching Brews found.</div>;
-		}
-		return <div className='result'>
-			<button onClick={this.cleanup} className='remove'>
-				{this.state.pending
-					? <i className='fas fa-spin fa-spinner' />
-					: <span><i className='fas fa-compress' /> compress </span>
-				}
-			</button>
-			{this.state.pending
-				? <span>Compressing {this.state.batchRange} brews. </span>
-				: <span>Found {this.state.count} Brews that could be compressed. </span>
-			}
-		</div>;
-	},
-	render(){
-		return <div className='brewUtil brewCompress'>
-			<h2> Brew Compression </h2>
-			<p>Compresses the text in brews to binary</p>
-
-			<button onClick={this.prime} className='query'>
-				{this.state.pending
-					? <i className='fas fa-spin fa-spinner' />
-					: 'Query Brews'
-				}
-			</button>
-			{this.renderPrimed()}
-
-			{this.state.error
-				&& <div className='error'>{this.state.error.toString()}</div>
-			}
-		</div>;
-	}
-});
-
-module.exports = BrewCompress;

client/admin/brewUtils/brewLookup/brewLookup.jsx

@@ -1,113 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const cx    = require('classnames');
-
-const request = require('superagent');
-const Moment = require('moment');
-
-
-const BrewLookup = createClass({
-	getDefaultProps() {
-		return {};
-	},
-	getInitialState() {
-		return {
-			query       : '',
-			foundBrew   : null,
-			searching   : false,
-			error       : null,
-			scriptCount : 0
-		};
-	},
-	handleChange(e){
-		this.setState({ query: e.target.value });
-	},
-	lookup(){
-		this.setState({ searching: true, error: null, scriptCount: 0 });
-
-		request.get(`/admin/lookup/${this.state.query}`)
-			.then((res)=>{
-				const foundBrew = res.body;
-				const scriptCheck = foundBrew?.text.match(/(<\/?s)cript/g);
-				this.setState({
-					foundBrew   : foundBrew,
-					scriptCount : scriptCheck?.length || 0,
-				});
-			})
-			.catch((err)=>this.setState({ error: err }))
-			.finally(()=>{
-				this.setState({
-					searching : false
-				});
-			});
-	},
-
-	async cleanScript(){
-		if(!this.state.foundBrew?.shareId) return;
-
-		await request.put(`/admin/clean/script/${this.state.foundBrew.shareId}`)
-			.catch((err)=>{ this.setState({ error: err }); return; });
-
-		this.lookup();
-	},
-
-	renderFoundBrew(){
-		const brew = this.state.foundBrew;
-		return <div className='result'>
-			<dl>
-				<dt>Title</dt>
-				<dd>{brew.title}</dd>
-
-				<dt>Authors</dt>
-				<dd>{brew.authors.join(', ')}</dd>
-
-				<dt>Edit Link</dt>
-				<dd><a href={`/edit/${brew.editId}`} target='_blank' rel='noopener noreferrer'>/edit/{brew.editId}</a></dd>
-
-				<dt>Share Link</dt>
-				<dd><a href={`/share/${brew.shareId}`} target='_blank' rel='noopener noreferrer'>/share/{brew.shareId}</a></dd>
-
-				<dt>Created Time</dt>
-				<dd>{brew.createdAt ? Moment(brew.createdAt).toLocaleString() : 'No creation date'}</dd>
-
-				<dt>Last Updated</dt>
-				<dd>{Moment(brew.updatedAt).fromNow()}</dd>
-
-				<dt>Num of Views</dt>
-				<dd>{brew.views}</dd>
-
-				<dt>SCRIPT tags detected</dt>
-				<dd>{this.state.scriptCount}</dd>
-			</dl>
-			{this.state.scriptCount > 0 &&
-				<div className='cleanButton'>
-					<button onClick={this.cleanScript}>CLEAN BREW</button>
-				</div>
-			}
-		</div>;
-	},
-
-	render(){
-		return <div className='brewUtil brewLookup'>
-			<h2>Brew Lookup</h2>
-			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='edit or share id' />
-			<button onClick={this.lookup}>
-				<i className={cx('fas', {
-					'fa-search'          : !this.state.searching,
-					'fa-spin fa-spinner' : this.state.searching,
-				})} />
-			</button>
-
-			{this.state.error
-				&& <div className='error'>{this.state.error.toString()}</div>
-			}
-
-			{this.state.foundBrew
-				? this.renderFoundBrew()
-				: <div className='result noBrew'>No brew found.</div>
-			}
-		</div>;
-	}
-});
-
-module.exports = BrewLookup;

client/admin/brewUtils/brewUtils.jsx

@@ -1,24 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-require('./brewUtils.less');
-
-const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
-const BrewLookup = require('./brewLookup/brewLookup.jsx');
-const BrewCompress = require ('./brewCompress/brewCompress.jsx');
-const Stats = require('./stats/stats.jsx');
-
-const BrewUtils = createClass({
-	render : function(){
-		return <>
-			<Stats />
-			<hr />
-			<BrewLookup />
-			<hr />
-			<BrewCleanup />
-			<hr />
-			<BrewCompress />
-		</>;
-	}
-});
-
-module.exports = BrewUtils;

client/admin/brewUtils/brewUtils.less

@@ -1,29 +0,0 @@
-.brewUtil {
-	.result {
-		margin-top : 20px;
-		button {
-			margin-right     : 10px;
-			background-color : @red;
-		}
-	}
-	.cleanButton {
-		display : inline-block;
-		width   : 100%;
-	}
-}
-
-.stats {
-	position : relative;
-	
-	.pending {
-		position : absolute;
-		top      : 0.5em;
-		left     : 100px;
-		width    : 100%;
-		height   : 100%;
-	}
-
-	&:has(.pending) { opacity : 0.5; }
-
-	dl { grid-template-columns : 200px 250px; }
-}

client/admin/brewUtils/stats/stats.jsx

@@ -1,46 +0,0 @@
-const React       = require('react');
-const createClass = require('create-react-class');
-
-const request = require('superagent');
-
-const Stats = createClass({
-	displayName : 'Stats',
-	getDefaultProps(){
-		return {};
-	},
-	getInitialState(){
-		return {
-			stats : {
-				totalBrews          : 0,
-				totalPublishedBrews : 0
-			},
-			fetching : false
-		};
-	},
-	componentDidMount(){
-		this.fetchStats();
-	},
-	fetchStats(){
-		this.setState({ fetching: true });
-		request.get('/admin/stats')
-			.then((res)=>this.setState({ stats: res.body }))
-			.finally(()=>this.setState({ fetching: false }));
-	},
-	render(){
-		return <div className='brewUtil stats'>
-			<h2> Stats </h2>
-			<dl>
-				<dt>Total Brew Count</dt>
-				<dd>{this.state.stats.totalBrews}</dd>
-				<dt>Total Brews Published</dt>
-				<dd>{this.state.stats.totalPublishedBrews}</dd>
-			</dl>
-
-			{this.state.fetching
-				&& <div className='pending'><i className='fas fa-spin fa-spinner' /></div>
-			}
-		</div>;
-	}
-});
-
-module.exports = Stats;

client/admin/homebrewAdmin/homebrewAdmin.jsx

@@ -0,0 +1,153 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+var request = require('superagent');
+
+var Moment = require('moment');
+
+var HomebrewAdmin = React.createClass({
+	getDefaultProps: function() {
+		return {
+			admin_key : ''
+		};
+	},
+
+	getInitialState: function() {
+		return {
+			page: 0,
+			count : 20,
+			brewCache : {},
+			total : 0,
+
+			processingOldBrews : false
+		};
+	},
+
+
+	fetchBrews : function(page){
+		request.get('/homebrew/api/search')
+			.query({
+				admin_key : this.props.admin_key,
+				count : this.state.count,
+				page : page
+			})
+			.end((err, res)=>{
+				this.state.brewCache[page] = res.body.brews;
+				this.setState({
+					brewCache : this.state.brewCache,
+					total : res.body.total,
+					count : res.body.count
+				})
+			})
+	},
+
+	componentDidMount: function() {
+		this.fetchBrews(this.state.page);
+	},
+
+	changePageTo : function(page){
+		if(!this.state.brewCache[page]){
+			this.fetchBrews(page);
+		}
+		this.setState({
+			page : page
+		})
+	},
+
+
+	clearInvalidBrews : function(){
+		request.get('/homebrew/api/invalid')
+			.query({admin_key : this.props.admin_key})
+			.end((err, res)=>{
+				if(!confirm("This will remove " + res.body.count + " brews. Are you sure?")) return;
+				request.get('/homebrew/api/invalid')
+					.query({admin_key : this.props.admin_key, do_it : true})
+					.end((err, res)=>{
+						alert("Done!")
+					});
+			});
+	},
+
+
+	deleteBrew : function(brewId){
+		if(!confirm("Are you sure you want to delete '" + brewId + "'?")) return;
+		request.get('/homebrew/api/remove/' + brewId)
+			.query({admin_key : this.props.admin_key})
+			.end(function(err, res){
+				window.location.reload();
+			})
+	},
+
+	handlePageChange : function(dir){
+		this.changePageTo(this.state.page + dir);
+	},
+
+	renderPagnination : function(){
+		var outOf;
+		if(this.state.total){
+			outOf = this.state.page + ' / ' + Math.round(this.state.total/this.state.count);
+		}
+		return <div className='pagnination'>
+			<i className='fa fa-chevron-left' onClick={this.handlePageChange.bind(this, -1)}/>
+			{outOf}
+			<i className='fa fa-chevron-right' onClick={this.handlePageChange.bind(this, 1)}/>
+		</div>
+	},
+
+
+	renderBrews : function(){
+		var brews = this.state.brewCache[this.state.page] || _.times(this.state.count);
+		return _.map(brews, (brew)=>{
+			return <tr className={cx('brewRow', {'isEmpty' : brew.text == "false"})} key={brew.sharedId}>
+				<td><a href={'/homebrew/edit/' + brew.editId} target='_blank'>{brew.editId}</a></td>
+				<td><a href={'/homebrew/share/' + brew.shareId} target='_blank'>{brew.shareId}</a></td>
+				<td>{Moment(brew.createdAt).fromNow()}</td>
+				<td>{Moment(brew.updatedAt).fromNow()}</td>
+				<td>{Moment(brew.lastViewed).fromNow()}</td>
+				<td>{brew.views}</td>
+				<td>
+					<div className='deleteButton' onClick={this.deleteBrew.bind(this, brew.editId)}>
+						<i className='fa fa-trash' />
+					</div>
+				</td>
+			</tr>
+		});
+	},
+
+	renderBrewTable : function(){
+		return <div className='brewTable'>
+			<table>
+				<thead>
+					<tr>
+						<th>Edit Id</th>
+						<th>Share Id</th>
+						<th>Created At</th>
+						<th>Last Updated</th>
+						<th>Last Viewed</th>
+						<th>Views</th>
+					</tr>
+				</thead>
+				<tbody>
+					{this.renderBrews()}
+				</tbody>
+			</table>
+		</div>
+	},
+
+	render : function(){
+		var self = this;
+		return <div className='homebrewAdmin'>
+			<h2>
+				Homebrews - {this.state.total}
+			</h2>
+			{this.renderPagnination()}
+			{this.renderBrewTable()}
+
+			<button className='clearOldButton' onClick={this.clearInvalidBrews}>
+				Clear Old
+			</button>
+		</div>
+	}
+});
+
+module.exports = HomebrewAdmin;

client/admin/homebrewAdmin/homebrewAdmin.less

@@ -0,0 +1,53 @@
+
+.homebrewAdmin{
+	margin-bottom: 80px;
+	.brewTable{
+		table{
+
+			th{
+				padding     : 10px;
+				font-weight : 800;
+			}
+			tr:nth-child(even){
+				background-color : fade(@green, 10%);
+			}
+			tr.isEmpty{
+				background-color : fade(@red, 30%);
+			}
+			td{
+				min-width  : 100px;
+				padding    : 10px;
+				text-align : center;
+
+				&.preview{
+					position : relative;
+					&:hover{
+						.content{
+							display : block;
+						}
+					}
+					.content{
+						position         : absolute;
+						display          : none;
+						top              : 100%;
+						left             : 0px;
+						z-index          : 1000;
+						max-height       : 500px;
+						width            : 300px;
+						padding          : 30px;
+						background-color : white;
+						font-family      : monospace;
+						text-align       : left;
+						pointer-events   : none;
+					}
+				}
+			}
+		}
+	}
+	.deleteButton{
+		cursor: pointer;
+	}
+	button.clearOldButton{
+		float : right;
+	}
+}

client/admin/lockTools/lockTools.jsx

@@ -1,342 +0,0 @@
-/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
-require('./lockTools.less');
-const React = require('react');
-const createClass = require('create-react-class');
-
-import request from '../../homebrew/utils/request-middleware.js';
-
-const LockTools = createClass({
-	displayName     : 'LockTools',
-	getInitialState : function() {
-		return {
-			fetching    : false,
-			reviewCount : 0
-		};
-	},
-
-	componentDidMount : function() {
-		this.updateReviewCount();
-	},
-
-	updateReviewCount : async function() {
-		const newCount = await request.get('/api/lock/count')
-            .then((res)=>{return res.body?.count || 'Unknown';});
-		if(newCount != this.state.reviewCount){
-			this.setState({
-				reviewCount : newCount
-			});
-		}
-	},
-
-	updateLockData : function(lock){
-		this.setState({
-			lock : lock
-		});
-	},
-
-	render : function() {
-		return <div className='lockTools'>
-			<h2>Lock Count</h2>
-			<p>Number of brews currently locked: {this.state.reviewCount}</p>
-			<button onClick={this.updateReviewCount}>REFRESH</button>
-			<hr />
-			<LockTable title='Locked Brews' text='Total Locked Brews' resultName='lockedDocuments' fetchURL='/api/locks' propertyNames={['shareId', 'title']} loadBrew={this.updateLockData} ></LockTable>
-			<hr />
-			<LockTable title='Brews Awaiting Review' text='Total Reviews Waiting' resultName='reviewDocuments' fetchURL='/api/lock/reviews' propertyNames={['shareId', 'title']} loadBrew={this.updateLockData} ></LockTable>
-			<hr />
-			<LockBrew key={this.state.lock?.key || 0} lock={this.state.lock}></LockBrew>
-			<hr />
-			<div style={{ columns: 2 }}>
-				<LockLookup title='Unlock Brew' fetchURL='/api/unlock' updateFn={this.updateReviewCount}></LockLookup>
-				<LockLookup title='Clear Review Request' fetchURL='/api/lock/review/remove'></LockLookup>
-			</div>
-			<hr />
-		</div>;
-	}
-});
-
-const LockBrew = createClass({
-	displayName     : 'LockBrew',
-	getInitialState : function() {
-		// Default values
-		return {
-			brewId       : this.props.lock?.shareId || '',
-			code         : this.props.lock?.code || 455,
-			editMessage  : this.props.lock?.editMessage || '',
-			shareMessage : this.props.lock?.shareMessage || 'This Brew has been locked.',
-			result       : {},
-			overwrite    : false,
-		};
-	},
-
-	handleChange : function(e, varName) {
-		const output = {};
-		output[varName] = e.target.value;
-		this.setState(output);
-	},
-
-	submit : function(e){
-		e.preventDefault();
-		if(!this.state.editMessage) return;
-		const newLock = {
-			overwrite    : this.state.overwrite,
-			code         : parseInt(this.state.code) || 100,
-			editMessage  : this.state.editMessage,
-			shareMessage : this.state.shareMessage,
-			applied      : new Date
-		};
-
-		request.post(`/api/lock/${this.state.brewId}`)
-			.send(newLock)
-			.set('Content-Type', 'application/json')
-			.then((response)=>{
-				this.setState({ result: response.body });
-			})
-			.catch((err)=>{
-				this.setState({ result: err.response.body });
-			});
-	},
-
-	renderInput : function (name) {
-		return <input type='text' name={name} value={this.state[name]} onChange={(e)=>this.handleChange(e, name)} autoComplete='off' required/>;
-	},
-
-	renderResult : function(){
-		return <>
-			<h3>Result:</h3>
-			<table>
-				<tbody>
-					{Object.keys(this.state.result).map((key, idx)=>{
-						return <tr key={`${idx}-row`}>
-							<td key={`${idx}-key`}>{key}</td>
-							<td key={`${idx}-value`}>{this.state.result[key].toString()}
-							</td>
-						</tr>;
-					})}
-				</tbody>
-			</table>
-		</>;
-	},
-
-	render : function() {
-		return <div className='lockBrew'>
-			<div className='lockForm'>
-				<h2>Lock Brew</h2>
-				<form onSubmit={this.submit}>
-					<label>
-						ID:
-						{this.renderInput('brewId')}
-					</label>
-					<br />
-					<label>
-						Error Code:
-						{this.renderInput('code')}
-					</label>
-					<br />
-					<label>
-						Private Message:
-						{this.renderInput('editMessage')}
-					</label>
-					<br />
-					<label>
-						Public Message:
-						{this.renderInput('shareMessage')}
-					</label>
-					<br />
-					<label className='checkbox'>
-						Overwrite
-						<input name='overwrite' className='checkbox' type='checkbox' value={this.state.overwrite} onClick={()=>{return this.setState((prevState)=>{return { overwrite: !prevState.overwrite };});}} />
-					</label>
-					<label>
-						<input type='submit' />
-					</label>
-				</form>
-				{this.state.result && this.renderResult()}
-			</div>
-			<div className='lockSuggestions'>
-				<h2>Suggestions</h2>
-				<div className='lockCodes'>
-					<h3>Codes</h3>
-					<ul>
-						<li>455 - Generic Lock</li>
-						<li>456 - Copyright issues</li>
-						<li>457 - Confidential Information Leakage</li>
-						<li>458 - Sensitive Personal Information</li>
-						<li>459 - Defamation or Libel</li>
-						<li>460 - Hate Speech or Discrimination</li>
-						<li>461 - Illegal Activities</li>
-						<li>462 - Malware or Phishing</li>
-						<li>463 - Plagiarism</li>
-						<li>465 - Misrepresentation</li>
-						<li>466 - Inappropriate Content</li>
-					</ul>
-				</div>
-				<div className='lockMessages'>
-					<h3>Messages</h3>
-					<ul>
-						<li><b>Private Message:</b> This is the private message that is ONLY displayed to the authors of the locked brew. This message MUST specify exactly what actions must be taken in order to have the brew unlocked.</li>
-						<li><b>Public Message:</b> This is the public message that is displayed to the EVERYONE that attempts to view the locked brew.</li>
-					</ul>
-				</div>
-			</div>
-		</div>;
-	}
-});
-
-const LockTable = createClass({
-	displayName     : 'LockTable',
-	getDefaultProps : function() {
-		return {
-			title         : '',
-			text          : '',
-			fetchURL      : '/api/locks',
-			resultName    : '',
-			propertyNames : ['shareId'],
-			loadBrew      : ()=>{}
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			result    : '',
-			error     : '',
-			searching : false
-		};
-	},
-
-	lockKey : React.createRef(0),
-
-	clickFn : function (){
-		this.setState({ searching: true, error: null });
-
-		request.get(this.props.fetchURL)
-			.then((res)=>this.setState({ result: res.body }))
-			.catch((err)=>this.setState({ result: err.response.body }))
-			.finally(()=>{
-				this.setState({ searching: false });
-			});
-	},
-
-	updateBrewLockData : function (lockData){
-		this.lockKey.current++;
-		const brewData = {
-			key          : this.lockKey.current,
-			shareId      : lockData.shareId,
-			code         : lockData.lock.code,
-			editMessage  : lockData.lock.editMessage,
-			shareMessage : lockData.lock.shareMessage
-		};
-		this.props.loadBrew(brewData);
-	},
-
-	render : function () {
-		return <>
-			<div className='brewsAwaitingReview'>
-				<div className='brewBlock'>
-					<h2>{this.props.title}</h2>
-					<button onClick={this.clickFn}>
-						REFRESH
-						<i className={`fas ${!this.state.searching ? 'fa-search' : 'fa-spin fa-spinner'}`} />
-					</button>
-				</div>
-				{this.state.result[this.props.resultName] &&
-				<>
-					<p>{this.props.text}: {this.state.result[this.props.resultName].length}</p>
-					<table className='lockTable'>
-						<thead>
-							<tr>
-								{this.props.propertyNames.map((name, idx)=>{
-									return <th key={idx}>{name}</th>;
-								})}
-								<th>clip</th>
-								<th>load</th>
-							</tr>
-						</thead>
-						<tbody>
-							{this.state.result[this.props.resultName].map((result, resultIdx)=>{
-								return <tr className='row' key={`${resultIdx}-row`}>
-									{this.props.propertyNames.map((name, nameIdx)=>{
-										return <td key={`${resultIdx}-${nameIdx}`}>
-											{result[name].toString()}
-										</td>;
-									})}
-									<td className='icon' title='Copy ID to Clipboard' onClick={()=>{navigator.clipboard.writeText(result.shareId.toString());}}><i className='fa-regular fa-clipboard'></i></td>
-									<td className='icon' title='View Lock details' onClick={()=>{this.updateBrewLockData(result);}}><i className='fa-regular fa-circle-down'></i></td>
-								</tr>;
-							})}
-						</tbody>
-					</table>
-				</>
-				}
-			</div>
-		</>;
-	}
-});
-
-const LockLookup = createClass({
-	displayName     : 'LockLookup',
-	getDefaultProps : function() {
-		return {
-			fetchURL : '/api/lookup'
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			query     : '',
-			result    : '',
-			error     : '',
-			searching : false
-		};
-	},
-
-	handleChange(e){
-		this.setState({ query: e.target.value });
-	},
-
-	clickFn(){
-		this.setState({ searching: true, error: null });
-
-		request.put(`${this.props.fetchURL}/${this.state.query}`)
-			.then((res)=>this.setState({ result: res.body }))
-			.catch((err)=>this.setState({ result: err.response.body }))
-			.finally(()=>{
-				this.setState({ searching: false });
-			});
-	},
-
-	renderResult : function(){
-		return <div className='lockLookup'>
-			<h3>Result:</h3>
-			<table>
-				<tbody>
-					{Object.keys(this.state.result).map((key, idx)=>{
-						return <tr key={`${idx}-row`}>
-							<td key={`${idx}-key`}>{key}</td>
-							<td key={`${idx}-value`}>{this.state.result[key].toString()}
-							</td>
-						</tr>;
-					})}
-				</tbody>
-			</table>
-		</div>;
-	},
-
-	render : function() {
-		return <div className='brewLookup'>
-			<h2>{this.props.title}</h2>
-			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='share id' />
-			<button onClick={this.clickFn}>
-				<i className={`fas ${!this.state.searching ? 'fa-search' : 'fa-spin fa-spinner'}`} />
-			</button>
-
-			{this.state.error
-				&& <div className='error'>{this.state.error.toString()}</div>
-			}
-
-			{this.state.result && this.renderResult()}
-		</div>;
-	}
-});
-
-module.exports = LockTools;

client/admin/lockTools/lockTools.less

@@ -1,66 +0,0 @@
-.lockTools {
-	.lockBrew { 
-		columns : 2;
-
-		.lockForm {
-			break-inside : avoid;
-
-			label {
-				display     : inline-block;
-				width       : 100%;
-				line-height : 2.25em;
-				text-align  : right;
-				input {
-					float       : right;
-					width       : 65%;
-					margin-left : 10px;
-				}
-				&.checkbox {
-					line-height: 1.5em;
-					input {
-						width  : 1.5em;
-						height : 1.5em;
-					}
-				}
-			}
-		}
-
-		.lockSuggestions {
-			line-height  : 1.2em;
-			break-inside : avoid;
-			columns      : 2;
-			h2 { column-span : all; }
-			h3 { margin-top : 0px; }
-			b { font-weight : 600; }
-
-			.lockCodes { break-inside : avoid; }
-		}
-	}
-
-	.lockTable {
-		cursor       : default;
-		break-inside : avoid;
-		.row:hover {
-			color            : #000000;
-			background-color : #CCCCCC;
-		}
-		.icon {
-			cursor : pointer;
-			&:hover { text-shadow : 0px 0px 6px black; }
-		}
-	}
-    
-	th, td {
-		padding    : 4px 10px;
-		text-align : center;
-	}
-	table, td { border : 1px solid #333333; }
-
-	.brewLookup {
-		min-height   : 175px;
-		break-inside : avoid;
-		h2 { margin-top : 0px; }
-	}
-
-	button i { padding-left : 5px; }
-}

client/admin/notificationUtils/notificationAdd/notificationAdd.jsx

@@ -1,109 +0,0 @@
-require('./notificationAdd.less');
-const React = require('react');
-const { useState, useRef } = require('react');
-const request = require('superagent');
-
-const NotificationAdd = ()=>{
-	const [notificationResult, setNotificationResult] = useState(null);
-	const [searching, setSearching] = useState(false);
-	const [error, setError] = useState(null);
-
-	const dismissKeyRef = useRef(null);
-	const titleRef = useRef(null);
-	const textRef = useRef(null);
-	const startAtRef = useRef(null);
-	const stopAtRef = useRef(null);
-
-	const saveNotification = async ()=>{
-		const dismissKey = dismissKeyRef.current.value;
-		const title = titleRef.current.value;
-		const text = textRef.current.value;
-		const startAt = new Date(startAtRef.current.value);
-		const stopAt = new Date(stopAtRef.current.value);
-
-		// Basic validation
-		if(!dismissKey || !title || !text || isNaN(startAt.getTime()) || isNaN(stopAt.getTime())) {
-			setError('All fields are required');
-			return;
-		}
-		if(startAt >= stopAt) {
-			setError('End date must be after the start date!');
-			return;
-		}
-
-		const data = {
-			dismissKey,
-			title,
-			text,
-			startAt : startAt?.toISOString() ?? '',
-			stopAt  : stopAt?.toISOString() ?? '',
-		};
-
-		try {
-			setSearching(true);
-			setError(null);
-			const response = await request.post('/admin/notification/add').send(data);
-			console.log(response.body);
-
-			// Reset form fields
-			dismissKeyRef.current.value = '';
-			titleRef.current.value = '';
-			textRef.current.value = '';
-
-			setNotificationResult('Notification successfully created.');
-			setSearching(false);
-		} catch (err) {
-			console.log(err.response.body.message);
-			setError(`Error saving notification: ${err.response.body.message}`);
-			setSearching(false);
-		}
-	};
-
-	return (
-		<div className='notificationAdd'>
-			<h2>Add Notification</h2>
-
-			<label className='field'>
-				Dismiss Key:
-				<input className='fieldInput' type='text' ref={dismissKeyRef} required
-					placeholder='dismiss_notif_drive'
-				/>
-			</label>
-
-			<label className='field'>
-				Title:
-				<input className='fieldInput' type='text' ref={titleRef} required
-					placeholder='Stop using Google Drive as image host'
-				/>
-			</label>
-
-			<label className='field'>
-				Text:
-				<textarea className='fieldInput' type='text' ref={textRef} required
-					placeholder='Google Drive is not an image hosting site, you should not use it as such.'
-				>
-				</textarea>
-			</label>
-
-			<label className='field'>
-				Start Date:
-				<input type='date' className='fieldInput' ref={startAtRef} required/>
-			</label>
-
-			<label className='field'>
-				End Date:
-				<input type='date' className='fieldInput' ref={stopAtRef} required/>
-			</label>
-
-			<div className='notificationResult'>{notificationResult}</div>
-
-			<button className='notificationSave' onClick={saveNotification} disabled={searching}>
-				<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-save'}`}/>
-				Save Notification
-			</button>
-			{error && <div className='error'>{error}</div>}
-		</div>
-	);
-};
-
-module.exports = NotificationAdd;

client/admin/notificationUtils/notificationAdd/notificationAdd.less

@@ -1,38 +0,0 @@
-.notificationAdd {
-	position       : relative;
-	display        : flex;
-	flex-direction : column;
-	width          : 500px;
-
-	.field {
-		display               : grid;
-		grid-template-columns : 120px 200px;
-		align-items           : center;
-		justify-items         : stretch;
-		width                 : 100%;
-		margin-bottom         : 20px;
-
-		input {
-			height        : 33px;
-			padding       : 0px 10px;
-			margin-bottom : unset;
-			font-family   : monospace;
-
-			&[type='date'] { width : 14ch; }
-		}
-	
-		textarea {
-			width      : 50ch;
-			min-height : 7em;
-			max-height : 20em;
-			padding	   : 10px;
-			resize     : vertical;
-		}
-	}
-
-	button {
-		width : 200px;
-		
-		i { margin-right : 10px; }
-	}
-}

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -1,105 +0,0 @@
-require('./notificationLookup.less');
-
-const React = require('react');
-const { useState } = require('react');
-const request = require('superagent');
-const Moment = require('moment');
-
-const NotificationDetail = ({ notification, onDelete })=>(
-	<>
-		<dl>
-			<dt>Key</dt>
-			<dd>{notification.dismissKey}</dd>
-
-			<dt>Title</dt>
-			<dd>{notification.title || 'No Title'}</dd>
-
-			<dt>Created</dt>
-			<dd>{Moment(notification.createdAt).format('LLLL')}</dd>
-
-			<dt>Start</dt>
-			<dd>{Moment(notification.startAt).format('LLLL') || 'No Start Time'}</dd>
-
-			<dt>Stop</dt>
-			<dd>{Moment(notification.stopAt).format('LLLL') || 'No End Time'}</dd>
-
-			<dt>Text</dt>
-			<dd>{notification.text || 'No Text'}</dd>
-		</dl>
-		<button onClick={()=>onDelete(notification.dismissKey)}>DELETE</button>
-	</>
-);
-
-const NotificationLookup = ()=>{
-	const [searching, setSearching] = useState(false);
-	const [error, setError] = useState(null);
-	const [notifications, setNotifications] = useState([]);
-
-	const lookupAll = async ()=>{
-		setSearching(true);
-		setError(null);
-
-		try {
-			const res = await request.get('/admin/notification/all');
-			setNotifications(res.body || []);
-		} catch (err) {
-			console.log(err);
-			setError(`Error looking up notifications: ${err.response.body.message}`);
-		} finally {
-			setSearching(false);
-		}
-	};
-
-	const deleteNotification = async (dismissKey)=>{
-		if(!dismissKey) return;
-
-		const confirmed = window.confirm(
-			`Really delete notification ${dismissKey}?`
-		);
-		if(!confirmed) {
-			console.log('Delete notification cancelled');
-			return;
-		}
-		console.log('Delete notification confirm');
-		try {
-			await request.delete(`/admin/notification/delete/${dismissKey}`);
-			lookupAll();
-		} catch (err) {
-			console.log(err);
-			setError(`Error deleting notification: ${err.response.body.message}`);
-		};
-	};
-
-	const renderNotificationsList = ()=>{
-		if(error)
-			return <div className='error'>{error}</div>;
-
-		if(notifications.length === 0)
-			return <div className='noNotification'>No notifications available.</div>;
-
-		return (
-			<ul className='notificationList'>
-				{notifications.map((notification)=>(
-					<li key={notification.dismissKey} >
-						<details>
-							<summary>{notification.title || 'No Title'}</summary>
-							<NotificationDetail notification={notification} onDelete={deleteNotification} />
-						</details>
-					</li>
-				))}
-			</ul>
-		);
-	};
-
-	return (
-		<div className='notificationLookup'>
-			<h2>Check all Notifications</h2>
-			<button onClick={lookupAll}>
-				<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
-			</button>
-			{renderNotificationsList()}
-		</div>
-	);
-};
-
-module.exports = NotificationLookup;

client/admin/notificationUtils/notificationLookup/notificationLookup.less

@@ -1,35 +0,0 @@
-.notificationLookup {
-	width     : 450px;
-	height    : fit-content;
-
-	.noNotification { margin-block : 20px; }
-	.notificationList {
-		display        : flex;
-		flex-direction : column;
-		max-height     : 500px;
-		margin-block   : 20px;
-		overflow       : auto;
-		border         : 1px solid;
-		border-radius  : 5px;
-		
-		li {
-			padding    : 10px;
-			background : #CCCCCC;
-				
-			&:nth-child(even) { background : #DDDDDD; }
-			&:first-child {
-				border-top-left-radius  : 5px;
-				border-top-right-radius : 5px;
-			}
-			&:last-child {
-				border-bottom-right-radius : 5px;
-				border-bottom-left-radius  : 5px;
-			}
-				
-			summary {
-				font-size   : 20px;
-				font-weight : 900;
-			}
-		}
-	}
-}

client/admin/notificationUtils/notificationUtils.jsx

@@ -1,15 +0,0 @@
-const React = require('react');
-
-const NotificationLookup = require('./notificationLookup/notificationLookup.jsx');
-const NotificationAdd = require('./notificationAdd/notificationAdd.jsx');
-
-const NotificationUtils = ()=>{
-	return (
-		<section className='notificationUtils'>
-			<NotificationAdd />
-			<NotificationLookup />
-		</section>
-	);
-};
-
-module.exports = NotificationUtils;

client/components/Anchored.jsx

@@ -1,96 +0,0 @@
-import React, { useState, useRef, forwardRef, useEffect, cloneElement, Children } from 'react';
-import './Anchored.less';
-
-// Anchored is a wrapper component that must have as children an <AnchoredTrigger> and a <AnchoredBox> component.
-// AnchoredTrigger must have a unique `id` prop, which is passed up to Anchored, saved in state on mount, and
-// then passed down through props into AnchoredBox.  The `id` is used for the CSS Anchor Positioning properties.
-// **The Anchor Positioning API is not available in Firefox yet**
-// So in Firefox the positioning isn't perfect but is likely sufficient, and FF team seems to be working on the API quickly.
-
-// When Anchor Positioning is added to Firefox, this can also be rewritten using the Popover API-- add the `popover` attribute
-// to the container div, which will render the container in the *top level* and give it better interactions like
-// click outside to dismiss.  **Do not** add without Anchor, though, because positioning is very limited with the `popover`
-// attribute.
-
-
-const Anchored = ({ children })=>{
-	const [visible, setVisible] = useState(false);
-	const [anchorId, setAnchorId] = useState(null);
-	const boxRef = useRef(null);
-	const triggerRef = useRef(null);
-
-	// promote trigger id to Anchored id (to pass it back down to the box as "anchorId")
-	useEffect(()=>{
-		if(triggerRef.current){
-			setAnchorId(triggerRef.current.id);
-		}
-	}, []);
-
-	// close box on outside click or Escape key
-	useEffect(()=>{
-		const handleClickOutside = (evt)=>{
-			if(
-				boxRef.current &&
-				!boxRef.current.contains(evt.target) &&
-				triggerRef.current &&
-				!triggerRef.current.contains(evt.target)
-			) {
-				setVisible(false);
-			}
-		};
-
-		const handleEscapeKey = (evt)=>{
-			if(evt.key === 'Escape') setVisible(false);
-		};
-
-		window.addEventListener('click', handleClickOutside);
-		window.addEventListener('keydown', handleEscapeKey);
-
-		return ()=>{
-			window.removeEventListener('click', handleClickOutside);
-			window.removeEventListener('keydown', handleEscapeKey);
-		};
-	}, []);
-
-	const toggleVisibility = ()=>setVisible((prev)=>!prev);
-
-	// Map children to inject necessary props
-	const mappedChildren = Children.map(children, (child)=>{
-		if(child.type === AnchoredTrigger) {
-			return cloneElement(child, { ref: triggerRef, toggleVisibility, visible });
-		}
-		if(child.type === AnchoredBox) {
-			return cloneElement(child, { ref: boxRef, visible, anchorId });
-		}
-		return child;
-	});
-
-	return <>{mappedChildren}</>;
-};
-
-// forward ref for AnchoredTrigger
-const AnchoredTrigger = forwardRef(({ toggleVisibility, visible, children, className, ...props }, ref)=>(
-	<button
-		ref={ref}
-		className={`anchored-trigger${visible ? ' active' : ''} ${className}`}
-		onClick={toggleVisibility}
-		style={{ anchorName: `--${props.id}` }}   // setting anchor properties here allows greater recyclability.
-		{...props}
-	>
-		{children}
-	</button>
-));
-
-// forward ref for AnchoredBox
-const AnchoredBox = forwardRef(({ visible, children, className, anchorId, ...props }, ref)=>(
-	<div
-		ref={ref}
-		className={`anchored-box${visible ? ' active' : ''} ${className}`}
-		style={{ positionAnchor: `--${anchorId}` }}   // setting anchor properties here allows greater recyclability.
-		{...props}
-	>
-		{children}
-	</div>
-));
-
-export { Anchored, AnchoredTrigger, AnchoredBox };

client/components/Anchored.less

@@ -1,11 +0,0 @@
-
-
-.anchored-box {
-	position     : absolute;
-	visibility   : hidden;
-	justify-self : anchor-center;
-	@supports (inset-block-start: anchor(bottom)) {
-		inset-block-start : anchor(bottom);
-	}
-	&.active { visibility : visible; }
-}

client/components/combobox.jsx

@@ -1,129 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
-require('./combobox.less');
-
-const Combobox = createClass({
-	displayName     : 'Combobox',
-	getDefaultProps : function() {
-		return {
-			className   : '',
-			trigger     : 'hover',
-			default     : '',
-			placeholder : '',
-			autoSuggest : {
-				clearAutoSuggestOnClick : true,
-				suggestMethod           : 'includes',
-				filterOn                : []  // should allow as array to filter on multiple attributes, or even custom filter
-			},
-		};
-	},
-	getInitialState : function() {
-		return {
-			showDropdown : false,
-			value        : '',
-			options      : [...this.props.options],
-			inputFocused : false
-		};
-	},
-	componentDidMount : function() {
-		if(this.props.trigger == 'click')
-			document.addEventListener('click', this.handleClickOutside);
-		this.setState({
-			value : this.props.default
-		});
-	},
-	componentWillUnmount : function() {
-		if(this.props.trigger == 'click')
-			document.removeEventListener('click', this.handleClickOutside);
-	},
-	handleClickOutside : function(e){
-		// Close dropdown when clicked outside
-		if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) {
-			this.handleDropdown(false);
-		}
-	},
-	handleDropdown : function(show){
-		this.setState({
-			value        : show ? '' : this.props.default,
-			showDropdown : show,
-			inputFocused : this.props.autoSuggest.clearAutoSuggestOnClick ? show : false
-		});
-	},
-	handleInput : function(e){
-		e.persist();
-		this.setState({
-			value        : e.target.value,
-			inputFocused : false
-		}, ()=>{
-			this.props.onEntry(e);
-		});
-	},
-	handleSelect : function(value, data=value){
-		this.setState({
-			value : value
-		}, ()=>{this.props.onSelect(data);});
-		;
-	},
-	renderTextInput : function(){
-		return (
-			<div className='dropdown-input item'
-				onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
-				onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}>
-				<input
-					type='text'
-					onChange={(e)=>this.handleInput(e)}
-					value={this.state.value || ''}
-					placeholder={this.props.placeholder}
-					onBlur={(e)=>{
-						if(!e.target.checkValidity()){
-							this.setState({
-								value : this.props.default
-							});
-						}
-					}}
-				/>
-				<i className='fas fa-caret-down'/>
-			</div>
-		);
-	},
-	renderDropdown : function(dropdownChildren){
-		if(!this.state.showDropdown) return null;
-		if(this.props.autoSuggest && !this.state.inputFocused){
-			const suggestMethod = this.props.autoSuggest.suggestMethod;
-			const filterOn = _.isString(this.props.autoSuggest.filterOn) ? [this.props.autoSuggest.filterOn] : this.props.autoSuggest.filterOn;
-			const filteredArrays = filterOn.map((attr)=>{
-				const children = dropdownChildren.filter((item)=>{
-					if(suggestMethod === 'includes')
-						return item.props[attr]?.toLowerCase().includes(this.state.value.toLowerCase());
-					if(suggestMethod === 'startsWith')
-						return item.props[attr]?.toLowerCase().startsWith(this.state.value.toLowerCase());
-				});
-				return children;
-			});
-			dropdownChildren = _.uniq(filteredArrays.flat(1));
-		}
-
-		return (
-			<div className='dropdown-options'>
-				{dropdownChildren}
-			</div>
-		);
-	},
-	render : function () {
-		const dropdownChildren = this.state.options.map((child, i)=>{
-			const clone = React.cloneElement(child, { onClick: ()=>this.handleSelect(child.props.value, child.props.data) });
-			return clone;
-		});
-		return (
-			<div className={`dropdown-container ${this.props.className}`}
-				ref='dropdown'
-				onMouseLeave={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(false);} : undefined}>
-				{this.renderTextInput()}
-				{this.renderDropdown(dropdownChildren)}
-			</div>
-		);
-	}
-});
-
-module.exports = Combobox;

client/components/combobox.less

@@ -1,46 +0,0 @@
-.dropdown-container {
-	position : relative;
-	input { width : 100%; }
-	.item i {
-		position : absolute;
-		right    : 10px;
-		color    : black;
-	}
-	.dropdown-options {
-		position         : absolute;
-		z-index          : 100;
-		width            : 100%;
-		max-height       : 200px;
-		overflow-y       : auto;
-		background-color : white;
-		border           : 1px solid gray;
-
-		&::-webkit-scrollbar { width : 14px; }
-		&::-webkit-scrollbar-track { background : #FFFFFF; }
-		&::-webkit-scrollbar-thumb {
-			background-color : #949494;
-			border           : 3px solid #FFFFFF;
-			border-radius    : 10px;
-		}
-
-		.item {
-			position    : relative;
-			padding     : 5px;
-			margin      : 0 3px;
-			font-family : 'Open Sans';
-			font-size   : 11px;
-			cursor      : default;
-			&:hover {
-				background-color : rgb(163, 163, 163);
-				filter           : brightness(120%);
-			}
-			.detail {
-				width      : 100%;
-				font-size  : 9px;
-				font-style : italic;
-				color      : rgb(124, 124, 124);
-				text-align : left;
-			}
-		}
-	}
-}

client/components/dialog.jsx

@@ -1,32 +0,0 @@
-// Dialog box, for popups and modal blocking messages
-import React from 'react';
-const { useRef, useEffect } = React;
-
-function Dialog({ dismisskeys = [], closeText = 'Close', blocking = false, callbackFn = ()=>{}, ...rest }) {
-	const dialogRef = useRef(null);
-
-	useEffect(()=>{
-		blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
-	}, []);
-
-	const dismiss = ()=>{
-		dismisskeys.forEach((key)=>{
-			if(key) {
-				localStorage.setItem(key, 'true');
-			}
-		});
-		callbackFn();
-		dialogRef.current?.close();
-	};
-
-	return (
-		<dialog ref={dialogRef} onCancel={dismiss} {...rest}>
-			{rest.children}
-			<button className='dismiss' onClick={dismiss}>
-				{closeText}
-			</button>
-		</dialog>
-	);
-};
-
-export default Dialog;

client/components/newDocumentForm.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import './newDocumentForm.less';
-
-const sizes = [
-	// ISO A-series (converted from mm)
-	{ id: 'A3', width: 11.7, height: 16.5 }, // 297 × 420 mm
-	{ id: 'A4', width: 8.27, height: 11.69 }, // 210 × 297 mm
-	{ id: 'A5', width: 5.83, height: 8.27 }, // 148 × 210 mm
-	{ id: 'A6', width: 4.13, height: 5.83 }, // 105 × 148 mm
-
-	// US & common book trim sizes
-	{ id: 'US_Letter', width: 8.5, height: 11 },
-	{ id: 'Trade_Paperback', width: 6, height: 9 },
-	{ id: 'Digest', width: 5.5, height: 8.5 },
-	{ id: 'Pocket_Book', width: 4, height: 6 },
-	{ id: 'Square_8_5', width: 8.5, height: 8.5 },
-	{ id: 'Large_Square', width: 10, height: 10 },
-];
-const cmPerInch = 2.54;
-const pxPerInch = 96;
-
-const showAs = (val, unit)=>{
-	switch (unit) {
-	case 'cm':
-		return Math.round(val*cmPerInch);
-	case 'px':
-		return Math.round(val*pxPerInch);
-	default:
-		return val;
-	}
-};
-
-const unit = 'cm';
-
-export function NewDocumentForm() {
-	return (
-		<>
-			<nav className='popupTabs'>
-				<button>templates</button>
-				<button>import</button>
-				<button>clone</button>
-			</nav>
-			<div className='content'>
-				<div className='templates'>
-					{sizes.map((size)=>(
-						<div className='template' key={size.id} onClick={()=>{}}>
-							<div
-								className='image'
-								style={{ height: '100px', width: `${(size.width / size.height) * 100}px` }}>
-								<span>{showAs(size.width, unit)}{unit} by {showAs(size.height, unit)}{unit}</span>
-							</div>
-							<span>{size.id.replaceAll('_', ' ')}</span>
-						</div>
-					))}
-				</div>
-				<div className='metadataPanel'>
-					<div className='field title'>
-						<label>title</label>
-						<input type='text' defaultValue='' placeholder='title' className='title' onChange={(e)=>{}} />
-					</div>
-					<div className='field description'>
-						<label>description</label>
-						<textarea className='description'onChange={(e)=>{}} />
-					</div>
-					<button
-						id='newButton'
-						onClick={()=>{
-
-						}}
-					>
-					Create new
-						<i
-							className={'fa-solid fa-file'}
-						/>
-					</button>
-				</div>
-			</div>
-		</>
-	);
-}

client/components/newDocumentForm.less

@@ -1,98 +0,0 @@
-.newBrewPopup {
-	position: relative;
-	background: #282828;
-	border: unset;
-	display: grid;
-	grid-template-rows: 50px 1fr;
-	padding: 0;
-	color: #ddd;
-	border-radius: 10px;
-	box-shadow: 1px 0 14px black;
-
-	.popupTabs {
-		padding: 10px;
-		padding-right:100px;
-		padding-left:50px;
-		background: #333;
-		display: flex;
-		justify-content: space-evenly;
-	}
-
-	.content {
-		display: grid;
-		grid-template-columns: 1fr 200px;
-		height:100% !important;
-
-		.templates {
-			display: grid;
-			grid-template-columns: repeat(5, 1fr);
-			padding: 50px;
-			gap:30px;
-			box-shadow: inset 0 0 20px rgba(0,0,0,0.62);
-
-			.template {
-				width: 100px;
-				display: flex;
-				flex-direction: column;
-				text-align:center;
-				align-items: center;
-				gap:10px;
-
-				.image {
-					background-color:#444;
-					border:2px solid #777;
-					border-radius:2px;
-					display:grid;
-					place-items:center;
-					padding:10px;
-					font-size:12px;
-				}
-
-			}
-
-		}
-
-		.metadataPanel {
-			height:100%;
-			background-color: #555;
-			padding:25px;
-			
-			.field {
-				display:grid;
-				grid-template-columns:50px 1fr;
-			}
-
-			#newButton {
-					.colorButton(@green);
-					position : absolute;
-					right    : 10px;
-					bottom   : 10px;
-
-					i {
-						margin-left         : 10px;
-						animation-duration  : 1000s;
-					}
-			}
-		}
-	}
-	.dismiss {
-		position: absolute;
-		top: 0px;
-		right: 0px;
-		width:50px;
-		height:50px;
-		z-index:10;
-		display:grid;
-		place-items:center;
-	}
-	
-	input, textarea {
-		color:white;
-		background-color:#333;
-		border-radius:5px;
-		outline:1px solid #777;
-		border:unset;
-		box-shadow: inset 0 0 5px rgba(0,0,0,0.62);
-		width:100%;
-	}
-}

client/components/splitPane/splitPane.jsx

@@ -1,111 +0,0 @@
-require('./splitPane.less');
-const React = require('react');
-const { useState, useEffect } = React;
-
-const PANE_WIDTH_KEY = 'HB_editor_splitWidth';
-const LIVE_SCROLL_KEY = 'HB_editor_liveScroll';
-
-const SplitPane = (props)=>{
-	const {
-		onDragFinish = ()=>{},
-		showDividerButtons = true
-	} = props;
-
-	const [isDragging, setIsDragging] = useState(false);
-	const [dividerPos, setDividerPos] = useState(null);
-	const [moveSource, setMoveSource] = useState(false);
-	const [moveBrew, setMoveBrew] = useState(false);
-	const [showMoveArrows, setShowMoveArrows] = useState(true);
-	const [liveScroll, setLiveScroll] = useState(false);
-
-	useEffect(()=>{
-		const savedPos = window.localStorage.getItem(PANE_WIDTH_KEY);
-		setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
-		setLiveScroll(window.localStorage.getItem(LIVE_SCROLL_KEY) === 'true');
-
-		window.addEventListener('resize', handleResize);
-		return ()=>window.removeEventListener('resize', handleResize);
-	}, []);
-
-	const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
-
-	//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
-	const handleResize = ()=>setDividerPos(limitPosition(window.localStorage.getItem(PANE_WIDTH_KEY), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
-
-	const handleUp =(e)=>{
-		e.preventDefault();
-		if(isDragging) {
-			onDragFinish(dividerPos);
-			window.localStorage.setItem(PANE_WIDTH_KEY, dividerPos);
-		}
-		setIsDragging(false);
-	};
-
-	const handleDown = (e)=>{
-		e.preventDefault();
-		setIsDragging(true);
-	};
-
-	const handleMove = (e)=>{
-		if(!isDragging) return;
-		e.preventDefault();
-		setDividerPos(limitPosition(e.pageX));
-	};
-
-	const liveScrollToggle = ()=>{
-		window.localStorage.setItem(LIVE_SCROLL_KEY, String(!liveScroll));
-		setLiveScroll(!liveScroll);
-	};
-
-	const  renderMoveArrows = (showMoveArrows &&
-		<>
-			<div className='arrow left'
-				onClick={()=>setMoveSource(!moveSource)} >
-				<i className='fas fa-arrow-left' />
-			</div>
-			<div className='arrow right'
-				onClick={()=>setMoveBrew(!moveBrew)} >
-				<i className='fas fa-arrow-right' />
-			</div>
-			<div id='scrollToggleDiv' className={liveScroll ? 'arrow lock' : 'arrow unlock'}
-				onClick={liveScrollToggle} >
-				<i id='scrollToggle' className={liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} />
-			</div>
-		</>
-	);
-
-	const renderDivider = (
-		<div className={`divider ${isDragging && 'dragging'}`} onPointerDown={handleDown}>
-			{showDividerButtons && renderMoveArrows}
-			<div className='dots'>
-				<i className='fas fa-circle' />
-				<i className='fas fa-circle' />
-				<i className='fas fa-circle' />
-			</div>
-		</div>
-	);
-
-	return (
-		<div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}>
-			<Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>
-				{props.children[0]}
-			</Pane>
-			{renderDivider}
-			<Pane isDragging={isDragging}>{props.children[1]}</Pane>
-		</div>
-	);
-};
-
-const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, setMoveArrows })=>{
-	const styles = width
-		? { flex: 'none', width: `${width}px` }
-		: { pointerEvents: isDragging ? 'none' : 'auto' }; //Disable mouse capture in the right pane; else dragging into the iframe drops the divider
-
-	return (
-		<div className='pane' style={styles}>
-			{React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })}
-		</div>
-	);
-};
-
-module.exports = SplitPane;

client/components/splitPane/splitPane.less

@@ -1,68 +0,0 @@
-
-.splitPane {
-	position       : relative;
-	display        : flex;
-	flex-direction : row;
-	height         : 100%;
-	outline        : none;
-	.pane {
-		flex       : 1;
-		overflow-x : hidden;
-		overflow-y : hidden;
-	}
-	.divider {
-		position         : relative;
-		display          : table;
-		width            : 15px;
-		height           : 100%;
-		text-align       : center;
-		touch-action     : none;
-		cursor           : ew-resize;
-		background-color : #BBBBBB;
-		.dots {
-			display        : table-cell;
-			vertical-align : middle;
-			text-align     : center;
-			i {
-				display   : block !important;
-				margin    : 10px 0px;
-				font-size : 6px;
-				color     : #666666;
-			}
-		}
-		&:hover,&.dragging { background-color : #999999; }
-	}
-	.arrow {
-		position         : absolute;
-		left             : 50%;
-		z-index          : 999;
-		width            : 25px;
-		height           : 25px;
-		font-size        : 1.2em;
-		text-align       : center;
-		cursor           : pointer;
-		background-color : #DDDDDD;
-		border           : 2px solid #BBBBBB;
-		border-radius    : 15px;
-		box-shadow       : 0 4px 5px #0000007F;
-		translate        : -50%;
-		&.left {
-			.tooltipLeft('Jump to location in Editor');
-			top : 30px;
-		}
-		&.right {
-			.tooltipRight('Jump to location in Preview');
-			top : 60px;
-		}
-		&.lock {
-			.tooltipRight('De-sync Editor and Preview locations.');
-			top        : 90px;
-			background : #666666;
-		}
-		&.unlock {
-			.tooltipRight('Sync Editor and Preview locations');
-			top : 90px;
-		}
-		&:hover { background-color : #666666; }
-	}
-}

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,348 +1,93 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./brewRenderer.less');
-const React = require('react');
-const { useState, useRef, useMemo, useEffect } = React;
-const _ = require('lodash');
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
 
-const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
-import Markdown from 'naturalcrit/markdown.js';
-const ErrorBar = require('./errorBar/errorBar.jsx');
-const ToolBar  = require('./toolBar/toolBar.jsx');
+var Markdown = require('marked');
 
-//TODO: move to the brew renderer
-const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
-const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
-const Frame = require('react-frame-component').default;
-const dedent = require('dedent-tabs').default;
-const { printCurrentBrew } = require('../../../shared/helpers.js');
+var PAGE_HEIGHT = 1056 + 30;
 
-import HeaderNav from './headerNav/headerNav.jsx';
-import { safeHTML } from './safeHTML.js';
-
-const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
-const PAGEBREAK_REGEX_LEGACY = /\\page(?:break)?/m;
-const COLUMNBREAK_REGEX_LEGACY = /\\column(:?break)?/m;
-const PAGE_HEIGHT = 1056;
-
-const TOOLBAR_STATE_KEY = 'HB_renderer_toolbarState';
-
-const INITIAL_CONTENT = dedent`
-	<!DOCTYPE html><html><head>
-	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-	<link href='/homebrew/bundle.css' type="text/css" rel='stylesheet' />
-	<base target=_blank>
-	</head><body style='overflow: hidden'><div></div></body></html>`;
-
-
-//v=====----------------------< Brew Page Component >---------------------=====v//
-const BrewPage = (props)=>{
-	props = {
-		contents : '',
-		index    : 0,
-		...props
-	};
-	const pageRef   = useRef(null);
-	const cleanText = safeHTML(props.contents);
-
-	useEffect(()=>{
-		if(!pageRef.current) return;
-
-		// Observer for tracking pages within the `.pages` div
-		const visibleObserver = new IntersectionObserver(
-			(entries)=>{
-				entries.forEach((entry)=>{
-					if(entry.isIntersecting)
-						props.onVisibilityChange(props.index + 1, true, false); // add page to array of visible pages.
-					else
-						props.onVisibilityChange(props.index + 1, false, false);
-				});
-			},
-			{ threshold: .3, rootMargin: '0px 0px 0px 0px'  } // detect when >30% of page is within bounds.
-		);
-
-		// Observer for tracking the page at the center of the iframe.
-		const centerObserver = new IntersectionObserver(
-			(entries)=>{
-				entries.forEach((entry)=>{
-					if(entry.isIntersecting)
-						props.onVisibilityChange(props.index + 1, true, true); // Set this page as the center page
-				});
-			},
-			{ threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center
-		);
-
-		// attach observers to each `.page`
-		visibleObserver.observe(pageRef.current);
-		centerObserver.observe(pageRef.current);
-		return ()=>{
-			visibleObserver.disconnect();
-			centerObserver.disconnect();
+var BrewRenderer = React.createClass({
+	getDefaultProps: function() {
+		return {
+			text : ''
 		};
-	}, []);
+	},
+	getInitialState: function() {
+		return {
+			viewablePageNumber: 0,
+			height : 0
+		};
+	},
+	totalPages : 0,
+	height : 0,
 
-	return <div className={props.className} id={`p${props.index + 1}`} data-index={props.index} ref={pageRef} style={props.style} {...props.attributes}>
-	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
-	       </div>;
-};
-
-
-//v=====--------------------< Brew Renderer Component >-------------------=====v//
-let renderedPages = [];
-let rawPages      = [];
-
-const BrewRenderer = (props)=>{
-	props = {
-		text                       : '',
-		style                      : '',
-		renderer                   : 'legacy',
-		theme                      : '5ePHB',
-		lang                       : '',
-		errors                     : [],
-		currentEditorCursorPageNum : 1,
-		currentEditorViewPageNum   : 1,
-		currentBrewRendererPageNum : 1,
-		themeBundle                : {},
-		onPageChange               : ()=>{},
-		...props
-	};
-
-	const [state, setState] = useState({
-		isMounted    : false,
-		visibility   : 'hidden',
-		visiblePages : [],
-		centerPage   : 1
-	});
-
-	const [displayOptions, setDisplayOptions] = useState({
-		zoomLevel    : 100,
-		spread       : 'single',
-		startOnRight : true,
-		pageShadows  : true,
-		rowGap       : 5,
-		columnGap    : 10,
-	});
-
-	//useEffect to store or gather toolbar state from storage
-	useEffect(()=>{
-		const toolbarState = JSON.parse(window.localStorage.getItem(TOOLBAR_STATE_KEY));
-		toolbarState &&	setDisplayOptions(toolbarState);
-	}, []);
-
-	const [headerState, setHeaderState] = useState(false);
-
-	const mainRef  = useRef(null);
-	const pagesRef = useRef(null);
-
-	if(props.renderer == 'legacy') {
-		rawPages = props.text.split(PAGEBREAK_REGEX_LEGACY);
-	} else {
-		rawPages = props.text.split(PAGEBREAK_REGEX_V3);
-	}
-
-	const handlePageVisibilityChange = (pageNum, isVisible, isCenter)=>{
-		setState((prevState)=>{
-			const updatedVisiblePages = new Set(prevState.visiblePages);
-			if(!isCenter)
-				isVisible ? updatedVisiblePages.add(pageNum) : updatedVisiblePages.delete(pageNum);
-
-			return {
-				...prevState,
-				visiblePages : [...updatedVisiblePages].sort((a, b)=>a - b),
-				centerPage   : isCenter ? pageNum : prevState.centerPage
-			};
+	componentDidMount: function() {
+		this.setState({
+			height : this.refs.main.parentNode.clientHeight
 		});
+	},
+	handleScroll : function(e){
+		this.setState({
+			viewablePageNumber : Math.floor(e.target.scrollTop / PAGE_HEIGHT)
+		});
+	},
+	//Implement later
+	scrollToPage : function(pageNumber){
+	},
 
-		if(isCenter)
-			props.onPageChange(pageNum);
-	};
+	shouldRender : function(pageText, index){
+		var viewIndex = this.state.viewablePageNumber;
+		if(index == viewIndex - 1) return true;
+		if(index == viewIndex)     return true;
+		if(index == viewIndex + 1) return true;
 
-	const isInView = (index)=>{
-		if(!state.isMounted)
-			return false;
-
-		if(index == props.currentEditorCursorPageNum - 1)	//Already rendered before this step
-			return false;
-
-		if(Math.abs(index - props.currentBrewRendererPageNum - 1) <= 3)
-			return true;
+		//Check for style tages
+		if(pageText.indexOf('<style>') !== -1) return true;
 
 		return false;
-	};
+	},
 
-	const renderDummyPage = (index)=>{
-		return <div className='phb page' id={`p${index + 1}`} key={index}>
-			<i className='fas fa-spinner fa-spin' />
-		</div>;
-	};
+	renderPageInfo : function(){
+		return <div className='pageInfo'>
+			{this.state.viewablePageNumber + 1} / {this.totalPages}
+		</div>
+	},
 
-	const renderStyle = ()=>{
-		const themeStyles = props.themeBundle?.joinedStyles ?? '<style>@import url("/themes/V3/Blank/style.css");</style>';
-		const cleanStyle = safeHTML(`${themeStyles} \n\n <style> ${props.style} </style>`);
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: cleanStyle }} />;
-	};
+	renderDummyPage : function(key){
+		return <div className='phb' key={key}>
+			<i className='fa fa-spinner fa-spin' />
+		</div>
+	},
 
-	const renderPage = (pageText, index)=>{
+	renderPage : function(pageText, index){
+		return <div className='phb' dangerouslySetInnerHTML={{__html:Markdown(pageText)}} key={index} />
+	},
 
-		let styles = {
-			...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
-			// Add more conditions as needed
-		};
-		let classes    = 'page';
-		let attributes = {};
+	renderPages : function(){
+		var pages = this.props.text.split('\\page');
+		this.totalPages = pages.length;
 
-		if(props.renderer == 'legacy') {
-			pageText.replace(COLUMNBREAK_REGEX_LEGACY, '```\n````\n'); // Allow Legacy brews to use `\column(break)`
-			const html = MarkdownLegacy.render(pageText);
-
-			return <BrewPage className='page phb' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} />;
-		} else {
-			if(pageText.startsWith('\\page')) {
-				const firstLineTokens  = Markdown.marked.lexer(pageText.split('\n', 1)[0])[0].tokens;
-				const injectedTags = firstLineTokens?.find((obj)=>obj.injectedTags !== undefined)?.injectedTags;
-				if(injectedTags) {
-					styles     = { ...styles, ...injectedTags.styles };
-					styles     = _.mapKeys(styles, (v, k)=>k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React
-					classes    = [classes, injectedTags.classes].join(' ').trim();
-					attributes = injectedTags.attributes;
-				}
-				pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line
-			}
-
-			// DO NOT REMOVE!!! REQUIRED FOR BACKWARDS COMPATIBILITY WITH NON-UPGRADABLE VERSIONS OF CHROME.
-			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
-
-			const html = Markdown.render(pageText, index);
-
-			return <BrewPage className={classes} index={index} key={index} contents={html} style={styles} attributes={attributes} onVisibilityChange={handlePageVisibilityChange} />;
-		}
-	};
-
-	const renderPages = ()=>{
-		if(props.errors && props.errors.length)
-			return renderedPages;
-
-		if(rawPages.length != renderedPages.length) // Re-render all pages when page count changes
-			renderedPages.length = 0;
-
-		// Render currently-edited page first so cross-page effects (variables, links) can propagate out first
-		if(rawPages.length > props.currentEditorCursorPageNum -1)
-			renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1);
-
-		_.forEach(rawPages, (page, index)=>{
-			if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){
-				renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range
+		return _.map(pages, (page, index)=>{
+			if(this.shouldRender(page, index)){
+				return this.renderPage(page, index);
+			}else{
+				return this.renderDummyPage(index);
 			}
 		});
-		return renderedPages;
-	};
+	},
 
-	const handleControlKeys = (e)=>{
-		if(!(e.ctrlKey || e.metaKey)) return;
-		const P_KEY = 80;
-		if(e.keyCode == P_KEY && props.allowPrint) printCurrentBrew();
-		if(e.keyCode == P_KEY) {
-			e.stopPropagation();
-			e.preventDefault();
-		}
-	};
+	render : function(){
+		return <div className='brewRenderer'
+			onScroll={this.handleScroll}
+			ref='main'
+			style={{height : this.state.height}}>
 
-	const scrollToHash = (hash)=>{
-		if(!hash) return;
-
-		const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
-		let anchor = iframeDoc.querySelector(hash);
-
-		if(anchor) {
-			anchor.scrollIntoView({ behavior: 'smooth' });
-		} else {
-			// Use MutationObserver to wait for the element if it's not immediately available
-			new MutationObserver((mutations, obs)=>{
-				anchor = iframeDoc.querySelector(hash);
-				if(anchor) {
-					anchor.scrollIntoView({ behavior: 'smooth' });
-					obs.disconnect();
-				}
-			}).observe(iframeDoc, { childList: true, subtree: true });
-		}
-	};
-
-	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
-		scrollToHash(window.location.hash);
-
-		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
-			renderPages(); //Make sure page is renderable before showing
-			setState((prevState)=>({
-				...prevState,
-				isMounted  : true,
-				visibility : 'visible'
-			}));
-		}, 100);
-	};
-
-	const emitClick = ()=>{ // Allow clicks inside iFrame to interact with dropdowns, etc. from outside
-		if(!window || !document) return;
-		document.dispatchEvent(new MouseEvent('click'));
-	};
-
-	const handleDisplayOptionsChange = (newDisplayOptions)=>{
-		setDisplayOptions(newDisplayOptions);
-		localStorage.setItem(TOOLBAR_STATE_KEY, JSON.stringify(newDisplayOptions));
-	};
-
-	const pagesStyle = {
-		zoom      : `${displayOptions.zoomLevel}%`,
-		columnGap : `${displayOptions.columnGap}px`,
-		rowGap    : `${displayOptions.rowGap}px`
-	};
-
-	const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
-	renderedPages = useMemo(()=>renderPages(), [props.text, displayOptions]);
-
-	return (
-		<>
-			{/*render dummy page while iFrame is mounting.*/}
-			{!state.isMounted
-				? <div className='brewRenderer'>
-					<div className='pages'>
-						{renderDummyPage(1)}
-					</div>
-				</div>
-				: null}
-
-			<ErrorBar errors={props.errors} />
-			<div className='popups' ref={mainRef}>
-				<RenderWarnings />
-				<NotificationPopup />
+			<div className='pages'>
+				{this.renderPages()}
 			</div>
-
-			<ToolBar displayOptions={displayOptions} onDisplayOptionsChange={handleDisplayOptionsChange} visiblePages={state.visiblePages.length > 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length} headerState={headerState} setHeaderState={setHeaderState}/>
-
-			{/*render in iFrame so broken code doesn't crash the site.*/}
-			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
-				style={{ width: '100%', height: '100%', visibility: state.visibility }}
-				contentDidMount={frameDidMount}
-				onClick={()=>{emitClick();}}
-			>
-				<div className='brewRenderer'
-					onKeyDown={handleControlKeys}
-					tabIndex={-1}
-				>
-
-					{/* Apply CSS from Style tab and render pages from Markdown tab */}
-					{state.isMounted
-						&&
-						<>
-							{renderedStyle}
-							<div className={`pages ${displayOptions.startOnRight ? 'recto' : 'verso'}	${displayOptions.spread}`} lang={`${props.lang || 'en'}`} style={pagesStyle} ref={pagesRef}>
-								{renderedPages}
-							</div>
-						</>
-					}
-				</div>
-				{headerState ? <HeaderNav ref={pagesRef} /> : <></>}
-			</Frame>
-		</>
-	);
-};
+			{this.renderPageInfo()}
+		</div>
+	}
+});
 
 module.exports = BrewRenderer;

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,84 +1,28 @@
-@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
-
-.brewRenderer {
-	height        : 100vh;
-	padding-top   : 60px;
-	overflow-y    : scroll;
-	will-change   : transform;
-	&:has(.facing, .flow) { padding : 60px 30px; }
-	:where(.pages) {
-		&.facing {
-			display               : grid; 
-			grid-template-rows    : repeat(3, auto); 
-			grid-template-columns : repeat(2, auto); 
-			gap                   : 10px 10px; 
-			justify-content       : safe center;
-			&.recto .page:first-child {
-				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
-				// todo: add a checkbox to toggle this setting
-				grid-column-start : 2; 
-			}
-			& :where(.page) {
-				margin-right : unset !important;
-				margin-left  : unset !important;
-			}
-		}
-
-		&.flow {
-			display         : flex;
-			flex-wrap       : wrap;
-			gap             : 10px;
-			justify-content : safe center;
-			& :where(.page) {
-				flex         : 0 0 auto;
-				margin-right : unset !important;
-				margin-left  : unset !important;
-			}
-
-		}
-
-		& > :where(.page) {
-			width         : 215.9mm;
-			height        : 279.4mm;
-			margin-right  : auto;
-			margin-bottom : 30px;
-			margin-left   : auto;
-			box-shadow    : 1px 4px 14px #000000;
-		}
-		*[id] { scroll-margin-top : 100px; }
-	}
-	&::-webkit-scrollbar {
-		width : 20px;
-		&:horizontal {
-			width  : auto;
-			height : 20px;
-		}
-		&-thumb {
-			background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
-			&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
-		}
-		&-corner { visibility : hidden; }
-	}
-}
-
-.pane { position : relative; }
-
-
-@media print {
-	.toolBar { display : none; }
-	.brewRenderer {
-		height     : 100%;
-		padding    : unset;
-		overflow-y : unset;
-		&:has(.facing, .flow) {
-			padding : unset;
-		}
-		.pages {
-			margin  : 0px;
-			zoom    : 100% !important;
-			display : block;
-			& > .page { box-shadow : unset; }
-		}
-	}
-	.headerNav { visibility : hidden; }
+
+@import (less) './client/homebrew/phbStyle/phb.style.less';
+.pane{
+	position : relative;
+}
+.brewRenderer{
+	overflow-y : scroll;
+	.pageInfo{
+		position         : absolute;
+		right            : 17px;
+		bottom           : 0;
+		z-index          : 1000;
+		padding          : 8px 10px;
+		background-color : #333;
+		font-size        : 10px;
+		font-weight      : 800;
+		color            : white;
+	}
+	.pages{
+		margin : 30px 0px;
+		&>.phb{
+			margin-right  : auto;
+			margin-bottom : 30px;
+			margin-left   : auto;
+			box-shadow    : 1px 4px 14px #000;
+		}
+	}
 }

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -1,53 +0,0 @@
-require('./errorBar.less');
-const React = require('react');
-
-import Dialog from '../../../components/dialog.jsx';
-
-const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
-
-const ErrorBar = (props)=>{
-	if(!props.errors.length) return null;
-	let hasOpenError = false, hasCloseError = false, hasMatchError = false;
-
-	props.errors.map((err)=>{
-		if(err.id === 'OPEN')     hasOpenError  = true;
-		if(err.id === 'CLOSE')    hasCloseError = true;
-		if(err.id === 'MISMATCH') hasMatchError = true;
-	});
-
-	const renderErrors = ()=>(
-		<ul>
-			{props.errors.map((err, idx)=>{
-				return <li key={idx}>
-					Line {err.line} : {err.text}, '{err.type}' tag
-				</li>;
-			})}
-		</ul>
-	);
-
-	const renderProtip = ()=>(
-		<div className='protips'>
-			<h4>Protips!</h4>
-			{hasOpenError  && <div>Unmatched opening tag. Close your tags, like this {'</div>'}. Match types!</div>}
-			{hasCloseError && <div>Unmatched closing tag. Either remove it or check where it was opened.</div>}
-			{hasMatchError && <div>Type mismatch. Closed a tag with a different type.</div>}
-		</div>
-	);
-
-	return (
-		<Dialog className='errorBar' closeText={DISMISS_BUTTON} >
-			<div>
-				<i className='fas fa-exclamation-triangle' />
-				<h2> There are HTML errors in your markup</h2>
-				<small>
-					If these aren't fixed your brew will not render properly when you print it to PDF or share it
-				</small>
-				{renderErrors()}
-			</div>
-			<hr />
-			{renderProtip()}
-		</Dialog>
-	);
-};
-
-module.exports = ErrorBar;

client/homebrew/brewRenderer/errorBar/errorBar.less

@@ -1,58 +0,0 @@
-
-.errorBar {
-	position         : absolute;
-	top              : 32px;
-	z-index          : 1;
-	width            : 100%;
-	color            : white;
-	background-color : @red;
-	border           : unset;
-
-	div {
-		> i {
-			float         : left;
-			margin-right  : 10px;
-			margin-bottom : 20px;
-			font-size     : 3em;
-			opacity       : 0.8;
-		}
-		h2 { font-weight : 800; }
-		ul {
-			margin-top          : 15px;
-			font-size           : 0.8em;
-			list-style-position : inside;
-			list-style-type     : disc;
-			li { line-height : 1.6em; }
-		}
-	}
-	hr {
-		height           : 2px;
-		margin-top       : 25px;
-		margin-bottom    : 15px;
-		background-color : darken(@red, 8%);
-		border           : none;
-	}
-	small {
-		font-size : 0.6em;
-		opacity   : 0.7;
-	}
-	.protips {
-		font-size     : 0.6em;
-		line-height   : 1.2em;
-		h4 {
-			font-weight    : 800;
-			line-height    : 1.5em;
-			text-transform : uppercase;
-		}
-	}
-	button.dismiss {
-		position         : absolute;
-		top              : 20px;
-		right            : 30px;
-		padding          : unset;
-		font-size        : 40px;
-		background-color : transparent;
-		opacity          : 0.6;
-		&:hover { opacity : 1; }
-	}
-}

client/homebrew/brewRenderer/headerNav/headerNav.jsx

@@ -1,113 +0,0 @@
-require('./headerNav.less');
-
-import * as React from 'react';
-import * as _ from 'lodash';
-
-const MAX_TEXT_LENGTH = 40;
-
-const HeaderNav = React.forwardRef(({}, pagesRef)=>{
-
-	const renderHeaderLinks = ()=>{
-		if(!pagesRef.current) return;
-
-		// Top Level Pages
-		// Pages that contain an element with a specified class (e.g. cover pages, table of contents)
-		// will NOT have its content scanned for navigation headers, instead displaying a custom label
-		// ---
-		// The property name is class that will be used for detecting the page is a top level page
-		// The property value is a function that returns the text to be used
-
-		const topLevelPages = {
-			'.frontCover'  : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Cover: ${text}` : 'Cover Page'; },
-			'.insideCover' : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Interior: ${text}` : 'Interior Cover Page'; },
-			'.partCover'   : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Section: ${text}` : 'Section Cover Page'; },
-			'.backCover'   : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Back: ${text}` : 'Rear Cover Page'; },
-			'.toc'         : ()=>{ return 'Table of Contents'; },
-		};
-
-		const getHeaderContent = (el)=>el.querySelector('h1')?.textContent;
-
-		const topLevelPageSelector = Object.keys(topLevelPages).join(',');
-
-		const selector = [
-			'.pages > .page',                                                   // All page elements, which by definition have IDs
-			`.page:not(:has(${topLevelPageSelector})) > [id]`,                  // All direct children of non-excluded .pages with an ID (Legacy)
-			`.page:not(:has(${topLevelPageSelector})) > .columnWrapper > [id]`, // All direct children of non-excluded .page > .columnWrapper with an ID (V3)
-			`.page:not(:has(${topLevelPageSelector})) h2`,                      // All non-excluded H2 titles, like Monster frame titles
-		];
-		const elements = pagesRef.current.querySelectorAll(selector.join(','));
-		if(!elements) return;
-		const navList = [];
-
-		// navList is a list of objects which have the following structure:
-		// {
-		// 	depth     : how deeply indented the item should be
-		// 	text      : the text to display in the nav link
-		// 	link      : the hyperlink to navigate to when clicked
-		// 	className : [optional] the class to apply to the nav link for styling
-		// }
-
-		elements.forEach((el)=>{
-			const navEntry = {        // Default structure of a navList entry
-				depth : 7,              // All unmatched elements with IDs are set to the maximum depth (7)
-				text  : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
-				link  : el.id
-			};
-			if(el.classList.contains('page')) {
-				let text = `Page ${el.id.slice(1)}`; // Get the page # by trimming off the 'p' from the ID
-				const pageType = Object.keys(topLevelPages).find((pageType)=>el.querySelector(pageType));
-				if(pageType)
-					text += ` - ${topLevelPages[pageType](el, pageType)}`; // If a Top Level Page, add extra label
-
-				navEntry.depth     = 0; // Pages are always at the least indented level
-				navEntry.text      = text;
-				navEntry.className = 'pageLink';
-			} else if(el.localName.match(/^h[1-6]/)){  // Header elements H1 through H6
-				navEntry.depth = el.localName[1];      // Depth is set by the header level
-			}
-			navList.push(navEntry);
-		});
-
-		return _.map(navList, (navItem, index)=><HeaderNavItem {...navItem} key={index} />
-		);
-	};
-
-	return <nav className='headerNav'>
-		<ul>
-			{renderHeaderLinks()}
-		</ul>
-	</nav>;
-});
-
-const HeaderNavItem = ({ link, text, depth, className })=>{
-
-	const trimString = (text, prefixLength = 0)=>{
-		// Sanity check nav link strings
-		let output = text;
-
-		// If the string has a line break, only use the first line
-		if(text.indexOf('\n')){
-			output = text.split('\n')[0];
-		}
-
-		// Trim unecessary spaces from string
-		output = output.trim();
-
-		// Reduce excessively long strings
-		const maxLength = MAX_TEXT_LENGTH - prefixLength;
-		if(output.length > maxLength){
-			return `${output.slice(0, maxLength).trim()}...`;
-		}
-		return output;
-	};
-
-	if(!link || !text) return;
-
-	return <li>
-		<a href={`#${link}`} target='_self' className={`depth-${depth} ${className ?? ''}`}>
-			{trimString(text, depth)}
-		</a>
-	</li>;
-};
-
-export default HeaderNav;

client/homebrew/brewRenderer/headerNav/headerNav.less

@@ -1,39 +0,0 @@
-.headerNav {
-	position         : fixed;
-	top              : 32px;
-	left             : 0px;
-	max-width        : 40vw;
-	max-height       : calc(100vh - 32px);
-	padding          : 5px 10px;
-	overflow-y       : auto;
-	background-color : #CCCCCC;
-	border-radius    : 5px;
-	&.active {
-		padding-bottom : 10px;
-		.navIcon { padding-bottom : 10px; }
-	}
-	.navIcon { cursor : pointer; }
-	li {
-		list-style-type : none;
-		a {
-			display         : inline-block;
-			width           : 100%;
-			padding         : 2px;
-			font-family     : 'Open Sans';
-			font-size       : 12px;
-			color           : inherit;
-			text-decoration : none;
-			cursor          : pointer;
-			&:hover { text-decoration : underline; }
-			&.pageLink { font-weight : 900; }
-
-			@depths: 0,1,2,3,4,5,6,7;
-
-			each(@depths, {
-				&.depth-@{value} {
-					padding-left: ((@value) * 0.5em);
-				}
-			});
-		}
-	}
-}

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,65 +0,0 @@
-require('./notificationPopup.less');
-import React, { useEffect, useState } from 'react';
-import request from '../../utils/request-middleware.js';
-import Markdown from 'naturalcrit/markdown.js';
-
-import Dialog from '../../../components/dialog.jsx';
-
-const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
-
-const NotificationPopup = ()=>{
-	const [notifications, setNotifications] = useState([]);
-	const [dissmissKeyList, setDismissKeyList] = useState([]);
-	const [error, setError] = useState(null);
-
-	useEffect(()=>{
-		getNotifications();
-	}, []);
-
-	const getNotifications = async ()=>{
-		setError(null);
-		try {
-			const res = await request.get('/admin/notification/all');
-			pickActiveNotifications(res.body || []);
-		} catch (err) {
-			console.log(err);
-			setError(`Error looking up notifications: ${err?.response?.body?.message || err.message}`);
-		}
-	};
-
-	const pickActiveNotifications = (notifs)=>{
-		const now = new Date();
-		const filteredNotifications = notifs.filter((notification)=>{
-			const startDate = new Date(notification.startAt);
-			const stopDate = new Date(notification.stopAt);
-			const dismissed = localStorage.getItem(notification.dismissKey) ? true : false;
-			return now >= startDate && now <= stopDate && !dismissed;
-		});
-		setNotifications(filteredNotifications);
-		setDismissKeyList(filteredNotifications.map((notif)=>notif.dismissKey));
-	};
-
-	const renderNotificationsList = ()=>{
-		if(error) return <div className='error'>{error}</div>;
-		return notifications.map((notification)=>(
-			<li key={notification.dismissKey} >
-				<em>{notification.title}</em><br />
-				<p dangerouslySetInnerHTML={{ __html: Markdown.render(notification.text) }}></p>
-			</li>
-		));
-	};
-
-	if(!notifications.length) return;
-	return <Dialog className='notificationPopup' dismisskeys={dissmissKeyList} closeText={DISMISS_BUTTON} >
-		<div className='header'>
-			<i className='fas fa-info-circle info'></i>
-			<h3>Notice</h3>
-			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
-		</div>
-		<ul>
-			{renderNotificationsList()}
-		</ul>
-	</Dialog>;
-};
-
-module.exports = NotificationPopup;

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -1,93 +0,0 @@
-.popups {
-	position         : fixed;
-	top              : calc(@navbarHeight + @viewerToolsHeight);
-	right            : 24px;
-	z-index          : 10001;
-	width            : 450px;
-	margin-top       : 5px;
-}
-
-.notificationPopup {
-	position         : relative;
-	width            : 100%;
-	padding          : 15px;
-	padding-bottom   : 10px;
-	padding-left     : 25px;
-	color            : white;
-	background-color : @blue;
-	border           : none;
-	&[open] { display : inline-block; }
-	a {
-		font-weight : 800;
-		color       : #E0E5C1;
-	}
-	i.info {
-		position  : absolute;
-		top       : 12px;
-		left      : 12px;
-		font-size : 2.5em;
-		opacity   : 0.8;
-	}
-	button.dismiss {
-		position         : absolute;
-		top              : 10px;
-		right            : 10px;
-		cursor           : pointer;
-		background-color : transparent;
-		opacity          : 0.6;
-		&:hover { opacity : 1; }
-	}
-	.header { padding-left : 50px; }
-	small {
-		font-size : 0.6em;
-		opacity   : 0.7;
-	}
-	h3 {
-		font-size   : 1.1em;
-		font-weight : 800;
-	}
-	ul {
-		margin-top          : 15px;
-		font-size           : 0.9em;
-		list-style-position : outside;
-		list-style-type     : disc;
-		li {
-			padding-left : 1em;
-			margin-top   : 1.5em;
-			font-size    : 0.9em;
-			line-height  : 1.5em;
-			em {
-				font-weight    : 800; 
-				text-transform : capitalize;
-			}
-			li {
-				margin-top      : 0;
-				line-height     : 1.2em; 
-				list-style-type : square;
-			}
-		}
-		ul ul,ol ol,ul ol,ol ul {
-			margin-bottom : 0px;
-			margin-left   : 1.5em;
-		}
-	}
-
-	/* Markdown styling */
-	code {
-		padding          : 0.1em 0.5em;
-		font-family      : 'Courier New', 'Courier', monospace;
-		overflow-wrap    : break-word;
-		white-space      : pre-wrap;
-		background       : #08115A;
-		border-radius    : 2px;
-	}
-	pre code {
-		display          : inline-block;
-		width            : 100%;
-	}
-	.blank {
-		height     : 1em;
-		margin-top : 0;
-		& + * { margin-top : 0; }
-	}
-}

client/homebrew/brewRenderer/safeHTML.js

@@ -1,46 +0,0 @@
-// Derived from the vue-html-secure package, customized for Homebrewery
-
-let doc = null;
-let div = null;
-
-function safeHTML(htmlString) {
-	// If the Document interface doesn't exist, exit
-	if(typeof document == 'undefined') return null;
-	// If the test document and div don't exist, create them
-	if(!doc) doc = document.implementation.createHTMLDocument('');
-	if(!div) div = doc.createElement('div');
-
-	// Set the test div contents to the evaluation string
-	div.innerHTML = htmlString;
-	// Grab all nodes from the test div
-	const elements = div.querySelectorAll('*');
-
-	// Blacklisted tags
-	const blacklistTags = ['script', 'noscript', 'noembed'];
-	// Tests to remove attributes
-	const blacklistAttrs = [
-		(test)=>{return test.localName.indexOf('on') == 0;},
-		(test)=>{return test.localName.indexOf('type') == 0 && test.value.match(/submit/i);},
-		(test)=>{return test.value.replace(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205f\u3000]/g, '').toLowerCase().trim().indexOf('javascript:') == 0;}
-	];
-
-
-	elements.forEach((element)=>{
-		// Check each element for blacklisted type
-		if(blacklistTags.includes(element?.localName?.toLowerCase())) {
-			element.remove();
-			return;
-		}
-		// Check remaining elements for blacklisted attributes
-		for (const attribute of element.attributes){
-			if(blacklistAttrs.some((test)=>{return test(attribute);})) {
-				element.removeAttribute(attribute.localName);
-				break;
-			};
-		};
-	});
-
-	return div.innerHTML;
-};
-
-module.exports.safeHTML = safeHTML;

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -1,262 +0,0 @@
-/* eslint-disable max-lines */
-require('./toolBar.less');
-const React = require('react');
-const { useState, useEffect } = React;
-const _ = require('lodash');
-
-import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
-
-const MAX_ZOOM = 300;
-const MIN_ZOOM = 10;
-
-const TOOLBAR_VISIBILITY = 'HB_renderer_toolbarVisibility';
-
-const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages, headerState, setHeaderState })=>{
-
-	const [pageNum, setPageNum]     = useState(1);
-	const [toolsVisible, setToolsVisible] = useState(true);
-
-	useEffect(()=>{
-		// format multiple visible pages as a range (e.g. "150-153")
-		const pageRange = visiblePages.length === 1 ? `${visiblePages[0]}` : `${visiblePages[0]} - ${visiblePages.at(-1)}`;
-		setPageNum(pageRange);
-	}, [visiblePages]);
-
-	useEffect(()=>{
-		const Visibility = localStorage.getItem(TOOLBAR_VISIBILITY);
-		if(Visibility) setToolsVisible(Visibility === 'true');
-
-	}, []);
-
-	const handleZoomButton = (zoom)=>{
-		handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
-	};
-
-	const handleOptionChange = (optionKey, newValue)=>{
-		onDisplayOptionsChange({ ...displayOptions, [optionKey]: newValue });
-	};
-
-	const handlePageInput = (pageInput)=>{
-		if(/[0-9]/.test(pageInput))
-			setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
-	};
-
-	// scroll to a page, used in the Prev/Next Page buttons.
-	const scrollToPage = (pageNumber)=>{
-		if(typeof pageNumber !== 'number') return;
-		pageNumber = _.clamp(pageNumber, 1, totalPages);
-		const iframe = document.getElementById('BrewRenderer');
-		const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
-		const page = brewRenderer?.querySelector(`#p${pageNumber}`);
-		page?.scrollIntoView({ block: 'start' });
-	};
-
-	const calculateChange = (mode)=>{
-		const iframe = document.getElementById('BrewRenderer');
-		const iframeWidth = iframe.getBoundingClientRect().width;
-		const iframeHeight = iframe.getBoundingClientRect().height;
-		const pages = iframe.contentWindow.document.getElementsByClassName('page');
-
-		let desiredZoom = 0;
-
-		if(mode == 'fill'){
-			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
-			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
-
-			if(displayOptions.spread === 'facing')
-				desiredZoom = (iframeWidth / ((widestPage * 2) + parseInt(displayOptions.columnGap))) * 100;
-			else
-				desiredZoom = (iframeWidth / (widestPage + 20)) * 100;
-
-		} else if(mode == 'fit'){
-			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
-			let minDimRatio;
-			if(displayOptions.spread === 'single')
-				minDimRatio = [...pages].reduce(
-					(minRatio, page)=>Math.min(minRatio,
-						iframeWidth / page.offsetWidth,
-						iframeHeight / page.offsetHeight
-					),
-					Infinity
-				);
-			else
-				minDimRatio = [...pages].reduce(
-					(minRatio, page)=>Math.min(minRatio,
-						iframeWidth / ((page.offsetWidth * 2) + parseInt(displayOptions.columnGap)),
-						iframeHeight / page.offsetHeight
-					),
-					Infinity
-				);
-
-			desiredZoom = minDimRatio * 100;
-		}
-
-		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")
-
-		const deltaZoom = (desiredZoom - displayOptions.zoomLevel) - margin;
-		return deltaZoom;
-	};
-
-	return (
-		<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
-			<div className='toggleButton'>
-				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{
-					setToolsVisible(!toolsVisible);
-					localStorage.setItem(TOOLBAR_VISIBILITY, !toolsVisible);
-				}}><i className='fas fa-glasses' /></button>
-				<button title={`${headerState ? 'Hide' : 'Show'} Header Navigation`} onClick={()=>{setHeaderState(!headerState);}}><i className='fas fa-rectangle-list' /></button>
-			</div>
-			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
-			<div className='group' role='group' aria-label='Zoom' aria-hidden={!toolsVisible}>
-				<button
-					id='fill-width'
-					className='tool'
-					title='Set zoom to fill preview with one page'
-					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fill'))}
-				>
-					<i className='fac fit-width' />
-				</button>
-				<button
-					id='zoom-to-fit'
-					className='tool'
-					title='Set zoom to fit entire page in preview'
-					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fit'))}
-				>
-					<i className='fac zoom-to-fit' />
-				</button>
-				<button
-					id='zoom-out'
-					className='tool'
-					onClick={()=>handleZoomButton(displayOptions.zoomLevel - 20)}
-					disabled={displayOptions.zoomLevel <= MIN_ZOOM}
-					title='Zoom Out'
-				>
-					<i className='fas fa-magnifying-glass-minus' />
-				</button>
-				<input
-					id='zoom-slider'
-					className='range-input tool hover-tooltip'
-					type='range'
-					name='zoom'
-					title='Set Zoom'
-					list='zoomLevels'
-					min={MIN_ZOOM}
-					max={MAX_ZOOM}
-					step='1'
-					value={displayOptions.zoomLevel}
-					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
-				/>
-				<datalist id='zoomLevels'>
-					<option value='100' />
-				</datalist>
-
-				<button
-					id='zoom-in'
-					className='tool'
-					onClick={()=>handleZoomButton(displayOptions.zoomLevel + 20)}
-					disabled={displayOptions.zoomLevel >= MAX_ZOOM}
-					title='Zoom In'
-				>
-					<i className='fas fa-magnifying-glass-plus' />
-				</button>
-			</div>
-
-			{/*v=====----------------------< Spread Controls >---------------------=====v*/}
-			<div className='group' role='group' aria-label='Spread' aria-hidden={!toolsVisible}>
-				<div className='radio-group' role='radiogroup'>
-					<button role='radio'
-						id='single-spread'
-						className='tool'
-						title='Single Page'
-						onClick={()=>{handleOptionChange('spread', 'single');}}
-						aria-checked={displayOptions.spread === 'single'}
-					><i className='fac single-spread' /></button>
-					<button role='radio'
-						id='facing-spread'
-						className='tool'
-						title='Facing Pages'
-						onClick={()=>{handleOptionChange('spread', 'facing');}}
-						aria-checked={displayOptions.spread === 'facing'}
-					><i className='fac facing-spread' /></button>
-					<button role='radio'
-						id='flow-spread'
-						className='tool'
-						title='Flow Pages'
-						onClick={()=>{handleOptionChange('spread', 'flow');}}
-						aria-checked={displayOptions.spread === 'flow'}
-					><i className='fac flow-spread' /></button>
-
-				</div>
-				<Anchored>
-					<AnchoredTrigger id='spread-settings' className='tool' title='Spread options'><i className='fas fa-gear' /></AnchoredTrigger>
-					<AnchoredBox title='Options'>
-						<h1>Options</h1>
-						<label title='Modify the horizontal space between pages.'>
-							Column gap
-							<input type='range' min={0} max={200} defaultValue={displayOptions.columnGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
-						</label>
-						<label title='Modify the vertical space between rows of pages.'>
-							Row gap
-							<input type='range' min={0} max={200} defaultValue={displayOptions.rowGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
-						</label>
-						<label title='Start 1st page on the right side, such as if you have cover page.'>
-							Start on right
-							<input type='checkbox' checked={displayOptions.startOnRight} onChange={()=>{handleOptionChange('startOnRight', !displayOptions.startOnRight);}}
-								title={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
-						</label>
-						<label title='Toggle the page shadow on every page.'>
-							Page shadows
-							<input type='checkbox' checked={displayOptions.pageShadows} onChange={()=>{handleOptionChange('pageShadows', !displayOptions.pageShadows);}} />
-						</label>
-					</AnchoredBox>
-				</Anchored>
-			</div>
-
-			{/*v=====----------------------< Page Controls >---------------------=====v*/}
-			<div className='group' role='group'  aria-label='Pages' aria-hidden={!toolsVisible}>
-				<button
-					id='previous-page'
-					className='previousPage tool'
-					type='button'
-					title='Previous Page(s)'
-					onClick={()=>scrollToPage(_.min(visiblePages) - visiblePages.length)}
-					disabled={visiblePages.includes(1)}
-				>
-					<i className='fas fa-arrow-left'></i>
-				</button>
-
-				<div className='tool'>
-					<input
-						id='page-input'
-						className='text-input'
-						type='text'
-						name='page'
-						title='Current page(s) in view'
-						inputMode='numeric'
-						pattern='[0-9]'
-						value={pageNum}
-						onClick={(e)=>e.target.select()}
-						onChange={(e)=>handlePageInput(e.target.value)}
-						onBlur={()=>scrollToPage(pageNum)}
-						onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
-						style={{ width: `${pageNum.length}ch` }}
-					/>
-					<span id='page-count' title='Total Page Count'>/ {totalPages}</span>
-				</div>
-
-				<button
-					id='next-page'
-					className='tool'
-					type='button'
-					title='Next Page(s)'
-					onClick={()=>scrollToPage(_.max(visiblePages) + 1)}
-					disabled={visiblePages.includes(totalPages)}
-				>
-					<i className='fas fa-arrow-right'></i>
-				</button>
-			</div>
-		</div>
-	);
-};
-
-module.exports = ToolBar;

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -1,191 +0,0 @@
-@import (less) './client/icons/customIcons.less';
-
-.toolBar {
-	position         : absolute;
-	z-index          : 1;
-	box-sizing       : border-box;
-	display          : flex;
-	flex-wrap        : wrap;
-	gap              : 8px 20px;
-	align-items      : center;
-	justify-content  : center;
-	width            : 100%;
-	height           : auto;
-	padding          : 2px 10px 2px 90px;
-	font-family      : 'Open Sans', sans-serif;
-	font-size        : 13px;
-	color            : #CCCCCC;
-	background-color : #555555;
-	& > *:not(.toggleButton) {
-		opacity    : 1;
-		transition : all 0.2s ease;
-	}
-
-	.group {
-		box-sizing       : border-box;
-		display          : flex;
-		gap              : 0 3px;
-		align-items      : center;
-		justify-content  : center;
-		height           : 28px;
-	}
-
-	.tool {
-		display     : flex;
-		align-items : center;
-	}
-
-	.active, [aria-checked='true'] { background-color : #444444; }
-
-	.anchored-trigger {
-		&.active { background-color : #444444; }
-	}
-
-	.anchored-box {
-		--box-color      : #555555;
-		top              : 30px;
-		display          : flex;
-		flex-direction   : column;
-		gap              : 5px;
-		padding          : 15px;
-		margin-top       : 10px;
-		font-size        : 0.8em;
-		color            : #CCCCCC;
-		background-color : var(--box-color);
-		border-radius    : 5px;
-	
-		h1 {
-			padding-bottom : 0.3em;
-			margin-bottom  : 0.5em;
-			border-bottom  : 1px solid currentColor;
-		}
-	
-		h2 {
-			padding-bottom : 0.3em;
-			margin         : 1em 0 0.5em 0;
-			color          : lightgray;
-			border-bottom  : 1px solid currentColor;
-		}
-	
-		label {
-			display         : flex;
-			gap             : 6px;
-			align-items     : center;
-			justify-content : space-between;
-	
-		}
-		input {
-			height : unset;
-			&[type='range'] { padding : 0; }
-		}
-		&::before {
-			position       : absolute;
-			top            : -20px;
-			left           : 50%;
-			width          : 0px;
-			height         : 0px;
-			pointer-events : none;
-			content        : '';
-			border         : 10px solid transparent;
-			border-bottom  : 10px solid var(--box-color);
-			transform      : translateX(-50%);
-		}
-
-	}
-
-	.radio-group:has(button[role='radio']) {
-		display : flex;
-		height  : 100%;
-		border  : 1px solid #333333;
-	}
-
-	input {
-		position       : relative;
-		height         : 1.5em;
-		padding        : 2px 5px;
-		font-family    : 'Open Sans', sans-serif;
-		color          : inherit;
-		background     : #3B3B3B;
-		border         : none;
-		&:focus { outline : 1px solid #D3D3D3; }
-
-		// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
-		&.range-input {
-			padding      : 2px 0;
-			color        : #D3D3D3;
-			accent-color : #D3D3D3;
-  
-			&::-webkit-slider-thumb, &::-moz-range-thumb { 
-				width            : 5px;
-				height           : 5px;
-				cursor           : ew-resize;
-				outline          : none;
-			}
-
-			&.hover-tooltip[value]:hover::after {
-				position         : absolute;
-				bottom           : -30px;
-				left             : 50%;
-				z-index          : 1;
-				display          : grid;
-				place-items      : center;
-				width            : 4ch;
-				height           : 1.2lh;
-				pointer-events   : none;
-				content          : attr(value);
-				background-color : #555555;
-				border           : 1px solid #A1A1A1;
-				transform        : translate(-50%, 50%);
-			}
-		}
-
-		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
-		&#page-input {
-			min-width    : 5ch;
-			margin-right : 1ch;
-			text-align   : center;
-		}
-	}
-
-	button {
-		box-sizing       : border-box;
-		display          : flex;
-		align-items      : center;
-		justify-content  : center;
-		width            : auto;
-		min-width        : 40px;
-		height           : 100%;
-		&:hover { background-color : #444444; }
-		&:focus {outline : none; border  : 1px solid #D3D3D3;}
-		&:disabled {
-			color            : #777777;
-			background-color : unset !important;
-		}
-		i { font-size : 1.2em; }
-	}
-
-	&.hidden {
-		flex-wrap        : nowrap;
-		width            : 92px;
-		overflow         : hidden;
-		background-color : unset;
-		opacity          : 0.7;
-		transition       : all 0.3s ease;
-		& > *:not(.toggleButton) {
-			opacity    : 0;
-			transition : all 0.2s ease;
-		}
-
-		.toggleButton button i {
-			filter: drop-shadow(0 0 2px black) drop-shadow(0 0 1px black);
-		}
-	}
-}
-
-.toggleButton {
-	position  : absolute;
-	left      : 0;
-	z-index   : 5;
-	display   : flex;
-	height    : 100%;
-}

client/homebrew/editor/editor.jsx

@@ -1,538 +1,129 @@
-/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
-require('./editor.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
-const dedent = require('dedent-tabs').default;
-import Markdown from '../../../shared/naturalcrit/markdown.js';
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
 
-const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
-const SnippetBar = require('./snippetbar/snippetbar.jsx');
-const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
+var CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
+var Snippets = require('./snippets/snippets.js');
 
-const EDITOR_THEME_KEY = 'HB_editor_theme';
 
-const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
-const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
-const DEFAULT_STYLE_TEXT = dedent`
-				/*=======---  Example CSS styling  ---=======*/
-				/* Any CSS here will apply to your document! */
+var splice = function(str, index, inject){
+	return str.slice(0, index) + inject + str.slice(index);
+};
+var execute = function(val){
+	if(_.isFunction(val)) return val();
+	return val;
+}
 
-				.myExampleClass {
-					color: black;
-				}`;
 
-const DEFAULT_SNIPPET_TEXT = dedent`
-				\snippet example snippet
-				
-				The text between \`\snippet title\` lines will become a snippet of name \`title\` as this example provides.
-				
-				This snippet is accessible in the brew tab, and will be inherited if the brew is used as a theme.
-`;
-let isJumping = false;
-
-const Editor = createClass({
-	displayName     : 'Editor',
-	getDefaultProps : function() {
+var Editor = React.createClass({
+	getDefaultProps: function() {
 		return {
-			brew : {
-				text  : '',
-				style : ''
-			},
-
-			onBrewChange : ()=>{},
-			reportError  : ()=>{},
-
-			onCursorPageChange : ()=>{},
-			onViewPageChange   : ()=>{},
-
-			editorTheme : 'default',
-			renderer    : 'legacy',
-
-			currentEditorCursorPageNum : 1,
-			currentEditorViewPageNum   : 1,
-			currentBrewRendererPageNum : 1,
+			value : "",
+			onChange : function(){}
 		};
 	},
-	getInitialState : function() {
-		return {
-			editorTheme      : this.props.editorTheme,
-			view             : 'text', //'text', 'style', 'meta', 'snippet'
-			snippetbarHeight : 25
-		};
+	cursorPosition : {
+		line : 0,
+		ch : 0
 	},
 
-	editor     : React.createRef(null),
-	codeEditor : React.createRef(null),
-
-	isText  : function() {return this.state.view == 'text';},
-	isStyle : function() {return this.state.view == 'style';},
-	isMeta  : function() {return this.state.view == 'meta';},
-	isSnip  : function() {return this.state.view == 'snippet';},
-
-	componentDidMount : function() {
-
-		this.highlightCustomMarkdown();
-		document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
-		document.addEventListener('keydown', this.handleControlKeys);
-
-		this.codeEditor.current.codeMirror.on('cursorActivity', (cm)=>{this.updateCurrentCursorPage(cm.getCursor());});
-		this.codeEditor.current.codeMirror.on('scroll', _.throttle(()=>{this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());}, 200));
-
-		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
-		if(editorTheme) {
-			this.setState({
-				editorTheme : editorTheme
-			});
-		}
-		this.setState({ snippetbarHeight: document.querySelector('.editor > .snippetBar').offsetHeight });
+	componentDidMount: function() {
+		var paneHeight = this.refs.main.parentNode.clientHeight;
+		paneHeight -= this.refs.snippetBar.clientHeight + 1;
+		this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
 	},
 
-	componentDidUpdate : function(prevProps, prevState, snapshot) {
-
-		this.highlightCustomMarkdown();
-		if(prevProps.moveBrew !== this.props.moveBrew)
-			this.brewJump();
-
-		if(prevProps.moveSource !== this.props.moveSource)
-			this.sourceJump();
-
-		if(this.props.liveScroll) {
-			if(prevProps.currentBrewRendererPageNum !== this.props.currentBrewRendererPageNum) {
-				this.sourceJump(this.props.currentBrewRendererPageNum, false);
-			} else if(prevProps.currentEditorViewPageNum !== this.props.currentEditorViewPageNum) {
-				this.brewJump(this.props.currentEditorViewPageNum, false);
-			} else if(prevProps.currentEditorCursorPageNum !== this.props.currentEditorCursorPageNum) {
-				this.brewJump(this.props.currentEditorCursorPageNum, false);
-			}
-		}
+	handleTextChange : function(text){
+		this.props.onChange(text);
+	},
+	handleCursorActivty : function(curpos){
+		this.cursorPosition = curpos;
 	},
 
-	handleControlKeys : function(e){
-		if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
-		const LEFTARROW_KEY = 37;
-		const RIGHTARROW_KEY = 39;
-		if(e.keyCode == RIGHTARROW_KEY) this.brewJump();
-		if(e.keyCode == LEFTARROW_KEY) this.sourceJump();
-		if(e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) {
-			e.stopPropagation();
-			e.preventDefault();
-		}
-	},
+	handleSnippetClick : function(injectText){
+		var lines = this.props.value.split('\n');
+		lines[this.cursorPosition.line] = splice(lines[this.cursorPosition.line], this.cursorPosition.ch, injectText);
 
-	updateCurrentCursorPage : function(cursor) {
-		const lines = this.props.brew.text.split('\n').slice(1, cursor.line + 1);
-		const pageRegex = this.props.brew.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
-		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
-		this.props.onCursorPageChange(currentPage);
-	},
-
-	updateCurrentViewPage : function(topScrollLine) {
-		const lines = this.props.brew.text.split('\n').slice(1, topScrollLine + 1);
-		const pageRegex = this.props.brew.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
-		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
-		this.props.onViewPageChange(currentPage);
-	},
-
-	handleInject : function(injectText){
-		this.codeEditor.current?.injectText(injectText, false);
-	},
-
-	handleViewChange : function(newView){
-		this.props.setMoveArrows(newView === 'text');
-
-		this.setState({
-			view : newView
-		}, ()=>{
-			this.codeEditor.current?.codeMirror.focus();
-		});
-	},
-
-	highlightCustomMarkdown : function(){
-		if(!this.codeEditor.current) return;
-		if((this.state.view === 'text') ||(this.state.view === 'snippet')) {
-			const codeMirror = this.codeEditor.current.codeMirror;
-
-			codeMirror.operation(()=>{ // Batch CodeMirror styling
-
-				const foldLines = [];
-
-				//reset custom text styles
-				const customHighlights = codeMirror.getAllMarks().filter((mark)=>{
-					// Record details of folded sections
-					if(mark.__isFold) {
-						const fold = mark.find();
-						foldLines.push({ from: fold.from?.line, to: fold.to?.line });
-					}
-					return !mark.__isFold;
-				}); //Don't undo code folding
-
-				for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
-
-				let userSnippetCount = 1; // start snippet count from snippet 1
-				let editorPageCount = 1; // start page count from page 1
-
-				const whichSource = this.state.view === 'text' ? this.props.brew.text : this.props.brew.snippets;
-				_.forEach(whichSource?.split('\n'), (line, lineNumber)=>{
-
-					const tabHighlight = this.state.view === 'text' ? 'pageLine' : 'snippetLine';
-					const textOrSnip = this.state.view === 'text';
-
-					//reset custom line styles
-					codeMirror.removeLineClass(lineNumber, 'background', 'pageLine');
-					codeMirror.removeLineClass(lineNumber, 'background', 'snippetLine');
-					codeMirror.removeLineClass(lineNumber, 'text');
-					codeMirror.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
-
-					// Don't process lines inside folded text
-					// If the current lineNumber is inside any folded marks, skip line styling
-					if(foldLines.some((fold)=>lineNumber >= fold.from && lineNumber <= fold.to))
-						return;
-
-					// Styling for \page breaks
-					if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
-				     (this.props.renderer == 'V3'     && line.match(textOrSnip ? PAGEBREAK_REGEX_V3 : SNIPPETBREAK_REGEX_V3))) {
-
-						if((lineNumber > 0) && (textOrSnip))      // Since \page is optional on first line of document,
-							editorPageCount += 1; // don't use it to increment page count; stay at 1
-						else if(this.state.view !== 'text')	userSnippetCount += 1;
-
-						// add back the original class 'background' but also add the new class '.pageline'
-						codeMirror.addLineClass(lineNumber, 'background', tabHighlight);
-						const pageCountElement = Object.assign(document.createElement('span'), {
-							className   : 'editor-page-count',
-							textContent : textOrSnip ? editorPageCount : userSnippetCount
-						});
-						codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
-					};
-
-
-					// New Codemirror styling for V3 renderer
-					if(this.props.renderer === 'V3') {
-						if(line.match(/^\\column(?:break)?$/)){
-							codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
-						}
-
-						// definition lists
-						if(line.includes('::')){
-							if(/^:*$/.test(line) == true){ return; };
-							const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/ymd;  // the `d` flag, for match indices, throws an ESLint error.
-							let match;
-							while ((match = regex.exec(line)) != null){
-								codeMirror.markText({ line: lineNumber, ch: match.indices[0][0] }, { line: lineNumber, ch: match.indices[0][1] }, { className: 'dl-highlight' });
-								codeMirror.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
-								codeMirror.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
-								const ddIndex = match.indices[2][0];
-								const colons = /::/g;
-								const colonMatches = colons.exec(match[2]);
-								if(colonMatches !== null){
-									codeMirror.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight' });
-								}
-							}
-						}
-
-						// Subscript & Superscript
-						if(line.includes('^')) {
-							let startIndex = line.indexOf('^');
-							const superRegex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/gy;
-							const subRegex   = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/gy;
-
-							while (startIndex >= 0) {
-								superRegex.lastIndex = subRegex.lastIndex = startIndex;
-								let isSuper = false;
-								const match = subRegex.exec(line) || superRegex.exec(line);
-								if(match) {
-									isSuper = !subRegex.lastIndex;
-									codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
-								}
-								startIndex = line.indexOf('^', Math.max(startIndex + 1, subRegex.lastIndex, superRegex.lastIndex));
-							}
-						}
-
-						// Highlight injectors {style}
-						if(line.includes('{') && line.includes('}')){
-							const regex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
-							let match;
-							while ((match = regex.exec(line)) != null) {
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
-							}
-						}
-						// Highlight inline spans {{content}}
-						if(line.includes('{{') && line.includes('}}')){
-							const regex = /{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *|}}/g;
-							let match;
-							let blockCount = 0;
-							while ((match = regex.exec(line)) != null) {
-								if(match[0].startsWith('{')) {
-									blockCount += 1;
-								} else {
-									blockCount -= 1;
-								}
-								if(blockCount < 0) {
-									blockCount = 0;
-									continue;
-								}
-								codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
-							}
-						} else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
-							// Highlight block divs {{\n Content \n}}
-							let endCh = line.length+1;
-
-							const match = line.match(/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/);
-							if(match)
-								endCh = match.index+match[0].length;
-							codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
-						}
-
-						// Emojis
-						if(line.match(/:[^\s:]+:/g)) {
-							let startIndex = line.indexOf(':');
-							const emojiRegex = /:[^\s:]+:/gy;
-
-							while (startIndex >= 0) {
-								emojiRegex.lastIndex = startIndex;
-								const match = emojiRegex.exec(line);
-								if(match) {
-									let tokens = Markdown.marked.lexer(match[0]);
-									tokens = tokens[0].tokens.filter((t)=>t.type == 'emoji');
-									if(!tokens.length)
-										return;
-
-									const startPos = { line: lineNumber, ch: match.index };
-									const endPos   = { line: lineNumber, ch: match.index + match[0].length };
-
-									// Iterate over conflicting marks and clear them
-									const marks = codeMirror.findMarks(startPos, endPos);
-									marks.forEach(function(marker) {
-										if(!marker.__isFold) marker.clear();
-									});
-									codeMirror.markText(startPos, endPos, { className: 'emoji' });
-								}
-								startIndex = line.indexOf(':', Math.max(startIndex + 1, emojiRegex.lastIndex));
-							}
-						}
-					}
-				});
-			});
-		}
-	},
-
-	brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){
-		if(!window || !this.isText() || isJumping)
-			return;
-
-		// Get current brewRenderer scroll position and calculate target position
-		const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
-		const currentPos = brewRenderer.scrollTop;
-		const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
-		
-		let scrollingTimeout;
-		const checkIfScrollComplete = ()=>{	// Prevent interrupting a scroll in progress if user clicks multiple times
-			clearTimeout(scrollingTimeout);   // Reset the timer every time a scroll event occurs
-			scrollingTimeout = setTimeout(()=>{
-				isJumping = false;
-				brewRenderer.removeEventListener('scroll', checkIfScrollComplete);
-			}, 150);	// If 150 ms pass without a brewRenderer scroll event, assume scrolling is done
-		};
-
-		isJumping = true;
-		checkIfScrollComplete();
-		brewRenderer.addEventListener('scroll', checkIfScrollComplete);
-
-		if(smooth) {
-			const bouncePos   = targetPos >= 0 ? -30 : 30; //Do a little bounce before scrolling
-			const bounceDelay = 100;
-			const scrollDelay = 500;
-
-			if(!this.throttleBrewMove) {
-				this.throttleBrewMove = _.throttle((currentPos, bouncePos, targetPos)=>{
-					brewRenderer.scrollTo({ top: currentPos + bouncePos, behavior: 'smooth' });
-					setTimeout(()=>{
-						brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
-					}, bounceDelay);
-				}, scrollDelay, { leading: true, trailing: false });
-			};
-			this.throttleBrewMove(currentPos, bouncePos, targetPos);
-		} else {
-			brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'instant', block: 'start' });
-		}
-	},
-
-	sourceJump : function(targetPage=this.props.currentBrewRendererPageNum, smooth=true){
-		if(!this.isText() || isJumping)
-			return;
-
-		const textSplit  = this.props.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
-		const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit);
-		const targetLine = textString.match('\n') ? textString.split('\n').length - 1 : -1;
-
-		let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
-		let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
-
-		let scrollingTimeout;
-		const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times
-			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
-			scrollingTimeout = setTimeout(()=>{
-				isJumping = false;
-				this.codeEditor.current.codeMirror.off('scroll', checkIfScrollComplete);
-			}, 150); // If 150 ms pass without a scroll event, assume scrolling is done
-		};
-
-		isJumping = true;
-		checkIfScrollComplete();
-		this.codeEditor.current.codeMirror.on('scroll', checkIfScrollComplete);
-
-		if(smooth) {
-			//Scroll 1/10 of the way every 10ms until 1px off.
-			const incrementalScroll = setInterval(()=>{
-				currentY += (targetY - currentY) / 10;
-				this.codeEditor.current.codeMirror.scrollTo(null, currentY);
-
-				// Update target: target height is not accurate until within +-10 lines of the visible window
-				if(Math.abs(targetY - currentY > 100))
-					targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
-
-				// End when close enough
-				if(Math.abs(targetY - currentY) < 1) {
-					this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
-					this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
-					this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
-					clearInterval(incrementalScroll);
-				}
-			}, 10);
-		} else {
-			this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
-			this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
-			this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
-		}
+		this.handleTextChange(lines.join('\n'));
+		this.refs.codeEditor.setCursorPosition(this.cursorPosition.line, this.cursorPosition.ch  + injectText.length);
 	},
 
 	//Called when there are changes to the editor's dimensions
 	update : function(){
-		const snipHeight = document.querySelector('.editor > .snippetBar').offsetHeight;
-		if(snipHeight !== this.state.snippetbarHeight)
-			this.setState({ snippetbarHeight: snipHeight });
+		this.refs.codeEditor.updateSize();
 	},
 
-	updateEditorTheme : function(newTheme){
-		window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
-		this.setState({
-			editorTheme : newTheme
-		});
-	},
-
-	//Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory
-	rerenderParent : function (){
-		this.forceUpdate();
-	},
-
-	renderEditor : function(){
-		if(this.isText()){
-			return <>
-				<CodeEditor key='codeEditor'
-					ref={this.codeEditor}
-					language='gfm'
-					view={this.state.view}
-					value={this.props.brew.text}
-					onChange={this.props.onBrewChange('text')}
-					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent}
-					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
-			</>;
-		}
-		if(this.isStyle()){
-			return <>
-				<CodeEditor key='codeEditor'
-					ref={this.codeEditor}
-					language='css'
-					view={this.state.view}
-					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
-					onChange={this.props.onBrewChange('style')}
-					enableFolding={true}
-					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent}
-					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
-			</>;
-		}
-		if(this.isMeta()){
-			return <>
-				<CodeEditor key='codeEditor'
-					view={this.state.view}
-					style={{ display: 'none' }}
-					rerenderParent={this.rerenderParent} />
-				<MetadataEditor
-					metadata={this.props.brew}
-					themeBundle={this.props.themeBundle}
-					onChange={this.props.onBrewChange('metadata')}
-					reportError={this.props.reportError}
-					userThemes={this.props.userThemes}/>
-			</>;
-		}
-
-		if(this.isSnip()){
-			if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; }
-			return <>
-				<CodeEditor key='codeEditor'
-					ref={this.codeEditor}
-					language='gfm'
-					view={this.state.view}
-					value={this.props.brew.snippets}
-					onChange={this.props.onBrewChange('snippets')}
-					enableFolding={true}
-					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent}
-					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
-			</>;
-		}
-	},
-
-	redo : function(){
-		return this.codeEditor.current?.redo();
-	},
-
-	historySize : function(){
-		return this.codeEditor.current?.historySize();
-	},
-
-	undo : function(){
-		return this.codeEditor.current?.undo();
-	},
-
-	foldCode : function(){
-		return this.codeEditor.current?.foldAllCode();
-	},
-
-	unfoldCode : function(){
-		return this.codeEditor.current?.unfoldAllCode();
+	renderSnippetGroups : function(){
+		return _.map(Snippets, (snippetGroup)=>{
+			return <SnippetGroup
+				groupName={snippetGroup.groupName}
+				icon={snippetGroup.icon}
+				snippets={snippetGroup.snippets}
+				key={snippetGroup.groupName}
+				onSnippetClick={this.handleSnippetClick}
+			/>
+		})
 	},
 
 	render : function(){
-		return (
-			<div className='editor' ref={this.editor}>
-				<SnippetBar
-					brew={this.props.brew}
-					view={this.state.view}
-					onViewChange={this.handleViewChange}
-					onInject={this.handleInject}
-					showEditButtons={this.props.showEditButtons}
-					renderer={this.props.renderer}
-					theme={this.props.brew.theme}
-					undo={this.undo}
-					redo={this.redo}
-					foldCode={this.foldCode}
-					unfoldCode={this.unfoldCode}
-					historySize={this.historySize()}
-					currentEditorTheme={this.state.editorTheme}
-					updateEditorTheme={this.updateEditorTheme}
-					themeBundle={this.props.themeBundle}
-					cursorPos={this.codeEditor.current?.getCursorPosition() || {}}
-					updateBrew={this.props.updateBrew}
-				/>
-
-				{this.renderEditor()}
+		return(
+			<div className='editor' ref='main'>
+				<div className='snippetBar' ref='snippetBar'>
+					{this.renderSnippetGroups()}
+				</div>
+				<CodeEditor
+					ref='codeEditor'
+					wrap={true}
+					language='gfm'
+					value={this.props.value}
+					onChange={this.handleTextChange}
+					onCursorActivity={this.handleCursorActivty} />
 			</div>
 		);
 	}
 });
 
 module.exports = Editor;
+
+
+
+
+
+
+
+
+
+var SnippetGroup = React.createClass({
+	getDefaultProps: function() {
+		return {
+			groupName : '',
+			icon : 'fa-rocket',
+			snippets : [],
+			onSnippetClick : function(){},
+		};
+	},
+	handleSnippetClick : function(snippet){
+		this.props.onSnippetClick(execute(snippet.gen));
+	},
+	renderSnippets : function(){
+		return _.map(this.props.snippets, (snippet)=>{
+			return <div className='snippet' key={snippet.name} onClick={this.handleSnippetClick.bind(this, snippet)}>
+				<i className={'fa fa-fw ' + snippet.icon} />
+				{snippet.name}
+			</div>
+		})
+	},
+
+	render : function(){
+		return <div className='snippetGroup'>
+			<div className='text'>
+				<i className={'fa fa-fw ' + this.props.icon} />
+				<span className='groupName'>{this.props.groupName}</span>
+			</div>
+			<div className='dropdown'>
+				{this.renderSnippets()}
+			</div>
+		</div>
+	},
+
+});

client/homebrew/editor/editor.less

@@ -1,111 +1,56 @@
-@import 'themes/codeMirror/customEditorStyles.less';
-.editor {
-	position  : relative;
-	width     : 100%;
-	height    : 100%;
-	container : editor / inline-size;
-	.codeEditor {
-		height            : calc(100% - 25px);
-		.CodeMirror { height : 100%; }
-		.pageLine, .snippetLine {
-			background : #33333328;
-			border-top : #333399 solid 1px;
-		}
-		.editor-page-count {
-			float : right;
-			color : grey;
-		}
-		.editor-snippet-count {
-			float : right;
-			color : grey;
-		}
-		.columnSplit {
-			font-style        : italic;
-			color             : grey;
-			background-color  : fade(#229999, 15%);
-			border-bottom     : #229999 solid 1px;
-		}
-		.define {
-			&:not(.term):not(.definition) {
-				font-weight   : bold;
-				color         : #949494;
-				background    : #E5E5E5;
-				border-radius : 3px;
-			}
-			&.term { color : rgb(96, 117, 143); }
-			&.definition { color : rgb(97, 57, 178); }
-		}
-		.block:not(.cm-comment) {
-			font-weight : bold;
-			color       : purple;
-			//font-style: italic;
-		}
-		.inline-block:not(.cm-comment) {
-			font-weight : bold;
-			color       : red;
-			//font-style: italic;
-		}
-		.injection:not(.cm-comment) {
-			font-weight : bold;
-			color       : green;
-		}
-		.emoji:not(.cm-comment) {
-			padding-bottom : 1px;
-			margin-left    : 2px;
-			font-weight    : bold;
-			color          : #360034;
-			outline        : solid 2px #FF96FC;
-			outline-offset : -2px;
-			background     : #FFC8FF;
-			border-radius  : 6px;
-		}
-		.superscript:not(.cm-comment) {
-			font-size      : 0.9em;
-			font-weight    : bold;
-			vertical-align : super;
-			color          : goldenrod;
-		}
-		.subscript:not(.cm-comment) {
-			font-size      : 0.9em;
-			font-weight    : bold;
-			vertical-align : sub;
-			color          : rgb(123, 123, 15);
-		}
-		.dl-highlight {
-			&.dl-colon-highlight {
-				font-weight   : bold;
-				color         : #949494;
-				background    : #E5E5E5;
-				border-radius : 3px;
-			}
-			&.dt-highlight { color : rgb(96, 117, 143); }
-			&.dd-highlight { color : rgb(97, 57, 178); }
-		}		
-	}
-
-	.brewJump {
-		position         : absolute;
-		right            : 20px;
-		bottom           : 20px;
-		z-index          : 1000000;
-		display          : flex;
-		align-items      : center;
-		justify-content  : center;
-		width            : 30px;
-		height           : 30px;
-		cursor           : pointer;
-		background-color : @teal;
-		.tooltipLeft('Jump to brew page');
-	}
-
-	.editorToolbar {
-		position  : absolute;
-		top       : 5px;
-		left      : 50%;
-		z-index   : 9;
-		font-size : 13px;
-		color     : black;
-		span { padding : 2px 5px; }
-	}
-
+
+.editor{
+	position : relative;
+	width    : 100%;
+	.snippetBar{
+		display          : flex;
+		padding          : 5px;
+		background-color : #ddd;
+		align-items      : center;
+		.snippetGroup{
+			.animate(background-color);
+			margin        : 0px 8px;
+			padding       : 3px;
+			font-size     : 13px;
+			border-radius : 5px;
+			&:hover, &.selected{
+				background-color : #999;
+			}
+			.text{
+				line-height : 20px;
+				.groupName{
+					margin-left : 6px;
+					font-size   : 10px;
+				}
+			}
+			&:hover{
+				.dropdown{
+					visibility : visible;
+				}
+			}
+			.dropdown{
+				position         : absolute;
+				visibility       : hidden;
+				z-index          : 1000;
+				padding          : 5px;
+				background-color : #ddd;
+				.snippet{
+					.animate(background-color);
+					padding   : 10px;
+					cursor    : pointer;
+					font-size : 10px;
+					i{
+						margin-right: 8px;
+						font-size : 13px;
+					}
+					&:hover{
+						background-color : #999;
+					}
+				}
+			}
+		}
+	}
+	.codeEditor{
+		height : 100%;
+	}
 }

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -1,414 +0,0 @@
-/* eslint-disable max-lines */
-require('./metadataEditor.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-import request from '../../utils/request-middleware.js';
-const Combobox = require('client/components/combobox.jsx');
-const TagInput = require('../tagInput/tagInput.jsx');
-
-
-const Themes = require('themes/themes.json');
-const validations = require('./validations.js');
-
-const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
-
-const homebreweryThumbnail = require('../../thumbnail.png');
-
-const callIfExists = (val, fn, ...args)=>{
-	if(val[fn]) {
-		val[fn](...args);
-	}
-};
-
-const MetadataEditor = createClass({
-	displayName     : 'MetadataEditor',
-	getDefaultProps : function() {
-		return {
-			metadata : {
-				editId      : null,
-				shareId     : null,
-				title       : '',
-				description : '',
-				thumbnail   : '',
-				tags        : [],
-				published   : false,
-				authors     : [],
-				systems     : [],
-				renderer    : 'legacy',
-				theme       : '5ePHB',
-				lang        : 'en'
-			},
-
-			onChange    : ()=>{},
-			reportError : ()=>{}
-		};
-	},
-
-	getInitialState : function(){
-		return {
-			showThumbnail : true
-		};
-	},
-
-	toggleThumbnailDisplay : function(){
-		this.setState({
-			showThumbnail : !this.state.showThumbnail
-		});
-	},
-
-	renderThumbnail : function(){
-		if(!this.state.showThumbnail) return;
-		return <img className='thumbnail-preview' src={this.props.metadata.thumbnail || homebreweryThumbnail}></img>;
-	},
-
-	handleFieldChange : function(name, e){
-		// load validation rules, and check input value against them
-		const inputRules = validations[name] ?? [];
-		const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean);
-
-		const debouncedReportValidity = _.debounce((target, errMessage)=>{
-			callIfExists(target, 'setCustomValidity', errMessage);
-			callIfExists(target, 'reportValidity');
-		}, 300); // 300ms debounce delay, adjust as needed
-
-		// if no validation rules, save to props
-		if(validationErr.length === 0){
-			callIfExists(e.target, 'setCustomValidity', '');
-			this.props.onChange({
-				...this.props.metadata,
-				[name] : e.target.value
-			});
-			return true;
-		} else {
-			// if validation issues, display built-in browser error popup with each error.
-			const errMessage = validationErr.map((err)=>{
-				return `- ${err}`;
-			}).join('\n');
-
-
-			debouncedReportValidity(e.target, errMessage);
-			return false;
-		}
-	},
-
-	handleSystem : function(system, e){
-		if(e.target.checked){
-			this.props.metadata.systems.push(system);
-		} else {
-			this.props.metadata.systems = _.without(this.props.metadata.systems, system);
-		}
-		this.props.onChange(this.props.metadata);
-	},
-
-	handleRenderer : function(renderer, e){
-		if(e.target.checked){
-			this.props.metadata.renderer = renderer;
-			if(renderer == 'legacy')
-				this.props.metadata.theme = '5ePHB';
-		}
-		this.props.onChange(this.props.metadata, 'renderer');
-	},
-
-	handlePublish : function(val){
-		this.props.onChange({
-			...this.props.metadata,
-			published : val
-		});
-	},
-
-	handleTheme : function(theme){
-		this.props.metadata.renderer = theme.renderer;
-		this.props.metadata.theme    = theme.path;
-
-		this.props.onChange(this.props.metadata, 'theme');
-	},
-
-	handleThemeWritein : function(e) {
-		const shareId = e.target.value.split('/').pop(); //Extract just the ID if a URL was pasted in
-		this.props.metadata.theme = shareId;
-
-		this.props.onChange(this.props.metadata, 'theme');
-	},
-
-	handleLanguage : function(languageCode){
-		this.props.metadata.lang = languageCode;
-		this.props.onChange(this.props.metadata);
-	},
-
-	handleDelete : function(){
-		if(this.props.metadata.authors && this.props.metadata.authors.length <= 1){
-			if(!confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
-			if(!confirm('Are you REALLY sure? You will not be able to recover the document.')) return;
-		} else {
-			if(!confirm('Are you sure you want to remove this brew from your collection? This will remove you as an editor, but other owners will still be able to access the document.')) return;
-			if(!confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
-		}
-
-		request.delete(`/api/${this.props.metadata.googleId ?? ''}${this.props.metadata.editId}`)
-			.send()
-			.end((err, res)=>{
-				if(err) {
-					this.props.reportError(err);
-				} else {
-					window.location.href = '/';
-				}
-			});
-	},
-
-	renderSystems : function(){
-		return _.map(SYSTEMS, (val)=>{
-			return <label key={val}>
-				<input
-					type='checkbox'
-					checked={_.includes(this.props.metadata.systems, val)}
-					onChange={(e)=>this.handleSystem(val, e)} />
-				{val}
-			</label>;
-		});
-	},
-
-	renderPublish : function(){
-		if(this.props.metadata.published){
-			return <button className='unpublish' onClick={()=>this.handlePublish(false)}>
-				<i className='fas fa-ban' /> unpublish
-			</button>;
-		} else {
-			return <button className='publish' onClick={()=>this.handlePublish(true)}>
-				<i className='fas fa-globe' /> publish
-			</button>;
-		}
-	},
-
-	renderDelete : function(){
-		if(!this.props.metadata.editId) return;
-
-		return <div className='field delete'>
-			<label>delete</label>
-			<div className='value'>
-				<button className='publish' onClick={this.handleDelete}>
-					<i className='fas fa-trash-alt' /> delete brew
-				</button>
-			</div>
-		</div>;
-	},
-
-	renderAuthors : function(){
-		let text = 'None.';
-		if(this.props.metadata.authors && this.props.metadata.authors.length){
-			text = this.props.metadata.authors.join(', ');
-		}
-		return <div className='field authors'>
-			<label>authors</label>
-			<div className='value'>
-				{text}
-			</div>
-		</div>;
-	},
-
-	renderThemeDropdown : function(){
-		const mergedThemes = _.merge(Themes, this.props.userThemes);
-
-		const listThemes = (renderer)=>{
-			return _.map(_.values(mergedThemes[renderer]), (theme)=>{
-				if(theme.path == this.props.metadata.shareId) return;
-				const preview = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`;
-				const texture = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`;
-				return <div className='item' key={`${renderer}_${theme.name}`} value={`${theme.author ?? renderer} : ${theme.name}`} data={theme} title={''}>
-					{theme.author ?? renderer} : {theme.name}
-					<div className='texture-container'>
-						<img src={texture}/>
-					</div>
-					<div className='preview'>
-						<h6>{theme.name} preview</h6>
-						<img src={preview}/>
-					</div>
-				</div>;
-			}).filter(Boolean);
-		};
-
-		const currentRenderer = this.props.metadata.renderer;
-		const currentThemeDisplay = this.props.themeBundle?.name ? `${this.props.themeBundle.author ?? currentRenderer} : ${this.props.themeBundle.name}` : 'No Theme Selected';
-		let dropdown;
-
-		if(currentRenderer == 'legacy') {
-			dropdown =
-				<div className='disabled value' trigger='disabled'>
-					<div> Themes are not supported in the Legacy Renderer </div>
-				</div>;
-		} else {
-			dropdown =
-				<div className='value'>
-					<Combobox trigger='click'
-						className='themes-dropdown'
-						default={currentThemeDisplay}
-						placeholder='Select from below, or enter the Share URL or ID of a brew with the meta:theme tag'
-						onSelect={(value)=>this.handleTheme(value)}
-						onEntry={(e)=>{
-							e.target.setCustomValidity('');	//Clear the validation popup while typing
-							if(this.handleFieldChange('theme', e))
-								this.handleThemeWritein(e);
-						}}
-						options={listThemes(currentRenderer)}
-						autoSuggest={{
-							suggestMethod           : 'includes',
-							clearAutoSuggestOnClick : true,
-							filterOn                : ['value', 'title']
-						}}
-					/>
-					<small>Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.</small>
-				</div>;
-		}
-
-		return <div className='field themes'>
-			<label>theme</label>
-			{dropdown}
-		</div>;
-	},
-
-	renderLanguageDropdown : function(){
-		const langCodes = ['en', 'de', 'de-ch', 'fr', 'ja', 'es', 'it', 'sv', 'ru', 'zh-Hans', 'zh-Hant'];
-		const listLanguages = ()=>{
-			return _.map(langCodes.sort(), (code, index)=>{
-				const localName = new Intl.DisplayNames([code], { type: 'language' });
-				const englishName = new Intl.DisplayNames('en', { type: 'language' });
-				return <div className='item' title={englishName.of(code)} key={`${index}`} value={code} detail={localName.of(code)}>
-					{code}
-					<div className='detail'>{localName.of(code)}</div>
-				</div>;
-			});
-		};
-
-		return <div className='field language'>
-			<label>language</label>
-			<div className='value'>
-				<Combobox trigger='click'
-					className='language-dropdown'
-					default={this.props.metadata.lang || ''}
-					placeholder='en'
-					onSelect={(value)=>this.handleLanguage(value)}
-					onEntry={(e)=>{
-						e.target.setCustomValidity('');	//Clear the validation popup while typing
-						this.handleFieldChange('lang', e);
-					}}
-					options={listLanguages()}
-					autoSuggest={{
-						suggestMethod           : 'startsWith',
-						clearAutoSuggestOnClick : true,
-						filterOn                : ['value', 'detail', 'title']
-					}}
-				/>
-				<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
-			</div>
-
-		</div>;
-	},
-
-	renderRenderOptions : function(){
-		return <div className='field systems'>
-			<label>Renderer</label>
-			<div className='value'>
-				<label key='legacy'>
-					<input
-						type='radio'
-						value = 'legacy'
-						name = 'renderer'
-						checked={this.props.metadata.renderer === 'legacy'}
-						onChange={(e)=>this.handleRenderer('legacy', e)} />
-					Legacy
-				</label>
-
-				<label key='V3'>
-					<input
-						type='radio'
-						value = 'V3'
-						name = 'renderer'
-						checked={this.props.metadata.renderer === 'V3'}
-						onChange={(e)=>this.handleRenderer('V3', e)} />
-					V3
-				</label>
-				<small><a href='/legacy' target='_blank' rel='noopener noreferrer'>Click here to see the demo page for the old Legacy renderer!</a></small>
-			</div>
-		</div>;
-	},
-
-	render : function(){
-		return <div className='metadataEditor'>
-			<h1>Properties Editor</h1>
-
-			<div className='field title'>
-				<label>title</label>
-				<input type='text' className='value'
-					defaultValue={this.props.metadata.title}
-					onChange={(e)=>this.handleFieldChange('title', e)} />
-			</div>
-			<div className='field-group'>
-				<div className='field-column'>
-					<div className='field description'>
-						<label>description</label>
-						<textarea defaultValue={this.props.metadata.description} className='value'
-							onChange={(e)=>this.handleFieldChange('description', e)} />
-					</div>
-					<div className='field thumbnail'>
-						<label>thumbnail</label>
-						<input type='text'
-							defaultValue={this.props.metadata.thumbnail}
-							placeholder='https://my.thumbnail.url'
-							className='value'
-							onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
-						<button className='display' onClick={this.toggleThumbnailDisplay}>
-							<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
-						</button>
-					</div>
-				</div>
-				{this.renderThumbnail()}
-			</div>
-
-			<TagInput label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
-				placeholder='add tag' unique={true}
-				values={this.props.metadata.tags}
-				onChange={(e)=>this.handleFieldChange('tags', e)}
-			/>
-
-			<div className='field systems'>
-				<label>systems</label>
-				<div className='value'>
-					{this.renderSystems()}
-				</div>
-			</div>
-
-			{this.renderLanguageDropdown()}
-
-			{this.renderThemeDropdown()}
-
-			{this.renderRenderOptions()}
-
-			<h2>Authors</h2>
-
-			{this.renderAuthors()}
-
-			<TagInput label='invited authors' valuePatterns={[/.+/]}
-				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
-				placeholder='invite author' unique={true}
-				values={this.props.metadata.invitedAuthors}
-				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
-				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
-			/>
-
-			<h2>Privacy</h2>
-
-			<div className='field publish'>
-				<label>publish</label>
-				<div className='value'>
-					{this.renderPublish()}
-					<small>Published brews are searchable in <a href='/vault'>the Vault</a> and visible on your user page.  Unpublished brews are not indexed in the Vault or visible on your user page, but can still be shared and indexed by search engines.  You can unpublish a brew any time.</small>
-				</div>
-			</div>
-
-			{this.renderDelete()}
-
-		</div>;
-	}
-});
-
-module.exports = MetadataEditor;

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,317 +0,0 @@
-@import 'naturalcrit/styles/colors.less';
-
-.userThemeName {
-	padding-right : 10px;
-	padding-left  : 10px;
-}
-
-.metadataEditor {
-	position         : absolute;
-	box-sizing       : border-box;
-	width            : 100%;
-	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
-	padding          : 25px;
-	overflow-y       : auto;
-	font-size        : 13px;
-	background-color : #999999;
-
-	h1 {
-		margin         : 0 0 40px;
-		font-weight    : bold;
-		text-transform : uppercase;
-	}
-	
-	h2 {
-		margin        : 20px 0;
-		font-weight   : bold;
-		color         : #555555;
-		border-bottom : 2px solid gray;
-	}
-
-	& > div { margin-bottom : 10px; }
-
-	.field-group {
-		display   : flex;
-		flex-wrap : wrap;
-		gap       : 10px;
-		width     : 100%;
-	}
-
-	.field-column {
-		display        : flex;
-		flex           : 5 0 200px;
-		flex-direction : column;
-		gap            : 10px;
-	}
-
-
-
-	.field {
-		position      : relative;
-		display       : flex;
-		flex-wrap     : wrap;
-		width         : 100%;
-		min-width     : 200px;
-		& > label {
-			width          : 80px;
-			font-size      : 0.9em;
-			font-weight    : 800;
-			line-height    : 1.8em;
-			text-transform : uppercase;
-		}
-		& > .value {
-			flex           : 1 1 auto;
-			width          : 50px;
-			&:invalid { background : #FFB9B9; }
-			small {
-				display     : block;
-				font-size   : 0.9em;
-				font-style  : italic;
-				line-height : 1.4em;
-			}
-		}
-		input[type='text'], textarea {
-			border : 1px solid gray;
-			&:focus { outline : 1px solid #444444; }
-		}
-		&.thumbnail, &.themes {
-			label { line-height : 2.0em; }
-			.value {
-				overflow      : hidden;
-				text-overflow : ellipsis;
-			}
-			button {
-				.colorButton();
-				padding          : 0px 5px;
-				color            : white;
-				background-color : black;
-				border           : 1px solid #999999;
-				&:hover { background-color : #777777; }
-			}
-		}
-
-		&.themes {
-			.value {
-				overflow      : visible;
-				text-overflow : auto;
-			}
-			button {
-				padding-right : 5px;
-				padding-left  : 5px;
-			}
-		}
-
-		&.description {
-			flex : 1;
-			textarea.value {
-				height      : auto;
-				font-family : 'Open Sans', sans-serif;
-				resize      : none;
-			}
-		}
-
-		&.language .language-dropdown {
-			z-index   : 200;
-			max-width : 150px;
-		}
-	}
-
-
-	.thumbnail-preview {
-		position         : relative;
-		flex             : 1 1;
-		justify-self     : center;
-		width            : 80px;
-		height           : min-content;
-		max-height       : 115px;
-		aspect-ratio     : 1 / 1;
-		object-fit       : contain;
-		background-color : #AAAAAA;
-	}
-
-	.systems.field .value {
-		label {
-			display        : inline-flex;
-			align-items    : center;
-			margin-right   : 15px;
-			font-size      : 0.9em;
-			font-weight    : 800;
-			vertical-align : middle;
-			white-space    : nowrap;
-			cursor         : pointer;
-			user-select    : none;
-		}
-		input {
-			margin         : 3px;
-			vertical-align : middle;
-			cursor         : pointer;
-		}
-	}
-	.publish.field .value {
-		position      : relative;
-		margin-bottom : 15px;
-		button { width : 100%; }
-		button.publish {
-			.colorButton(@blueLight);
-		}
-		button.unpublish {
-			.colorButton(@silver);
-		}
-	}
-
-	.delete.field .value {
-		button {
-			.colorButton(@red);
-		}
-	}
-	.authors.field .value { line-height    : 1.5em; }
-
-	.themes.field {
-		& .dropdown-container {
-			position         : relative;
-			z-index          : 100;
-			background-color : white;
-		}
-		& .dropdown-options { overflow-y : visible; }
-		.disabled {
-			font-style       : italic;
-			color            : dimgray;
-			background-color : darkgray;
-		}
-		.item {
-			position          : relative;
-			padding           : 3px 3px;
-			overflow          : visible;
-			background-color  : white;
-			border-top        : 1px solid rgb(118, 118, 118);
-			.preview {
-				position       : absolute;
-				top            : 0;
-				right          : 0;
-				z-index        : 1;
-				display        : flex;
-				flex-direction : column;
-				width          : 200px;
-				overflow       : hidden;
-				color          : black;
-				background     : #CCCCCC;
-				border-radius  : 5px;
-				box-shadow     : 0 0 5px black;
-				opacity        : 0;
-				transition     : opacity 250ms ease;
-				h6 {
-					padding-block  : 0.5em;
-					padding-inline : 1em;
-					font-weight    : 900;
-					border-bottom  : 2px solid hsl(0,0%,40%);
-				}
-			}
-
-			.texture-container {
-				position   : absolute;
-				top        : 0;
-				left       : 0;
-				width      : 100%;
-				height     : 100%;
-				min-height : 100%;
-				overflow   : hidden;
-				> img {
-					position            : absolute;
-					top                 : 0;
-					right               : 0;
-					width               : 50%;
-					min-height          : 100%;
-					-webkit-mask-image  : linear-gradient(90deg, transparent, black 20%);
-					mask-image          : linear-gradient(90deg, transparent, black 20%);
-				}
-			}
-
-			&:hover {
-				color            : white;
-				background-color : @blue;
-				filter           : unset;
-			}
-			&:hover > .preview { opacity : 1; }
-		}
-	}
-
-	.field .list {
-		display   : flex;
-		flex      : 1 0;
-		flex-wrap : wrap;
-
-		> * { flex : 0 0 auto; }
-
-		#groupedIcon {
-			#backgroundColors;
-			position   : relative;
-			top        : -0.3em;
-			right      : -0.3em;
-			display    : inline-block;
-			min-width  : 20px;
-			height     : ~'calc(100% + 0.6em)';
-			color      : white;
-			text-align : center;
-			cursor     : pointer;
-	
-			i {
-				position  : relative;
-				top       : 50%;
-				transform : translateY(-50%);
-			}
-	
-			&:not(:last-child) { border-right : 1px solid black; }
-	
-			&:last-child { border-radius : 0 0.5em 0.5em 0; }
-		}
-
-		.tag {
-			padding          : 0.3em;
-			margin           : 2px;
-			font-size        : 0.9em;
-			background-color : #DDDDDD;
-			border-radius    : 0.5em;
-
-			.icon { #groupedIcon; }
-		}
-
-		.input-group {
-			height : ~'calc(.9em + 4px + .6em)';
-
-			input { border-radius : 0.5em 0 0 0.5em; }
-
-			input:last-child { border-radius : 0.5em; }
-
-			.value {
-				width     : 7.5vw;
-				min-width : 75px;
-				height    : 100%;
-			}
-
-			.input-group {
-				height : ~'calc(.9em + 4px + .6em)';
-
-				input { border-radius : 0.5em 0 0 0.5em; }
-
-				input:last-child { border-radius : 0.5em; }
-
-				.value {
-					width     : 7.5vw;
-					min-width : 75px;
-					height    : 100%;
-				}
-
-				.invalid:focus { background-color : pink; }
-
-				.icon {
-					#groupedIcon;
-					top       : -0.54em;
-					right     : 1px;
-					height    : 97%;
-
-					i { font-size : 1.125em; }
-				}
-			}
-		}
-	}
-}

client/homebrew/editor/metadataEditor/validations.js

@@ -1,47 +0,0 @@
-module.exports = {
-	title : [
-		(value)=>{
-			return value?.length > 100 ? 'Max title length of 100 characters' : null;
-		}
-	],
-	description : [
-		(value)=>{
-			return value?.length > 500 ? 'Max description length of 500 characters.' : null;
-		}
-	],
-	thumbnail : [
-		(value)=>{
-			return value?.length > 256 ? 'Max URL length of 256 characters.' : null;
-		},
-		(value)=>{
-			if(value?.length == 0){return null;}
-			try {
-				Boolean(new URL(value));
-				return null;
-			} catch {
-				return 'Must be a valid URL';
-			}
-		}
-	],
-	lang : [
-		(value)=>{
-			return new RegExp(/^([a-zA-Z]{2,3})(-[a-zA-Z]{4})?(-(?:[0-9]{3}|[a-zA-Z]{2}))?$/).test(value) === false && (value.length > 0) ? 'Invalid language code.' : null;
-		}
-	],
-	theme : [
-		(value)=>{
-			const URL = global.config.baseUrl.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); //Escape any regex characters
-			const shareIDPattern = '[a-zA-Z0-9-_]{12}';
-			const shareURLRegex  = new RegExp(`^${URL}\\/share\\/${shareIDPattern}$`);
-			const shareIDRegex   = new RegExp(`^${shareIDPattern}$`);
-			if(value?.length === 0)       return null;
-			if(shareURLRegex.test(value)) return null;
-			if(shareIDRegex.test(value))  return null;
-
-			return 'Must be a valid Share URL or a 12-character ID.';
-		}
-	]
-};
-
-
-

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -1,330 +0,0 @@
-/*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
-require('./snippetbar.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-const cx    = require('classnames');
-
-import { loadHistory } from '../../utils/versionHistory.js';
-import { brewSnippetsToJSON } from '../../../../shared/helpers.js';
-
-//Import all themes
-const ThemeSnippets = {};
-ThemeSnippets['Legacy_5ePHB'] = require('themes/Legacy/5ePHB/snippets.js');
-ThemeSnippets['V3_5ePHB']     = require('themes/V3/5ePHB/snippets.js');
-ThemeSnippets['V3_5eDMG']     = require('themes/V3/5eDMG/snippets.js');
-ThemeSnippets['V3_Journal']   = require('themes/V3/Journal/snippets.js');
-ThemeSnippets['V3_Blank']     = require('themes/V3/Blank/snippets.js');
-
-const EditorThemes = require('build/homebrew/codeMirror/editorThemes.json');
-
-const execute = function(val, props){
-	if(_.isFunction(val)) return val(props);
-	return val;
-};
-
-const Snippetbar = createClass({
-	displayName     : 'SnippetBar',
-	getDefaultProps : function() {
-		return {
-			brew              : {},
-			view              : 'text',
-			onViewChange      : ()=>{},
-			onInject          : ()=>{},
-			onToggle          : ()=>{},
-			showEditButtons   : true,
-			renderer          : 'legacy',
-			undo              : ()=>{},
-			redo              : ()=>{},
-			historySize       : ()=>{},
-			foldCode          : ()=>{},
-			unfoldCode        : ()=>{},
-			updateEditorTheme : ()=>{},
-			cursorPos         : {},
-			themeBundle       : [],
-			updateBrew        : ()=>{}
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			renderer      : this.props.renderer,
-			themeSelector : false,
-			snippets      : [],
-			showHistory   : false,
-			historyExists : false,
-			historyItems  : []
-		};
-	},
-
-	componentDidMount : async function(prevState) {
-		const snippets = this.compileSnippets();
-		this.setState({
-			snippets : snippets
-		});
-	},
-
-	componentDidUpdate : async function(prevProps, prevState) {
-		if(prevProps.renderer != this.props.renderer ||
-			prevProps.theme != this.props.theme ||
-			prevProps.themeBundle != this.props.themeBundle ||
-			prevProps.brew.snippets != this.props.brew.snippets) {
-			this.setState({
-				snippets : this.compileSnippets()
-			});
-		};
-
-		// Update history list if it has changed
-		const checkHistoryItems = await loadHistory(this.props.brew);
-
-		// If all items have the noData property, there is no saved data
-		const checkHistoryExists = !checkHistoryItems.every((historyItem)=>{
-			return historyItem?.noData;
-		});
-		if(prevState.historyExists != checkHistoryExists){
-			this.setState({
-				historyExists : checkHistoryExists
-			});
-		}
-
-		// If any history items have changed, update the list
-		if(checkHistoryExists && checkHistoryItems.some((historyItem, index)=>{
-			return index >= prevState.historyItems.length || !_.isEqual(historyItem, prevState.historyItems[index]);
-		})){
-			this.setState({
-				historyItems : checkHistoryItems
-			});
-		}
-	},
-
-	mergeCustomizer : function(oldValue, newValue, key) {
-		if(key == 'snippets') {
-			const result = _.reverse(_.unionBy(_.reverse(newValue), _.reverse(oldValue), 'name')); // Join snippets together, with preference for the child theme over the parent theme
-			return result.filter((snip)=>snip.gen || snip.subsnippets);
-		};
-	},
-
-	compileSnippets : function() {
-		let compiledSnippets = [];
-
-		let oldSnippets = _.keyBy(compiledSnippets, 'groupName');
-
-		if(this.props.themeBundle.snippets) {
-			for (let snippets of this.props.themeBundle.snippets) {
-				if(typeof(snippets) == 'string')	// load staticThemes as needed; they were sent as just a file name
-					snippets = ThemeSnippets[snippets];
-
-				const newSnippets = _.keyBy(_.cloneDeep(snippets), 'groupName');
-				compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, this.mergeCustomizer));
-
-				oldSnippets = _.keyBy(compiledSnippets, 'groupName');
-			}
-		}
-
-		const userSnippetsasJSON = brewSnippetsToJSON(this.props.brew.title || 'New Document', this.props.brew.snippets, this.props.themeBundle.snippets);
-		compiledSnippets.push(userSnippetsasJSON);
-
-		return compiledSnippets;
-	},
-
-	handleSnippetClick : function(injectedText){
-		this.props.onInject(injectedText);
-	},
-
-	toggleThemeSelector : function(e){
-		if(e.target.tagName != 'SELECT'){
-			this.setState({
-				themeSelector : !this.state.themeSelector
-			});
-		}
-	},
-
-	changeTheme : function(e){
-		if(e.target.value == this.props.currentEditorTheme) return;
-		this.props.updateEditorTheme(e.target.value);
-
-		this.setState({
-			showThemeSelector : false,
-		});
-	},
-
-	renderThemeSelector : function(){
-		return <div className='themeSelector'>
-			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} >
-				{EditorThemes.map((theme, key)=>{
-					return <option key={key} value={theme}>{theme}</option>;
-				})}
-			</select>
-		</div>;
-	},
-
-	renderSnippetGroups : function(){
-		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
-		if(snippets.length === 0) return null;
-
-		return <div className='snippets'>
-			{_.map(snippets, (snippetGroup)=>{
-				return <SnippetGroup
-					brew={this.props.brew}
-					groupName={snippetGroup.groupName}
-					icon={snippetGroup.icon}
-					snippets={snippetGroup.snippets}
-					key={snippetGroup.groupName}
-					onSnippetClick={this.handleSnippetClick}
-					cursorPos={this.props.cursorPos}
-				/>;
-			})
-			}
-		</div>;
-	},
-
-	replaceContent : function(item){
-		return this.props.updateBrew(item);
-	},
-
-	toggleHistoryMenu : function(){
-		this.setState({
-			showHistory : !this.state.showHistory
-		});
-	},
-
-	renderHistoryItems : function() {
-		if(!this.state.historyExists) return;
-
-		return <div className='dropdown'>
-			{_.map(this.state.historyItems, (item, index)=>{
-				if(item.noData || !item.savedAt) return;
-
-				const saveTime = new Date(item.savedAt);
-				const diffMs = new Date() - saveTime;
-				const diffSecs = Math.floor(diffMs / 1000);
-
-				let diffString = `about ${diffSecs} seconds ago`;
-
-				if(diffSecs > 60) diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
-				if(diffSecs > (60 * 60)) diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
-				if(diffSecs > (24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
-				if(diffSecs > (7 * 24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
-
-				return <div className='snippet' key={index} onClick={()=>{this.replaceContent(item);}} >
-					<i className={`fas fa-${index+1}`} />
-					<span className='name' title={saveTime.toISOString()}>v{item.version} : {diffString}</span>
-				</div>;
-			})}
-		</div>;
-	},
-
-	renderEditorButtons : function(){
-		if(!this.props.showEditButtons) return;
-
-		return (
-			<div className='editors'>
-				{this.props.view !== 'meta' && <><div className='historyTools'>
-					<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
-						onClick={this.toggleHistoryMenu} >
-						<i className='fas fa-clock-rotate-left' />
-						{ this.state.showHistory && this.renderHistoryItems() }
-					</div>
-					<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
-						onClick={this.props.undo} >
-						<i className='fas fa-undo' />
-					</div>
-					<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
-						onClick={this.props.redo} >
-						<i className='fas fa-redo' />
-					</div>
-				</div>
-				<div className='codeTools'>
-					<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
-						onClick={this.props.foldCode} >
-						<i className='fas fa-compress-alt' />
-					</div>
-					<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
-						onClick={this.props.unfoldCode} >
-						<i className='fas fa-expand-alt' />
-					</div>
-					<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-						onClick={this.toggleThemeSelector} >
-						<i className='fas fa-palette' />
-						{this.state.themeSelector && this.renderThemeSelector()}
-					</div>
-				</div></>}
-
-				<div className='tabs'>
-					<div className={cx('text', { selected: this.props.view === 'text' })}
-						onClick={()=>this.props.onViewChange('text')}>
-						<i className='fa fa-beer' />
-					</div>
-					<div className={cx('style', { selected: this.props.view === 'style' })}
-						onClick={()=>this.props.onViewChange('style')}>
-						<i className='fa fa-paint-brush' />
-					</div>
-					<div className={cx('snippet', { selected: this.props.view === 'snippet' })}
-						onClick={()=>this.props.onViewChange('snippet')}>
-						<i className='fas fa-th-list' />
-					</div>
-					<div className={cx('meta', { selected: this.props.view === 'meta' })}
-						onClick={()=>this.props.onViewChange('meta')}>
-						<i className='fas fa-info-circle' />
-					</div>
-				</div>
-
-			</div>
-		);
-	},
-
-	render : function(){
-		return <div className='snippetBar'>
-			{this.renderSnippetGroups()}
-			{this.renderEditorButtons()}
-		</div>;
-	}
-});
-
-module.exports = Snippetbar;
-
-const SnippetGroup = createClass({
-	displayName     : 'SnippetGroup',
-	getDefaultProps : function() {
-		return {
-			brew           : {},
-			groupName      : '',
-			icon           : 'fas fa-rocket',
-			snippets       : [],
-			onSnippetClick : function(){},
-		};
-	},
-	handleSnippetClick : function(e, snippet){
-		e.stopPropagation();
-		this.props.onSnippetClick(execute(snippet.gen, this.props));
-	},
-	renderSnippets : function(snippets){
-		return _.map(snippets, (snippet)=>{
-			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
-				<i className={snippet.icon} />
-				<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
-				{snippet.experimental && <span className='beta'>beta</span>}
-				{snippet.disabled     && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
-				{snippet.subsnippets && <>
-					<i className='fas fa-caret-right'></i>
-					<div className='dropdown side'>
-						{this.renderSnippets(snippet.subsnippets)}
-					</div></>}
-			</div>;
-
-		});
-	},
-
-	render : function(){
-		const snippetGroup = `snippetGroup snippetBarButton ${this.props.snippets.length === 0 ? 'disabledSnippets' : ''}`;
-		return <div className={snippetGroup}>
-			<div className='text'>
-				<i className={this.props.icon} />
-				<span className='groupName'>{this.props.groupName}</span>
-			</div>
-			<div className='dropdown'>
-				{this.renderSnippets(this.props.snippets)}
-			</div>
-		</div>;
-	},
-});

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,254 +0,0 @@
-@import (less) './client/icons/customIcons.less';
-@import (less) '././././themes/fonts/5e/fonts.less';
-
-.snippetBar {
-	@menuHeight      : 25px;
-	position         : relative;
-	display          : flex;
-	flex-wrap        : wrap-reverse;
-	justify-content  : space-between;
-	height           : auto;
-	color            : black;
-	background-color : #DDDDDD;
-
-	.snippets {
-		display         : flex;
-		justify-content : flex-start;
-		min-width       : 432.18px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
-	}
-
-	.editors {
-		display         : flex;
-		justify-content : flex-end;
-		min-width       : 250px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
-
-		&:only-child {min-width   : unset; margin-left : auto;}
-
-		>div {
-			display         : flex;
-			flex            : 1;
-			justify-content : space-around;
-
-			&:first-child { border-left : none; }
-
-			& > div {
-				position    : relative;
-				width       : @menuHeight;
-				height      : @menuHeight;
-				line-height : @menuHeight;
-				text-align  : center;
-				cursor      : pointer;
-
-				&.editorTool:not(.active) { cursor : not-allowed; }
-
-				&:hover,&.selected { background-color : #999999; }
-				&.text {
-					.tooltipLeft('Brew Editor');
-				}
-				&.style {
-					.tooltipLeft('Style Editor');
-				}
-				&.meta {
-					.tooltipLeft('Properties');
-				}
-				&.snippet {
-					.tooltipLeft('Snippets');
-				}
-				&.undo {
-					.tooltipLeft('Undo');
-					font-size : 0.75em;
-					color     : grey;
-					&.active { color : inherit; }
-				}
-				&.redo {
-					.tooltipLeft('Redo');
-					font-size : 0.75em;
-					color     : grey;
-					&.active { color : inherit; }
-				}
-				&.foldAll {
-					.tooltipLeft('Fold All');
-					font-size : 0.75em;
-					color     : grey;
-					&.active { color : inherit; }
-				}
-				&.unfoldAll {
-					.tooltipLeft('Unfold All');
-					font-size : 0.75em;
-					color     : grey;
-					&.active { color : inherit; }
-				}
-				&.history {
-					.tooltipLeft('History');
-					position  : relative;
-					font-size : 0.75em;
-					color     : grey;
-					border    : none;
-					&.active { color : inherit; }
-					& > .dropdown {
-						right : -1px;
-						& > .snippet { padding-right : 10px; }
-					}
-				}
-				&.editorTheme {
-					.tooltipLeft('Editor Themes');
-					font-size : 0.75em;
-					color     : inherit;
-					&.active {
-						position         : relative;
-						background-color : #999999;
-					}
-				}
-				&.divider {
-					width      : 5px;
-					background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
-					&:hover { background-color : inherit; }
-				}
-			}
-			.themeSelector {
-				position         : absolute;
-				top              : 25px;
-				right            : 0;
-				z-index          : 10;
-				display          : flex;
-				align-items      : center;
-				justify-content  : center;
-				width            : 170px;
-				height           : inherit;
-				background-color : inherit;
-			}
-		}		
-	}
-	.snippetBarButton {
-		display        : inline-block;
-		height         : @menuHeight;
-		padding        : 0px 5px;
-		font-size      : 0.625em;
-		font-weight    : 800;
-		line-height    : @menuHeight;
-		text-transform : uppercase;
-		text-wrap      : nowrap;
-		cursor         : pointer;
-		&:hover, &.selected { background-color : #999999; }
-		i {
-			margin-right   : 3px;
-			font-size      : 1.4em;
-			vertical-align : middle;
-		}
-	}
-	.toggleMeta {
-		position    : absolute;
-		top         : 0px;
-		right       : 0px;
-		border-left : 1px solid black;
-		.tooltipLeft('Edit Brew Properties');
-	}
-	.snippetGroup {
-
-		&:hover {
-			& > .dropdown { visibility : visible; }
-		}
-		.dropdown {
-			position         : absolute;
-			top              : 100%;
-			z-index          : 1000;
-			visibility       : hidden;
-			padding          : 0px;
-			margin-left      : -5px;
-			background-color : #DDDDDD;
-			.snippet {
-				position    : relative;
-				display     : flex;
-				align-items : center;
-				min-width   : max-content;
-				padding     : 5px;
-				font-size   : 10px;
-				cursor      : pointer;
-				.animate(background-color);
-				i {
-					min-width    : 25px;
-					height       : 1.2em;
-					margin-right : 8px;
-					font-size    : 1.2em;
-					text-align   : center;
-					& ~ i {
-						margin-right : 0;
-						margin-left  : 5px;
-					}
-					/* Fonts */
-					&.font {
-						height : auto;
-						&::before {
-							font-size : 1em;
-							content   : 'ABC';
-						}
-
-						&.OpenSans {font-family : 'OpenSans';}
-						&.CodeBold {font-family : 'CodeBold';}
-						&.CodeLight {font-family : 'CodeLight';}
-						&.ScalySansRemake {font-family : 'ScalySansRemake';}
-						&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
-						&.MrEavesRemake {font-family : 'MrEavesRemake';}
-						&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
-						&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
-						&.WalterTurncoat {font-family : 'WalterTurncoat';}
-						&.Lato {font-family : 'Lato';}
-						&.Courier {font-family : 'Courier';}
-						&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
-						&.Overpass {font-family : 'Overpass';}
-						&.Davek {font-family : 'Davek';}
-						&.Iokharic {font-family : 'Iokharic';}
-						&.Rellanic {font-family : 'Rellanic';}
-						&.TimesNewRoman {font-family : 'Times New Roman';}
-					}
-				}
-				.name { margin-right : auto; }
-				.disabled { text-decoration : line-through; }
-				.beta {
-					align-self    : center;
-					padding       : 4px 6px;
-					margin-left   : 5px;
-					font-family   : monospace;
-					line-height   : 1em;
-					color         : white;
-					background    : grey;
-					border-radius : 12px;
-				}
-				&:hover {
-					background-color : #999999;
-					& > .dropdown {
-						visibility : visible;
-						&.side {
-							top         : 0%;
-							left        : 100%;
-							margin-left : 0;
-							box-shadow  : -1px 1px 2px 0px #999999;
-						}
-					}
-				}
-			}
-		}
-	}
-	.disabledSnippets {
-		color: grey;
-		cursor: not-allowed;
-
-		&:hover { background-color: #DDDDDD;}
-	}
-
-}
-@container editor (width < 683px) {
-	.snippetBar {
-		.editors { 
-			flex            : 1;
-			justify-content : space-between;
-			border-bottom   : 1px solid;
-		}
-		.snippets { 
-			flex            : 1;
-			justify-content : space-evenly; 
-		}
-		.editors > div.history > .dropdown { right : unset; }
-	}
-}
-

client/homebrew/editor/snippets/classfeature.gen.js

@@ -0,0 +1,42 @@
+var _ = require('lodash');
+
+module.exports = function(classname){
+
+	classname = classname || _.sample(['archivist', 'fancyman', 'linguist', 'fletcher',
+			'notary', 'berserker-typist', 'fishmongerer', 'manicurist', 'haberdasher', 'concierge'])
+
+	classname = classname.toLowerCase();
+
+	var hitDie = _.sample([4, 6, 8, 10, 12]);
+
+	var abilityList = ["Strength", "Dexerity", "Constitution", "Wisdom", "Charisma", "Intelligence"];
+	var skillList = ["Acrobatics ", "Animal Handling", "Arcana", "Athletics", "Deception", "History", "Insight", "Intimidation", "Investigation", "Medicine", "Nature", "Perception", "Performance", "Persuasion", "Religion", "Sleight of Hand", "Stealth", "Survival"];
+
+
+	return [
+		"## Class Features",
+		"As a " + classname + ", you gain the following class features",
+		"#### Hit Points",
+		"___",
+		"- **Hit Dice:** 1d" + hitDie + " per " + classname + " level",
+		"- **Hit Points at 1st Level:** " + hitDie + " + your Constituion modifier",
+		"- **Hit Points at Higher Levels:** 1d" + hitDie + " (or " + (hitDie/2 + 1) + ") + your Constituion modifier per " + classname + " level after 1st",
+		"",
+		"#### Proficiencies",
+		"___",
+		"- **Armor:** " + (_.sampleSize(["Light armor", "Medium armor", "Heavy armor", "Shields"], _.random(0,3)).join(', ') || "None"),
+		"- **Weapons:** " + (_.sampleSize(["Squeegee", "Rubber Chicken", "Simple weapons", "Martial weapons"], _.random(0,2)).join(', ') || "None"),
+		"- **Tools:** " + (_.sampleSize(["Artian's tools", "one musical instrument", "Thieve's tools"], _.random(0,2)).join(', ') || "None"),
+		"",
+		"___",
+		"- **Saving Throws:** " + (_.sampleSize(abilityList, 2).join(', ')),
+		"- **Skills:** Choose two from " + (_.sampleSize(skillList, _.random(4, 6)).join(', ')),
+		"",
+		"#### Equipment",
+		"You start with the following equipment, in addition to the equipment granted by your background:",
+		"- *(a)* a martial weapon and a shield or *(b)* two martial weapons",
+		"- *(a)* five javelins or *(b)* any simple melee weapon",
+		"- " + (_.sample(["10 lint fluffs", "1 button", "a cherished lost sock"])),
+		"\n\n\n"
+	].join('\n');
+}

client/homebrew/editor/snippets/classtable.gen.js

@@ -0,0 +1,105 @@
+var _ = require('lodash');
+
+var features = [
+	"Astrological Botany",
+	"Astrological Chemistry",
+	"Biochemical Sorcery",
+	"Civil Alchemy",
+	"Consecrated Biochemistry",
+	"Demonic Anthropology",
+	"Divinatory Mineralogy",
+	"Genetic Banishing",
+	"Hermetic Geography",
+	"Immunological Incantations",
+	"Nuclear Illusionism",
+	"Ritual Astronomy",
+	"Seismological Divination",
+	"Spiritual Biochemistry",
+	"Statistical Occultism",
+	"Police Necromancer",
+	"Sixgun Poisoner",
+	"Pharmaceutical Gunslinger",
+	"Infernal Banker",
+	"Spell Analyst",
+	"Gunslinger Corruptor",
+	"Torque Interfacer",
+	"Exo Interfacer",
+	"Gunpowder Torturer",
+	"Orbital Gravedigger",
+	"Phased Linguist",
+	"Mathematical Pharmacist",
+	"Plasma Outlaw",
+	"Malefic Chemist",
+	"Police Cultist"
+];
+
+var classnames = ['Archivist', 'Fancyman', 'Linguist', 'Fletcher',
+				'Notary', 'Berserker-Typist', 'Fishmongerer', 'Manicurist', 'Haberdasher', 'Concierge'];
+
+var levels = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th", "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th"]
+
+
+module.exports = {
+	full : function(classname){
+		classname = classname || _.sample(classnames)
+
+		var maxes = [4,3,3,3,3,2,2,1,1]
+		var drawSlots = function(Slots){
+			var slots = Number(Slots);
+			return _.times(9, function(i){
+				var max = maxes[i];
+				if(slots < 1) return "—";
+				var res = _.min([max, slots]);
+				slots -= res;
+				return res;
+			}).join(' | ')
+		}
+
+
+		var cantrips = 3;
+		var spells = 1;
+		var slots = 2;
+		return "##### The " + classname + "\n" +
+		"___\n" +
+		"| Level | Proficiency Bonus | Features | Cantrips Known | Spells Known | 1st | 2nd | 3rd | 4th | 5th | 6th | 7th | 8th | 9th |\n"+
+		"|:---:|:---:|:---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n" +
+		_.map(levels, function(levelName, level){
+			var res = [
+				levelName,
+				"+" + Math.ceil(level/5 + 1),
+				_.sampleSize(features, _.sample([0,1,1])).join(', ') || "Ability Score Improvement",
+				cantrips,
+				spells,
+				drawSlots(slots)
+			].join(' | ');
+
+			cantrips += _.random(0,1);
+			spells += _.random(0,1);
+			slots += _.random(0,2);
+
+			return "| " + res + " |";
+		}).join('\n') +'\n\n';
+	},
+
+	half : function(classname){
+		classname = classname || _.sample(classnames)
+
+		var featureScore = 1
+		return "##### The " + classname + "\n" +
+		"___\n" + "___\n" +
+		"| Level | Proficiency Bonus | Features | " + _.sample(features) + "|\n" +
+		"|:---:|:---:|:---|:---:|\n" +
+		_.map(levels, function(levelName, level){
+			var res = [
+				levelName,
+				"+" + Math.ceil(level/5 + 1),
+				_.sampleSize(features, _.sample([0,1,1])).join(', ') || "Ability Score Improvement",
+				"+" + featureScore
+			].join(' | ');
+
+			featureScore += _.random(0,1);
+
+			return "| " + res + " |";
+		}).join('\n') +'\n\n';
+	}
+};

client/homebrew/editor/snippets/fullclass.gen.js

@@ -0,0 +1,43 @@
+var _ = require('lodash');
+
+var ClassFeatureGen = require('./classfeature.gen.js');
+
+var ClassTableGen = require('./classtable.gen.js');
+
+module.exports = function(){
+
+	var classname = _.sample(['Archivist', 'Fancyman', 'Linguist', 'Fletcher',
+			'Notary', 'Berserker-Typist', 'Fishmongerer', 'Manicurist', 'Haberdasher', 'Concierge'])
+
+
+	var image = _.sample(_.map([
+			"http://orig01.deviantart.net/4682/f/2007/099/f/c/bard_stick_figure_by_wrpigeek.png",
+			"http://img07.deviantart.net/a3c9/i/2007/099/3/a/archer_stick_figure_by_wrpigeek.png",
+			"http://pre04.deviantart.net/d596/th/pre/f/2007/099/5/2/adventurer_stick_figure_by_wrpigeek.png",
+			"http://img13.deviantart.net/d501/i/2007/099/d/4/black_mage_stick_figure_by_wrpigeek.png",
+			"http://img09.deviantart.net/5cf3/i/2007/099/d/d/dark_knight_stick_figure_by_wrpigeek.png",
+			"http://pre01.deviantart.net/7a34/th/pre/f/2007/099/6/3/monk_stick_figure_by_wrpigeek.png",
+			"http://img11.deviantart.net/5dcc/i/2007/099/d/1/mystic_knight_stick_figure_by_wrpigeek.png",
+			"http://pre08.deviantart.net/ad45/th/pre/f/2007/099/a/0/thief_stick_figure_by_wrpigeek.png",
+		], function(url){
+			return "<img src = '" + url + "' style='max-width:8cm;max-height:25cm' />"
+	}))
+
+
+	return [
+		image,
+		"",
+		"```",
+		"```",
+		"<div style='margin-top:240px'></div>\n\n",
+		"## " + classname,
+		"Cool intro stuff will go here",
+
+		"\\page",
+		ClassTableGen(classname),
+		ClassFeatureGen(classname),
+
+
+
+	].join('\n') + '\n\n\n';
+};

client/homebrew/editor/snippets/monsterblock.gen.js

@@ -0,0 +1,196 @@
+var _ = require('lodash');
+
+var genList = function(list, max){
+	return _.sampleSize(list, _.random(0,max)).join(', ') || "None";
+}
+
+var getMonsterName = function(){
+	return _.sample([
+		"All-devouring Baseball Imp",
+		"All-devouring Gumdrop Wraith",
+		"Chocolate Hydra",
+		"Devouring Peacock",
+		"Economy-sized Colossus of the Lemonade Stand",
+		"Ghost Pigeon",
+		"Gibbering Duck",
+		"Sparklemuffin Peacock Spider",
+		"Gum Elemental",
+		"Illiterate Construct of the Candy Store",
+		"Ineffable Chihuahua",
+		"Irritating Death Hamster",
+		"Irritating Gold Mouse",
+		"Juggernaut Snail",
+		"Juggernaut of the Sock Drawer",
+		"Koala of the Cosmos",
+		"Mad Koala of the West",
+		"Milk Djinni of the Lemonade Stand",
+		"Mind Ferret",
+		"Mystic Salt Spider",
+		"Necrotic Halitosis Angel",
+		"Pinstriped Famine Sheep",
+		"Ritalin Leech",
+		"Shocker Kangaroo",
+		"Stellar Tennis Juggernaut",
+		"Wailing Quail of the Sun",
+		"Angel Pigeon",
+		"Anime Sphinx",
+		"Bored Avalanche Sheep of the Wasteland",
+		"Devouring Nougat Sphinx of the Sock Drawer",
+		"Djinni of the Footlocker",
+		"Ectoplasmic Jazz Devil",
+		"Flatuent Angel",
+		"Gelatinous Duck of the Dream-Lands",
+		"Gelatinous Mouse",
+		"Golem of the Footlocker",
+		"Lich Wombat",
+		"Mechanical Sloth of the Past",
+		"Milkshake Succubus",
+		"Puffy Bone Peacock of the East",
+		"Rainbow Manatee",
+		"Rune Parrot",
+		"Sand Cow",
+		"Sinister Vanilla Dragon",
+		"Snail of the North",
+		"Spider of the Sewer",
+		"Stellar Sawdust Leech",
+		"Storm Anteater of Hell",
+		"Stupid Spirit of the Brewery",
+		"Time Kangaroo",
+		"Tomb Poodle",
+	]);
+}
+
+var getType = function(){
+	return _.sample(['Tiny', 'Small', 'Medium', 'Large', 'Gargantuan', 'Stupidly vast']) + " " + _.sample(['beast', 'fiend', 'annoyance', 'guy', 'cutie'])
+}
+
+var getAlignment = function(){
+	return _.sample([
+		"annoying evil",
+		"chaotic gossipy",
+		"chaotic sloppy",
+		"depressed neutral",
+		"lawful bogus",
+		"lawful coy",
+		"manic-depressive evil",
+		"narrow-minded neutral",
+		"neutral annoying",
+		"neutral ignorant",
+		"oedpipal neutral",
+		"silly neutral",
+		"unoriginal neutral",
+		"weird neutral",
+		"wordy evil",
+		"unaligned"
+	]);
+};
+
+var getStats = function(){
+	return '>|' + _.times(6, function(){
+		var num = _.random(1,20);
+		var mod = Math.ceil(num/2 - 5)
+		return num + " (" + (mod >= 0 ? '+'+mod : mod ) + ")"
+	}).join('|') + '|';
+}
+
+var genAbilities = function(){
+	return _.sample([
+		"> ***Pack Tactics.*** These guys work together. Like super well, you don't even know.",
+		"> ***False Appearance. *** While the armor reamin motionless, it is indistinguishable from a normal suit of armor.",
+	]);
+}
+
+var genAction = function(){
+	var name = _.sample([
+		"Abdominal Drop",
+		"Airplane Hammer",
+		"Atomic Death Throw",
+		"Bulldog Rake",
+		"Corkscrew Strike",
+		"Crossed Splash",
+		"Crossface Suplex",
+		"DDT Powerbomb",
+		"Dual Cobra Wristlock",
+		"Dual Throw",
+		"Elbow Hold",
+		"Gory Body Sweep",
+		"Heel Jawbreaker",
+		"Jumping Driver",
+		"Open Chin Choke",
+		"Scorpion Flurry",
+		"Somersault Stump Fists",
+		"Suffering Wringer",
+		"Super Hip Submission",
+		"Super Spin",
+		"Team Elbow",
+		"Team Foot",
+		"Tilt-a-whirl Chin Sleeper",
+		"Tilt-a-whirl Eye Takedown",
+		"Turnbuckle Roll"
+	])
+
+	return "> ***" + name + ".*** *Melee Weapon Attack:* +4 to hit, reach 5ft., one target. *Hit* 5 (1d6 + 2) ";
+}
+
+
+module.exports = {
+
+	full : function(){
+		return [
+			"___",
+			"___",
+			"> ## " + getMonsterName(),
+			">*" + getType() + ", " + getAlignment() + "*",
+			"> ___",
+			"> - **Armor Class** " + _.random(10,20),
+			"> - **Hit Points** " + _.random(1, 150) + "(1d4 + 5)",
+			"> - **Speed** " + _.random(0,50) + "ft.",
+			">___",
+			">|STR|DEX|CON|INT|WIS|CHA|",
+			">|:---:|:---:|:---:|:---:|:---:|:---:|",
+			getStats(),
+			">___",
+			"> - **Condition Immunities** " + genList(["groggy", "swagged", "weak-kneed", "buzzed", "groovy", "melancholy", "drunk"], 3),
+			"> - **Senses** passive Perception " + _.random(3, 20),
+			"> - **Languages** " + genList(["Common", "Pottymouth", "Gibberish", "Latin", "Jive"], 2),
+			"> - **Challenge** " + _.random(0, 15) + " (" + _.random(10,10000)+ " XP)",
+			"> ___",
+			_.times(_.random(3,6), function(){
+				return genAbilities()
+			}).join('\n>\n'),
+			"> ### Actions",
+			_.times(_.random(4,6), function(){
+				return genAction()
+			}).join('\n>\n'),
+		].join('\n') + '\n\n\n';
+	},
+
+	half : function(){
+		return [
+			"___",
+			"> ## " + getMonsterName(),
+			">*" + getType() + ", " + getAlignment() + "*",
+			"> ___",
+			"> - **Armor Class** " + _.random(10,20),
+			"> - **Hit Points** " + _.random(1, 150) + "(1d4 + 5)",
+			"> - **Speed** " + _.random(0,50) + "ft.",
+			">___",
+			">|STR|DEX|CON|INT|WIS|CHA|",
+			">|:---:|:---:|:---:|:---:|:---:|:---:|",
+			getStats(),
+			">___",
+			"> - **Condition Immunities** " + genList(["groggy", "swagged", "weak-kneed", "buzzed", "groovy", "melancholy", "drunk"], 3),
+			"> - **Senses** passive Perception " + _.random(3, 20),
+			"> - **Languages** " + genList(["Common", "Pottymouth", "Gibberish", "Latin", "Jive"], 2),
+			"> - **Challenge** " + _.random(0, 15) + " (" + _.random(10,10000)+ " XP)",
+			"> ___",
+			_.times(_.random(0,2), function(){
+				return genAbilities()
+			}).join('\n>\n'),
+			"> ### Actions",
+			_.times(_.random(1,2), function(){
+				return genAction()
+			}).join('\n>\n'),
+		].join('\n') + '\n\n\n';
+	}
+}

client/homebrew/editor/snippets/snippets.js

@@ -0,0 +1,175 @@
+var SpellGen = require('./spell.gen.js');
+var ClassTableGen = require('./classtable.gen.js');
+var MonsterBlockGen = require('./monsterblock.gen.js');
+var ClassFeatureGen = require('./classfeature.gen.js');
+var FullClassGen = require('./fullclass.gen.js');
+
+
+
+module.exports = [
+
+	{
+		groupName : 'Editor',
+		icon : 'fa-pencil',
+		snippets : [
+			{
+				name : "Column Break",
+				icon : 'fa-columns',
+				gen : "```\n```\n\n"
+			},
+			{
+				name : "New Page",
+				icon : 'fa-file-text',
+				gen : "\\page\n\n"
+			},
+			{
+				name : "Vertical Spacing",
+				icon : 'fa-arrows-v',
+				gen : "<div style='margin-top:140px'></div>\n\n"
+			},
+			{
+				name : "Image",
+				icon : 'fa-image',
+				gen : [
+					"<img ",
+					"  src='https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg' ",
+					"  style='width:325px' />",
+					"Credit: Kyounghwan Kim"
+				].join('\n')
+			},
+			{
+				name : "Background Image",
+				icon : 'fa-tree',
+				gen : [
+					"<img ",
+					"  src='http://i.imgur.com/hMna6G0.png' ",
+					"  style='position:absolute; top:50px; right:30px; width:280px' />"
+				].join('\n')
+			},
+
+			{
+				name : "Page Number",
+				icon : 'fa-bookmark',
+				gen : "<div class='pageNumber'>1</div>\n<div class='footnote'>PART 1 | FANCINESS</div>\n\n"
+			},
+
+
+		]
+	},
+
+
+	/************************* PHB ********************/
+
+	{
+		groupName : 'PHB',
+		icon : 'fa-book',
+		snippets : [
+			{
+				name : 'Spell',
+				icon : 'fa-magic',
+				gen : SpellGen,
+			},
+			{
+				name : 'Class Feature',
+				icon : 'fa-trophy',
+				gen : ClassFeatureGen,
+			},
+			{
+				name : 'Note',
+				icon : 'fa-sticky-note',
+				gen : function(){
+					return [
+						"> ##### Time to Drop Knowledge",
+						"> Use notes to point out some interesting information. ",
+						"> ",
+						"> **Tables and lists** both work within a note."
+					].join('\n');
+				},
+			},
+			{
+				name : 'Monster Stat Block',
+				icon : 'fa-bug',
+				gen : MonsterBlockGen.half,
+			},
+			{
+				name : 'Wide Monster Stat Block',
+				icon : 'fa-paw',
+				gen : MonsterBlockGen.full,
+			}
+		]
+	},
+
+
+
+	/*********************  TABLES *********************/
+
+	{
+		groupName : 'Tables',
+		icon : 'fa-table',
+		snippets : [
+			{
+				name : "Class Table",
+				icon : 'fa-table',
+				gen : ClassTableGen.full,
+			},
+			{
+				name : "Half Class Table",
+				icon : 'fa-list-alt',
+				gen : ClassTableGen.half,
+			},
+			{
+				name : 'Table',
+				icon : 'fa-th-list',
+				gen : function(){
+					return [
+						"##### Cookie Tastiness",
+						"| Tastiness | Cookie Type |",
+						"|:----:|:-------------|",
+						"| -5  | Raisin |",
+						"| 8th  | Chocolate Chip |",
+						"| 11th | 2 or lower |",
+						"| 14th | 3 or lower |",
+						"| 17th | 4 or lower |\n\n",
+					].join('\n');
+				},
+			}
+		]
+	},
+
+
+
+
+	/**************** PRINT *************/
+
+	{
+		groupName : 'Print',
+		icon : 'fa-print',
+		snippets : [
+			{
+				name : "A4 PageSize",
+				icon : 'fa-file-o',
+				gen : ['<style>',
+					'  .phb{',
+					'    width : 210mm;',
+					'    height : 296.8mm;',
+					'  }',
+					'</style>'
+				].join('\n')
+			},
+			{
+				name : "Ink Friendly",
+				icon : 'fa-tint',
+				gen : ['<style>',
+					'  .phb{ background : white;}',
+					'  .phb img{ display : none;}',
+					'  .phb hr+blockquote{background : white;}',
+					'</style>',
+					''
+				].join('\n')
+			},
+		]
+	},
+
+]
+
+

client/homebrew/editor/snippets/spell.gen.js

@@ -0,0 +1,78 @@
+var _ = require('lodash');
+
+module.exports = function(){
+
+
+	var spellNames = [
+		"Astral Rite of Acne",
+		"Create Acne",
+		"Cursed Ramen Erruption",
+		"Dark Chant of the Dentists",
+		"Erruption of Immaturity",
+		"Flaming Disc of Inconvenience",
+		"Heal Bad Hygene",
+		"Heavenly Transfiguration of the Cream Devil",
+		"Hellish Cage of Mucus",
+		"Irritate Peanut Butter Fairy",
+		"Luminous Erruption of Tea",
+		"Mystic Spell of the Poser",
+		"Sorcerous Enchantment of the Chimneysweep",
+		"Steak Sauce Ray",
+		"Talk to Groupie",
+		"Astonishing Chant of Chocolate",
+		"Astounding Pasta Puddle",
+		"Ball of Annoyance",
+		"Cage of Yarn",
+		"Control Noodles Elemental",
+		"Create Nervousness",
+		"Cure Baldness",
+		"Cursed Ritual of Bad Hair",
+		"Dispell Piles in Dentist",
+		"Eliminate Florists",
+		"Illusionary Transfiguration of the Babysitter",
+		"Necromantic Armor of Salad Dressing",
+		"Occult Transfiguration of Foot Fetish",
+		"Protection from Mucus Giant",
+		"Tinsel Blast",
+		"Alchemical Evocation of the Goths",
+		"Call Fangirl",
+		"Divine Spell of Crossdressing",
+		"Dominate Ramen Giant",
+		"Eliminate Vindictiveness in Gym Teacher",
+		"Extra-Planar Spell of Irritation",
+		"Induce Whining in Babysitter",
+		"Invoke Complaining",
+		"Magical Enchantment of Arrogance",
+		"Occult Globe of Salad Dressing",
+		"Overwhelming Enchantment of the Chocolate Fairy",
+		"Sorcerous Dandruff Globe",
+		"Spiritual Invocation of the Costumers",
+		"Ultimate Rite of the Confetti Angel",
+		"Ultimate Ritual of Mouthwash",
+	];
+
+
+	var level = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th"];
+	var spellSchools = ["abjuration", "conjuration", "divination", "enchantment", "evocation", "illusion", "necromancy", "transmutation"];
+
+
+	var components = _.sampleSize(["V", "S", "M"], _.random(1,3)).join(', ');
+	if(components.indexOf("M") !== -1){
+		components += " (" +  _.sampleSize(['a small doll', 'a crushed button worth at least 1cp', 'discarded gum wrapper'], _.random(1,3)).join(', ') + ")"
+	}
+
+	return [
+		"#### " + _.sample(spellNames),
+		"*" + _.sample(level) + "-level " + _.sample(spellSchools) + "*",
+		"___",
+		"- **Casting Time:** 1 action",
+		"- **Range:** " + _.sample(["Self", "Touch", "30 feet", "60 feet"]),
+		"- **Components:** " + components,
+		"- **Duration:** " + _.sample(["Until dispelled", "1 round", "Instantaneous", "Concentration, up to 10 minutes", "1 hour"]),
+		"",
+		"A flame, equivalent in brightness to a torch, springs from from an object that you touch. ",
+		"The effect look like a regular flame, but it creates no heat and doesn't use oxygen. ",
+		"A *continual flame* can be covered or hidden but not smothered or quenched.",
+		"\n\n\n"
+	].join('\n');
+}

client/homebrew/editor/tagInput/tagInput.jsx

@@ -1,105 +0,0 @@
-require('./tagInput.less');
-const React = require('react');
-const { useState, useEffect } = React;
-const _     = require('lodash');
-
-const TagInput = ({ unique = true, values = [], ...props })=>{
-	const [tempInputText, setTempInputText] = useState('');
-	const [tagList, setTagList] = useState(values.map((value)=>({ value, editing: false })));
-
-	useEffect(()=>{
-		handleChange(tagList.map((context)=>context.value));
-	}, [tagList]);
-
-	const handleChange = (value)=>{
-		props.onChange({
-			target : { value }
-		});
-	};
-
-	const handleInputKeyDown = ({ evt, value, index, options = {} })=>{
-		if(_.includes(['Enter', ','], evt.key)) {
-			evt.preventDefault();
-			submitTag(evt.target.value, value, index);
-			if(options.clear) {
-				setTempInputText('');
-			}
-		}
-	};
-
-	const submitTag = (newValue, originalValue, index)=>{
-		setTagList((prevContext)=>{
-			// remove existing tag
-			if(newValue === null){
-				return [...prevContext].filter((context, i)=>i !== index);
-			}
-			// add new tag
-			if(originalValue === null){
-				return [...prevContext, { value: newValue, editing: false }];
-			}
-			// update existing tag
-			return prevContext.map((context, i)=>{
-				if(i === index) {
-					return { ...context, value: newValue, editing: false };
-				}
-				return context;
-			});
-		});
-	};
-
-	const editTag = (index)=>{
-		setTagList((prevContext)=>{
-			return prevContext.map((context, i)=>{
-				if(i === index) {
-					return { ...context, editing: true };
-				}
-				return { ...context, editing: false };
-			});
-		});
-	};
-
-	const renderReadTag = (context, index)=>{
-		return (
-			<li key={index}
-				data-value={context.value}
-				className='tag'
-				onClick={()=>editTag(index)}>
-				{context.value}
-				<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index);}}><i className='fa fa-times fa-fw'/></button>
-			</li>
-		);
-	};
-
-	const renderWriteTag = (context, index)=>{
-		return (
-			<input type='text'
-				key={index}
-				defaultValue={context.value}
-				onKeyDown={(evt)=>handleInputKeyDown({ evt, value: context.value, index: index })}
-				autoFocus
-			/>
-		);
-	};
-
-	return (
-		<div className='field'>
-			<label>{props.label}</label>
-			<div className='value'>
-				<ul className='list'>
-					{tagList.map((context, index)=>{ return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
-				</ul>
-
-				<input
-					type='text'
-					className='value'
-					placeholder={props.placeholder}
-					value={tempInputText}
-					onChange={(e)=>setTempInputText(e.target.value)}
-					onKeyDown={(evt)=>handleInputKeyDown({ evt, value: null, options: { clear: true } })}
-				/>
-			</div>
-		</div>
-	);
-};
-
-module.exports = TagInput;

client/homebrew/googleDrive.svg

@@ -1,8 +0,0 @@
-<svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg">
-	<path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
-	<path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
-	<path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
-	<path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
-	<path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
-	<path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
-</svg>

client/homebrew/homebrew.jsx

@@ -1,83 +1,56 @@
-/* eslint-disable camelcase */
-import 'core-js/es/string/to-well-formed.js'; //Polyfill for older browsers
-import './homebrew.less';
-import React from 'react';
-import { StaticRouter as Router, Route, Routes, useParams, useSearchParams } from 'react-router';
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
 
-import { updateLocalStorage } from './utils/updateLocalStorage/updateLocalStorageKeys.js';
+var CreateRouter = require('pico-router').createRouter;
 
-import HomePage    from './pages/homePage/homePage.jsx';
-import EditPage    from './pages/editPage/editPage.jsx';
-import UserPage    from './pages/userPage/userPage.jsx';
-import SharePage   from './pages/sharePage/sharePage.jsx';
-import NewPage     from './pages/newPage/newPage.jsx';
-import ErrorPage   from './pages/errorPage/errorPage.jsx';
-import VaultPage   from './pages/vaultPage/vaultPage.jsx';
-import AccountPage from './pages/accountPage/accountPage.jsx';
+var HomePage = require('./pages/homePage/homePage.jsx');
+var EditPage = require('./pages/editPage/editPage.jsx');
+var SharePage = require('./pages/sharePage/sharePage.jsx');
+var NewPage = require('./pages/newPage/newPage.jsx');
 
-const WithRoute = ({ el: Element, ...rest })=>{
-	const params = useParams();
-	const [searchParams] = useSearchParams();
-	const queryParams = Object.fromEntries(searchParams?.entries() || []);
-	return <Element {...rest} {...params} query={queryParams} />;
-};
+var Router;
+var Homebrew = React.createClass({
+	getDefaultProps: function() {
+		return {
+			url : "",
+			welcomeText : "",
+			changelog : "",
+			brew : {
+				title : '',
+				text : '',
+				shareId : null,
+				editId : null,
+				createdAt : null,
+				updatedAt : null,
+			}
+		};
+	},
+	componentWillMount: function() {
+		Router = CreateRouter({
+			'/homebrew/edit/:id' : (args) => {
+				return <EditPage id={args.id} brew={this.props.brew} />
+			},
 
-const Homebrew = (props)=>{
-	const {
-		url = '',
-		version = '0.0.0',
-		account = null,
-		config,
-		brew = {
-			title     : '',
-			text      : '',
-			shareId   : null,
-			editId    : null,
-			createdAt : null,
-			updatedAt : null,
-			lang      : ''
-		},
-		userThemes,
-		brews
-	} = props;
-
-	global.account       = account;
-	global.version       = version;
-	global.config        = config;
-
-	const backgroundObject = ()=>{
-		if(global.config.deployment || (config.local && config.development)){
-  			const bgText = global.config.deployment || 'Local';
-  			return {
-    			backgroundImage : `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${bgText}</text></svg>")`
-  			};
-		}
-		return null;
-	};
-	updateLocalStorage();
-
-	return (
-		<Router location={url}>
-			<div className={`homebrew${(config.deployment || config.local) ? ' deployment' : ''}`} style={backgroundObject()}>
-				<Routes>
-					<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={brew} userThemes={userThemes}/>} />
-					<Route path='/share/:id' element={<WithRoute el={SharePage} brew={brew} />} />
-					<Route path='/new/:id' element={<WithRoute el={NewPage} brew={brew} userThemes={userThemes}/>} />
-					<Route path='/new' element={<WithRoute el={NewPage} userThemes={userThemes}/> } />
-					<Route path='/user/:username' element={<WithRoute el={UserPage} brews={brews} />} />
-					<Route path='/vault' element={<WithRoute el={VaultPage}/>}/>
-					<Route path='/changelog' element={<WithRoute el={SharePage} brew={brew} disableMeta={true} />} />
-					<Route path='/faq' element={<WithRoute el={SharePage} brew={brew} disableMeta={true} />} />
-					<Route path='/migrate' element={<WithRoute el={SharePage} brew={brew} disableMeta={true} />} />
-					<Route path='/account' element={<WithRoute el={AccountPage} brew={brew} accountDetails={brew.accountDetails} />} />
-					<Route path='/legacy' element={<WithRoute el={HomePage} brew={brew} />} />
-					<Route path='/error' element={<WithRoute el={ErrorPage} brew={brew} />} />
-					<Route path='/' element={<WithRoute el={HomePage} brew={brew} />} />
-					<Route path='/*' element={<WithRoute el={HomePage} brew={brew} />} />
-				</Routes>
+			'/homebrew/share/:id' : (args) => {
+				return <SharePage id={args.id} brew={this.props.brew} />
+			},
+			'/homebrew/changelog' : (args) => {
+				return <SharePage brew={{title : 'Changelog', text : this.props.changelog}} />
+			},
+			'/homebrew/new' : (args) => {
+				return <NewPage />
+			},
+			'/homebrew*' : <HomePage welcomeText={this.props.welcomeText} />,
+		});
+	},
+	render : function(){
+		return(
+			<div className='homebrew'>
+				<Router initialUrl={this.props.url}/>
 			</div>
-		</Router>
-	);
-};
+		);
+	}
+});
 
-module.exports = Homebrew;
+module.exports = Homebrew;

client/homebrew/homebrew.less

@@ -1,35 +1,17 @@
-@import 'naturalcrit/styles/core.less';
-.homebrew {
-	height : 100%;
-	background-color:@steel;
-	&.deployment { background-color : darkred; }
-
-	.sitePage {
-		display          : flex;
-		flex-direction   : column;
-		height           : 100%;
-		overflow-y       : hidden;
-		.content {
-			position   : relative;
-			flex       : auto;
-			height     : calc(~'100% - 29px'); //Navbar height
-			overflow-y : hidden;
-		}
-		&.listPage .content {
-			overflow-y : scroll;
-
-			&::-webkit-scrollbar {
-				width : 20px;
-				&:horizontal {
-					width  : auto;
-					height : 20px;
-				}
-				&-thumb {
-					background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
-					&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
-				}
-				&-corner { visibility : hidden; }
-			}
-		}
-	}
+@import 'naturalcrit/styles/core.less';
+.homebrew{
+	height           : 100%;
+
+	//TODO: Consider making backgroudn color lighter
+	background-color : @steel;
+	.page{
+		display        : flex;
+		height         : 100%;
+		flex-direction : column;
+		.content{
+			position : relative;
+			height   : calc(~"100% - 29px"); //Navbar height
+			flex     : auto;
+		}
+	}
 }

client/homebrew/navbar/account.navitem.jsx

@@ -1,114 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const Nav = require('naturalcrit/nav/nav.jsx');
-const request = require('superagent');
-
-const Account = createClass({
-	displayName     : 'AccountNavItem',
-	getInitialState : function() {
-		return {
-			url : ''
-		};
-	},
-
-	componentDidMount : function(){
-		if(typeof window !== 'undefined'){
-			this.setState({
-				url : window.location.href
-			});
-		}
-	},
-
-	handleLogout : function(){
-		if(confirm('Are you sure you want to log out?')) {
-			// Reset divider position
-			window.localStorage.removeItem('naturalcrit-pane-split');
-			// Clear login cookie
-			let domain = '';
-			if(window.location?.hostname) {
-				let domainArray = window.location.hostname.split('.');
-				if(domainArray.length > 2){
-					domainArray = [''].concat(domainArray.slice(-2));
-				}
-				domain = domainArray.join('.');
-			}
-			document.cookie = `nc_session=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;samesite=lax;${domain ? `domain=${domain}` : ''}`;
-			window.location = '/';
-		}
-	},
-
-	localLogin : async function(){
-		const username = prompt('Enter username:');
-		if(!username) {return;}
-
-		const expiry = new Date;
-		expiry.setFullYear(expiry.getFullYear() + 1);
-
-		const token = await request.post('/local/login')
-				.send({ username })
-				.then((response)=>{
-					return response.body;
-				})
-				.catch((err)=>{
-					console.warn(err);
-				});
-		if(!token) return;
-
-		document.cookie = `nc_session=${token};expires=${expiry};path=/;samesite=lax;${window.domain ? `domain=${window.domain}` : ''}`;
-		window.location.reload(true);
-	},
-
-	render : function(){
-		//  Logged in
-		if(global.account){
-			return <Nav.dropdown>
-				<Nav.item
-					className='account username'
-					color='orange'
-					icon='fas fa-user'
-				>
-					{global.account.username}
-				</Nav.item>
-				<Nav.item
-					href={`/user/${encodeURI(global.account.username)}`}
-					color='yellow'
-					icon='fas fa-beer'
-				>
-					brews
-				</Nav.item>
-				<Nav.item
-					className='account'
-					color='orange'
-					icon='fas fa-user'
-					href='/account'
-				>
-					account
-				</Nav.item>
-				<Nav.item
-					className='logout'
-					color='red'
-					icon='fas fa-power-off'
-					onClick={this.handleLogout}
-				>
-					logout
-				</Nav.item>
-			</Nav.dropdown>;
-		}
-
-		//  Logged out
-		//  LOCAL ONLY
-		if(global.config.local) {
-			return <Nav.item color='teal' icon='fas fa-sign-in-alt' onClick={this.localLogin}>
-				login
-			</Nav.item>;
-		};
-
-		// Logged out
-		// Production site
-		return <Nav.item href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`} color='teal' icon='fas fa-sign-in-alt'>
-			login
-		</Nav.item>;
-	}
-});
-
-module.exports = Account;

client/homebrew/navbar/editTitle.navitem.jsx

@@ -0,0 +1,33 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+var Nav = require('naturalcrit/nav/nav.jsx');
+
+const MAX_TITLE_LENGTH = 50;
+
+
+var EditTitle = React.createClass({
+	getDefaultProps: function() {
+		return {
+			title : '',
+			onChange : function(){}
+		};
+	},
+
+	handleChange : function(e){
+		if(e.target.value.length > MAX_TITLE_LENGTH) return;
+		this.props.onChange(e.target.value);
+	},
+	render : function(){
+		return <Nav.item className='editTitle'>
+			<input placeholder='Brew Title' type='text' value={this.props.title} onChange={this.handleChange} />
+
+			<div className={cx('charCount', {'max' : this.props.title.length >= MAX_TITLE_LENGTH})}>
+				{this.props.title.length}/{MAX_TITLE_LENGTH}
+			</div>
+		</Nav.item>
+	},
+
+});
+
+module.exports = EditTitle;

client/homebrew/navbar/error-navitem.jsx

@@ -1,147 +0,0 @@
-require('./error-navitem.less');
-const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-const ErrorNavItem = ({ error = '', clearError })=>{
-	const response    = error.response;
-	const errorCode   = error.code;
-	const status      = response?.status;
-	const HBErrorCode = response?.body?.HBErrorCode;
-	const message     = response?.body?.message;
-
-	let errMsg = '';
-	try {
-		errMsg += `${error.toString()}\n\n`;
-		errMsg += `\`\`\`\n${error.stack}\n`;
-		errMsg += `${JSON.stringify(response?.error, null, '  ')}\n\`\`\``;
-		console.log(errMsg);
-	} catch {}
-
-	if(status === 409) {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				{message ?? 'Conflict: please refresh to get latest changes'}
-			</div>
-		</Nav.item>;
-	}
-
-	if(status === 412) {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
-			</div>
-		</Nav.item>;
-	}
-
-	if(HBErrorCode === '04') {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				You are no longer signed in as an author of
-				this brew! Were you signed out from a different
-				window? Visit our log in page, then try again!
-				<br></br>
-				<a target='_blank' rel='noopener noreferrer'
-					href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
-					<div className='confirm'>
-						Sign In
-					</div>
-				</a>
-				<div className='deny'>
-					Not Now
-				</div>
-			</div>
-		</Nav.item>;
-	}
-
-	if(response?.body?.errors?.[0].reason == 'storageQuotaExceeded') {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-		Oops!
-			<div className='errorContainer' onClick={clearError}>
-			Can't save because your Google Drive seems to be full!
-			</div>
-		</Nav.item>;
-	}
-
-	if(response?.req.url.match(/^\/api.*Google.*$/m)){
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				Looks like your Google credentials have
-				expired! Visit our log in page to sign out
-				and sign back in with Google,
-				then try saving again!
-				<br></br>
-				<a target='_blank' rel='noopener noreferrer'
-					href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
-					<div className='confirm'>
-						Sign In
-					</div>
-				</a>
-				<div className='deny'>
-					Not Now
-				</div>
-			</div>
-		</Nav.item>;
-	}
-
-	if(HBErrorCode === '09') {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				Looks like there was a problem retreiving
-				the theme, or a theme that it inherits,
-				for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-					{response.body.brewId}</a> still exists!
-			</div>
-		</Nav.item>;
-	}
-
-	if(HBErrorCode === '10') {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				Looks like the brew you have selected
-				as a theme is not tagged for use as a
-				theme. Verify that
-				brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-					{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
-			</div>
-		</Nav.item>;
-	}
-
-	if(HBErrorCode === '13') {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				Server has lost connection to the database.
-			</div>
-		</Nav.item>;
-	}
-
-	if(errorCode === 'ECONNABORTED') {
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer' onClick={clearError}>
-				The request to the server was interrupted or timed out.
-				This can happen due to a network issue, or if
-				trying to save a particularly large brew.
-				Please check your internet connection and try again.
-			</div>
-		</Nav.item>;
-	}
-
-	return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-		Oops!
-		<div className='errorContainer'>
-			Looks like there was a problem saving. <br />
-			Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
-			here
-			</a>.
-		</div>
-	</Nav.item>;
-};
-
-module.exports = ErrorNavItem;

client/homebrew/navbar/error-navitem.less

@@ -1,70 +0,0 @@
-.navItem.error {
-	position         : relative;
-	background-color : @red;
-}
-
-.errorContainer {
-	position           : absolute;
-	top                : 100%;
-	left               : 50%;
-	z-index            : 1000;
-	width              : 140px;
-	padding            : 3px;
-	font-size          : 10px;
-	font-weight        : 800;
-	color              : white;
-	text-align         : center;
-	text-transform     : uppercase;
-	background-color   : #333333;
-	border             : 3px solid #444444;
-	border-radius      : 5px;
-	transform          : translate(-50% + 3px, 10px);
-	animation-name     : glideDown;
-	animation-duration : 0.4s;
-	.lowercase { text-transform : none; }
-	a { color : @teal; }
-	&::before {
-		position      : absolute;
-		top           : -23px;
-		left          : 53px;
-		width         : 0px;
-		height        : 0px;
-		content       : '';
-		border-top    : 10px solid transparent;
-		border-right  : 10px solid transparent;
-		border-bottom : 10px solid #444444;
-		border-left   : 10px solid transparent;
-	}
-	&::after {
-		position      : absolute;
-		top           : -19px;
-		left          : 53px;
-		width         : 0px;
-		height        : 0px;
-		content       : '';
-		border-top    : 10px solid transparent;
-		border-right  : 10px solid transparent;
-		border-bottom : 10px solid #333333;
-		border-left   : 10px solid transparent;
-	}
-	.deny {
-		display          : inline-block;
-		width            : 48%;
-		padding          : 5px;
-		margin           : 1px;
-		background-color : #333333;
-		border-left      : 1px solid #666666;
-		.animate(background-color);
-		&:hover { background-color : red; }
-	}
-	.confirm {
-		display          : inline-block;
-		width            : 48%;
-		padding          : 5px;
-		margin           : 1px;
-		color            : white;
-		background-color : #333333;
-		.animate(background-color);
-		&:hover { background-color : teal; }
-	}
-}

client/homebrew/navbar/help.navitem.jsx

@@ -1,34 +0,0 @@
-const React = require('react');
-const dedent = require('dedent-tabs').default;
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-module.exports = function(props){
-	return <Nav.dropdown>
-		<Nav.item color='grey' icon='fas fa-question-circle'>
-			need help?
-		</Nav.item>
-		<Nav.item color='red' icon='fas fa-fw fa-bug'
-			href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&text=${encodeURIComponent(dedent`
-			- **Browser(s)** :
-			- **Operating System** :  
-			- **Legacy or v3 Renderer** :
-			- **Issue** :  `)}`}
-			newTab={true}
-			rel='noopener noreferrer'>
-			report issue
-		</Nav.item>
-		<Nav.item color='green' icon='fas fa-question-circle'
-			href='/faq'
-			newTab={true}
-			rel='noopener noreferrer'>
-			FAQ
-		</Nav.item>
-		<Nav.item color='blue' icon='fas fa-fw fa-file-import'
-			href='/migrate'
-			newTab={true}
-			rel='noopener noreferrer'>
-			migrate
-		</Nav.item>
-	</Nav.dropdown>;
-};

client/homebrew/navbar/issue.navitem.jsx

@@ -0,0 +1,8 @@
+var React = require('react');
+var Nav = require('naturalcrit/nav/nav.jsx');
+
+module.exports = function(props){
+	return <Nav.item newTab={true} href='https://github.com/stolksdorf/naturalcrit/issues' color='red' icon='fa-bug'>
+		report issue
+	</Nav.item>
+};

client/homebrew/navbar/metadata.navitem.jsx

@@ -1,89 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const Moment = require('moment');
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-
-const MetadataNav = createClass({
-	displayName     : 'MetadataNav',
-	getDefaultProps : function() {
-		return {
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			showMetaWindow : false
-		};
-	},
-
-	componentDidMount : function() {
-	},
-
-	toggleMetaWindow : function(){
-		this.setState((prevProps)=>({
-			showMetaWindow : !prevProps.showMetaWindow
-		}));
-	},
-
-	getAuthors : function(){
-		if(!this.props.brew.authors || this.props.brew.authors.length == 0) return 'No authors';
-		return <>
-			{this.props.brew.authors.map((author, idx, arr)=>{
-				const spacer = arr.length - 1 == idx ? <></> : <span>, </span>;
-				return <span key={idx}><a className='userPageLink' href={`/user/${author}`}>{author}</a>{spacer}</span>;
-			})}
-		</>;
-	},
-
-	getTags : function(){
-		if(!this.props.brew.tags || this.props.brew.tags.length == 0) return 'No tags';
-		return <>
-			{this.props.brew.tags.map((tag, idx)=>{
-				return <span className='tag' key={idx}>{tag}</span>;
-			})}
-		</>;
-	},
-
-	getSystems : function(){
-		if(!this.props.brew.systems || this.props.brew.systems.length == 0) return 'No systems';
-		return this.props.brew.systems.join(', ');
-	},
-
-	renderMetaWindow : function(){
-		return <div className={`window ${this.state.showMetaWindow ? 'active' : 'inactive'}`}>
-			<div className='row'>
-				<h4>Description</h4>
-				<p>{this.props.brew.description || 'No description.'}</p>
-			</div>
-			<div className='row'>
-				<h4>Authors</h4>
-				<p>{this.getAuthors()}</p>
-			</div>
-			<div className='row'>
-				<h4>Tags</h4>
-				<p>{this.getTags()}</p>
-			</div>
-			<div className='row'>
-				<h4>Systems</h4>
-				<p>{this.getSystems()}</p>
-			</div>
-			<div className='row'>
-				<h4>Updated</h4>
-				<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
-			</div>
-		</div>;
-	},
-
-	render : function(){
-		return <Nav.item icon='fas fa-info-circle' color='grey' className='metadata'
-			onClick={()=>this.toggleMetaWindow()}>
-			{this.props.children}
-			{this.renderMetaWindow()}
-		</Nav.item>;
-	}
-
-});
-
-module.exports = MetadataNav;

client/homebrew/navbar/navbar.jsx

@@ -1,51 +1,20 @@
-require('./navbar.less');
-const React = require('react');
-const createClass = require('create-react-class');
+var React = require('react');
+var _ = require('lodash');
 
-const Nav = require('naturalcrit/nav/nav.jsx');
-const PatreonNavItem = require('./patreon.navitem.jsx');
+var Nav = require('naturalcrit/nav/nav.jsx');
 
-const Navbar = createClass({
-	displayName     : 'Navbar',
-	getInitialState : function() {
-		return {
-			//showNonChromeWarning : false,
-			ver : '0.0.0'
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			ver : global.version
-		};
-	},
-
-	/*
-	renderChromeWarning : function(){
-		if(!this.state.showNonChromeWarning) return;
-		return <Nav.item className='warning' icon='fa-exclamation-triangle'>
-			Optimized for Chrome
-			<div className='dropdown'>
-				If you are experiencing rendering issues, use Chrome instead
-			</div>
-		</Nav.item>
-	},
-*/
+var Navbar = React.createClass({
 	render : function(){
 		return <Nav.base>
 			<Nav.section>
 				<Nav.logo />
-				<Nav.item href='/' className='homebrewLogo'>
+				<Nav.item href='/homebrew' className='homebrewLogo'>
 					<div>The Homebrewery</div>
 				</Nav.item>
-				<Nav.item newTab={true} href='/changelog' color='purple' icon='far fa-file-alt'>
-					{`v${this.state.ver}`}
-				</Nav.item>
-				<PatreonNavItem />
-				{/*this.renderChromeWarning()*/}
+				<Nav.item>v2.0.0</Nav.item>
 			</Nav.section>
 			{this.props.children}
-		</Nav.base>;
+		</Nav.base>
 	}
 });
 

client/homebrew/navbar/navbar.less

@@ -1,346 +1,58 @@
-@import 'naturalcrit/styles/colors.less';
 
-@navbarHeight : 28px;
-@viewerToolsHeight : 32px;
-
-@keyframes pinkColoring {
-	0% { color : pink; }
-	50% { color : pink; }
-	75% { color : red; }
-	100% { color : pink; }
-}
-
-@keyframes glideDropDown {
-	0% {
-		background-color : #333333;
-		opacity          : 0;
-		transform        : translate(0px, -100%);
-	}
-	100% {
-		background-color : #333333;
-		opacity          : 1;
-		transform        : translate(0px, 0px);
-	}
-}
-
-.homebrew nav {
-	position         : relative;
-	z-index          : 2;
-	display          : flex;
-	justify-content  : space-between;
-	background-color : #333333;
-	
-	.navSection {
-		display     : flex;
-		align-items : center;
-		&:last-child .navItem { border-left : 1px solid #666666; }
-
-		&:has(.brewTitle) {
-			flex-grow : 1;
-			min-width : 300px;
+.homebrew nav{
+	.homebrewLogo{
+		.animate(color);
+		font-family : CodeBold;
+		font-size   : 12px;
+		color       : white;
+		div{
+			margin-top    : 2px;
+			margin-bottom : -2px;
 		}
-		>.brewTitle {
-			cursor:auto;
+		&:hover{
+			color : @blue;
 		}
 	}
-	// "NaturalCrit" logo
-	.navLogo {
-		display         : block;
-		margin-top      : 0px;
-		margin-right    : 8px;
-		margin-left     : 8px;
-		color           : white;
-		text-decoration : none;
-		&:hover {
-			.name { color : @orange; }
-			svg { fill : @orange; }
-		}
-		svg {
-			height       : 13px;
-			margin-right : 0.2em;
-			cursor       : pointer;
-			fill         : white;
-		}
-		span.name {
-			font-family : 'CodeLight';
-			font-size   : 15px;
-			span.crit { font-family : 'CodeBold'; }
-			small {
-				font-family    : 'Open Sans';
-				font-size      : 0.3em;
-				font-weight    : 800;
-				text-transform : uppercase;
-			}
-		}
-	}
-	.navItem {
-		#backgroundColorsHover;
-		.animate(background-color);
-		display          : flex;
-		align-items      : center;
-		justify-content  : center;
-		height           : 100%;
-		padding          : 8px 12px;
-		font-size        : 10px;
-		font-weight      : 800;
-		line-height      : 13px;
-		color            : white;
-		text-transform   : uppercase;
-		text-decoration  : none;
-		cursor           : pointer;
-		background-color : #333333;
-		i {
-			float       : right;
-			margin-left : 5px;
-			font-size   : 13px;
-		}
-		&.patreon {
-			border-right : 1px solid #666666;
-			border-left  : 1px solid #666666;
-			&:hover i { color : red; }
-			i {
-				color              : pink;
-				.animate(color);
-				animation-name     : pinkColoring;
-				animation-duration : 2s;
-			}
-		}
-		&.brewTitle {
-			display          : block;
-			width            : 100%;
-			overflow         : hidden;
-			text-overflow    : ellipsis;
+	.editTitle.navItem{
+		padding : 2px 12px;
+		input{
+			margin           : 0;
+			padding          : 2px;
+			width : 250px;
+			background-color : #444;
+			font-family      : 'Open Sans', sans-serif;
 			font-size        : 12px;
 			font-weight      : 800;
 			color            : white;
 			text-align       : center;
-			text-transform   : initial;	
-			white-space      : nowrap;
-			background-color : transparent;		
+			border           : 1px solid @blue;
+			outline          : none;
 		}
-
-		// "The Homebrewery" logo
-		&.homebrewLogo {
+		.charCount{
+			display        : inline-block;
+			vertical-align : bottom;
+			margin-left    : 8px;
+			text-align     : right;
+			color : #666;
+			&.max{
+				color : @red;
+			}
+		}
+	}
+	.brewTitle.navItem{
+		font-size        : 12px;
+		font-weight      : 800;
+		color            : white;
+		text-align       : center;
+		text-transform: initial;
+	}
+	.patreon.navItem{
+		i{
 			.animate(color);
-			font-family : 'CodeBold';
-			font-size   : 12px;
-			color       : white;
-			div {
-				margin-top    : 2px;
-				margin-bottom : -2px;
+			&:hover{
+				color : @red;
 			}
-			&:hover { color : @blue; }
-		}
-		&.metadata {
-			position    : relative;
-			display     : flex;
-			flex-grow   : 1;
-			align-items : center;
-			height      : 100%;
-			padding     : 0;
-			i { margin-right : 10px;}
-			.window {
-				position         : absolute;
-				bottom           : 0;
-				left             : 50%;
-				z-index          : -1;
-				display          : flex;
-				flex-flow        : row wrap;
-				align-content    : baseline;
-				justify-content  : flex-start;
-				width            : 440px;
-				max-height       : ~'calc(100vh - 28px)';
-				padding          : 0 10px 5px;
-				margin           : 0 auto;
-				background-color : #333333;
-				border           : 3px solid #444444;
-				border-top       : unset;
-				border-radius    : 0 0 5px 5px;
-				box-shadow       : inset 0 7px 9px -7px #111111;
-				transition       : transform 0.4s, opacity 0.4s;
-				&.active {
-					opacity   : 1;
-					transform : translateX(-50%) translateY(100%);
-				}
-				&.inactive {
-					opacity   : 0;
-					transform : translateX(-50%) translateY(0%);
-				}
-				.row {
-					display   : flex;
-					flex-flow : row wrap;
-					width     : 100%;
-					h4 {
-						box-sizing : border-box;
-						display    : block;
-						flex-grow  : 1;
-						flex-basis : 20%;
-						min-width  : 76px;
-						padding    : 5px 0;
-						color      : #BBBBBB;
-						text-align : center;
-					}
-					p {
-						flex-grow      : 1;
-						flex-basis     : 80%;
-						padding        : 5px 0;
-						font-family    : 'Open Sans', sans-serif;
-						font-size      : 10px;
-						font-weight    : normal;
-						text-transform : initial;
-						.tag {
-							display          : inline-block;
-							padding          : 2px;
-							margin           : 2px 2px;
-							background-color : #444444;
-							border           : 2px solid grey;
-							border-radius    : 5px;
-						}
-						a.userPageLink {
-							color           : white;
-							text-decoration : none;
-							&:hover { text-decoration : underline; }
-						}
-					}
-					&:nth-of-type(even) { background-color : #555555; }
-				}
-			}
-		}
-		&.warning {
-			position         : relative;
-			color            : white;
-			background-color : @orange;
-			&:hover > .dropdown { visibility : visible; }
-			.dropdown {
-				position         : absolute;
-				top              : 28px;
-				left             : 0;
-				z-index          : 10000;
-				box-sizing       : border-box;
-				display          : block;
-				visibility       : hidden;
-				width            : 100%;
-				padding          : 13px 5px;
-				text-align       : center;
-				background-color : #333333;
-			}
-		}
-		&.account {
-			min-width : 100px;
-			&.username { text-transform : none;}
 		}
 	}
-	.navDropdownContainer {
-		position : relative;
-		height   : 100%;
 
-		.navDropdown {
-			position       : absolute;
-			//top: 28px;
-			right          : 0px;
-			z-index        : 10000;
-			display        : flex;
-			flex-direction : column;
-			align-items    : flex-end;
-			width          : max-content;
-			min-width      : 100%;
-			max-height     : calc(100vh - 28px);
-			overflow       : hidden auto;
-			.navItem {
-				position           : relative;
-				display            : flex;
-				align-items        : center;
-				justify-content    : space-between;
-				width              : 100%;
-				border             : 1px solid #888888;
-				border-bottom      : 0;
-				animation-name     : glideDropDown;
-				animation-duration : 0.4s;
-			}
-		}
-		&.recent {
-			position : relative;
-			.navDropdown .navItem {
-				#backgroundColorsHover;
-				.animate(background-color);
-				position         : relative;
-				box-sizing       : border-box;
-				display          : block;
-				max-width        : 15em;
-				max-height       : ~'calc(100vh - 28px)';			
-				padding          : 8px 5px 13px;
-				overflow         : hidden auto;
-				color            : white;
-				text-decoration  : none;
-				scrollbar-color  : #666666 #333333;
-				scrollbar-width  : thin;
-				background-color : #333333;
-				border-top       : 1px solid #888888;
-				.clear {
-					position         : absolute;
-					top              : 50%;
-					right            : 0;
-					display          : none;
-					width            : 20px;
-					height           : 100%;
-					background-color : #333333;
-					border-radius    : 3px;
-					opacity          : 70%;
-					transform        : translateY(-50%);
-					&:hover { opacity : 100%; }
-					i {
-						width      : 100%;
-						height     : 100%;
-						margin     : 0;
-						font-size  : 10px;
-						text-align : center;
-					}
-				}
-				&:hover {
-					background-color : @blue;
-					.clear {
-						display       : grid;
-						place-content : center;
-					}
-				}
-				.title {
-					display       : inline-block;
-					width         : 100%;
-					overflow      : hidden auto;
-					text-overflow : ellipsis;
-					white-space   : nowrap;
-				}
-				.time {
-					position  : absolute;
-					right     : 2px;
-					bottom    : 2px;
-					font-size : 0.7em;
-					color     : #888888;
-				}
-				&.header {
-					box-sizing       : border-box;
-					display          : block;
-					padding          : 5px 0;
-					color            : #BBBBBB;
-					text-align       : center;
-					background-color : #333333;
-					border-top       : 1px solid #888888;
-					&:nth-of-type(1) { background-color : darken(@teal, 20%); }
-					&:nth-of-type(2) { background-color : darken(@purple, 30%); }
-				}
-			}
-		}
-	}
-}
-
-// this should likely be refactored into .navDropdownContainer
-.save-menu {
-	.dropdown { z-index : 1000; }
-	.navItem i.fa-power-off {
-		color : red;
-		&.active {
-			color  : rgb(0, 182, 52);
-			filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765));
-		}
-	}
-}
+}

client/homebrew/navbar/newbrew.navitem.jsx

@@ -1,92 +0,0 @@
-const React = require('react');
-const { useState } = React;
-
-const _ = require('lodash');
-const Nav = require('naturalcrit/nav/nav.jsx');
-const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js
-import Dialog from '../../components/dialog.jsx';
-import { NewDocumentForm } from '../../components/newDocumentForm.jsx';
-
-const BREWKEY  = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const METAKEY = 'homebrewery-new-meta';
-
-const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
-
-const NewBrew = ()=>{
-
-	const [open, setOpen] = useState(false);
-
-	const handleFileChange = (e)=>{
-		const file = e.target.files[0];
-		if(!file) return;
-
-		const currentNew = localStorage.getItem(BREWKEY);
-		if(currentNew && !confirm(
-			`You have some text in the new brew space, if you load a file that text will be lost, are you sure you want to load the file?`
-		)) return;
-
-		const reader = new FileReader();
-		reader.onload = (e)=>{
-			const fileContent = e.target.result;
-			const newBrew = { text: fileContent, style: '' };
-
-			if(fileContent.startsWith('```metadata')) {
-				splitTextStyleAndMetadata(newBrew);
-				localStorage.setItem(BREWKEY, newBrew.text);
-				localStorage.setItem(STYLEKEY, newBrew.style);
-				localStorage.setItem(METAKEY, JSON.stringify(
-					_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])
-				));
-				window.location.href = '/new';
-				return;
-			}
-
-			const type = file.name.split('.').pop().toLowerCase();
-
-			alert(`This file is invalid: ${!type ? 'Missing file extension' :`.${type} files are not supported`}. Only .txt files exported from the Homebrewery are allowed.`);
-
-
-			console.log(file);
-		};
-		reader.readAsText(file);
-	};
-
-	return <>
-		<Nav.item
-			className='new'
-			color='purple'
-			icon='fa-solid fa-plus-square'
-			onClick={()=>{ setOpen(true);}}>
-				new
-
-		</Nav.item>
-		{open && <Dialog blocking className='newBrewPopup' closeText={DISMISS_BUTTON} callbackFn={()=>{setOpen(false);}}>
-					<NewDocumentForm/>
-				</Dialog>
-		}
-
-	</>;
-};
-
-/*
-			<Nav.item
-				className='fromBlank'
-				href='/new'
-				newTab={true}
-				color='purple'
-				icon='fa-solid fa-file'>
-                from blank
-			</Nav.item>
-			<Nav.item
-				className='fromFile'
-				color='purple'
-				icon='fa-solid fa-upload'
-				onClick={()=>{ document.getElementById('uploadTxt').click(); }}>
-				<input id='uploadTxt' className='newFromLocal' type='file' onChange={handleFileChange} style={{ display: 'none' }} />
-                from file
-			</Nav.item>
-			*/
-
-
-module.exports = NewBrew;

client/homebrew/navbar/patreon.navitem.jsx

@@ -1,13 +1,13 @@
-const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
+var React = require('react');
+var Nav = require('naturalcrit/nav/nav.jsx');
 
 module.exports = function(props){
 	return <Nav.item
 		className='patreon'
 		newTab={true}
-		href='https://www.patreon.com/NaturalCrit'
+		href='https://www.patreon.com/stolksdorf'
 		color='green'
-		icon='fas fa-heart'>
+		icon='fa-heart'>
 		help out
-	</Nav.item>;
-};
+	</Nav.item>
+};

client/homebrew/navbar/print.navitem.jsx

@@ -1,9 +1,8 @@
-const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
-const { printCurrentBrew } = require('../../../shared/helpers.js');
+var React = require('react');
+var Nav = require('naturalcrit/nav/nav.jsx');
 
-module.exports = function(){
-	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
-		get PDF
-	</Nav.item>;
-};
+module.exports = function(props){
+	return <Nav.item newTab={true} href={'/homebrew/print/' + props.shareId +'?dialog=true'} color='purple' icon='fa-print'>
+		print
+	</Nav.item>
+};

client/homebrew/navbar/recent.navitem.jsx

@@ -1,207 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
-const Moment = require('moment');
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-const EDIT_KEY = 'HB_nav_recentlyEdited';
-const VIEW_KEY = 'HB_nav_recentlyViewed';
-
-
-const RecentItems = createClass({
-	DisplayName     : 'RecentItems',
-	getDefaultProps : function() {
-		return {
-			storageKey : '',
-			showEdit   : false,
-			showView   : false
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			showDropdown : false,
-			edit         : [],
-			view         : []
-		};
-	},
-
-	componentDidMount : function() {
-
-		//== Load recent items list ==//
-		let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
-		let viewed = JSON.parse(localStorage.getItem(VIEW_KEY) || '[]');
-
-		//== Add current brew to appropriate recent items list (depending on storageKey) ==//
-		if(this.props.storageKey == 'edit'){
-			let editId = this.props.brew.editId;
-			if(this.props.brew.googleId && !this.props.brew.stubbed){
-				editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
-			}
-			edited = _.filter(edited, (brew)=>{
-				return brew.id !== editId;
-			});
-			edited.unshift({
-				id    : editId,
-				title : this.props.brew.title,
-				url   : `/edit/${editId}`,
-				ts    : Date.now()
-			});
-		}
-		if(this.props.storageKey == 'view'){
-			let shareId = this.props.brew.shareId;
-			if(this.props.brew.googleId && !this.props.brew.stubbed){
-				shareId = `${this.props.brew.googleId}${this.props.brew.shareId}`;
-			}
-			viewed = _.filter(viewed, (brew)=>{
-				return brew.id !== shareId;
-			});
-			viewed.unshift({
-				id    : shareId,
-				title : this.props.brew.title,
-				url   : `/share/${shareId}`,
-				ts    : Date.now()
-			});
-		}
-
-		//== Store the updated lists (up to 8 items each) ==//
-		edited = _.slice(edited, 0, 8);
-		viewed = _.slice(viewed, 0, 8);
-
-		localStorage.setItem(EDIT_KEY, JSON.stringify(edited));
-		localStorage.setItem(VIEW_KEY, JSON.stringify(viewed));
-
-		this.setState({
-			edit : edited,
-			view : viewed
-		});
-	},
-
-	componentDidUpdate : function(prevProps) {
-		if(prevProps.brew && this.props.brew.editId !== prevProps.brew.editId) {
-	 		let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
-			if(this.props.storageKey == 'edit') {
-				let prevEditId = prevProps.brew.editId;
-				if(prevProps.brew.googleId && !this.props.brew.stubbed){
-					prevEditId = `${prevProps.brew.googleId}${prevProps.brew.editId}`;
-				}
-
-				edited = _.filter(this.state.edit, (brew)=>{
-					return brew.id !== prevEditId;
-				});
-				let editId = this.props.brew.editId;
-				if(this.props.brew.googleId && !this.props.brew.stubbed){
-					editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
-				}
-				edited.unshift({
-					id    : editId,
-					title : this.props.brew.title,
-					url   : `/edit/${editId}`,
-					ts    : Date.now()
-				});
-			}
-
-			//== Store the updated lists (up to 8 items each) ==//
-			edited = _.slice(edited, 0, 8);
-
-			localStorage.setItem(EDIT_KEY, JSON.stringify(edited));
-
-			this.setState({
-				edit : edited
-			});
-		}
-	},
-
-	handleDropdown : function(show){
-		this.setState({
-			showDropdown : show
-		});
-	},
-
-	removeItem : function(url, evt){
-		evt.preventDefault();
-		evt.stopPropagation();
-
-		let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
-		let viewed = JSON.parse(localStorage.getItem(VIEW_KEY) || '[]');
-
-		edited = edited.filter((item)=>{ return (item.url !== url);});
-		viewed = viewed.filter((item)=>{ return (item.url !== url);});
-
-		localStorage.setItem(EDIT_KEY, JSON.stringify(edited));
-		localStorage.setItem(VIEW_KEY, JSON.stringify(viewed));
-
-		this.setState({
-			edit : edited,
-			view : viewed
-		});
-
-	},
-
-	renderDropdown : function(){
-		// if(!this.state.showDropdown) return null;
-
-		const makeItems = (brews)=>{
-			return _.map(brews, (brew, i)=>{
-				return <a className='navItem' href={brew.url} key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
-					<span className='title'>{brew.title || '[ no title ]'}</span>
-					<span className='time'>{Moment(brew.ts).fromNow()}</span>
-					<div className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></div>
-				</a>;
-			});
-		};
-
-		return <>
-			{(this.props.showEdit && this.props.showView) ?
-				<Nav.item className='header'>edited</Nav.item> : null }
-			{this.props.showEdit ?
-				makeItems(this.state.edit) : null }
-			{(this.props.showEdit && this.props.showView) ?
-				<Nav.item className='header'>viewed</Nav.item>	: null }
-			{this.props.showView ?
-				makeItems(this.state.view) : null }
-		</>;
-	},
-
-	render : function(){
-		return <Nav.dropdown className='recent'>
-			<Nav.item icon='fas fa-history' color='grey' >
-				{this.props.text}
-			</Nav.item>
-			{this.renderDropdown()}
-		</Nav.dropdown>;
-	}
-
-});
-
-module.exports = {
-
-	edited : (props)=>{
-		return <RecentItems
-			brew={props.brew}
-			storageKey={props.storageKey}
-			text='recently edited'
-			showEdit={true}
-		/>;
-	},
-
-	viewed : (props)=>{
-		return <RecentItems
-			brew={props.brew}
-			storageKey={props.storageKey}
-			text='recently viewed'
-			showView={true}
-		/>;
-	},
-
-	both : (props)=>{
-		return <RecentItems
-			brew={props.brew}
-			storageKey={props.storageKey}
-			text='recent brews'
-			showEdit={true}
-			showView={true}
-		/>;
-	}
-};

client/homebrew/navbar/reddit.navitem.jsx

@@ -0,0 +1,51 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+//var striptags = require('striptags');
+
+var Nav = require('naturalcrit/nav/nav.jsx');
+
+const MAX_URL_SIZE = 2083;
+const MAIN_URL = "https://www.reddit.com/r/UnearthedArcana/submit?selftext=true"
+
+
+var RedditShare = React.createClass({
+	getDefaultProps: function() {
+		return {
+			brew : {
+				title : '',
+				sharedId : '',
+				text : ''
+			}
+		};
+	},
+
+	getText : function(){
+
+	},
+
+
+	handleClick : function(){
+		var url = [
+			MAIN_URL,
+			'title=' + encodeURIComponent(this.props.brew.title ? this.props.brew.title : 'Check out my brew!'),
+
+			'text=' + encodeURIComponent(this.props.brew.text)
+
+
+		].join('&');
+
+		window.open(url, '_blank');
+	},
+
+
+	render : function(){
+		return <Nav.item icon='fa-reddit-alien' color='red' onClick={this.handleClick}>
+			share on reddit
+		</Nav.item>
+	},
+
+});
+
+module.exports = RedditShare;

client/homebrew/navbar/share.navitem.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import dedent from 'dedent-tabs';
-import Nav from 'naturalcrit/nav/nav.jsx';
-
-const getShareId = (brew)=>(
-	brew.googleId && !brew.stubbed
-		? brew.googleId + brew.shareId
-		: brew.shareId
-);
-
-const getRedditLink = (brew)=>{
-	const text = dedent`
-			Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
-
-			**[Homebrewery Link](${global.config.baseUrl}/share/${getShareId(brew)})**`;
-
-	return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(brew.title.toWellFormed())}&text=${encodeURIComponent(text)}`;
-};
-
-export default ({ brew })=>(
-	<Nav.dropdown>
-		<Nav.item color='teal' icon='fas fa-share-alt'>
-			share
-		</Nav.item>
-		<Nav.item color='blue' href={`/share/${getShareId(brew)}`}>
-			view
-		</Nav.item>
-		<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${getShareId(brew)}`);}}>
-			copy url
-		</Nav.item>
-		<Nav.item color='blue' href={getRedditLink(brew)} newTab rel='noopener noreferrer'>
-			post to reddit
-		</Nav.item>
-	</Nav.dropdown>
-);

client/homebrew/navbar/vault.navitem.jsx

@@ -1,17 +0,0 @@
-const React = require('react');
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-module.exports = function (props) {
-	return (
-		<Nav.item
-			color='purple'
-			icon='fas fa-dungeon'
-			href='/vault'
-			newTab={false}
-			rel='noopener noreferrer'
-		>
-			Vault
-		</Nav.item>
-	);
-};

client/homebrew/pages/accountPage/accountPage.jsx

@@ -1,82 +0,0 @@
-const React  = require('react');
-const moment = require('moment');
-const UIPage = require('../basePages/uiPage/uiPage.jsx');
-const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
-
-let SAVEKEY = '';
-
-const AccountPage = (props)=>{
-	// destructure props and set state for save location
-	const { accountDetails, brew } = props;
-	const [saveLocation, setSaveLocation] = React.useState('');
-
-	// initialize save location from local storage based on user id
-	React.useEffect(()=>{
-		if(!saveLocation && accountDetails.username) {
-			SAVEKEY = `HB_editor_defaultSave_${accountDetails.username}`;
-			// if no SAVEKEY in local storage, default save location to Google Drive if user has Google account.
-			let saveLocation = window.localStorage.getItem(SAVEKEY);
-			saveLocation = saveLocation ?? (accountDetails.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
-			setActiveSaveLocation(saveLocation);
-		}
-	}, []);
-
-	const setActiveSaveLocation = (newSelection)=>{
-		if(saveLocation === newSelection) return;
-		window.localStorage.setItem(SAVEKEY, newSelection);
-		setSaveLocation(newSelection);
-	};
-
-	// todo: should this be a set of radio buttons (well styled) since it's either/or choice?
-	const renderSaveLocationButton = (name, key, shouldRender = true)=>{
-		if(!shouldRender) return null;
-		return (
-			<button className={saveLocation === key ? 'active' : ''} onClick={()=>{setActiveSaveLocation(key);}}>
-				{name}
-			</button>
-		);
-	};
-
-	// render the entirety of the account page content
-	const renderAccountPage = ()=>{
-		return (
-			<>
-				<div className='dataGroup'>
-					<h1>Account Information <i className='fas fa-user'></i></h1>
-					<p><strong>Username: </strong>{accountDetails.username || 'No user currently logged in'}</p>
-					<p><strong>Last Login: </strong>{moment(accountDetails.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
-				</div>
-				<div className='dataGroup'>
-					<h3>Homebrewery Information <NaturalCritIcon /></h3>
-					<p><strong>Brews on Homebrewery: </strong>{accountDetails.mongoCount}</p>
-				</div>
-				<div className='dataGroup'>
-					<h3>Google Information <i className='fab fa-google-drive'></i></h3>
-					<p><strong>Linked to Google: </strong>{accountDetails.googleId ? 'YES' : 'NO'}</p>
-					{accountDetails.googleId && (
-						<p>
-							<strong>Brews on Google Drive: </strong>{accountDetails.googleCount ?? (
-								<>
-									Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a>
-								</>
-							)}
-						</p>
-					)}
-				</div>
-				<div className='dataGroup'>
-					<h4>Default Save Location</h4>
-					{renderSaveLocationButton('Homebrewery', 'HOMEBREWERY')}
-					{renderSaveLocationButton('Google Drive', 'GOOGLE-DRIVE', accountDetails.googleId)}
-				</div>
-			</>
-		);
-	};
-
-	// return the account page inside the base layout wrapper (with navbar etc).
-	return (
-		<UIPage brew={brew}>
-			{renderAccountPage()}
-		</UIPage>);
-};
-
-module.exports = AccountPage;

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -1,179 +0,0 @@
-require('./brewItem.less');
-const React = require('react');
-const { useCallback } = React;
-const moment = require('moment');
-import request from '../../../../utils/request-middleware.js';
-
-const googleDriveIcon = require('../../../../googleDrive.svg');
-const homebreweryIcon = require('../../../../thumbnail.svg');
-const dedent = require('dedent-tabs').default;
-
-const BrewItem = ({
-	brew = {
-		title       : '',
-		description : '',
-		authors     : [],
-		stubbed     : true,
-	},
-	updateListFilter = ()=>{},
-	reportError = ()=>{},
-	renderStorage = true,
-})=>{
-
-	const deleteBrew = useCallback(()=>{
-		if(brew.authors.length <= 1) {
-			if(!window.confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
-			if(!window.confirm('Are you REALLY sure? You will not be able to recover the document.')) return;
-		} else {
-			if(!window.confirm('Are you sure you want to remove this brew from your collection? This will remove you as an editor, but other owners will still be able to access the document.')) return;
-			if(!window.confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
-		}
-
-		request.delete(`/api/${brew.googleId ?? ''}${brew.editId}`).send().end((err, res)=>{
-			if(err) reportError(err); else window.location.reload();
-		});
-	}, [brew, reportError]);
-
-	const updateFilter = useCallback((type, term)=>updateListFilter(type, term), [updateListFilter]);
-
-	const renderDeleteBrewLink = ()=>{
-		if(!brew.editId) return null;
-
-		return (
-			<a className='deleteLink' onClick={deleteBrew}>
-				<i className='fas fa-trash-alt' title='Delete' />
-			</a>
-		);
-	};
-
-	const renderEditLink = ()=>{
-		if(!brew.editId) return null;
-
-		let editLink = brew.editId;
-		if(brew.googleId && !brew.stubbed) editLink = brew.googleId + editLink;
-
-		return (
-			<a className='editLink' href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
-				<i className='fas fa-pencil-alt' title='Edit' />
-			</a>
-		);
-	};
-
-	const renderShareLink = ()=>{
-		if(!brew.shareId) return null;
-
-		let shareLink = brew.shareId;
-		if(brew.googleId && !brew.stubbed) {
-			shareLink = brew.googleId + shareLink;
-		}
-
-		return (
-			<a className='shareLink' href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
-				<i className='fas fa-share-alt' title='Share' />
-			</a>
-		);
-	};
-
-	const renderDownloadLink = ()=>{
-		if(!brew.shareId) return null;
-
-		let shareLink = brew.shareId;
-		if(brew.googleId && !brew.stubbed) {
-			shareLink = brew.googleId + shareLink;
-		}
-
-		return (
-			<a className='downloadLink' href={`/download/${shareLink}`}>
-				<i className='fas fa-download' title='Download' />
-			</a>
-		);
-	};
-
-	const renderStorageIcon = ()=>{
-		if(!renderStorage) return null;
-		if(brew.googleId) {
-			return (
-				<span title={brew.webViewLink ? 'Your Google Drive Storage' : 'Another User\'s Google Drive Storage'}>
-					<a href={brew.webViewLink} target='_blank'>
-						<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' />
-					</a>
-				</span>
-			);
-		}
-
-		return (
-			<span title='Homebrewery Storage'>
-				<img className='homebreweryIcon' src={homebreweryIcon} alt='homebreweryIcon' />
-			</span>
-		);
-	};
-
-	if(Array.isArray(brew.tags)) {
-		brew.tags = brew.tags?.filter((tag)=>tag); // remove tags that are empty strings
-		brew.tags.sort((a, b)=>{
-			return a.indexOf(':') - b.indexOf(':') !== 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
-		});
-	}
-
-	const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
-
-	return (
-		<div className='brewItem'>
-			{brew.thumbnail && <div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }}></div>}
-			<div className='text'>
-				<h2>{brew.title}</h2>
-				<p className='description'>{brew.description}</p>
-			</div>
-			<hr />
-			<div className='info'>
-				{brew.tags?.length ? (
-					<div className='brewTags' title={`${brew.tags.length} tags:\n${brew.tags.join('\n')}`}>
-						<i className='fas fa-tags' />
-						{brew.tags.map((tag, idx)=>{
-							const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
-							return <span key={idx} className={matches[1]} onClick={()=>updateFilter(tag)}>{matches[2]}</span>;
-						})}
-					</div>
-				) : null}
-				<span title={`Authors:\n${brew.authors?.join('\n')}`}>
-					<i className='fas fa-user' />{' '}
-					{brew.authors?.map((author, index)=>(
-						<React.Fragment key={index}>
-							{author === 'hidden' ? (
-								<span title="Username contained an email address; hidden to protect user's privacy">
-									{author}
-								</span>
-							) : (<a href={`/user/${author}`}>{author}</a>)}
-							{index < brew.authors.length - 1 && ', '}
-						</React.Fragment>
-					))}
-				</span>
-				<br />
-				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
-					<i className='fas fa-eye' /> {brew.views}
-				</span>
-				{brew.pageCount && (
-					<span title={`Page count: ${brew.pageCount}`}>
-						<i className='far fa-file' /> {brew.pageCount}
-					</span>
-				)}
-				<span
-					title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)}
-                        Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}
-				>
-					<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
-				</span>
-				{renderStorageIcon()}
-			</div>
-
-			<div className='links'>
-				{renderShareLink()}
-				{renderEditLink()}
-				{renderDownloadLink()}
-				{renderDeleteBrewLink()}
-			</div>
-		</div>
-	);
-};
-
-module.exports = BrewItem;

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -1,129 +0,0 @@
-
-.brewItem {
-	position                    : relative;
-	box-sizing                  : border-box;
-	display                     : inline-block;
-	width                       : 48%;
-	min-height                  : 105px;
-	padding                     : 5px 15px 2px 6px;
-	padding-right               : 15px;
-	margin-right                : 15px;
-	margin-bottom               : 15px;
-	overflow                    : hidden;
-	vertical-align              : top;
-	background-color            : #CAB2802E;
-	border                      : 1px solid #C9AD6A;
-	border-radius               : 5px;
-	box-shadow                  : 0px 4px 5px 0px #333333;
-	break-inside                : avoid;
-	-webkit-column-break-inside : avoid;
-	page-break-inside           : avoid;
-	.thumbnail {
-		position            : absolute;
-		top                 : 0;
-		right               : 0;
-		z-index             : -1;
-		width               : 150px;
-		height              : 100%;
-		background-repeat   : no-repeat;
-		background-position : right top;
-		background-size     : contain;
-		opacity             : 50%;
-		-webkit-mask-image  : linear-gradient(80deg, #00000000 20%, #005500 40%);
-		mask-image          : linear-gradient(80deg, #00000000 20%, #005500 40%);
-	}
-	.text {
-		min-height : 54px;
-		h4 {
-			margin-bottom : 5px;
-			font-size     : 2.2em;
-		}
-	}
-	.info {
-		position    : initial;
-		bottom      : 2px;
-		font-family : "ScalySansRemake";
-		font-size   : 1.2em;
-		& > span {
-			margin-right : 12px;
-			line-height  : 1.5em;
-
-			a { color : inherit; }
-		}
-	}
-	.brewTags span {
-		display          : inline-block;
-		padding          : 2px;
-		margin           : 2px;
-		font-weight      : bold;
-		white-space      : nowrap;
-		cursor           : pointer;
-		background-color : #C8AC6E3B;
-		border           : 1px solid #C8AC6E;
-		border-color     : currentColor;
-		border-radius    : 4px;
-		&::before {
-			margin-right : 3px;
-			font-family  : 'Font Awesome 6 Free';
-			font-size    : 12px;
-		}
-		&.type {
-			color            : #008000;
-			background-color : #0080003B;
-			&::before { content : '\f0ad'; }
-		}
-		&.group {
-			color            : #000000;
-			background-color : #5050503B;
-			&::before { content : '\f500'; }
-		}
-		&.meta {
-			color            : #000080;
-			background-color : #0000803B;
-			&::before { content : '\f05a'; }
-		}
-		&.system {
-			color            : #800000;
-			background-color : #8000003B;
-			&::before { content : '\f518'; }
-		}
-	}
-	&:hover {
-		.links { opacity : 1; }
-	}
-	&:nth-child(2n + 1) { margin-right : 0px; }
-	.links {
-		.animate(opacity);
-		position         : absolute;
-		top              : 0px;
-		right            : 0px;
-		width            : 2em;
-		height           : 100%;
-		text-align       : center;
-		background-color : fade(black, 60%);
-		opacity          : 0;
-		a {
-			.animate(opacity);
-			display         : block;
-			margin          : 8px 0px;
-			font-size       : 1.3em;
-			color           : white;
-			text-decoration : unset;
-			opacity         : 0.6;
-			&:hover { opacity : 1; }
-			i { cursor : pointer; }
-		}
-	}
-	.googleDriveIcon {
-		padding : 0px;
-		margin  : -5px;
-		height  : 18px;
-	}
-	.homebreweryIcon {
-		position : relative;
-		padding  : 0px;
-		top      : 5px;
-		left     : -7.5px;
-		height   : 18px;
-	}
-}

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -1,282 +0,0 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./listPage.less');
-const React       = require('react');
-const createClass = require('create-react-class');
-const _           = require('lodash');
-const moment      = require('moment');
-
-const BrewItem    = require('./brewItem/brewItem.jsx');
-
-const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
-const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
-const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
-
-const DEFAULT_SORT_TYPE = 'alpha';
-const DEFAULT_SORT_DIR = 'asc';
-
-const ListPage = createClass({
-	displayName     : 'ListPage',
-	getDefaultProps : function() {
-		return {
-			brewCollection : [
-				{
-					title : '',
-					class : '',
-					brews : []
-				}
-			],
-			navItems    : <></>,
-			reportError : null
-		};
-	},
-	getInitialState : function() {
-		// HIDE ALL GROUPS UNTIL LOADED
-		const brewCollection = this.props.brewCollection.map((brewGroup)=>{
-			brewGroup.visible = false;
-			return brewGroup;
-		});
-
-		return {
-			filterString   : this.props.query?.filter || '',
-			filterTags     : [],
-			sortType       : this.props.query?.sort || null,
-			sortDir        : this.props.query?.dir || null,
-			query          : this.props.query,
-			brewCollection : brewCollection
-		};
-	},
-
-	componentDidMount : function() {
-		// SAVE TO LOCAL STORAGE WHEN LEAVING PAGE
-		window.onbeforeunload = this.saveToLocalStorage;
-
-		// LOAD FROM LOCAL STORAGE
-		if(typeof window !== 'undefined') {
-			const newSortType = (this.state.sortType ?? (localStorage.getItem(USERPAGE_SORT_TYPE) || DEFAULT_SORT_TYPE));
-			const newSortDir = (this.state.sortDir ?? (localStorage.getItem(USERPAGE_SORT_DIR) || DEFAULT_SORT_DIR));
-			this.updateUrl(this.state.filterString, newSortType, newSortDir);
-
-			const brewCollection = this.props.brewCollection.map((brewGroup)=>{
-				brewGroup.visible = (localStorage.getItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`) ?? 'true')=='true';
-				return brewGroup;
-			});
-
-			this.setState({
-				brewCollection : brewCollection,
-				sortType       : newSortType,
-				sortDir        : newSortDir
-			});
-		};
-	},
-
-	componentWillUnmount : function() {
-		window.onbeforeunload = function(){};
-	},
-
-	saveToLocalStorage : function() {
-		this.state.brewCollection.map((brewGroup)=>{
-			localStorage.setItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`, `${brewGroup.visible}`);
-		});
-		localStorage.setItem(USERPAGE_SORT_TYPE, this.state.sortType);
-		localStorage.setItem(USERPAGE_SORT_DIR, this.state.sortDir);
-	},
-
-	renderBrews : function(brews){
-		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
-
-		return _.map(brews, (brew, idx)=>{
-			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError} updateListFilter={ (tag)=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}/>;
-		});
-	},
-
-	sortBrewOrder : function(brew){
-		if(!brew.title){brew.title = 'No Title';}
-		const mapping = {
-			'alpha'   : _.deburr(brew.title.trim().toLowerCase()),
-			'created' : moment(brew.createdAt).format(),
-			'updated' : moment(brew.updatedAt).format(),
-			'views'   : brew.views,
-			'latest'  : moment(brew.lastViewed).format()
-		};
-		return mapping[this.state.sortType];
-	},
-
-	handleSortOptionChange : function(event){
-		this.updateUrl(this.state.filterString, event.target.value, this.state.sortDir);
-		this.setState({
-			sortType : event.target.value
-		});
-	},
-
-	handleSortDirChange : function(event){
-		const newDir = this.state.sortDir == 'asc' ? 'desc' : 'asc';
-
-		this.updateUrl(this.state.filterString, this.state.sortType, newDir);
-		this.setState({
-			sortDir : newDir
-		});
-	},
-
-	renderSortOption : function(sortTitle, sortValue){
-		return <div className={`sort-option ${(this.state.sortType == sortValue ? 'active' : '')}`}>
-			<button
-				value={`${sortValue}`}
-				onClick={this.state.sortType == sortValue ? this.handleSortDirChange : this.handleSortOptionChange}
-			>
-				{`${sortTitle}`}
-			</button>
-			{this.state.sortType == sortValue &&
-				<i className={`sortDir fas ${this.state.sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>
-			}
-		  </div>;
-	},
-
-	handleFilterTextChange : function(e){
-		this.setState({
-			filterString : e.target.value,
-		});
-		this.updateUrl(e.target.value, this.state.sortType, this.state.sortDir);
-		return;
-	},
-
-	updateUrl : function(filterTerm, sortType, sortDir, filterTag=''){
-		const url = new URL(window.location.href);
-		const urlParams = new URLSearchParams(url.search);
-
-		urlParams.set('sort', sortType);
-		urlParams.set('dir', sortDir);
-
-		let filterTags = urlParams.getAll('tag');
-		if(filterTag != '') {
-			if(filterTags.findIndex((tag)=>{return tag.toLowerCase()==filterTag.toLowerCase();}) == -1){
-				filterTags.push(filterTag);
-			} else {
-				filterTags = filterTags.filter((tag)=>{ return tag.toLowerCase() != filterTag.toLowerCase(); });
-			}
-		}
-		urlParams.delete('tag');
-		// Add tags to URL in the order they were clicked
-		filterTags.forEach((tag)=>{ urlParams.append('tag', tag); });
-		// Sort tags before updating state
-		filterTags.sort((a, b)=>{
-			return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
-		});
-
-		this.setState({
-			filterTags
-		});
-
-		if(!filterTerm)
-			urlParams.delete('filter');
-		else
-			urlParams.set('filter', filterTerm);
-
-		url.search = urlParams;
-		window.history.replaceState(null, null, url);
-	},
-
-	renderFilterOption : function(){
-		return <div className='filter-option'>
-			<label>
-				<i className='fas fa-search'></i>
-				<input
-					type='search'
-					placeholder='filter title/description'
-					onChange={this.handleFilterTextChange}
-					value={this.state.filterString}
-				/>
-			</label>
-		</div>;
-	},
-
-	renderTagsOptions : function(){
-		if(this.state.filterTags?.length == 0) return;
-		return <div className='tags-container'>
-			{_.map(this.state.filterTags, (tag, idx)=>{
-				const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
-				return <span key={idx} className={matches[1]} onClick={()=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}>{matches[2]}</span>;
-			})}
-		</div>;
-	},
-
-	renderSortOptions : function(){
-		return <div className='sort-container'>
-			<h6>Sort by :</h6>
-			{this.renderSortOption('Title', 'alpha')}
-			{this.renderSortOption('Created Date', 'created')}
-			{this.renderSortOption('Updated Date', 'updated')}
-			{this.renderSortOption('Views', 'views')}
-			{/* {this.renderSortOption('Latest', 'latest')} */}
-
-			{this.renderFilterOption()}
-		</div>;
-	},
-
-	getSortedBrews : function(brews){
-		const testString = _.deburr(this.state.filterString).toLowerCase();
-
-		brews = _.filter(brews, (brew)=>{
-			// Filter by user entered text
-			const brewStrings = _.deburr([
-				brew.title,
-				brew.description,
-				brew.tags].join('\n')
-				.toLowerCase());
-
-			const filterTextTest = brewStrings.includes(testString);
-
-			// Filter by user selected tags
-			let filterTagTest = true;
-			if(this.state.filterTags.length > 0){
-				filterTagTest = Array.isArray(brew.tags) && this.state.filterTags?.every((tag)=>{
-					return brew.tags.findIndex((brewTag)=>{
-						return brewTag.toLowerCase() == tag.toLowerCase();
-					}) >= 0;
-				});
-			}
-
-			return filterTextTest && filterTagTest;
-		});
-
-		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
-	},
-
-	toggleBrewCollectionState : function(brewGroupClass) {
-		this.setState((prevState)=>({
-			brewCollection : prevState.brewCollection.map(
-				(brewGroup)=>brewGroup.class === brewGroupClass ? { ...brewGroup, visible: !brewGroup.visible } : brewGroup
-			)
-		}));
-	},
-
-	renderBrewCollection : function(brewCollection){
-		if(brewCollection == []) return <div className='brewCollection'>
-			<h1>No Brews</h1>
-		</div>;
-		return _.map(brewCollection, (brewGroup, idx)=>{
-			return <div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}>
-				<h1 className={brewGroup.visible ? 'active' : 'inactive'} onClick={()=>{this.toggleBrewCollectionState(brewGroup.class);}}>{brewGroup.title || 'No Title'}</h1>
-				{brewGroup.visible ? this.renderBrews(this.getSortedBrews(brewGroup.brews)) : <></>}
-			</div>;
-		});
-	},
-
-	render : function(){
-		return <div className='listPage sitePage'>
-			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
-			<link href='/themes/V3/Blank/style.css' type='text/css' rel='stylesheet'/>
-			<link href='/themes/V3/5ePHB/style.css' type='text/css' rel='stylesheet'/>
-			{this.props.navItems}
-			{this.renderSortOptions()}
-			{this.renderTagsOptions()}
-
-			<div className='content V3'>
-				<div className='page'>
-					{this.renderBrewCollection(this.state.brewCollection)}
-				</div>
-			</div>
-		</div>;
-	}
-});
-
-module.exports = ListPage;

client/homebrew/pages/basePages/listPage/listPage.less

@@ -1,164 +0,0 @@
-
-.noColumns() {
-	column-count         : auto;
-	column-fill          : auto;
-	column-gap           : normal;
-	column-width         : auto;
-	-webkit-column-count : auto;
-	-moz-column-count    : auto;
-	-webkit-column-width : auto;
-	-moz-column-width    : auto;
-	-webkit-column-gap   : normal;
-	-moz-column-gap      : normal;
-	height               : auto;
-	min-height           : 279.4mm;
-	margin               : 20px auto;
-	contain              : unset;
-}
-.listPage {
-	.content {
-		z-index : 1;
-		.page {
-			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
-			&::after { display : none; }
-			.noBrews {
-				margin     : 10px 0px;
-				font-size  : 1.3em;
-				font-style : italic;
-			}
-			.brewCollection {
-				h1:hover { cursor : pointer; }
-				.active::before, .inactive::before {
-					padding-right : 0.5em;
-					font-family   : 'Font Awesome 6 Free';
-					font-size     : 0.6cm;
-					font-weight   : 900;
-				}
-				.active { color : var(--HB_Color_HeaderText); }
-				.active::before { content : '\f107'; }
-				.inactive { color : #707070; }
-				.inactive::before { content : '\f105'; }
-			}
-		}
-	}
-	.sort-container {
-		position              : sticky;
-		top                   : 0;
-		left                  : 0;
-		z-index               : 1;
-		display               : flex;
-		flex-wrap             : wrap;
-		row-gap               : 5px;
-		column-gap            : 15px;
-		align-items           : baseline;
-		justify-content       : center;
-		width                 : 100%;
-		height                : 30px;
-		font-family           : 'Open Sans', sans-serif;
-		color                 : white;
-		text-align            : center;
-		background-color      : #555555;
-		border-top            : 1px solid #666666;
-		border-bottom         : 1px solid #666666;
-		h6 {
-			font-family    : 'Open Sans', sans-serif;
-			font-size      : 11px;
-			font-weight    : bold;
-			text-transform : uppercase;
-		}
-		.sort-option {
-			display     : flex;
-			align-items : center;
-			height      : 100%;
-			padding     : 0 8px;
-			color       : #CCCCCC;
-
-			&:hover { background-color : #444444; }
-
-			&.active {
-				font-weight      : bold;
-				color            : #DDDDDD;
-				background-color : #333333;
-
-				button {
-					height      : 100%;
-					font-weight : 800;
-					color       : white;
-					& + .sortDir { padding-left : 5px; }
-				}
-			}
-
-		}
-		.filter-option {
-			margin-left      : 20px;
-			font-size        : 11px;
-			background-color : transparent !important;
-			i { padding-right : 5px; }
-		}
-		button {
-			padding          : 0;
-			font-family      : 'Open Sans', sans-serif;
-			font-size        : 11px;
-			font-weight      : normal;
-			color            : #CCCCCC;
-			text-transform   : uppercase;
-			background-color : transparent;
-		}
-
-
-	}
-	.tags-container {
-		display            : flex;
-		flex-wrap          : wrap;
-		row-gap            : 5px;
-		column-gap         : 15px;
-		align-items        : center;
-		justify-content    : center;
-		height             : 30px;
-		color              : white;
-		background-color   : #555555;
-		border-top         : 1px solid #666666;
-		border-bottom      : 1px solid #666666;
-		span {
-			padding        : 3px;
-			font-family    : 'Open Sans', sans-serif;
-			font-size      : 11px;
-			font-weight    : bold;
-			color          : #DFDFDF;
-			cursor         : pointer;
-			border         : 1px solid;
-			border-radius  : 3px;
-			&::before {
-				margin-right : 3px;
-				font-family  : 'Font Awesome 6 Free';
-				font-size    : 12px;
-			}
-			&::after {
-				margin-left : 3px;
-				font-family : 'Font Awesome 6 Free';
-				font-size   : 12px;
-				content     : '\f00d';
-			}
-			&.type {
-				background-color : #008000;
-				border-color     : #00A000;
-				&::before { content : '\f0ad'; }
-			}
-			&.group {
-				background-color : #505050;
-				border-color     : #000000;
-				&::before { content : '\f500'; }
-			}
-			&.meta {
-				background-color : #000080;
-				border-color     : #0000A0;
-				&::before { content : '\f05a'; }
-			}
-			&.system {
-				background-color : #800000;
-				border-color     : #A00000;
-				&::before { content : '\f518'; }
-			}
-		}
-	}
-}

client/homebrew/pages/basePages/uiPage/uiPage.jsx

@@ -1,38 +0,0 @@
-require('./uiPage.less');
-const React = require('react');
-const createClass = require('create-react-class');
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../../navbar/navbar.jsx');
-const NewBrewItem = require('../../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../../navbar/help.navitem.jsx');
-const RecentNavItem = require('../../../navbar/recent.navitem.jsx').both;
-const Account = require('../../../navbar/account.navitem.jsx');
-
-
-const UIPage = createClass({
-	displayName : 'UIPage',
-
-	render : function(){
-		return <div className='uiPage sitePage'>
-			<Navbar>
-				<Nav.section>
-					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
-				</Nav.section>
-
-				<Nav.section>
-					<NewBrewItem />
-					<HelpNavItem />
-					<RecentNavItem />
-					<Account />
-				</Nav.section>
-			</Navbar>
-
-			<div className='content'>
-				{this.props.children}
-			</div>
-		</div>;
-	}
-});
-
-module.exports = UIPage;