fix a few issues

[Widgets] clean up codeEditor

.circleci/config.yml

@@ -5,12 +5,12 @@
 version: 2.1
 
 orbs:
-  node: circleci/node@5.1.0
+  node: circleci/node@3.0.0
 
 jobs:
   build:
     docker:
-      - image: cimg/node:20.17.0
+      - image: cimg/node:16.11.0
       - image: mongo:4.4
 
     working_directory: ~/homebrewery
@@ -27,7 +27,7 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - v1-dependencies-
 
-      - run: sudo npm install -g npm@10.8.2
+      - run: sudo npm install -g npm@8.10.0
       - node/install-packages:
           app-dir: ~/homebrewery
           cache-path: node_modules
@@ -45,7 +45,7 @@ jobs:
 
   test:
     docker:
-      - image: cimg/node:20.17.0
+      - image: cimg/node:16.11.0
 
     working_directory: ~/homebrewery
     parallelism: 1
@@ -64,36 +64,12 @@ jobs:
       - 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 - Paragraph Justification
-          command: npm run test:paragraph-justification
-      - 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:

.eslintrc.js

@@ -0,0 +1,79 @@
+module.exports = {
+	root          : true,
+	parserOptions : {
+		ecmaVersion  : 2021,
+		sourceType   : 'module',
+		ecmaFeatures : {
+			jsx : true
+		}
+	},
+	env : {
+		browser : true,
+		node    : true
+	},
+	plugins : ['react', 'jest'],
+	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'],
+		'jest/valid-expect'      : ['error', { maxArgs: 3	}],
+
+		/** 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/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

.stylelintrc.json

@@ -1,48 +1,48 @@
 {
-	"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
-	}
+    "extends": [
+			"stylelint-config-recess-order",
+			"stylelint-config-recommended"],
+    "plugins": [
+      "stylelint-stylistic",
+      "./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,4 +1,4 @@
-FROM node:22-alpine
+FROM node:18-alpine
 RUN apk --no-cache add git
 
 ENV NODE_ENV=docker
@@ -9,10 +9,7 @@ WORKDIR /usr/src/app
 # Copy package.json into the image, then run yarn install
 # This improves caching so we don't have to download the dependencies every time the code changes
 COPY package.json ./
-COPY config/docker.json usr/src/app/config
 # --ignore-scripts tells yarn not to run postbuild.  We run it explicitly later
-RUN node --version
-RUN npm --version
 RUN npm install --ignore-scripts
 
 # Bundle app source and build application

README.DOCKER.md

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

babel.config.json

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

changelog.md

@@ -75,788 +75,11 @@ pre {
 .page {
 	padding-bottom: 1.5cm;
 }
-
-.varSyntaxTable th:first-of-type {
-	width:6cm;
-}
-
-.page .exampleTable td,th {
-	border:1px dashed #00000030;
-}
 ```
 
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
-### Thursday 01/30/2025 - v3.17.0
-
-{{taskList
-##### 5e-Cleric
-
-* [x] Update FAQ
-
-* [x] Fix styling for Vault buttons and checkboxes
-
-* [x] Improve navigation bar styling
-
-* [x] Add feature to change username at https://www.naturalcrit.com/account
-
-* [x] Fix Reddit link crash when title has non-latin chars
-
-##### dbolack
-
-* [x] Fix page shadows toolbar option
-
-Fixes issue [#3919](https://github.com/naturalcrit/homebrewery/issues/3919)
-
-* [x] Add `:>>>` syntax for horizontal :>>>>> spaces
-
-* [x] Update Docker install instructions
-
-Fixes issue [#1930](https://github.com/naturalcrit/homebrewery/issues/1930)
-
-* [x] Allow styling pages via `\page{myStyles}` (with calculuschild)
-
-Fixes issue [#3901](https://github.com/naturalcrit/homebrewery/issues/3901) 
-
-* [x] Update Ubuntu install instructions
-
-Fixes issue [#1952](https://github.com/naturalcrit/homebrewery/issues/1952)
-
-* [x] Add `:-:` `:-` `-:` syntax for paragraph alignment, similar to table column alignment; for example:
-
--: -: Right-aligned
-
-:-: :-: Centered
-
-* [x] Add `:-- 50% --:` syntax to allow setting table column widths by percentage; for example:
-```
-| Narrow  | Wide   |
-|:- 10% -:|:-90%--:|
-|  Cell   | Cell   |
-```
-
-
-| Narrow  | Wide   |
-|:- 10% -:|:-90%--:|
-|Cell     | Cell   |
-{exampleTable}
-
-##### G-Ambatte
-
-* [x] Fix crash when opening brew Properties tab
-
-Fixes issue [#3927](https://github.com/naturalcrit/homebrewery/issues/3927)
-
-* [x] Update error pages with steps to refresh credentials 
-
-Fixes issue [#3955](https://github.com/naturalcrit/homebrewery/issues/3955)
-
-* [x] Add {{openSans :fas_rectangle_list: **NAVIGATION**}} menu to the viewer toolbar
-
-##### calculuschild
-
-* [x] Reduce display lag on large brews
-
-##### Gazook89
-
-* [x] Smarter detection of current page number
-
-Fixes issue [#3824](https://github.com/naturalcrit/homebrewery/issues/3824)
-
-##### All
-* [x] Update dependencies and scripts
-* [x] Refactor components and fix various errors
-}}
-
-\column
-
-### Wednesday 11/27/2024 - v3.16.1
-
-{{taskList
-##### 5e-Cleric
-
-* [x] Allow linking to specific HTML IDs via `#ID` at the end of the URL, e.g.: `homebrewery.naturalcrit.com/share/share/a6RCXwaDS58i#p4` to link to Page 4 directly
-
-Fixes issues [#2820](https://github.com/naturalcrit/homebrewery/issues/2820), [#3505](https://github.com/naturalcrit/homebrewery/issues/3505)
-
-* [x] Fix generation of link to certain Google Drive brews
-
-Fixes issue [#3776](https://github.com/naturalcrit/homebrewery/issues/3776)
-
-##### abquintic
-
-* [x] Fix blank pages appearing when pasting text
-
-Fixes issue [#3718](https://github.com/naturalcrit/homebrewery/issues/3718)
-
-##### Gazook89
-
-* [x] Add new brew viewing options to the view toolbar
-- {{fac,single-spread}} {{openSans **SINGLE PAGE**}}
-- {{fac,facing-spread}} {{openSans **TWO PAGE**}}
-- {{fac,flow-spread}} {{openSans **GRID**}}
-
-Fixes issue [#1379](https://github.com/naturalcrit/homebrewery/issues/1379)
-
-* [x] Updates to tag input boxes
-
-##### G-Ambatte
-
-* [x] Admin tools to fix certain corrupted documents
-
-Fixes issue [#3801](https://github.com/naturalcrit/homebrewery/issues/3801)
-
-* [x] Fix print window being affected by document zoom
-
-Fixes issue [#3744](https://github.com/naturalcrit/homebrewery/issues/3744)
-
-
-##### calculuschild, 5e-Cleric, G-Ambatte, Gazook89, abquintic
-
-* [x] Multiple code refactors, cleanups, and security fixes
-}}
-
-\page
-
-### Saturday 10/12/2024 - v3.16.0
-
-{{taskList
-##### 5e-Cleric
-
-* [x] Added a new API endpoint `/metadata/:shareId` to fetch metadata about individual brews
-
-Fixes issue [#2638](https://github.com/naturalcrit/homebrewery/issues/2638)
-
-* [x] Added A3, A5, and Card page size snippets under {{openSans **:fas_paintbrush: STYLE TAB :fas_arrow_right: :fas_print: PRINT**}}
-
-* [x] Adjust navbar styling for very long titles
-
-Fixes issue [#2071](https://github.com/naturalcrit/homebrewery/issues/2071)
-
-* [x] Added some sorting options to the {{openSans **VAULT** {{fas,fa-dungeon}}}} page
-
-* [x] Fix `language` property not working in share page
-
-Fixes issue [#3776](https://github.com/naturalcrit/homebrewery/issues/3776)
-
-##### abquintic
-
-* [x] New {{openSans **:fas_pencil: TEXT EDITOR :fas_arrow_right: :fas_bookmark: PAGE NUMBER :fas_arrow_right:**}}
-{{openSans **:fas_xmark: SKIP PAGE NUMBER**}} and {{openSans **:fas_arrow_rotate_left: RESTART PAGE NUMBER**}} snippets for more control over automatic page numbering.
-
-Fixes issue [#513](https://github.com/naturalcrit/homebrewery/issues/513)
-
-* [x] New Table of Contents control options via {{openSans **:fas_pencil: TEXT EDITOR :fas_arrow_right: :fas_book: TABLE OF CONTENTS**}} submenus. By default, H1-H3 is included in the ToC generation, but the new options allow marking `{{blocks}}` to include or exclude specific or ranges of contained headers. Also, a global option to increase the default range of H1-H3 to H1-H4/5/6. After applying these markers, you must regenerate the Table of Contents to see the changes.
-
-* [x] Added a ":fas_lock: SYNC VIEWS" button onto the divider bar. When locked, scrolling on either panel will sync the other panel to the same page.
-
-Fixes issue [#241](https://github.com/naturalcrit/homebrewery/issues/241)
-
-##### Gazook89
-
-* [x] Added a :fas_glasses: HIDE button to the page navigation bar
-
-##### G-Ambatte
-
-* [x] Automatic local backups of your files, in case of accidental data loss. Stores up to 5 snapshots of each brew edited in your browser, incrementing from a few minutes old to a maximum of several days. Restore a backup by clicking an entry in the new {{openSans **:fas_clock_rotate_left: HISTORY**}} button in the snippet bar.
-
-Fixes issue [#3070](https://github.com/naturalcrit/homebrewery/issues/3070)
-
-* [x] Fix issue with legacy brews breaking on Share page
-
-Fixes issue [#3764](https://github.com/naturalcrit/homebrewery/issues/3764)
-
-* [x] Fix print size when printing a zoomed document
-
-Fixes issue [#3744](https://github.com/naturalcrit/homebrewery/issues/3744)
-
-##### All
-
-* [x] Background code cleanup, security fixes, dev tool improvements, dependency updates, prep for upcoming features, etc.
-}}
-
-### Wednesday 9/25/2024 - v3.15.1
-
-{{taskList
-##### calculuschild
-
-* [x] Background fixes to handle Google Drive issues
-
-* [x] Remove duplicate error logging
-
-##### calculuschild, 5e-Cleric
-
-* [x] Fix links in {{openSans **RECENT BREWS :fas_clock_rotate_left:**}} and user {{openSans **BREWS :fas_beer_mug_empty:**}} pointing to trashed Google Drive files after transferring from Google to Homebrewery storage
-
-Fixes issue [#3776](https://github.com/naturalcrit/homebrewery/issues/3776)
-}}
-
-\page
-
-### Wednesday 9/04/2024 - v3.15.0
-
-{{taskList
-##### 5e-Cleric, abquintic, calculuschild, Gazook89, G-Ambatte, Ericsheid, Kaiburr
-
-* [x] New {{openSans **VAULT** {{fas,fa-dungeon}}}} page 🎉🎉🎉
-:
-All **PUBLISHED** brews ({{openSans :fas_circle_info: **Properties**}} menu) will be searchable, by title or author, and filtered by renderer. More features and adjustments will be coming.
-:
-Note: If any of your own brews are not showing up in search (particularly if stored on Google Drive), please edit and re-save to ensure our database has the data needed from document to be searchable. 
-
-Fixes issue [#697](https://github.com/naturalcrit/homebrewery/issues/697)
-
-##### Gazook89
-
-* [x] Auto-focus on text editor when switching editor tabs
-}}
-
-### Wednesday 8/28/2024 - v3.14.3
-
-{{taskList
-##### calculuschild, G-Ambatte
-
-* [x] New {{openSans **IMAGES → {{fac,image-wrap-left}} IMAGE WRAP LEFT/RIGHT**}} snippets
-
-Fixes issue [#380](https://github.com/naturalcrit/homebrewery/issues/380)
-
-* [x] Fix v3.14.2 bug with `꞉꞉꞉꞉` failing after tables
-
-##### 5e-Cleric
-
-* [x] Fix Account page crash when not logged in
-
-Fixes issue [#3605](https://github.com/naturalcrit/homebrewery/issues/3605)
-
-##### abquintic
-
-* [x] Fix jump hotkeys conflicting with `CTRL + SHIFT`. Preview and Source movement shortcuts now use `CTRL + SHIFT + META + LEFT\RIGHTARROW`
-
-##### G-Ambatte
-
-* [x] Fix display issue with image wrap icons
-}}
-
-
-### Tuesday 8/27/2024 - v3.14.2
-
-{{taskList
-##### calculuschild
-
-* [x] Reroute invalid urls to homepage
-
-Fixes issues [#3269](https://github.com/naturalcrit/homebrewery/issues/3629)
-
-* [x] Background dependency updates
-
-##### G-Ambatte
-
-* [x] Add route to get brew styling via `/css/shareId`
-
-Fixes issues [#1097](https://github.com/naturalcrit/homebrewery/issues/1097)
-
-* [x] Fix `:emojis:` preventing code folding
-
-Fixes issues [#3604](https://github.com/naturalcrit/homebrewery/issues/3604)
-
-* [x] Fix mask image warping when rotated and stretched
-
-Fixes issues [#3636](https://github.com/naturalcrit/homebrewery/issues/3636)
-
-* [x] Fix Table of Contents uppercasing
-
-Fixes issues [#3572](https://github.com/naturalcrit/homebrewery/issues/3572)
-
-##### abquintic
-
-* [x] Create globally unique Header IDs across pages
-
-Fixes issues [#1430](https://github.com/naturalcrit/homebrewery/issues/1430)
-
-* [x] Fix colon `꞉꞉꞉꞉` being parsed in codeblocks
-
-* [x] Prevent crashes when loading undefined renderer or theme bundle
-
-* [x] Add Jump-To hotkeys
-
-  * Use `CTRL/META + SHIFT + LEFTARROW` to brewJump
-  * Use `CTRL/META + SHIFT + RIGHTARROW` to sourceJump
-
-* [x] Prevent reload from clobbering modified fresh clones
-
-##### 5e-Cleric, Gazook89
-
-* [x] Viewer tools for zoom/page navigation
-}}
-
-### Tuesday 8/13/2024 - v3.14.1
-
-{{taskList
-##### abquintic
-
-* [x] Allow Table of Contents to flow across columns
-
-Fixes issues [#2563](https://github.com/naturalcrit/homebrewery/issues/2563)
-
-* [x] Fix unusual margin spacing for adjacent `.descriptive` and `.wide` blocks
-
-Fixes issues [#2688](https://github.com/naturalcrit/homebrewery/issues/2688)
-
-* [x] Add code folding to :fas_paintbrush: {{openSans **STYLE**}} tab
-
-##### G-Ambatte
-
-* [x] Fix edge case where Table of Contents generator changed capitalization of headings
-
-Fixes issues [#3572](https://github.com/naturalcrit/homebrewery/issues/3572)
-
-* [x] Fix **Ink Friendly** snippet causing unselectable PDF text
-
-Fixes issues [#3563](https://github.com/naturalcrit/homebrewery/issues/3563)
-
-* [x] Prevent brews selecting themselves as a theme
-
-Fixes issues [#3614](https://github.com/naturalcrit/homebrewery/issues/3614)
-
-* [x] Fix info pages (`/faq`, `/migrate`, etc.) showing blank authorship info
-
-Fixes issues [#3568](https://github.com/naturalcrit/homebrewery/issues/3568)
-
-* [x] Add `abs()`, `sign()` and `signed()` functions to variable syntax math handler
-
-Fixes issues [#3537](https://github.com/naturalcrit/homebrewery/issues/3537)
-
-* [x] Fix variable math handler not processing commas (i.e., in `$[max(varA,varB)]`
-
-Fixes issues [#3613](https://github.com/naturalcrit/homebrewery/issues/3613)
-
-* [x] Fix variable math handler scrambling variables with names that are subsets of other variables 
-
-Fixes issues [#3622](https://github.com/naturalcrit/homebrewery/issues/3622)
-
-##### calculuschild
-
-* [x] Fix `/migrate` page using an editor context instead of share context
-
-##### 5e-Cleric
-
-* [x] Fix Monster Stat Blocks losing color in Safari
-}}
-
-\page
-
-### Monday 7/29/2024 - v3.14.0
-{{taskList
-
-##### abquintic, calculuschild
-
-* [x] Alternative Brew Themes, including importing other brews as a base theme.
-
-- In the :fas_circle_info: **Properties** menu, find the new {{openSans **THEME**}} dropdown. It lists Brew Themes, including a new **Blank** theme as a simpler basis for custom styling.
-- Brews tagged with `meta:theme` will appear in the Brew Themes list. Selecting one loads its :fas_paintbrush: **Style** tab contents as the CSS basis for the current brew, allowing one brew to style multiple documents.
-- Brews with `meta:theme` can also select their own Theme, i.e. layering Themes on top of each other.
-- The next goal is to make **Published** Themes shareable between users.
-
-
-Fixes issues [#1899](https://github.com/naturalcrit/homebrewery/issues/1899), [#3085](https://github.com/naturalcrit/homebrewery/issues/3085)
-
-##### G-Ambatte
-
-* [x] Fix Drop-cap font becoming corrupted when Bold
-
-Fixes issues [#3551](https://github.com/naturalcrit/homebrewery/issues/3551)
-
-* [x] Fixes to UI styling
-
-Fixes issues [#3568](https://github.com/naturalcrit/homebrewery/issues/3568)
-
-}}
-
-
-### Saturday 6/7/2024 - v3.13.1
-{{taskList
-
-##### calculuschild, G-Ambatte
-
-* [x] Hotfixes for issues with v3.13.0
-
-Fixes issues [#3559](https://github.com/naturalcrit/homebrewery/issues/3559), [#3552](https://github.com/naturalcrit/homebrewery/issues/3552), [#3554](https://github.com/naturalcrit/homebrewery/issues/3554)
-}}
-
-### Friday 28/6/2024 - v3.13.0
-{{taskList
-
-##### calculuschild
-
-* [x] Add `:emoji:` Markdown syntax, with autosuggest; start typing after the first `:` for matching emojis from 
-:fab_font_awesome: FontAwesome, :df_d20: DiceFont, :ei_action: ElderberryInn, and a subset of :gi_broadsword: GameIcons
-
-* [x] Fix `{curly injection}` to append to, rather than erase and replace target CSS
-* [x] {{openSans **GET PDF**}} {{fa,fa-file-pdf}} now opens the print dialog directly, rather than redirecting to a separate page
-
-##### Gazook
-
-* [x] Several small style tweaks to the UI
-* [x] Cleaning and refactoring several large pieces of code
-
-##### 5e-Cleric
-
-* [x] For error pages, add links to user account and `/share` page if available
-
-Fixes issue [#3298](https://github.com/naturalcrit/homebrewery/issues/3298)
-
-* [x] Change FrontCover title to use stroke outline instead of faking it with dozens of shadows
-* [x] Cleaning and refactoring several large pieces of CSS
-
-##### abquintic
-
-* [x] Added additional {{openSans **TABLE OF CONTENTS**}} snippet options. Explicitly include or exclude items from the ToC generation via CSS properties  
-`--TOC:exclude` or `--TOC:include`, or change the included header depth from 3 to 6 (default 3) with `tocDepthH6`
-
-##### MurdoMaclachlan *(new contributor!)*
-
-* [x] Added "proficiency bonus" to Monster Stat Block snippet. 
-
-Fixes issue [#3397](https://github.com/naturalcrit/homebrewery/issues/3397)
-}}
-
-### Monday 18/3/2024 - v3.12.0
-{{taskList
-
-##### 5e-Cleric
-
-* [x] Fix language-specific hyphenation on print page
-
-Fixes issue [#3294](https://github.com/naturalcrit/homebrewery/issues/3294)
-
-* [x] Upgrade Font-Awesome to v6.51
-
-* [x] Allow downloaded files to be uploaded via {{openSans **NEW {{fa,fa-plus-square}} → FROM UPLOAD {{fa,fa-upload}}**}}
-
-##### G-Ambatte
-
-* [x] Fix an edge case crash with empty documents
-
-Fixes issue [#3315](https://github.com/naturalcrit/homebrewery/issues/3315)
-
-* [x] Brews on the user page can be searched by tag; clicking a tag adds it to the filter
-
-Fixes issue [#3164](https://github.com/naturalcrit/homebrewery/issues/3164)
-
-* [x] Add *DiceFont* icons {{df,d20-20}} `{{df,icon-name}}`
-
-##### abquintic
-
-* [x] Fix ^super^ and ^^sub^^ highlighting in the text editor
-
-* [x] Add new syntax for multiline Definition Lists:
-
-
-```
-Term
-::Definition 1
-::Definition 2
-with more text
-```
-
-produces:
-
-Term
-::Definition 1
-::Definition 2
-with more text
-
-Fixes issue [#2340](https://github.com/naturalcrit/homebrewery/issues/2340)
-
-##### RKuerten :
-* [x] Fix monster stat block backgrounds on print page
-
-Fixes issue [#3275](https://github.com/naturalcrit/homebrewery/issues/3275)
-
-* [x] Added new text editor theme: "Darkvision".
-
-##### calculuschild, G-Ambatte, 5e-Cleric
-
-* [x] Codebase and UI cleanup
-}}
-
-\page
-
-
-### Friday 21/2/2024 - v3.11.0
-{{taskList
-
-##### Gazook89
-
-* [x] Brew view count no longer increases when viewed by owner
-
-Fixes issue [#3037](https://github.com/naturalcrit/homebrewery/issues/3037)
-
-* [x] Small tweak to PHB H3 sizing
-
-Fixes issue [#2989](https://github.com/naturalcrit/homebrewery/issues/2989)
-
-* [x] Add **Fold/Unfold All** {{fas,fa-compress-alt}} / {{fas,fa-expand-alt}} buttons to editor bar 
-
-Fixes issue [#2965](https://github.com/naturalcrit/homebrewery/issues/2965)
-
-
-##### G-Ambatte
-
-* [x] Share link added to Editor Access error page
-
-Fixes issue [#3086](https://github.com/naturalcrit/homebrewery/issues/3086)
-
-* [x] Add Darkbrewery theme to Editor theme selector {{fas,fa-palette}}
-
-Fixes issue [#3034](https://github.com/naturalcrit/homebrewery/issues/3034)
-
-* [x] Fix Firefox prints with alternating blank pages
-
-Fixes issue [#3115](https://github.com/naturalcrit/homebrewery/issues/3115)
-
-* [x] Admin page working again
-
-Fixes issue [#2657](https://github.com/naturalcrit/homebrewery/issues/2657)
-
-
-##### 5e-Cleric
-
-* [x] Fix indenting issue with Monster Blocks and italics in Class Feature
-
-Fixes issues [#527](https://github.com/naturalcrit/homebrewery/issues/527),
-[#3247](https://github.com/naturalcrit/homebrewery/issues/3247)
-
-* [x] Allow CSS vars in curly syntax to be formatted as strings using single quotes
-
-`{{--customVar:"'a string'"}}`
-
-Fixes issue [#3066](https://github.com/naturalcrit/homebrewery/issues/3066)
-
-* [x] Add *Elderberry Inn* icons {{ei,action}} `{{ei,icon-name}}`
-
-Fixes issue [#3171](https://github.com/naturalcrit/homebrewery/issues/3171)
-
-* [x] New {{openSans **{{fas,fa-keyboard}} FONTS**  }} snippets!
-
-Fixes issue [#3171](https://github.com/naturalcrit/homebrewery/issues/3171)
-
-* [x] New page now opens in a new tab
-
-
-##### abquintic (new contributor!)
-
-* [x] Add ^super^ `^abc^` and ^^sub^^ `^^abc^^` syntax.
- 
-Fixes issue [#2171](https://github.com/naturalcrit/homebrewery/issues/2171)
-
-* [x] Add HTML tag assignment to curly syntax `{{tag=value}}`
- 
-Fixes issue [1488](https://github.com/naturalcrit/homebrewery/issues/1488)
-
-* [x] {{openSans **Brew → Clone to New**}} now clones tags
- 
-Fixes issue [1488](https://github.com/naturalcrit/homebrewery/issues/1488)
-
-##### calculuschild
-
-* [x] Better error messages for "Out of Google Drive Storage" and "Not logged in to edit"
-
-Fixes issues [2510](https://github.com/naturalcrit/homebrewery/issues/2510),
-[2975](https://github.com/naturalcrit/homebrewery/issues/2975)
-
-* [x] Brew Variables
-}}
-
-\
-
-{{wide
-
-### Brew Variable Syntax
-
-You may already be familiar with `[link](url)` and `![image](url)` synax. We have expanded this to include a third `$[variable](text)` syntax. All three of these syntaxes now share a common set of features:
-
-{{varSyntaxTable
-| syntax | description |
-|:-------|-------------|
-| `[var]:content`  | Assigns a variable (must start on a line by itself, and ends at the next blank line) |
-| `[var](content)` | Assigns a variable and outputs it (can be inline) |
-| `[var]`  | Outputs the variable contents as a link, if formatted as a valid link |
-| `![var]` | Outputs as an image, if formatted as a valid image                    |
-| `$[var]` | Outputs as Markdown                                          |
-| `$[var1 + var2 - 2 * var3]` | Performs math operations and outputs result if all variables are valid numbers                                     |
-}}
-
-}}
-
-{{wide,margin-top:0,margin-bottom:0
-### Examples
-}}
-
-{{wide,columns:2,margin-top:0,margin-bottom:0
-
-```
-[first]: Bob
-
-[last]: Jones
-
-My name is $[first] $[last].
-```
-
-\column
-
-[first]: Bob
-
-[last]: Jones
-
-My name is $[first] $[last].
-
-}}
-
-{{wide,columns:2,margin-top:0,margin-bottom:0
-
-```
-[myTable]:
-| h1 | h2 |
-|----|----|
-| c1 | c2 |
-
-Here is my table:
-$[myTable]
-```
-
-\column
-
-[myTable]:
-| h1 | h2 |
-|----|----|
-| c1 | c2 |
-
-Here is my table:
-$[myTable]
-}}
-
-{{wide,columns:2,margin-top:0,margin-bottom:0
-
-```
-There are $[TableNum] tables total.
-
-#### Table $[TableNum](1): Horses
-
-#### Table $[TableNum]($[TableNum + 1]): Cows
-```
-
-\column
-
-There are $[TableNum] tables in this document. *(note: final value of `$[TableNum]` gets hoisted up if available)*
-
-
-#### Table $[TableNum](1): Horses
-
-#### Table $[TableNum]($[TableNum + 1]): Cows
-}}
-
-\page
-
-### Friday 13/10/2023 - v3.10.0
-{{taskList
-
-##### G-Ambatte
-
-* [x] Fix user preferred save location being ignored
-
-Fixes issue [#2993](https://github.com/naturalcrit/homebrewery/issues/2993)
-
-* [x] Fix crash to white screen when starting new brews while not signed in
-
-Fixes issue [#2999](https://github.com/naturalcrit/homebrewery/issues/2999)
-
-* [x] Fix FreeBSD install script 
-
-Fixes issue [#3005](https://github.com/naturalcrit/homebrewery/issues/3005)
-
-* [x] Fix *"This brew has been changed on another device"* triggering when manually saving during auto-save
-
-Fixes issue [#2641](https://github.com/naturalcrit/homebrewery/issues/2641)
-
-* [x] Fix Firefox different column-flow behavior
-
-Fixes issue [#2982](https://github.com/naturalcrit/homebrewery/issues/2982)
-
-* [x] Fix brew titles being mis-sorted on user page
-
-Fixes issue [#2775](https://github.com/naturalcrit/homebrewery/issues/2775)
-
-* [x] Text Editor themes now available via new drop-down
-
-Fixes issue [#362](https://github.com/naturalcrit/homebrewery/issues/362)
-
-##### 5e-Cleric
-
-* [x] New {{openSans **PHB → {{fas,fa-quote-right}} QUOTE**  }} snippet for V3!
-
-Fixes issue [#2920](https://github.com/naturalcrit/homebrewery/issues/2920)
-
-* [x] Several updates and fixes to FAQ and Welcome page
-
-Fixes issue [#2729](https://github.com/naturalcrit/homebrewery/issues/2729),
-[#2787](https://github.com/naturalcrit/homebrewery/issues/2787)
-
-##### Gazook89
-
-* [x] Add syntax highlighting for Definition Lists <code>:\:</code>
-}}
-
-
-### Thursday 17/08/2023 - v3.9.2
-{{taskList
-
-##### calculuschild
-
-* [x] Fix links to certain old Google Drive files
-
-Fixes issue [#2917](https://github.com/naturalcrit/homebrewery/issues/2917)
-
-##### G-Ambatte
-
-* [x] Menus now open on click, and internally consistent
-
-Fixes issue [#2702](https://github.com/naturalcrit/homebrewery/issues/2702), [#2782](https://github.com/naturalcrit/homebrewery/issues/2782) 
-
-* [x] Add smarter footer snippet
-
-Fixes issue [#2289](https://github.com/naturalcrit/homebrewery/issues/2289) 
-
-* [x] Add sanitization in Style editor
-
-Fixes issue [#1437](https://github.com/naturalcrit/homebrewery/issues/1437) 
-
-* [x] Rework class table snippets to remove unnecessary randomness
-
-Fixes issue [#2964](https://github.com/naturalcrit/homebrewery/issues/2964) 
-
-* [x] Add User Page link to Google Drive file for file owners, add icons for additional storage locations
-
-Fixes issue [#2954](https://github.com/naturalcrit/homebrewery/issues/2954) 
-
-* [x] Add default save location selection to Account Page
-
-Fixes issue [#2943](https://github.com/naturalcrit/homebrewery/issues/2943) 
-
-##### 5e-Cleric
-
-* [x] Exclude cover pages from Table of Content generation (editing on mobile is still not recommended)
-
-Fixes issue [#2920](https://github.com/naturalcrit/homebrewery/issues/2920)
-
-##### Gazook89
-
-* [x] Adjustments to improve mobile viewing
-}}
-
-
-
 ### Wednesday 28/06/2023 - v3.9.1
 {{taskList
 
@@ -870,7 +93,7 @@ Fixes issue [#1924](https://github.com/naturalcrit/homebrewery/issues/1924)
 ### Friday 02/06/2023 - v3.9.0
 {{taskList
 
-##### calculuschild
+##### Calculuschild
 
 * [x] Fix some files not showing up on userpage when user has a large number of brews in Google Drive
 
@@ -901,8 +124,6 @@ Fixes issue [#2790](https://github.com/naturalcrit/homebrewery/issues/2790)
 Fixes issue [#2784](https://github.com/naturalcrit/homebrewery/issues/2784) 
 }}
 
-\page
-
 ### Wednesday 12/04/2023 - v3.8.0
 {{taskList
 
@@ -964,10 +185,12 @@ Fixes issues [#2731](https://github.com/naturalcrit/homebrewery/issues/2731)
 
 }}
 
+\page
+
 ### Monday 13/03/2023 - v3.7.2
 {{taskList
 
-##### calculuschild
+##### Calculuschild
 
 * [x] Fix wide Monster Stat Blocks not spanning columns on Legacy
 }}
@@ -990,7 +213,7 @@ Fixes issues [#1569](https://github.com/naturalcrit/homebrewery/issues/1569)
 * [x] Updated the Google Drive icon
 * [x] Backend fix to unit tests failing intermittently
 
-##### calculuschild
+##### Calculuschild
 
 * [x] Fix PDF pixelation on CoverPage text outlines
 }}
@@ -1002,7 +225,7 @@ Fixes issues [#1569](https://github.com/naturalcrit/homebrewery/issues/1569)
 **NOTE:** Some new snippets will now show a {{beta BETA}} tag. Feel free to use them, but be aware we may change how they work depending on your feedback.
 }}
 
-##### calculuschild
+##### Calculuschild
 
 * [x] New {{openSans **IMAGES → WATERCOLOR EDGE** {{fac,mask-edge}} }} and {{openSans **WATERCOLOR CORNER** {{fac,mask-corner}} }} snippets for V3, which adds a stylish watercolor texture to the edge of your images! (Thanks to /u/flamableconcrete on Reddit for providing these image masks!)
 
@@ -1044,11 +267,7 @@ Fixes issues [#2603](https://github.com/naturalcrit/homebrewery/issues/2603)
 * [x] Add message to refresh the browser if the user is missing an update to the Homebrewery
 
 Fixes issues [#2583](https://github.com/naturalcrit/homebrewery/issues/2583)
-}}
 
-\page
-
-{{taskList
 ##### G-Ambatte
 
 * [x] Auto-compile Themes CSS on development server
@@ -1058,6 +277,7 @@ Fixes issues [#2583](https://github.com/naturalcrit/homebrewery/issues/2583)
 * [x] Fix cloned brews inheriting the parent view count
 }}
 
+\page
 
 ### Friday 23/12/2022 - v3.5.0
 {{taskList
@@ -1146,7 +366,7 @@ Fixes issues [#1670](https://github.com/naturalcrit/homebrewery/issues/1670)
 ### Thursday 28/10/2022 - v3.3.1
 {{taskList
 
-##### calculuschild
+##### Calculuschild
 
 * [x] Fixes to several broken CSS styles from v3.3.0
 
@@ -1161,7 +381,7 @@ Fixes issues  [#2468](https://github.com/naturalcrit/homebrewery/issues/2468)
 ### Friday 19/10/2022 - v3.3.0
 {{taskList
 
-##### calculuschild
+##### Calculuschild
 
 * [x] Fix for tables broken by Chrome v106
 
@@ -1244,7 +464,7 @@ Fixes issues  [#2317](https://github.com/naturalcrit/homebrewery/issues/2317), [
 ### Wednesday 31/08/2022 - v3.2.1
 {{taskList
 
-##### calculuschild
+##### Calculuschild
 
 * [x] Reference Links should now work inside tables
 
@@ -1270,7 +490,7 @@ Fixes issues  [#2317](https://github.com/naturalcrit/homebrewery/issues/2317), [
 ### Saturday 27/08/2022 - v3.2.0
 {{taskList
 
-##### calculuschild
+##### Calculuschild
 
 * [x] The V3 renderer is now the default for new brews.
 
@@ -1297,7 +517,7 @@ Fixes issues  [#2317](https://github.com/naturalcrit/homebrewery/issues/2317), [
 ### Thursday 09/06/2022 - v3.1.1
 {{taskList
 
-##### calculuschild:
+##### Calculuschild:
 
 * [x] Fixed class table decorations appearing on top of the table in PDF output.
 
@@ -2014,7 +1234,7 @@ myStyle {color: black}
 ### Sunday, 29/05/2016 - v2.1.0
 - Finally added a syntax for doing spell lists. A bit in-depth about why this took so long. Essentially I'm running out of syntax to use in stardard Markdown. There are too many unique elements in the PHB-style to be mapped. I solved this earlier by stacking certain elements together (eg. an `<hr>` before a `blockquote` turns it into moster state block), but those are getting unweildly. I would like to simply wrap these in `div`s with classes, but unfortunately Markdown stops processing when within HTML blocks. To get around this I wrote my own override to the Markdown parser and lexer to process Markdown within a simple div class wrapper. This should open the door for more unique syntaxes in the future. Big step!
 - Override Ctrl+P (and cmd+P) to launch to the print page. Many people try to just print either the editing or share page to get a PDF. While this dones;t make much sense, I do get a ton of issues about it. So now if you try to do this, it'll just bring you imediately to the print page. Everybody wins!
-- The onboarding flow has also been confusing a few users (Homepage → new → save → edit page). If you edit the Homepage text now, a Call to Action to save your work will pop-up.
+- The onboarding flow has also been confusing a few users (Homepage -> new -> save -> edit page). If you edit the Homepage text now, a Call to Action to save your work will pop-up.
 - Added a 'Recently Edited' and 'Recently Viewed' nav item to the edit and share page respectively. Each will remember the last 8 items you edited or viewed and when you viewed it. Makes use of the new title attribute of brews to easy navigatation.
 - Paragraphs now indent properly after lists (thanks u/slitjen!)
 
@@ -2141,4 +1361,4 @@ Massive changelog incoming:
 
 * Added `phb.standalone.css` plus a build system for creating it
 * Added page numbers and footer text
-* Page accent now flips each page
+* Page accent now flips each page

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

client/components/Anchored.less

@@ -1,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,6 +1,7 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
+const cx = require('classnames');
 require('./combobox.less');
 
 const Combobox = createClass({
@@ -58,10 +59,10 @@ const Combobox = createClass({
 			this.props.onEntry(e);
 		});
 	},
-	handleSelect : function(value, data=value){
+	handleSelect : function(e){
 		this.setState({
-			value : value
-		}, ()=>{this.props.onSelect(data);});
+			value : e.currentTarget.getAttribute('data-value')
+		}, ()=>{this.props.onSelect(this.state.value);});
 		;
 	},
 	renderTextInput : function(){
@@ -82,7 +83,6 @@ const Combobox = createClass({
 						}
 					}}
 				/>
-				<i className='fas fa-caret-down'/>
 			</div>
 		);
 	},
@@ -93,10 +93,11 @@ const Combobox = createClass({
 			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')
+					if(suggestMethod === 'includes'){
 						return item.props[attr]?.toLowerCase().includes(this.state.value.toLowerCase());
-					if(suggestMethod === 'startsWith')
+					} else if(suggestMethod === 'startsWith'){
 						return item.props[attr]?.toLowerCase().startsWith(this.state.value.toLowerCase());
+					}
 				});
 				return children;
 			});
@@ -111,7 +112,7 @@ const Combobox = createClass({
 	},
 	render : function () {
 		const dropdownChildren = this.state.options.map((child, i)=>{
-			const clone = React.cloneElement(child, { onClick: ()=>this.handleSelect(child.props.value, child.props.data) });
+			const clone = React.cloneElement(child, { onClick: (e)=>this.handleSelect(e) });
 			return clone;
 		});
 		return (

client/components/combobox.less

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

client/components/dialog.jsx

@@ -1,31 +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(()=>{
-		blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
-	}, []);
-
-	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,340 +1,256 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./brewRenderer.less');
 const React = require('react');
-const { useState, useRef, useMemo, useEffect } = 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 HeaderNav from './headerNav/headerNav.jsx';
-import { safeHTML } from './safeHTML.js';
+const Themes = require('themes/themes.json');
 
-const PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m;
 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 pageRef = useRef(null);
-	const cleanText = safeHTML(props.contents);
-
-	useEffect(()=>{
-		if(!pageRef.current) return;
-
-		// Observer for tracking pages within the `.pages` div
-		const visibleObserver = new IntersectionObserver(
-			(entries)=>{
-				entries.forEach((entry)=>{
-					if(entry.isIntersecting)
-						props.onVisibilityChange(props.index + 1, true, false); // add page to array of visible pages.
-					else
-						props.onVisibilityChange(props.index + 1, false, false);
-				});
-			},
-			{ threshold: .3, rootMargin: '0px 0px 0px 0px'  } // detect when >30% of page is within bounds.
-		);
-
-		// Observer for tracking the page at the center of the iframe.
-		const centerObserver = new IntersectionObserver(
-			(entries)=>{
-				entries.forEach((entry)=>{
-					if(entry.isIntersecting)
-						props.onVisibilityChange(props.index + 1, true, true); // Set this page as the center page
-				});
-			},
-			{ threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center
-		);
-
-		// attach observers to each `.page`
-		visibleObserver.observe(pageRef.current);
-		centerObserver.observe(pageRef.current);
-		return ()=>{
-			visibleObserver.disconnect();
-			centerObserver.disconnect();
+const BrewRenderer = createClass({
+	displayName     : 'BrewRenderer',
+	getDefaultProps : function() {
+		return {
+			text     : '',
+			style    : '',
+			renderer : 'legacy',
+			theme    : '5ePHB',
+			lang     : '',
+			errors   : []
 		};
-	}, []);
+	},
+	getInitialState : function() {
+		let pages;
+		if(this.props.renderer == 'legacy') {
+			pages = this.props.text.split('\\page');
+		} else {
+			pages = this.props.text.split(/^\\page$/gm);
+		}
 
-	return <div className={props.className} id={`p${props.index + 1}`} data-index={props.index} ref={pageRef} style={props.style} {...props.attributes}>
-	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
-	       </div>;
-};
+		return {
+			viewablePageNumber : 0,
+			height             : 0,
+			isMounted          : false,
 
+			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>,
 
-//v=====--------------------< Brew Renderer Component >-------------------=====v//
-let renderedPages = [];
-let rawPages      = [];
+	componentWillUnmount : function() {
+		window.removeEventListener('resize', this.updateSize);
+	},
 
-const BrewRenderer = (props)=>{
-	props = {
-		text                       : '',
-		style                      : '',
-		renderer                   : 'legacy',
-		theme                      : '5ePHB',
-		lang                       : '',
-		errors                     : [],
-		currentEditorCursorPageNum : 1,
-		currentEditorViewPageNum   : 1,
-		currentBrewRendererPageNum : 1,
-		themeBundle                : {},
-		onPageChange               : ()=>{},
-		...props
-	};
+	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
+			});
+		}
+	},
 
-	const [state, setState] = useState({
-		isMounted    : false,
-		visibility   : 'hidden',
-		visiblePages : [],
-		centerPage   : 1
-	});
-
-	const [displayOptions, setDisplayOptions] = useState({
-		zoomLevel    : 100,
-		spread       : 'single',
-		startOnRight : true,
-		pageShadows  : true
-	});
-
-	const [headerState, setHeaderState] = useState(false);
-
-	const mainRef  = useRef(null);
-	const pagesRef = useRef(null);
-
-	if(props.renderer == 'legacy') {
-		rawPages = props.text.split('\\page');
-	} else {
-		rawPages = props.text.split(PAGEBREAK_REGEX_V3);
-	}
-
-	const handlePageVisibilityChange = (pageNum, isVisible, isCenter)=>{
-		setState((prevState)=>{
-			const updatedVisiblePages = new Set(prevState.visiblePages);
-			if(!isCenter)
-				isVisible ? updatedVisiblePages.add(pageNum) : updatedVisiblePages.delete(pageNum);
-
-			return {
-				...prevState,
-				visiblePages : [...updatedVisiblePages].sort((a, b)=>a - b),
-				centerPage   : isCenter ? pageNum : prevState.centerPage
-			};
+	updateSize : function() {
+		this.setState({
+			height : this.refs.main.parentNode.clientHeight,
 		});
+	},
 
-		if(isCenter)
-			props.onPageChange(pageNum);
-	};
+	handleScroll : function(e){
+		const target = e.target;
+		this.setState((prevState)=>({
+			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * prevState.pages.length)
+		}));
+	},
 
-	const isInView = (index)=>{
-		if(!state.isMounted)
-			return false;
+	shouldRender : function(pageText, index){
+		if(!this.state.isMounted) return false;
 
-		if(index == props.currentEditorCursorPageNum - 1)	//Already rendered before this step
-			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;
 
-		if(Math.abs(index - props.currentBrewRendererPageNum - 1) <= 3)
-			return true;
+		//Check for style tages
+		if(pageText.indexOf('<style>') !== -1) return true;
 
 		return false;
-	};
+	},
 
-	const renderDummyPage = (index)=>{
+	sanitizeScriptTags : function(content) {
+		return content
+			.replace(/<script/ig, '&lt;script')
+			.replace(/<\/script>/ig, '&lt;/script&gt;');
+	},
+
+	renderPageInfo : function(){
+		return <div className='pageInfo' ref='main'>
+			<div>
+				{this.props.renderer}
+			</div>
+			<div>
+				{this.state.viewablePageNumber + 1} / {this.state.pages.length}
+			</div>
+		</div>;
+	},
+
+	renderPPRmsg : function(){
+		if(!this.state.usePPR) return;
+
+		return <div className='ppr_msg'>
+			Partial Page Renderer is enabled, because your brew is so large. May affect rendering.
+		</div>;
+	},
+
+	renderDummyPage : function(index){
 		return <div className='phb page' 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 }} />;
-	};
-
-	const renderPage = (pageText, index)=>{
-
-		let styles = {
-			...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
-			// Add more conditions as needed
-		};
-		let classes    = 'page';
-		let attributes = {};
-
-		if(props.renderer == 'legacy') {
-			const html = MarkdownLegacy.render(pageText);
-
-			return <BrewPage className='page phb' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} />;
-		} else {
-			if(pageText.startsWith('\\page')) {
-				const firstLineTokens  = Markdown.marked.lexer(pageText.split('\n', 1)[0])[0].tokens;
-				const injectedTags = firstLineTokens.find((obj)=>obj.injectedTags !== undefined)?.injectedTags;
-				if(injectedTags) {
-					styles     = { ...styles, ...injectedTags.styles };
-					styles     = _.mapKeys(styles, (v, k) => k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React
-					classes    = [classes, injectedTags.classes].join(' ').trim();
-					attributes = injectedTags.attributes;
-				}
-				pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line
-			}
+	renderStyle : function() {
+		if(!this.props.style) return;
+		const cleanStyle = this.sanitizeScriptTags(this.props.style);
+		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.sanitizeScriptTags(this.props.style)}\n} </style>` }} />;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${cleanStyle} </style>` }} />;
+	},
 
+	renderPage : function(pageText, index){
+		const cleanPageText = this.sanitizeScriptTags(pageText);
+		if(this.props.renderer == 'legacy')
+			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(cleanPageText) }} 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);
-
-			return <BrewPage className={classes} index={index} key={index} contents={html} style={styles} attributes={attributes} onVisibilityChange={handlePageVisibilityChange} />;
+			return (
+				<div className='page' id={`p${index + 1}`} key={index} >
+					<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(cleanPageText) }} />
+				</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 scrollToHash = (hash)=>{
-		if(!hash) return;
-
-		const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
-		let anchor = iframeDoc.querySelector(hash);
-
-		if(anchor) {
-			anchor.scrollIntoView({ behavior: 'smooth' });
-		} else {
-			// Use MutationObserver to wait for the element if it's not immediately available
-			new MutationObserver((mutations, obs)=>{
-				anchor = iframeDoc.querySelector(hash);
-				if(anchor) {
-					anchor.scrollIntoView({ behavior: 'smooth' });
-					obs.disconnect();
-				}
-			}).observe(iframeDoc, { childList: true, subtree: true });
-		}
-	};
-
-	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
-		scrollToHash(window.location.hash);
+		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
+	emitClick : function(){
+		// console.log('iFrame clicked');
 		if(!window || !document) return;
 		document.dispatchEvent(new MouseEvent('click'));
-	};
+	},
 
-	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(), [props.text, displayOptions]);
-
-	return (
-		<>
-			{/*render dummy page while iFrame is mounting.*/}
-			{!state.isMounted
-				? <div className='brewRenderer'>
-					<div className='pages'>
-						{renderDummyPage(1)}
+	render : function(){
+		//render in iFrame so broken code doesn't crash the site.
+		//Also render dummy page while iframe is mounting.
+		const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
+		const themePath    = this.props.theme ?? '5ePHB';
+		const baseThemePath = Themes[rendererPath][themePath].baseTheme;
+		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>
-
-			<ToolBar displayOptions={displayOptions} onDisplayOptionsChange={handleDisplayOptionsChange} visiblePages={state.visiblePages.length > 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length} headerState={headerState} setHeaderState={setHeaderState}/>
-
-			{/*render in iFrame so broken code doesn't crash the site.*/}
-			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
-				style={{ width: '100%', height: '100%', visibility: state.visibility }}
-				contentDidMount={frameDidMount}
-				onClick={()=>{emitClick();}}
-			>
-				<div className={`brewRenderer ${global.config.deployment && 'deployment'}`}
-					onKeyDown={handleControlKeys}
-					tabIndex={-1}
-					style={ styleObject }
+				<Frame id='BrewRenderer' initialContent={this.state.initialContent}
+					style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
+					contentDidMount={this.frameDidMount}
+					onClick={()=>{this.emitClick();}}
 				>
+					<div className={'brewRenderer'}
+						onScroll={this.handleScroll}
+						style={{ height: this.state.height }}>
 
-					{/* Apply CSS from Style tab and render pages from Markdown tab */}
-					{state.isMounted
-						&&
-						<>
-							{renderedStyle}
-							<div className={`pages ${displayOptions.startOnRight ? 'recto' : 'verso'}	${displayOptions.spread}`} lang={`${props.lang || 'en'}`} style={pagesStyle} ref={pagesRef}>
-								{renderedPages}
-							</div>
-						</>
-					}
-				</div>
-				{headerState ? <HeaderNav ref={pagesRef} /> : <></>}
-			</Frame>
-		</>
-	);
-};
+						<ErrorBar errors={this.props.errors} />
+						<div className='popups'>
+							<RenderWarnings />
+							<NotificationPopup />
+						</div>
+						<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
+						{baseThemePath &&
+							<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
+						}
+						<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
+						{/* Apply CSS from Style tab and render pages from Markdown tab */}
+						{this.state.isMounted
+							&&
+							<>
+								{this.renderStyle()}
+								<div className='pages' ref='pages' lang={`${this.props.lang || 'en'}`}>
+									{this.renderPages()}
+								</div>
+							</>
+						}
+					</div>
+				</Frame>
+				{this.renderPageInfo()}
+				{this.renderPPRmsg()}
+			</React.Fragment>
+		);
+	}
+});
 
 module.exports = BrewRenderer;

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,89 +1,46 @@
 @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: safe center;
-			&.recto .page:first-child {
-				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
-				// todo: add a checkbox to toggle this setting
-				grid-column-start: 2; 
-			}
-			& :where(.page) {
-				margin-left: unset !important;
-				margin-right: unset !important;
-			}
-		}
-
-		&.flow {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 10px;
-			justify-content: safe center;
-			& :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;
+	background-color : #333;
+	font-size        : 10px;
+	font-weight      : 800;
+	color            : white;
+	div {
+		display: inline-block;
+		padding          : 8px 10px;
+		&:not(:last-child){
+			border-right: 1px solid #666;
 		}
 	}
-	.headerNav {
-		visibility: hidden;
-	}
-}
+}
+.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

@@ -1,53 +1,76 @@
 require('./errorBar.less');
 const React = require('react');
+const createClass = require('create-react-class');
+const _     = require('lodash');
+const cx    = require('classnames');
 
-import Dialog from '../../../components/dialog.jsx';
+const ErrorBar = createClass({
+	displayName     : 'ErrorBar',
+	getDefaultProps : function() {
+		return {
+			errors : []
+		};
+	},
 
-const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
+	hasOpenError  : false,
+	hasCloseError : false,
+	hasMatchError : false,
 
-const ErrorBar = (props)=>{
-	if(!props.errors.length) return null;
-	let hasOpenError = false, hasCloseError = false, hasMatchError = false;
+	renderErrors : function(){
+		this.hasOpenError = false;
+		this.hasCloseError = false;
+		this.hasMatchError = false;
 
-	props.errors.map((err)=>{
-		if(err.id === 'OPEN')     hasOpenError  = true;
-		if(err.id === 'CLOSE')    hasCloseError = true;
-		if(err.id === 'MISMATCH') hasMatchError = true;
-	});
 
-	const renderErrors = ()=>(
-		<ul>
-			{props.errors.map((err, idx)=>{
-				return <li key={idx}>
-					Line {err.line} : {err.text}, '{err.type}' tag
-				</li>;
-			})}
-		</ul>
-	);
+		const errors = _.map(this.props.errors, (err, idx)=>{
+			if(err.id == 'OPEN') this.hasOpenError = true;
+			if(err.id == 'CLOSE') this.hasCloseError = true;
+			if(err.id == 'MISMATCH') this.hasMatchError = true;
+			return <li key={idx}>
+				Line {err.line} : {err.text}, '{err.type}' tag
+			</li>;
+		});
 
-	const renderProtip = ()=>(
-		<div className='protips'>
+		return <ul>{errors}</ul>;
+	},
+
+	renderProtip : function(){
+		const msg = [];
+		if(this.hasOpenError){
+			msg.push(<div>
+				An unmatched opening tag means there's an opened tag that isn't closed. You need to close your tags, like this {'</div>'}. Make sure to match types!
+			</div>);
+		}
+
+		if(this.hasCloseError){
+			msg.push(<div>
+				An unmatched closing tag means you closed a tag without opening it. Either remove it, or check to where you think you opened it.
+			</div>);
+		}
+
+		if(this.hasMatchError){
+			msg.push(<div>
+				A type mismatch means you closed a tag, but the last open tag was a different type.
+			</div>);
+		}
+		return <div className='protips'>
 			<h4>Protips!</h4>
-			{hasOpenError  && <div>Unmatched opening tag. Close your tags, like this {'</div>'}. Match types!</div>}
-			{hasCloseError && <div>Unmatched closing tag. Either remove it or check where it was opened.</div>}
-			{hasMatchError && <div>Type mismatch. Closed a tag with a different type.</div>}
-		</div>
-	);
+			{msg}
+		</div>;
+	},
 
-	return (
-		<Dialog className='errorBar' closeText={DISMISS_BUTTON} >
-			<div>
-				<i className='fas fa-exclamation-triangle' />
-				<h2> There are HTML errors in your markup</h2>
-				<small>
-					If these aren't fixed your brew will not render properly when you print it to PDF or share it
-				</small>
-				{renderErrors()}
-			</div>
+	render : function(){
+		if(!this.props.errors.length) return null;
+
+		return <div className='errorBar'>
+			<i className='fas fa-exclamation-triangle' />
+			<h3> There are HTML errors in your markup</h3>
+			<small>If these aren't fixed your brew will not render properly when you print it to PDF or share it</small>
+			{this.renderErrors()}
 			<hr />
-			{renderProtip()}
-		</Dialog>
-	);
-};
+			{this.renderProtip()}
+		</div>;
+	}
+});
 
 module.exports = ErrorBar;

client/homebrew/brewRenderer/errorBar/errorBar.less

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

client/homebrew/brewRenderer/headerNav/headerNav.jsx

@@ -1,106 +0,0 @@
-require('./headerNav.less');
-
-import * as React from 'react';
-import * as _ from 'lodash';
-
-
-const MAX_TEXT_LENGTH = 40;
-
-const HeaderNav = React.forwardRef(({}, pagesRef)=>{
-
-	const renderHeaderLinks = ()=>{
-		if(!pagesRef.current) return;
-
-		const selector = [
-			'.pages > .page',									// All page elements, which by definition have IDs
-			'.page:not(:has(.toc)) > [id]',						// All direct children of non-ToC .page with an ID (Legacy)
-			'.page:not(:has(.toc)) > .columnWrapper > [id]',	// All direct children of non-ToC .page > .columnWrapper with an ID (V3)
-			'.page:not(:has(.toc)) h2',							// All non-ToC H2 titles, like Monster frame titles
-		];
-		const elements = pagesRef.current.querySelectorAll(selector.join(','));
-		if(!elements) return;
-		const navList = [];
-
-		// navList is a list of objects which have the following structure:
-		// {
-		// 		depth		: how deeply indented the item should be
-		// 		text		: the text to display in the nav link
-		// 		link		: the hyperlink to navigate to when clicked
-		// 		className	: [optional] the class to apply to the nav link for styling
-		// }
-
-		elements.forEach((el)=>{
-			if(el.className.match(/\bpage\b/)) {
-				let text = `Page ${el.id.slice(1)}`;	// The ID of a page *should* always be equal to `p` followed by the page number
-				if(el.querySelector('.toc')){			// If the page contains a table of contents, add "- Contents" to the display text
-					text += ' - Contents';
-				};
-				navList.push({
-					depth     : 0,						// Pages are always at the least indented level
-					text      : text,
-					link      : el.id,
-					className : 'pageLink'
-				});
-				return;
-			}
-			if(el.localName.match(/^h[1-6]/)){			// Header elements H1 through H6
-				navList.push({
-					depth : el.localName[1],			// Depth is set by the header level
-					text  : el.textContent,				// Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
-					link  : el.id
-				});
-				return;
-			}
-			navList.push({
-				depth : 7,								// All unmatched elements with IDs are set to the maximum depth (7)
-				text  : el.textContent,					// Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
-				link  : el.id
-			});
-		});
-
-		return _.map(navList, (navItem, index)=>{
-			return <HeaderNavItem {...navItem} key={index} />;
-		});
-
-	};
-
-	return <nav className='headerNav'>
-		<ul>
-			{renderHeaderLinks()}
-		</ul>
-	</nav>;
-}
-);
-
-const HeaderNavItem = ({ link, text, depth, className })=>{
-
-	const trimString = (text, prefixLength = 0)=>{
-		// Sanity check nav link strings
-		let output = text;
-
-		// If the string has a line break, only use the first line
-		if(text.indexOf('\n')){
-			output = text.split('\n')[0];
-		}
-
-		// Trim unecessary spaces from string
-		output = output.trim();
-
-		// Reduce excessively long strings
-		const maxLength = MAX_TEXT_LENGTH - prefixLength;
-		if(output.length > maxLength){
-			return `${output.slice(0, maxLength).trim()}...`;
-		}
-		return output;
-	};
-
-	if(!link || !text) return;
-
-	return <li>
-		<a href={`#${link}`} target='_self' className={`depth-${depth} ${className ?? ''}`}>
-			{trimString(text, depth)}
-		</a>
-	</li>;
-};
-
-export default HeaderNav;

client/homebrew/brewRenderer/headerNav/headerNav.less

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

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,65 +1,84 @@
 require('./notificationPopup.less');
-import React, { useEffect, useState } from 'react';
-import request from '../../utils/request-middleware.js';
-import Markdown from 'naturalcrit/markdown.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_notification12-04-23';
 
-const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
+const NotificationPopup = createClass({
+	displayName     : 'NotificationPopup',
+	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>Broken default logo on <b>CoverPage</b> </em> <br />
+						If you have used the Cover Page snippet and notice the Naturalcrit
+						logo is showing as a broken image, this is due to some small tweaks
+						of this BETA feature. To fix the logo in your cover page, rename
+						the image link <b>"/assets/naturalCritLogoRed.svg"</b>. Remember
+						that any snippet marked "BETA" may have a similar change in the
+						future as we encounter any bugs or reworks.
+					</li>
 
-const NotificationPopup = ()=>{
-	const [notifications, setNotifications] = useState([]);
-	const [dissmissKeyList, setDismissKeyList] = useState([]);
-	const [error, setError] = useState(null);
+					<li key='googleDriveFolder'>
+						<em>Don't delete your Homebrewery folder on Google Drive!</em> <br />
+						We have had several reports of users losing their brews, not realizing
+						that they had deleted the files on their Google Drive. If you have a Homebrewery folder
+						on your Google Drive with *.txt files inside, <em>do not delete it</em>!
+						We cannot help you recover files that you have deleted from your own
+						Google Drive.
+					</li>
 
-	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}`);
+					<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 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: Markdown.render(notification.text) }}></p>
-			</li>
-		));
-	};
-
-	if(!notifications.length) return;
-	return <Dialog className='notificationPopup' dismisskeys={dissmissKeyList} closeText={DISMISS_BUTTON} >
-		<div className='header'>
-			<i className='fas fa-info-circle info'></i>
-			<h3>Notice</h3>
-			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
-		</div>
-		<ul>
-			{renderNotificationsList()}
-		</ul>
-	</Dialog>;
-};
+		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,93 +1,64 @@
-.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.9em;
+		font-size           : 0.8em;
 		list-style-position : outside;
 		list-style-type     : disc;
-		li {
-			padding-left : 1em;
-			margin-top   : 1.5em;
-			font-size    : 0.9em;
-			line-height  : 1.5em;
-			em {
-				font-weight    : 800; 
-				text-transform : capitalize;
-			}
-			li {
-				margin-top      : 0;
-				line-height     : 1.2em; 
-				list-style-type : square;
+		li{
+			font-size   : 0.8em;
+			line-height : 1.4em;
+			margin-top  : 1.4em;
+			em{
+				font-weight : 800;
 			}
 		}
-		ul ul,ol ol,ul ol,ol ul {
-			margin-bottom : 0px;
-			margin-left   : 1.5em;
-		}
 	}
-
-	/* Markdown styling */
-	code {
-		padding          : 0.1em 0.5em;
-		font-family      : 'Courier New', 'Courier', monospace;
-		overflow-wrap    : break-word;
-		white-space      : pre-wrap;
-		background       : #08115A;
-		border-radius    : 2px;
-	}
-	pre code {
-		display          : inline-block;
-		width            : 100%;
-	}
-	.blank {
-		height           : 1em;
-		margin-top       : 0;
-		& + * { margin-top : 0; }
-	}
-}
+}

client/homebrew/brewRenderer/safeHTML.js

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

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -1,236 +0,0 @@
-/* eslint-disable max-lines */
-require('./toolBar.less');
-const React = require('react');
-const { useState, useEffect } = React;
-const _ = require('lodash');
-
-import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
-
-const MAX_ZOOM = 300;
-const MIN_ZOOM = 10;
-
-const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages, headerState, setHeaderState })=>{
-
-	const [pageNum, setPageNum]     = useState(1);
-	const [toolsVisible, setToolsVisible] = useState(true);
-
-	useEffect(()=>{
-		// format multiple visible pages as a range (e.g. "150-153")
-		const pageRange = visiblePages.length === 1 ? `${visiblePages[0]}` : `${visiblePages[0]} - ${visiblePages.at(-1)}`;
-		setPageNum(pageRange);
-	}, [visiblePages]);
-
-	const handleZoomButton = (zoom)=>{
-		handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
-	};
-
-	const handleOptionChange = (optionKey, newValue)=>{
-		onDisplayOptionsChange({ ...displayOptions, [optionKey]: newValue });
-	};
-
-	const handlePageInput = (pageInput)=>{
-		if(/[0-9]/.test(pageInput))
-			setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
-	};
-
-	// scroll to a page, used in the Prev/Next Page buttons.
-	const scrollToPage = (pageNumber)=>{
-		if(typeof pageNumber !== 'number') return;
-		pageNumber = _.clamp(pageNumber, 1, totalPages);
-		const iframe = document.getElementById('BrewRenderer');
-		const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
-		const page = brewRenderer?.querySelector(`#p${pageNumber}`);
-		page?.scrollIntoView({ block: 'start' });
-	};
-
-	const calculateChange = (mode)=>{
-		const iframe = document.getElementById('BrewRenderer');
-		const iframeWidth = iframe.getBoundingClientRect().width;
-		const iframeHeight = iframe.getBoundingClientRect().height;
-		const pages = iframe.contentWindow.document.getElementsByClassName('page');
-
-		let desiredZoom = 0;
-
-		if(mode == 'fill'){
-			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
-			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
-
-			desiredZoom = (iframeWidth / widestPage) * 100;
-
-		} else if(mode == 'fit'){
-			let minDimRatio;
-			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
-			if(displayOptions.spread === 'facing')
-				minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth / 2), Infinity);    // if 'facing' spread, fit two pages in view
-			else
-				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'>
-			<div className='toggleButton'>
-				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
-				<button title={`${headerState ? 'Hide' : 'Show'} Header Navigation`} onClick={()=>{setHeaderState(!headerState);}}><i className='fas fa-rectangle-list' /></button>
-			</div>
-			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
-			<div className='group' role='group' aria-label='Zoom' aria-hidden={!toolsVisible}>
-				<button
-					id='fill-width'
-					className='tool'
-					title='Set zoom to fill preview with one page'
-					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fill'))}
-				>
-					<i className='fac fit-width' />
-				</button>
-				<button
-					id='zoom-to-fit'
-					className='tool'
-					title='Set zoom to fit entire page in preview'
-					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fit'))}
-				>
-					<i className='fac zoom-to-fit' />
-				</button>
-				<button
-					id='zoom-out'
-					className='tool'
-					onClick={()=>handleZoomButton(displayOptions.zoomLevel - 20)}
-					disabled={displayOptions.zoomLevel <= MIN_ZOOM}
-					title='Zoom Out'
-				>
-					<i className='fas fa-magnifying-glass-minus' />
-				</button>
-				<input
-					id='zoom-slider'
-					className='range-input tool hover-tooltip'
-					type='range'
-					name='zoom'
-					title='Set Zoom'
-					list='zoomLevels'
-					min={MIN_ZOOM}
-					max={MAX_ZOOM}
-					step='1'
-					value={displayOptions.zoomLevel}
-					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
-				/>
-				<datalist id='zoomLevels'>
-					<option value='100' />
-				</datalist>
-
-				<button
-					id='zoom-in'
-					className='tool'
-					onClick={()=>handleZoomButton(displayOptions.zoomLevel + 20)}
-					disabled={displayOptions.zoomLevel >= MAX_ZOOM}
-					title='Zoom In'
-				>
-					<i className='fas fa-magnifying-glass-plus' />
-				</button>
-			</div>
-
-			{/*v=====----------------------< Spread Controls >---------------------=====v*/}
-			<div className='group' role='group' aria-label='Spread' aria-hidden={!toolsVisible}>
-				<div className='radio-group' role='radiogroup'>
-					<button role='radio'
-						id='single-spread'
-						className='tool'
-						title='Single Page'
-						onClick={()=>{handleOptionChange('spread', '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(_.min(visiblePages) - visiblePages.length)}
-					disabled={visiblePages.includes(1)}
-				>
-					<i className='fas fa-arrow-left'></i>
-				</button>
-
-				<div className='tool'>
-					<input
-						id='page-input'
-						className='text-input'
-						type='text'
-						name='page'
-						title='Current page(s) in view'
-						inputMode='numeric'
-						pattern='[0-9]'
-						value={pageNum}
-						onClick={(e)=>e.target.select()}
-						onChange={(e)=>handlePageInput(e.target.value)}
-						onBlur={()=>scrollToPage(pageNum)}
-						onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
-						style={{ width: `${pageNum.length}ch` }}
-					/>
-					<span id='page-count' title='Total Page Count'>/ {totalPages}</span>
-				</div>
-
-				<button
-					id='next-page'
-					className='tool'
-					type='button'
-					title='Next Page(s)'
-					onClick={()=>scrollToPage(_.max(visiblePages) + 1)}
-					disabled={visiblePages.includes(totalPages)}
-				>
-					<i className='fas fa-arrow-right'></i>
-				</button>
-			</div>
-		</div>
-	);
-};
-
-module.exports = ToolBar;

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -1,189 +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          : inherit;
-		background     : #3B3B3B;
-		border         : none;
-		&:focus { outline : 1px solid #D3D3D3; }
-
-		// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
-		&.range-input {
-			padding      : 2px 0;
-			color        : #D3D3D3;
-			accent-color : #D3D3D3;
-  
-			&::-webkit-slider-thumb, &::-moz-range-thumb { 
-				width            : 5px;
-				height           : 5px;
-				cursor           : ew-resize;
-				outline          : none;
-			}
-
-			&.hover-tooltip[value]:hover::after {
-				position         : absolute;
-				bottom           : -30px;
-				left             : 50%;
-				z-index          : 1;
-				display          : grid;
-				place-items      : center;
-				width            : 4ch;
-				height           : 1.2lh;
-				pointer-events   : none;
-				content          : attr(value);
-				background-color : #555555;
-				border           : 1px solid #A1A1A1;
-				transform        : translate(-50%, 50%);
-			}
-		}
-
-		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
-		&#page-input {
-			min-width    : 5ch;
-			margin-right : 1ch;
-			text-align   : center;
-		}
-	}
-
-	button {
-		box-sizing       : border-box;
-		display          : flex;
-		align-items      : center;
-		justify-content  : center;
-		width            : auto;
-		min-width        : 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            : 92px;
-		overflow         : hidden;
-		background-color : unset;
-		opacity          : 0.5;
-		transition       : all 0.3s ease;
-		& > *:not(.toggleButton) {
-			opacity    : 0;
-			transition : all 0.2s ease;
-		}
-	}
-}
-
-.toggleButton {
-	position  : absolute;
-	left      : 0;
-	z-index   : 5;
-	width     : 32px;
-	min-width : unset;
-	height    : 100%;
-	display   : flex;
-}

client/homebrew/editor/editor.jsx

@@ -1,19 +1,16 @@
-/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
+/*eslint max-lines: ["warn", {"max": 300, "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 PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m;
-const SNIPPETBAR_HEIGHT  = 25;
+const SNIPPETBAR_HEIGHT = 25;
 const DEFAULT_STYLE_TEXT = dedent`
 				/*=======---  Example CSS styling  ---=======*/
 				/* Any CSS here will apply to your document! */
@@ -22,7 +19,6 @@ const DEFAULT_STYLE_TEXT = dedent`
 					color: black;
 				}`;
 
-let isJumping = false;
 
 const Editor = createClass({
 	displayName     : 'Editor',
@@ -38,48 +34,23 @@ const Editor = createClass({
 			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() {
@@ -87,95 +58,57 @@ const Editor = createClass({
 	},
 
 	componentDidUpdate : function(prevProps, prevState, snapshot) {
-
 		this.highlightCustomMarkdown();
-		if(prevProps.moveBrew !== this.props.moveBrew)
+		if(prevProps.moveBrew !== this.props.moveBrew) {
 			this.brewJump();
-
-		if(prevProps.moveSource !== this.props.moveSource)
+		};
+		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(1, cursor.line + 1);
-		const pageRegex = this.props.brew.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
-		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
-		this.props.onCursorPageChange(currentPage);
-	},
-
-	updateCurrentViewPage : function(topScrollLine) {
-		const lines = this.props.brew.text.split('\n').slice(1, topScrollLine + 1);
-		const pageRegex = this.props.brew.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
-		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
-		this.props.onViewPageChange(currentPage);
-	},
-
 	handleInject : function(injectText){
-		this.codeEditor.current?.injectText(injectText, false);
+		this.refs.codeEditor?.injectText(injectText, false);
 	},
 
 	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.refs.codeEditor.getCursorPosition().line + 1);
+		return _.reduce(lines, (r, line)=>{
+			if(
+				(this.props.renderer == 'legacy' && line.indexOf('\\page') !== -1)
+				||
+				(this.props.renderer == 'V3' && line.match(/^\\page$/))
+			) 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
-
-				const foldLines = [];
-
 				//reset custom text styles
-				const customHighlights = codeMirror.getAllMarks().filter((mark)=>{
-					// Record details of folded sections
-					if(mark.__isFold) {
-						const fold = mark.find();
-						foldLines.push({ from: fold.from?.line, to: fold.to?.line });
-					}
-					return !mark.__isFold;
-				}); //Don't undo code folding
-
+				const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding
 				for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
 
-				let editorPageCount = 1; // start page count from page 1
+				let editorPageCount = 2; // start page count from page 2
 
 				_.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{
 
@@ -184,17 +117,9 @@ const Editor = createClass({
 					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(PAGEBREAK_REGEX_V3))) {
-
-						if(lineNumber > 0)      // Since \page is optional on first line of document,
-							editorPageCount += 1; // don't use it to increment page count; stay at 1
+				     (this.props.renderer == 'V3'     && line.match(/^\\page$/))) {
 
 						// add back the original class 'background' but also add the new class '.pageline'
 						codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
@@ -203,6 +128,8 @@ const Editor = createClass({
 							textContent : editorPageCount
 						});
 						codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
+
+						editorPageCount += 1;
 					};
 
 					// New Codemirror styling for V3 renderer
@@ -211,45 +138,9 @@ const Editor = createClass({
 							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;
+							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' });
@@ -257,7 +148,7 @@ const Editor = createClass({
 						}
 						// Highlight inline spans {{content}}
 						if(line.includes('{{') && line.includes('}}')){
-							const regex = /{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *|}}/g;
+							const regex = /{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *|}}/g;
 							let match;
 							let blockCount = 0;
 							while ((match = regex.exec(line)) != null) {
@@ -276,145 +167,92 @@ const Editor = createClass({
 							// Highlight block divs {{\n Content \n}}
 							let endCh = line.length+1;
 
-							const match = line.match(/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/);
+							const match = line.match(/^ *{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *$|^ *}}$/);
 							if(match)
 								endCh = match.index+match[0].length;
 							codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
 						}
-
-						// Emojis
-						if(line.match(/:[^\s:]+:/g)) {
-							let startIndex = line.indexOf(':');
-							const emojiRegex = /:[^\s:]+:/gy;
-
-							while (startIndex >= 0) {
-								emojiRegex.lastIndex = startIndex;
-								const match = emojiRegex.exec(line);
-								if(match) {
-									let tokens = Markdown.marked.lexer(match[0]);
-									tokens = tokens[0].tokens.filter((t)=>t.type == 'emoji');
-									if(!tokens.length)
-										return;
-
-									const startPos = { line: lineNumber, ch: match.index };
-									const endPos   = { line: lineNumber, ch: match.index + match[0].length };
-
-									// Iterate over conflicting marks and clear them
-									const marks = codeMirror.findMarks(startPos, endPos);
-									marks.forEach(function(marker) {
-										if(!marker.__isFold) marker.clear();
-									});
-									codeMirror.markText(startPos, endPos, { className: 'emoji' });
-								}
-								startIndex = line.indexOf(':', Math.max(startIndex + 1, emojiRegex.lastIndex));
-							}
-						}
 					}
 				});
 			});
 		}
 	},
 
-	brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){
-		if(!window || !this.isText() || isJumping)
-			return;
-
-		// Get current brewRenderer scroll position and calculate target position
+	brewJump : function(targetPage=this.getCurrentPage()){
+		if(!window) return;
+		// console.log(`Scroll to: p${targetPage}`);
 		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 interimPos = targetPos >= 0 ? -30 : 30;
 
-		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
+		const bounceDelay = 100;
+		const scrollDelay = 500;
+
+		if(!this.throttleBrewMove) {
+			this.throttleBrewMove = _.throttle((currentPos, interimPos, targetPos)=>{
+				brewRenderer.scrollTo({ top: currentPos + interimPos, behavior: 'smooth' });
+				setTimeout(()=>{
+					brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
+				}, bounceDelay);
+			}, scrollDelay, { leading: true, trailing: false });
 		};
+		this.throttleBrewMove(currentPos, interimPos, targetPos);
 
-		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' });
-		}
+		// const hashPage = (page != 1) ? `p${page}` : '';
+		// window.location.hash = hashPage;
 	},
 
-	sourceJump : function(targetPage=this.props.currentBrewRendererPageNum, smooth=true){
-		if(!this.isText() || isJumping)
-			return;
+	sourceJump : function(targetLine=null){
+		if(this.isText()) {
+			if(targetLine == null) {
+				targetLine = 0;
 
-		const textSplit  = this.props.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
-		const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit);
-		const targetLine = textString.match('\n') ? textString.split('\n').length - 1 : -1;
+				const pageCollection = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('page');
+				const brewRendererHeight = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0).getBoundingClientRect().height;
 
-		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);
+				let currentPage = 1;
+				for (const page of pageCollection) {
+					if(page.getBoundingClientRect().bottom > (brewRendererHeight / 2)) {
+						currentPage = parseInt(page.id.slice(1)) || 1;
+						break;
+					}
 				}
-			}, 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');
+
+				const textSplit = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/;
+				const textString = this.props.brew.text.split(textSplit).slice(0, currentPage-1).join(textSplit);
+				const textPosition = textString.length;
+				const lineCount = textString.match('\n') ? textString.slice(0, textPosition).split('\n').length : 0;
+
+				targetLine = lineCount - 1; //Scroll to `\page`, which is one line back.
+
+				let currentY = this.refs.codeEditor.codeMirror.getScrollInfo().top;
+				let targetY  = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
+
+				//Scroll 1/10 of the way every 10ms until 1px off.
+				const incrementalScroll = setInterval(()=>{
+					currentY += (targetY - currentY) / 10;
+					this.refs.codeEditor.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.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
+
+					// End when close enough
+					if(Math.abs(targetY - currentY) < 1) {
+						this.refs.codeEditor.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+						this.refs.codeEditor.setCursorPosition({ line: targetLine + 1, ch: 0 });
+						this.refs.codeEditor.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+						clearInterval(incrementalScroll);
+					}
+				}, 10);
+			}
 		}
 	},
 
 	//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
-		});
+		this.refs.codeEditor?.updateSize();
 	},
 
 	//Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory
@@ -426,25 +264,23 @@ const Editor = createClass({
 		if(this.isText()){
 			return <>
 				<CodeEditor key='codeEditor'
-					ref={this.codeEditor}
+					ref='codeEditor'
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.text}
 					onChange={this.props.onTextChange}
-					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent} />
+					rerenderParent={this.rerenderParent}/>
 			</>;
 		}
 		if(this.isStyle()){
 			return <>
 				<CodeEditor key='codeEditor'
-					ref={this.codeEditor}
+					ref='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}
+					enableFolding={false}
 					rerenderParent={this.rerenderParent} />
 			</>;
 		}
@@ -457,35 +293,26 @@ const Editor = createClass({
 				<MetadataEditor
 					metadata={this.props.brew}
 					onChange={this.props.onMetaChange}
-					reportError={this.props.reportError}
-					userThemes={this.props.userThemes}/>
+					reportError={this.props.reportError}/>
 			</>;
 		}
 	},
 
 	redo : function(){
-		return this.codeEditor.current?.redo();
+		return this.refs.codeEditor?.redo();
 	},
 
 	historySize : function(){
-		return this.codeEditor.current?.historySize();
+		return this.refs.codeEditor?.historySize();
 	},
 
 	undo : function(){
-		return this.codeEditor.current?.undo();
-	},
-
-	foldCode : function(){
-		return this.codeEditor.current?.foldAllCode();
-	},
-
-	unfoldCode : function(){
-		return this.codeEditor.current?.unfoldAllCode();
+		return this.refs.codeEditor?.undo();
 	},
 
 	render : function(){
 		return (
-			<div className='editor' ref={this.editor}>
+			<div className='editor' ref='main'>
 				<SnippetBar
 					brew={this.props.brew}
 					view={this.state.view}
@@ -496,15 +323,8 @@ const Editor = createClass({
 					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}
-				/>
+					cursorPos={this.refs.codeEditor?.getCursorPosition() || {}} />
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/editor.less

@@ -1,106 +1,65 @@
-@import 'themes/codeMirror/customEditorStyles.less';
-.editor {
+
+.editor{
 	position : relative;
 	width    : 100%;
-	container: editor / inline-size;
 
-	.codeEditor {
+	.codeEditor{
 		height            : 100%;
-		.pageLine {
+		.pageLine{
 			background : #33333328;
-			border-top : #333399 solid 1px;
+			border-top : #339 solid 1px;
 		}
-		.editor-page-count {
-			float : right;
+		.editor-page-count{
 			color : grey;
+			float : right;
 		}
-		.columnSplit {
-			font-style        : italic;
-			color             : grey;
-			background-color  : fade(#229999, 15%);
-			border-bottom     : #229999 solid 1px;
+		.columnSplit{
+			font-style 			: italic;
+			color 				: grey;
+			background-color 	: fade(#299, 15%);
+			border-bottom    	: #299 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:not(.cm-comment){
+			color 		: purple;
 			font-weight : bold;
-			color       : purple;
 			//font-style: italic;
 		}
-		.inline-block:not(.cm-comment) {
+		.inline-block:not(.cm-comment){
+			color 		: red;
 			font-weight : bold;
-			color       : red;
 			//font-style: italic;
 		}
-		.injection:not(.cm-comment) {
-			font-weight : bold;
+		.injection:not(.cm-comment){
 			color       : green;
+			font-weight : bold;
 		}
-		.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');
+	.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");
 	}
 
-	.editorToolbar {
-		position  : absolute;
-		top       : 5px;
-		left      : 50%;
-		z-index   : 9;
-		font-size : 13px;
-		color     : black;
-		span { padding : 2px 5px; }
+	.editorToolbar{
+		position: absolute;
+		top: 5px;
+		left: 50%;
+		color: black;
+		font-size: 13px;
+		z-index: 9;
+		span {
+			padding: 2px 5px;
+		}
 	}
 
 }

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -3,11 +3,11 @@ require('./metadataEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-import request from '../../utils/request-middleware.js';
+const cx    = require('classnames');
+const request = require('../../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 StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
 
 const Themes = require('themes/themes.json');
 const validations = require('./validations.js');
@@ -28,7 +28,6 @@ const MetadataEditor = createClass({
 		return {
 			metadata : {
 				editId      : null,
-				shareId     : null,
 				title       : '',
 				description : '',
 				thumbnail   : '',
@@ -100,7 +99,7 @@ const MetadataEditor = createClass({
 			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({
@@ -112,7 +111,7 @@ const MetadataEditor = createClass({
 	handleTheme : function(theme){
 		this.props.metadata.renderer = theme.renderer;
 		this.props.metadata.theme    = theme.path;
-		this.props.onChange(this.props.metadata, 'theme');
+		this.props.onChange(this.props.metadata);
 	},
 
 	handleLanguage : function(languageCode){
@@ -193,42 +192,37 @@ const MetadataEditor = createClass({
 	renderThemeDropdown : function(){
 		if(!global.enable_themes) 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>
+			return _.map(_.values(Themes[renderer]), (theme)=>{
+				return <div className='item' key={''} onClick={()=>this.handleTheme(theme)} title={''}>
+					{`${theme.renderer} : ${theme.name}`}
+					<img src={`/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`}/>
 					<div className='preview'>
-						<h6>{theme.name} preview</h6>
-						<img src={preview}/>
+						<h6>{`${theme.name}`} preview</h6>
+						<img src={`/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`}/>
 					</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}` };
+		const currentTheme = Themes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme];
 		let dropdown;
 
-		if(currentRenderer == 'legacy') {
+		if(this.props.metadata.renderer == '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>
+					<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)}
+					<div>
+						{`${_.upperFirst(currentTheme.renderer)} : ${currentTheme.name}`} <i className='fas fa-caret-down'></i>
+					</div>
+					{/*listThemes('Legacy')*/}
+					{listThemes('V3')}
 				</Nav.dropdown>;
 		}
 
@@ -244,9 +238,9 @@ const MetadataEditor = createClass({
 			return _.map(langCodes.sort(), (code, index)=>{
 				const localName = new Intl.DisplayNames([code], { type: 'language' });
 				const englishName = new Intl.DisplayNames('en', { type: 'language' });
-				return <div className='item' title={englishName.of(code)} key={`${index}`} value={code} detail={localName.of(code)}>
-					{code}
-					<div className='detail'>{localName.of(code)}</div>
+				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>;
 			});
 		};
@@ -269,7 +263,7 @@ const MetadataEditor = createClass({
 					autoSuggest={{
 						suggestMethod           : 'startsWith',
 						clearAutoSuggestOnClick : true,
-						filterOn                : ['value', 'detail', 'title']
+						filterOn                : ['data-value', 'data-detail', 'title']
 					}}
 				>
 				</Combobox>
@@ -304,14 +298,17 @@ 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='/legacy' target='_blank' rel='noopener noreferrer'>
+					Click here to see the demo page for the old Legacy renderer!
+				</a>
 			</div>
 		</div>;
 	},
 
 	render : function(){
 		return <div className='metadataEditor'>
-			<h1>Properties Editor</h1>
+			<h1 className='sectionHead'>Brew</h1>
 
 			<div className='field title'>
 				<label>title</label>
@@ -341,11 +338,10 @@ const MetadataEditor = createClass({
 				{this.renderThumbnail()}
 			</div>
 
-			<TagInput label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
+			<StringArrayEditor 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)}
-				/>
+				onChange={(e)=>this.handleFieldChange('tags', e)}/>
 
 			<div className='field systems'>
 				<label>systems</label>
@@ -360,25 +356,28 @@ const MetadataEditor = createClass({
 
 			{this.renderRenderOptions()}
 
-			<h2>Authors</h2>
+			<hr/>
+
+			<h1 className='sectionHead'>Authors</h1>
 
 			{this.renderAuthors()}
 
-			<TagInput label='invited authors' valuePatterns={[/.+/]}
+			<StringArrayEditor 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)}
-				/>
+				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/>
 
-			<h2>Privacy</h2>
+			<hr/>
+
+			<h1 className='sectionHead'>Privacy</h1>
 
 			<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>
 

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,324 +1,328 @@
 @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;
+	background-color : #999;
+	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
 	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;
+	.sectionHead {
+		font-weight: 1000;
+		margin: 20px 0;
+
+		&:first-of-type {
+			margin-top: 0;
+		}
 	}
 
-	& > div { margin-bottom : 10px; }
+	& > div {
+		margin-bottom: 10px;
+	}
 
 	.field-group {
-		display   : flex;
-		flex-wrap : wrap;
-		gap       : 10px;
-		width     : 100%;
+		display: flex;
+		width: 100%;
+		flex-wrap: wrap;
+		gap: 10px;
 	}
 
 	.field-column {
-		display        : flex;
-		flex           : 5 0 200px;
-		flex-direction : column;
-		gap            : 10px;
+		display: flex;
+		flex-direction: column;
+		flex: 5 0 200px;
+		gap: 10px;
 	}
 
 
 
-	.field {
-		position      : relative;
+	.field{
 		display       : flex;
 		flex-wrap     : wrap;
 		width         : 100%;
 		min-width     : 200px;
-		& > label {
+		position      : relative;
+		&>label{
 			width          : 80px;
+			font-size      : 11px;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
-			font-size: .9em;
 		}
-		& > .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;
+			&:invalid {
+				background : #ffb9b9;
 			}
 		}
 		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;
+			&:focus {
+				outline: 1px solid #444;
 			}
-			button {
-				.colorButton();
-				padding          : 0px 5px;
-				color            : white;
-				background-color : black;
-				border           : 1px solid #999999;
-				&:hover { background-color : #777777; }
+		}
+		&.thumbnail{
+			height      : 1.4em;
+			label{
+				line-height: 2.0em;
+			}
+			.value{
+  				overflow: hidden;
+  				text-overflow: ellipsis;
+			}
+			button{
+				border: 1px solid #999;
+				color: white;
+				padding: 0px 5px;
+				background-color: black;
+				&:hover{
+					background-color: #777;
+				}
 			}
 		}
 
 		&.description {
-			flex : 1;
+			flex: 1;
 			textarea.value {
+				resize      : none;
 				height      : auto;
 				font-family : 'Open Sans', sans-serif;
-				resize      : none;
+				font-size   : 0.8em;
 			}
 		}
 
 		&.language .language-dropdown {
-			z-index   : 200;
 			max-width : 150px;
+			z-index   : 200;
+		}
+		small {
+			font-size   : 0.6em;
+			font-style  : italic;
+			line-height : 1.4em;
+			display     : inline-block;
 		}
 	}
 
 
 	.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;
+		position: relative;
+		justify-self: center;
+		width: 80px;
+		height: min-content;
+		flex: 1 1;
+		max-height: 115px;
+		aspect-ratio: 1 / 1;
+		object-fit: contain;
+		background-color: #AAA;
 	}
 
-	.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);
 		}
 	}
 
-	.delete.field .value {
-		button {
-			.colorButton(@red);
+	.delete.field .value{
+		button{
+			.button(@red);
 		}
 	}
-	.authors.field .value {
+	.authors.field .value{
+		font-size: 0.8em;
 		line-height    : 1.5em;
 	}
 
-	.themes.field {
+	.themes.field{
+		font-size : 13.33px;
 		.navDropdownContainer {
-			position         : relative;
-			z-index          : 100;
-			background-color : white;
+			background-color	: white;
+			position			: relative;
+			z-index				: 100;
 			&.disabled {
-				font-style       : italic;
-				color            : dimgray;
-				background-color : darkgray;
+				font-style			:italic;
+				font-style			: italic;
+				background-color	: darkgray;
+				color				: dimgray;
 			}
-			& > div:first-child {
-				padding           : 3px 3px;
-				background-color  : inherit;
-				border            : 1px solid gray;
-				i { float	: right; }
+			&>div:first-child {
+				border 				: 2px solid rgb(118,118,118);
+				padding 			: 6px 3px;
+				background-color 	: inherit;
+				i {
+					float	: right;
+				}
 				&:hover {
-					color            : white;
-					background-color : @blue;
+					background-color	: @blue;
+					color				: white;
 				}
 			}
-			.navDropdown .item > p {
-				width         : 45%;
-				height        : 1.1em;
-				overflow      : hidden;
-				text-overflow : ellipsis;
-				white-space   : nowrap;
-			}			
 			.navDropdown {
+				box-shadow	: 0px 5px 10px rgba(0, 0, 0, 0.3);
 				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);
+					position          : relative;
+					overflow          : visible;
+					background-color	: white;
 					.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;
+						display       : flex;
+  					flex-direction: column;
+						background    : #ccc;
+						border-radius : 5px;
+  					box-shadow    : 0 0 5px black;
+						width         : 200px;
+						color         :black;
+						position      : absolute;
+						top           : 0;
+						right         : 0;
+						opacity       : 0;
+						transition    : opacity 250ms ease;
+						z-index       : 1;
+						overflow      :hidden;
 						h6 {
-							padding-block  : 0.5em;
-							padding-inline : 1em;
-							font-weight    : 900;
-							border-bottom  : 2px solid hsl(0,0%,40%);
+							font-weight   : 900;
+							padding-inline:1em;
+							padding-block :.5em;
+							border-bottom :2px solid hsl(0,0%,40%);
 						}
 					}
 					&:hover {
-						color            : white;
-						background-color : @blue;
+						background-color	: @blue;
+						color				      : white;
 					}
-					&: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%);
-						}
+					&:hover > .preview {
+						opacity: 1;
+					}
+					>img {
+						mask-image			    : linear-gradient(90deg, transparent, black 20%);
+						-webkit-mask-image	: linear-gradient(90deg, transparent, black 20%);
+				    	position			    : absolute;
+				    	right				      : 0;
+				    	top					      : 0px;
+						width				        : 50%;
+						height				      : 100%;
 					}
 				}
 			}
 		}
 	}
-
 	.field .list {
-		display   : flex;
-		flex      : 1 0;
-		flex-wrap : wrap;
+		display: flex;
+		flex: 1 0;
+		flex-wrap: wrap;
 
-		> * { flex : 0 0 auto; }
+		> * {
+			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;
-	
+			display: inline-block;
+			height: ~"calc(100% + 0.6em)";
+			position: relative;
+			top: -0.3em;
+			right: -0.3em;
+			cursor: pointer;
+			min-width: 20px;
+			text-align: center;
+			color: white;
+
 			i {
-				position  : relative;
-				top       : 50%;
-				transform : translateY(-50%);
+				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;
 			}
-	
-			&: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;
+		.badge {
+			background-color: #dddddd;
+			border-radius: .5em;
+			font-size: .9em;
+			margin: 2px;
+			padding: .3em;
 
-			.icon { #groupedIcon; }
+			.icon {
+				#groupedIcon
+			}
 		}
 
 		.input-group {
-			height : ~'calc(.9em + 4px + .6em)';
+			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 {
+				border-radius: .5em 0 0 .5em;
 			}
 
-			.input-group {
-				height : ~'calc(.9em + 4px + .6em)';
+			input:last-child {
+				border-radius: .5em;
+			}
 
-				input { border-radius : 0.5em 0 0 0.5em; }
+			.value {
+				width: 7.5vw;
+				min-width: 75px;
+				height: 100%;
+			}
 
-				input:last-child { border-radius : 0.5em; }
+			.invalid:focus {
+				background-color: pink;
+			}
 
-				.value {
-					width     : 7.5vw;
-					min-width : 75px;
-					height    : 100%;
-				}
+			.icon {
+				#groupedIcon;
+				height: 97%;
+				font-size: .8em;
+				right: 1px;
+				top: -.54em;
 
-				.invalid:focus { background-color : pink; }
-
-				.icon {
-					#groupedIcon;
-					top       : -0.54em;
-					right     : 1px;
-					height    : 97%;
-
-					i { font-size : 1.125em; }
+				i {
+					font-size: 1.125em;
 				}
 			}
 		}
 	}
-}
+}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -1,13 +1,13 @@
-/*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 Themes = require('themes/themes.json');
+
 const ThemeSnippets = {};
 ThemeSnippets['Legacy_5ePHB'] = require('themes/Legacy/5ePHB/snippets.js');
 ThemeSnippets['V3_5ePHB']     = require('themes/V3/5ePHB/snippets.js');
@@ -15,8 +15,6 @@ ThemeSnippets['V3_5eDMG']     = require('themes/V3/5eDMG/snippets.js');
 ThemeSnippets['V3_Journal']   = require('themes/V3/Journal/snippets.js');
 ThemeSnippets['V3_Blank']     = require('themes/V3/Blank/snippets.js');
 
-const EditorThemes = require('build/homebrew/codeMirror/editorThemes.json');
-
 const execute = function(val, props){
 	if(_.isFunction(val)) return val(props);
 	return val;
@@ -26,93 +24,69 @@ 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',
+			undo            : ()=>{},
+			redo            : ()=>{},
+			historySize     : ()=>{},
+			cursorPos       : {}
 		};
 	},
 
 	getInitialState : function() {
 		return {
-			renderer      : this.props.renderer,
-			themeSelector : false,
-			snippets      : [],
-			showHistory   : false,
-			historyExists : false,
-			historyItems  : []
+			renderer : this.props.renderer,
+			snippets : []
 		};
 	},
 
-	componentDidMount : async function(prevState) {
-		const snippets = this.compileSnippets();
+	componentDidMount : async function() {
+		const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
+		const themePath    = this.props.theme ?? '5ePHB';
+		let snippets = _.cloneDeep(ThemeSnippets[`${rendererPath}_${themePath}`]);
+		snippets = this.compileSnippets(rendererPath, themePath, snippets);
 		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) {
+	componentDidUpdate : async function(prevProps) {
+		if(prevProps.renderer != this.props.renderer || prevProps.theme != this.props.theme) {
+			const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
+			const themePath    = this.props.theme ?? '5ePHB';
+			let snippets = _.cloneDeep(ThemeSnippets[`${rendererPath}_${themePath}`]);
+			snippets = this.compileSnippets(rendererPath, themePath, snippets);
 			this.setState({
-				snippets : this.compileSnippets()
-			});
-		};
-
-		// Update history list if it has changed
-		const checkHistoryItems = await loadHistory(this.props.brew);
-
-		// If all items have the noData property, there is no saved data
-		const checkHistoryExists = !checkHistoryItems.every((historyItem)=>{
-			return historyItem?.noData;
-		});
-		if(prevState.historyExists != checkHistoryExists){
-			this.setState({
-				historyExists : checkHistoryExists
-			});
-		}
-
-		// If any history items have changed, update the list
-		if(checkHistoryExists && checkHistoryItems.some((historyItem, index)=>{
-			return index >= prevState.historyItems.length || !_.isEqual(historyItem, prevState.historyItems[index]);
-		})){
-			this.setState({
-				historyItems : checkHistoryItems
+				snippets : snippets
 			});
 		}
 	},
 
-	mergeCustomizer : function(oldValue, newValue, key) {
+	mergeCustomizer : function(valueA, valueB, 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);
+			const result = _.reverse(_.unionBy(_.reverse(valueB), _.reverse(valueA), 'name')); // Join snippets together, with preference for the current theme over the base theme
+			return _.filter(result, 'gen'); //Only keep snippets with a 'gen' property.
 		}
 	},
 
-	compileSnippets : function() {
-		let compiledSnippets = [];
+	compileSnippets : function(rendererPath, themePath, snippets) {
+		let compiledSnippets = snippets;
+		const baseSnippetsPath = Themes[rendererPath][themePath].baseSnippets;
 
-		let oldSnippets = _.keyBy(compiledSnippets, 'groupName');
+		const objB = _.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');
+		if(baseSnippetsPath) {
+			const objA = _.keyBy(_.cloneDeep(ThemeSnippets[`${rendererPath}_${baseSnippetsPath}`]), 'groupName');
+			compiledSnippets = _.values(_.mergeWith(objA, objB, this.mergeCustomizer));
+			compiledSnippets = this.compileSnippets(rendererPath, baseSnippetsPath, _.cloneDeep(compiledSnippets));
+		} else {
+			const objA = _.keyBy(_.cloneDeep(ThemeSnippets[`${rendererPath}_Blank`]), 'groupName');
+			compiledSnippets = _.values(_.mergeWith(objA, objB, this.mergeCustomizer));
 		}
 		return compiledSnippets;
 	},
@@ -121,145 +95,48 @@ const Snippetbar = createClass({
 		this.props.onInject(injectedText);
 	},
 
-	toggleThemeSelector : function(e){
-		if(e.target.tagName != 'SELECT'){
-			this.setState({
-				themeSelector : !this.state.themeSelector
-			});
-		}
-	},
-
-	changeTheme : function(e){
-		if(e.target.value == this.props.currentEditorTheme) return;
-		this.props.updateEditorTheme(e.target.value);
-
-		this.setState({
-			showThemeSelector : false,
-		});
-	},
-
-	renderThemeSelector : function(){
-		return <div className='themeSelector'>
-			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} >
-				{EditorThemes.map((theme, key)=>{
-					return <option key={key} value={theme}>{theme}</option>;
-				})}
-			</select>
-		</div>;
-	},
-
 	renderSnippetGroups : function(){
 		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
-		if(snippets.length === 0) return null;
 
-		return <div className='snippets'>
-			{_.map(snippets, (snippetGroup)=>{
-				return <SnippetGroup
-					brew={this.props.brew}
-					groupName={snippetGroup.groupName}
-					icon={snippetGroup.icon}
-					snippets={snippetGroup.snippets}
-					key={snippetGroup.groupName}
-					onSnippetClick={this.handleSnippetClick}
-					cursorPos={this.props.cursorPos}
-				/>;
-			})
-			}
-		</div>;
-	},
-
-	replaceContent : function(item){
-		return this.props.updateBrew(item);
-	},
-
-	toggleHistoryMenu : function(){
-		this.setState({
-			showHistory : !this.state.showHistory
+		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}
+				cursorPos={this.props.cursorPos}
+			/>;
 		});
 	},
 
-	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={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
+				onClick={this.props.undo} >
+				<i className='fas fa-undo' />
 			</div>
-			<div className='codeTools'>
-			<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
-				onClick={this.props.foldCode} >
-				<i className='fas fa-compress-alt' />
+			<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
+				onClick={this.props.redo} >
+				<i className='fas fa-redo' />
 			</div>
-			<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
-				onClick={this.props.unfoldCode} >
-				<i className='fas fa-expand-alt' />
+			<div className='divider'></div>
+			<div className={cx('text', { selected: this.props.view === 'text' })}
+				 onClick={()=>this.props.onViewChange('text')}>
+				<i className='fa fa-beer' />
 			</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 className={cx('style', { selected: this.props.view === 'style' })}
+				 onClick={()=>this.props.onViewChange('style')}>
+				<i className='fa fa-paint-brush' />
 			</div>
-
-		</div>
-		)
+			<div className={cx('meta', { selected: this.props.view === 'meta' })}
+				onClick={()=>this.props.onViewChange('meta')}>
+				<i className='fas fa-info-circle' />
+			</div>
+		</div>;
 	},
 
 	render : function(){
@@ -296,9 +173,8 @@ const SnippetGroup = createClass({
 		return _.map(snippets, (snippet)=>{
 			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
-				<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
+				<span className='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'>
@@ -320,4 +196,5 @@ const SnippetGroup = createClass({
 			</div>
 		</div>;
 	},
+
 });

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,227 +1,140 @@
 @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           : 125px;
+		justify-content : space-between;
+		&>div{
+			height      : @menuHeight;
+			width       : @menuHeight;
+			cursor      : pointer;
+			line-height : @menuHeight;
+			text-align  : center;
+			&:hover,&.selected{
+				background-color : #999;
+			}
+			&.text{
+				.tooltipLeft('Brew Editor');
+			}
+			&.style{
+				.tooltipLeft('Style Editor');
+			}
+			&.meta{
+				.tooltipLeft('Properties');
+			}
+			&.undo{
+				.tooltipLeft('Undo');
+				font-size : 0.75em;
+				color     : grey;
+				&.active{
+					color : black;
 				}
 			}
-			.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;
+			&.redo{
+				.tooltipLeft('Redo');
+				font-size : 0.75em;
+				color     : grey;
+				&.active{
+					color : black;
+				}
 			}
-		}		
+			&.divider {
+				background: linear-gradient(#000, #000) no-repeat center/1px 100%;
+				width: 5px;
+				&:hover{
+					background-color: inherit;
+				}
+			}
+		}
 	}
-	.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;
+			z-index          : 1000;
+			margin-left      : -5px;
+			padding          : 0px;
+			background-color : #ddd;
+			.snippet{
+				position: relative;
+				.animate(background-color);
 				display     : flex;
 				align-items : center;
 				min-width   : max-content;
 				padding     : 5px;
-				font-size   : 10px;
 				cursor      : pointer;
-				.animate(background-color);
-				i {
-					min-width    : 25px;
-					height       : 1.2em;
+				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';}
+					height       : 1.2em;
+					&~i{
+						margin-right: 0;
+						margin-left: 5px;
 					}
 				}
-				.name { margin-right : auto; }
-				.disabled { text-decoration : line-through; }
+				.name {
+					margin-right  : auto;
+				}
 				.beta {
-					align-self    : center;
-					padding       : 4px 6px;
-					margin-left   : 5px;
-					font-family   : monospace;
-					line-height   : 1em;
 					color         : white;
+					padding       : 4px 6px;
+					line-height   : 1em;
+					margin-left   : 5px;
+					align-self    : center;
 					background    : grey;
 					border-radius : 12px;
+					font-family   : monospace;
 				}
-				&:hover {
-					background-color : #999999;
-					& > .dropdown {
+				&:hover{
+					background-color : #999;
+					&>.dropdown{
 						visibility : visible;
 						&.side {
-							top         : 0%;
-							left        : 100%;
-							margin-left : 0;
-							box-shadow  : -1px 1px 2px 0px #999999;
+							left: 100%;
+							top: 0%;
+							margin-left:0;
+							box-shadow: -1px 1px 2px 0px #999;
 						}
 					}
 				}
@@ -229,18 +142,3 @@
 		}
 	}
 }
-@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/stringArrayEditor/stringArrayEditor.jsx

@@ -0,0 +1,149 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _     = require('lodash');
+
+const StringArrayEditor = createClass({
+	displayName     : 'StringArrayEditor',
+	getDefaultProps : function() {
+		return {
+			label         : '',
+			values        : [],
+			valuePatterns : null,
+			validators    : [],
+			placeholder   : '',
+			notes         : [],
+			unique        : false,
+			cannotEdit    : [],
+			onChange      : ()=>{}
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			valueContext : !!this.props.values ? this.props.values.map((value)=>({
+				value,
+				editing : false
+			})) : [],
+			temporaryValue : '',
+			updateValue    : ''
+		};
+	},
+
+	componentDidUpdate : function(prevProps) {
+		if(!_.eq(this.props.values, prevProps.values)) {
+			this.setState({
+				valueContext : this.props.values ? this.props.values.map((newValue)=>({
+					value   : newValue,
+					editing : this.state.valueContext.find(({ value })=>value === newValue)?.editing || false
+				})) : []
+			});
+		}
+	},
+
+	handleChange : function(value) {
+		this.props.onChange({
+			target : {
+				value
+			}
+		});
+	},
+
+	addValue : function(value){
+		this.handleChange(_.uniq([...this.props.values, value]));
+		this.setState({
+			temporaryValue : ''
+		});
+	},
+
+	removeValue : function(index){
+		this.handleChange(this.props.values.filter((_, i)=>i !== index));
+	},
+
+	updateValue : function(value, index){
+		const valueContext = this.state.valueContext;
+		valueContext[index].value = value;
+		valueContext[index].editing = false;
+		this.handleChange(valueContext.map((context)=>context.value));
+		this.setState({ valueContext, updateValue: '' });
+	},
+
+	editValue : function(index){
+		if(!!this.props.cannotEdit && this.props.cannotEdit.includes(this.props.values[index])) {
+			return;
+		}
+		const valueContext = this.state.valueContext.map((context, i)=>{
+			context.editing = index === i;
+			return context;
+		});
+		this.setState({ valueContext, updateValue: this.props.values[index] });
+	},
+
+	valueIsValid : function(value, index) {
+		const values = _.clone(this.props.values);
+		if(index !== undefined) {
+			values.splice(index, 1);
+		}
+		const matchesPatterns = !this.props.valuePatterns || this.props.valuePatterns.some((pattern)=>!!(value || '').match(pattern));
+		const uniqueIfSet = !this.props.unique || !values.includes(value);
+		const passesValidators = !this.props.validators || this.props.validators.every((validator)=>validator(value));
+		return matchesPatterns && uniqueIfSet && passesValidators;
+	},
+
+	handleValueInputKeyDown : function(event, index) {
+		if(event.key === 'Enter') {
+			if(this.valueIsValid(event.target.value, index)) {
+				if(index !== undefined) {
+					this.updateValue(event.target.value, index);
+				} else {
+					this.addValue(event.target.value);
+				}
+			}
+		} else if(event.key === 'Escape') {
+			this.closeEditInput(index);
+		}
+	},
+
+	closeEditInput : function(index) {
+		const valueContext = this.state.valueContext;
+		valueContext[index].editing = false;
+		this.setState({ valueContext, updateValue: '' });
+	},
+
+	render : function() {
+		const valueElements = Object.values(this.state.valueContext).map((context, i)=>context.editing
+			? <React.Fragment key={i}>
+				<div className='input-group'>
+					<input type='text' className={`value ${this.valueIsValid(this.state.updateValue, i) ? '' : 'invalid'}`} autoFocus placeholder={this.props.placeholder}
+						value={this.state.updateValue}
+						onKeyDown={(e)=>this.handleValueInputKeyDown(e, i)}
+						onChange={(e)=>this.setState({ updateValue: e.target.value })}/>
+					{<div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.closeEditInput(i); }}><i className='fa fa-undo fa-fw'/></div>}
+					{this.valueIsValid(this.state.updateValue, i) ? <div className='icon steel'  onClick={(e)=>{ e.stopPropagation(); this.updateValue(this.state.updateValue, i); }}><i className='fa fa-check fa-fw'/></div> : null}
+				</div>
+			</React.Fragment>
+			: <div className='badge' key={i} onClick={()=>this.editValue(i)}>{context.value}
+				{!!this.props.cannotEdit && this.props.cannotEdit.includes(context.value) ? null : <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.removeValue(i); }}><i className='fa fa-times fa-fw'/></div>}
+			</div>
+		);
+
+		return <div className='field'>
+			<label>{this.props.label}</label>
+			<div style={{ flex: '1 0' }}>
+				<div className='list'>
+					{valueElements}
+					<div className='input-group'>
+						<input type='text' className={`value ${this.valueIsValid(this.state.temporaryValue) ? '' : 'invalid'}`} placeholder={this.props.placeholder}
+							   value={this.state.temporaryValue}
+							   onKeyDown={(e)=>this.handleValueInputKeyDown(e)}
+							   onChange={(e)=>this.setState({ temporaryValue: e.target.value })}/>
+						{this.valueIsValid(this.state.temporaryValue) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.addValue(this.state.temporaryValue); }}><i className='fa fa-check fa-fw'/></div> : null}
+					</div>
+				</div>
+
+				{this.props.notes ? this.props.notes.map((n, index)=><p key={index}><small>{n}</small></p>) : null}
+			</div>
+		</div>;
+	}
+});
+
+module.exports = StringArrayEditor;

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

@@ -1,12 +1,8 @@
-//╔===--------------- 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 } = require('react-router-dom/server');
+const { Route, Routes, useParams, useSearchParams } = require('react-router-dom');
 
 const HomePage = require('./pages/homePage/homePage.jsx');
 const EditPage = require('./pages/editPage/editPage.jsx');
@@ -14,7 +10,7 @@ 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 PrintPage = require('./pages/printPage/printPage.jsx');
 const AccountPage = require('./pages/accountPage/accountPage.jsx');
 
 const WithRoute = (props)=>{
@@ -71,20 +67,20 @@ const Homebrew = createClass({
 			<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='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} />} />
 						<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='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} />} />
+						<Route path='/new' element={<WithRoute el={NewPage}/>} />
 						<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='/print/:id' element={<WithRoute el={PrintPage} brew={this.props.brew} />} />
+						<Route path='/print' element={<WithRoute el={PrintPage} />} />
+						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
+						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
+						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} uiItems={this.props.brew.uiItems} />} />
 						<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} />} />
+					  	<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+					  	<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
 					</Routes>
 				</div>
 			</Router>
@@ -92,4 +88,15 @@ const Homebrew = createClass({
 	}
 });
 
-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

@@ -15,23 +15,6 @@
 		}
 		&.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/editTitle.navitem.jsx

@@ -0,0 +1,34 @@
+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({
+	displayName     : 'EditTitleNavItem',
+	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

@@ -21,11 +21,10 @@ const ErrorNavItem = createClass({
 			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;
+		const error = this.props.error;
+		const response = error.response;
+		const status = response.status;
+		const message = response.body?.message;
 		let errMsg = '';
 		try {
 			errMsg += `${error.toString()}\n\n`;
@@ -41,9 +40,7 @@ const ErrorNavItem = createClass({
 					{message ?? 'Conflict: please refresh to get latest changes'}
 				</div>
 			</Nav.item>;
-		}
-
-		if(status === 412) {
+		} else if(status === 412) {
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
 				<div className='errorContainer' onClick={clearError}>
@@ -52,36 +49,6 @@ const ErrorNavItem = createClass({
 			</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!
@@ -90,7 +57,6 @@ const ErrorNavItem = createClass({
 					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'>
@@ -104,18 +70,6 @@ const ErrorNavItem = createClass({
 			</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'>

client/homebrew/navbar/error-navitem.less

@@ -21,9 +21,6 @@
   font-size        : 10px;
   font-weight      : 800;
   text-transform   : uppercase;
-	.lowercase {
-		text-transform : none;
-	}
   a{
     color : @teal;
   }

client/homebrew/navbar/help.navitem.jsx

@@ -1,4 +1,6 @@
 const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
 const dedent = require('dedent-tabs').default;
 
 const Nav = require('naturalcrit/nav/nav.jsx');

client/homebrew/navbar/metadata.navitem.jsx

@@ -1,5 +1,6 @@
 const React = require('react');
 const createClass = require('create-react-class');
+const _ = require('lodash');
 const Moment = require('moment');
 
 const Nav = require('naturalcrit/nav/nav.jsx');

client/homebrew/navbar/navbar.less

@@ -1,343 +1,272 @@
-@import 'naturalcrit/styles/colors.less';
-
+@import "naturalcrit/styles/colors.less";
 @navbarHeight : 28px;
-@viewerToolsHeight : 32px;
-
 @keyframes pinkColoring {
-	0% { color : pink; }
-	50% { color : pink; }
-	75% { color : red; }
-	100% { color : pink; }
+  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; 
+	.homebrewLogo {
+		.animate(color);
+		font-family : CodeBold;
+		font-size   : 12px;
+		color       : white;
+		div {
+			margin-top    : 2px;
+			margin-bottom : -2px;
 		}
-	}
-	// "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;
-			}
+			color : @blue;
 		}
 	}
-	.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;
+	.editTitle.navItem {
+		padding : 2px 12px;
+		input {
+			font-family      : "Open Sans", sans-serif;
 			font-size        : 12px;
 			font-weight      : 800;
-			color            : white;
+			width            : 250px;
+			margin           : 0;
+			padding          : 2px;
 			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;
+			border           : 1px solid @blue;
+			outline          : none;
+			background-color : transparent;
+		}
+		.charCount {
+			display        : inline-block;
+			margin-left    : 8px;
+			text-align     : right;
+			vertical-align : bottom;
+			color          : #666;
+			&.max {
+				color : @red;
 			}
 		}
-		&.account {
-			min-width : 100px;
-			&.username { text-transform : none;}
+	}
+	.brewTitle.navItem {
+		font-size        : 12px;
+		font-weight      : 800;
+		height           : 100%;
+		text-align       : center;
+		text-transform   : initial;
+		color            : white;
+		background-color : transparent;
+		flex-grow        : 1;
+	}
+	.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));
+			}
 		}
 	}
-	.navDropdownContainer {
+	.patreon.navItem {
+		border-right : 1px solid #666;
+		border-left  : 1px solid #666;
+		&:hover i {
+			color : red;
+		}
+		i {
+			.animate(color);
+			animation-name     : pinkColoring;
+			animation-duration : 2s;
+			color              : pink;
+		}
+	}
+	.recent.navDropdownContainer {
 		position : relative;
-		height   : 100%;
+		.navDropdown .navItem {
+			overflow        : hidden auto;
+			max-height      : ~"calc(100vh - 28px)";
+			scrollbar-color : #666 #333;
+			scrollbar-width : thin;
+			
 
-		.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;
-					}
-				}
+			#backgroundColorsHover;
+			.animate(background-color);
+			position         : relative;
+			display          : block;
+			overflow         : clip;
+			box-sizing       : border-box;
+			padding          : 8px 5px 13px;
+			text-decoration  : none;
+			color            : white;
+			border-top       : 1px solid #888;
+			background-color : #333;
+			.clear {
+				position         : absolute;
+				top              : 50%;
+				right            : 0;
+				display          : none;
+				width            : 20px;
+				height           : 100%;
+				transform        : translateY(-50%);
+				opacity          : 70%;
+				border-radius    : 3px;
+				background-color : #333;
 				&:hover {
-					background-color : @blue;
-					.clear {
-						display       : grid;
-						place-content : center;
-					}
+					opacity : 100%;
 				}
-				.title {
-					display       : inline-block;
-					width         : 100%;
-					overflow      : hidden auto;
-					text-overflow : ellipsis;
-					white-space   : nowrap;
+				i {
+					font-size  : 10px;
+					width      : 100%;
+					height     : 100%;
+					margin     : 0;
+					text-align : center;
 				}
-				.time {
-					position  : absolute;
-					right     : 2px;
-					bottom    : 2px;
-					font-size : 0.7em;
-					color     : #888888;
+			}
+			&:hover {
+				background-color : @blue;
+				.clear {
+					display       : grid;
+					place-content : center;
 				}
-				&.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%); }
+			}
+			.title {
+				display       : inline-block;
+				overflow      : hidden;
+				width         : 100%;
+				white-space   : nowrap;
+				text-overflow : ellipsis;
+			}
+			.time {
+				font-size : 0.7em;
+				position  : absolute;
+				right     : 2px;
+				bottom    : 2px;
+				color     : #888;
+			}
+			&.header {
+				display          : block;
+				box-sizing       : border-box;
+				padding          : 5px 0;
+				text-align       : center;
+				color            : #BBB;
+				border-top       : 1px solid #888;
+				background-color : #333;
+				&: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));
+	.metadata.navItem {
+		position    : relative;
+		display     : flex;
+		align-items : center;
+		height      : 100%;
+		padding     : 0;
+		flex-grow   : 1;
+		i {
+			margin-right : 10px;
+		}
+		.window {
+			position         : absolute;
+			z-index          : -1;
+			bottom           : 0;
+			left             : 50%;
+			display          : flex;
+			justify-content  : flex-start;
+			width            : 440px;
+			max-height       : ~"calc(100vh - 28px)";
+			margin           : 0 auto;
+			padding          : 0 10px 5px;
+			transition       : transform 0.4s, opacity 0.4s;
+			border           : 3px solid #444;
+			border-top       : unset;
+			border-radius    : 0 0 5px 5px;
+			background-color : #333;
+			box-shadow       : inset 0 7px 9px -7px #111;
+			flex-flow        : row wrap;
+			align-content    : baseline;
+			&.active {
+				transform : translateX(-50%) translateY(100%);
+				opacity   : 1;
+			}
+			&.inactive {
+				transform : translateX(-50%) translateY(0%);
+				opacity   : 0;
+			}
+			.row {
+				display   : flex;
+				width     : 100%;
+				flex-flow : row wrap;
+				h4 {
+					display    : block;
+					box-sizing : border-box;
+					min-width  : 76px;
+					padding    : 5px 0;
+					text-align : center;
+					color      : #BBB;
+					flex-basis : 20%;
+					flex-grow  : 1;
+				}
+				p {
+					font-family    : "Open Sans", sans-serif;
+					font-size      : 10px;
+					font-weight    : normal;
+					padding        : 5px 0;
+					text-transform : initial;
+					flex-basis     : 80%;
+					flex-grow      : 1;
+					.tag {
+						display          : inline-block;
+						margin           : 2px 2px;
+						padding          : 2px;
+						border           : 2px solid grey;
+						border-radius    : 5px;
+						background-color : #444;
+					}
+					a.userPageLink {
+						text-decoration : none;
+						color           : white;
+						&:hover {
+							text-decoration : underline;
+						}
+					}
+				}
+				&:nth-of-type(even) {
+					background-color : #555;
+				}
+			}
 		}
 	}
+	.warning.navItem {
+		position         : relative;
+		color            : white;
+		background-color : @orange;
+		&:hover > .dropdown {
+			visibility : visible;
+		}
+		.dropdown {
+			position         : absolute;
+			z-index          : 10000;
+			top              : 28px;
+			left             : 0;
+			display          : block;
+			visibility       : hidden;
+			box-sizing       : border-box;
+			width            : 100%;
+			padding          : 13px 5px;
+			text-align       : center;
+			background-color : #333;
+		}
+	}
+	.account.navItem {
+		min-width : 100px;
+	}
+	.account.username.navItem {
+		text-transform : none;
+	}
 }

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

@@ -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({

client/homebrew/navbar/reddit.navitem.jsx

@@ -0,0 +1,46 @@
+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({
+	displayName     : 'RedditShareNavItem',
+	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 +1,74 @@
-const React  = require('react');
+const React = require('react');
+const createClass = require('create-react-class');
+const _     = require('lodash');
+const cx    = require('classnames');
 const moment = require('moment');
+
 const UIPage = require('../basePages/uiPage/uiPage.jsx');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+const Navbar = require('../../navbar/navbar.jsx');
+
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const Account = require('../../navbar/account.navitem.jsx');
+const NewBrew = require('../../navbar/newbrew.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
+
 const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
 
-let SAVEKEY = '';
+const AccountPage = createClass({
+	displayName     : 'AccountPage',
+	getDefaultProps : function() {
+		return {
+			brew    : {},
+			uiItems : {}
+		};
+	},
+	getInitialState : function() {
+		return {
+			uiItems : this.props.uiItems
+		};
+	},
 
-const AccountPage = (props)=>{
-	// destructure props and set state for save location
-	const { accountDetails, brew } = props;
-	const [saveLocation, setSaveLocation] = React.useState('');
+	renderNavItems : function() {
+		return <Navbar>
+			<Nav.section>
+				<NewBrew />
+				<HelpNavItem />
+				<RecentNavItem />
+				<Account />
+			</Nav.section>
+		</Navbar>;
+	},
 
-	// 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);
-		}
-	}, []);
+	renderUiItems : function() {
+		return 	<>
+			<div className='dataGroup'>
+				<h1>Account Information  <i className='fas fa-user'></i></h1>
+				<p><strong>Username: </strong> {this.props.uiItems.username || 'No user currently logged in'}</p>
+				<p><strong>Last Login: </strong> {moment(this.props.uiItems.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> {this.props.uiItems.mongoCount}</p>
+			</div>
+			<div className='dataGroup'>
+				<h3>Google Information <i className='fab fa-google-drive'></i></h3>
+				<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p>
+				{this.props.uiItems.googleId &&
+					<p>
+						<strong>Brews on Google Drive: </strong> {this.props.uiItems.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>
+		</>;
+	},
 
-	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>);
-};
+	render : function(){
+		return <UIPage brew={this.props.brew}>
+			{this.renderUiItems()}
+		</UIPage>;
+	}
+});
 
 module.exports = AccountPage;

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

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

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

@@ -48,10 +48,6 @@
 		&>span{
 			margin-right : 12px;
 			line-height  : 1.5em;
-
-			a {
-				color:inherit;
-			}
 		}
 	}
 	.brewTags span {
@@ -63,41 +59,6 @@
 		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{
@@ -119,12 +80,11 @@
 		text-align       : center;
 		a{
 			.animate(opacity);
-			display         : block;
-			margin          : 8px 0px;
-			opacity         : 0.6;
-			font-size       : 1.3em;
-			color           : white;
-			text-decoration : unset;
+			display   : block;
+			margin    : 8px 0px;
+			opacity   : 0.6;
+			font-size : 1.3em;
+			color     : white;
 			&:hover{
 				opacity : 1;
 			}
@@ -138,11 +98,4 @@
 		padding : 0px;
 		margin  : -5px;
 	}
-	.homebreweryIcon {
-		mix-blend-mode : darken;
-		height         : 24px;
-		position       : relative;
-		top            : 5px;
-		left           : -5px;
-	}
 }

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

@@ -36,7 +36,6 @@ const ListPage = createClass({
 
 		return {
 			filterString   : this.props.query?.filter || '',
-			filterTags     : [],
 			sortType       : this.props.query?.sort || null,
 			sortDir        : this.props.query?.dir || null,
 			query          : this.props.query,
@@ -83,14 +82,14 @@ const ListPage = createClass({
 		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); }}/>;
+			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError}/>;
 		});
 	},
 
 	sortBrewOrder : function(brew){
 		if(!brew.title){brew.title = 'No Title';}
 		const mapping = {
-			'alpha'   : _.deburr(brew.title.trim().toLowerCase()),
+			'alpha'   : _.deburr(brew.title.toLowerCase()),
 			'created' : moment(brew.createdAt).format(),
 			'updated' : moment(brew.updatedAt).format(),
 			'views'   : brew.views,
@@ -137,33 +136,13 @@ const ListPage = createClass({
 		return;
 	},
 
-	updateUrl : function(filterTerm, sortType, sortDir, filterTag=''){
+	updateUrl : function(filterTerm, sortType, sortDir){
 		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
@@ -187,16 +166,6 @@ const ListPage = createClass({
 		</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>
@@ -207,6 +176,9 @@ const ListPage = createClass({
 			{/* {this.renderSortOption('Latest', 'latest')} */}
 
 			{this.renderFilterOption()}
+
+
+
 		</div>;
 	},
 
@@ -214,28 +186,14 @@ const ListPage = createClass({
 		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 brewStrings.includes(testString);
 		});
-
 		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
 	},
 
@@ -262,11 +220,9 @@ const ListPage = createClass({
 	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'/>
+			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
-			{this.renderTagsOptions()}
 
 			<div className='content V3'>
 				<div className='page'>

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

@@ -2,18 +2,17 @@
 .noColumns(){
 	column-count         : auto;
 	column-fill          : auto;
-	column-gap           : normal;
+	column-gap           : auto;
 	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;
+	-webkit-column-gap   : auto;
+	-moz-column-gap      : auto;
 	height               : auto;
 	min-height           : 279.4mm;
 	margin               : 20px auto;
-	contain				 : unset;
 }
 .listPage{
 	.content{
@@ -53,7 +52,7 @@
 			}
 		}
 	}
-	.sort-container {
+	.sort-container{
 		font-family        : 'Open Sans', sans-serif;
 		position           : sticky;
 		top                : 0;
@@ -125,66 +124,4 @@
 
 
 	}
-	.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';
-				}
-			}
-		}
-	}
 }

client/homebrew/pages/basePages/uiPage/uiPage.less

@@ -16,23 +16,6 @@
 				margin        : 5px 0px;
 				border        : 2px solid black;
 				border-radius : 5px;
-				button {
-					background-color : transparent;
-					border           : 1px solid black;
-					border-radius    : 5px;
-					width            : 125px;
-					color            : black;
-					margin-right     : 5px;
-					&.active {
-						background-color: #0007;
-						color: white;
-						&:before {
-							content: '\f00c';
-    						font-family: 'FONT AWESOME 5 FREE';
-    						margin-right: 5px;
-						}
-					}
-				}
 			}
 			h1, h2, h3, h4 {
 				width          : 100%;

client/homebrew/pages/editPage/editPage.jsx

@@ -1,10 +1,9 @@
 /* eslint-disable max-lines */
 require('./editPage.less');
 const React = require('react');
-const _ = require('lodash');
 const createClass = require('create-react-class');
-
-import request from '../../utils/request-middleware.js';
+const _ = require('lodash');
+const request = require('../../utils/request-middleware.js');
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
@@ -12,28 +11,22 @@ const Navbar = require('../../navbar/navbar.jsx');
 
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
-const PrintNavItem = require('../../navbar/print.navitem.jsx');
+const PrintLink = require('../../navbar/print.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const VaultNavItem = require('../../navbar/vault.navitem.jsx');
 
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
-const LockNotification = require('./lockNotification/lockNotification.jsx');
-
-import Markdown from 'naturalcrit/markdown.js';
+const Markdown = require('naturalcrit/markdown.js');
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
-
-import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
 
 const googleDriveIcon = require('../../googleDrive.svg');
 
-const SAVE_TIMEOUT = 10000;
+const SAVE_TIMEOUT = 3000;
 
 const EditPage = createClass({
 	displayName     : 'EditPage',
@@ -45,28 +38,21 @@ const EditPage = createClass({
 
 	getInitialState : function() {
 		return {
-			brew                       : this.props.brew,
-			isSaving                   : false,
-			isPending                  : false,
-			alertTrashedGoogleBrew     : this.props.brew.trashed,
-			alertLoginToTransfer       : false,
-			saveGoogle                 : this.props.brew.googleId ? true : false,
-			confirmGoogleTransfer      : false,
-			error                      : null,
-			htmlErrors                 : Markdown.validate(this.props.brew.text),
-			url                        : '',
-			autoSave                   : true,
-			autoSaveWarning            : false,
-			unsavedTime                : new Date(),
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			displayLockMessage         : this.props.brew.lock || false,
-			themeBundle                : {}
+			brew                   : this.props.brew,
+			isSaving               : false,
+			isPending              : false,
+			alertTrashedGoogleBrew : this.props.brew.trashed,
+			alertLoginToTransfer   : false,
+			saveGoogle             : this.props.brew.googleId ? true : false,
+			confirmGoogleTransfer  : false,
+			error                  : null,
+			htmlErrors             : Markdown.validate(this.props.brew.text),
+			url                    : '',
+			autoSave               : true,
+			autoSaveWarning        : false,
+			unsavedTime            : new Date()
 		};
 	},
-
-	editor    : React.createRef(null),
 	savedBrew : null,
 
 	componentDidMount : function(){
@@ -94,8 +80,6 @@ const EditPage = createClass({
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));
 
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
-
 		document.addEventListener('keydown', this.handleControlKeys);
 	},
 	componentWillUnmount : function() {
@@ -107,8 +91,8 @@ const EditPage = createClass({
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const S_KEY = 83;
 		const P_KEY = 80;
-		if(e.keyCode == S_KEY) this.trySave(true);
-		if(e.keyCode == P_KEY) printCurrentBrew();
+		if(e.keyCode == S_KEY) this.save();
+		if(e.keyCode == P_KEY) window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
 			e.preventDefault();
@@ -116,19 +100,7 @@ const EditPage = createClass({
 	},
 
 	handleSplitMove : function(){
-		this.editor.current.update();
-	},
-
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
-
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
-
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
+		this.refs.editor.update();
 	},
 
 	handleTextChange : function(text){
@@ -139,7 +111,7 @@ const EditPage = createClass({
 		this.setState((prevState)=>({
 			brew       : { ...prevState.brew, text: text },
 			isPending  : true,
-			htmlErrors : htmlErrors,
+			htmlErrors : htmlErrors
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
@@ -150,10 +122,7 @@ const EditPage = createClass({
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
-	handleMetaChange : function(metadata, field=undefined){
-		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
-			fetchThemeBundle(this, metadata.renderer, metadata.theme);
-
+	handleMetaChange : function(metadata){
 		this.setState((prevState)=>({
 			brew : {
 				...prevState.brew,
@@ -161,30 +130,20 @@ const EditPage = createClass({
 			},
 			isPending : true,
 		}), ()=>{if(this.state.autoSave) this.trySave();});
+
 	},
 
 	hasChanges : function(){
 		return !_.isEqual(this.state.brew, this.savedBrew);
 	},
 
-	updateBrew : function(newData){
-		this.setState((prevState)=>({
-			brew : {
-				...prevState.brew,
-				style : newData.style,
-				text  : newData.text
-			}
-		}));
-	},
-
-	trySave : function(immediate=false){
+	trySave : function(){
 		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
 		if(this.hasChanges()){
 			this.debounceSave();
 		} else {
 			this.debounceSave.cancel();
 		}
-		if(immediate) this.debounceSave.flush();
 	},
 
 	handleGoogleClick : function(){
@@ -229,9 +188,6 @@ const EditPage = createClass({
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));
 
-		await updateHistory(this.state.brew).catch(console.error);
-		await versionHistoryGarbageCollection().catch(console.error);
-
 		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
 
 		const brew = this.state.brew;
@@ -381,7 +337,7 @@ const EditPage = createClass({
 
 **[Homebrewery Link](${global.config.publicUrl}/share/${shareLink})**`;
 
-		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title.toWellFormed())}&text=${encodeURIComponent(text)}`;
+		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`;
 	},
 
 	renderNavbar : function(){
@@ -417,8 +373,7 @@ const EditPage = createClass({
 						post to reddit
 					</Nav.item>
 				</Nav.dropdown>
-				<PrintNavItem />
-				<VaultNavItem />
+				<PrintLink shareId={this.processShareId()} />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />
 			</Nav.section>
@@ -431,39 +386,24 @@ const EditPage = createClass({
 			<Meta name='robots' content='noindex, nofollow' />
 			{this.renderNavbar()}
 
-			{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
+				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<Editor
-						ref={this.editor}
+						ref='editor'
 						brew={this.state.brew}
 						onTextChange={this.handleTextChange}
 						onStyleChange={this.handleStyleChange}
 						onMetaChange={this.handleMetaChange}
 						reportError={this.errorReported}
 						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						snippetBundle={this.state.themeBundle.snippets}
-						updateBrew={this.updateBrew}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
 						text={this.state.brew.text}
 						style={this.state.brew.style}
 						renderer={this.state.brew.renderer}
 						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-						allowPrint={true}
 					/>
 				</SplitPane>
 			</div>

client/homebrew/pages/editPage/lockNotification/lockNotification.jsx

@@ -1,30 +0,0 @@
-require('./lockNotification.less');
-const React = require('react');
-import Dialog from '../../../../components/dialog.jsx';
-
-function LockNotification(props) {
-	props = {
-		shareId     : 0,
-		disableLock : ()=>{},
-		message     : '',
-		...props
-	};
-
-	const removeLock = ()=>{
-		alert(`Not yet implemented - ID ${props.shareId}`);
-	};
-
-	return <Dialog className='lockNotification' blocking closeText='CONTINUE TO EDITOR' >
-		<h1>BREW LOCKED</h1>
-		<p>This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.</p>
-		<hr />
-		<h3>LOCK REASON</h3>
-		<p>{props.message || 'Unable to retrieve Lock Message'}</p>
-		<hr />
-		<p>Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.</p>
-		<p>Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.</p>
-		<button onClick={removeLock}>REQUEST LOCK REMOVAL</button>
-	</Dialog>;
-};
-
-module.exports = LockNotification;

client/homebrew/pages/editPage/lockNotification/lockNotification.less

@@ -1,27 +0,0 @@
-.lockNotification {
-	z-index          : 1;
-	width            : 80%;
-	padding          : 10px;
-	margin           : 5% 10%;
-	line-height      : 1.5em;
-	color            : black;
-	text-align       : center;
-	background-color : #CCCCCC;
-
-	&::backdrop { background-color : #000000AA; }
-
-	button {
-		margin           : 10px;
-		color            : white;
-		background-color : #333333;
-
-		&:hover { background-color : #777777; }
-	}
-
-	h1, h3 {
-		font-family : 'Open Sans', sans-serif;
-		font-weight : 800;
-	}
-	h1 { font-size : 24px; }
-	h3 { font-size : 18px; }
-}

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,25 +1,41 @@
 require('./errorPage.less');
-const React      = require('react');
-const UIPage     = require('../basePages/uiPage/uiPage.jsx');
-import Markdown  from '../../../../shared/naturalcrit/markdown.js';
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+const cx = require('classnames');
+
+const UIPage = require('../basePages/uiPage/uiPage.jsx');
+
+const Markdown = require('../../../../shared/naturalcrit/markdown.js');
+
 const ErrorIndex = require('./errors/errorIndex.js');
 
-const ErrorPage = ({ brew })=>{
-	// Retrieving the error text based on the brew's error code from ErrorIndex
-	const errorText = ErrorIndex({ brew })[brew.HBErrorCode.toString()] || '';
+const ErrorPage = createClass({
+	displayName : 'ErrorPage',
 
-	return (
-		<UIPage brew={{ title: 'Crit Fail!' }}>
+	getDefaultProps : function() {
+		return {
+			ver     : '0.0.0',
+			errorId : '',
+			text    : '# Oops \n We could not find a brew with that id. **Sorry!**',
+			error   : {}
+		};
+	},
+
+	render : function(){
+		const errorText = ErrorIndex(this.props)[this.props.brew.HBErrorCode.toString()] || '';
+
+		return <UIPage brew={{ title: 'Crit Fail!' }}>
 			<div className='dataGroup'>
 				<div className='errorTitle'>
-					<h1>{`Error ${brew?.status || '000'}`}</h1>
-					<h4>{brew?.text || 'No error text'}</h4>
+					<h1>{`Error ${this.props.brew.status || '000'}`}</h1>
+					<h4>{this.props.brew.text || 'No error text'}</h4>
 				</div>
 				<hr />
 				<div dangerouslySetInnerHTML={{ __html: Markdown.render(errorText) }} />
 			</div>
-		</UIPage>
-	);
-};
+		</UIPage>;
+	}
+});
 
 module.exports = ErrorPage;

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -2,14 +2,6 @@ const dedent = require('dedent-tabs').default;
 
 const loginUrl = 'https://www.naturalcrit.com/login';
 
-// Prevent parsing text (e.g. document titles) as markdown
-const escape = (text = '')=>{
-	return text.split('').map((char)=>`&#${char.charCodeAt(0)};`).join('');
-};
-
-//001-050 : Brew errors
-//050-100 : Other pages errors
-
 const errorIndex = (props)=>{
 	return {
 		// Default catch all
@@ -23,36 +15,25 @@ const errorIndex = (props)=>{
 		'01' : dedent`
 			## An error occurred while retrieving this brew from Google Drive!
 			
-			Google is able to see the brew at this link, but reported an error while attempting to retrieve it.
-
-			### Refreshing your Google Credentials
-
-			This issue is likely caused by an issue with your Google credentials; if you are the owner of this file, the following steps may resolve the issue:
-
-			- Go to https://www.naturalcrit.com/login and click logout if present (in small text at the bottom of the page).
-			- Click "Sign In with Google", which will refresh your Google credentials.
-			- After completing the sign in process, return to Homebrewery and refresh/reload the page so that it can pick up the updated credentials.
-			- If this was the source of the issue, it should now be resolved.
-
-			If following these steps does not resolve the issue, please let us know!`,
+			Google reported an error while attempting to retrieve a brew from this link.`,
 
 		// Google Drive - 404 : brew deleted or access denied
 		'02' : dedent`
 			## We can't find this brew in Google Drive!
 			
 			This file was saved on Google Drive, but this link doesn't work anymore.
-			${props.brew.authors?.length > 0
-		? `Note that this brew belongs to the Homebrewery account **${props.brew.authors[0]}**,
-				${props.brew.account
-		? `which is
+			${ props.brew.authors?.length > 0
+				? `Note that this brew belongs to the Homebrewery account **${ props.brew.authors[0] }**,
+				${ props.brew.account
+					? `which is
 						${props.brew.authors[0] == props.brew.account
-		? `your account.`
-		: `not your account (you are currently signed in as **${props.brew.account}**).`
-}`
-		: 'and you are not currently signed in to any account.'
-}`
-		: ''
-}
+							? `your account.`
+							: `not your account (you are currently signed in as **${props.brew.account}**).`
+						}`
+					: 'and you are not currently signed in to any account.'
+				}`
+				: ''
+			}
 			The Homebrewery cannot delete files from Google Drive on its own, so there
 			are three most likely possibilities:
 			:
@@ -66,7 +47,7 @@ const errorIndex = (props)=>{
 			- **The Google Account may be closed.** Google may have removed the account
 			due to inactivity or violating a Google policy. Make sure the owner can
 			still access Google Drive normally and upload/download files to it.
-			
+			:
 			If the file isn't found, Google Drive usually puts your file in your Trash folder for
 			30 days. Assuming the trash hasn't been emptied yet, it might be worth checking.
 			You can also find the Activity tab on the right side of the Google Drive page, which
@@ -92,13 +73,9 @@ const errorIndex = (props)=>{
 		**Properties** tab, and adding your username to the "invited authors" list. You can
 		then try to access this document again.
 		
-		:
+		**Brew Title:** ${props.brew.brewTitle || 'Unable to show title'}
 
-		**Brew Title:** ${escape(props.brew.brewTitle) || 'Unable to show title'}
-
-		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}
-		
-		[Click here to be redirected to the brew's share page.](/share/${props.brew.shareId})`,
+		**Current Authors:** ${props.brew.authors?.map((author)=>{return `${author}`;}).join(', ') || 'Unable to list authors'}`,
 
 		// User is not signed in; must be a user on the Authors List
 		'04' : dedent`
@@ -107,14 +84,9 @@ const errorIndex = (props)=>{
 		You must be logged in to one of the accounts listed as an author of this brew.
 		User is not logged in. Please log in [here](${loginUrl}).
 		
-		:
-
-		**Brew Title:** ${escape(props.brew.brewTitle) || 'Unable to show title'}
-
-		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}
-
-		[Click here to be redirected to the brew's share page.](/share/${props.brew.shareId})`,
+		**Brew Title:** ${props.brew.brewTitle || 'Unable to show title'}
 
+		**Current Authors:** ${props.brew.authors?.map((author)=>{return `${author}`;}).join(', ') || 'Unable to list authors'}`,
 
 		// Brew load error
 		'05' : dedent`
@@ -123,8 +95,6 @@ const errorIndex = (props)=>{
 		The server could not locate the Homebrewery document. It was likely deleted by
 		its owner.
 		
-		:
-
 		**Requested access:** ${props.brew.accessType}
 
 		**Brew ID:**  ${props.brew.brewId}`,
@@ -141,8 +111,6 @@ const errorIndex = (props)=>{
 		
 		An error occurred while attempting to remove the Homebrewery document.
 		
-		:
-
 		**Brew ID:**  ${props.brew.brewId}`,
 
 		// Author delete error
@@ -151,53 +119,8 @@ const errorIndex = (props)=>{
 		
 		An error occurred while attempting to remove the user from the Homebrewery document author list!
 		
-		:
-
 		**Brew ID:**  ${props.brew.brewId}`,
-
-		// Theme load error
-		'09' : dedent`
-		## No Homebrewery theme document could be found.
-		
-		The server could not locate the Homebrewery document. It was likely deleted by
-		its owner.
-		
-		:
-
-		**Requested access:** ${props.brew.accessType}
-
-		**Brew ID:**  ${props.brew.brewId}`,
-
-		//account page when account is not defined
-		'50' : dedent`
-		## You are not signed in
-		
-		You are trying to access the account page, but are not signed in to an account.
-		
-		Please login or signup at our [login page](https://www.naturalcrit.com/login?redirect=https://homebrewery.naturalcrit.com/account).`,
-
-		// Brew locked by Administrators error
-		'51' : dedent`
-		## This brew has been locked.
-		
-		Only an author may request that this lock is removed.
-		
-		:
-
-		**Brew ID:**  ${props.brew.brewId}
-		
-		**Brew Title:** ${escape(props.brew.brewTitle)}`,
-
-		// ####### Admin page error #######
-		'52' : dedent`
-		## Access Denied
-		You need to provide correct administrator credentials to access this page.`,
-
-		'90' : dedent` An unexpected error occurred while looking for these brews.  
-            Try again in a few minutes.`,
-
-		'91' : dedent` An unexpected error occurred while trying to get the total of brews.`,
 	};
 };
 
-module.exports = errorIndex;
+module.exports = errorIndex;

client/homebrew/pages/hijackPrint.js

@@ -0,0 +1,12 @@
+//TODO: Depricate
+
+module.exports = function(shareId){
+	return function(event){
+		event = event || window.event;
+		if((event.ctrlKey || event.metaKey) && event.keyCode == 80){
+			const win = window.open(`/homebrew/print/${shareId}?dialog=true`, '_blank');
+			win.focus();
+			event.preventDefault();
+		}
+	};
+};

client/homebrew/pages/homePage/homePage.jsx

@@ -1,19 +1,19 @@
 require('./homePage.less');
 const React = require('react');
 const createClass = require('create-react-class');
+const _ = require('lodash');
 const cx = require('classnames');
-import request from '../../utils/request-middleware.js';
+const request = require('../../utils/request-middleware.js');
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
-const VaultNavItem = require('../../navbar/vault.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
-const { fetchThemeBundle } = require('../../../../shared/helpers.js');
+
 
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
@@ -31,22 +31,11 @@ const HomePage = createClass({
 	},
 	getInitialState : function() {
 		return {
-			brew                       : this.props.brew,
-			welcomeText                : this.props.brew.text,
-			error                      : undefined,
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			themeBundle                : {}
+			brew        : this.props.brew,
+			welcomeText : this.props.brew.text,
+			error       : undefined
 		};
 	},
-
-	editor : React.createRef(null),
-
-	componentDidMount : function() {
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
-	},
-
 	handleSave : function(){
 		request.post('/api')
 			.send(this.state.brew)
@@ -60,24 +49,11 @@ const HomePage = createClass({
 			});
 	},
 	handleSplitMove : function(){
-		this.editor.current.update();
+		this.refs.editor.update();
 	},
-
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
-
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
-
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
-	},
-
 	handleTextChange : function(text){
 		this.setState((prevState)=>({
-			brew : { ...prevState.brew, text: text },
+			brew : { ...prevState.brew, text: text }
 		}));
 	},
 	renderNavbar : function(){
@@ -89,7 +65,6 @@ const HomePage = createClass({
 				}
 				<NewBrewItem />
 				<HelpNavItem />
-				<VaultNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
@@ -100,33 +75,20 @@ const HomePage = createClass({
 		return <div className='homePage sitePage'>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
 			{this.renderNavbar()}
-			<div className="content">
-			<SplitPane onDragFinish={this.handleSplitMove}>
-				<Editor
-					ref={this.editor}
-					brew={this.state.brew}
-					onTextChange={this.handleTextChange}
-					renderer={this.state.brew.renderer}
-					showEditButtons={false}
-					snippetBundle={this.state.themeBundle.snippets}
-					onCursorPageChange={this.handleEditorCursorPageChange}
-					onViewPageChange={this.handleEditorViewPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-				/>
-				<BrewRenderer
-					text={this.state.brew.text}
-					style={this.state.brew.style}
-					renderer={this.state.brew.renderer}
-					onPageChange={this.handleBrewRendererPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-					themeBundle={this.state.themeBundle}
-				/>
-			</SplitPane>
+
+			<div className='content'>
+				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+					<Editor
+						ref='editor'
+						brew={this.state.brew}
+						onTextChange={this.handleTextChange}
+						renderer={this.state.brew.renderer}
+						showEditButtons={false}
+					/>
+					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer}/>
+				</SplitPane>
 			</div>
+
 			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
 				Save current <i className='fas fa-save' />
 			</div>

client/homebrew/pages/homePage/welcome_msg.md

@@ -16,9 +16,9 @@ The Homebrewery makes the creation and sharing of authentic looking Fifth-Editio
 **Try it!** Simply edit the text on the left and watch it *update live* on the right. Note that not every button is visible on this demo page. Click New {{fas,fa-plus-square}} in the navbar above to start brewing with all the features!
 
 ### Editing and Sharing
-When you create a new homebrew document ("brew"), your document will be given a *edit link* and a *share link*.
+When you create your own homebrew, you will be given a *edit url* and a *share url*.
 
-The *edit link* is where you write your brew. If you edit a brew while logged in, you are added as one of the brew's authors, and no one else can edit that brew until you add them as a new author via the {{fa,fa-info-circle}} **Properties** tab. Brews without any author can still be edited by anyone with the *edit link*, so be careful about who you share it with if you prefer to work without an account.
+Any changes you make while on the *edit url* will be automatically saved to the database within a few seconds. Anyone with the edit url will be able to make edits to your homebrew, so be careful about who you share it with.
 
 Anyone with the *share url* will be able to access a read-only version of your homebrew.
 
@@ -48,45 +48,45 @@ If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,
 
 \column
 
-## V3 vs Legacy
-The Homebrewery has two renderers: Legacy and V3. The V3 renderer is recommended for all users because it is more powerful, more customizable, and continues to receive new feature updates while Legacy does not. However Legacy mode will remain available for older brews and veteran users.
-	
-At any time, any individual brew can be changed to your renderer of choice via the {{fa,fa-info-circle}} **Properties** tab on your brew. However, converting between Legacy and V3 may require heavily tweaking the document; while both renderers can use raw HTML, V3 prefers a streamlined curly bracket syntax that avoids the complex HTML structures required by Legacy.
+## New in V3.0.0
+We've implemented an extended Markdown-like syntax for block and span elements, plus a few other changes, eliminating the need for HTML tags like `div` and `span` in most cases. No raw HTML tags should be needed in a brew (*but can still be used if you insist*).
 
+Much of the syntax and styling has changed in V3, so converting a Legacy brew to V3 (or vice-versa) will require tweaking your document. *However*, all brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "Legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew at any time.
+
+Scroll down to the next page for a brief summary of the changes and new features available in V3!
 
-Scroll down to the next page for a brief summary of the changes and features available in V3!
 #### New Things All The Time!
 Check out the latest updates in the full changelog [here](/changelog).
 
 ### Helping out
-Like this tool? Head over to our [Patreon](https://www.patreon.com/Naturalcrit) to help us keep the servers running.
+Like this tool? Want to buy me a beer? [Head here](https://www.patreon.com/Naturalcrit) to help me keep the servers running.
 
-
-This tool will **always** be free, never have ads, and we will never offer any "premium" features or whatever.
+This tool will **always** be free, never have ads, and I will never offer any "premium" features or whatever.
 
 ### Bugs, Issues, Suggestions?
-- Check the [Frequently Asked Questions](/faq) page first for quick answers.
-- Get help or the right look for your brew by posting on [r/Homebrewery](https://www.reddit.com/r/homebrewery/submit?selftext=true&title=%5BIssue%5D%20Describe%20Your%20Issue%20Here) or joining the [Discord Of Many Things](https://discord.gg/by3deKx).
-- Report technical issues or provide feedback on the [GitHub Repo](https://github.com/naturalcrit/homebrewery/).
+Take a quick look at our [Frequently Asked Questions page](/faq) to see if your question has a handy answer.
+
+Need help getting started or just the right look for your brew? Head to [r/Homebrewery](https://www.reddit.com/r/homebrewery/submit?selftext=true&title=%5BIssue%5D%20Describe%20Your%20Issue%20Here) and let us know!
+
+Have an idea to make The Homebrewery better? Or did you find something that wasn't quite right? Check out the [GitHub Repo](https://github.com/naturalcrit/homebrewery/) to report technical issues.
 
 ### Legal Junk
 The Homebrewery is licensed using the [MIT License](https://github.com/naturalcrit/homebrewery/blob/master/license). Which means you are free to use The Homebrewery codebase any way that you want, except for claiming that you made it yourself.
 
 If you wish to sell or in some way gain profit for what's created on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used.
-#### Crediting Us
-If you'd like to credit us in your brew, we'd be flattered! Just reference that you made it with The Homebrewery.
+
+#### Crediting Me
+If you'd like to credit me in your brew, I'd be flattered! Just reference that you made it with The Homebrewery.
 
 ### More Homebrew Resources
-[![Discord](/assets/discordOfManyThings.svg){width:50px,float:right,padding-left:10px}](https://discord.gg/by3deKx)
-
-If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The [Discord Of Many Things](https://discord.gg/by3deKx) is another great resource to connect with fellow homebrewers for help and feedback.
-
+<a href='https://discord.gg/by3deKx' target='_blank'><img src='/assets/discordOfManyThings.svg' alt='Discord of Many Things Logo' title='Discord of Many Things Logo' style='width:50px; float: right; padding-left: 10px;'/></a>
+If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The <a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things'>Discord of Many Things</a> is another great resource to connect with fellow homebrewers for help and feedback.
 
 {{position:absolute;top:20px;right:20px;width:auto
-[![Discord](/assets/discord.png){height:30px}](https://discord.gg/by3deKx)
-[![Github](/assets/github.png){height:30px}](https://github.com/naturalcrit/homebrewery)
-[![Patreon](/assets/patreon.png){height:30px}](https://patreon.com/NaturalCrit)
-[![Reddit](/assets/reddit.png){height:30px}](https://www.reddit.com/r/homebrewery/)
+<a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things' style='color: black;'><img src='/assets/discord.png' style='height:30px'/></a>
+<a href='https://github.com/naturalcrit/homebrewery' target='_blank' title='Github' style='color: black; padding-left: 5px;'><img src='/assets/github.png' style='height:30px'/></a>
+<a href='https://patreon.com/NaturalCrit' target='_blank' title='Patreon' style='color: black; padding-left: 5px;'><img src='/assets/patreon.png' style='height:30px'/></a>
+<a href='https://www.reddit.com/r/homebrewery/' target='_blank' title='Reddit' style='color: black; padding-left: 5px;'><img src='/assets/reddit.png' style='height:30px'/></a>
 }}
 
 \page
@@ -94,10 +94,11 @@ If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](
 ## Markdown+
 The Homebrewery aims to make homebrewing as simple as possible, providing a live editor with Markdown syntax that is more human-readable and faster to write with than raw HTML.
 
-From version 3.0.0, with a goal of adding maximum flexibility without users resorting to complex HTML to accomplish simple tasks, Homebrewery provides an extended verision of Markdown with additional syntax.
+In version 3.0.0, with a goal of adding maximum flexibility without users resorting to complex HTML to accomplish simple tasks, Homebrewery provides an extended verision of Markdown with additional syntax.
+**You can enable V3 via the {{fa,fa-info-circle}} Properties button!**
 
 ### Curly Brackets
-Standard Markdown lacks several equivalences to HTML. Hence, we have introduced `{{ }}` as a replacement for `<span></span>` and `<div></div>` for a cleaner custom formatting. Inline spans and block elements can be created and given ID's and Classes, as well as CSS properties, each of which are comma separated with no spaces. Use double quotes if a value requires spaces. Spans and Blocks start the same:
+The biggest change in V3 is the replacement of `<span></span>` and `<div></div>` with `{{ }}` for a cleaner custom formatting.  Inline spans and block elements can be created and given ID's and Classes, as well as css properties, each of which are comma separated with no spaces. Use double quotes if a value requires spaces. Spans and Blocks start the same:
 
 #### Span
 My favorite author is {{pen,#author,color:orange,font-family:"trebuchet ms" Brandon Sanderson}}.  The orange text has a class of `pen`, an id of `author`, is colored orange, and given a new font. The first space outside of quotes marks the beginning of the content.
@@ -125,18 +126,16 @@ A blank line can be achieved with a run of one or more `:` alone on a line. More
 
 ::
 
-
 Much nicer than `<br><br><br><br><br>`
 
 ### Definition Lists
 **Example** :: V3 uses HTML *definition lists* to create "lists" with hanging indents.
 
-
-
 ### Column Breaks
 Column and page breaks with `\column` and `\page`.
 
 \column
+
 ### Tables
 Tables now allow column & row spanning between cells. This is included in some updated snippets, but a simplified example is given below.
 
@@ -164,13 +163,13 @@ Using *Curly Injection* you can assign an id, classes, or inline CSS properties
 
 ![alt-text](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:100px,border:"2px solid",border-radius:10px}
 
-\* *When using Imgur-hosted images, use the "direct link", which can be found when you click into your image in the Imgur interface.*
+\* *When using Imgur-hosted images, use the "direct link", which can be found when you click into your image in the Imgur interace.*
 
 ## Snippets
 Homebrewery comes with a series of *code snippets* found at the top of the editor pane that make it easy to create brews as quickly as possible.  Just set your cursor where you want the code to appear in the editor pane, choose a snippet, and make the adjustments you need.
 
 ## Style Editor Panel
-{{fa,fa-paint-brush}} Usually overlooked or unused by some users, the **Style Editor** tab is located on the right side of the Snippet bar. This editor accepts CSS for styling without requiring `<style>` tags-- anything that would have gone inside style tags before can now be placed here, and snippets that insert CSS styles are now located on that tab.
+{{fa,fa-paint-brush}} Technically released prior to v3 but still new to many users, check out the new **Style Editor** located on the right side of the Snippet bar.  This editor accepts CSS for styling without requiring `<style>` tags-- anything that would have gone inside style tags before can now be placed here, and snippets that insert CSS styles are now located on that tab.
 
 {{pageNumber 2}}
 {{footnote PART 2 | BORING STUFF}}

client/homebrew/pages/newPage/newPage.jsx

@@ -2,12 +2,12 @@
 require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
-import request from '../../utils/request-middleware.js';
+const _ = require('lodash');
+const request = require('../../utils/request-middleware.js');
 
-import Markdown from 'naturalcrit/markdown.js';
+const Markdown = require('naturalcrit/markdown.js');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
-const PrintNavItem = require('../../navbar/print.navitem.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
@@ -19,12 +19,10 @@ const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
 
-const BREWKEY  = 'homebrewery-new';
+const BREWKEY = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
-const METAKEY  = 'homebrewery-new-meta';
-let SAVEKEY;
+const METAKEY = 'homebrewery-new-meta';
 
 
 const NewPage = createClass({
@@ -39,20 +37,14 @@ const NewPage = createClass({
 		const brew = this.props.brew;
 
 		return {
-			brew                       : brew,
-			isSaving                   : false,
-			saveGoogle                 : (global.account && global.account.googleId ? true : false),
-			error                      : null,
-			htmlErrors                 : Markdown.validate(brew.text),
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			themeBundle                : {}
+			brew       : brew,
+			isSaving   : false,
+			saveGoogle : (global.account && global.account.googleId ? true : false),
+			error      : null,
+			htmlErrors : Markdown.validate(brew.text)
 		};
 	},
 
-	editor : React.createRef(null),
-
 	componentDidMount : function() {
 		document.addEventListener('keydown', this.handleControlKeys);
 
@@ -70,25 +62,16 @@ const NewPage = createClass({
 			brew.renderer = metaStorage?.renderer ?? brew.renderer;
 			brew.theme    = metaStorage?.theme    ?? brew.theme;
 			brew.lang     = metaStorage?.lang     ?? brew.lang;
+
+			this.setState({
+				brew : brew
+			});
 		}
 
-		SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
-		const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';
-
-		this.setState({
-			brew       : brew,
-			saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle)
-		});
-
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
-
 		localStorage.setItem(BREWKEY, brew.text);
 		if(brew.style)
 			localStorage.setItem(STYLEKEY, brew.style);
 		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme, 'lang': brew.lang }));
-		if(window.location.pathname != '/new') {
-			window.history.replaceState({}, window.location.title, '/new/');
-		}
 	},
 	componentWillUnmount : function() {
 		document.removeEventListener('keydown', this.handleControlKeys);
@@ -99,7 +82,7 @@ const NewPage = createClass({
 		const S_KEY = 83;
 		const P_KEY = 80;
 		if(e.keyCode == S_KEY) this.save();
-		if(e.keyCode == P_KEY) printCurrentBrew();
+		if(e.keyCode == P_KEY) this.print();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
 			e.preventDefault();
@@ -107,19 +90,7 @@ const NewPage = createClass({
 	},
 
 	handleSplitMove : function(){
-		this.editor.current.update();
-	},
-
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
-
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
-
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
+		this.refs.editor.update();
 	},
 
 	handleTextChange : function(text){
@@ -129,7 +100,7 @@ const NewPage = createClass({
 
 		this.setState((prevState)=>({
 			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors,
+			htmlErrors : htmlErrors
 		}));
 		localStorage.setItem(BREWKEY, text);
 	},
@@ -141,10 +112,7 @@ const NewPage = createClass({
 		localStorage.setItem(STYLEKEY, style);
 	},
 
-	handleMetaChange : function(metadata, field=undefined){
-		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
-			fetchThemeBundle(this, metadata.renderer, metadata.theme);
-
+	handleMetaChange : function(metadata){
 		this.setState((prevState)=>({
 			brew : { ...prevState.brew, ...metadata },
 		}), ()=>{
@@ -164,6 +132,8 @@ const NewPage = createClass({
 			isSaving : true
 		});
 
+		console.log('saving new brew');
+
 		let brew = this.state.brew;
 		// Split out CSS to Style if CSS codefence exists
 		if(brew.text.startsWith('```css') && brew.text.indexOf('```\n\n') > 0) {
@@ -173,10 +143,12 @@ const NewPage = createClass({
 		}
 
 		brew.pageCount=((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
+
 		const res = await request
 			.post(`/api${this.state.saveGoogle ? '?saveToGoogle=true' : ''}`)
 			.send(brew)
 			.catch((err)=>{
+				console.log(err);
 				this.setState({ isSaving: false, error: err });
 			});
 		if(!res) return;
@@ -200,6 +172,16 @@ const NewPage = createClass({
 		}
 	},
 
+	print : function(){
+		window.open('/print?dialog=true&local=print', '_blank');
+	},
+
+	renderLocalPrintButton : function(){
+		return <Nav.item color='purple' icon='far fa-file-pdf' onClick={this.print}>
+			get PDF
+		</Nav.item>;
+	},
+
 	renderNavbar : function(){
 		return <Navbar>
 
@@ -212,7 +194,7 @@ const NewPage = createClass({
 					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
 					this.renderSaveButton()
 				}
-				<PrintNavItem />
+				{this.renderLocalPrintButton()}
 				<HelpNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
@@ -223,38 +205,18 @@ const NewPage = createClass({
 	render : function(){
 		return <div className='newPage sitePage'>
 			{this.renderNavbar()}
-			<div className="content">
-			<SplitPane onDragFinish={this.handleSplitMove}>
-				<Editor
-					ref={this.editor}
-					brew={this.state.brew}
-					onTextChange={this.handleTextChange}
-					onStyleChange={this.handleStyleChange}
-					onMetaChange={this.handleMetaChange}
-					renderer={this.state.brew.renderer}
-					userThemes={this.props.userThemes}
-					snippetBundle={this.state.themeBundle.snippets}
-					onCursorPageChange={this.handleEditorCursorPageChange}
-					onViewPageChange={this.handleEditorViewPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-				/>
-				<BrewRenderer
-					text={this.state.brew.text}
-					style={this.state.brew.style}
-					renderer={this.state.brew.renderer}
-					theme={this.state.brew.theme}
-					themeBundle={this.state.themeBundle}
-					errors={this.state.htmlErrors}
-					lang={this.state.brew.lang}
-					onPageChange={this.handleBrewRendererPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-					allowPrint={true}
-				/>
-			</SplitPane>
+			<div className='content'>
+				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+					<Editor
+						ref='editor'
+						brew={this.state.brew}
+						onTextChange={this.handleTextChange}
+						onStyleChange={this.handleStyleChange}
+						onMetaChange={this.handleMetaChange}
+						renderer={this.state.brew.renderer}
+					/>
+					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer} theme={this.state.brew.theme} lang={this.state.brew.lang} errors={this.state.htmlErrors}/>
+				</SplitPane>
 			</div>
 		</div>;
 	}

client/homebrew/pages/printPage/printPage.jsx

@@ -0,0 +1,110 @@
+require('./printPage.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const _     = require('lodash');
+const cx    = require('classnames');
+const { Meta } = require('vitreum/headtags');
+const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
+const Markdown = require('naturalcrit/markdown.js');
+
+const Themes = require('themes/themes.json');
+
+const BREWKEY = 'homebrewery-new';
+const STYLEKEY = 'homebrewery-new-style';
+const METAKEY = 'homebrewery-new-meta';
+
+const PrintPage = createClass({
+	displayName     : 'PrintPage',
+	getDefaultProps : function() {
+		return {
+			query : {},
+			brew  : {
+				text     : '',
+				style    : '',
+				renderer : 'legacy'
+			}
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			brew : {
+				text     : this.props.brew.text     || '',
+				style    : this.props.brew.style    || undefined,
+				renderer : this.props.brew.renderer || 'legacy',
+				theme    : this.props.brew.theme    || '5ePHB'
+			}
+		};
+	},
+
+	componentDidMount : function() {
+		if(this.props.query.local == 'print'){
+			const brewStorage  = localStorage.getItem(BREWKEY);
+			const styleStorage = localStorage.getItem(STYLEKEY);
+			const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
+
+			this.setState((prevState, prevProps)=>{
+				return {
+					brew : {
+						text     : brewStorage,
+						style    : styleStorage,
+						renderer : metaStorage?.renderer || 'legacy',
+						theme    : metaStorage?.theme    || '5ePHB'
+					}
+				};
+			});
+		}
+
+		if(this.props.query.dialog) window.print();
+	},
+
+	renderStyle : function() {
+		if(!this.state.brew.style) return;
+		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.state.brew.style}\n</style>` }} />;
+	},
+
+	renderPages : function(){
+		if(this.state.brew.renderer == 'legacy') {
+			return _.map(this.state.brew.text.split('\\page'), (pageText, index)=>{
+				return <div
+					className='phb page'
+					id={`p${index + 1}`}
+					dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }}
+					key={index} />;
+			});
+		} else {
+			return _.map(this.state.brew.text.split(/^\\page$/gm), (pageText, index)=>{
+				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)
+				return (
+					<div className='page' id={`p${index + 1}`} key={index} >
+						<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
+					</div>
+				);
+			});
+		}
+
+	},
+
+	render : function(){
+		const rendererPath = this.state.brew.renderer == 'V3' ? 'V3' : 'Legacy';
+		const themePath    = this.state.brew.theme ?? '5ePHB';
+		const baseThemePath = Themes[rendererPath][themePath].baseTheme;
+
+		return <div>
+			<Meta name='robots' content='noindex, nofollow' />
+			<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
+			{baseThemePath &&
+				<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
+			}
+			<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
+			{/* Apply CSS from Style tab */}
+			{this.renderStyle()}
+			<div className='pages' ref='pages'>
+				{this.renderPages()}
+			</div>
+		</div>;
+	}
+});
+
+module.exports = PrintPage;

client/homebrew/pages/printPage/printPage.less

@@ -0,0 +1,3 @@
+.printPage{
+
+}

client/homebrew/pages/sharePage/sharePage.jsx

@@ -1,127 +1,90 @@
 require('./sharePage.less');
 const React = require('react');
-const { useState, useEffect, useCallback } = React;
+const createClass = require('create-react-class');
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const MetadataNav = require('../../navbar/metadata.navitem.jsx');
-const PrintNavItem = require('../../navbar/print.navitem.jsx');
+const PrintLink = require('../../navbar/print.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
+
+
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
 
-const SharePage = (props)=>{
-	const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;
+const SharePage = createClass({
+	displayName     : 'SharePage',
+	getDefaultProps : function() {
+		return {
+			brew : DEFAULT_BREW_LOAD
+		};
+	},
 
-	const [state, setState] = useState({
-		themeBundle                : {},
-		currentBrewRendererPageNum : 1,
-	});
+	componentDidMount : function() {
+		document.addEventListener('keydown', this.handleControlKeys);
+	},
 
-	const handleBrewRendererPageChange = useCallback((pageNumber)=>{
-		setState((prevState)=>({
-			currentBrewRendererPageNum : pageNumber,
-			...prevState }));
-	}, []);
+	componentWillUnmount : function() {
+		document.removeEventListener('keydown', this.handleControlKeys);
+	},
 
-	const handleControlKeys = (e)=>{
+	handleControlKeys : function(e){
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const P_KEY = 80;
-		if(e.keyCode === P_KEY) {
-			printCurrentBrew();
+		if(e.keyCode == P_KEY){
+			window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
 			e.stopPropagation();
 			e.preventDefault();
 		}
-	};
+	},
 
-	useEffect(()=>{
-		document.addEventListener('keydown', handleControlKeys);
-		fetchThemeBundle(
-			{ setState },
-			brew.renderer,
-			brew.theme
-		);
+	processShareId : function() {
+		return this.props.brew.googleId && !this.props.brew.stubbed ?
+					 this.props.brew.googleId + this.props.brew.shareId :
+					 this.props.brew.shareId;
+	},
 
-		return ()=>{
-			document.removeEventListener('keydown', handleControlKeys);
-		};
-	}, []);
-
-	const processShareId = ()=>{
-		return brew.googleId && !brew.stubbed ? brew.googleId + brew.shareId : brew.shareId;
-	};
-
-	const renderEditLink = ()=>{
-		if(!brew.editId) return null;
-
-		const editLink = brew.googleId && ! brew.stubbed ? brew.googleId + brew.editId : brew.editId;
-
-		return (
-			<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
-				edit
-			</Nav.item>
-		);
-	};
-
-	const titleEl = (
-		<Nav.item className='brewTitle' style={disableMeta ? { cursor: 'default' } : {}}>
-			{brew.title}
-		</Nav.item>
-	);
-
-	return (
-		<div className='sharePage sitePage'>
+	render : function(){
+		return <div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
 			<Navbar>
 				<Nav.section className='titleSection'>
-					{disableMeta ? titleEl : <MetadataNav brew={brew}>{titleEl}</MetadataNav>}
+					<MetadataNav brew={this.props.brew}>
+						<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+					</MetadataNav>
 				</Nav.section>
 
 				<Nav.section>
-					{brew.shareId && (
-						<>
-							<PrintNavItem />
-							<Nav.dropdown>
-								<Nav.item color='red' icon='fas fa-code'>
-									source
-								</Nav.item>
-								<Nav.item color='blue' icon='fas fa-eye' href={`/source/${processShareId()}`}>
-									view
-								</Nav.item>
-								{renderEditLink()}
-								<Nav.item color='blue' icon='fas fa-download' href={`/download/${processShareId()}`}>
-									download
-								</Nav.item>
-								<Nav.item color='blue' icon='fas fa-clone' href={`/new/${processShareId()}`}>
-									clone to new
-								</Nav.item>
-							</Nav.dropdown>
-						</>
-					)}
-					<RecentNavItem brew={brew} storageKey='view' />
+					{this.props.brew.shareId && <>
+						<PrintLink shareId={this.processShareId()} />
+						<Nav.dropdown>
+							<Nav.item color='red' icon='fas fa-code'>
+								source
+							</Nav.item>
+							<Nav.item color='blue' href={`/source/${this.processShareId()}`}>
+								view
+							</Nav.item>
+							<Nav.item color='blue' href={`/download/${this.processShareId()}`}>
+								download
+							</Nav.item>
+							<Nav.item color='blue' href={`/new/${this.processShareId()}`}>
+								clone to new
+							</Nav.item>
+						</Nav.dropdown>
+					</>}
+					<RecentNavItem brew={this.props.brew} storageKey='view' />
 					<Account />
 				</Nav.section>
 			</Navbar>
 
 			<div className='content'>
-				<BrewRenderer
-					text={brew.text}
-					style={brew.style}
-					lang={brew.lang}
-					renderer={brew.renderer}
-					theme={brew.theme}
-					themeBundle={state.themeBundle}
-					onPageChange={handleBrewRendererPageChange}
-					currentBrewRendererPageNum={state.currentBrewRendererPageNum}
-					allowPrint={true}
-				/>
+				<BrewRenderer text={this.props.brew.text} style={this.props.brew.style} renderer={this.props.brew.renderer} theme={this.props.brew.theme} />
 			</div>
-		</div>
-	);
-};
+		</div>;
+	}
+});
 
 module.exports = SharePage;

client/homebrew/pages/sharePage/sharePage.less

@@ -1,5 +1,5 @@
 .sharePage{
-	nav .navSection.titleSection {
+	.navContent .navSection.titleSection {
 		flex-grow: 1;
 		justify-content: center;
 	}

client/homebrew/pages/userPage/userPage.jsx

@@ -1,60 +1,81 @@
 const React = require('react');
-const { useState } = React;
-const _ = require('lodash');
+const createClass = require('create-react-class');
+const _     = require('lodash');
+const cx    = require('classnames');
 
 const ListPage = require('../basePages/listPage/listPage.jsx');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
+
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
-const VaultNavitem = require('../../navbar/vault.navitem.jsx');
 
-const UserPage = (props)=>{
-	props = {
-		username : '',
-		brews    : [],
-		query    : '',
-		...props
-	};
+const UserPage = createClass({
+	displayName     : 'UserPage',
+	getDefaultProps : function() {
+		return {
+			username : '',
+			brews    : [],
+			query    : '',
+			error    : null
+		};
+	},
+	getInitialState : function() {
+		const usernameWithS = this.props.username + (this.props.username.endsWith('s') ? `’` : `’s`);
 
-	const [error, setError] = useState(null);
+		const brews = _.groupBy(this.props.brews, (brew)=>{
+			return (brew.published ? 'published' : 'private');
+		});
 
-	const usernameWithS = props.username + (props.username.endsWith('s') ? `’` : `’s`);
-	const groupedBrews = _.groupBy(props.brews, (brew)=>brew.published ? 'published' : 'private');
+		const brewCollection = [
+			{
+				title : `${usernameWithS} published brews`,
+				class : 'published',
+				brews : brews.published
+			}
+		];
+		if(this.props.username == global.account?.username){
+			brewCollection.push(
+				{
+					title : `${usernameWithS} unpublished brews`,
+					class : 'unpublished',
+					brews : brews.private
+				}
+			);
+		}
 
-	const brewCollection = [
-		{
-			title : `${usernameWithS} published brews`,
-			class : 'published',
-			brews : groupedBrews.published || []
-		},
-		...(props.username === global.account?.username ? [{
-			title : `${usernameWithS} unpublished brews`,
-			class : 'unpublished',
-			brews : groupedBrews.private || []
-		}] : [])
-	];
+		return {
+			brewCollection : brewCollection
+		};
+	},
+	errorReported : function(error) {
+		this.setState({
+			error
+		});
+	},
 
-	const navItems = (
-		<Navbar>
+	navItems : function() {
+		return <Navbar>
 			<Nav.section>
-				{error && (<ErrorNavItem error={error} parent={null}></ErrorNavItem>)}
+				{this.state.error ?
+					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
+					null
+				}
 				<NewBrew />
 				<HelpNavItem />
-				<VaultNavitem />
 				<RecentNavItem />
 				<Account />
 			</Nav.section>
-		</Navbar>
-	);
+		</Navbar>;
+	},
 
-	return (
-		<ListPage brewCollection={brewCollection}  navItems={navItems} query={props.query} reportError={(err)=>setError(err)} />
-	);
-};
+	render : function(){
+		return <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()} query={this.props.query} reportError={this.errorReported}></ListPage>;
+	}
+});
 
 module.exports = UserPage;

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -1,431 +0,0 @@
-/*eslint max-lines: ["warn", {"max": 400, "skipBlankLines": true, "skipComments": true}]*/
-/*eslint max-params:["warn", { max: 10 }], */
-require('./vaultPage.less');
-
-const React = require('react');
-const { useState, useEffect, useRef } = React;
-
-const Nav           = require('naturalcrit/nav/nav.jsx');
-const Navbar        = require('../../navbar/navbar.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const Account       = require('../../navbar/account.navitem.jsx');
-const NewBrew       = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem   = require('../../navbar/help.navitem.jsx');
-const BrewItem      = require('../basePages/listPage/brewItem/brewItem.jsx');
-const SplitPane     = require('../../../../shared/naturalcrit/splitPane/splitPane.jsx');
-const ErrorIndex    = require('../errorPage/errors/errorIndex.js');
-
-import request from '../../utils/request-middleware.js';
-
-const VaultPage = (props)=>{
-	const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);
-
-	const [sortState, setSort] = useState(props.query.sort || 'title');
-	const [dirState, setdir] = useState(props.query.dir || 'asc');
-
-	//Response state
-	const [brewCollection, setBrewCollection] = useState(null);
-	const [totalBrews, setTotalBrews]         = useState(null);
-	const [searching, setSearching]           = useState(false);
-	const [error, setError]                   = useState(null);
-
-	const titleRef        = useRef(null);
-	const authorRef       = useRef(null);
-	const countRef        = useRef(null);
-	const v3Ref           = useRef(null);
-	const legacyRef       = useRef(null);
-	const submitButtonRef = useRef(null);
-
-	useEffect(()=>{
-		disableSubmitIfFormInvalid();
-		loadPage(pageState, true, props.query.sort, props.query.dir);
-	}, []);
-
-	const updateStateWithBrews = (brews, page)=>{
-		setBrewCollection(brews || null);
-		setPageState(parseInt(page) || 1);
-		setSearching(false);
-	};
-
-	const updateUrl = (titleValue, authorValue, countValue, v3Value, legacyValue, page, sort, dir)=>{
-		const url = new URL(window.location.href);
-		const urlParams = new URLSearchParams(url.search);
-
-		urlParams.set('title', titleValue);
-		urlParams.set('author', authorValue);
-		urlParams.set('count', countValue);
-		urlParams.set('v3', v3Value);
-		urlParams.set('legacy', legacyValue);
-		urlParams.set('page', page);
-		urlParams.set('sort', sort);
-		urlParams.set('dir', dir);
-
-		url.search = urlParams.toString();
-		window.history.replaceState(null, '', url.toString());
-	};
-
-	const performSearch = async (title, author, count, v3, legacy, page, sort, dir)=>{
-		updateUrl(title, author, count, v3, legacy, page, sort, dir);
-
-		const response = await request
-			.get(`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}&sort=${sort}&dir=${dir}`)
-			.catch((error)=>{
-				console.log('error at loadPage: ', error);
-				setError(error);
-				updateStateWithBrews([], 1);
-			});
-
-		if(response.ok)
-			updateStateWithBrews(response.body.brews, page);
-	};
-
-	const loadTotal = async (title, author, v3, legacy)=>{
-		setTotalBrews(null);
-
-		const response = await request.get(`/api/vault/total?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}`)
-		.catch((error)=>{
-			console.log('error at loadTotal: ', error);
-			setError(error);
-			updateStateWithBrews([], 1);
-		});
-
-		if(response.ok)
-			setTotalBrews(response.body.totalBrews);
-	};
-
-	const loadPage = async (page, updateTotal, sort, dir)=>{
-		if(!validateForm()) return;
-
-		setSearching(true);
-		setError(null);
-
-		const title  = titleRef.current.value || '';
-		const author = authorRef.current.value || '';
-		const count  = countRef.current.value || 10;
-		const v3     = v3Ref.current.checked != false;
-		const legacy = legacyRef.current.checked != false;
-		const sortOption = sort || 'title';
-		const dirOption = dir || 'asc';
-		const pageProp = page || 1;
-
-		setSort(sortOption);
-		setdir(dirOption);
-
-		performSearch(title, author, count, v3, legacy, pageProp, sortOption, dirOption);
-
-		if(updateTotal)
-			loadTotal(title, author, v3, legacy);
-	};
-
-	const renderNavItems = ()=>(
-		<Navbar>
-			<Nav.section>
-				<Nav.item className='brewTitle'>
-					Vault: Search for brews
-				</Nav.item>
-			</Nav.section>
-			<Nav.section>
-				<NewBrew />
-				<HelpNavItem />
-				<RecentNavItem />
-				<Account />
-			</Nav.section>
-		</Navbar>
-	);
-
-	const validateForm = ()=>{
-		//form validity: title or author must be written, and at least one renderer set
-		const isTitleValid      = titleRef.current.validity.valid && titleRef.current.value;
-		const isAuthorValid     = authorRef.current.validity.valid && authorRef.current.value;
-		const isCheckboxChecked = legacyRef.current.checked || v3Ref.current.checked;
-
-		const isFormValid = (isTitleValid || isAuthorValid) && isCheckboxChecked;
-
-		return isFormValid;
-	};
-
-	const disableSubmitIfFormInvalid = ()=>{
-		submitButtonRef.current.disabled = !validateForm();
-	};
-
-	const renderForm = ()=>(
-		<div className='brewLookup'>
-			<h2 className='formTitle'>Brew Lookup</h2>
-			<div className='formContents'>
-				<label>
-					Title of the brew
-					<input
-						ref={titleRef}
-						type='text'
-						name='title'
-						defaultValue={props.query.title || ''}
-						onKeyUp={disableSubmitIfFormInvalid}
-						pattern='.{3,}'
-						title='At least 3 characters'
-						onKeyDown={(e)=>{
-							if(e.key === 'Enter' && !submitButtonRef.current.disabled)
-								loadPage(1, true);
-						}}
-						placeholder='v3 Reference Document'
-					/>
-				</label>
-
-				<label>
-					Author of the brew
-					<input
-						ref={authorRef}
-						type='text'
-						name='author'
-						pattern='.{1,}'
-						defaultValue={props.query.author || ''}
-						onKeyUp={disableSubmitIfFormInvalid}
-						onKeyDown={(e)=>{
-							if(e.key === 'Enter' && !submitButtonRef.current.disabled)
-								loadPage(1, true);
-						}}
-						placeholder='Username'
-					/>
-				</label>
-
-				<label>
-					Results per page
-					<select ref={countRef} name='count' defaultValue={props.query.count || 20}>
-						<option value='10'>10</option>
-						<option value='20'>20</option>
-						<option value='40'>40</option>
-						<option value='60'>60</option>
-					</select>
-				</label>
-
-				<label>
-					<input
-						className='renderer'
-						ref={v3Ref}
-						type='checkbox'
-						defaultChecked={props.query.v3 !== 'false'}
-						onChange={disableSubmitIfFormInvalid}
-					/>
-					Search for v3 brews
-				</label>
-
-				<label>
-					<input
-						className='renderer'
-						ref={legacyRef}
-						type='checkbox'
-						defaultChecked={props.query.legacy !== 'false'}
-						onChange={disableSubmitIfFormInvalid}
-					/>
-					Search for legacy brews
-				</label>
-
-				<button
-					id='searchButton'
-					ref={submitButtonRef}
-					onClick={()=>{
-						loadPage(1, true);
-					}}
-				>
-					Search
-					<i
-						className={searching ? 'fas fa-spin fa-spinner': 'fas fa-search'}
-					/>
-				</button>
-			</div>
-			<legend>
-				<h3>Tips and tricks</h3>
-				<ul>
-					<li>
-						Only <b>published</b> brews are searchable via this tool
-					</li>
-					<li>
-						Usernames are case-sensitive
-					</li>
-					<li>
-						Use <code>"word"</code> to match an exact string,
-						and <code>-</code> to exclude words (at least one word must not be negated)
-					</li>
-					<li>
-						Some common words like "a", "after", "through", "itself", "here", etc.,
-						are ignored in searches. The full list can be found &nbsp;
-						<a href='https://github.com/mongodb/mongo/blob/0e3b3ca8480ddddf5d0105d11a94bd4698335312/src/mongo/db/fts/stop_words_english.txt'>
-							here
-						</a>
-					</li>
-				</ul>
-				<small>New features will be coming, such as filters and search by tags.</small>
-			</legend>
-		</div>
-	);
-
-	const renderSortOption = (optionTitle, optionValue)=>{
-		const oppositeDir = dirState === 'asc' ? 'desc' : 'asc';
-
-		return (
-			<div className={`sort-option ${sortState === optionValue ? `active` : ''}`}>
-				<button onClick={()=>loadPage(1, false, optionValue, oppositeDir)}>
-					{optionTitle}
-				</button>
-				{sortState === optionValue && (
-					<i className={`sortDir fas ${dirState === 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`} />
-				)}
-			</div>
-		);
-	};
-
-	const renderSortBar = ()=>{
-
-		return (
-			<div className='sort-container'>
-				{renderSortOption('Title', 'title', props.query.dir)}
-				{renderSortOption('Created Date', 'createdAt', props.query.dir)}
-				{renderSortOption('Updated Date', 'updatedAt', props.query.dir)}
-				{renderSortOption('Views', 'views', props.query.dir)}
-			</div>
-		);
-	};
-
-	const renderPaginationControls = ()=>{
-		if(!totalBrews) return null;
-
-		const countInt = parseInt(props.query.count || 20);
-		const totalPages = Math.ceil(totalBrews / countInt);
-
-		let startPage, endPage;
-		if(pageState <= 6) {
-			startPage = 1;
-			endPage = Math.min(totalPages, 10);
-		} else if(pageState + 4 >= totalPages) {
-			startPage = Math.max(1, totalPages - 9);
-			endPage = totalPages;
-		} else {
-			startPage = pageState - 5;
-			endPage = pageState + 4;
-		}
-
-		const pagesAroundCurrent = new Array(endPage - startPage + 1)
-			.fill()
-			.map((_, index)=>(
-				<a
-					key={startPage + index}
-					className={`pageNumber ${pageState === startPage + index ? 'currentPage' : ''}`}
-					onClick={()=>loadPage(startPage + index, false, sortState, dirState)}
-				>
-					{startPage + index}
-				</a>
-			));
-
-		return (
-			<div className='paginationControls'>
-				<button
-					className='previousPage'
-					onClick={()=>loadPage(pageState - 1, false, sortState, dirState)}
-					disabled={pageState === startPage}
-				>
-					<i className='fa-solid fa-chevron-left'></i>
-				</button>
-				<ol className='pages'>
-					{startPage > 1 && (
-						<a
-							className='pageNumber firstPage'
-							onClick={()=>loadPage(1, false, sortState, dirState)}
-						>
-							1 ...
-						</a>
-					)}
-					{pagesAroundCurrent}
-					{endPage < totalPages && (
-						<a
-							className='pageNumber lastPage'
-							onClick={()=>loadPage(totalPages, false, sortState, dirState)}
-						>
-							... {totalPages}
-						</a>
-					)}
-				</ol>
-				<button
-					className='nextPage'
-					onClick={()=>loadPage(pageState + 1, false, sortState, dirState)}
-					disabled={pageState === totalPages}
-				>
-					<i className='fa-solid fa-chevron-right'></i>
-				</button>
-			</div>
-		);
-	};
-
-	const renderFoundBrews = ()=>{
-		if(searching) {
-			return (
-				<div className='foundBrews searching'>
-					<h3 className='searchAnim'>Searching</h3>
-				</div>
-			);
-		}
-
-		if(error) {
-			const errorText = ErrorIndex()[error.HBErrorCode.toString()] || '';
-
-			return (
-				<div className='foundBrews noBrews'>
-					<h3>Error: {errorText}</h3>
-				</div>
-			);
-		}
-
-		if(!brewCollection) {
-			return (
-				<div className='foundBrews noBrews'>
-					<h3>No search yet</h3>
-				</div>
-			);
-		}
-
-		if(brewCollection.length === 0) {
-			return (
-				<div className='foundBrews noBrews'>
-					<h3>No brews found</h3>
-				</div>
-			);
-		}
-
-		return (
-			<div className='foundBrews'>
-				<span className='totalBrews'>
-					{`Brews found: `}
-					<span>{totalBrews}</span>
-				</span>
-				{brewCollection.map((brew, index)=>{
-					return (
-						<BrewItem
-							brew={{ ...brew }}
-							key={index}
-							reportError={props.reportError}
-							renderStorage={false}
-						/>
-					);
-				})}
-				{renderPaginationControls()}
-			</div>
-		);
-	};
-
-	return (
-		<div className='sitePage vaultPage'>
-			<link href='/themes/V3/Blank/style.css' rel='stylesheet' />
-			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet' />
-			{renderNavItems()}
-			<div className="content">
-			<SplitPane showDividerButtons={false}>
-				<div className='form dataGroup'>{renderForm()}</div>
-				<div className='resultsContainer dataGroup'>
-					{renderSortBar()}
-					{renderFoundBrews()}
-				</div>
-			</SplitPane>
-			</div>
-		</div>
-	);
-};
-
-module.exports = VaultPage;

client/homebrew/pages/vaultPage/vaultPage.less

@@ -1,358 +0,0 @@
-.vaultPage {
-	height           : 100%;
-	overflow-y       : hidden;
-	background-color : #2C3E50;
-
-	*:not(input) { user-select : none; }
-
-	.content .dataGroup {
-		width      : 100%;
-		height     : 100%;
-		background : white;
-
-		&.form .brewLookup {
-			position : relative;
-			padding  : 50px clamp(20px, 4vw, 50px);
-
-			small {
-				font-size : 10pt;
-				color     : #555555;
-			
-				a { color : #333333; }
-			}
-
-			code {
-				padding-inline : 5px;
-				font-family    : monospace;
-				background     : lightgrey;
-				border-radius  : 5px;
-			}
-
-			h1, h2, h3, h4 {
-				font-family    : 'CodeBold';
-				letter-spacing : 2px;
-			}
-				
-			legend {
-				h3 {
-					margin-block  : 30px 20px;
-					font-size     : 20px;
-					text-align    : center;
-					border-bottom : 2px solid;
-				}
-				ul {
-					padding-inline : 30px 10px;
-					li {
-						margin-block : 5px;
-						line-height  : calc(1em + 5px);
-						list-style   : disc;
-					}
-				} 
-			}
-
-			&::after {
-				position    : absolute;
-				top         : 0;
-				right       : 0;
-				left        : 0;
-				display     : block;
-				padding     : 10px;
-				font-weight : 900;
-				color       : white;
-				white-space : pre-wrap;
-				content     : 'Error:\A At least one renderer should be enabled to make a search';
-				background  : rgb(255, 60, 60);
-				opacity     : 0;
-				transition  : opacity 0.5s;
-			}
-			&:not(:has(input[type='checkbox']:checked))::after { opacity : 1; }
-
-			.formTitle {
-				margin        : 20px 0;
-				font-size     : 30px;
-				color         : black;
-				text-align    : center;
-				border-bottom : 2px solid;
-			}
-
-			.formContents {
-				position       : relative;
-				display        : flex;
-				flex-direction : column;
-
-				label {
-					display     : flex;
-					align-items : center; 
-					margin      : 10px 0;
-				}
-				select { margin : 0 10px; }
-
-				input { 
-					margin   : 0 10px; 
-
-					&:invalid { background : rgb(255, 188, 181); }
-					
-					
-				}
-
-				#searchButton {
-					.colorButton(@green);
-					position : absolute;
-					right    : 20px;
-					bottom   : 0;
-
-					i {
-						margin-left         : 10px;
-						animation-duration  : 1000s;
-					}
-				}
-			}
-		}
-
-		&.resultsContainer {
-			display        : flex;
-			flex-direction : column;
-			height         : 100%;
-			overflow-y     : auto;
-			font-size      : 0.34cm;
-				
-			h3 {
-				font-family : 'Open Sans';
-				font-weight : 900;
-				color       : white;
-			}
-
-			.sort-container {
-				display               : flex;
-				flex-wrap             : wrap;
-				column-gap            : 15px;
-				justify-content       : center;
-				height                : 30px;
-				color                 : white;
-				background-color      : #555555;
-				border-top            : 1px solid #666666;
-				border-bottom         : 1px solid #666666;
-					
-				.sort-option {
-					display     : flex;
-					align-items : center;
-					padding     : 0 8px;
-				
-					&:hover { background-color : #444444; }
-				
-					&.active {
-						background-color : #333333;
-				
-						button {
-							font-weight : 800;
-							color       : white;
-								
-							& + .sortDir { padding-left : 5px; }
-						}
-					}
-
-					button {
-						padding          : 0;
-						font-size        : 11px;
-						font-weight      : normal;
-						color            : #CCCCCC;
-						text-transform   : uppercase;
-						background-color : transparent;
-					
-						&:hover { background : none; }
-					}
-				}
-			}
-
-			.foundBrews {
-				position         : relative;
-				width            : 100%;
-				height           : 100%;
-				max-height       : 100%;
-				padding          : 50px 50px 70px 50px;
-				overflow-y       : scroll;
-				background-color : #2C3E50;
-
-				h3 { font-size : 25px; }
-
-				&.noBrews {
-					display     : grid;
-					place-items : center;
-					color       : white;
-				}
-
-				&.searching {
-					display     : grid;
-					place-items : center;
-					color       : white;
-
-					h3 { position : relative; }
-
-					h3.searchAnim::after {
-						position  : absolute;
-						top       : 50%;
-						right     : 0;
-						width     : max-content;
-						height    : 1em;
-						content   : '';
-						translate : calc(100% + 5px) -50%;
-						animation : trailingDots 2s ease infinite;
-					}
-				}
-
-				.totalBrews {
-					position         : fixed;
-					right            : 0;
-					bottom           : 0;
-					z-index          : 1000;
-					padding          : 8px 10px;
-					font-family      : 'Open Sans';
-					font-size        : 11px;
-					font-weight      : 800;
-					color            : white;
-					background-color : #333333;
-
-					.searchAnim {
-						position : relative;
-						display  : inline-block;
-						width    : 3ch;
-						height   : 1em;
-					}
-
-					.searchAnim::after {
-						position  : absolute;
-						top       : 50%;
-						right     : 0;
-						width     : max-content;
-						height    : 1em;
-						content   : '';
-						translate : -50% -50%;
-						animation : trailingDots 2s ease infinite;
-					}
-				}
-
-				.brewItem {
-					width            : 47%;
-					margin-right     : 40px;
-					color            : black;
-					isolation        : isolate;
-						
-					&::after {
-						position         : absolute;
-						inset            : 0;
-						z-index          : -2;
-						display          : block;
-						content          : '';
-						background-image : url('/assets/parchmentBackground.jpg');
-					}
-
-					&:nth-child(even of .brewItem) { margin-right : 0; }
-
-					h2 {
-						font-family : 'MrEavesRemake';
-						font-size   : 0.75cm;
-						font-weight : 800;
-						line-height : 0.988em;
-						color       : var(--HB_Color_HeaderText);
-					}
-					.info {
-						position    : relative;
-						z-index     : 2;
-						font-family : 'ScalySansRemake';
-						font-size   : 1.2em;
-
-						>span {
-							margin-right : 12px;
-							line-height  : 1.5em;
-						}
-					}
-					.links { z-index : 2; }
-
-					hr {
-						margin     : 0px;
-						visibility : hidden;
-					}
-
-					.thumbnail { z-index : -1; }
-				}
-
-				.paginationControls {
-					position              : absolute;
-					left                  : 50%;
-					display               : grid;
-					grid-template-areas   : 'previousPage currentPage nextPage';
-					grid-template-columns : 50px 1fr 50px;
-					place-items           : center;
-					width                 : auto;
-					translate             : -50%;
-
-					.pages {
-						display         : flex;
-						grid-area       : currentPage;
-						justify-content : space-evenly;
-						width           : 100%;
-						height          : 100%;
-						padding         : 5px 8px;
-						text-align      : center;
-
-						.pageNumber {
-							margin-inline           : 1vw;
-							font-family             : 'Open Sans';
-							font-weight             : 900;
-							color                   : white;
-							text-underline-position : under;
-							text-wrap               : nowrap;
-							cursor                  : pointer;
-
-							&.currentPage {
-								color           : gold;
-								text-decoration : underline;
-								pointer-events  : none;
-							}
-
-							&.firstPage { margin-right : -5px; }
-
-							&.lastPage { margin-left : -5px; }
-						}
-					}
-
-					button {
-						.colorButton(@green);
-						width : max-content;
-
-						&.previousPage { grid-area : previousPage; }
-
-						&.nextPage { grid-area : nextPage; }
-					}
-
-				}
-			}
-		}
-	}
-	
-}
-
-@keyframes trailingDots {
-
-	0%,
-	32% { content : ' .'; }
-
-	33%,
-	65% { content : ' ..'; }
-
-	66%,
-	100% { content : ' ...'; }
-}
-
-// media query for when the page is smaller than 1079 px in width
-@media screen and (max-width : 1079px) {
-	.vaultPage {
-
-		.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }
-
-		.dataGroup.resultsContainer .foundBrews .brewItem {
-			width         : 100%;
-			margin-inline : auto;
-		}
-	}
-}

client/homebrew/utils/customIDBStore.js

@@ -1,19 +0,0 @@
-import * as IDB from 'idb-keyval/dist/index.js';
-
-export function initCustomStore(db, store){
-	const createCustomStore = async ()=>IDB.createStore(db, store);
-
-	return {
-		entries : async ()=>IDB.entries(await createCustomStore()),
-		keys    : async ()=>IDB.keys(await createCustomStore()),
-		values  : async ()=>IDB.values(await createCustomStore()),
-		clear   : async ()=>IDB.clear(await createCustomStore),
-		get     : async (key)=>IDB.get(key, await createCustomStore()),
-		getMany : async (keys)=>IDB.getMany(keys, await createCustomStore()),
-		set     : async (key, value)=>IDB.set(key, value, await createCustomStore()),
-		setMany : async (entries)=>IDB.setMany(entries, await createCustomStore()),
-		update  : async (key, updateFn)=>IDB.update(key, updateFn, await createCustomStore()),
-		del     : async (key)=>IDB.del(key, await createCustomStore()),
-		delMany : async (keys)=>IDB.delMany(keys, await createCustomStore())
-	};
-};

client/homebrew/utils/request-middleware.js

@@ -1,4 +1,4 @@
-import request from 'superagent';
+const request = require('superagent');
 
 const addHeader = (request)=>request.set('Homebrewery-Version', global.version);
 
@@ -9,4 +9,4 @@ const requestMiddleware = {
 	delete : (path)=>addHeader(request.delete(path)),
 };
 
-export default requestMiddleware;
+module.exports = requestMiddleware;

client/homebrew/utils/versionHistory.js

@@ -1,119 +0,0 @@
-import { initCustomStore } from './customIDBStore.js';
-
-export const HISTORY_PREFIX = 'HOMEBREWERY-HISTORY';
-export const HISTORY_SLOTS = 5;
-
-// History values in minutes
-const HISTORY_SAVE_DELAYS = {
-	'0' : 0,
-	'1' : 2,
-	'2' : 10,
-	'3' : 60,
-	'4' : 12 * 60,
-	'5' : 2 * 24 * 60
-};
-// const HISTORY_SAVE_DELAYS = {
-// 	'0' : 0,
-// 	'1' : 1,
-// 	'2' : 2,
-// 	'3' : 3,
-// 	'4' : 4,
-// 	'5' : 5
-// };
-
-const GARBAGE_COLLECT_DELAY = 28 * 24 * 60;
-// const GARBAGE_COLLECT_DELAY = 10;
-
-
-const HB_DB = 'HOMEBREWERY-DB';
-const HB_STORE = 'HISTORY';
-
-const IDB = initCustomStore(HB_DB, HB_STORE);
-
-function getKeyBySlot(brew, slot){
-	// Return a string representing the key for this brew and history slot
-	return `${HISTORY_PREFIX}-${brew.shareId}-${slot}`;
-};
-
-function parseBrewForStorage(brew, slot = 0) {
-	// Strip out unneeded object properties
-	// Returns an array of [ key, brew ]
-	const archiveBrew = {
-		title    : brew.title,
-		text     : brew.text,
-		style    : brew.style,
-		version  : brew.version,
-		shareId  : brew.shareId,
-		savedAt  : brew?.savedAt || new Date(),
-		expireAt : new Date()
-	};
-
-	archiveBrew.expireAt.setMinutes(archiveBrew.expireAt.getMinutes() + HISTORY_SAVE_DELAYS[slot]);
-
-	const key = getKeyBySlot(brew, slot);
-
-	return [key, archiveBrew];
-}
-
-export async function loadHistory(brew){
-	const DEFAULT_HISTORY_ITEM = { expireAt: '2000-01-01T00:00:00.000Z', shareId: brew.shareId, noData: true };
-
-	const historyKeys = [];
-
-	// Create array of all history keys
-	for (let i = 1; i <= HISTORY_SLOTS; i++){
-		historyKeys.push(getKeyBySlot(brew, i));
-	};
-
-	// Load all keys from IDB at once
-	const dataArray = await IDB.getMany(historyKeys);
-	return dataArray.map((data)=>{ return data ?? DEFAULT_HISTORY_ITEM; });
-}
-
-export async function updateHistory(brew) {
-	const history = await loadHistory(brew);
-
-	// Walk each version position
-	for (let slot = HISTORY_SLOTS - 1; slot >= 0; slot--){
-		const storedVersion = history[slot];
-
-		// If slot has expired, update all lower slots and break
-		if(new Date() >= new Date(storedVersion.expireAt)){
-
-			// Create array of arrays : [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]
-			// to pass to IDB.setMany
-			const historyUpdate = [];
-
-			for (let updateSlot = slot; updateSlot > 0; updateSlot--){
-				// Move data from updateSlot to updateSlot + 1
-				if(!history[updateSlot - 1]?.noData) {
-					historyUpdate.push(parseBrewForStorage(history[updateSlot - 1], updateSlot + 1));
-				}
-			};
-
-			// Update the most recent brew
-			historyUpdate.push(parseBrewForStorage(brew, 1));
-
-			await IDB.setMany(historyUpdate);
-
-			// Break out of data checks because we found an expired value
-			break;
-		}
-	};
-};
-
-export async function versionHistoryGarbageCollection(){
-	const entries = await IDB.entries();
-
-	const expiredKeys = [];
-	for (const [key, value] of entries){
-		const expireAt = new Date(value.savedAt);
-		expireAt.setMinutes(expireAt.getMinutes() + GARBAGE_COLLECT_DELAY);
-		if(new Date() > expireAt){
-			expiredKeys.push(key);
-		};
-	};
-	if(expiredKeys.length > 0){
-		await IDB.delMany(expiredKeys);
-	}
-};

client/icons/customIcons.less

@@ -1,84 +1,57 @@
 .fac {
-	display          : inline-block;
-	background-color : currentColor;
-	mask-size        : contain;
-	mask-repeat      : no-repeat;
-	mask-position    : center;
-	width            : 1em;
-	aspect-ratio     : 1;
+  display      : inline-block;
 }
 .position-top-left {
-  mask-image: url('../icons/position-top-left.svg');
+  content: url('../icons/position-top-left.svg');
 }
 .position-top-right {
-  mask-image: url('../icons/position-top-right.svg');
+  content: url('../icons/position-top-right.svg');
 }
 .position-bottom-left {
-  mask-image: url('../icons/position-bottom-left.svg');
+  content: url('../icons/position-bottom-left.svg');
 }
 .position-bottom-right {
-  mask-image: url('../icons/position-bottom-right.svg');
+  content: url('../icons/position-bottom-right.svg');
 }
 .position-top {
-  mask-image: url('../icons/position-top.svg');
+  content: url('../icons/position-top.svg');
 }
 .position-right {
-  mask-image: url('../icons/position-right.svg');
+  content: url('../icons/position-right.svg');
 }
 .position-bottom {
-  mask-image: url('../icons/position-bottom.svg');
+  content: url('../icons/position-bottom.svg');
 }
 .position-left {
-  mask-image: url('../icons/position-left.svg');
+  content: url('../icons/position-left.svg');
 }
 .mask-edge {
-  mask-image: url('../icons/mask-edge.svg');
+  content: url('../icons/mask-edge.svg');
 }
 .mask-corner {
-  mask-image: url('../icons/mask-corner.svg');
+  content: url('../icons/mask-corner.svg');
 }
 .mask-center {
-  mask-image: url('../icons/mask-center.svg');
+  content: url('../icons/mask-center.svg');
 }
 .book-front-cover {
-  mask-image: url('../icons/book-front-cover.svg');
+  content: url('../icons/book-front-cover.svg');
 }
 .book-back-cover {
-  mask-image: url('../icons/book-back-cover.svg');
+  content: url('../icons/book-back-cover.svg');
 }
 .book-inside-cover {
-  mask-image: url('../icons/book-inside-cover.svg');
+  content: url('../icons/book-inside-cover.svg');
 }
 .book-part-cover {
-  mask-image: url('../icons/book-part-cover.svg');
-}
-.image-wrap-left {
-  mask-image: url('../icons/image-wrap-left.svg');
-}
-.image-wrap-right {
-  mask-image: url('../icons/image-wrap-right.svg');
+  content: url('../icons/book-part-cover.svg');
 }
 .davek {
-  mask-image: url('../icons/Davek.svg');
+  content: url('../icons/Davek.svg');
 }
 .rellanic {
-  mask-image: url('../icons/Rellanic.svg');
+  content: url('../icons/Rellanic.svg');
 }
 .iokharic {
-  mask-image: url('../icons/Iokharic.svg');
-}
-.zoom-to-fit {
-	mask-image: url('../icons/zoom-to-fit.svg');
-}
-.fit-width {
-	mask-image: url('../icons/fit-width.svg');
-}
-.single-spread {
-	mask-image: url('../icons/single-spread.svg');
-}
-.facing-spread {
-	mask-image: url('../icons/facing-spread.svg');
-}
-.flow-spread {
-	mask-image: url('../icons/flow-spread.svg');
+  content: url('../icons/Iokharic.svg');
 }

client/icons/facing-spread.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(0.979101,0,0,0.919064,-29.0748,1.98095)">
-        <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
-    </g>
-    <g transform="matrix(0.979101,0,0,0.919064,23.058,1.98095)">
-        <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
-    </g>
-</svg>

client/icons/fit-width.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1.07509,0,0,1.07509,-3.75511,-3.75468)">
-        <g transform="matrix(0.843549,0,0,0.950644,8.38004,4.39672)">
-            <path d="M28.455,52.413L28.455,58.581C28.455,59.719 27.684,60.745 26.501,61.181C25.318,61.616 23.956,61.375 23.051,60.571L11.114,49.96C9.878,48.862 9.878,47.08 11.114,45.981L23.051,35.371C23.956,34.566 25.318,34.326 26.501,34.761C27.684,35.197 28.455,36.223 28.455,37.361L28.455,43.528L70.223,43.528L70.223,37.361C70.223,36.223 70.995,35.197 72.177,34.761C73.36,34.326 74.722,34.566 75.627,35.371L87.564,45.981C88.8,47.08 88.8,48.862 87.564,49.96L75.627,60.571C74.722,61.375 73.36,61.616 72.177,61.181C70.995,60.745 70.223,59.719 70.223,58.581L70.223,52.413L28.455,52.413Z"/>
-        </g>
-        <g transform="matrix(1.46702,0,0,0.986488,-23.0335,3.50686)">
-            <path d="M23.967,5.877L23.967,88.383C23.967,90.556 22.781,92.321 21.319,92.321L21.157,92.321C19.695,92.321 18.509,90.556 18.509,88.383L18.509,5.877C18.509,3.703 19.695,1.939 21.157,1.939L21.319,1.939C22.781,1.939 23.967,3.703 23.967,5.877Z"/>
-        </g>
-        <g transform="matrix(1.46702,0,0,0.986488,60.7211,3.50686)">
-            <path d="M23.967,5.877L23.967,88.383C23.967,90.556 22.781,92.321 21.319,92.321L21.157,92.321C19.695,92.321 18.509,90.556 18.509,88.383L18.509,5.877C18.509,3.703 19.695,1.939 21.157,1.939L21.319,1.939C22.781,1.939 23.967,3.703 23.967,5.877Z"/>
-        </g>
-    </g>
-</svg>

client/icons/flow-spread.svg

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1.0781,0,0,1.0781,-3.90545,-3.90502)">
-        <g transform="matrix(0.590052,0,0,0.553871,-13.8993,-2.19227)">
-            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
-        </g>
-        <g transform="matrix(0.590052,0,0,0.553871,-13.8993,44.3152)">
-            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
-        </g>
-        <g transform="matrix(0.590052,0,0,0.553871,17.5184,-2.19227)">
-            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
-        </g>
-        <g transform="matrix(0.590052,0,0,0.553871,50.0095,-2.19227)">
-            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
-        </g>
-        <g transform="matrix(0.590052,0,0,0.553871,17.5184,44.3152)">
-            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
-        </g>
-        <g transform="matrix(0.590052,0,0,0.553871,50.0095,44.3152)">
-            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
-        </g>
-    </g>
-</svg>

client/icons/image-wrap-left.svg

@@ -1,58 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 512.00006 512"
-   xml:space="preserve"
-   id="svg10"
-   sodipodi:docname="noun-wrap-image-left-212078.svg"
-   width="512.00006"
-   height="512"
-   inkscape:export-filename="image-wrap-right.svg"
-   inkscape:export-xdpi="300"
-   inkscape:export-ydpi="300"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-     id="defs10" /><sodipodi:namedview
-     id="namedview10"
-     pagecolor="#ffffff"
-     bordercolor="#111111"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="1"
-     inkscape:deskcolor="#d1d1d1" /><path
-     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-     d="M 185.80018,144 H 32"
-     id="path11"
-     sodipodi:nodetypes="cc"
-     clip-path="none"
-     inkscape:export-filename="image-wrap-right.svg"
-     inkscape:export-xdpi="300"
-     inkscape:export-ydpi="300" /><path
-     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-     d="M 185.80018,368 H 32"
-     id="path11-8"
-     sodipodi:nodetypes="cc"
-     clip-path="none" /><path
-     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-     d="M 480.00007,32 H 32"
-     id="path11-8-2-67"
-     clip-path="none"
-     sodipodi:nodetypes="cc" /><path
-     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-     d="M 480.00008,480 H 32"
-     id="path11-8-2-67-2"
-     clip-path="none"
-     sodipodi:nodetypes="cc" /><path
-     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-     d="M 160.0001,255.98832 32,256.01162"
-     id="path11-0"
-     sodipodi:nodetypes="cc"
-     clip-path="none" /><path
-     id="path23"
-     style="opacity:0.922046;fill:#000000;fill-opacity:1;stroke-width:64;stroke-linecap:round;stroke-dasharray:none;paint-order:fill markers stroke"
-     d="m 416.00008,96 a 160,160 0 0 1 96,32.50977 v 254.98046 a 160,160 0 0 1 -96,32.50977 160,160 0 0 1 -160,-160 160,160 0 0 1 160,-160 z" /></svg>

client/icons/image-wrap-right.svg

@@ -1,58 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   version="1.1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 512.00006 512"
-   xml:space="preserve"
-   id="svg10"
-   sodipodi:docname="noun-wrap-image-left-212078.svg"
-   width="512.00006"
-   height="512"
-   inkscape:export-filename="image-wrap-right.svg"
-   inkscape:export-xdpi="300"
-   inkscape:export-ydpi="300"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-     id="defs10" /><sodipodi:namedview
-     id="namedview10"
-     pagecolor="#ffffff"
-     bordercolor="#111111"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="1"
-     inkscape:deskcolor="#d1d1d1" /><path
-     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-     d="M 326.1999,144 H 480.00008"
-     id="path11"
-     sodipodi:nodetypes="cc"
-     clip-path="none"
-     inkscape:export-filename="image-wrap-right.svg"
-     inkscape:export-xdpi="300"
-     inkscape:export-ydpi="300" /><path
-     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-     d="M 326.1999,368 H 480.00008"
-     id="path11-8"
-     sodipodi:nodetypes="cc"
-     clip-path="none" /><path
-     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-     d="M 32.00001,32 H 480.00008"
-     id="path11-8-2-67"
-     clip-path="none"
-     sodipodi:nodetypes="cc" /><path
-     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-     d="M 32,480 H 480.00008"
-     id="path11-8-2-67-2"
-     clip-path="none"
-     sodipodi:nodetypes="cc" /><path
-     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-     d="m 351.99998,255.98832 128.0001,0.0233"
-     id="path11-0"
-     sodipodi:nodetypes="cc"
-     clip-path="none" /><path
-     id="path23"
-     style="opacity:0.922046;fill:#000000;fill-opacity:1;stroke-width:64;stroke-linecap:round;stroke-dasharray:none;paint-order:fill markers stroke"
-     d="M 96,96 A 160,160 0 0 0 0,128.50977 V 383.49023 A 160,160 0 0 0 96,416 160,160 0 0 0 256,256 160,160 0 0 0 96,96 Z" /></svg>