Merge branch 'PRODUCTION' of https://github.com/naturalcrit/homebrewery into PRODUCTION

Backing up live version before v3 beta opens

.circleci/config.yml

@@ -2,23 +2,17 @@
 #
 # Check https://circleci.com/docs/2.0/language-javascript/ for more details
 #
-version: 2.1
-
-orbs:
-  node: circleci/node@5.1.0
-
+version: 2
 jobs:
   build:
     docker:
-      - image: cimg/node:20.17.0
-      - image: mongo:4.4
+      - image: circleci/node:12.16.3
+      - image: circleci/mongo:3.4-jessie
 
-    working_directory: ~/homebrewery
-    executor: node/default
+    working_directory: ~/repo
 
     steps:
-      - checkout:
-          path: ~/homebrewery
+      - checkout
 
       # Download and cache dependencies
       - restore_cache:
@@ -27,75 +21,12 @@ jobs:
           # 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
+      - run: npm install
 
       - 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 - Definition Lists
-          command: npm run test:definition-lists
-      - 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
+      - run: npm run circleci

.eslintrc.js

@@ -0,0 +1,78 @@
+module.exports = {
+	root          : true,
+	parserOptions : {
+		ecmaVersion  : 2021,
+		sourceType   : 'module',
+		ecmaFeatures : {
+			jsx : true
+		}
+	},
+	env : {
+		browser : true,
+		node    : true
+	},
+	plugins : ['react'],
+	rules   : {
+		/** Errors **/
+		'camelcase'              : ['error', { properties: 'never' }],
+		'func-style'             : ['error', 'expression', { allowArrowFunctions: true }],
+		'no-array-constructor'   : 'error',
+		'no-iterator'            : 'error',
+		'no-nested-ternary'      : 'error',
+		'no-new-object'          : 'error',
+		'no-proto'               : 'error',
+		'react/jsx-no-bind'      : ['error', { allowArrowFunctions: true }],
+		'react/jsx-uses-react'   : 'error',
+		'react/prefer-es6-class' : ['error', 'never'],
+
+		/** Warnings **/
+		'max-lines' : ['warn', {
+			max            : 200,
+			skipComments   : true,
+			skipBlankLines : true,
+		}],
+		'max-depth'            : ['warn', { max: 4 }],
+		'max-params'           : ['warn', { max: 5 }],
+		'no-restricted-syntax' : ['warn', 'ClassDeclaration', 'SwitchStatement'],
+		'no-unused-vars'       : ['warn', {
+			vars              : 'all',
+			args              : 'none',
+			varsIgnorePattern : 'config|_|cx|createClass'
+		}],
+		'react/jsx-uses-vars' : 'warn',
+
+		/** Fixable **/
+		'arrow-parens'    : ['warn', 'always'],
+		'brace-style'     : ['warn', '1tbs', { allowSingleLine: true }],
+		'jsx-quotes'      : ['warn', 'prefer-single'],
+		'no-var'          : 'warn',
+		'prefer-const'    : 'warn',
+		'prefer-template' : 'warn',
+		'quotes'          : ['warn', 'single', { 'allowTemplateLiterals': true }],
+		'semi'            : ['warn', 'always'],
+
+		/** Whitespace **/
+		'array-bracket-spacing' : ['warn', 'never'],
+		'arrow-spacing'         : ['warn', { before: false, after: false }],
+		'comma-spacing'         : ['warn', { before: false, after: true }],
+		'indent'                : ['warn', 'tab', { 'MemberExpression': 'off' }],
+		'keyword-spacing'       : ['warn', {
+			before    : true,
+			after     : true,
+			overrides : {
+				if : { 'before': false, 'after': false }
+			}
+		}],
+		'key-spacing' : ['warn', {
+			multiLine  : { beforeColon: true, afterColon: true, align: 'colon' },
+			singleLine : { beforeColon: false, afterColon: true }
+		}],
+		'linebreak-style'               : 'off',
+		'no-trailing-spaces'            : 'warn',
+		'no-whitespace-before-property' : 'warn',
+		'object-curly-spacing'          : ['warn', 'always'],
+		'react/jsx-indent-props'        : ['warn', 'tab'],
+		'space-in-parens'               : ['warn', 'never'],
+		'template-curly-spacing'        : ['warn', 'never'],
+	}
+};

.gitattributes

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

.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/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

@@ -11,6 +11,3 @@ config/docker.*
 todo.md
 startDB.bat
 startMViewer.bat
-.vscode
-
-coverage

.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,5 +1,4 @@
-FROM node:20-alpine
-RUN apk --no-cache add git
+FROM node:14.15
 
 ENV NODE_ENV=docker
 
@@ -10,11 +9,11 @@ WORKDIR /usr/src/app
 # This improves caching so we don't have to download the dependencies every time the code changes
 COPY package.json ./
 # --ignore-scripts tells yarn not to run postbuild.  We run it explicitly later
-RUN npm install --ignore-scripts
+RUN yarn install --ignore-scripts
 
 # Bundle app source and build application
 COPY . .
-RUN npm run build
+RUN yarn build
 
 EXPOSE 8000
-CMD [ "npm", "start" ]
+CMD [ "yarn", "start" ]

README.FREEBSD.md

@@ -10,7 +10,7 @@ These instructions assume that you are installing to a completely new, fresh Fre
 
 2. Install wget (`pkg install -y wget`). On a fresh jail, you will be prompted to press 'Y' to set up `pkg`.
 
-3. Download the installation script (`wget --no-check-certificate https://raw.githubusercontent.com/naturalcrit/homebrewery/master/install/freebsd/install.sh`). The parameter `--no-check-certificate` is required as we haven't set up any trusted certificates/authorities yet.
+3. Download the installation script (`wget --no-check-certificate https://raw.githubusercontent.com/naturalcrit/homebrewery/master/freebsd/install.sh`). The parameter `--no-check-certificate` is required as we haven't set up any trusted certificates/authorities yet.
 
 4. Make the downloaded file executable (`chmod +x install.sh`).
 

README.md

@@ -9,42 +9,37 @@ using [Markdown][markdown-url]. It is distributed under the terms of the [MIT Li
 [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
+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
+clone it, 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
+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 [node](https://nodejs.org/en/)
 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).
+    For 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. 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\4.4\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. 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.insert({"title":"test"})` to create a blank document. You should see `WriteResult({ "nInserted" : 1 })`
+    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", "OK", "OK" to close all the windows
+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]):
 ```
@@ -56,18 +51,10 @@ git clone https://github.com/naturalcrit/homebrewery.git
 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:
+You can set this temporarily in your shell of choice:
 * 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.
+* Linux / OSX: `export NODE_ENV=local`
 
 Third, you will need to install the Node dependencies, compile the app, and run
 it using the two commands:
@@ -76,14 +63,7 @@ it using the two commands:
 1. `npm start`
 
 You should now 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.
+in your browser and use the Homebrewery offline.
 
 ### Running the application via Docker
 
@@ -115,11 +95,11 @@ You can check out the [changelog](./changelog.md).
 
 ## License
 
-This project is licensed under the [MIT license](./license), which means you
+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,
+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.
 
@@ -128,12 +108,13 @@ images or resources used.
 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`.
+  of them are outdated, duplicates or doesn't contain any useful info. In order
+  to help you can [mark duplicates][github-mark-duplicate-url], try to
+  reproduce some complex or weird issues, try with finding a workaround for a
+  reported bug or just mention issue managers team to let them know about
+  outdated issue 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.
+  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]!

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

@@ -2,44 +2,35 @@ require('./admin.less');
 const React = require('react');
 const createClass = require('create-react-class');
 
-const BrewUtils = require('./brewUtils/brewUtils.jsx');
-const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
 
-const tabGroups = ['brew', 'notifications'];
+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 Admin = createClass({
 	getDefaultProps : function() {
 		return {};
 	},
 
-	getInitialState : function(){
-		return ({
-			currentTab : 'brew'
-		});
-	},
-
-	handleClick : function(newTab){
-		if(this.state.currentTab === newTab) return;
-		this.setState({
-			currentTab : newTab
-		});
-	},
-
 	render : function(){
 		return <div className='admin'>
+
 			<header>
 				<div className='container'>
 					<i className='fas fa-rocket' />
 					homebrewery admin
 				</div>
 			</header>
-			<main className='container'>
-				<nav className='tabs'>
-					{tabGroups.map((tab, idx)=>{ return <button className={tab===this.state.currentTab ? 'active' : ''} key={idx} onClick={()=>{ return this.handleClick(tab); }}>{tab.toUpperCase()}</button>; })}
-				</nav>
-				{this.state.currentTab==='brew' && <BrewUtils />}
-				{this.state.currentTab==='notifications' && <NotificationUtils />}
-			</main>
+			<div className='container'>
+				<Stats />
+				<hr />
+				<BrewLookup />
+				<hr />
+				<BrewCleanup />
+				<hr />
+				<BrewCompress />
+			</div>
 		</div>;
 	}
 });

client/admin/admin.less

@@ -6,95 +6,39 @@
 
 @import 'font-awesome/css/font-awesome.css';
 
-html,body, #reactContainer, .naturalCrit { min-height : 100%; }
+html,body, #reactContainer, .naturalCrit{
+	min-height : 100%;
+}
 
 @sidebarWidth : 250px;
 
-body {
-	height           : 100%;
-	padding          : 0;
-	margin           : 0;
+body{
+	background-color : #eee;
 	font-family      : 'Open Sans', sans-serif;
+	color            : #4b5055;
 	font-weight      : 100;
-	color            : #4B5055;
-	background-color : #EEEEEE;
 	text-rendering   : optimizeLegibility;
+	margin           : 0;
+	padding          : 0;
+	height : 100%;
 }
 
-:where(.admin) {
+.admin{
 
-	header {
-		padding          : 20px 0px;
-		margin-bottom    : 30px;
-		font-size        : 2em;
-		color            : white;
+	header{
 		background-color : @red;
-		i { margin-right : 30px; }
-	}
-
-	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 {
-			@maxItemWidth : 132px;
-			dt {
-				float      : left;
-				width      : @maxItemWidth;
-				clear      : left;
-				text-align : right;
-				&::after { content : ' : '; }
-			}
-			dd {
-				height      : 1em;
-				padding     : 0 0 0.5em 0;
-				margin-left : @maxItemWidth + 6px;
-			}
-		}
-
-		.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;
+		font-size: 2em;
+		padding : 20px 0px;
+		color : white;
+		margin-bottom: 30px;
+		i{
+			margin-right: 30px;
 		}
 	}
 
-	.error {
-		background: rgb(178, 54, 54);
-		color:white;
-		font-weight: 900;
-		margin-block:10px;
-		padding:10px;
+	hr{
+		margin : 30px 0px;
 	}
+
+
 }

client/admin/brewCleanup/brewCleanup.jsx

@@ -1,6 +1,7 @@
 require('./brewCleanup.less');
 const React       = require('react');
 const createClass = require('create-react-class');
+const cx          = require('classnames');
 
 const request = require('superagent');
 

client/admin/brewCleanup/brewCleanup.less

@@ -0,0 +1,10 @@
+.BrewCleanup{
+	.removeBox{
+		margin-top: 20px;
+		button{
+			background-color: @red;
+			margin-right: 10px;
+		}
+	}
+
+}

client/admin/brewCompress/brewCompress.jsx

@@ -1,6 +1,7 @@
 require('./brewCompress.less');
 const React       = require('react');
 const createClass = require('create-react-class');
+const cx          = require('classnames');
 
 const request = require('superagent');
 

client/admin/brewCompress/brewCompress.less

@@ -0,0 +1,10 @@
+.BrewCompress{
+	.removeBox{
+		margin-top: 20px;
+		button{
+			background-color: @red;
+			margin-right: 10px;
+		}
+	}
+
+}

client/admin/brewLookup/brewLookup.jsx

@@ -1,5 +1,4 @@
 require('./brewLookup.less');
-
 const React = require('react');
 const createClass = require('create-react-class');
 const cx    = require('classnames');
@@ -14,43 +13,22 @@ const BrewLookup = createClass({
 	},
 	getInitialState() {
 		return {
-			query       : '',
-			foundBrew   : null,
-			searching   : false,
-			error       : null,
-			scriptCount : 0
+			query     : '',
+			foundBrew : null,
+			searching : false,
+			error     : null
 		};
 	},
 	handleChange(e){
 		this.setState({ query: e.target.value });
 	},
 	lookup(){
-		this.setState({ searching: true, error: null, scriptCount: 0 });
+		this.setState({ searching: true, error: null });
 
 		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,
-				});
-			})
+			.then((res)=>this.setState({ foundBrew: res.body }))
 			.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();
+			.finally(()=>this.setState({ searching: false }));
 	},
 
 	renderFoundBrew(){
@@ -69,23 +47,12 @@ const BrewLookup = createClass({
 				<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>;
 	},
 

client/admin/brewLookup/brewLookup.less

@@ -0,0 +1,30 @@
+
+.brewLookup{
+	input{
+		height        : 33px;
+		margin-bottom : 20px;
+		padding       : 0px 10px;
+		font-family   : monospace;
+	}
+	button{
+		vertical-align : middle;
+		height         : 37px;
+	}
+	dl{
+		@maxItemWidth : 132px;
+		dt{
+			float      : left;
+			clear      : left;
+			width      : @maxItemWidth;
+			text-align : right;
+			&::after {
+				content: " : ";
+			}
+		}
+		dd{
+			height      : 1em;
+			margin-left : @maxItemWidth + 6px;
+			padding     : 0 0 0.5em 0;
+		}
+	}
+}

client/admin/brewUtils/brewCleanup/brewCleanup.less

@@ -1,9 +0,0 @@
-.BrewCleanup {
-	.removeBox {
-		margin-top : 20px;
-		button {
-			margin-right     : 10px;
-			background-color : @red;
-		}
-	}
-}

client/admin/brewUtils/brewCompress/brewCompress.less

@@ -1,9 +0,0 @@
-.BrewCompress {
-	.removeBox {
-		margin-top : 20px;
-		button {
-			margin-right     : 10px;
-			background-color : @red;
-		}
-	}
-}

client/admin/brewUtils/brewLookup/brewLookup.less

@@ -1,6 +0,0 @@
-.brewLookup {
-    .cleanButton {
-        display : inline-block;
-        width   : 100%;
-    }
-}

client/admin/brewUtils/brewUtils.jsx

@@ -1,24 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-
-
-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/stats/stats.less

@@ -1,13 +0,0 @@
-
-.Stats {
-	position : relative;
-	
-	.pending {
-		position         : absolute;
-		top              : 0px;
-		left             : 0px;
-		width            : 100%;
-		height           : 100%;
-		background-color : rgba(238,238,238, 0.5);
-	}
-}

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,37 +0,0 @@
-.notificationAdd {
-	position       : relative;
-	display        : flex;
-	flex-direction : column;
-	width          : 500px;
-
-	.field {
-		display               : grid;
-		grid-template-columns : 120px 150px;
-		align-items           : center;
-		justify-items         : stretch;
-		width                 : 100%;
-		margin-bottom         : 20px;
-   
-	
-		input {
-			height        : 33px;
-			padding       : 0px 10px;
-			margin-bottom : unset;
-			font-family   : monospace;
-		}
-	
-		textarea {
-			width      : 50ch;
-			min-height : 7em;
-			max-height : 20em;
-			resize     : vertical;
-			padding	   : 10px;
-		}
-	}
-
-	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,40 +0,0 @@
-
-.notificationLookup {
-	width     : 450px;
-	height	  : fit-content;
-
-	.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;
-			}
-
-			dl dt{
-				font-weight: 900;
-			}
-		}
-	}
-	.noNotification { margin-block : 20px; }
-}

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/admin/stats/stats.less

@@ -0,0 +1,28 @@
+
+.Stats{
+	position : relative;
+	.pending{
+		position         : absolute;
+		top              : 0px;
+		left             : 0px;
+		height           : 100%;
+		width            : 100%;
+		background-color : rgba(238,238,238, 0.5);
+	}
+	dl{
+		@maxItemWidth : 132px;
+		dt{
+			float      : left;
+			clear      : left;
+			width      : @maxItemWidth;
+			text-align : right;
+			&::after {
+				content: " : ";
+			}
+		}
+		dd{
+			margin  : 0 0 0 @maxItemWidth + 10px;
+			padding : 0 0 0.5em 0;
+		}
+	}
+}

client/components/Anchored.jsx

@@ -1,91 +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.
-
-
-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,13 +0,0 @@
-
-
-.anchored-box {
-	position:absolute;
-	@supports (inset-block-start: anchor(bottom)){
-		inset-block-start: anchor(bottom);
-	}
-	justify-self: anchor-center;
-	visibility: hidden;
-	&.active {
-		visibility: visible;
-	}
-}

client/components/combobox.jsx

@@ -1,128 +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({
-			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(e){
-		this.setState({
-			value : e.currentTarget.getAttribute('data-value')
-		}, ()=>{this.props.onSelect(this.state.value);});
-		;
-	},
-	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
-							}, ()=>this.props.onEntry(e));
-						}
-					}}
-				/>
-			</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());
-					} else 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: (e)=>this.handleSelect(e) });
-			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,50 +0,0 @@
-.dropdown-container {
-    position:relative;
-    input {
-        width: 100%;
-    }
-    .dropdown-options {
-        position:absolute;
-        background-color: white;
-        z-index: 100;
-        width: 100%;
-        border: 1px solid gray;
-        overflow-y: auto;
-        max-height: 200px;
-
-        &::-webkit-scrollbar {
-          width: 14px;
-        }
-        &::-webkit-scrollbar-track {
-          background: #ffffff;
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: #949494;
-          border-radius: 10px;
-          border: 3px solid #ffffff;
-        }
-
-        .item {
-            position:relative;
-            font-size: 11px;
-            font-family: Open Sans;
-            padding: 5px;
-            cursor: default;
-            margin: 0 3px;
-            //border-bottom: 1px solid darkgray;
-            &:hover {
-                filter: brightness(120%);
-                background-color: rgb(163, 163, 163);
-            }
-            .detail {
-                width:100%;
-                text-align: left;
-                color: rgb(124, 124, 124);
-                font-style:italic;
-                font-size: 9px;
-            }
-        }
-
-    }
-
-}

client/components/dialog.jsx

@@ -1,33 +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, ...rest }) {
-	const dialogRef = useRef(null);
-
-	useEffect(()=>{
-		if(dismisskeys.length !== 0) {
-			blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
-		}
-	}, [dialogRef.current, dismisskeys]);
-
-	const dismiss = ()=>{
-		dismisskeys.forEach((key)=>{
-			if(key) {
-				localStorage.setItem(key, 'true');
-			}
-		});
-		dialogRef.current?.close();
-	};
-
-	return (
-		<dialog ref={dialogRef} onCancel={dismiss} {...rest}>
-			{rest.children}
-			<button className='dismiss' onClick={dismiss}>
-				{closeText}
-			</button>
-		</dialog>
-	);
-};
-
-export default Dialog;

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,270 +1,223 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./brewRenderer.less');
 const React = require('react');
-const { useState, useRef, useCallback, useMemo } = React;
+const createClass = require('create-react-class');
 const _ = require('lodash');
+const cx = require('classnames');
 
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
-import Markdown from 'naturalcrit/markdown.js';
+const Markdown = require('naturalcrit/markdown.js');
 const ErrorBar = require('./errorBar/errorBar.jsx');
-const ToolBar  = require('./toolBar/toolBar.jsx');
 
 //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');
-
-import { safeHTML } from './safeHTML.js';
 
 const PAGE_HEIGHT = 1056;
+const PPR_THRESHOLD = 50;
 
-const INITIAL_CONTENT = dedent`
-	<!DOCTYPE html><html><head>
-	<link href="//use.fontawesome.com/releases/v6.5.1/css/all.css" rel="stylesheet" type="text/css" />
-	<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 cleanText = safeHTML(props.contents);
-	return <div className={props.className} id={`p${props.index + 1}`} style={props.style}>
-	         <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'
-	});
-
-	const [displayOptions, setDisplayOptions] = useState({
-		zoomLevel    : 100,
-		spread       : 'single',
-		startOnRight : true,
-		pageShadows  : true
-	});
-
-	const mainRef  = useRef(null);
-
-	if(props.renderer == 'legacy') {
-		rawPages = props.text.split('\\page');
-	} else {
-		rawPages = props.text.split(/^\\page$/gm);
-	}
-
-	const scrollToHash = (hash)=>{
-		if(!hash) return;
-
-		const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
-		let anchor = iframeDoc.querySelector(hash);
-
-		if(anchor) {
-			anchor.scrollIntoView({ behavior: 'smooth' });
+const BrewRenderer = createClass({
+	getDefaultProps : function() {
+		return {
+			text     : '',
+			style    : '',
+			renderer : 'legacy',
+			errors   : []
+		};
+	},
+	getInitialState : function() {
+		let pages;
+		if(this.props.renderer == 'legacy') {
+			pages = this.props.text.split('\\page');
 		} 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 });
+			pages = this.props.text.split(/^\\page$/gm);
 		}
-	};
 
-	const updateCurrentPage = useCallback(_.throttle((e)=>{
-		const { scrollTop, clientHeight, scrollHeight } = e.target;
-		const totalScrollableHeight = scrollHeight - clientHeight;
-		const currentPageNumber = Math.max(Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length), 1);
+		return {
+			viewablePageNumber : 0,
+			height             : 0,
+			isMounted          : false,
 
-		props.onPageChange(currentPageNumber);
-	}, 200), []);
+			pages          : pages,
+			usePPR         : pages.length >= PPR_THRESHOLD,
+			visibility     : 'hidden',
+			initialContent : `<!DOCTYPE html><html><head>
+												<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+												<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
+												<link href='/homebrew/bundle.css' rel='stylesheet' />
+												<base target=_blank>
+												</head><body style='overflow: hidden'><div></div></body></html>`
+		};
+	},
+	height     : 0,
+	lastRender : <div></div>,
 
-	const isInView = (index)=>{
-		if(!state.isMounted)
-			return false;
+	componentWillUnmount : function() {
+		window.removeEventListener('resize', this.updateSize);
+	},
 
-		if(index == props.currentEditorCursorPageNum - 1)	//Already rendered before this step
-			return false;
+	componentDidUpdate : function(prevProps) {
+		if(prevProps.text !== this.props.text) {
+			let pages;
+			if(this.props.renderer == 'legacy') {
+				pages = this.props.text.split('\\page');
+			} else {
+				pages = this.props.text.split(/^\\page$/gm);
+			}
+			this.setState({
+				pages  : pages,
+				usePPR : pages.length >= PPR_THRESHOLD
+			});
+		}
+	},
 
-		if(Math.abs(index - props.currentBrewRendererPageNum - 1) <= 3)
-			return true;
+	updateSize : function() {
+		this.setState({
+			height : this.refs.main.parentNode.clientHeight,
+		});
+	},
+
+	handleScroll : function(e){
+		const target = e.target;
+		this.setState((prevState)=>({
+			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * prevState.pages.length)
+		}));
+	},
+
+	shouldRender : function(pageText, index){
+		if(!this.state.isMounted) return false;
+
+		const viewIndex = this.state.viewablePageNumber;
+		if(index == viewIndex - 3) return true;
+		if(index == viewIndex - 2) return true;
+		if(index == viewIndex - 1) return true;
+		if(index == viewIndex)     return true;
+		if(index == viewIndex + 1) return true;
+		if(index == viewIndex + 2) return true;
+		if(index == viewIndex + 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}>
+	renderPageInfo : function(){
+		return <div className='pageInfo' ref='main'>
+			{this.state.viewablePageNumber + 1} / {this.state.pages.length}
+		</div>;
+	},
+
+	renderPPRmsg : function(){
+		if(!this.state.usePPR) return;
+
+		return <div className='ppr_msg'>
+			Partial Page Renderer enabled, because your brew is so large. May effect rendering.
+		</div>;
+	},
+
+	renderDummyPage : function(index){
+		return <div className='phb' id={`p${index + 1}`} key={index}>
 			<i className='fas fa-spinner fa-spin' />
 		</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 }} />;
-	};
+	renderStyle : function() {
+		if(!this.props.style) return;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.style} </style>` }} />;
+	},
 
-	const renderPage = (pageText, index)=>{
-		if(props.renderer == 'legacy') {
-			const html = MarkdownLegacy.render(pageText);
-			return <BrewPage className='page phb' index={index} key={index} contents={html} />;
-		} else {
+	renderPage : function(pageText, index){
+		if(this.props.renderer == 'legacy')
+			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
+		else {
 			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);
-
-			const styles = {
-				...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
-				// Add more conditions as needed
-			};
-
-			return <BrewPage className='page' index={index} key={index} contents={html} style={styles} />;
+			return (
+				<div className='page' id={`p${index + 1}`} key={index} >
+					<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
+				</div>
+			);
 		}
-	};
+	},
 
-	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
+	renderPages : function(){
+		if(this.state.usePPR){
+			return _.map(this.state.pages, (page, index)=>{
+				if(this.shouldRender(page, index) && typeof window !== 'undefined'){
+					return this.renderPage(page, index);
+				} else {
+					return this.renderDummyPage(index);
+				}
+			});
+		}
+		if(this.props.errors && this.props.errors.length) return this.lastRender;
+		this.lastRender = _.map(this.state.pages, (page, index)=>{
+			if(typeof window !== 'undefined') {
+				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();
-		}
-	};
-
-	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
-		scrollToHash(window.location.hash);
+		return this.lastRender;
+	},
 
+	frameDidMount : function(){	//This triggers when iFrame finishes internal "componentDidMount"
 		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,
+			this.updateSize();
+			window.addEventListener('resize', this.updateSize);
+			this.renderPages(); //Make sure page is renderable before showing
+			this.setState({
 				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'));
-	};
+	render : function(){
+		//render in iFrame so broken code doesn't crash the site.
+		//Also render dummy page while iframe is mounting.
 
-	const handleDisplayOptionsChange = (newDisplayOptions)=>{
-		setDisplayOptions(newDisplayOptions);
-	};
-
-	const pagesStyle = {
-		zoom      : `${displayOptions.zoomLevel}%`,
-		columnGap : `${displayOptions.columnGap}px`,
-		rowGap    : `${displayOptions.rowGap}px`
-	};
-
-	const styleObject = {};
-
-	if(global.config.deployment) {
-		styleObject.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${global.config.deployment}</text></svg>")`;
-	}
-
-	const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
-	renderedPages = useMemo(()=>renderPages(), [displayOptions.pageShadows, props.text]);
-
-	return (
-		<>
-			{/*render dummy page while iFrame is mounting.*/}
-			{!state.isMounted
-				? <div className='brewRenderer' onScroll={updateCurrentPage}>
-					<div className='pages'>
-						{renderDummyPage(1)}
+		return (
+			<React.Fragment>
+				{!this.state.isMounted
+					? <div className='brewRenderer' onScroll={this.handleScroll}>
+						<div className='pages' ref='pages'>
+							{this.renderDummyPage(1)}
+						</div>
 					</div>
-				</div>
-				: null}
+	        : null}
 
-			<ErrorBar errors={props.errors} />
-			<div className='popups' ref={mainRef}>
-				<RenderWarnings />
-				<NotificationPopup />
-			</div>
+				<Frame initialContent={this.state.initialContent}
+					head = <link href={`${this.props.renderer == 'legacy' ? '/themes/5ePhbLegacy.style.css' : '/themes/5ePhb.style.css'}`} rel='stylesheet'/>
+					style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
+					contentDidMount={this.frameDidMount}>
+					<div className={'brewRenderer'}
+						onScroll={this.handleScroll}
+						style={{ height: this.state.height }}>
 
-			<ToolBar displayOptions={displayOptions} currentPage={props.currentBrewRendererPageNum} totalPages={rawPages.length} onDisplayOptionsChange={handleDisplayOptionsChange} />
+						<ErrorBar errors={this.props.errors} />
+						<div className='popups'>
+							<RenderWarnings />
+							<NotificationPopup />
+						</div>
 
-			{/*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 ${global.config.deployment && 'deployment'}`}
-					onScroll={updateCurrentPage}
-					onKeyDown={handleControlKeys}
-					tabIndex={-1}
-					style={ styleObject }>
-
-					{/* Apply CSS from Style tab and render pages from Markdown tab */}
-					{state.isMounted
-						&&
-						<>
-							{renderedStyle}
-							<div lang={`${props.lang || 'en'}`} style={pagesStyle} className={
-								`pages ${displayOptions.startOnRight ? 'recto' : 'verso'}	${displayOptions.spread}` } >
-								{renderedPages}
-							</div>
-						</>
-					}
-				</div>
-			</Frame>
-		</>
-	);
-};
+						<div className='pages' ref='pages'>
+							{/* Apply CSS from Style tab and render pages from Markdown tab */}
+							{this.state.isMounted
+								&&
+								<>
+									{this.renderStyle()}
+									{this.renderPages()}
+								</>
+							}
+						</div>
+					</div>
+				</Frame>
+				{this.renderPageInfo()}
+				{this.renderPPRmsg()}
+			</React.Fragment>
+		);
+	}
+});
 
 module.exports = BrewRenderer;

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,85 +1,40 @@
 @import (multiple, less) 'shared/naturalcrit/styles/reset.less';
 
-.brewRenderer {
-	overflow-y    : scroll;
-	will-change   : transform;
-	padding-top   : 60px;
-	height        : 100vh;
-	&:has(.facing, .flow) {
-		padding : 60px 30px;
-	}
-	&.deployment {
-		background-color: darkred;
-	}
-	:where(.pages) {
-		&.facing {
-			display: grid; 
-			grid-template-columns: repeat(2, auto); 
-			grid-template-rows: repeat(3, auto); 
-			gap: 10px 10px; 
-			justify-content: 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-left: unset !important;
-				margin-right: unset !important;
-			}
-		}
-
-		&.flow {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 10px;
-			justify-content: flex-start;
-			& :where(.page) {
-				flex: 0 0 auto;
-				margin-left: unset !important;
-				margin-right: unset !important;
-			}
-
-		}
-
-		& > :where(.page) {
-			width         : 215.9mm;
-			height        : 279.4mm;
+.brewRenderer{
+	will-change : transform;
+	overflow-y  : scroll;
+	.pages{
+		margin : 30px 0px;
+		&>.page{
 			margin-right  : auto;
 			margin-bottom : 30px;
 			margin-left   : auto;
-			box-shadow    : 1px 4px 14px #000000;
+			box-shadow    : 1px 4px 14px #000;
 		}
-		*[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-top : unset;
-		overflow-y  : unset;
-		.pages {
-			margin : 0px;
-			zoom: 100% !important;
-			& > .page { box-shadow : unset; }
-		}
-	}
-}
+.pane{
+	position : relative;
+}
+.pageInfo{
+	position         : absolute;
+	right            : 17px;
+	bottom           : 0;
+	z-index          : 1000;
+	padding          : 8px 10px;
+	background-color : #333;
+	font-size        : 10px;
+	font-weight      : 800;
+	color            : white;
+}
+.ppr_msg{
+	position         : absolute;
+	left             : 0px;
+	bottom           : 0;
+	z-index          : 1000;
+	padding          : 8px 10px;
+	background-color : #333;
+	font-size        : 10px;
+	font-weight      : 800;
+	color            : white;
+}

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -2,9 +2,9 @@ require('./errorBar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
+const cx    = require('classnames');
 
 const ErrorBar = createClass({
-	displayName     : 'ErrorBar',
 	getDefaultProps : function() {
 		return {
 			errors : []

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,64 +1,91 @@
 require('./notificationPopup.less');
-import React, { useEffect, useState } from 'react';
-import request from '../../utils/request-middleware.js';
+const React = require('react');
+const createClass = require('create-react-class');
+const _     = require('lodash');
+const cx    = require('classnames');	//Unused variable
 
-import Dialog from '../../../components/dialog.jsx';
+const DISMISS_KEY = 'dismiss_notification09-9-21';
 
-const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
+const NotificationPopup = createClass({
+	getInitialState : function() {
+		return {
+			notifications : {}
+		};
+	},
+	componentDidMount : function() {
+		this.checkNotifications();
+		window.addEventListener('resize', this.checkNotifications);
+	},
+	componentWillUnmount : function() {
+		window.removeEventListener('resize', this.checkNotifications);
+	},
+	notifications : {
+		psa : function(){
+			return <li key='psa'>
+				<em>V3.0.0 Released!</em> <br />
+				After a long and bumpy road, we decided it was high time we finally release version 3 of the homebrewery into the wild. You can check out a
+				brief overview and see how to opt-in to the new features here:&nbsp;
+				<a target='_blank' href='https://homebrewery.naturalcrit.com/v3_preview'>V3 Welcome Page</a> and&nbsp;
+				<a target='_blank' href='https://homebrewery.naturalcrit.com/changelog'>the Changelog</a>.
+				<br /><br />
+				<em>BE WARNED:</em> As we continue to develop V3, expect small tweaks in the styling, fonts, and snippets; your brews may look slightly
+				different from day-to-day. All of your old documents will continue to work as normal; we are not touching them. If you don't want to deal
+				with the possibility of slight formatting changes, you may choose to stick with the Legacy renderer on any of your brews for as long as you like.
+				<br /><br />
+				With this in mind, if you still wish to try out V3, you can opt-in any of your brews to the the V3 renderer.
+				This will likely break much of your formatting as a lot of the Markdown code has been updated, and starting from scratch may be cleaner.
+				(Don't worry, you can always change the renderer back to Legacy	for any brew at any time).
+			</li>;
+		},
+		refreshGoogle : function (){
+			return <li key='refreshGoogle'>
+				<em>Refresh your Google Drive Credentials!</em> <br />
+				Currently a lot of people are striking issues with their Google credentials expiring, which happens one year after the last sign in via
+				Google. This can cause errors when trying to save your brews. If this happens, simply visit the&nbsp;
+				<a target='_blank' href='https://www.naturalcrit.com/login'>
+				logout page
+				</a>
+				, sign out, and then sign	back in "with Google" to refresh your credentials. See&nbsp;
+				<a target='_blank' href='https://github.com/naturalcrit/homebrewery/discussions/1580'>
+					this discussion on Github
+				</a> for more details.
+			</li>;
+		},
+		faq : function(){
+			return <li key='faq'>
+				<em>Protect your work! </em> <br />
+				If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
+				<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
+					See the FAQ
+				</a> to learn how to avoid losing your work!
+			</li>;
+		},
+	},
+	checkNotifications : function(){
+		const hideDismiss = localStorage.getItem(DISMISS_KEY);
+		if(hideDismiss) return this.setState({ notifications: {} });
 
-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;
+		this.setState({
+			notifications : _.mapValues(this.notifications, (fn)=>{ return fn(); })	//Convert notification functions into their return text value
 		});
-		setNotifications(filteredNotifications);
-		setDismissKeyList(filteredNotifications.map((notif)=>notif.dismissKey));
-	};
+	},
+	dismiss : function(){
+		localStorage.setItem(DISMISS_KEY, true);
+		this.checkNotifications();
+	},
+	render : function(){
+		if(_.isEmpty(this.state.notifications)) return null;
 
-	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: notification.text }}></p>
-			</li>
-		));
-	};
-
-	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>;
-};
+		return <div className='notificationPopup'>
+			<i className='fas fa-times dismiss' onClick={this.dismiss}/>
+			<i className='fas fa-info-circle info' />
+			<div className='header'>
+				<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>{_.values(this.state.notifications)}</ul>
+		</div>;
+	}
+});
 
 module.exports = NotificationPopup;

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -1,62 +1,62 @@
-.popups {
+.popups{
 	position         : fixed;
-	top              : calc(@navbarHeight + @viewerToolsHeight);
-	right            : 24px;
+	top              : @navbarHeight;
+	right            : 15px;
 	z-index          : 10001;
 	width            : 450px;
-	margin-top       : 5px;
 }
 
-.notificationPopup {
+.notificationPopup{
 	position         : relative;
+	display          : inline-block;
 	width            : 100%;
 	padding          : 15px;
 	padding-bottom   : 10px;
 	padding-left     : 25px;
-	color            : white;
 	background-color : @blue;
-	border           : none;
-	&[open] { display : inline-block; }
-	a {
+	color            : white;
+	a{
+		color       : #e0e5c1;
 		font-weight : 800;
-		color       : #E0E5C1;
 	}
-	i.info {
+	i.info{
 		position  : absolute;
 		top       : 12px;
 		left      : 12px;
-		font-size : 2.5em;
 		opacity   : 0.8;
+		font-size : 2.5em;
 	}
-	button.dismiss {
-		position         : absolute;
-		top              : 10px;
-		right            : 10px;
-		cursor           : pointer;
-		background-color : transparent;
-		opacity          : 0.6;
-		&:hover { opacity : 1; }
+	i.dismiss{
+		position : absolute;
+		top      : 10px;
+		right    : 10px;
+		cursor   : pointer;
+		opacity  : 0.6;
+		&:hover{
+			opacity : 1;
+		}
 	}
-	.header { padding-left : 50px; }
-	small {
-		font-size : 0.6em;
+	.header {
+		padding-left : 50px;
+	}
+	small{
 		opacity   : 0.7;
+		font-size : 0.6em;
 	}
-	h3 {
+	h3{
 		font-size   : 1.1em;
 		font-weight : 800;
 	}
-	ul {
+	ul{
 		margin-top          : 15px;
 		font-size           : 0.8em;
 		list-style-position : outside;
 		list-style-type     : disc;
-		li {
-			margin-top  : 1.4em;
+		li{
 			font-size   : 0.8em;
 			line-height : 1.4em;
-			em { 
-				text-transform:capitalize;
+			margin-top  : 1.4em;
+			em{
 				font-weight : 800;
 			}
 		}

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,227 +0,0 @@
-require('./toolBar.less');
-const React = require('react');
-const { useState, useEffect } = React;
-const _ = require('lodash');
-
-import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
-// import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';
-
-const MAX_ZOOM = 300;
-const MIN_ZOOM = 10;
-
-const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChange })=>{
-
-	const [pageNum, setPageNum] = useState(currentPage);
-	const [toolsVisible, setToolsVisible] = useState(true);
-
-	useEffect(()=>{
-		setPageNum(currentPage);
-	}, [currentPage]);
-
-	const handleZoomButton = (zoom)=>{
-		handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
-	};
-
-	const handleOptionChange = (optionKey, newValue)=>{
-		//setDisplayOptions(prevOptions => ({ ...prevOptions, [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.
-	};
-
-	const scrollToPage = (pageNumber)=>{
-		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' });
-		setPageNum(pageNumber);
-	};
-
-
-	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;
-
-			desiredZoom = (iframeWidth / widestPage) * 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.
-			const minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, 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'>
-			<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
-			{/*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', 'active');}}
-						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={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={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(pageNum - 1)}
-					disabled={pageNum <= 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)}
-					/>
-					<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(pageNum + 1)}
-					disabled={pageNum >= totalPages}
-				>
-					<i className='fas fa-arrow-right'></i>
-				</button>
-			</div>
-		</div>
-	);
-};
-
-module.exports = ToolBar;

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -1,187 +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 30px;
-	align-items      : center;
-	justify-content  : center;
-	width            : 100%;
-	height           : auto;
-	padding          : 2px 0;
-	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          : #000000;
-		background     : #EEEEEE;
-		border         : 1px solid gray;
-		&: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 {
-			width        : 4ch;
-			margin-right : 1ch;
-			text-align   : center;
-		}
-	}
-
-	button {
-		box-sizing       : border-box;
-		display          : flex;
-		align-items      : center;
-		justify-content  : center;
-		width            : auto;
-		min-width        : 46px;
-		height           : 100%;
-		&:hover { background-color : #444444; }
-		&:focus { border  : 1px solid #D3D3D3;outline : none;}
-		&:disabled {
-			color            : #777777;
-			background-color : unset !important;
-		}
-		i { font-size : 1.2em; }
-	}
-
-	&.hidden {
-		flex-wrap        : nowrap;
-		width            : 32px;
-		overflow         : hidden;
-		background-color : unset;
-		opacity          : 0.5;
-		transition       : all 0.3s ease;
-		& > *:not(.toggleButton) {
-			opacity    : 0;
-			transition : all 0.2s ease;
-		}
-	}
-}
-
-button.toggleButton {
-	position  : absolute;
-	left      : 0;
-	z-index   : 5;
-	width     : 32px;
-	min-width : unset;
-}

client/homebrew/editor/editor.jsx

@@ -1,17 +1,14 @@
-/*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 cx = require('classnames');
 const dedent = require('dedent-tabs').default;
-import Markdown from '../../../shared/naturalcrit/markdown.js';
 
 const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
 const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 
-const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
-
 const SNIPPETBAR_HEIGHT = 25;
 const DEFAULT_STYLE_TEXT = dedent`
 				/*=======---  Example CSS styling  ---=======*/
@@ -21,10 +18,13 @@ const DEFAULT_STYLE_TEXT = dedent`
 					color: black;
 				}`;
 
-let isJumping = false;
+const splice = function(str, index, inject){
+	return str.slice(0, index) + inject + str.slice(index);
+};
+
+
 
 const Editor = createClass({
-	displayName     : 'Editor',
 	getDefaultProps : function() {
 		return {
 			brew : {
@@ -35,474 +35,180 @@ const Editor = createClass({
 			onTextChange  : ()=>{},
 			onStyleChange : ()=>{},
 			onMetaChange  : ()=>{},
-			reportError   : ()=>{},
 
-			onCursorPageChange : ()=>{},
-			onViewPageChange   : ()=>{},
-
-			editorTheme : 'default',
-			renderer    : 'legacy',
-
-			currentEditorCursorPageNum : 1,
-			currentEditorViewPageNum   : 1,
-			currentBrewRendererPageNum : 1,
+			renderer : 'legacy'
 		};
 	},
 	getInitialState : function() {
 		return {
-			editorTheme : this.props.editorTheme,
-			view        : 'text' //'text', 'style', 'meta'
+			view : 'text' //'text', 'style', 'meta'
 		};
 	},
 
-	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';},
 
 	componentDidMount : function() {
-
 		this.updateEditorSize();
 		this.highlightCustomMarkdown();
 		window.addEventListener('resize', this.updateEditorSize);
-		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
-			});
-		}
 	},
 
 	componentWillUnmount : function() {
 		window.removeEventListener('resize', this.updateEditorSize);
 	},
 
-	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);
-			}
-		}
-	},
-
-	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();
-		}
-	},
-
 	updateEditorSize : function() {
-		if(this.codeEditor.current) {
-			let paneHeight = this.editor.current.parentNode.clientHeight;
-			paneHeight -= SNIPPETBAR_HEIGHT;
-			this.codeEditor.current.codeMirror.setSize(null, paneHeight);
+		if(this.refs.codeEditor) {
+			let paneHeight = this.refs.main.parentNode.clientHeight;
+			paneHeight -= SNIPPETBAR_HEIGHT + 1;
+			this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
 		}
 	},
 
-	updateCurrentCursorPage : function(cursor) {
-		const lines = this.props.brew.text.split('\n').slice(0, cursor.line + 1);
-		const pageRegex = this.props.brew.renderer == 'V3' ? /^\\page$/ : /\\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(0, topScrollLine + 1);
-		const pageRegex = this.props.brew.renderer == 'V3' ? /^\\page$/ : /\\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);
+		let text;
+		if(this.isText())  text = this.props.brew.text;
+		if(this.isStyle()) text = this.props.brew.style ?? DEFAULT_STYLE_TEXT;
+
+		const lines = text.split('\n');
+		const cursorPos = this.refs.codeEditor.getCursorPosition();
+		lines[cursorPos.line] = splice(lines[cursorPos.line], cursorPos.ch, injectText);
+
+		const injectLines = injectText.split('\n');
+		this.refs.codeEditor.setCursorPosition(cursorPos.line + injectLines.length, cursorPos.ch  + injectLines[injectLines.length - 1].length);
+
+		if(this.isText())  this.props.onTextChange(lines.join('\n'));
+		if(this.isStyle()) this.props.onStyleChange(lines.join('\n'));
 	},
 
 	handleViewChange : function(newView){
-		this.props.setMoveArrows(newView === 'text');
 		this.setState({
 			view : newView
-		}, ()=>{
-			this.codeEditor.current?.codeMirror.focus();
-			this.updateEditorSize();
-		});	//TODO: not sure if updateeditorsize needed
+		}, this.updateEditorSize);	//TODO: not sure if updateeditorsize needed
+	},
+
+	getCurrentPage : function(){
+		const lines = this.props.brew.text.split('\n').slice(0, this.cursorPosition.line + 1);
+		return _.reduce(lines, (r, line)=>{
+			if(line.indexOf('\\page') !== -1) r++;
+			return r;
+		}, 1);
 	},
 
 	highlightCustomMarkdown : function(){
-		if(!this.codeEditor.current) return;
+		if(!this.refs.codeEditor) return;
 		if(this.state.view === 'text')  {
-			const codeMirror = this.codeEditor.current.codeMirror;
+			const codeMirror = this.refs.codeEditor.codeMirror;
 
-			codeMirror.operation(()=>{ // Batch CodeMirror styling
+			//reset custom text styles
+			const customHighlights = codeMirror.getAllMarks();
+			for (let i=0;i<customHighlights.length;i++) customHighlights[i].clear();
 
-				const foldLines = [];
+			const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{
 
-				//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
+				//reset custom line styles
+				codeMirror.removeLineClass(lineNumber, 'background');
+				codeMirror.removeLineClass(lineNumber, 'text');
 
-				for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
-
-				let editorPageCount = 2; // start page count from page 2
-
-				_.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{
-
-					//reset custom line styles
-					codeMirror.removeLineClass(lineNumber, 'background', 'pageLine');
-					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(/^\\page$/))) {
-
-						// add back the original class 'background' but also add the new class '.pageline'
+				// Legacy Codemirror styling
+				if(this.props.renderer == 'legacy') {
+					if(line.includes('\\page')){
 						codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
-						const pageCountElement = Object.assign(document.createElement('span'), {
-							className   : 'editor-page-count',
-							textContent : editorPageCount
-						});
-						codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
-
-						editorPageCount += 1;
-					};
-
-					// New Codemirror styling for V3 renderer
-					if(this.props.renderer == 'V3') {
-						if(line.match(/^\\column$/)){
-							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));
-							}
-						}
+						r.push(lineNumber);
 					}
-				});
-			});
-		}
-	},
-
-	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;
-
-		const checkIfScrollComplete = ()=>{
-			let scrollingTimeout;
-			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' ? /^\\page$/gm : /\\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);
-
-		const checkIfScrollComplete = ()=>{
-			let scrollingTimeout;
-			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');
+
+				// New Codemirror styling for V3 renderer
+				if(this.props.renderer == 'V3') {
+					if(line.match(/^\\page$/)){
+						codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
+						r.push(lineNumber);
+					}
+
+					if(line.match(/^\\column$/)){
+						codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
+						r.push(lineNumber);
+					}
+
+					// Highlight inline spans {{content}}
+					if(line.includes('{{') && line.includes('}}')){
+						const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/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])* *$|^ *}}$/);
+						if(match)
+							endCh = match.index+match[0].length;
+						codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
+					}
+				}
+
+				return r;
+			}, []);
+			return lineNumbers;
 		}
 	},
 
+	brewJump : function(){
+		const currentPage = this.getCurrentPage();
+		window.location.hash = `p${currentPage}`;
+	},
+
 	//Called when there are changes to the editor's dimensions
 	update : function(){
-		this.codeEditor.current?.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();
+		this.refs.codeEditor?.updateSize();
 	},
 
 	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.onTextChange}
-					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent} />
-			</>;
+			return <CodeEditor key='text'
+				ref='codeEditor'
+				language='gfm'
+				value={this.props.brew.text}
+				onChange={this.props.onTextChange} />;
 		}
 		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.onStyleChange}
-					enableFolding={true}
-					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent} />
-			</>;
+			return <CodeEditor key='style'
+				ref='codeEditor'
+				language='css'
+				value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
+				onChange={this.props.onStyleChange} />;
 		}
 		if(this.isMeta()){
-			return <>
-				<CodeEditor key='codeEditor'
-					view={this.state.view}
-					style={{ display: 'none' }}
-					rerenderParent={this.rerenderParent} />
-				<MetadataEditor
-					metadata={this.props.brew}
-					onChange={this.props.onMetaChange}
-					reportError={this.props.reportError}
-					userThemes={this.props.userThemes}/>
-			</>;
+			return <MetadataEditor
+				metadata={this.props.brew}
+				onChange={this.props.onMetaChange} />;
 		}
 	},
 
-	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();
-	},
-
 	render : function(){
+		this.highlightCustomMarkdown();
 		return (
-			<div className='editor' ref={this.editor}>
+			<div className='editor' ref='main'>
 				<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}
-					snippetBundle={this.props.snippetBundle}
-					cursorPos={this.codeEditor.current?.getCursorPosition() || {}}
-					updateBrew={this.props.updateBrew}
-				/>
+					renderer={this.props.renderer} />
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/editor.less

@@ -1,106 +1,45 @@
-@import 'themes/codeMirror/customEditorStyles.less';
-.editor {
+
+.editor{
 	position : relative;
 	width    : 100%;
-	container: editor / inline-size;
 
-	.codeEditor {
-		height            : 100%;
-		.pageLine {
-			background : #33333328;
-			border-top : #333399 solid 1px;
+	.codeEditor{
+		height : 100%;
+		.pageLine{
+			background-color : fade(#333, 15%);
+			border-bottom    : #333 solid 1px;
 		}
-		.editor-page-count {
-			float : right;
+		.columnSplit{
+			font-style : italic;
 			color : grey;
+			background-color : fade(#299, 15%);
+			border-bottom    : #299 solid 1px;
 		}
-		.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) {
+		.block{
+			color : purple;
 			font-weight : bold;
-			color       : purple;
 			//font-style: italic;
 		}
-		.inline-block:not(.cm-comment) {
+		.inline-block{
+			color : red;
 			font-weight : bold;
-			color       : red;
 			//font-style: italic;
 		}
-		.injection:not(.cm-comment) {
-			font-weight : bold;
-			color       : green;
-		}
-		.emoji:not(.cm-comment) {
-			margin-left    : 2px;
-			color          : #360034;
-			background     : #ffc8ff;
-			border-radius  : 6px;
-			font-weight    : bold;
-			padding-bottom : 1px;
-			outline-offset : -2px;
-			outline        : solid 2px #ff96fc;
-		}
-		.superscript:not(.cm-comment) {
-			font-weight    : bold;
-			color          : goldenrod;
-			vertical-align : super;
-			font-size      : 0.9em;
-		}
-		.subscript:not(.cm-comment) {
-			font-weight    : bold;
-			color          : rgb(123, 123, 15);
-			vertical-align : sub;
-			font-size      : 0.9em;
-		}
-		.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; }
+	.brewJump{
+		position: absolute;
+		background-color: @teal;
+		cursor: pointer;
+		width : 30px;
+		height : 30px;
+		display : flex;
+		align-items : center;
+		bottom : 20px;
+		right : 20px;
+		z-index: 1000000;
+		justify-content:center;
+		.tooltipLeft("Jump to brew page");
 	}
 
 }

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -1,90 +1,34 @@
-/* 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 Nav = require('naturalcrit/nav/nav.jsx');
-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 cx    = require('classnames');
+const request = require('superagent');
 
 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        : [],
+				tags        : '',
 				published   : false,
 				authors     : [],
 				systems     : [],
-				renderer    : 'legacy',
-				theme       : '5ePHB',
-				lang        : 'en'
+				renderer    : 'legacy'
 			},
-			onChange    : ()=>{},
-			reportError : ()=>{}
+			onChange : ()=>{}
 		};
 	},
 
-	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);
-
-		// 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
-			});
-		} else {
-			// if validation issues, display built-in browser error popup with each error.
-			const errMessage = validationErr.map((err)=>{
-				return `- ${err}`;
-			}).join('\n');
-
-			callIfExists(e.target, 'setCustomValidity', errMessage);
-			callIfExists(e.target, 'reportValidity');
-		}
+		this.props.onChange(_.merge({}, this.props.metadata, {
+			[name] : e.target.value
+		}));
 	},
-
 	handleSystem : function(system, e){
 		if(e.target.checked){
 			this.props.metadata.systems.push(system);
@@ -93,31 +37,16 @@ const MetadataEditor = createClass({
 		}
 		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');
+		this.props.onChange(this.props.metadata);
 	},
 	handlePublish : function(val){
-		this.props.onChange({
-			...this.props.metadata,
+		this.props.onChange(_.merge({}, 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');
-	},
-
-	handleLanguage : function(languageCode){
-		this.props.metadata.lang = languageCode;
-		this.props.onChange(this.props.metadata);
+		}));
 	},
 
 	handleDelete : function(){
@@ -129,17 +58,25 @@ const MetadataEditor = createClass({
 			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}`)
+		request.delete(`/api/${this.props.metadata.editId}`)
 			.send()
-			.end((err, res)=>{
-				if(err) {
-					this.props.reportError(err);
-				} else {
-					window.location.href = '/';
-				}
+			.end(function(err, res){
+				window.location.href = '/';
 			});
 	},
 
+	getRedditLink : function(){
+		const meta = this.props.metadata;
+
+		const shareLink = (meta.googleId || '') + meta.shareId;
+		const title = `${meta.title} [${meta.systems.join(' ')}]`;
+		const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
+
+**[Homebrewery Link](https://homebrewery.naturalcrit.com/share/${shareLink})**`;
+
+		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`;
+	},
+
 	renderSystems : function(){
 		return _.map(SYSTEMS, (val)=>{
 			return <label key={val}>
@@ -190,92 +127,18 @@ const MetadataEditor = createClass({
 		</div>;
 	},
 
-	renderThemeDropdown : function(){
-		if(!global.enable_themes) return;
+	renderShareToReddit : function(){
+		if(!this.props.metadata.shareId) return;
 
-		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}`} onClick={()=>this.handleTheme(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>;
-			});
-		};
-
-		const currentRenderer = this.props.metadata.renderer;
-		const currentTheme    = mergedThemes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme]
-													?? { name: `!!! THEME MISSING !!! ID=${this.props.metadata.theme}` };
-		let dropdown;
-
-		if(currentRenderer == 'legacy') {
-			dropdown =
-				<Nav.dropdown className='disabled value' trigger='disabled'>
-					<div> {`Themes are not supported in the Legacy Renderer`} <i className='fas fa-caret-down'></i> </div>
-				</Nav.dropdown>;
-		} else {
-			dropdown =
-				<Nav.dropdown className='value' trigger='click'>
-					<div> {currentTheme.author ?? _.upperFirst(currentRenderer)} : {currentTheme.name} <i className='fas fa-caret-down'></i> </div>
-
-					{listThemes(currentRenderer)}
-				</Nav.dropdown>;
-		}
-
-		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}`} data-value={`${code}`} data-detail={`${localName.of(code)}`}>
-					{`${code}`}
-					<div className='detail'>{`${localName.of(code)}`}</div>
-				</div>;
-			});
-		};
-
-		const debouncedHandleFieldChange =  _.debounce(this.handleFieldChange, 500);
-
-		return <div className='field language'>
-			<label>language</label>
+		return <div className='field reddit'>
+			<label>reddit</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
-						debouncedHandleFieldChange('lang', e);
-					}}
-					options={listLanguages()}
-					autoSuggest={{
-						suggestMethod           : 'startsWith',
-						clearAutoSuggestOnClick : true,
-						filterOn                : ['data-value', 'data-detail', 'title']
-					}}
-				>
-				</Combobox>
-				<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
+				<a href={this.getRedditLink()} target='_blank' rel='noopener noreferrer'>
+					<button className='publish'>
+						<i className='fab fa-reddit-alien' /> share to reddit
+					</button>
+				</a>
 			</div>
-
 		</div>;
 	},
 
@@ -304,48 +167,36 @@ const MetadataEditor = createClass({
 						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>
+
+				<a href='/v3_preview' target='_blank' rel='noopener noreferrer'>
+					Click here for a quick intro to V3!
+				</a>
 			</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}
+					value={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 className='field description'>
+				<label>description</label>
+				<textarea value={this.props.metadata.description} className='value'
+					onChange={(e)=>this.handleFieldChange('description', e)} />
 			</div>
+			{/*}
+			<div className='field tags'>
+				<label>tags</label>
+				<textarea value={this.props.metadata.tags}
+					onChange={(e)=>this.handleFieldChange('tags', e)} />
+			</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)}
-				/>
+			{this.renderAuthors()}
 
 			<div className='field systems'>
 				<label>systems</label>
@@ -354,34 +205,18 @@ const MetadataEditor = createClass({
 				</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>
+					<small>Published homebrews will be publicly viewable and searchable (eventually...)</small>
 				</div>
 			</div>
 
+			{this.renderShareToReddit()}
+
 			{this.renderDelete()}
 
 		</div>;

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,324 +1,89 @@
-@import 'naturalcrit/styles/colors.less';
 
-
-.metadataEditor {
+.metadataEditor{
 	position         : absolute;
-	z-index          : 5;
+	z-index          : 10000;
 	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;
-	background-color : #999999;
-	font-size		 : 13px;
-
-	h1 {
-		margin: 0 0 40px;
-		font-weight: bold;
-		text-transform: uppercase;
-	}
-	
-	h2 {
-		margin      : 20px 0;
-		font-weight : bold;
-		border-bottom: 2px solid gray;
-		color: #555;
-	}
-
-	& > 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;
+	background-color : #999;
+	.field{
 		display       : flex;
-		flex-wrap     : wrap;
 		width         : 100%;
-		min-width     : 200px;
-		& > label {
+		margin-bottom : 10px;
+		&>label{
+			display        : inline-block;
+			vertical-align : top;
 			width          : 80px;
+			font-size      : 0.7em;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
-			font-size: .9em;
+			flex           : 0 0 auto;
 		}
-		& > .value {
+		&>.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 {
-			height      : 1.4em;
-			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; }
-			}
-		}
-
-		&.description {
-			flex : 1;
-			textarea.value {
-				height      : auto;
-				font-family : 'Open Sans', sans-serif;
-				resize      : none;
-			}
-		}
-
-		&.language .language-dropdown {
-			z-index   : 200;
-			max-width : 150px;
+			min-width      : 200px;
 		}
 	}
-
-
-	.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;
+	.description.field textarea.value{
+		resize      : none;
+		height      : 5em;
+		font-family : 'Open Sans', sans-serif;
+		font-size   : 0.8em;
 	}
-
-	.systems.field .value {
-		label {
+	.systems.field .value{
+		label{
+			vertical-align : middle;
+			margin-right   : 15px;
+			cursor         : pointer;
+			font-size      : 0.7em;
+			font-weight    : 800;
+			user-select    : none;
+			white-space    : nowrap;
 			display        : inline-flex;
 			align-items    : center;
-			margin-right   : 15px;
-			font-size      : 0.9em;
-			font-weight    : 800;
-			white-space    : nowrap;
-			vertical-align : middle;
-			cursor         : pointer;
-			user-select    : none;
 		}
-		input {
-			margin         : 3px;
+		a {
+			font-size   : 0.7em;
+			font-weight : 800;
+			display     : inline-flex;
+		}
+		input{
 			vertical-align : middle;
 			cursor         : pointer;
+			margin         : 3px;
 		}
 	}
-	.publish.field .value {
-		position      : relative;
-		margin-bottom : 15px;
-		button { width : 100%; }
-		button.publish {
-			.colorButton(@blueLight);
+	.publish.field .value{
+		position : relative;
+		margin-bottom: 15px;
+		button{
+			width:100%;
 		}
-		button.unpublish {
-			.colorButton(@silver);
+		button.publish{
+			.button(@blueLight);
+		}
+		button.unpublish{
+			.button(@silver);
+		}
+		small{
+			font-size  : 0.6em;
+			font-style : italic;
 		}
 	}
 
-	.delete.field .value {
-		button {
-			.colorButton(@red);
+	.delete.field .value{
+		button{
+			.button(@red);
 		}
 	}
-	.authors.field .value {
+	.reddit.field .value{
+		button{
+			.button(@purple);
+		}
+	}
+	.authors.field .value{
+		font-size: 0.8em;
 		line-height    : 1.5em;
 	}
-
-	.themes.field {
-		.navDropdownContainer {
-			position         : relative;
-			z-index          : 100;
-			background-color : white;
-			&.disabled {
-				font-style       : italic;
-				color            : dimgray;
-				background-color : darkgray;
-			}
-			& > div:first-child {
-				padding           : 3px 3px;
-				background-color  : inherit;
-				border            : 1px solid gray;
-				i { float	: right; }
-				&:hover {
-					color            : white;
-					background-color : @blue;
-				}
-			}
-			.navDropdown .item > p {
-				width         : 45%;
-				height        : 1.1em;
-				overflow      : hidden;
-				text-overflow : ellipsis;
-				white-space   : nowrap;
-			}			
-			.navDropdown {
-				position	  : absolute;
-				width		    : 100%;
-				box-shadow	: 0px 5px 10px rgba(0, 0, 0, 0.3);
-				.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%);
-						}
-					}
-					&:hover {
-						color            : white;
-						background-color : @blue;
-					}
-					&:hover > .preview { opacity : 1; }
-					.texture-container {
-						position   : absolute;
-						top        : 0;
-						left       : 0;
-						width      : 100%;
-						height     : 100%;
-						min-height : 100%;
-						overflow   : hidden;
-						> img {
-							position            : absolute;
-							top                 : 0px;
-							right               : 0;
-							width               : 50%;
-							min-height          : 100%;
-							-webkit-mask-image  : linear-gradient(90deg, transparent, black 20%);
-							mask-image          : linear-gradient(90deg, transparent, black 20%);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.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,34 +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 (e) {
-				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;
-		}
-	]
-};
-
-
-

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -1,265 +1,78 @@
-/*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 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 SnippetsLegacy = require('./snippetsLegacy/snippets.js');
+const SnippetsV3 = require('./snippets/snippets.js');
 
-const EditorThemes = require('build/homebrew/codeMirror/editorThemes.json');
-
-const execute = function(val, props){
-	if(_.isFunction(val)) return val(props);
+const execute = function(val, brew){
+	if(_.isFunction(val)) return val(brew);
 	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         : {},
-			snippetBundle     : [],
-			updateBrew        : ()=>{}
+			brew            : {},
+			view            : 'text',
+			onViewChange    : ()=>{},
+			onInject        : ()=>{},
+			onToggle        : ()=>{},
+			showEditButtons : true,
+			renderer        : 'legacy'
 		};
 	},
 
 	getInitialState : function() {
 		return {
-			renderer      : this.props.renderer,
-			themeSelector : false,
-			snippets      : [],
-			showHistory   : false,
-			historyExists : false,
-			historyItems  : []
+			renderer : this.props.renderer
 		};
 	},
 
-	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.snippetBundle != this.props.snippetBundle) {
-			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');
-
-		for (let snippets of this.props.snippetBundle) {
-			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');
-		}
-		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;
+		let snippets = [];
 
-		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>;
-	},
+		if(this.props.renderer === 'V3')
+			snippets = SnippetsV3.filter((snippetGroup)=>snippetGroup.view === this.props.view);
+		else
+			snippets = SnippetsLegacy.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 
-	replaceContent : function(item){
-		return this.props.updateBrew(item);
-	},
-
-	toggleHistoryMenu : function(){
-		this.setState({
-			showHistory : !this.state.showHistory
+		return _.map(snippets, (snippetGroup)=>{
+			return <SnippetGroup
+				brew={this.props.brew}
+				groupName={snippetGroup.groupName}
+				icon={snippetGroup.icon}
+				snippets={snippetGroup.snippets}
+				key={snippetGroup.groupName}
+				onSnippetClick={this.handleSnippetClick}
+			/>;
 		});
 	},
 
-	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>
+		return <div className='editors'>
+			<div className={cx('text', { selected: this.props.view === 'text' })}
+				 onClick={()=>this.props.onViewChange('text')}>
+				<i className='fa fa-beer' />
 			</div>
-			<div className='codeTools'>
-			<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
-				onClick={this.props.foldCode} >
-				<i className='fas fa-compress-alt' />
+			<div className={cx('style', { selected: this.props.view === 'style' })}
+				 onClick={()=>this.props.onViewChange('style')}>
+				<i className='fa fa-paint-brush' />
 			</div>
-			<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
-				onClick={this.props.unfoldCode} >
-				<i className='fas fa-expand-alt' />
+			<div className={cx('meta', { selected: this.props.view === 'meta' })}
+				onClick={()=>this.props.onViewChange('meta')}>
+				<i className='fas fa-info-circle' />
 			</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('meta', { selected: this.props.view === 'meta' })}
-					onClick={()=>this.props.onViewChange('meta')}>
-					<i className='fas fa-info-circle' />
-				</div>
-			</div>
-
-		</div>
-		)
+		</div>;
 	},
 
 	render : function(){
@@ -278,7 +91,6 @@ module.exports = Snippetbar;
 
 
 const SnippetGroup = createClass({
-	displayName     : 'SnippetGroup',
 	getDefaultProps : function() {
 		return {
 			brew           : {},
@@ -288,24 +100,15 @@ const SnippetGroup = createClass({
 			onSnippetClick : function(){},
 		};
 	},
-	handleSnippetClick : function(e, snippet){
-		e.stopPropagation();
-		this.props.onSnippetClick(execute(snippet.gen, this.props));
+	handleSnippetClick : function(snippet){
+		this.props.onSnippetClick(execute(snippet.gen, this.props.brew));
 	},
-	renderSnippets : function(snippets){
-		return _.map(snippets, (snippet)=>{
-			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
+	renderSnippets : function(){
+		return _.map(this.props.snippets, (snippet)=>{
+			return <div className='snippet' key={snippet.name} onClick={()=>this.handleSnippetClick(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></>}
+				{snippet.name}
 			</div>;
-
 		});
 	},
 
@@ -316,8 +119,9 @@ const SnippetGroup = createClass({
 				<span className='groupName'>{this.props.groupName}</span>
 			</div>
 			<div className='dropdown'>
-				{this.renderSnippets(this.props.snippets)}
+				{this.renderSnippets()}
 			</div>
 		</div>;
 	},
+
 });

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,246 +1,90 @@
-@import (less) './client/icons/customIcons.less';
-@import (less) '././././themes/fonts/5e/fonts.less';
 
-.snippetBar {
+.snippetBar{
 	@menuHeight      : 25px;
 	position         : relative;
-	display          : flex;
-	flex-wrap        : wrap-reverse;
-	justify-content  : space-between;
-	height           : auto;
-	color            : black;
-	background-color : #DDDDDD;
-
-	.snippets {
+	height           : @menuHeight;
+	background-color : #ddd;
+	.editors{
+		position        : absolute;
 		display         : flex;
-		justify-content : flex-start;
-		min-width       : 327.58px;
-	}
-
-	.editors {
-		display         : flex;
-		justify-content : flex-end;
-		min-width       : 225px;
-
-		&:only-child { margin-left : auto;min-width:unset;}
-
-		>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');
-				}
-				&.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     : black;
-					&.active {
-						position         : relative;
-						background-color : #999999;
-					}
-				}
-				&.divider {
-					width      : 5px;
-					background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
-					&:hover { background-color : inherit; }
-				}
+		top             : 0px;
+		right           : 0px;
+		height          : @menuHeight;
+		width           : 90px;
+		justify-content : space-between;
+		&>div{
+			height      : @menuHeight;
+			width       : @menuHeight;
+			cursor      : pointer;
+			line-height : @menuHeight;
+			text-align  : center;
+			&:hover,&.selected{
+				background-color : #999;
 			}
-			.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;
+			&.text{
+				.tooltipLeft('Brew Editor');
 			}
-		}		
+			&.style{
+				.tooltipLeft('Style Editor');
+			}
+			&.meta{
+				.tooltipLeft('Properties');
+			}
+		}
 	}
-	.snippetBarButton {
-		display        : inline-block;
+	.snippetBarButton{
 		height         : @menuHeight;
-		padding        : 0px 5px;
-		font-size      : 0.625em;
-		font-weight    : 800;
 		line-height    : @menuHeight;
+		display        : inline-block;
+		padding        : 0px 5px;
+		font-weight    : 800;
+		font-size      : 0.625em;
 		text-transform : uppercase;
-		text-wrap      : nowrap;
 		cursor         : pointer;
-		&:hover, &.selected { background-color : #999999; }
-		i {
+		&:hover, &.selected{
+			background-color : #999;
+		}
+		i{
+			vertical-align : middle;
 			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');
+	.toggleMeta{
+		position     : absolute;
+		top          : 0px;
+		right        : 0px;
+		border-left  : 1px solid black;
+		.tooltipLeft("Edit Brew Properties");
 	}
-	.snippetGroup {
-
-		&:hover {
-			& > .dropdown { visibility : visible; }
+	.snippetGroup{
+		border-right   : 1px solid black;
+		&:hover{
+			.dropdown{
+				visibility : visible;
+			}
 		}
-		.dropdown {
+		.dropdown{
 			position         : absolute;
 			top              : 100%;
-			z-index          : 1000;
-			padding          : 0px;
-			margin-left      : -5px;
 			visibility       : hidden;
-			background-color : #DDDDDD;
-			.snippet {
-				position    : relative;
-				display     : flex;
-				align-items : center;
-				min-width   : max-content;
-				padding     : 5px;
-				font-size   : 10px;
-				cursor      : pointer;
+			z-index          : 1000;
+			margin-left      : -5px;
+			padding          : 0px;
+			background-color : #ddd;
+			.snippet{
 				.animate(background-color);
-				i {
-					min-width    : 25px;
-					height       : 1.2em;
+				padding   : 5px;
+				cursor    : pointer;
+				font-size : 10px;
+				i{
 					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;
-						}
-					}
+				&:hover{
+					background-color : #999;
 				}
 			}
 		}
 	}
 }
-@container editor (width < 553px) {
-	.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/snippetbar/snippets/classfeature.gen.js

@@ -9,7 +9,6 @@ module.exports = function(classname){
 	classname = classname.toLowerCase();
 
 	const hitDie = _.sample([4, 6, 8, 10, 12]);
-	const spellSkill = _.sample(['Wisdom', 'Charisma', 'Intelligence']);
 
 	const abilityList = ['Strength', 'Dexerity', 'Constitution', 'Wisdom', 'Charisma', 'Intelligence'];
 	const skillList = ['Acrobatics', 'Animal Handling', 'Arcana', 'Athletics', 'Deception', 'History', 'Insight', 'Intimidation', 'Investigation', 'Medicine', 'Nature', 'Perception', 'Performance', 'Persuasion', 'Religion', 'Sleight of Hand', 'Stealth', 'Survival'];
@@ -17,33 +16,27 @@ module.exports = function(classname){
 
 	return dedent`
 		## 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 Constitution modifier
 		**Hit Points at Higher Levels:** :: 1d${hitDie} (or ${hitDie/2 + 1}) + your Constitution 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(['Artisan\'s tools', 'one musical instrument', 'Thieves\' tools'], _.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(', ')}
 
-		#### Spellcasting Ability
-		{{text-align:center
-		**Spell save DC**:: = ${_.sample([6, 8, 10])} + your proficiency bonus + your ${spellSkill} modifier
-
-		**Spell attack modifier**:: = your proficiency bonus + your ${spellSkill} modifier
-		}}
-
 		#### 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
+		- *(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'])}
+
 		`;
 };

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

@@ -0,0 +1,132 @@
+const _ = require('lodash');
+
+const features = [
+	'Astrological Botany',
+	'Biochemical Sorcery',
+	'Civil Divination',
+	'Consecrated Augury',
+	'Demonic Anthropology',
+	'Divinatory Mineralogy',
+	'Exo Interfacer',
+	'Genetic Banishing',
+	'Gunpowder Torturer',
+	'Gunslinger Corruptor',
+	'Hermetic Geography',
+	'Immunological Cultist',
+	'Malefic Chemist',
+	'Mathematical Pharmacy',
+	'Nuclear Biochemistry',
+	'Orbital Gravedigger',
+	'Pharmaceutical Outlaw',
+	'Phased Linguist',
+	'Plasma Gunslinger',
+	'Police Necromancer',
+	'Ritual Astronomy',
+	'Sixgun Poisoner',
+	'Seismological Alchemy',
+	'Spiritual Illusionism',
+	'Statistical Occultism',
+	'Spell Analyst',
+	'Torque Interfacer'
+];
+
+const classnames = ['Ackerman', 'Berserker-Typist', 'Concierge', 'Fishmonger',
+	                  'Haberdasher', 'Manicurist', 'Netrunner', 'Weirkeeper'];
+
+const levels = ['1st', '2nd', '3rd', '4th', '5th',
+              	'6th', '7th', '8th', '9th', '10th',
+	              '11th', '12th', '13th', '14th', '15th',
+              	'16th', '17th', '18th', '19th', '20th'];
+
+const profBonus = [2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6];
+
+const maxes = [4, 3, 3, 3, 3, 2, 2, 1, 1];
+
+const drawSlots = function(Slots, rows, padding){
+	let slots = Number(Slots);
+	return _.times(rows, function(i){
+		const max = maxes[i];
+		if(slots < 1) return _.pad('—', padding);
+		const res = _.min([max, slots]);
+		slots -= res;
+		return _.pad(res.toString(), padding);
+	}).join(' | ');
+};
+
+module.exports = {
+	full : function(classes){
+		const classname = _.sample(classnames);
+
+
+		let cantrips = 3;
+		let spells = 1;
+		let slots = 2;
+		return `{{${classes}\n##### The ${classname}\n` +
+		`| Level | Proficiency | Features     | Cantrips | Spells | --- Spell Slots Per Spell Level ---|||||||||\n`+
+		`|      ^| Bonus      ^|             ^| Known   ^| Known ^|1st |2nd |3rd |4th |5th |6th |7th |8th |9th |\n`+
+		`|:-----:|:-----------:|:-------------|:--------:|:------:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|\n${
+			_.map(levels, function(levelName, level){
+				const res = [
+					_.pad(levelName, 5),
+					_.pad(`+${profBonus[level]}`, 2),
+					_.padEnd(_.sample(features), 21),
+					_.pad(cantrips.toString(), 8),
+					_.pad(spells.toString(), 6),
+					drawSlots(slots, 9, 2),
+				].join(' | ');
+
+				cantrips += _.random(0, 1);
+				spells += _.random(0, 1);
+				slots += _.random(0, 2);
+
+				return `| ${res} |`;
+			}).join('\n')}\n}}\n\n`;
+	},
+
+	half : function(classes){
+		const classname =  _.sample(classnames);
+
+		let featureScore = 1;
+		return `{{${classes}\n##### The ${classname}\n` +
+		`| Level | Proficiency Bonus | Features | ${_.pad(_.sample(features), 21)} |\n` +
+		`|:-----:|:-----------------:|:---------|:---------------------:|\n${
+			_.map(levels, function(levelName, level){
+				const res = [
+					_.pad(levelName, 5),
+					_.pad(`+${profBonus[level]}`, 2),
+					_.padEnd(_.sample(features), 23),
+					_.pad(`+${featureScore}`, 21),
+				].join(' | ');
+
+				featureScore += _.random(0, 1);
+
+				return `| ${res} |`;
+			}).join('\n')}\n}}\n\n`;
+	},
+
+	third : function(classes){
+		const classname = _.sample(classnames);
+
+		let cantrips = 3;
+		let spells = 1;
+		let slots = 2;
+		return `{{${classes}\n##### ${classname} Spellcasting\n` +
+		`| Class  | Cantrips | Spells  |--- Spells Slots per Spell Level ---||||\n` +
+		`| Level ^| Known   ^| Known  ^|   1st   |   2nd   |   3rd   |   4th   |\n` +
+		`|:------:|:--------:|:-------:|:-------:|:-------:|:-------:|:-------:|\n${
+			_.map(levels, function(levelName, level){
+				const res = [
+					_.pad(levelName, 6),
+					_.pad(cantrips.toString(), 8),
+					_.pad(spells.toString(), 7),
+					drawSlots(slots, 4, 7),
+				].join(' | ');
+
+				cantrips += _.random(0, 1);
+				spells += _.random(0, 1);
+				slots += _.random(0, 1);
+
+				return `| ${res} |`;
+			}).join('\n')}\n}}\n\n`;
+	}
+};

client/homebrew/editor/snippetbar/snippets/coverpage.gen.js

@@ -0,0 +1,124 @@
+const _ = require('lodash');
+
+const titles = [
+	'The Burning Gallows',
+	'The Ring of Nenlast',
+	'Below the Blind Tavern',
+	'Below the Hungering River',
+	'Before Bahamut\'s Land',
+	'The Cruel Grave from Within',
+	'The Strength of Trade Road',
+	'Through The Raven Queen\'s Worlds',
+	'Within the Settlement',
+	'The Crown from Within',
+	'The Merchant Within the Battlefield',
+	'Ioun\'s Fading Traveler',
+	'The Legion Ingredient',
+	'The Explorer Lure',
+	'Before the Charming Badlands',
+	'The Living Dead Above the Fearful Cage',
+	'Vecna\'s Hidden Sage',
+	'Bahamut\'s Demonspawn',
+	'Across Gruumsh\'s Elemental Chaos',
+	'The Blade of Orcus',
+	'Beyond Revenge',
+	'Brain of Insanity',
+	'Breed Battle!, A New Beginning',
+	'Evil Lake, A New Beginning',
+	'Invasion of the Gigantic Cat, Part II',
+	'Kraken War 2020',
+	'The Body Whisperers',
+	'The Diabolical Tales of the Ape-Women',
+	'The Doctor Immortal',
+	'The Doctor from Heaven',
+	'The Graveyard',
+	'Azure Core',
+	'Core Battle',
+	'Core of Heaven: The Guardian of Amazement',
+	'Deadly Amazement III',
+	'Dry Chaos IX',
+	'Gate Thunder',
+	'Guardian: Skies of the Dark Wizard',
+	'Lute of Eternity',
+	'Mercury\'s Planet: Brave Evolution',
+	'Ruby of Atlantis: The Quake of Peace',
+	'Sky of Zelda: The Thunder of Force',
+	'Vyse\'s Skies',
+	'White Greatness III',
+	'Yellow Divinity',
+	'Zidane\'s Ghost'
+];
+
+const subtitles = [
+	'In an ominous universe, a botanist opposes terrorism.',
+	'In a demon-haunted city, in an age of lies and hate, a physicist tries to find an ancient treasure and battles a mob of aliens.',
+	'In a land of corruption, two cyberneticists and a dungeon delver search for freedom.',
+	'In an evil empire of horror, two rangers battle the forces of hell.',
+	'In a lost city, in an age of sorcery, a librarian quests for revenge.',
+	'In a universe of illusions and danger, three time travellers and an adventurer search for justice.',
+	'In a forgotten universe of barbarism, in an era of terror and mysticism, a virtual reality programmer and a spy try to find vengance and battle crime.',
+	'In a universe of demons, in an era of insanity and ghosts, three bodyguards and a bodyguard try to find vengance.',
+	'In a kingdom of corruption and battle, seven artificial intelligences try to save the last living fertile woman.',
+	'In a universe of virutal reality and agony, in an age of ghosts and ghosts, a fortune-teller and a wanderer try to avert the apocalypse.',
+	'In a crime-infested kingdom, three martial artists quest for the truth and oppose evil.',
+	'In a terrifying universe of lost souls, in an era of lost souls, eight dancers fight evil.',
+	'In a galaxy of confusion and insanity, three martial artists and a duke battle a mob of psychics.',
+	'In an amazing kingdom, a wizard and a secretary hope to prevent the destruction of mankind.',
+	'In a kingdom of deception, a reporter searches for fame.',
+	'In a hellish empire, a swordswoman and a duke try to find the ultimate weapon and battle a conspiracy.',
+	'In an evil galaxy of illusion, in a time of technology and misery, seven psychiatrists battle crime.',
+	'In a dark city of confusion, three swordswomen and a singer battle lawlessness.',
+	'In an ominous empire, in an age of hate, two philosophers and a student try to find justice and battle a mob of mages intent on stealing the souls of the innocent.',
+	'In a kingdom of panic, six adventurers oppose lawlessness.',
+	'In a land of dreams and hopelessness, three hackers and a cyborg search for justice.',
+	'On a planet of mysticism, three travelers and a fire fighter quest for the ultimate weapon and oppose evil.',
+	'In a wicked universe, five seers fight lawlessness.',
+	'In a kingdom of death, in an era of illusion and blood, four colonists search for fame.',
+	'In an amazing kingdom, in an age of sorcery and lost souls, eight space pirates quest for freedom.',
+	'In a cursed empire, five inventors oppose terrorism.',
+	'On a crime-ridden planet of conspiracy, a watchman and an artificial intelligence try to find love and oppose lawlessness.',
+	'In a forgotten land, a reporter and a spy try to stop the apocalypse.',
+	'In a forbidden land of prophecy, a scientist and an archivist oppose a cabal of barbarians intent on stealing the souls of the innocent.',
+	'On an infernal world of illusion, a grave robber and a watchman try to find revenge and combat a syndicate of mages intent on stealing the source of all magic.',
+	'In a galaxy of dark magic, four fighters seek freedom.',
+	'In an empire of deception, six tomb-robbers quest for the ultimate weapon and combat an army of raiders.',
+	'In a kingdom of corruption and lost souls, in an age of panic, eight planetologists oppose evil.',
+	'In a galaxy of misery and hopelessness, in a time of agony and pain, five planetologists search for vengance.',
+	'In a universe of technology and insanity, in a time of sorcery, a computer techician quests for hope.',
+	'On a planet of dark magic and barbarism, in an age of horror and blasphemy, seven librarians search for fame.',
+	'In an empire of dark magic, in a time of blood and illusions, four monks try to find the ultimate weapon and combat terrorism.',
+	'In a forgotten empire of dark magic, six kings try to prevent the destruction of mankind.',
+	'In a galaxy of dark magic and horror, in an age of hopelessness, four marines and an outlaw combat evil.',
+	'In a mysterious city of illusion, in an age of computerization, a witch-hunter tries to find the ultimate weapon and opposes an evil corporation.',
+	'In a damned kingdom of technology, a virtual reality programmer and a fighter seek fame.',
+	'In a hellish kingdom, in an age of blasphemy and blasphemy, an astrologer searches for fame.',
+	'In a damned world of devils, an alien and a ranger quest for love and oppose a syndicate of demons.',
+	'In a cursed galaxy, in a time of pain, seven librarians hope to avert the apocalypse.',
+	'In a crime-infested galaxy, in an era of hopelessness and panic, three champions and a grave robber try to solve the ultimate crime.'
+];
+
+
+module.exports = ()=>{
+	return `<style>
+  .phb#p1{ text-align:center; }
+  .phb#p1:after{ display:none; }
+  .phb#p2 { counter-reset:phb-page-numbers; }
+  .phb:nth-child(2n) .pageNumber { left: inherit !important; right: 2px !important; }
+  .phb:nth-child(2n+1) .pageNumber { right: inherit !important; left: 2px !important; }
+  .phb:nth-child(2n)::after { transform: scaleX(1); }
+  .phb:nth-child(2n+1)::after { transform: scaleX(-1); }
+  .phb:nth-child(2n) .footnote { left: inherit; text-align: right; }
+  .phb:nth-child(2n+1) .footnote { left: 80px; text-align: left; }
+</style>
+
+<div style='margin-top:450px;'></div>
+
+# ${_.sample(titles)}
+
+<div style='margin-top:25px'></div>
+<div class='wide'>
+##### ${_.sample(subtitles)}
+</div>
+
+\\page`;
+};

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

@@ -105,20 +105,6 @@ const genAbilities = function(){
 	]);
 };
 
-const genLongAbilities = function(){
-	return _.sample([
-		dedent`***Pack Tactics.*** These guys work together like peanut butter and jelly. Jelly and peanut butter.
-
-		When one of these guys attacks, the target is covered with, well, peanut butter and jelly.`,
-		dedent`***Hangriness.*** This creature is angry, and hungry. It will refuse to do anything with you until its hunger is satisfied.
-
-		When in visual contact with this creature, you must purchase an extra order of fries, even if they say they aren't hungry.`,
-		dedent`***Full of Detergent.*** This creature has swallowed an entire bottle of dish detergent and is actually having a pretty good time.
-
-		While walking near this creature, you must make a dexterity check or become "a soapy mess" for three hours, after which your skin will get all dry and itchy.`
-	]);
-};
-
 const genAction = function(){
 	const name = _.sample([
 		'Abdominal Drop',
@@ -171,13 +157,13 @@ module.exports = {
 			**Condition Immunities** :: ${genList(['groggy', 'swagged', 'weak-kneed', 'buzzed', 'groovy', 'melancholy', 'drunk'], 3)}
 			**Senses**               :: darkvision 60 ft., passive Perception ${_.random(3, 20)}
 			**Languages**            :: ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
-			**Challenge**            :: ${_.random(0, 15)} (${_.random(10, 10000)} XP) {{bonus **Proficiency Bonus** +${_.random(2, 6)}}}
+			**Challenge**            :: ${_.random(0, 15)} (${_.random(10, 10000)} XP)
 			___
-			${_.times(_.random(genLines, genLines + 2), function(){return genAbilities();}).join('\n:\n')}
 			:
-			${genLongAbilities()}
+			${_.times(_.random(genLines, genLines + 2), function(){return genAbilities();}).join('\n\t\t\t\n\t\t\t')}
+			:
 			### Actions
-			${_.times(_.random(genLines, genLines + 2), function(){return genAction();}).join('\n:\n')}
+			${_.times(_.random(genLines, genLines + 2), function(){return genAction();}).join('\n\t\t\t\n\t\t\t')}
 			}}
 			\n`;
 	}

client/homebrew/editor/snippetbar/snippets/snippets.js

@@ -0,0 +1,405 @@
+/* eslint-disable max-lines */
+
+const MagicGen = require('./magic.gen.js');
+const ClassTableGen = require('./classtable.gen.js');
+const MonsterBlockGen = require('./monsterblock.gen.js');
+const ClassFeatureGen = require('./classfeature.gen.js');
+const CoverPageGen = require('./coverpage.gen.js');
+const TableOfContentsGen = require('./tableOfContents.gen.js');
+const dedent = require('dedent-tabs').default;
+const watercolorGen = require('./watercolor.gen.js');
+
+
+module.exports = [
+
+	{
+		groupName : 'Editor',
+		icon      : 'fas fa-pencil-alt',
+		view      : 'text',
+		snippets  : [
+			{
+				name : 'Column Break',
+				icon : 'fas fa-columns',
+				gen  : '\n\\column\n'
+			},
+			{
+				name : 'New Page',
+				icon : 'fas fa-file-alt',
+				gen  : '\n\\page\n'
+			},
+			{
+				name : 'Vertical Spacing',
+				icon : 'fas fa-arrows-alt-v',
+				gen  : '\n::::\n'
+			},
+			{
+				name : 'Horizontal Spacing',
+				icon : 'fas fa-arrows-alt-h',
+				gen  : ' {{width:100px}} '
+			},
+			{
+				name : 'Wide Block',
+				icon : 'fas fa-window-maximize',
+				gen  : dedent`\n
+					{{wide
+					Everything in here will be extra wide. Tables, text, everything!
+					Beware though, CSS columns can behave a bit weird sometimes. You may
+					have to manually place column breaks with \`\column\` to make the
+					surrounding text flow with this wide block the way you want.
+					}}
+					\n`
+			},
+			{
+				name : 'QR Code',
+				icon : 'fas fa-qrcode',
+				gen  : (brew)=>{
+					return `![]` +
+							`(https://api.qrserver.com/v1/create-qr-code/?data=` +
+							`https://homebrewery.naturalcrit.com/share/${brew.shareId}` +
+							`&size=100x100) {width:100px;mix-blend-mode:multiply}`;
+				}
+			},
+			{
+				name : 'Page Number',
+				icon : 'fas fa-bookmark',
+				gen  : '{{pageNumber 1}}\n{{footnote PART 1 | SECTION NAME}}\n\n'
+			},
+			{
+				name : 'Auto-incrementing Page Number',
+				icon : 'fas fa-sort-numeric-down',
+				gen  : '{{pageNumber,auto}}\n{{footnote PART 1 | SECTION NAME}}\n\n'
+			},
+			{
+				name : 'Link to page',
+				icon : 'fas fa-link',
+				gen  : '[Click here](#p3) to go to page 3\n'
+			},
+			{
+				name : 'Table of Contents',
+				icon : 'fas fa-book',
+				gen  : TableOfContentsGen
+			},
+			{
+				name : 'Remove Drop Cap',
+				icon : 'fas fa-remove-format',
+				gen  : '<style>\n' +
+						'  .phb3 h1+p:first-letter {\n' +
+						'    all: unset;\n' +
+						'  }\n' +
+						'</style>'
+			},
+			{
+				name : 'Tweak Drop Cap',
+				icon : 'fas fa-sliders-h',
+				gen  : '<style>\n' +
+						'  /* Drop Cap settings */\n' +
+						'  .phb3 h1 + p::first-letter {\n' +
+						'    float: left;\n' +
+						'    font-family: SolberaImitationRemake;\n' +
+						'    font-size: 3.5cm;\n' +
+						'    color: #222;\n' +
+						'    line-height: .8em;\n' +
+						'  }\n' +
+						'</style>'
+			},
+			{
+				name : 'Add Comment',
+				icon : 'fas fa-code',  /* might need to be fa-solid fa-comment-code --not sure, Gazook */
+				gen  : dedent`\n
+					<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->
+					`
+			},
+		]
+	},
+
+	/*********************** IMAGES *******************/
+	{
+		groupName : 'Images',
+		icon      : 'fas fa-images',
+		view      : 'text',
+		snippets  : [
+			{
+				name : 'Image',
+				icon : 'fas fa-image',
+				gen  : dedent`
+					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px,mix-blend-mode:multiply}
+
+					{{artist,position:relative,top:-230px,left:-100px,margin-bottom:-30px
+					##### Cat Warrior
+					[Kyoung Hwan Kim](https://www.artstation.com/tahra)
+					}}`
+			},
+			{
+				name : 'Background Image',
+				icon : 'fas fa-tree',
+				gen  : dedent`
+					![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}
+
+					{{artist,top:90px,right:30px
+					##### Homebrew Mug
+					[naturalcrit](https://homebrew.naturalcrit.com)
+					}}`
+			},
+			{
+				name : 'Watercolor Splatter',
+				icon : 'fas fa-fill-drip',
+				gen  : watercolorGen,
+			},
+			{
+				name : 'Watermark',
+				icon : 'fas fa-id-card',
+				gen  : dedent`
+				{{watermark Homebrewery}}\n`
+			},
+		]
+	},
+
+
+	/************************* PHB ********************/
+
+	{
+		groupName : 'PHB',
+		icon      : 'fas fa-book',
+		view      : 'text',
+		snippets  : [
+			{
+				name : 'Spell',
+				icon : 'fas fa-magic',
+				gen  : MagicGen.spell,
+			},
+			{
+				name : 'Spell List',
+				icon : 'fas fa-scroll',
+				gen  : MagicGen.spellList,
+			},
+			{
+				name : 'Class Feature',
+				icon : 'fas fa-mask',
+				gen  : ClassFeatureGen,
+			},
+			{
+				name : 'Note',
+				icon : 'fas fa-sticky-note',
+				gen  : function(){
+					return dedent`
+						{{note
+						##### Time to Drop Knowledge
+						Use notes to point out some interesting information.
+
+						**Tables and lists** both work within a note.
+						}}
+						\n`;
+				},
+			},
+			{
+				name : 'Descriptive Text Box',
+				icon : 'fas fa-comment-alt',
+				gen  : function(){
+					return dedent`
+						{{descriptive
+						##### Time to Drop Knowledge
+						Use descriptive boxes to highlight text that should be read aloud.
+
+						**Tables and lists** both work within a descriptive box.
+						}}
+						\n`;
+				},
+			},
+			{
+				name : 'Monster Stat Block (unframed)',
+				icon : 'fas fa-paw',
+				gen  : MonsterBlockGen.monster('monster', 2),
+			},
+			{
+				name : 'Monster Stat Block',
+				icon : 'fas fa-spider',
+				gen  : MonsterBlockGen.monster('monster,frame', 2),
+			},
+			{
+				name : 'Wide Monster Stat Block',
+				icon : 'fas fa-dragon',
+				gen  : MonsterBlockGen.monster('monster,frame,wide', 4),
+			},
+			{
+				name : 'Cover Page',
+				icon : 'fas fa-file-word',
+				gen  : CoverPageGen,
+			},
+			{
+				name : 'Magic Item',
+				icon : 'fas fa-hat-wizard',
+				gen  : MagicGen.item,
+			},
+			{
+				name : 'Artist Credit',
+				icon : 'fas fa-signature',
+				gen  : function(){
+					return dedent`
+						{{artist,top:90px,right:30px
+						##### Starry Night
+						[Van Gogh](https://www.vangoghmuseum.nl/en)
+						}}
+						\n`;
+				},
+			},
+		]
+	},
+
+
+
+	/*********************  TABLES *********************/
+
+	{
+		groupName : 'Tables',
+		icon      : 'fas fa-table',
+		view      : 'text',
+		snippets  : [
+			{
+				name : 'Class Table',
+				icon : 'fas fa-table',
+				gen  : ClassTableGen.full('classTable,frame,decoration,wide'),
+			},
+			{
+				name : 'Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.full('classTable,wide'),
+			},
+			{
+				name : '1/2 Class Table',
+				icon : 'fas fa-list-alt',
+				gen  : ClassTableGen.half('classTable,decoration,frame'),
+			},
+			{
+				name : '1/2 Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.half('classTable'),
+			},
+			{
+				name : '1/3 Class Table',
+				icon : 'fas fa-border-all',
+				gen  : ClassTableGen.third('classTable,frame'),
+			},
+			{
+				name : '1/3 Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.third('classTable'),
+			},
+			{
+				name : 'Table',
+				icon : 'fas fa-th-list',
+				gen  : function(){
+					return dedent`
+						##### Character Advancement
+						| Experience Points | Level | Proficiency Bonus |
+						|:------------------|:-----:|:-----------------:|
+						| 0                 | 1     | +2                |
+						| 300               | 2     | +2                |
+						| 900               | 3     | +2                |
+						| 2,700             | 4     | +2                |
+						| 6,500             | 5     | +3                |
+						| 14,000            | 6     | +3                |
+						\n`;
+				}
+			},
+			{
+				name : 'Wide Table',
+				icon : 'fas fa-list',
+				gen  : function(){
+					return dedent`
+						{{wide
+						##### Weapons
+						| Name                    | Cost  | Damage          | Weight  | Properties |
+						|:------------------------|:-----:|:----------------|--------:|:-----------|
+						| *Simple Melee Weapons*  |       |                 |         |            |
+						| &emsp; Club             | 1 sp  | 1d4 bludgeoning | 2 lb.   | Light      |
+						| &emsp; Dagger           | 2 gp  | 1d4 piercing    | 1 lb.   | Finesse    |
+						| &emsp; Spear            | 1 gp  | 1d6 piercing    | 3 lb.   | Thrown     |
+						| *Simple Ranged Weapons* |       |                 |         |            |
+						| &emsp; Dart             | 5 cp  | 1d4 piercig     | 1/4 lb. | Finesse    |
+						| &emsp; Shortbow         | 25 gp | 1d6 piercing    | 2 lb.   | Ammunition |
+						| &emsp; Sling            | 1 sp  | 1d4 bludgeoning | &mdash; | Ammunition |
+						}}
+						\n`;
+				}
+			},
+			{
+				name : 'Split Table',
+				icon : 'fas fa-th-large',
+				gen  : function(){
+					return dedent`
+						##### Typical Difficulty Classes
+						{{column-count:2
+						| Task Difficulty | DC |
+						|:----------------|:--:|
+						| Very easy       | 5  |
+						| Easy            | 10 |
+						| Medium          | 15 |
+
+						| Task Difficulty   | DC |
+						|:------------------|:--:|
+						| Hard              | 20 |
+						| Very hard         | 25 |
+						| Nearly impossible | 30 |
+						}}
+						\n`;
+				}
+			}
+		]
+	},
+
+
+
+
+	/**************** PAGE *************/
+
+	{
+		groupName : 'Print',
+		icon      : 'fas fa-print',
+		view      : 'style',
+		snippets  : [
+			{
+				name : 'A4 Page Size',
+				icon : 'far fa-file',
+				gen  : ['/* A4 Page Size */',
+					'.page{',
+					'	width  : 210mm;',
+					'	height : 296.8mm;',
+					'}',
+					''
+				].join('\n')
+			},
+			{
+				name : 'Square Page Size',
+				icon : 'far fa-file',
+				gen  : ['/* Square Page Size */',
+					'.page {',
+					'	width   : 125mm;',
+					'	height  : 125mm;',
+					'	padding : 12.5mm;',
+					'	columns : unset;',
+					'}',
+					''
+				].join('\n')
+			},
+			{
+				name : 'Ink Friendly',
+				icon : 'fas fa-tint',
+				gen  : dedent`
+					/* Ink Friendly */
+					.pages *:is(.page,.monster,.note,.descriptive) {
+						background : white !important;
+						box-shadow : 0px 0px 3px !important;
+					}
+
+					.page .note:before {
+						box-shadow : 0px 0px 3px;
+					}
+
+					.page img {
+						visibility : hidden;
+					}`
+			},
+		]
+	},
+
+];

client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js

@@ -0,0 +1,84 @@
+const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
+
+const getTOC = (pages)=>{
+	const add1 = (title, page)=>{
+		res.push({
+			title    : title,
+			page     : page + 1,
+			children : []
+		});
+	};
+	const add2 = (title, page)=>{
+		if(!_.last(res)) add1(null, page);
+		_.last(res).children.push({
+			title    : title,
+			page     : page + 1,
+			children : []
+		});
+	};
+	const add3 = (title, page)=>{
+		if(!_.last(res)) add1(null, page);
+		if(!_.last(_.last(res).children)) add2(null, page);
+		_.last(_.last(res).children).children.push({
+			title    : title,
+			page     : page + 1,
+			children : []
+		});
+	};
+
+	const res = [];
+	_.each(pages, (page, pageNum)=>{
+		const lines = page.split('\n');
+		_.each(lines, (line)=>{
+			if(_.startsWith(line, '# ')){
+				const title = line.replace('# ', '');
+				add1(title, pageNum);
+			}
+			if(_.startsWith(line, '## ')){
+				const title = line.replace('## ', '');
+				add2(title, pageNum);
+			}
+			if(_.startsWith(line, '### ')){
+				const title = line.replace('### ', '');
+				add3(title, pageNum);
+			}
+		});
+	});
+	return res;
+};
+
+module.exports = function(brew){
+	const pages = brew.text.split('\\page');
+	const TOC = getTOC(pages);
+	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
+		if(g1.title !== null) {
+			r.push(`\t\t- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`);
+		}
+		if(g1.children.length){
+			_.each(g1.children, (g2, idx2)=>{
+				if(g2.title !== null) {
+					r.push(`\t\t  - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`);
+				}
+				if(g2.children.length){
+					_.each(g2.children, (g3, idx3)=>{
+						if(g2.title !== null) {
+							r.push(`\t\t    - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+						} else { // Don't over-indent if no level-2 parent entry
+							r.push(`\t\t  - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+						}
+					});
+				}
+			});
+		}
+		return r;
+	}, []).join('\n');
+
+	return dedent`
+		{{toc,wide
+		# Table Of Contents
+
+${markdown}
+		}}
+		\n`;
+};

client/homebrew/editor/snippetbar/snippetsLegacy/classfeature.gen.js

@@ -8,7 +8,6 @@ module.exports = function(classname){
 	classname = classname.toLowerCase();
 
 	const hitDie = _.sample([4, 6, 8, 10, 12]);
-	const spellSkill = _.sample(['Wisdom', 'Charisma', 'Intelligence']);
 
 	const abilityList = ['Strength', 'Dexerity', 'Constitution', 'Wisdom', 'Charisma', 'Intelligence'];
 	const skillList = ['Acrobatics ', 'Animal Handling', 'Arcana', 'Athletics', 'Deception', 'History', 'Insight', 'Intimidation', 'Investigation', 'Medicine', 'Nature', 'Perception', 'Performance', 'Persuasion', 'Religion', 'Sleight of Hand', 'Stealth', 'Survival'];
@@ -27,21 +26,12 @@ module.exports = function(classname){
 		'___',
 		`- **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(['Artisan\'s tools', 'one musical instrument', 'Thieves\' tools'], _.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(', ')}`,
 		'',
-		'#### Spellcasting Ability',
-		'',
-		`<div style=text-align:center>`,
-		'___',
-		`- **Spell save DC** = ${_.sample([6, 8, 10])} + your proficiency bonus + your ${spellSkill} modifier`,
-		'',
-		`- **Spell attack modifier** = your proficiency bonus + your ${spellSkill} modifier`,
-		`</div>`,
-		'',
 		'#### 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',

client/homebrew/editor/snippetbar/snippetsLegacy/snippets.js

@@ -1,17 +1,17 @@
 /* eslint-disable max-lines */
 
-const MagicGen           = require('./snippets/magic.gen.js');
-const ClassTableGen      = require('./snippets/classtable.gen.js');
-const MonsterBlockGen    = require('./snippets/monsterblock.gen.js');
-const ClassFeatureGen    = require('./snippets/classfeature.gen.js');
-const CoverPageGen       = require('./snippets/coverpage.gen.js');
-const TableOfContentsGen = require('./snippets/tableOfContents.gen.js');
-const dedent             = require('dedent-tabs').default;
+const MagicGen = require('./magic.gen.js');
+const ClassTableGen = require('./classtable.gen.js');
+const MonsterBlockGen = require('./monsterblock.gen.js');
+const ClassFeatureGen = require('./classfeature.gen.js');
+const CoverPageGen = require('./coverpage.gen.js');
+const TableOfContentsGen = require('./tableOfContents.gen.js');
+const dedent = require('dedent-tabs').default;
 
 module.exports = [
 
 	{
-		groupName : 'Text Editor',
+		groupName : 'Editor',
 		icon      : 'fas fa-pencil-alt',
 		view      : 'text',
 		snippets  : [
@@ -78,44 +78,33 @@ module.exports = [
 				icon : 'fas fa-book',
 				gen  : TableOfContentsGen
 			},
-			{
-				name : 'Add Comment',
-				icon : 'fas fa-code',
-				gen  : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->'
-			}
-		]
-	},
-
-
-	{
-		groupName : 'Style Editor',
-		icon      : 'fas fa-pencil-alt',
-		view      : 'style',
-		snippets  : [
 			{
 				name : 'Remove Drop Cap',
 				icon : 'fas fa-remove-format',
-				gen  : dedent`/* Removes Drop Caps */
-						.phb h1+p:first-letter {
-							all: unset;
-						}\n\n`
+				gen  : '<style>\n' +
+						'  .phb h1+p:first-letter {\n' +
+						'    all: unset;\n' +
+						'  }\n' +
+						'</style>'
 			},
 			{
 				name : 'Tweak Drop Cap',
 				icon : 'fas fa-sliders-h',
-				gen  : dedent`/* Drop Cap Settings */
-						.phb h1 + p::first-letter {
-							float: left;
-							font-family: Solberry;
-							font-size: 10em;
-							color: #222;
-							line-height: .8em;
-						}\n\n`
+				gen  : '<style>\n' +
+						'  /* Drop Cap settings */\n' +
+						'  .phb h1 + p::first-letter {\n' +
+						'    float: left;\n' +
+						'    font-family: Solberry;\n' +
+						'    font-size: 10em;\n' +
+						'    color: #222;\n' +
+						'    line-height: .8em;\n' +
+						'  }\n' +
+						'</style>'
 			},
 			{
 				name : 'Add Comment',
 				icon : 'fas fa-code',
-				gen  : '/* This is a comment that will not be rendered into your brew. */'
+				gen  : `\n<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->\n\n`
 			}
 		]
 	},
@@ -251,25 +240,30 @@ module.exports = [
 			{
 				name : 'Split Table',
 				icon : 'fas fa-th-large',
-				gen  : dedent`\n
-					<div style='column-count:2'>
-					| d10 | Damage Type |
-					|:---:|:------------|
-					|  1  | Acid        |
-					|  2  | Cold        |
-					|  3  | Fire        |
-					|  4  | Force       |
-					|  5  | Lightning   |
-
-					| d10 | Damage Type |
-					|:---:|:------------|
-					|  6  | Necrotic    |
-					|  7  | Poison      |
-					|  8  | Psychic     |
-					|  9  | Radiant     |
-					|  10 | Thunder     |
-					</div>
-					\n`
+				gen  : function(){
+					return [
+						'<div style=\'column-count:2\'>',
+						'| d10 | Damage Type |',
+						'|:---:|:------------|',
+						'|  1  | Acid        |',
+						'|  2  | Cold        |',
+						'|  3  | Fire        |',
+						'|  4  | Force       |',
+						'|  5  | Lightning   |',
+						'',
+						'```',
+						'```',
+						'',
+						'| d10 | Damage Type |',
+						'|:---:|:------------|',
+						'|  6  | Necrotic    |',
+						'|  7  | Poison      |',
+						'|  8  | Psychic     |',
+						'|  9  | Radiant     |',
+						'|  10 | Thunder     |',
+						'</div>\n\n',
+					].join('\n');
+				},
 			}
 		]
 	},

client/homebrew/editor/snippetbar/snippetsLegacy/tableOfContents.gen.js

@@ -47,8 +47,8 @@ const getTOC = (pages)=>{
 	return res;
 };
 
-module.exports = function(props){
-	const pages = props.brew.text.split('\\page');
+module.exports = function(brew){
+	const pages = brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
 		r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);

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,41 +1,18 @@
-//╔===--------------- Polyfills --------------===╗//
-import 'core-js/es/string/to-well-formed.js';
-//╚===---------------          ---------------===╝//
-
 require('./homebrew.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const { StaticRouter:Router } = require('react-router');
-const { Route, Routes, useParams, useSearchParams } = require('react-router');
+const { StaticRouter:Router, Switch, Route } = require('react-router-dom');
+const queryString = require('query-string');
 
 const HomePage = require('./pages/homePage/homePage.jsx');
 const EditPage = require('./pages/editPage/editPage.jsx');
 const UserPage = require('./pages/userPage/userPage.jsx');
 const SharePage = require('./pages/sharePage/sharePage.jsx');
 const NewPage = require('./pages/newPage/newPage.jsx');
-const ErrorPage = require('./pages/errorPage/errorPage.jsx');
-const VaultPage = require('./pages/vaultPage/vaultPage.jsx');
-const AccountPage = require('./pages/accountPage/accountPage.jsx');
-
-const WithRoute = (props)=>{
-	const params = useParams();
-	const [searchParams] = useSearchParams();
-	const queryParams = {};
-	for (const [key, value] of searchParams?.entries() || []) {
-		queryParams[key] = value;
-	}
-	const Element = props.el;
-	const allProps = {
-		...props,
-		...params,
-		query : queryParams,
-		el    : undefined
-	};
-	return <Element {...allProps} />;
-};
+//const ErrorPage = require('./pages/errorPage/errorPage.jsx');
+const PrintPage = require('./pages/printPage/printPage.jsx');
 
 const Homebrew = createClass({
-	displayName     : 'Homebrewery',
 	getDefaultProps : function() {
 		return {
 			url         : '',
@@ -51,45 +28,45 @@ const Homebrew = createClass({
 				editId    : null,
 				createdAt : null,
 				updatedAt : null,
-				lang      : ''
 			}
 		};
 	},
-
-	getInitialState : function() {
+	componentWillMount : function() {
 		global.account = this.props.account;
 		global.version = this.props.version;
 		global.enable_v3 = this.props.enable_v3;
-		global.enable_themes = this.props.enable_themes;
-		global.config = this.props.config;
-
-		return {};
 	},
-
 	render : function (){
 		return (
 			<Router location={this.props.url}>
 				<div className='homebrew'>
-					<Routes>
-						<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
-						<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
-						<Route path='/new' element={<WithRoute el={NewPage} userThemes={this.props.userThemes}/> } />
-						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
-						<Route path='/vault' element={<WithRoute el={VaultPage}/>}/>
-						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
-						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
-						<Route path='/migrate' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
-						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} accountDetails={this.props.brew.accountDetails} />} />
-						<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-						<Route path='/error' element={<WithRoute el={ErrorPage} brew={this.props.brew} />} />
-						<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-						<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-					</Routes>
+					<Switch>
+						<Route path='/edit/:id' component={(routeProps)=><EditPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
+						<Route path='/share/:id' component={(routeProps)=><SharePage id={routeProps.match.params.id} brew={this.props.brew} />}/>
+						<Route path='/new/:id' component={(routeProps)=><NewPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
+						<Route path='/new' exact component={(routeProps)=><NewPage />}/>
+						<Route path='/user/:username' component={(routeProps)=><UserPage username={routeProps.match.params.username} brews={this.props.brews} />}/>
+						<Route path='/print/:id' component={(routeProps)=><PrintPage brew={this.props.brew} query={queryString.parse(routeProps.location.search)} />}/>
+						<Route path='/print' exact component={(routeProps)=><PrintPage query={queryString.parse(routeProps.location.search)} />}/>
+						<Route path='/changelog' exact component={()=><SharePage brew={this.props.brew} />}/>
+						<Route path='/v3_preview' exact component={()=><HomePage brew={this.props.brew} />}/>
+						<Route path='/' component={()=><HomePage brew={this.props.brew} />}/>
+					</Switch>
 				</div>
 			</Router>
 		);
 	}
 });
 
-module.exports = Homebrew;
+module.exports = Homebrew;
+
+//TODO: Nicer Error page instead of just "cant get that"
+// 	'/share/:id' : (args)=>{
+// 		if(!this.props.brew.shareId){
+// 			return <ErrorPage errorId={args.id}/>;
+// 		}
+//
+// 		return <SharePage
+// 			id={args.id}
+// 			brew={this.props.brew} />;
+// 	},

client/homebrew/homebrew.less

@@ -6,32 +6,10 @@
 		height           : 100%;
 		background-color : @steel;
 		flex-direction   : column;
-		overflow-y       : hidden;
 		.content{
 			position   : relative;
 			height     : calc(~"100% - 29px"); //Navbar height
 			flex       : auto;
-			overflow-y : hidden;
-		}
-		&.listPage .content {
-			overflow-y : scroll;
-
-			&::-webkit-scrollbar {
-				width: 20px;
-				&:horizontal{
-					height: 20px;
-					width:auto;
-				}
-				&-thumb {
-					background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
-					&:horizontal{
-						background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
-					}
-				}
-				&-corner {
-					visibility: hidden;
-				}
-			}
 		}
 	}
-}
+}

client/homebrew/navbar/account.navitem.jsx

@@ -1,10 +1,9 @@
 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 : ''
@@ -19,92 +18,13 @@ const Account = createClass({
 		}
 	},
 
-	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>;
+			return <Nav.item href={`/user/${global.account.username}`} color='yellow' icon='fas fa-user'>
+				{global.account.username}
+			</Nav.item>;
 		}
 
-		//  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>;

client/homebrew/navbar/editTitle.navitem.jsx

@@ -0,0 +1,33 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const cx = require('classnames');
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+const MAX_TITLE_LENGTH = 50;
+
+
+const EditTitle = 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,131 +0,0 @@
-require('./error-navitem.less');
-const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
-const createClass = require('create-react-class');
-
-const ErrorNavItem = createClass({
-	getDefaultProps : function() {
-		return {
-			error  : '',
-			parent : null
-		};
-	},
-	render : function() {
-		const clearError = ()=>{
-			const state = {
-				error : null
-			};
-			if(this.props.parent.state.isSaving) {
-				state.isSaving = false;
-			}
-			this.props.parent.setState(state);
-		};
-
-		const error       = this.props.error;
-		const response    = error.response;
-		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 (e){}
-
-		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>;
-		}
-
-		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,78 +0,0 @@
-.navItem.error {
-  position         : relative;
-  background-color : @red;
-}
-
-.errorContainer{
-  animation-name: glideDown;
-  animation-duration: 0.4s;
-  position         : absolute;
-  top              : 100%;
-  left             : 50%;
-  z-index          : 1000;
-  width            : 140px;
-  padding          : 3px;
-  color            : white;
-  background-color : #333;
-  border           : 3px solid #444;
-  border-radius    : 5px;
-  transform        : translate(-50% + 3px, 10px);
-  text-align       : center;
-  font-size        : 10px;
-  font-weight      : 800;
-  text-transform   : uppercase;
-	.lowercase {
-		text-transform : none;
-	}
-  a{
-    color : @teal;
-  }
-  &:before {
-    content: "";
-    width: 0px;
-    height: 0px;
-    position: absolute;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid #444;
-    left: 53px;
-    top: -23px;
-  }
-  &:after {
-    content: "";
-    width: 0px;
-    height: 0px;
-    position: absolute;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid #333;
-    left: 53px;
-    top: -19px;
-  }
-  .deny {
-    width            : 48%;
-    margin           : 1px;
-    padding          : 5px;
-    background-color : #333;
-    display          : inline-block;
-    border-left      : 1px solid #666;
-    .animate(background-color);
-    &:hover{
-      background-color : red;
-    }
-  }
-  .confirm {
-    width            : 48%;
-    margin           : 1px;
-    padding          : 5px;
-    background-color : #333;
-    display          : inline-block;
-    color            : white;
-    .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,13 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+module.exports = function(props){
+	return <Nav.item
+		newTab={true}
+		color='red'
+		icon='fas fa-bug'
+		href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`} >
+		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

@@ -6,7 +6,6 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const PatreonNavItem = require('./patreon.navitem.jsx');
 
 const Navbar = createClass({
-	displayName     : 'Navbar',
 	getInitialState : function() {
 		return {
 			//showNonChromeWarning : false,
@@ -14,10 +13,12 @@ const Navbar = createClass({
 		};
 	},
 
-	getInitialState : function() {
-		return {
-			ver : global.version
-		};
+	componentDidMount : function() {
+		//const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+		this.setState({
+			//showNonChromeWarning : !isChrome,
+			ver : window.version
+		});
 	},
 
 	/*
@@ -38,9 +39,7 @@ const Navbar = createClass({
 				<Nav.item href='/' 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>
+				<Nav.item>{`v${this.state.ver}`}</Nav.item>
 				<PatreonNavItem />
 				{/*this.renderChromeWarning()*/}
 			</Nav.section>

client/homebrew/navbar/navbar.less

@@ -1,343 +1,141 @@
-@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 {
-	background-color : #333333;
-	position        : relative;
-	z-index         : 2;
-	display         : flex;
-	justify-content : space-between;
-	
-	.navSection {
-		display     : flex;
-		align-items : center;
-		&:last-child .navItem { border-left : 1px solid #666666; }
-
-		&:has(.brewTitle) {
-			flex-grow : 1;
-			min-width : 300px; 
-		}
-	}
-	// "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-decoration  : none;
-		text-transform   : uppercase;
-		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;
-			font-size        : 12px;
-			font-weight      : 800;
-			color            : white;
-			text-align       : center;
-			text-overflow    : ellipsis;
-			text-transform   : initial;	
-			white-space      : nowrap;
-			background-color : transparent;		
-		}
-
-		// "The Homebrewery" logo
-		&.homebrewLogo {
-			.animate(color);
-			font-family : 'CodeBold';
-			font-size   : 12px;
-			color       : white;
-			div {
-				margin-top    : 2px;
-				margin-bottom : -2px;
-			}
-			&: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-basis : 20%;
-						flex-grow  : 1;
-						min-width  : 76px;
-						padding    : 5px 0;
-						color      : #BBBBBB;
-						text-align : center;
-					}
-					p {
-						flex-basis     : 80%;
-						flex-grow      : 1;
-						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;
-				width            : 100%;
-				padding          : 13px 5px;
-				text-align       : center;
-				visibility       : hidden;
-				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));
-		}
-	}
-}
+@navbarHeight : 28px;
+@keyframes coloring {
+	//from {color: white;}
+	//to {color: red;}
+	0%   {color: pink;}
+	50%  {color: pink;}
+	75%  {color: red;}
+	100% {color: pink;}
+}
+.homebrew nav{
+	.homebrewLogo{
+		.animate(color);
+		font-family : CodeBold;
+		font-size   : 12px;
+		color       : white;
+		div{
+			margin-top    : 2px;
+			margin-bottom : -2px;
+		}
+		&:hover{
+			color : @blue;
+		}
+	}
+	.editTitle.navItem{
+		padding : 2px 12px;
+		input{
+			width            : 250px;
+			margin           : 0;
+			padding          : 2px;
+			background-color : #444;
+			font-family      : 'Open Sans', sans-serif;
+			font-size        : 12px;
+			font-weight      : 800;
+			color            : white;
+			text-align       : center;
+			border           : 1px solid @blue;
+			outline          : none;
+		}
+		.charCount{
+			display        : inline-block;
+			vertical-align : bottom;
+			margin-left    : 8px;
+			color          : #666;
+			text-align     : right;
+			&.max{
+				color : @red;
+			}
+		}
+	}
+	.brewTitle.navItem{
+		font-size      : 12px;
+		font-weight    : 800;
+		color          : white;
+		text-align     : center;
+		text-transform : initial;
+	}
+	.patreon.navItem{
+		border-left  : 1px solid #666;
+		border-right : 1px solid #666;
+		&:hover i {
+			color: red;
+		}
+		i{
+			.animate(color);
+			animation-name: coloring;
+			animation-duration: 2s;
+			color: pink;
+		}
+	}
+	.recent.navItem{
+		position : relative;
+		.dropdown{
+			position : absolute;
+			top      : 28px;
+			left     : 0px;
+			z-index  : 10000;
+			width    : 100%;
+			h4{
+				display          : block;
+				box-sizing       : border-box;
+				padding          : 5px 0px;
+				background-color : #333;
+				font-size        : 0.8em;
+				color            : #bbb;
+				text-align       : center;
+				border-top       : 1px solid #888;
+				&:nth-of-type(1){ background-color: darken(@teal, 20%); }
+				&:nth-of-type(2){ background-color: darken(@purple, 30%); }
+			}
+			.item{
+				.animate(background-color);
+				position         : relative;
+				display          : block;
+				box-sizing       : border-box;
+				padding          : 13px 5px;
+				background-color : #333;
+				color            : white;
+				text-decoration  : none;
+				border-top       : 1px solid #888;
+				&:hover{
+					background-color : @blue;
+				}
+				.title{
+					display       : inline-block;
+					overflow      : hidden;
+					width         : 100%;
+					text-overflow : ellipsis;
+					white-space   : nowrap;
+				}
+				.time{
+					position  : absolute;
+					right     : 2px;
+					bottom    : 2px;
+					font-size : 0.7em;
+					color     : #888;
+				}
+			}
+		}
+	}
+	.warning.navItem{
+		position         : relative;
+		background-color : @orange;
+		color            : white;
+		&:hover>.dropdown{
+			visibility : visible;
+		}
+		.dropdown{
+			position         : absolute;
+			display          : block;
+			top              : 28px;
+			left             : 0px;
+			visibility       : hidden;
+			z-index          : 10000;
+			box-sizing       : border-box;
+			width            : 100%;
+			padding          : 13px 5px;
+			background-color : #333;
+			text-align       : center;
+		}
+	}
+}

client/homebrew/navbar/newbrew.navitem.jsx

@@ -1,64 +1,11 @@
 const React = require('react');
-const _ = require('lodash');
 const Nav = require('naturalcrit/nav/nav.jsx');
-const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js
 
-const BREWKEY  = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const METAKEY  = 'homebrewery-new-meta';
-
-const NewBrew = ()=>{
-	const handleFileChange = (e)=>{
-		const file = e.target.files[0];
-		if(file) {
-			const reader = new FileReader();
-			reader.onload = (e)=>{
-				const fileContent = e.target.result;
-				const newBrew = {
-					text  : fileContent,
-					style : ''
-				};
-				if(fileContent.startsWith('```metadata')) {
-					splitTextStyleAndMetadata(newBrew); // Modify newBrew directly
-					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';
-				} else {
-					alert('This file is invalid, please, enter a valid file');
-				}
-			};
-			reader.readAsText(file);
-		}
-	};
-
-	return (
-		<Nav.dropdown>
-			<Nav.item
-				className='new'
-				color='purple'
-				icon='fa-solid fa-plus-square'>
-                new
-			</Nav.item>
-			<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>
-		</Nav.dropdown>
-	);
+module.exports = function(props){
+	return <Nav.item
+		href='/new'
+		color='purple'
+		icon='fas fa-plus-square'>
+		new
+	</Nav.item>;
 };
-
-module.exports = NewBrew;

client/homebrew/navbar/print.navitem.jsx

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

client/homebrew/navbar/recent.navitem.jsx

@@ -10,7 +10,7 @@ const VIEW_KEY = 'homebrewery-recently-viewed';
 
 
 const RecentItems = createClass({
-	DisplayName     : 'RecentItems',
+
 	getDefaultProps : function() {
 		return {
 			storageKey : '',
@@ -36,7 +36,7 @@ const RecentItems = createClass({
 		//== 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){
+			if(this.props.brew.googleId){
 				editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
 			}
 			edited = _.filter(edited, (brew)=>{
@@ -51,7 +51,7 @@ const RecentItems = createClass({
 		}
 		if(this.props.storageKey == 'view'){
 			let shareId = this.props.brew.shareId;
-			if(this.props.brew.googleId && !this.props.brew.stubbed){
+			if(this.props.brew.googleId){
 				shareId = `${this.props.brew.googleId}${this.props.brew.shareId}`;
 			}
 			viewed = _.filter(viewed, (brew)=>{
@@ -83,7 +83,7 @@ const RecentItems = createClass({
 	 		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){
+				if(prevProps.brew.googleId){
 					prevEditId = `${prevProps.brew.googleId}${prevProps.brew.editId}`;
 				}
 
@@ -91,7 +91,7 @@ const RecentItems = createClass({
 					return brew.id !== prevEditId;
 				});
 				let editId = this.props.brew.editId;
-				if(this.props.brew.googleId && !this.props.brew.stubbed){
+				if(this.props.brew.googleId){
 					editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
 				}
 				edited.unshift({
@@ -119,58 +119,37 @@ const RecentItems = createClass({
 		});
 	},
 
-	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;
+		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 ]'}>
+			return _.map(brews, (brew)=>{
+				return <a href={brew.url} className='item' key={brew.id} 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 <>
+		return <div className='dropdown'>
 			{(this.props.showEdit && this.props.showView) ?
-				<Nav.item className='header'>edited</Nav.item> : null }
+				<h4>edited</h4> : null }
 			{this.props.showEdit ?
 				makeItems(this.state.edit) : null }
 			{(this.props.showEdit && this.props.showView) ?
-				<Nav.item className='header'>viewed</Nav.item>	: null }
+				<h4>viewed</h4>	: null }
 			{this.props.showView ?
 				makeItems(this.state.view) : null }
-		</>;
+		</div>;
 	},
 
 	render : function(){
-		return <Nav.dropdown className='recent'>
-			<Nav.item icon='fas fa-history' color='grey' >
-				{this.props.text}
-			</Nav.item>
+		return <Nav.item icon='fas fa-history' color='grey' className='recent'
+			onMouseEnter={()=>this.handleDropdown(true)}
+			onMouseLeave={()=>this.handleDropdown(false)}>
+			{this.props.text}
 			{this.renderDropdown()}
-		</Nav.dropdown>;
+		</Nav.item>;
 	}
 
 });

client/homebrew/navbar/reddit.navitem.jsx

@@ -0,0 +1,45 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const cx = require('classnames');
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+const MAX_URL_SIZE = 2083;
+const MAIN_URL = 'https://www.reddit.com/r/UnearthedArcana/submit?selftext=true';
+
+
+const RedditShare = createClass({
+	getDefaultProps : function() {
+		return {
+			brew : {
+				title    : '',
+				sharedId : '',
+				text     : ''
+			}
+		};
+	},
+
+	getText : function(){
+
+	},
+
+
+	handleClick : function(){
+		const 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/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 = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${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,183 +0,0 @@
-require('./brewItem.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const moment = require('moment');
-import request from '../../../../utils/request-middleware.js';
-
-const googleDriveIcon = require('../../../../googleDrive.svg');
-const homebreweryIcon = require('../../../../thumbnail.png');
-const dedent = require('dedent-tabs').default;
-
-const BrewItem = createClass({
-	displayName     : 'BrewItem',
-	getDefaultProps : function() {
-		return {
-			brew : {
-				title       : '',
-				description : '',
-				authors     : [],
-				stubbed     : true
-			},
-			updateListFilter : ()=>{},
-			reportError      : ()=>{},
-			renderStorage    : true
-		};
-	},
-
-	deleteBrew : function(){
-		if(this.props.brew.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.brew.googleId ?? ''}${this.props.brew.editId}`)
-			.send()
-			.end((err, res)=>{
-				if(err) {
-					this.props.reportError(err);
-				} else {
-					location.reload();
-				}
-			});
-	},
-
-	updateFilter : function(type, term){
-		this.props.updateListFilter(type, term);
-	},
-
-	renderDeleteBrewLink : function(){
-		if(!this.props.brew.editId) return;
-
-		return <a className='deleteLink' onClick={this.deleteBrew}>
-			<i className='fas fa-trash-alt' title='Delete' />
-		</a>;
-	},
-
-	renderEditLink : function(){
-		if(!this.props.brew.editId) return;
-
-		let editLink = this.props.brew.editId;
-		if(this.props.brew.googleId && !this.props.brew.stubbed) {
-			editLink = this.props.brew.googleId + editLink;
-		}
-
-		return <a className='editLink' href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
-			<i className='fas fa-pencil-alt' title='Edit' />
-		</a>;
-	},
-
-	renderShareLink : function(){
-		if(!this.props.brew.shareId) return;
-
-		let shareLink = this.props.brew.shareId;
-		if(this.props.brew.googleId && !this.props.brew.stubbed) {
-			shareLink = this.props.brew.googleId + shareLink;
-		}
-
-		return <a className='shareLink' href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
-			<i className='fas fa-share-alt' title='Share' />
-		</a>;
-	},
-
-	renderDownloadLink : function(){
-		if(!this.props.brew.shareId) return;
-
-		let shareLink = this.props.brew.shareId;
-		if(this.props.brew.googleId && !this.props.brew.stubbed) {
-			shareLink = this.props.brew.googleId + shareLink;
-		}
-
-		return <a className='downloadLink' href={`/download/${shareLink}`}>
-			<i className='fas fa-download' title='Download' />
-		</a>;
-	},
-
-	renderStorageIcon : function(){
-		if(!this.props.renderStorage) return;
-		if(this.props.brew.googleId) {
-			return <span title={this.props.brew.webViewLink ? 'Your Google Drive Storage': 'Another User\'s Google Drive Storage'}>
-				<a href={this.props.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>;
-	},
-
-	render : function(){
-		const brew = this.props.brew;
-		if(Array.isArray(brew.tags)) {               // temporary fix until dud tags are cleaned
-			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={()=>{this.updateFilter(tag);}}>{matches[2]}</span>;
-						})}
-					</div>
-				</> : <></>
-				}
-				<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>
-				{this.renderStorageIcon()}
-			</div>
-
-			<div className='links'>
-				{this.renderShareLink()}
-				{this.renderEditLink()}
-				{this.renderDownloadLink()}
-				{this.renderDeleteBrewLink()}
-			</div>
-		</div>;
-	}
-});
-
-module.exports = BrewItem;

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

@@ -1,148 +0,0 @@
-
-.brewItem{
-	position                    : relative;
-	display                     : inline-block;
-	vertical-align              : top;
-	box-sizing                  : border-box;
-	box-sizing                  : border-box;
-	overflow                    : hidden;
-	width                       : 48%;
-	min-height                  : 105px;
-	margin-right                : 15px;
-	margin-bottom               : 15px;
-	padding                     : 5px 15px 2px 6px;
-	padding-right               : 15px;
-	border                      : 1px solid #c9ad6a;
-	border-radius               : 5px;
-	-webkit-column-break-inside : avoid;
-	page-break-inside           : avoid;
-	break-inside                : avoid;
-	box-shadow                  : 0px 4px 5px 0px #333;
-	background-color            : #cab2802e;
-	.thumbnail  {
-		position: absolute;
-		width: 150px;
-		height: 100%;
-		top: 0;
-		right: 0;
-		z-index: -1;
-		background-size: contain;
-		background-repeat: no-repeat;
-		background-position: right top;
-		mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
-		-webkit-mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
-		opacity: 50%;
-	}
-	.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 {
-		background-color: #c8ac6e3b;
-		margin: 2px;
-		padding: 2px;
-		border: 1px solid #c8ac6e;
-		border-radius: 4px;
-		white-space: nowrap;
-		display: inline-block;
-		font-weight: bold;
-		border-color: currentColor;
-		cursor : pointer;
-		&:before {
-			font-family: 'Font Awesome 5 Free';
-			font-size: 12px;
-			margin-right: 3px;
-		}
-		&.type {
-			background-color: #0080003b;
-			color: #008000;
-			&:before{
-				content: '\f0ad';
-			}
-		}
-		&.group {
-			background-color: #5050503b;
-			color: #000000;
-			&:before{
-				content: '\f500';
-			}
-		}
-		&.meta {
-			background-color: #0000803b;
-			color: #000080;
-			&:before{
-				content: '\f05a';
-			}
-		}
-		&.system {
-			background-color: #8000003b;
-			color: #800000;
-			&:before{
-				content: '\f518';
-			}
-		}
-	}
-	&:hover{
-		.links{
-			opacity : 1;
-		}
-	}
-	&:nth-child(2n + 1){
-		margin-right : 0px;
-	}
-	.links{
-		.animate(opacity);
-		position         : absolute;
-		top              : 0px;
-		right            : 0px;
-		height           : 100%;
-		width            : 2em;
-		opacity          : 0;
-		background-color : fade(black, 60%);
-		text-align       : center;
-		a{
-			.animate(opacity);
-			display         : block;
-			margin          : 8px 0px;
-			opacity         : 0.6;
-			font-size       : 1.3em;
-			color           : white;
-			text-decoration : unset;
-			&:hover{
-				opacity : 1;
-			}
-			i{
-				cursor : pointer;
-			}
-		}
-	}
-	.googleDriveIcon {
-		height	: 18px;
-		padding : 0px;
-		margin  : -5px;
-	}
-	.homebreweryIcon {
-		mix-blend-mode : darken;
-		height         : 24px;
-		position       : relative;
-		top            : 5px;
-		left           : -5px;
-	}
-}

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

@@ -1,280 +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_KEY_PREFIX = 'HOMEBREWERY-LISTPAGE';
-
-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_KEY_PREFIX}-SORTTYPE`) || DEFAULT_SORT_TYPE));
-			const newSortDir = (this.state.sortDir ?? (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-SORTDIR`) || DEFAULT_SORT_DIR));
-			this.updateUrl(this.state.filterString, newSortType, newSortDir);
-
-			const brewCollection = this.props.brewCollection.map((brewGroup)=>{
-				brewGroup.visible = (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-VISIBILITY-${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_KEY_PREFIX}-VISIBILITY-${brewGroup.class}`, `${brewGroup.visible}`);
-		});
-		localStorage.setItem(`${USERPAGE_KEY_PREFIX}-SORTTYPE`, this.state.sortType);
-		localStorage.setItem(`${USERPAGE_KEY_PREFIX}-SORTDIR`, 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,190 +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 {
-					font-family: 'Font Awesome 5 Free';
-					font-weight: 900;
-					font-size: 0.6cm;
-					padding-right: 0.5em;
-				}
-				.active {
-					color: var(--HB_Color_HeaderText);
-				}
-				.active::before {
-					content: '\f107';
-				}
-				.inactive {
-					color: #707070;
-				}
-				.inactive::before {
-					content: '\f105';
-				}
-			}
-		}
-	}
-	.sort-container {
-		font-family        : 'Open Sans', sans-serif;
-		position           : sticky;
-		top                : 0;
-		left               : 0;
-		width              : 100%;
-		height             : 30px;
-		background-color   : #555;
-		border-top         : 1px solid #666;
-		border-bottom         : 1px solid #666;
-		color              : white;
-		text-align         : center;
-		z-index            : 1;
-		display            : flex;
-		justify-content    : center;
-		align-items        : baseline;
-		column-gap         : 15px;
-		row-gap            : 5px;
-		flex-wrap          : wrap;
-		h6{
-			text-transform : uppercase;
-			font-family    : 'Open Sans', sans-serif;
-			font-size      : 11px;
-			font-weight    : bold;
-		}
-		.sort-option {
-			display: flex;
-			align-items: center;
-			padding: 0 8px;
-			color: #ccc;
-			height: 100%;
-
-			&:hover{
-				background-color : #444;
-			}
-
-			&.active {
-			font-weight: bold;
-			color: #ddd;
-			background-color: #333;
-
-			button {
-				color: white;
-				font-weight: 800;
-				height: 100%;
-				& + .sortDir {
-					padding-left: 5px;
-				}
-			}
-		}
-
-		}
-		.filter-option {
-			margin-left: 20px;
-			background-color : transparent !important;
-			font-size        : 11px;
-			i{
-				padding-right : 5px;
-			}
-		}
-		button{
-				background-color : transparent;
-				font-family      : 'Open Sans', sans-serif;
-				text-transform   : uppercase;
-				font-weight      : normal;
-				font-size        : 11px;
-				color            : #ccc;
-				padding          : 0;
-			}
-
-
-	}
-	.tags-container {
-		height             : 30px;
-		background-color   : #555;
-		border-top         : 1px solid #666;
-		border-bottom      : 1px solid #666;
-		color              : white;
-		display            : flex;
-		justify-content    : center;
-		align-items        : center;
-		column-gap         : 15px;
-		row-gap            : 5px;
-		flex-wrap          : wrap;
-		span {
-			font-family    : 'Open Sans', sans-serif;
-			font-size      : 11px;
-			font-weight    : bold;
-			border         : 1px solid;
-			border-radius  : 3px;
-			padding        : 3px;
-			cursor         : pointer;
-			color: #dfdfdf;
-			&:before {
-				font-family: 'Font Awesome 5 Free';
-				font-size: 12px;
-				margin-right: 3px;
-			}
-			&:after {
-				content: '\f00d';
-				font-family: 'Font Awesome 5 Free';
-				font-size: 12px;
-				margin-left: 3px;
-			}
-			&.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';
-				}
-			}
-		}
-	}
-}