Merge branch 'master' into v3.15.0

Need a new key so this new message will appear again for users who cleared the popup before

.circleci/config.yml

@@ -64,6 +64,15 @@ 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 - Variables
+          command: npm run test:variables
       - run:
           name: Test - Routes
           command: npm run test:route

.eslintrc.js

@@ -1,79 +0,0 @@
-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'],
-	}
-};

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

@@ -0,0 +1,103 @@
+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/workflows/pr-check.yml

@@ -0,0 +1,29 @@
+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

@@ -3,7 +3,7 @@
 			"stylelint-config-recess-order",
 			"stylelint-config-recommended"],
     "plugins": [
-      "stylelint-stylistic",
+			"@stylistic/stylelint-plugin",
       "./stylelint_plugins/declaration-colon-align.js",
 			"./stylelint_plugins/declaration-colon-min-space-before",
       "./stylelint_plugins/declaration-block-multi-line-min-declarations"
@@ -16,32 +16,32 @@
 			"font-family-no-missing-generic-family-keyword"            : null,
 			"font-weight-notation"                                     : "named-where-possible",
 			"font-family-name-quotes"                                  : "always-unless-keyword",
-			"stylistic/indentation"                                    : "tab",
+			"@stylistic/indentation"                                    : "tab",
 			"no-duplicate-selectors"                                   : true,
-			"stylistic/color-hex-case"                                 : "upper",
+			"@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",
+			"@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",
+			"@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",
+			"@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",
+			"@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:18-alpine
+FROM node:20-alpine
 RUN apk --no-cache add git
 
 ENV NODE_ENV=docker

changelog.md

@@ -75,11 +75,480 @@ pre {
 .page {
 	padding-bottom: 1.5cm;
 }
+
+.varSyntaxTable th:first-of-type {
+  width:6cm;
+}
 ```
 
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
+### 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
 
@@ -133,7 +602,7 @@ Fixes issue [#2729](https://github.com/naturalcrit/homebrewery/issues/2729),
 ### Thursday 17/08/2023 - v3.9.2
 {{taskList
 
-##### Calculuschild
+##### calculuschild
 
 * [x] Fix links to certain old Google Drive files
 
@@ -191,7 +660,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
 
@@ -288,7 +757,7 @@ Fixes issues [#2731](https://github.com/naturalcrit/homebrewery/issues/2731)
 ### Monday 13/03/2023 - v3.7.2
 {{taskList
 
-##### Calculuschild
+##### calculuschild
 
 * [x] Fix wide Monster Stat Blocks not spanning columns on Legacy
 }}
@@ -311,7 +780,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
 }}
@@ -323,7 +792,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!)
 
@@ -467,7 +936,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
 
@@ -482,7 +951,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
 
@@ -565,7 +1034,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
 
@@ -591,7 +1060,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.
 
@@ -618,7 +1087,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.
 
@@ -1335,7 +1804,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!)
 
@@ -1462,4 +1931,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/brewCleanup/brewCleanup.jsx

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

client/admin/brewCompress/brewCompress.jsx

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

client/admin/stats/stats.jsx

@@ -34,8 +34,6 @@ const Stats = createClass({
 			<dl>
 				<dt>Total Brew Count</dt>
 				<dd>{this.state.stats.totalBrews}</dd>
-				<dt>Total Brews Published Count</dt>
-				<dd>{this.state.stats.totalPublishedBrews || 'no published brews'}</dd>
 			</dl>
 
 			{this.state.fetching

client/components/combobox.jsx

@@ -1,7 +1,6 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const cx = require('classnames');
 require('./combobox.less');
 
 const Combobox = createClass({

client/components/dialog.jsx

@@ -0,0 +1,29 @@
+// Dialog box, for popups and modal blocking messages
+const React = require('react');
+const { useRef, useEffect } = React;
+
+function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) {
+	const dialogRef = useRef(null);
+
+	useEffect(()=>{
+		if(!dismissKey || !localStorage.getItem(dismissKey)) {
+			blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
+		}
+	}, []);
+
+	const dismiss = ()=>{
+		dismissKey && localStorage.setItem(dismissKey, 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

@@ -7,22 +7,25 @@ const _ = require('lodash');
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.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');
 
-const Themes = require('themes/themes.json');
+const DOMPurify = require('dompurify');
+const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false };
 
 const PAGE_HEIGHT = 1056;
 
 const INITIAL_CONTENT = dedent`
 	<!DOCTYPE html><html><head>
-	<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+	<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' rel='stylesheet' />
+	<link href='/homebrew/bundle.css' type="text/css" rel='stylesheet' />
 	<base target=_blank>
 	</head><body style='overflow: hidden'><div></div></body></html>`;
 
@@ -33,8 +36,9 @@ const BrewPage = (props)=>{
 		index    : 0,
 		...props
 	};
+	const cleanText = props.contents; //DOMPurify.sanitize(props.contents, purifyConfig);
 	return <div className={props.className} id={`p${props.index + 1}`} >
-	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: props.contents }} />
+	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
 	       </div>;
 };
 
@@ -52,14 +56,16 @@ const BrewRenderer = (props)=>{
 		lang              : '',
 		errors            : [],
 		currentEditorPage : 0,
+		themeBundle       : {},
 		...props
 	};
 
 	const [state, setState] = useState({
-		viewablePageNumber : 0,
-		height             : PAGE_HEIGHT,
-		isMounted          : false,
-		visibility         : 'hidden',
+		height            : PAGE_HEIGHT,
+		isMounted         : false,
+		visibility        : 'hidden',
+		zoom              : 100,
+		currentPageNumber : 1,
 	});
 
 	const mainRef  = useRef(null);
@@ -81,43 +87,30 @@ const BrewRenderer = (props)=>{
 		}));
 	};
 
-	const handleScroll = (e)=>{
-		const target = e.target;
+	const getCurrentPage = (e)=>{
+		const { scrollTop, clientHeight, scrollHeight } = e.target;
+		const totalScrollableHeight = scrollHeight - clientHeight;
+		const currentPageNumber = Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length);
+
 		setState((prevState)=>({
 			...prevState,
-			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length)
+			currentPageNumber : currentPageNumber || 1
 		}));
 	};
 
-	const shouldRender = (index)=>{
-		if(!state.isMounted) return false;
+	const isInView = (index)=>{
+		if(!state.isMounted)
+			return false;
 
-		if(Math.abs(index - state.viewablePageNumber) <= 3)
-			return true;
+		if(index == props.currentEditorPage)	//Already rendered before this step
+			return false;
 
-		if(index + 1 == props.currentEditorPage)
+		if(Math.abs(index - state.currentPageNumber) <= 3)
 			return true;
 
 		return false;
 	};
 
-	const sanitizeScriptTags = (content)=>{
-		return content
-			.replace(/<script/ig, '&lt;script')
-			.replace(/<\/script>/ig, '&lt;/script&gt;');
-	};
-
-	const renderPageInfo = ()=>{
-		return <div className='pageInfo' ref={mainRef}>
-			<div>
-				{props.renderer}
-			</div>
-			<div>
-				{state.viewablePageNumber + 1} / {rawPages.length}
-			</div>
-		</div>;
-	};
-
 	const renderDummyPage = (index)=>{
 		return <div className='phb page' id={`p${index + 1}`} key={index}>
 			<i className='fas fa-spinner fa-spin' />
@@ -125,20 +118,18 @@ const BrewRenderer = (props)=>{
 	};
 
 	const renderStyle = ()=>{
-		if(!props.style) return;
-		const cleanStyle = sanitizeScriptTags(props.style);
-		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${sanitizeScriptTags(props.style)}\n} </style>` }} />;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${cleanStyle} </style>` }} />;
+		const cleanStyle = props.style; //DOMPurify.sanitize(props.style, purifyConfig);
+		const themeStyles = props.themeBundle?.joinedStyles ?? '<style>@import url("/themes/V3/Blank/style.css");</style>';
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `${themeStyles} \n\n <style> ${cleanStyle} </style>` }} />;
 	};
 
 	const renderPage = (pageText, index)=>{
-		let cleanPageText = sanitizeScriptTags(pageText);
 		if(props.renderer == 'legacy') {
-			const html = MarkdownLegacy.render(cleanPageText);
+			const html = MarkdownLegacy.render(pageText);
 			return <BrewPage className='page phb' index={index} key={index} contents={html} />;
 		} else {
-			cleanPageText += `\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(cleanPageText);
+			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='page' index={index} key={index} contents={html} />;
 		}
 	};
@@ -150,14 +141,27 @@ const BrewRenderer = (props)=>{
 		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
+		renderedPages[props.currentEditorPage] = renderPage(rawPages[props.currentEditorPage], props.currentEditorPage);
+
 		_.forEach(rawPages, (page, index)=>{
-			if((shouldRender(index) || !renderedPages[index]) && typeof window !== 'undefined'){
+			if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){
 				renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range
 			}
 		});
 		return renderedPages;
 	};
 
+	const handleControlKeys = (e)=>{
+		if(!(e.ctrlKey || e.metaKey)) return;
+		const P_KEY = 80;
+		if(e.keyCode == P_KEY && props.allowPrint) printCurrentBrew();
+		if(e.keyCode == P_KEY) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	};
+
 	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
 		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
 			updateSize();
@@ -176,21 +180,33 @@ const BrewRenderer = (props)=>{
 		document.dispatchEvent(new MouseEvent('click'));
 	};
 
-	const rendererPath  = props.renderer == 'V3' ? 'V3' : 'Legacy';
-	const themePath     = props.theme ?? '5ePHB';
-	const baseThemePath = Themes[rendererPath][themePath].baseTheme;
+	//Toolbar settings:
+	const handleZoom = (newZoom)=>{
+		setState((prevState)=>({
+			...prevState,
+			zoom : newZoom
+		}));
+	};
 
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
 			{!state.isMounted
-				? <div className='brewRenderer' onScroll={handleScroll}>
+				? <div className='brewRenderer' onScroll={getCurrentPage}>
 					<div className='pages'>
 						{renderDummyPage(1)}
 					</div>
 				</div>
 				: null}
 
+			<ErrorBar errors={props.errors} />
+			<div className='popups' ref={mainRef}>
+				<RenderWarnings />
+				<NotificationPopup />
+			</div>
+
+			<ToolBar onZoomChange={handleZoom} currentPage={state.currentPageNumber}  totalPages={rawPages.length}/>
+
 			{/*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 }}
@@ -198,33 +214,23 @@ const BrewRenderer = (props)=>{
 				onClick={()=>{emitClick();}}
 			>
 				<div className={'brewRenderer'}
-					onScroll={handleScroll}
+					onScroll={getCurrentPage}
+					onKeyDown={handleControlKeys}
+					tabIndex={-1}
 					style={{ height: state.height }}>
 
-					<ErrorBar errors={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 */}
 					{state.isMounted
 						&&
 						<>
 							{renderStyle()}
-							<div className='pages' lang={`${props.lang || 'en'}`}>
+							<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%` }}>
 								{renderPages()}
 							</div>
 						</>
 					}
 				</div>
 			</Frame>
-			{renderPageInfo()}
 		</>
 	);
 };

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,8 +1,9 @@
 @import (multiple, less) 'shared/naturalcrit/styles/reset.less';
 
 .brewRenderer {
-	will-change : transform;
-	overflow-y  : scroll;
+	overflow-y    : scroll;
+	will-change   : transform;
+	padding-top   : 30px;
 	:where(.pages) {
 		margin : 30px 0px;
 		& > :where(.page) {
@@ -14,31 +15,31 @@
 			box-shadow    : 1px 4px 14px #000000;
 		}
 	}
-}
-.pane { position : relative; }
-.pageInfo {
-	position         : absolute;
-	right            : 17px;
-	bottom           : 0;
-	z-index          : 1000;
-	font-size        : 10px;
-	font-weight      : 800;
-	color            : white;
-	background-color : #333333;
-	div {
-		display          : inline-block;
-		padding          : 8px 10px;
-		&:not(:last-child) { border-right : 1px solid #666666; }
+	&::-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; }
 	}
 }
-.ppr_msg {
-	position         : absolute;
-	bottom           : 0;
-	left             : 0px;
-	z-index          : 1000;
-	padding          : 8px 10px;
-	font-size        : 10px;
-	font-weight      : 800;
-	color            : white;
-	background-color : #333333;
-}
+
+.pane { position : relative; }
+
+@media print {
+	.toolBar { display : none; }
+	.brewRenderer {
+		height      : 100%;
+		padding-top : unset;
+		overflow-y  : unset;
+		.pages {
+			margin : 0px;
+			& > .page { box-shadow : unset; }
+		}
+	}
+}

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -2,7 +2,6 @@ require('./errorBar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');
 
 const ErrorBar = createClass({
 	displayName     : 'ErrorBar',

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,84 +1,46 @@
 require('./notificationPopup.less');
 const React = require('react');
-const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');	//Unused variable
 
-const DISMISS_KEY = 'dismiss_notification12-04-23';
+import Dialog from '../../../components/dialog.jsx';
 
-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 DISMISS_KEY = 'dismiss_notification04-09-24';
+const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 
-					<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>
+const NotificationPopup = ()=>{
+	return <Dialog className='notificationPopup' dismissKey={DISMISS_KEY} 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>
+			<li key='Vault'>
+				<em>Search brews with our new page!</em><br />
+				We have been working very hard in making this possible, now you can share your work and look at it in the new <a href="/vault">Vault</a> page!
+				All PUBLISHED brews will be available to anyone searching there, by title or author, and filtering by renderer.
 
-					<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: {} });
+				More features will be coming.
+			</li>
 
-		this.setState({
-			notifications : _.mapValues(this.notifications, (fn)=>{ return fn(); })	//Convert notification functions into their return text value
-		});
-	},
-	dismiss : function(){
-		localStorage.setItem(DISMISS_KEY, true);
-		this.checkNotifications();
-	},
-	render : function(){
-		if(_.isEmpty(this.state.notifications)) return 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>
 
-		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>;
-	}
-});
+			<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>
+		</ul>
+	</Dialog>;
+};
 
 module.exports = NotificationPopup;

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -1,64 +1,61 @@
-.popups{
+.popups {
 	position         : fixed;
-	top              : @navbarHeight;
-	right            : 15px;
+	top              : calc(@navbarHeight + @viewerToolsHeight);
+	right            : 24px;
 	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;
-	background-color : @blue;
 	color            : white;
-	a{
-		color       : #e0e5c1;
+	background-color : @blue;
+	border           : none;
+	&[open] { display : inline-block; }
+	a {
 		font-weight : 800;
+		color       : #E0E5C1;
 	}
-	i.info{
+	i.info {
 		position  : absolute;
 		top       : 12px;
 		left      : 12px;
-		opacity   : 0.8;
 		font-size : 2.5em;
+		opacity   : 0.8;
 	}
-	i.dismiss{
-		position : absolute;
-		top      : 10px;
-		right    : 10px;
-		cursor   : pointer;
-		opacity  : 0.6;
-		&:hover{
-			opacity : 1;
-		}
+	button.dismiss {
+		position         : absolute;
+		top              : 10px;
+		right            : 10px;
+		cursor           : pointer;
+		background-color : transparent;
+		opacity          : 0.6;
+		&:hover { opacity : 1; }
 	}
-	.header {
-		padding-left : 50px;
-	}
-	small{
-		opacity   : 0.7;
+	.header { padding-left : 50px; }
+	small {
 		font-size : 0.6em;
+		opacity   : 0.7;
 	}
-	h3{
+	h3 {
 		font-size   : 1.1em;
 		font-weight : 800;
 	}
-	ul{
+	ul {
 		margin-top          : 15px;
 		font-size           : 0.8em;
 		list-style-position : outside;
 		list-style-type     : disc;
-		li{
+		li {
+			margin-top  : 1.4em;
 			font-size   : 0.8em;
 			line-height : 1.4em;
-			margin-top  : 1.4em;
-			em{
-				font-weight : 800;
-			}
+			em { font-weight : 800; }
 		}
 	}
 }

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -0,0 +1,162 @@
+require('./toolBar.less');
+const React = require('react');
+const { useState, useEffect } = React;
+const _ = require('lodash');
+
+
+const MAX_ZOOM = 300;
+const MIN_ZOOM = 10;
+
+const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
+
+	const [zoomLevel, setZoomLevel] = useState(100);
+	const [pageNum, setPageNum]     = useState(currentPage);
+
+	useEffect(()=>{
+		onZoomChange(zoomLevel);
+	}, [zoomLevel]);
+
+	useEffect(()=>{
+		setPageNum(currentPage);
+	}, [currentPage]);
+
+	const handleZoomButton = (zoom)=>{
+		setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
+	};
+
+	const handlePageInput = (pageInput)=>{
+		if(/[0-9]/.test(pageInput))
+			setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
+	};
+
+	const scrollToPage = (pageNumber)=>{
+		pageNumber = _.clamp(pageNumber, 1, totalPages);
+		const iframe = document.getElementById('BrewRenderer');
+		const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
+		const page = brewRenderer?.querySelector(`#p${pageNumber}`);
+		page?.scrollIntoView({ block: 'start' });
+		setPageNum(pageNumber);
+	};
+
+
+	const calculateChange = (mode)=>{
+		const iframe = document.getElementById('BrewRenderer');
+		const iframeWidth = iframe.getBoundingClientRect().width;
+		const iframeHeight = iframe.getBoundingClientRect().height;
+		const pages = iframe.contentWindow.document.getElementsByClassName('page');
+
+		let desiredZoom = 0;
+
+		if(mode == 'fill'){
+			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
+			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
+
+			desiredZoom = (iframeWidth / widestPage) * 100;
+
+		} else if(mode == 'fit'){
+			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
+			const minDimRatio = [...pages].reduce((minRatio, page) => Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
+
+			desiredZoom = minDimRatio * 100;
+		}
+
+		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")
+
+		const deltaZoom = (desiredZoom - zoomLevel) - margin;
+		return deltaZoom;
+	};
+
+	return (
+		<div className='toolBar'>
+			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
+			<div className='group'>
+				<button
+					id='fill-width'
+					className='tool'
+					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fill'))}
+				>
+					<i className='fac fit-width' />
+				</button>
+				<button
+					id='zoom-to-fit'
+					className='tool'
+					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fit'))}
+				>
+					<i className='fac zoom-to-fit' />
+				</button>
+				<button
+					id='zoom-out'
+					className='tool'
+					onClick={()=>handleZoomButton(zoomLevel - 20)}
+					disabled={zoomLevel <= MIN_ZOOM}
+				>
+					<i className='fas fa-magnifying-glass-minus' />
+				</button>
+				<input
+					id='zoom-slider'
+					className='range-input tool'
+					type='range'
+					name='zoom'
+					list='zoomLevels'
+					min={MIN_ZOOM}
+					max={MAX_ZOOM}
+					step='1'
+					value={zoomLevel}
+					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
+				/>
+				<datalist id='zoomLevels'>
+					<option value='100' />
+				</datalist>
+
+				<button
+					id='zoom-in'
+					className='tool'
+					onClick={()=>handleZoomButton(zoomLevel + 20)}
+					disabled={zoomLevel >= MAX_ZOOM}
+				>
+					<i className='fas fa-magnifying-glass-plus' />
+				</button>
+			</div>
+
+			{/*v=====----------------------< Page Controls >---------------------=====v*/}
+			<div className='group'>
+				<button
+					id='previous-page'
+					className='previousPage tool'
+					onClick={()=>scrollToPage(pageNum - 1)}
+					disabled={pageNum <= 1}
+				>
+					<i className='fas fa-arrow-left'></i>
+				</button>
+
+				<div className='tool'>
+					<input
+						id='page-input'
+						className='text-input'
+						type='text'
+						name='page'
+						inputMode='numeric'
+						pattern='[0-9]'
+						value={pageNum}
+						onClick={(e)=>e.target.select()}
+						onChange={(e)=>handlePageInput(e.target.value)}
+						onBlur={()=>scrollToPage(pageNum)}
+						onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
+					/>
+					<span id='page-count'>/ {totalPages}</span>
+				</div>
+
+				<button
+					id='next-page'
+					className='tool'
+					onClick={()=>scrollToPage(pageNum + 1)}
+					disabled={pageNum >= totalPages}
+				>
+					<i className='fas fa-arrow-right'></i>
+				</button>
+			</div>
+		</div>
+	);
+};
+
+module.exports = ToolBar;

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -0,0 +1,103 @@
+@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;
+	color            : #CCCCCC;
+	background-color : #555555;
+
+	.group {
+		box-sizing       : border-box;
+		display          : flex;
+		gap              : 0 3px;
+		align-items      : center;
+		justify-content  : center;
+		height           : 28px;
+	}
+
+	.tool {
+		display     : flex;
+		align-items : center;
+	}
+
+	input {
+		position       : relative;
+		height         : 1.5em;
+		padding        : 2px 5px;
+		font-family    : 'Open Sans', sans-serif;
+		color          : #000000;
+		background     : #EEEEEE;
+		border         : 1px solid gray;
+		&:focus { outline : 1px solid #D3D3D3; }
+
+		// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
+		&.range-input {
+			padding      : 2px 0;
+			color        : #D3D3D3;
+			accent-color : #D3D3D3;
+  
+			&::-webkit-slider-thumb, &::-moz-slider-thumb { 
+				width            : 5px;
+				height           : 5px;
+				cursor           : pointer;
+				outline          : none;
+			}
+
+			&:hover::after {
+				position         : absolute;
+				bottom           : -30px;
+				left             : 50%;
+				z-index          : 1;
+				display          : grid;
+				place-items      : center;
+				width            : 4ch;
+				height           : 1.2lh;
+				pointer-events   : none;
+				content          : attr(value);
+				background-color : #555555;
+				border           : 1px solid #A1A1A1;
+				transform        : translate(-50%, 50%);
+			}
+		}
+
+		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
+		&#page-input {
+			width        : 4ch;
+			margin-right : 1ch;
+			text-align   : center;
+		}
+	}
+
+	button {
+		box-sizing       : content-box;
+		display          : flex;
+		align-items      : center;
+		justify-content  : center;
+		width            : auto;
+		min-width        : 46px;
+		height           : 100%;
+		padding          : 0 0px;
+		font-weight      : unset;
+		color            : inherit;
+		background-color : unset;
+		&:hover { background-color : #444444; }
+		&:focus { outline : 1px solid #D3D3D3; }
+		&:disabled {
+			color            : #777777;
+			background-color : unset !important;
+		}
+		i {
+			font-size:1.2em;
+		}
+	}
+}

client/homebrew/editor/editor.jsx

@@ -5,6 +5,7 @@ const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 const dedent = require('dedent-tabs').default;
+const Markdown = require('../../../shared/naturalcrit/markdown.js');
 
 const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
@@ -47,6 +48,9 @@ const Editor = createClass({
 		};
 	},
 
+	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';},
@@ -55,6 +59,8 @@ const Editor = createClass({
 		this.updateEditorSize();
 		this.highlightCustomMarkdown();
 		window.addEventListener('resize', this.updateEditorSize);
+		document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
+		document.addEventListener('keydown', this.handleControlKeys);
 
 		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
 		if(editorTheme) {
@@ -78,27 +84,43 @@ const Editor = createClass({
 		};
 	},
 
+	handleControlKeys : function(e){
+		if(!(e.ctrlKey && e.metaKey)) return;
+		const LEFTARROW_KEY = 37;
+		const RIGHTARROW_KEY = 39;
+		if (e.shiftKey && (e.keyCode == RIGHTARROW_KEY)) this.brewJump();
+		if (e.shiftKey && (e.keyCode == LEFTARROW_KEY)) this.sourceJump();
+		if ((e.keyCode == LEFTARROW_KEY) || (e.keyCode == RIGHTARROW_KEY)) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	},
+
+
 	updateEditorSize : function() {
-		if(this.refs.codeEditor) {
-			let paneHeight = this.refs.main.parentNode.clientHeight;
-			paneHeight -= SNIPPETBAR_HEIGHT + 1;
-			this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
+		if(this.codeEditor.current) {
+			let paneHeight = this.editor.current.parentNode.clientHeight;
+			paneHeight -= SNIPPETBAR_HEIGHT;
+			this.codeEditor.current.codeMirror.setSize(null, paneHeight);
 		}
 	},
 
 	handleInject : function(injectText){
-		this.refs.codeEditor?.injectText(injectText, false);
+		this.codeEditor.current?.injectText(injectText, false);
 	},
 
 	handleViewChange : function(newView){
 		this.props.setMoveArrows(newView === 'text');
 		this.setState({
 			view : newView
-		}, this.updateEditorSize);	//TODO: not sure if updateeditorsize needed
+		}, ()=>{
+			this.codeEditor.current?.codeMirror.focus();
+			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);
+		const lines = this.props.brew.text.split('\n').slice(0, this.codeEditor.current.getCursorPosition().line + 1);
 		return _.reduce(lines, (r, line)=>{
 			if(
 				(this.props.renderer == 'legacy' && line.indexOf('\\page') !== -1)
@@ -110,13 +132,24 @@ const Editor = createClass({
 	},
 
 	highlightCustomMarkdown : function(){
-		if(!this.refs.codeEditor) return;
+		if(!this.codeEditor.current) return;
 		if(this.state.view === 'text')  {
-			const codeMirror = this.refs.codeEditor.codeMirror;
+			const codeMirror = this.codeEditor.current.codeMirror;
 
 			codeMirror.operation(()=>{ // Batch CodeMirror styling
+
+				const foldLines = [];
+        
 				//reset custom text styles
-				const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding
+				const customHighlights = codeMirror.getAllMarks().filter((mark)=>{
+					// Record details of folded sections
+					if(mark.__isFold) {
+						const fold = mark.find();
+						foldLines.push({from: fold.from?.line, to: fold.to?.line});
+					}
+					return !mark.__isFold;
+				}); //Don't undo code folding
+
 				for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
 
 				let editorPageCount = 2; // start page count from page 2
@@ -128,6 +161,11 @@ 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(/^\\page$/))) {
@@ -151,30 +189,37 @@ const Editor = createClass({
 
 						// definition lists
 						if(line.includes('::')){
-							const regex = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym;
+							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: line.indexOf(match[0]) }, { line: lineNumber, ch: line.indexOf(match[0]) + match[0].length }, { className: 'define' });
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'term' });
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[2]) }, { line: lineNumber, ch: line.indexOf(match[2]) + match[2].length }, { className: 'definition' });
+								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];
+								let colons = /::/g;
+								let 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'} )
+								}
 							}
 						}
 
-						// Superscript
-						if(line.includes('\^')) {
-							const regex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/g;
-							let match;
-							while ((match = regex.exec(line)) != null) {
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) - 1 }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length + 1 }, { className: 'superscript' });
-							}
-						}
-
-						// Subscript
-						if(line.includes('^^')) {
-							const regex = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/g;
-							let match;
-							while ((match = regex.exec(line)) != null) {
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) - 2 }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length + 2 }, { className: 'subscript' });
+						// 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;
+								let 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));
 							}
 						}
 
@@ -212,6 +257,34 @@ const Editor = createClass({
 								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;
+								let 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;
+
+									let startPos = { line: lineNumber, ch: match.index };
+									let endPos   = { line: lineNumber, ch: match.index + match[0].length };
+
+									// Iterate over conflicting marks and clear them
+									var 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));
+							}
+						}
 					}
 				});
 			});
@@ -266,23 +339,23 @@ const Editor = createClass({
 
 				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);
+				let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
+				let targetY  = this.codeEditor.current.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);
+					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.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
+						targetY = this.codeEditor.current.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');
+						this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+						this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
+						this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
 						clearInterval(incrementalScroll);
 					}
 				}, 10);
@@ -292,7 +365,7 @@ const Editor = createClass({
 
 	//Called when there are changes to the editor's dimensions
 	update : function(){
-		this.refs.codeEditor?.updateSize();
+		this.codeEditor.current?.updateSize();
 	},
 
 	updateEditorTheme : function(newTheme){
@@ -311,7 +384,7 @@ const Editor = createClass({
 		if(this.isText()){
 			return <>
 				<CodeEditor key='codeEditor'
-					ref='codeEditor'
+					ref={this.codeEditor}
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.text}
@@ -323,12 +396,12 @@ const Editor = createClass({
 		if(this.isStyle()){
 			return <>
 				<CodeEditor key='codeEditor'
-					ref='codeEditor'
+					ref={this.codeEditor}
 					language='css'
 					view={this.state.view}
 					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
 					onChange={this.props.onStyleChange}
-					enableFolding={false}
+					enableFolding={true}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent} />
 			</>;
@@ -342,34 +415,35 @@ const Editor = createClass({
 				<MetadataEditor
 					metadata={this.props.brew}
 					onChange={this.props.onMetaChange}
-					reportError={this.props.reportError}/>
+					reportError={this.props.reportError}
+					userThemes={this.props.userThemes}/>
 			</>;
 		}
 	},
 
 	redo : function(){
-		return this.refs.codeEditor?.redo();
+		return this.codeEditor.current?.redo();
 	},
 
 	historySize : function(){
-		return this.refs.codeEditor?.historySize();
+		return this.codeEditor.current?.historySize();
 	},
 
 	undo : function(){
-		return this.refs.codeEditor?.undo();
+		return this.codeEditor.current?.undo();
 	},
 
 	foldCode : function(){
-		return this.refs.codeEditor?.foldAllCode();
+		return this.codeEditor.current?.foldAllCode();
 	},
 
 	unfoldCode : function(){
-		return this.refs.codeEditor?.unfoldAllCode();
+		return this.codeEditor.current?.unfoldAllCode();
 	},
 
 	render : function(){
 		return (
-			<div className='editor' ref='main'>
+			<div className='editor' ref={this.editor}>
 				<SnippetBar
 					brew={this.props.brew}
 					view={this.state.view}
@@ -385,7 +459,8 @@ const Editor = createClass({
 					historySize={this.historySize()}
 					currentEditorTheme={this.state.editorTheme}
 					updateEditorTheme={this.updateEditorTheme}
-					cursorPos={this.refs.codeEditor?.getCursorPosition() || {}} />
+					snippetBundle={this.props.snippetBundle}
+					cursorPos={this.codeEditor.current?.getCursorPosition() || {}} />
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/editor.less

@@ -43,6 +43,16 @@
 			font-weight : bold;
 			color       : green;
 		}
+		.emoji:not(.cm-comment) {
+			margin-left    : 2px;
+			color          : #360034;
+			background     : #ffc8ff;
+			border-radius  : 6px;
+			font-weight    : bold;
+			padding-bottom : 1px;
+			outline-offset : -2px;
+			outline        : solid 2px #ff96fc;
+		}
 		.superscript:not(.cm-comment) {
 			font-weight    : bold;
 			color          : goldenrod;
@@ -55,6 +65,16 @@
 			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 {

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -3,12 +3,12 @@ require('./metadataEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-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 StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
 
+
 const Themes = require('themes/themes.json');
 const validations = require('./validations.js');
 
@@ -28,6 +28,7 @@ const MetadataEditor = createClass({
 		return {
 			metadata : {
 				editId      : null,
+				shareId     : null,
 				title       : '',
 				description : '',
 				thumbnail   : '',
@@ -99,7 +100,7 @@ const MetadataEditor = createClass({
 			if(renderer == 'legacy')
 				this.props.metadata.theme = '5ePHB';
 		}
-		this.props.onChange(this.props.metadata);
+		this.props.onChange(this.props.metadata, 'renderer');
 	},
 	handlePublish : function(val){
 		this.props.onChange({
@@ -111,7 +112,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);
+		this.props.onChange(this.props.metadata, 'theme');
 	},
 
 	handleLanguage : function(languageCode){
@@ -192,37 +193,42 @@ const MetadataEditor = createClass({
 	renderThemeDropdown : function(){
 		if(!global.enable_themes) return;
 
+		const mergedThemes = _.merge(Themes, this.props.userThemes);
+
 		const listThemes = (renderer)=>{
-			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`}/>
+			return _.map(_.values(mergedThemes[renderer]), (theme)=>{
+				if(theme.path == this.props.metadata.shareId) return;
+				const preview = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`;
+				const texture = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`;
+				return <div className='item' key={`${renderer}_${theme.name}`} onClick={()=>this.handleTheme(theme)} title={''}>
+					{theme.author ?? renderer} : {theme.name}
+					<div className='texture-container'>
+						<img src={texture}/>
+					</div>
 					<div className='preview'>
-						<h6>{`${theme.name}`} preview</h6>
-						<img src={`/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`}/>
+						<h6>{theme.name} preview</h6>
+						<img src={preview}/>
 					</div>
 				</div>;
 			});
 		};
 
-		const currentTheme = Themes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme];
+		const currentRenderer = this.props.metadata.renderer;
+		const currentTheme    = mergedThemes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme]
+													?? { name: `!!! THEME MISSING !!! ID=${this.props.metadata.theme}` };
 		let dropdown;
 
-		if(this.props.metadata.renderer == 'legacy') {
+		if(currentRenderer == 'legacy') {
 			dropdown =
 				<Nav.dropdown className='disabled value' trigger='disabled'>
-					<div>
-						{`Themes are not supported in the Legacy Renderer`} <i className='fas fa-caret-down'></i>
-					</div>
+					<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>
-						{`${_.upperFirst(currentTheme.renderer)} : ${currentTheme.name}`} <i className='fas fa-caret-down'></i>
-					</div>
-					{/*listThemes('Legacy')*/}
-					{listThemes('V3')}
+					<div> {currentTheme.author ?? _.upperFirst(currentRenderer)} : {currentTheme.name} <i className='fas fa-caret-down'></i> </div>
+
+					{listThemes(currentRenderer)}
 				</Nav.dropdown>;
 		}
 

client/homebrew/editor/metadataEditor/metadataEditor.less

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

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -6,9 +6,6 @@ const _     = require('lodash');
 const cx    = require('classnames');
 
 //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');
@@ -40,7 +37,8 @@ const Snippetbar = createClass({
 			foldCode          : ()=>{},
 			unfoldCode        : ()=>{},
 			updateEditorTheme : ()=>{},
-			cursorPos         : {}
+			cursorPos         : {},
+			snippetBundle     : []
 		};
 	},
 
@@ -53,21 +51,15 @@ const Snippetbar = createClass({
 	},
 
 	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);
+		const snippets = this.compileSnippets();
 		this.setState({
 			snippets : snippets
 		});
 	},
 
 	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);
+		if(prevProps.renderer != this.props.renderer || prevProps.theme != this.props.theme || prevProps.snippetBundle != this.props.snippetBundle) {
+			const snippets = this.compileSnippets();
 			this.setState({
 				snippets : snippets
 			});
@@ -75,26 +67,26 @@ const Snippetbar = createClass({
 	},
 
 
-	mergeCustomizer : function(valueA, valueB, key) {
+	mergeCustomizer : function(oldValue, newValue, key) {
 		if(key == 'snippets') {
-			const result = _.reverse(_.unionBy(_.reverse(valueB), _.reverse(valueA), 'name')); // Join snippets together, with preference for the current theme over the base theme
+			const result = _.reverse(_.unionBy(_.reverse(newValue), _.reverse(oldValue), 'name')); // Join snippets together, with preference for the child theme over the parent theme
 			return _.filter(result, 'gen'); //Only keep snippets with a 'gen' property.
 		}
 	},
 
-	compileSnippets : function(rendererPath, themePath, snippets) {
-		let compiledSnippets = snippets;
-		const baseSnippetsPath = Themes[rendererPath][themePath].baseSnippets;
+	compileSnippets : function() {
+		let compiledSnippets = [];
 
-		const objB = _.keyBy(compiledSnippets, 'groupName');
+		let 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));
+		for (let snippets of this.props.snippetBundle) {
+			if(typeof(snippets) == 'string')	// load staticThemes as needed; they were sent as just a file name
+				snippets = ThemeSnippets[snippets];
+
+			const newSnippets = _.keyBy(_.cloneDeep(snippets), 'groupName');
+			compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, this.mergeCustomizer));
+
+			oldSnippets = _.keyBy(compiledSnippets, 'groupName');
 		}
 		return compiledSnippets;
 	},
@@ -161,7 +153,7 @@ const Snippetbar = createClass({
 						onClick={this.props.unfoldCode} >
 						<i className='fas fa-expand-alt' />
 					</div>
-				</>
+				</>;
 
 		}
 
@@ -181,7 +173,7 @@ const Snippetbar = createClass({
 				<i className='fas fa-palette' />
 				{this.state.themeSelector && this.renderThemeSelector()}
 			</div>
-			
+
 			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -130,6 +130,8 @@
 					height       : 1.2em;
 					margin-right : 8px;
 					font-size    : 1.2em;
+					min-width: 25px;
+					text-align: center;
 					& ~ i {
 						margin-right : 0;
 						margin-left  : 5px;
@@ -138,7 +140,7 @@
 					&.font {
 						height : auto;
 						&::before {
-							font-size : 1.4em;
+							font-size : 1em;
 							content   : 'ABC';
 						}
 

client/homebrew/homebrew.jsx

@@ -10,8 +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 PrintPage = require('./pages/printPage/printPage.jsx');
-const ArchivePage = require('./pages/archivePage/archivePage.jsx');
+const VaultPage = require('./pages/vaultPage/vaultPage.jsx');
 const AccountPage = require('./pages/accountPage/accountPage.jsx');
 
 const WithRoute = (props)=>{
@@ -68,21 +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} />} />
+						<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
 						<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} />} />
-						<Route path='/new' element={<WithRoute el={NewPage}/>} />
+						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
+						<Route path='/new' element={<WithRoute el={NewPage} userThemes={this.props.userThemes}/> } />
 						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
-						<Route path='/print/:id' element={<WithRoute el={PrintPage} brew={this.props.brew} />} />
-						<Route path='/print' element={<WithRoute el={PrintPage} />} />
-						<Route path='/archive' element={<WithRoute el={ArchivePage}/>}/>
-						<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='/vault' element={<WithRoute el={VaultPage}/>}/>
+						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
+						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
+						<Route path='/migrate' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
+						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} accountDetails={this.props.brew.accountDetails} />} />
 						<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
 						<Route path='/error' element={<WithRoute el={ErrorPage} brew={this.props.brew} />} />
-					  	<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-					  	<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+						<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
+						<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
 					</Routes>
 				</div>
 			</Router>
@@ -90,15 +88,4 @@ const Homebrew = createClass({
 	}
 });
 
-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} />;
-// 	},
+module.exports = Homebrew;

client/homebrew/homebrew.less

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

@@ -42,7 +42,7 @@ const ErrorNavItem = createClass({
 				</div>
 			</Nav.item>;
 		}
-		
+
 		if(status === 412) {
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
@@ -51,7 +51,7 @@ const ErrorNavItem = createClass({
 				</div>
 			</Nav.item>;
 		}
-		
+
 		if(HBErrorCode === '04') {
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 				Oops!
@@ -76,10 +76,10 @@ const ErrorNavItem = createClass({
 		if(response.body?.errors?.[0].reason == 'storageQuotaExceeded') {
 			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
-			<div className='errorContainer' onClick={clearError}>
+				<div className='errorContainer' onClick={clearError}>
 				Can't save because your Google Drive seems to be full!
-			</div>
-		</Nav.item>;
+				</div>
+			</Nav.item>;
 		}
 
 		if(response.req.url.match(/^\/api.*Google.*$/m)){
@@ -104,6 +104,18 @@ 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,6 +21,9 @@
   font-size        : 10px;
   font-weight      : 800;
   text-transform   : uppercase;
+	.lowercase {
+		text-transform : none;
+	}
   a{
     color : @teal;
   }

client/homebrew/navbar/help.navitem.jsx

@@ -1,6 +1,4 @@
 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,6 +1,5 @@
 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,272 +1,352 @@
-@import "naturalcrit/styles/colors.less";
-@navbarHeight : 28px;
-@keyframes pinkColoring {
-  0%   {color : pink;}
-  50%  {color : pink;}
-  75%  {color : red;}
-  100% {color : pink;}
-}
-.homebrew nav {
-	.homebrewLogo {
-		.animate(color);
-		font-family : CodeBold;
-		font-size   : 12px;
-		color       : white;
-		div {
-			margin-top    : 2px;
-			margin-bottom : -2px;
-		}
-		&:hover {
-			color : @blue;
-		}
-	}
-	.editTitle.navItem {
-		padding : 2px 12px;
-		input {
-			font-family      : "Open Sans", sans-serif;
-			font-size        : 12px;
-			font-weight      : 800;
-			width            : 250px;
-			margin           : 0;
-			padding          : 2px;
-			text-align       : center;
-			color            : white;
-			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;
-			}
-		}
-	}
-	.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));
-			}
-		}
-	}
-	.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;
-		.navDropdown .navItem {
-			overflow        : hidden auto;
-			max-height      : ~"calc(100vh - 28px)";
-			scrollbar-color : #666 #333;
-			scrollbar-width : thin;
-			
+@import 'naturalcrit/styles/colors.less';
 
-			#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 {
-					opacity : 100%;
-				}
-				i {
-					font-size  : 10px;
-					width      : 100%;
-					height     : 100%;
-					margin     : 0;
-					text-align : center;
-				}
-			}
-			&:hover {
-				background-color : @blue;
-				.clear {
-					display       : grid;
-					place-content : center;
-				}
-			}
-			.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%);
-				}
-			}
-		}
+@navbarHeight : 28px;
+@viewerToolsHeight : 32px;
+
+@keyframes pinkColoring {
+	0% { color : pink; }
+	50% { color : pink; }
+	75% { color : red; }
+	100% { color : pink; }
+}
+
+@keyframes glideDropDown {
+	0% {
+		background-color : #333333;
+		opacity          : 0;
+		transform        : translate(0px, -100%);
 	}
-	.metadata.navItem {
-		position    : relative;
+	100% {
+		background-color : #333333;
+		opacity          : 1;
+		transform        : translate(0px, 0px);
+	}
+}
+
+.homebrew nav {
+	background-color : #333333;
+	.navContent {
+		position        : relative;
+		z-index         : 2;
+		display         : flex;
+		justify-content : space-between;
+	}
+	.navSection {
 		display     : flex;
 		align-items : center;
-		height      : 100%;
-		padding     : 0;
-		flex-grow   : 1;
-		i {
-			margin-right : 10px;
+		&:last-child .navItem { border-left : 1px solid #666666; }
+	}
+	// "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; }
 		}
-		.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;
+		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;
 			}
-			&.inactive {
-				transform : translateX(-50%) translateY(0%);
-				opacity   : 0;
+		}
+	}
+	.navItem {
+		#backgroundColorsHover;
+		.animate(background-color);
+		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;
 			}
-			.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;
+		}
+		&.editTitle {  // this is not needed at all currently - you used to be able to edit the title via the navbar.
+			padding : 2px 12px;
+			input {
+				width            : 250px;
+				padding          : 2px;
+				margin           : 0;
+				font-family      : 'Open Sans', sans-serif;
+				font-size        : 12px;
+				font-weight      : 800;
+				color            : white;
+				text-align       : center;
+				background-color : transparent;
+				border           : 1px solid @blue;
+				outline          : none;
+			}
+			.charCount {
+				display        : inline-block;
+				margin-left    : 8px;
+				color          : #666666;
+				text-align     : right;
+				vertical-align : bottom;
+				&.max { color : @red; }
+			}
+		}
+		&.brewTitle {
+			flex-grow        : 1;
+			font-size        : 12px;
+			font-weight      : 800;
+			color            : white;
+			text-align       : center;
+			text-transform   : initial;
+			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%);
 				}
-				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;
+				&.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;
 					}
-					a.userPageLink {
-						text-decoration : none;
-						color           : white;
-						&:hover {
-							text-decoration : underline;
+					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; }
 				}
-				&:nth-of-type(even) {
-					background-color : #555;
+			}
+		}
+		&.warning {
+			position         : relative;
+			color            : white;
+			background-color : @orange;
+			&:hover > .dropdown { visibility : visible; }
+			.dropdown {
+				position         : absolute;
+				top              : 28px;
+				left             : 0;
+				z-index          : 10000;
+				box-sizing       : border-box;
+				display          : block;
+				width            : 100%;
+				padding          : 13px 5px;
+				text-align       : center;
+				visibility       : hidden;
+				background-color : #333333;
+			}
+		}
+		&.account {
+			min-width : 100px;
+			&.username { text-transform : none;}
+		}
+	}
+	.navDropdownContainer {
+		position : relative;
+		.navDropdown {
+			position: absolute;
+			top: 28px;
+			right: 0px;
+			z-index: 10000;
+			width: max-content;
+			min-width:100%;
+			max-height: calc(100vh - 28px);
+			overflow: hidden auto;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+			.navItem {
+				position           : relative;
+				display            : flex;
+				justify-content    : space-between;
+				align-items        : center;
+				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;
+				background-color : #333333;
+				border-top       : 1px solid #888888;
+				scrollbar-color  : #666666 #333333;
+				scrollbar-width  : thin;
+				.clear {
+					position         : absolute;
+					top              : 50%;
+					right            : 0;
+					display          : none;
+					width            : 20px;
+					height           : 100%;
+					background-color : #333333;
+					border-radius    : 3px;
+					opacity          : 70%;
+					transform        : translateY(-50%);
+					&:hover { opacity : 100%; }
+					i {
+						width      : 100%;
+						height     : 100%;
+						margin     : 0;
+						font-size  : 10px;
+						text-align : center;
+					}
+				}
+				&:hover {
+					background-color : @blue;
+					.clear {
+						display       : grid;
+						place-content : center;
+					}
+				}
+				.title {
+					display       : inline-block;
+					width         : 100%;
+					overflow      : hidden auto;
+					text-overflow : ellipsis;
+					white-space   : nowrap;
+				}
+				.time {
+					position  : absolute;
+					right     : 2px;
+					bottom    : 2px;
+					font-size : 0.7em;
+					color     : #888888;
+				}
+				&.header {
+					box-sizing       : border-box;
+					display          : block;
+					padding          : 5px 0;
+					color            : #BBBBBB;
+					text-align       : center;
+					background-color : #333333;
+					border-top       : 1px solid #888888;
+					&:nth-of-type(1) { background-color : darken(@teal, 20%); }
+					&:nth-of-type(2) { background-color : darken(@purple, 30%); }
 				}
 			}
 		}
 	}
-	.warning.navItem {
-		position         : relative;
-		color            : white;
-		background-color : @orange;
-		&:hover > .dropdown {
-			visibility : visible;
+}
+
+// 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));
 		}
-		.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,12 +1,64 @@
 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
 
-module.exports = function(props){
-	return <Nav.item
-		href='/new'
-		newTab={true}
-		color='purple'
-		icon='fas fa-plus-square'>
-		new
-	</Nav.item>;
+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 = 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(props){
-	return <Nav.item newTab={true} href={`/print/${props.shareId}?dialog=true`} color='purple' icon='far fa-file-pdf'>
+module.exports = function(){
+	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
 		get PDF
 	</Nav.item>;
 };

client/homebrew/navbar/reddit.navitem.jsx

@@ -1,9 +1,7 @@
 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';
 
 

client/homebrew/navbar/vault.navitem.jsx

@@ -0,0 +1,17 @@
+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,102 +1,82 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-const cx    = require('classnames');
+const React  = require('react');
 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
-		};
-	},
-	componentDidMount : function(){
-		if(!this.state.saveLocation && this.props.uiItems.username) {
-			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${this.props.uiItems.username}`;
-			let saveLocation =  window.localStorage.getItem(SAVEKEY);
-			saveLocation = saveLocation ?? (this.state.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
-			this.makeActive(saveLocation);
+const AccountPage = (props)=>{
+	// destructure props and set state for save location
+	const { accountDetails, brew } = props;
+	const [saveLocation, setSaveLocation] = React.useState('');
+
+	// initialize save location from local storage based on user id
+	React.useEffect(()=>{
+		if(!saveLocation && accountDetails.username) {
+			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${accountDetails.username}`;
+			// if no SAVEKEY in local storage, default save location to Google Drive if user has Google account.
+			let saveLocation = window.localStorage.getItem(SAVEKEY);
+			saveLocation = saveLocation ?? (accountDetails.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
+			setActiveSaveLocation(saveLocation);
 		}
-	},
+	}, []);
 
-	makeActive : function(newSelection){
-		if(this.state.saveLocation == newSelection) return;
+	const setActiveSaveLocation = (newSelection)=>{
+		if(saveLocation === newSelection) return;
 		window.localStorage.setItem(SAVEKEY, newSelection);
-		this.setState({
-			saveLocation : newSelection
-		});
-	},
+		setSaveLocation(newSelection);
+	};
 
-	renderButton : function(name, key, shouldRender=true){
-		if(!shouldRender) return;
-		return <button className={this.state.saveLocation==key ? 'active' :	''}	onClick={()=>{this.makeActive(key);}}>{name}</button>;
-	},
+	// 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>
+		);
+	};
 
-	renderNavItems : function() {
-		return <Navbar>
-			<Nav.section>
-				<NewBrew />
-				<HelpNavItem />
-				<RecentNavItem />
-				<Account />
-			</Nav.section>
-		</Navbar>;
-	},
+	// 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>
+			</>
+		);
+	};
 
-	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>
-			<div className='dataGroup'>
-				<h4>Default Save Location</h4>
-				{this.renderButton('Homebrewery', 'HOMEBREWERY')}
-				{this.renderButton('Google Drive', 'GOOGLE-DRIVE', this.state.uiItems.googleId)}
-			</div>
-		</>;
-	},
-
-	render : function(){
-		return <UIPage brew={this.props.brew}>
-			{this.renderUiItems()}
-		</UIPage>;
-	}
-});
+	// return the account page inside the base layout wrapper (with navbar etc).
+	return (
+		<UIPage brew={brew}>
+			{renderAccountPage()}
+		</UIPage>);
+};
 
 module.exports = AccountPage;

client/homebrew/pages/archivePage/archivePage.jsx

@@ -1,201 +0,0 @@
-require('./archivePage.less');
-
-const React       = require('react');
-const createClass = require('create-react-class');
-const _           = require('lodash');
-const cx          = require('classnames');
-
-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 request = require('../../utils/request-middleware.js');
-
-const ArchivePage = createClass({
-	displayName     : 'ArchivePage',
-	getDefaultProps : function () {
-		return {};
-	},
-	getInitialState : function () {
-		return {
-			title          : this.props.query.title || '',
-			brewCollection : null,
-			page           : 1,
-			totalPages     : 1,
-			searching      : false,
-			error          : null,
-		};
-	},
-	componentDidMount : function() {
-
-	},
-	handleChange(e) {
-		this.setState({ title: e.target.value });
-	},
-
-	updateStateWithBrews : function (brews, page, totalPages) {
-		this.setState({
-			brewCollection : brews || null,
-			page           : page || 1,
-			totalPages     : totalPages || 1,
-			searching      : false
-		});
-	},
-
-	loadPage : async function(page) {
-		if(this.state.title == '') {} else {
-
-			try {
-				//this.updateUrl();
-				this.setState({ searching: true, error: null });
-				const title = encodeURIComponent(this.state.title);
-				await request.get(`/api/archive?title=${title}&page=${page}`)
-                    .then((response)=>{
-                    	if(response.ok) {
-                    		this.updateStateWithBrews(response.body.brews, page, response.body.totalPages);
-                    	}
-                    });
-			} catch (error) {
-				console.log(`LoadPage error: ${error}`);
-			}
-		}
-	},
-
-	updateUrl : function() {
-		const url = new URL(window.location.href);
-		const urlParams = new URLSearchParams(url.search);
-
-		// Set the title and page parameters
-		urlParams.set('title', this.state.title);
-		urlParams.set('page', this.state.page);
-
-		url.search = urlParams.toString(); // Convert URLSearchParams to string
-		window.history.replaceState(null, null, url);
-	},
-
-	renderFoundBrews() {
-		const { title, brewCollection, page, totalPages, error } = this.state;
-
-		if(title === '') {return (<div className='foundBrews noBrews'><h3>Whenever you want, just start typing...</h3></div>);}
-
-		if(error !== null) {
-			return (
-				<div className='foundBrews noBrews'>
-					<div><h3>I'm sorry, your request didn't work</h3>
-						<br /><p>Your search is not specific enough. Too many brews meet this criteria for us to display them.</p>
-					</div></div>
-			);
-		}
-
-		if(!brewCollection || brewCollection.length === 0) {
-			return (
-				<div className='foundBrews noBrews'>
-					<h3>We haven't found brews meeting your request.</h3>
-				</div>
-			);
-		}
-
-		return (
-			<div className='foundBrews'>
-				<span className='brewCount'>{`Brews Found: ${brewCollection.length}`}</span>
-
-				{brewCollection.map((brew, index)=>(
-					<BrewItem brew={brew} key={index} reportError={this.props.reportError} />
-				))}
-				<div className='paginationControls'>
-					{page > 1 && (
-						<button onClick={()=>this.loadPage(page - 1)}>Previous Page</button>
-					)}
-					<span className='currentPage'>Page {page}</span>
-					{page < totalPages && (
-						<button onClick={()=>this.loadPage(page + 1)}>Next Page</button>
-					)}
-				</div>
-			</div>
-		);
-	},
-
-
-	renderForm : function () {
-		return (
-			<div className='brewLookup'>
-				<h2>Brew Lookup</h2>
-				<label>Title of the brew</label>
-				<input
-					type='text'
-					value={this.state.title}
-					onChange={this.handleChange}
-					onKeyDown={(e)=>{
-						if(e.key === 'Enter') {
-							this.handleChange(e);
-							this.loadPage(1);
-						}
-					}}
-					placeholder='v3 Reference Document'
-				/>
-				{/* In the future, we should be able to filter the results by adding tags.
-            <label>Tags</label><input type='text' value={this.state.query} placeholder='add a tag to filter'/>
-            <input type="checkbox" id="v3" /><label>v3 only</label>
-            */}
-
-				<button onClick={()=>{ this.handleChange({ target: { value: this.state.title } }); this.loadPage(1); }}>
-					<i
-						className={cx('fas', {
-							'fa-search'          : !this.state.searching,
-							'fa-spin fa-spinner' : this.state.searching,
-						})}
-					/>
-				</button>
-			</div>
-		);
-	},
-
-
-
-	renderNavItems : function () {
-		return (
-			<Navbar>
-				<Nav.section>
-					<Nav.item className='brewTitle'>Archive: Search for brews</Nav.item>
-				</Nav.section>
-				<Nav.section>
-					<NewBrew />
-					<HelpNavItem />
-					<RecentNavItem />
-					<Account />
-				</Nav.section>
-			</Navbar>
-		);
-	},
-
-	render : function () {
-		return (
-			<div className='archivePage'>
-				<link href='/themes/V3/Blank/style.css' rel='stylesheet'/>
-			  <link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
-				{this.renderNavItems()}
-
-				<div className='content'>
-					<div className='welcome'>
-						<h1>Welcome to the Archive</h1>
-					</div>
-					<div className='flexGroup'>
-						<div className='form dataGroup'>{this.renderForm()}</div>
-						<div className='resultsContainer dataGroup'>
-							<div className='title'>
-								<h2>Your results, my lordship</h2>
-							</div>
-							{this.renderFoundBrews()}
-						</div>
-					</div>
-				</div>
-			</div>
-		);
-	},
-});
-
-module.exports = ArchivePage;

client/homebrew/pages/archivePage/archivePage.less

@@ -1,173 +0,0 @@
-body {
-    height: 100vh;
-
-    .content {
-        height: 100%;
-    }
-}
-
-.archivePage {
-    overflow-y: hidden;
-    height: 100%;
-    background-color: #2C3E50;
-
-    h1,h2,h3 {
-        font-family: 'Open Sans';
-        color: white;
-        font-weight: 900;
-    }
-
-    .content {
-        display: grid;
-        grid-template-rows: 20vh 1fr;
-
-        .welcome {
-            display: grid;
-            place-items: center;
-            background: url('https://i.imgur.com/MJ4YHu7.jpg');
-            background-size: 100%;
-            background-position: center;
-            height: 20vh;
-            border-bottom: 5px solid #333;
-
-            h1 {
-                font-size: 40px;
-                filter:drop-shadow(0 0 5px black);
-            }
-        }
-
-        .flexGroup {
-            height: 100%;
-            display: grid;
-            grid-template-columns: 500px 2fr;
-            background: #2C3E50;
-
-            .dataGroup {
-                width: 100%;
-                height: 100%;
-                background: white;
-
-                &.form .brewLookup {
-                    padding: 50px;
-
-                    h2 {
-                        font-size: 30px;
-                        border-bottom: 2px solid;
-                        margin-block: 20px;
-                    }
-
-                    label {
-                        margin-right: 10px;
-                    }
-
-                    input+button {
-                        margin-left: 20px;
-                    }
-                }
-
-                &.resultsContainer {
-                    display: flex;
-                    flex-direction: column;
-                    border-left: 2px solid;
-                    height: 100%;
-                    font-family: "BookInsanityRemake";
-                    font-size: .34cm;
-
-                    .title {
-                        height: 10vh;
-                        background-color: #333;
-                        display: grid;
-                        place-items: center;
-
-                        h2 {
-                            font-size: 30px;
-                        }
-                    }
-                    .foundBrews {
-                        position: relative;
-                        background-color: #2C3E50;
-                        width: 100%;
-                        max-height: 100%;
-                        height: 66.7vh;
-                        padding: 50px;
-                        overflow-y:scroll;
-
-                        h3 {
-                            font-size: 25px;
-                        }
-
-                        &.noBrews {
-                            display:grid;
-                            place-items:center;
-                        }
-
-                        .brewCount {
-                            position: fixed;
-                            bottom: 0;
-                            right: 17px;
-                            font-size: 11px;
-                            font-weight: 800;
-                            color: white;
-                            background-color: #333;
-                            padding: 8px 10px;
-                            z-index: 1000;
-                            font-family: 'Open Sans';
-                            
-                            &:empty {
-                                display: none;
-                            }
-                        }
-
-                        .limit {
-                            position: fixed;
-                            bottom: 0;
-                            left: 502px;
-                            font-size: 11px;
-                            font-weight: 800;
-                            color: white;
-                            background-color: #333;
-                            padding: 8px 10px;
-                            z-index: 1000;
-                            font-family: 'Open Sans';
-                            
-                            &:empty {
-                                display: none;
-                            }
-                        }
-                        .brewItem {
-                            background-image: url('/assets/parchmentBackground.jpg');
-                            width: 48%;
-                            margin-right: 40px;
-                            color: black;
-
-                            &:nth-child(even) {
-                                margin-right: 0;
-                            }
-                            h2 {
-                                font-size: 0.75cm;
-                                line-height: 0.988em;
-                                font-family: "MrEavesRemake";
-                                font-weight: 800;
-                                color: var(--HB_Color_HeaderText);
-                            }
-
-                            .info {
-                                font-family: ScalySansRemake;
-                                font-size: 1.2em;
-
-                                >span {
-                                    margin-right: 12px;
-                                    line-height: 1.5em;
-                                }
-                            }
-                        }
-
-                        hr {
-                            visibility: hidden;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

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

@@ -1,8 +1,6 @@
 require('./brewItem.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const _     = require('lodash');
-const cx    = require('classnames');
 const moment = require('moment');
 const request = require('../../../../utils/request-middleware.js');
 
@@ -20,7 +18,9 @@ const BrewItem = createClass({
 				authors     : [],
 				stubbed     : true
 			},
-			reportError : ()=>{}
+			updateListFilter : ()=>{},
+			reportError      : ()=>{},
+			renderStorage    : true
 		};
 	},
 
@@ -44,6 +44,10 @@ const BrewItem = createClass({
 			});
 	},
 
+	updateFilter : function(type, term){
+		this.props.updateListFilter(type, term);
+	},
+
 	renderDeleteBrewLink : function(){
 		if(!this.props.brew.editId) return;
 
@@ -92,6 +96,7 @@ const BrewItem = createClass({
 	},
 
 	renderStorageIcon : function(){
+		if(!this.props.renderStorage) return;
 		if(this.props.brew.googleId) {
 			return <span title={this.props.brew.webViewLink ? 'Your Google Drive Storage': 'Another User\'s Google Drive Storage'}>
 				<a href={this.props.brew.webViewLink} target='_blank'>
@@ -109,10 +114,11 @@ const BrewItem = createClass({
 		const brew = this.props.brew;
 		if(Array.isArray(brew.tags)) {               // temporary fix until dud tags are cleaned
 			brew.tags = brew.tags?.filter((tag)=>tag); //remove tags that are empty strings
+			brew.tags.sort((a, b)=>{
+				return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+			});
 		}
 		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
-		const authors = brew.authors.length > 0 ? brew.authors : 'No authors';
-
 
 		return <div className='brewItem'>
 			{brew.thumbnail &&
@@ -131,24 +137,21 @@ const BrewItem = createClass({
 						<i className='fas fa-tags'/>
 						{brew.tags.map((tag, idx)=>{
 							const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
-							return <span key={idx} className={matches[1]}>{matches[2]}</span>;
+							return <span key={idx} className={matches[1]} onClick={()=>{this.updateFilter(tag);}}>{matches[2]}</span>;
 						})}
 					</div>
 				</> : <></>
 				}
 				<span title={`Authors:\n${brew.authors?.join('\n')}`}>
-				<i className='fas fa-user'/> {Array.isArray(authors) ? (
-  					<span>
-    					{authors.map((author, index) => (
-      					<span key={index}>
-        					<a href={`/share/${author}`}>{author}</a>
-        					{index < authors.length - 1 && ', '}
-      					</span>
-    					))}
-  					</span>
-					) : (
-  					<span>{authors}</span>
-					)}
+					<i className='fas fa-user'/> {brew.authors?.map((author, index)=>(
+						<React.Fragment key={index}>
+							{author === 'hidden'
+								? <span title="Username contained an email address; hidden to protect user's privacy">{author}</span>
+								: <a href={`/user/${author}`}>{author}</a>
+							}
+							{index < brew.authors.length - 1 && ', '}
+						</React.Fragment>
+					))}
 				</span>
 				<br />
 				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>

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

@@ -63,6 +63,41 @@
 		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{
@@ -84,11 +119,12 @@
 		text-align       : center;
 		a{
 			.animate(opacity);
-			display   : block;
-			margin    : 8px 0px;
-			opacity   : 0.6;
-			font-size : 1.3em;
-			color     : white;
+			display         : block;
+			margin          : 8px 0px;
+			opacity         : 0.6;
+			font-size       : 1.3em;
+			color           : white;
+			text-decoration : unset;
 			&:hover{
 				opacity : 1;
 			}

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

@@ -36,6 +36,7 @@ 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,
@@ -82,7 +83,7 @@ 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}/>;
+			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError} updateListFilter={ (tag)=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}/>;
 		});
 	},
 
@@ -136,13 +137,33 @@ const ListPage = createClass({
 		return;
 	},
 
-	updateUrl : function(filterTerm, sortType, sortDir){
+	updateUrl : function(filterTerm, sortType, sortDir, filterTag=''){
 		const url = new URL(window.location.href);
 		const urlParams = new URLSearchParams(url.search);
 
 		urlParams.set('sort', sortType);
 		urlParams.set('dir', sortDir);
 
+		let filterTags = urlParams.getAll('tag');
+		if(filterTag != '') {
+			if(filterTags.findIndex((tag)=>{return tag.toLowerCase()==filterTag.toLowerCase();}) == -1){
+				filterTags.push(filterTag);
+			} else {
+				filterTags = filterTags.filter((tag)=>{ return tag.toLowerCase() != filterTag.toLowerCase(); });
+			}
+		}
+		urlParams.delete('tag');
+		// Add tags to URL in the order they were clicked
+		filterTags.forEach((tag)=>{ urlParams.append('tag', tag); });
+		// Sort tags before updating state
+		filterTags.sort((a, b)=>{
+			return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
+		});
+
+		this.setState({
+			filterTags
+		});
+
 		if(!filterTerm)
 			urlParams.delete('filter');
 		else
@@ -166,6 +187,16 @@ 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>
@@ -176,9 +207,6 @@ const ListPage = createClass({
 			{/* {this.renderSortOption('Latest', 'latest')} */}
 
 			{this.renderFilterOption()}
-
-
-
 		</div>;
 	},
 
@@ -186,14 +214,28 @@ 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());
 
-			return brewStrings.includes(testString);
+			const filterTextTest = brewStrings.includes(testString);
+
+			// Filter by user selected tags
+			let filterTagTest = true;
+			if(this.state.filterTags.length > 0){
+				filterTagTest = Array.isArray(brew.tags) && this.state.filterTags?.every((tag)=>{
+					return brew.tags.findIndex((brewTag)=>{
+						return brewTag.toLowerCase() == tag.toLowerCase();
+					}) >= 0;
+				});
+			}
+
+			return filterTextTest && filterTagTest;
 		});
+
 		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
 	},
 
@@ -220,10 +262,11 @@ const ListPage = createClass({
 	render : function(){
 		return <div className='listPage sitePage'>
 			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
-			<link href='/themes/V3/Blank/style.css' rel='stylesheet'/>
-			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
+			<link href='/themes/V3/Blank/style.css' type='text/css' rel='stylesheet'/>
+			<link href='/themes/V3/5ePHB/style.css' type='text/css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
+			{this.renderTagsOptions()}
 
 			<div className='content V3'>
 				<div className='page'>

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

@@ -53,7 +53,7 @@
 			}
 		}
 	}
-	.sort-container{
+	.sort-container {
 		font-family        : 'Open Sans', sans-serif;
 		position           : sticky;
 		top                : 0;
@@ -125,4 +125,66 @@
 
 
 	}
+	.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/editPage/editPage.jsx

@@ -11,7 +11,7 @@ const Navbar = require('../../navbar/navbar.jsx');
 
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
-const PrintLink = require('../../navbar/print.navitem.jsx');
+const PrintNavItem = 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;
@@ -20,9 +20,12 @@ 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');
+
 const Markdown = require('naturalcrit/markdown.js');
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
+const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
 
 const googleDriveIcon = require('../../googleDrive.svg');
 
@@ -51,9 +54,13 @@ const EditPage = createClass({
 			autoSave               : true,
 			autoSaveWarning        : false,
 			unsavedTime            : new Date(),
-			currentEditorPage      : 0
+			currentEditorPage      : 0,
+			displayLockMessage     : this.props.brew.lock || false,
+			themeBundle            : {}
 		};
 	},
+
+	editor    : React.createRef(null),
 	savedBrew : null,
 
 	componentDidMount : function(){
@@ -81,6 +88,8 @@ 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() {
@@ -93,7 +102,7 @@ const EditPage = createClass({
 		const S_KEY = 83;
 		const P_KEY = 80;
 		if(e.keyCode == S_KEY) this.trySave(true);
-		if(e.keyCode == P_KEY) window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
+		if(e.keyCode == P_KEY) printCurrentBrew();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
 			e.preventDefault();
@@ -101,7 +110,7 @@ const EditPage = createClass({
 	},
 
 	handleSplitMove : function(){
-		this.refs.editor.update();
+		this.editor.current.update();
 	},
 
 	handleTextChange : function(text){
@@ -113,7 +122,7 @@ const EditPage = createClass({
 			brew              : { ...prevState.brew, text: text },
 			isPending         : true,
 			htmlErrors        : htmlErrors,
-			currentEditorPage : this.refs.editor.getCurrentPage()
+			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
@@ -124,7 +133,10 @@ const EditPage = createClass({
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
-	handleMetaChange : function(metadata){
+	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);
+
 		this.setState((prevState)=>({
 			brew : {
 				...prevState.brew,
@@ -132,7 +144,6 @@ const EditPage = createClass({
 			},
 			isPending : true,
 		}), ()=>{if(this.state.autoSave) this.trySave();});
-
 	},
 
 	hasChanges : function(){
@@ -376,7 +387,7 @@ const EditPage = createClass({
 						post to reddit
 					</Nav.item>
 				</Nav.dropdown>
-				<PrintLink shareId={this.processShareId()} />
+				<PrintNavItem />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />
 			</Nav.section>
@@ -390,24 +401,29 @@ const EditPage = createClass({
 			{this.renderNavbar()}
 
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+				{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
+				<SplitPane onDragFinish={this.handleSplitMove}>
 					<Editor
-						ref='editor'
+						ref={this.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}
 					/>
 					<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}
 						currentEditorPage={this.state.currentEditorPage}
+						allowPrint={true}
 					/>
 				</SplitPane>
 			</div>

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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,27 @@
+.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,41 +1,25 @@
 require('./errorPage.less');
-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 React      = require('react');
+const UIPage     = require('../basePages/uiPage/uiPage.jsx');
+const Markdown   = require('../../../../shared/naturalcrit/markdown.js');
 const ErrorIndex = require('./errors/errorIndex.js');
 
-const ErrorPage = createClass({
-	displayName : 'ErrorPage',
+const ErrorPage = ({ brew })=>{
+	// Retrieving the error text based on the brew's error code from ErrorIndex
+	const errorText = ErrorIndex({ brew })[brew.HBErrorCode.toString()] || '';
 
-	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!' }}>
+	return (
+		<UIPage brew={{ title: 'Crit Fail!' }}>
 			<div className='dataGroup'>
 				<div className='errorTitle'>
-					<h1>{`Error ${this.props.brew.status || '000'}`}</h1>
-					<h4>{this.props.brew.text || 'No error text'}</h4>
+					<h1>{`Error ${brew?.status || '000'}`}</h1>
+					<h4>{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,6 +2,9 @@ const dedent = require('dedent-tabs').default;
 
 const loginUrl = 'https://www.naturalcrit.com/login';
 
+//001-050 : Brew errors
+//050-100 : Other pages errors
+
 const errorIndex = (props)=>{
 	return {
 		// Default catch all
@@ -73,9 +76,11 @@ 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'}
 
-		**Current Authors:** ${props.brew.authors?.map((author)=>{return `${author}`;}).join(', ') || 'Unable to list authors'}
+		**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})`,
 
@@ -86,9 +91,14 @@ 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:** ${props.brew.brewTitle || 'Unable to show title'}
 
-		**Current Authors:** ${props.brew.authors?.map((author)=>{return `${author}`;}).join(', ') || 'Unable to list authors'}`,
+		**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 load error
 		'05' : dedent`
@@ -97,6 +107,8 @@ 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}`,
@@ -113,6 +125,8 @@ const errorIndex = (props)=>{
 		
 		An error occurred while attempting to remove the Homebrewery document.
 		
+		:
+
 		**Brew ID:**  ${props.brew.brewId}`,
 
 		// Author delete error
@@ -121,8 +135,48 @@ 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:** ${props.brew.brewTitle}`,
+
+		'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

@@ -1,12 +0,0 @@
-//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

@@ -10,10 +10,11 @@ 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,11 +32,20 @@ const HomePage = createClass({
 	},
 	getInitialState : function() {
 		return {
-			brew        : this.props.brew,
-			welcomeText : this.props.brew.text,
-			error       : undefined
+			brew              : this.props.brew,
+			welcomeText       : this.props.brew.text,
+			error             : undefined,
+			currentEditorPage : 0,
+			themeBundle       : {}
 		};
 	},
+
+	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)
@@ -49,11 +59,12 @@ const HomePage = createClass({
 			});
 	},
 	handleSplitMove : function(){
-		this.refs.editor.update();
+		this.editor.current.update();
 	},
 	handleTextChange : function(text){
 		this.setState((prevState)=>({
-			brew : { ...prevState.brew, text: text }
+			brew              : { ...prevState.brew, text: text },
+			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}));
 	},
 	renderNavbar : function(){
@@ -65,6 +76,7 @@ const HomePage = createClass({
 				}
 				<NewBrewItem />
 				<HelpNavItem />
+				<VaultNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
@@ -77,15 +89,22 @@ const HomePage = createClass({
 			{this.renderNavbar()}
 
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+				<SplitPane onDragFinish={this.handleSplitMove}>
 					<Editor
-						ref='editor'
+						ref={this.editor}
 						brew={this.state.brew}
 						onTextChange={this.handleTextChange}
 						renderer={this.state.brew.renderer}
 						showEditButtons={false}
+						snippetBundle={this.state.themeBundle.snippets}
+					/>
+					<BrewRenderer
+						text={this.state.brew.text}
+						style={this.state.brew.style}
+						renderer={this.state.brew.renderer}
+						currentEditorPage={this.state.currentEditorPage}
+						themeBundle={this.state.themeBundle}
 					/>
-					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer}/>
 				</SplitPane>
 			</div>
 

client/homebrew/pages/homePage/welcome_msg.md

@@ -143,6 +143,7 @@ Much nicer than `<br><br><br><br><br>`
 ### 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.
 

client/homebrew/pages/newPage/newPage.jsx

@@ -2,12 +2,12 @@
 require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const _ = require('lodash');
 const request = require('../../utils/request-middleware.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,6 +19,7 @@ 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 STYLEKEY = 'homebrewery-new-style';
@@ -38,14 +39,18 @@ 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)
+			brew              : brew,
+			isSaving          : false,
+			saveGoogle        : (global.account && global.account.googleId ? true : false),
+			error             : null,
+			htmlErrors        : Markdown.validate(brew.text),
+			currentEditorPage : 0,
+			themeBundle       : {}
 		};
 	},
 
+	editor : React.createRef(null),
+
 	componentDidMount : function() {
 		document.addEventListener('keydown', this.handleControlKeys);
 
@@ -73,10 +78,15 @@ const NewPage = createClass({
 			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);
@@ -87,7 +97,7 @@ const NewPage = createClass({
 		const S_KEY = 83;
 		const P_KEY = 80;
 		if(e.keyCode == S_KEY) this.save();
-		if(e.keyCode == P_KEY) this.print();
+		if(e.keyCode == P_KEY) printCurrentBrew();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
 			e.preventDefault();
@@ -95,7 +105,7 @@ const NewPage = createClass({
 	},
 
 	handleSplitMove : function(){
-		this.refs.editor.update();
+		this.editor.current.update();
 	},
 
 	handleTextChange : function(text){
@@ -104,8 +114,9 @@ const NewPage = createClass({
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors
+			brew              : { ...prevState.brew, text: text },
+			htmlErrors        : htmlErrors,
+			currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0
 		}));
 		localStorage.setItem(BREWKEY, text);
 	},
@@ -117,7 +128,10 @@ const NewPage = createClass({
 		localStorage.setItem(STYLEKEY, style);
 	},
 
-	handleMetaChange : function(metadata){
+	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);
+
 		this.setState((prevState)=>({
 			brew : { ...prevState.brew, ...metadata },
 		}), ()=>{
@@ -137,8 +151,6 @@ 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) {
@@ -148,12 +160,10 @@ 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;
@@ -177,16 +187,6 @@ 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>
 
@@ -199,7 +199,7 @@ const NewPage = createClass({
 					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
 					this.renderSaveButton()
 				}
-				{this.renderLocalPrintButton()}
+				<PrintNavItem />
 				<HelpNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
@@ -211,16 +211,28 @@ const NewPage = createClass({
 		return <div className='newPage sitePage'>
 			{this.renderNavbar()}
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
+				<SplitPane onDragFinish={this.handleSplitMove}>
 					<Editor
-						ref='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}
+					/>
+					<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}
+						currentEditorPage={this.state.currentEditorPage}
+						allowPrint={true}
 					/>
-					<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

@@ -1,110 +0,0 @@
-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

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

client/homebrew/pages/sharePage/sharePage.jsx

@@ -6,25 +6,33 @@ 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 PrintLink = require('../../navbar/print.navitem.jsx');
+const PrintNavItem = 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 = createClass({
 	displayName     : 'SharePage',
 	getDefaultProps : function() {
 		return {
-			brew : DEFAULT_BREW_LOAD
+			brew        : DEFAULT_BREW_LOAD,
+			disableMeta : false
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			themeBundle : {}
 		};
 	},
 
 	componentDidMount : function() {
 		document.addEventListener('keydown', this.handleControlKeys);
+
+		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
 	},
 
 	componentWillUnmount : function() {
@@ -35,7 +43,7 @@ const SharePage = createClass({
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const P_KEY = 80;
 		if(e.keyCode == P_KEY){
-			window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
+			if(e.keyCode == P_KEY) printCurrentBrew();
 			e.stopPropagation();
 			e.preventDefault();
 		}
@@ -47,30 +55,52 @@ const SharePage = createClass({
 					 this.props.brew.shareId;
 	},
 
+	renderEditLink : function(){
+		if(!this.props.brew.editId) return;
+
+		let editLink = this.props.brew.editId;
+		if(this.props.brew.googleId && !this.props.brew.stubbed) {
+			editLink = this.props.brew.googleId + editLink;
+		}
+
+		return 	<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
+					edit
+		</Nav.item>;
+	},
+
 	render : function(){
+		const titleStyle = this.props.disableMeta ? { cursor: 'default' } : {};
+		const titleEl = <Nav.item className='brewTitle' style={titleStyle}>{this.props.brew.title}</Nav.item>;
+
 		return <div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
 			<Navbar>
 				<Nav.section className='titleSection'>
-					<MetadataNav brew={this.props.brew}>
-						<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
-					</MetadataNav>
+					{
+						this.props.disableMeta ?
+							titleEl
+							:
+							<MetadataNav brew={this.props.brew}>
+								{titleEl}
+							</MetadataNav>
+					}
 				</Nav.section>
 
 				<Nav.section>
 					{this.props.brew.shareId && <>
-						<PrintLink shareId={this.processShareId()} />
+						<PrintNavItem/>
 						<Nav.dropdown>
 							<Nav.item color='red' icon='fas fa-code'>
 								source
 							</Nav.item>
-							<Nav.item color='blue' href={`/source/${this.processShareId()}`}>
+							<Nav.item color='blue' icon='fas fa-eye' href={`/source/${this.processShareId()}`}>
 								view
 							</Nav.item>
-							<Nav.item color='blue' href={`/download/${this.processShareId()}`}>
+							{this.renderEditLink()}
+							<Nav.item color='blue' icon='fas fa-download' href={`/download/${this.processShareId()}`}>
 								download
 							</Nav.item>
-							<Nav.item color='blue' href={`/new/${this.processShareId()}`}>
+							<Nav.item color='blue' icon='fas fa-clone' href={`/new/${this.processShareId()}`}>
 								clone to new
 							</Nav.item>
 						</Nav.dropdown>
@@ -81,7 +111,14 @@ const SharePage = createClass({
 			</Navbar>
 
 			<div className='content'>
-				<BrewRenderer text={this.props.brew.text} style={this.props.brew.style} renderer={this.props.brew.renderer} theme={this.props.brew.theme} />
+				<BrewRenderer
+					text={this.props.brew.text}
+					style={this.props.brew.style}
+					renderer={this.props.brew.renderer}
+					theme={this.props.brew.theme}
+					themeBundle={this.state.themeBundle}
+					allowPrint={true}
+				/>
 			</div>
 		</div>;
 	}

client/homebrew/pages/userPage/userPage.jsx

@@ -1,7 +1,6 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');
 
 const ListPage = require('../basePages/listPage/listPage.jsx');
 
@@ -13,6 +12,7 @@ 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 = createClass({
 	displayName     : 'UserPage',
@@ -67,6 +67,7 @@ const UserPage = createClass({
 				}
 				<NewBrew />
 				<HelpNavItem />
+				<VaultNavitem/>
 				<RecentNavItem />
 				<Account />
 			</Nav.section>

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -0,0 +1,396 @@
+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');
+
+const request = require('../../utils/request-middleware.js');
+
+const VaultPage = (props)=>{
+	const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);
+
+	//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);
+	}, []);
+
+	const updateStateWithBrews = (brews, page)=>{
+		setBrewCollection(brews || null);
+		setPageState(parseInt(page) || 1);
+		setSearching(false);
+	};
+
+	const updateUrl = (titleValue, authorValue, countValue, v3Value, legacyValue, page)=>{
+		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);
+
+		url.search = urlParams.toString();
+		window.history.replaceState(null, '', url.toString());
+	};
+
+	const performSearch = async (title, author, count, v3, legacy, page)=>{
+		updateUrl(title, author, count, v3, legacy, page);
+
+		const response = await request.get(
+			`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}`
+		).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)=>{
+		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;
+
+		performSearch(title, author, count, v3, legacy, page);
+
+		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 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)}
+				>
+					{startPage + index}
+				</a>
+			));
+
+		return (
+			<div className='paginationControls'>
+				<button
+					className='previousPage'
+					onClick={()=>loadPage(pageState - 1, false)}
+					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)}
+						>
+							1 ...
+						</a>
+					)}
+					{pagesAroundCurrent}
+					{endPage < totalPages && (
+						<a
+							className='pageNumber lastPage'
+							onClick={()=>loadPage(totalPages, false)}
+						>
+							... {totalPages}
+						</a>
+					)}
+				</ol>
+				<button
+					className='nextPage'
+					onClick={()=>loadPage(pageState + 1, false)}
+					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='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'>
+						{renderFoundBrews()}
+					</div>
+				</SplitPane>
+			</div>
+		</div>
+	);
+};
+
+module.exports = VaultPage;

client/homebrew/pages/vaultPage/vaultPage.less

@@ -0,0 +1,371 @@
+body {
+	height : 100vh;
+
+	.content { height : 100%; }
+
+	small {
+		font-size : 10pt;
+		color     : #555555;
+
+		a { color : #333333; }
+	}
+
+	code {
+		padding-inline : 5px;
+		background     : lightgrey;
+		border-radius  : 5px;
+	}
+
+	*:not(input) { user-select : none; }
+}
+
+.vaultPage {
+	height           : 100%;
+	overflow-y       : hidden;
+	background-color : #2C3E50;
+	
+
+	.content {
+		background : #2C3E50;
+
+		.dataGroup {
+			width      : 100%;
+			height     : 100%;
+			background : white;
+
+			&.form .brewLookup {
+				position : relative;
+				padding  : 50px clamp(20px, 4vw, 50px);
+
+				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); }
+					
+						&[type='checkbox'] {
+							position       : relative;
+							display        : inline-block;
+							width          : 50px;
+							height         : 30px;
+							font-family    : 'WalterTurncoat';
+							font-size      : 20px;
+							font-weight    : 800;
+							color          : white;
+							letter-spacing : 2px;
+							appearance     : none;
+							background     : red;
+							isolation      : isolate;
+							border-radius  : 5px;
+
+							&::before,&::after {
+								position    : absolute;
+								inset       : 0;
+								z-index     : 5;
+								padding-top : 2px;
+								text-align  : center;
+							}
+
+							&::before {
+								display : block;
+								content : 'No';
+							}
+
+							&::after {
+								display : none;
+								content : 'Yes';
+							}
+
+							&:checked {
+								background : green;
+
+								&::before { display : none; }
+								&::after { display : block; }
+							}
+						}
+					}
+
+					
+
+					#searchButton {
+						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-family    : 'BookInsanityRemake';
+				font-size      : 0.34cm;
+
+				
+				h3 {
+					font-family : 'Open Sans';
+					font-weight : 900;
+					color       : white;
+				}
+
+				.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;
+							display:block;
+							content:'';
+							background-image : url('/assets/parchmentBackground.jpg');
+							z-index:-1;
+						}
+
+						&: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 {
+							font-family : 'ScalySansRemake';
+							font-size   : 1.2em;
+							position:relative;
+							z-index:2;
+
+							>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 {
+							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 .content {
+
+		.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }
+
+		.dataGroup.resultsContainer .foundBrews .brewItem {
+			width         : 100%;
+			margin-inline : auto;
+		}
+	}
+}

client/icons/customIcons.less

@@ -1,57 +1,75 @@
 .fac {
-  display      : inline-block;
+	display          : inline-block;
+	background-color : currentColor;
+	mask-size        : contain;
+	mask-repeat      : no-repeat;
+	mask-position    : center;
+	width            : 1em;
+	aspect-ratio     : 1;
 }
 .position-top-left {
-  content: url('../icons/position-top-left.svg');
+  mask-image: url('../icons/position-top-left.svg');
 }
 .position-top-right {
-  content: url('../icons/position-top-right.svg');
+  mask-image: url('../icons/position-top-right.svg');
 }
 .position-bottom-left {
-  content: url('../icons/position-bottom-left.svg');
+  mask-image: url('../icons/position-bottom-left.svg');
 }
 .position-bottom-right {
-  content: url('../icons/position-bottom-right.svg');
+  mask-image: url('../icons/position-bottom-right.svg');
 }
 .position-top {
-  content: url('../icons/position-top.svg');
+  mask-image: url('../icons/position-top.svg');
 }
 .position-right {
-  content: url('../icons/position-right.svg');
+  mask-image: url('../icons/position-right.svg');
 }
 .position-bottom {
-  content: url('../icons/position-bottom.svg');
+  mask-image: url('../icons/position-bottom.svg');
 }
 .position-left {
-  content: url('../icons/position-left.svg');
+  mask-image: url('../icons/position-left.svg');
 }
 .mask-edge {
-  content: url('../icons/mask-edge.svg');
+  mask-image: url('../icons/mask-edge.svg');
 }
 .mask-corner {
-  content: url('../icons/mask-corner.svg');
+  mask-image: url('../icons/mask-corner.svg');
 }
 .mask-center {
-  content: url('../icons/mask-center.svg');
+  mask-image: url('../icons/mask-center.svg');
 }
 .book-front-cover {
-  content: url('../icons/book-front-cover.svg');
+  mask-image: url('../icons/book-front-cover.svg');
 }
 .book-back-cover {
-  content: url('../icons/book-back-cover.svg');
+  mask-image: url('../icons/book-back-cover.svg');
 }
 .book-inside-cover {
-  content: url('../icons/book-inside-cover.svg');
+  mask-image: url('../icons/book-inside-cover.svg');
 }
 .book-part-cover {
-  content: url('../icons/book-part-cover.svg');
+  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');
 }
 .davek {
-  content: url('../icons/Davek.svg');
+  mask-image: url('../icons/Davek.svg');
 }
 .rellanic {
-  content: url('../icons/Rellanic.svg');
+  mask-image: url('../icons/Rellanic.svg');
 }
 .iokharic {
-  content: url('../icons/Iokharic.svg');
+  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');
 }

client/icons/fit-width.svg

@@ -0,0 +1,15 @@
+<?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/image-wrap-left.svg

@@ -0,0 +1,58 @@
+<?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

@@ -0,0 +1,58 @@
+<?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>

client/icons/zoom-to-fit.svg

@@ -0,0 +1,12 @@
+<?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.841196,0,0,0.947993,8.49652,4.52391)">
+            <path d="M44.333,52.413L28.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.528L44.333,43.528L44.333,29.439L37.382,29.439C36.099,29.439 34.943,28.755 34.452,27.705C33.961,26.656 34.233,25.448 35.14,24.644L47.097,14.052C48.335,12.956 50.343,12.956 51.581,14.052L63.539,24.644C64.446,25.448 64.717,26.656 64.226,27.705C63.735,28.755 62.579,29.439 61.296,29.439L54.346,29.439L54.346,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.413L54.346,52.413L54.346,66.502L61.296,66.502C62.579,66.502 63.735,67.187 64.226,68.236C64.717,69.286 64.446,70.494 63.539,71.297L51.581,81.889C50.343,82.986 48.335,82.986 47.097,81.889L35.14,71.297C34.233,70.494 33.961,69.286 34.452,68.236C34.943,67.187 36.099,66.502 37.382,66.502L44.333,66.503L44.333,52.413Z"/>
+        </g>
+        <g transform="matrix(1.0247,0,0,1.0247,-5.47698,-3.53855)">
+            <path d="M99.4,14.269L99.4,90.227C99.4,94.245 96.137,97.508 92.119,97.508L16.161,97.508C12.142,97.508 8.88,94.245 8.88,90.227L8.88,14.269C8.88,10.25 12.142,6.988 16.161,6.988L92.119,6.988C96.137,6.988 99.4,10.25 99.4,14.269ZM93.633,14.269C93.633,13.433 92.955,12.755 92.119,12.755L16.161,12.755C15.325,12.755 14.647,13.433 14.647,14.269L14.647,90.227C14.647,91.062 15.325,91.741 16.161,91.741L92.119,91.741C92.955,91.741 93.633,91.062 93.633,90.227L93.633,14.269Z"/>
+        </g>
+    </g>
+</svg>

client/template.js

@@ -12,9 +12,9 @@ const template = async function(name, title='', props = {}){
 	<html>
 		<head>
 			<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" />
-			<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+			<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=${`/${name}/bundle.css`} rel='stylesheet' />
+			<link href=${`/${name}/bundle.css`} type="text/css" rel='stylesheet' />
 			<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
 			${ogMetaTags}
 			<meta name="twitter:card" content="summary">

config/default.json

@@ -4,6 +4,7 @@
 	"secret" : "secret",
 	"web_port" : 8000,
 	"enable_v3" : true,
+	"enable_themes" : true,
 	"local_environments" : ["docker", "local"],
 	"publicUrl" : "https://homebrewery.naturalcrit.com"
 }

eslint.config.mjs

@@ -0,0 +1,71 @@
+import react from "eslint-plugin-react";
+import jest from "eslint-plugin-jest";
+import globals from "globals";
+
+export default [{
+		ignores: ["build/"]
+	},
+	{
+		files           : ['**/*.js', '**/*.jsx'],
+		plugins         : { react, jest },
+		languageOptions : {
+				ecmaVersion   : "latest",
+				sourceType    : "module",
+				parserOptions : { ecmaFeatures: { jsx: true } },
+				globals       : { ...globals.browser, ...globals.node }
+		},
+		rules: {
+				/** Errors **/
+				"camelcase"              : ["error", { properties: "never" }],
+				"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" }],
+				"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"],
+				"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 }
+				}]
+		}
+	}
+];

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.10.0",
+  "version": "3.15.0",
   "engines": {
     "npm": "^10.2.x",
     "node": "^20.8.x"
@@ -15,21 +15,27 @@
     "quick": "node scripts/quick.js",
     "build": "node scripts/buildHomebrew.js && node scripts/buildAdmin.js",
     "builddev": "node scripts/buildHomebrew.js --dev",
-    "lint": "eslint --fix **/*.{js,jsx}",
-    "lint:dry": "eslint **/*.{js,jsx}",
+    "lint": "eslint --fix",
+    "lint:dry": "eslint",
     "stylelint": "stylelint --fix **/*.{less}",
     "stylelint:dry": "stylelint **/*.less",
     "circleci": "npm test && eslint **/*.{js,jsx} --max-warnings=0",
     "verify": "npm run lint && npm test",
     "test": "jest --runInBand",
-    "test:api-unit": "jest server/*.spec.js --verbose",
+    "test:api-unit": "jest \"server/.*.spec.js\" --verbose",
+    "test:api-unit:themes": "jest \"server/.*.spec.js\" -t \"theme bundle\" --verbose",
+    "test:api-unit:css": "jest \"server/.*.spec.js\" -t \"Get CSS\" --verbose",
     "test:coverage": "jest --coverage --silent --runInBand",
     "test:dev": "jest --verbose --watch",
     "test:basic": "jest tests/markdown/basic.test.js --verbose",
-    "test:mustache-syntax": "jest '.*(mustache-syntax).*' --verbose --noStackTrace",
-    "test:mustache-syntax:inline": "jest '.*(mustache-syntax).*' -t '^Inline:.*' --verbose --noStackTrace",
-    "test:mustache-syntax:block": "jest '.*(mustache-syntax).*' -t '^Block:.*' --verbose --noStackTrace",
-    "test:mustache-syntax:injection": "jest '.*(mustache-syntax).*' -t '^Injection:.*' --verbose --noStackTrace",
+    "test:variables": "jest tests/markdown/variables.test.js --verbose",
+    "test:mustache-syntax": "jest \".*(mustache-syntax).*\" --verbose --noStackTrace",
+    "test:mustache-syntax:inline": "jest \".*(mustache-syntax).*\" -t '^Inline:.*' --verbose --noStackTrace",
+    "test:mustache-syntax:block": "jest \".*(mustache-syntax).*\" -t '^Block:.*' --verbose --noStackTrace",
+    "test:mustache-syntax:injection": "jest \".*(mustache-syntax).*\" -t '^Injection:.*' --verbose --noStackTrace",
+    "test:definition-lists": "jest tests/markdown/definition-lists.test.js --verbose --noStackTrace",
+    "test:hard-breaks": "jest tests/markdown/hard-breaks.test.js --verbose --noStackTrace",
+    "test:emojis": "jest tests/markdown/emojis.test.js --verbose --noStackTrace",
     "test:route": "jest tests/routes/static-pages.test.js --verbose",
     "phb": "node scripts/phb.js",
     "prod": "set NODE_ENV=production && npm run build",
@@ -53,15 +59,15 @@
     ],
     "coverageThreshold": {
       "global": {
-        "statements": 25,
-        "branches": 10,
-        "functions": 22,
-        "lines": 25
+        "statements": 50,
+        "branches": 40,
+        "functions": 40,
+        "lines": 50
       },
       "server/homebrew.api.js": {
-        "statements": 65,
+        "statements": 70,
         "branches": 50,
-        "functions": 60,
+        "functions": 65,
         "lines": 70
       }
     },
@@ -79,18 +85,20 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-transform-runtime": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@googleapis/drive": "^8.6.0",
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-runtime": "^7.25.4",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@googleapis/drive": "^8.14.0",
     "body-parser": "^1.20.2",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "codemirror": "^5.65.6",
     "cookie-parser": "^1.4.6",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.3",
-    "express": "^4.18.2",
+    "dompurify": "^3.1.6",
+    "expr-eval": "^2.0.2",
+    "express": "^4.19.2",
     "express-async-handler": "^1.2.0",
     "express-static-gzip": "2.1.7",
     "fs-extra": "11.2.0",
@@ -98,34 +106,36 @@
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "11.1.1",
-    "marked-extended-tables": "^1.0.8",
-    "marked-gfm-heading-id": "^3.1.2",
+    "marked": "11.2.0",
+    "marked-emoji": "^1.4.2",
+    "marked-extended-tables": "^1.0.10",
+    "marked-gfm-heading-id": "^3.2.0",
     "marked-smartypants-lite": "^1.0.2",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.1.1",
+    "mongoose": "^8.6.0",
     "nanoid": "3.3.4",
     "nconf": "^0.12.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-frame-component": "^4.1.3",
-    "react-router-dom": "6.21.3",
+    "react-router-dom": "6.26.1",
     "sanitize-filename": "1.6.3",
-    "superagent": "^8.1.2",
+    "superagent": "^10.1.0",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^8.56.0",
-    "eslint-plugin-jest": "^27.6.3",
-    "eslint-plugin-react": "^7.33.2",
+    "@stylistic/stylelint-plugin": "^3.0.1",
+    "eslint": "^9.9.1",
+    "eslint-plugin-jest": "^28.8.2",
+    "eslint-plugin-react": "^7.35.1",
+    "globals": "^15.9.0",
     "jest": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "postcss-less": "^6.0.0",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recess-order": "^4.4.0",
-    "stylelint-config-recommended": "^13.0.0",
-    "stylelint-stylistic": "^0.4.3",
-    "supertest": "^6.3.4"
+    "stylelint": "^16.9.0",
+    "stylelint-config-recess-order": "^5.1.0",
+    "stylelint-config-recommended": "^14.0.1",
+    "supertest": "^7.0.0"
   }
 }

scripts/project.json

@@ -25,6 +25,7 @@
 		"codemirror/addon/edit/closetag.js",
 		"codemirror/addon/edit/trailingspace.js",
 		"codemirror/addon/selection/active-line.js",
+		"codemirror/addon/hint/show-hint.js",
 		"moment",
 		"superagent"
 	]

server.js

@@ -7,6 +7,14 @@ DB.connect(config).then(()=>{
 	// before launching server
 	const PORT = process.env.PORT || config.get('web_port') || 8000;
 	server.app.listen(PORT, ()=>{
-		console.log(`server on port: ${PORT}`);
+		const reset = '\x1b[0m'; // Reset to default style
+		const bright = '\x1b[1m'; // Bright (bold) style
+		const cyan = '\x1b[36m'; // Cyan color
+		const underline = '\x1b[4m'; // Underlined style
+
+		console.log(`\n\tserver started at: ${new Date().toLocaleString()}`);
+		console.log(`\tserver on port: ${PORT}`);
+		console.log(`\t${bright + cyan}Open in browser: ${reset}${underline + bright + cyan}http://localhost:${PORT}${reset}\n\n`);
+
 	});
 });

server/admin.api.js

@@ -30,7 +30,7 @@ const junkBrewPipeline = [
 	{	$match : {
 		updatedAt  : { $lt: Moment().subtract(30, 'days').toDate() },
 		lastViewed : { $lt: Moment().subtract(30, 'days').toDate() }
-	}},
+	} },
 	{ $project: { textBinSize: { $binarySize: '$textBin' } } },
 	{ $match: { textBinSize: { $lt: 140 } } },
 	{ $limit: 100 }
@@ -84,7 +84,7 @@ router.get('/admin/lookup/:id', mw.adminOnly, async (req, res, next)=>{
 		return res.status(500).json({ error: 'Internal Server Error' });
 	});
 });
-  
+
 /* Find 50 brews that aren't compressed yet */
 router.get('/admin/finduncompressed', mw.adminOnly, (req, res)=>{
 	const query = uncompressedBrewQuery.clone();

server/app.js

@@ -9,34 +9,22 @@ const yaml = require('js-yaml');
 const app = express();
 const config = require('./config.js');
 
-const { homebrewApi, getBrew } = require('./homebrew.api.js');
+const { homebrewApi, getBrew, getUsersBrewThemes, getCSS } = require('./homebrew.api.js');
 const GoogleActions = require('./googleActions.js');
 const serveCompressedStaticAssets = require('./static-assets.mv.js');
 const sanitizeFilename = require('sanitize-filename');
 const asyncHandler = require('express-async-handler');
+const templateFn = require('./../client/template.js');
 
 const { DEFAULT_BREW } = require('./brewDefaults.js');
 
-const splitTextStyleAndMetadata = (brew)=>{
-	brew.text = brew.text.replaceAll('\r\n', '\n');
-	if(brew.text.startsWith('```metadata')) {
-		const index = brew.text.indexOf('```\n\n');
-		const metadataSection = brew.text.slice(12, index - 1);
-		const metadata = yaml.load(metadataSection);
-		Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang']));
-		brew.text = brew.text.slice(index + 5);
-	}
-	if(brew.text.startsWith('```css')) {
-		const index = brew.text.indexOf('```\n\n');
-		brew.style = brew.text.slice(7, index - 1);
-		brew.text = brew.text.slice(index + 5);
-	}
-};
+const { splitTextStyleAndMetadata } = require('../shared/helpers.js');
+
 
 const sanitizeBrew = (brew, accessType)=>{
 	brew._id = undefined;
 	brew.__v = undefined;
-	if(accessType !== 'edit'){
+	if(accessType !== 'edit' && accessType !== 'shareAuthor') {
 		brew.editId = undefined;
 	}
 	return brew;
@@ -67,7 +55,7 @@ app.use((req, res, next)=>{
 
 app.use(homebrewApi);
 app.use(require('./admin.api.js'));
-app.use(require('./archive.api.js'));
+app.use(require('./vault.api.js'));
 
 const HomebrewModel     = require('./homebrew.model.js').model;
 const welcomeText       = require('fs').readFileSync('client/homebrew/pages/homePage/welcome_msg.md', 'utf8');
@@ -95,7 +83,8 @@ app.get('/robots.txt', (req, res)=>{
 app.get('/', (req, res, next)=>{
 	req.brew = {
 		text     : welcomeText,
-		renderer : 'V3'
+		renderer : 'V3',
+		theme    : '5ePHB'
 	},
 
 	req.ogMeta = { ...defaultMetaTags,
@@ -111,7 +100,8 @@ app.get('/', (req, res, next)=>{
 app.get('/legacy', (req, res, next)=>{
 	req.brew = {
 		text     : welcomeTextLegacy,
-		renderer : 'legacy'
+		renderer : 'legacy',
+		theme    : '5ePHB'
 	},
 
 	req.ogMeta = { ...defaultMetaTags,
@@ -127,7 +117,8 @@ app.get('/legacy', (req, res, next)=>{
 app.get('/migrate', (req, res, next)=>{
 	req.brew = {
 		text     : migrateText,
-		renderer : 'V3'
+		renderer : 'V3',
+		theme    : '5ePHB'
 	},
 
 	req.ogMeta = { ...defaultMetaTags,
@@ -144,7 +135,8 @@ app.get('/changelog', async (req, res, next)=>{
 	req.brew = {
 		title    : 'Changelog',
 		text     : changelogText,
-		renderer : 'V3'
+		renderer : 'V3',
+		theme    : '5ePHB'
 	},
 
 	req.ogMeta = { ...defaultMetaTags,
@@ -161,7 +153,8 @@ app.get('/faq', async (req, res, next)=>{
 	req.brew = {
 		title    : 'FAQ',
 		text     : faqText,
-		renderer : 'V3'
+		renderer : 'V3',
+		theme    : '5ePHB'
 	},
 
 	req.ogMeta = { ...defaultMetaTags,
@@ -209,6 +202,9 @@ app.get('/download/:id', asyncHandler(getBrew('share')), (req, res)=>{
 	res.status(200).send(brew.text);
 });
 
+//Serve brew styling
+app.get('/css/:id', asyncHandler(getBrew('share')), (req, res)=>{getCSS(req, res);});
+
 //User Page
 app.get('/user/:username', async (req, res, next)=>{
 	const ownAccount = req.account && (req.account.username == req.params.username);
@@ -279,9 +275,11 @@ app.get('/user/:username', async (req, res, next)=>{
 });
 
 //Edit Page
-app.get('/edit/:id', asyncHandler(getBrew('edit')), (req, res, next)=>{
+app.get('/edit/:id', asyncHandler(getBrew('edit')), asyncHandler(async(req, res, next)=>{
 	req.brew = req.brew.toObject ? req.brew.toObject() : req.brew;
 
+	req.userThemes = await(getUsersBrewThemes(req.account?.username));
+
 	req.ogMeta = { ...defaultMetaTags,
 		title       : req.brew.title || 'Untitled Brew',
 		description : req.brew.description || 'No description.',
@@ -293,10 +291,10 @@ app.get('/edit/:id', asyncHandler(getBrew('edit')), (req, res, next)=>{
 	splitTextStyleAndMetadata(req.brew);
 	res.header('Cache-Control', 'no-cache, no-store');	//reload the latest saved brew when pressing back button, not the cached version before save.
 	return next();
-});
+}));
 
-//New Page
-app.get('/new/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
+//New Page from ID
+app.get('/new/:id', asyncHandler(getBrew('share')), asyncHandler(async(req, res, next)=>{
 	sanitizeBrew(req.brew, 'share');
 	splitTextStyleAndMetadata(req.brew);
 	const brew = {
@@ -306,22 +304,35 @@ app.get('/new/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
 		style    : req.brew.style,
 		renderer : req.brew.renderer,
 		theme    : req.brew.theme,
-		tags     : req.brew.tags
+		tags     : req.brew.tags,
 	};
 	req.brew = _.defaults(brew, DEFAULT_BREW);
 
+	req.userThemes = await(getUsersBrewThemes(req.account?.username));
+
 	req.ogMeta = { ...defaultMetaTags,
 		title       : 'New',
 		description : 'Start crafting your homebrew on the Homebrewery!'
 	};
 
 	return next();
-});
+}));
+
+//New Page
+app.get('/new', asyncHandler(async(req, res, next)=>{
+	req.userThemes = await(getUsersBrewThemes(req.account?.username));
+
+	req.ogMeta = { ...defaultMetaTags,
+		title       : 'New',
+		description : 'Start crafting your homebrew on the Homebrewery!'
+	};
+
+	return next();
+}));
 
 //Share Page
 app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
 	const { brew } = req;
-
 	req.ogMeta = { ...defaultMetaTags,
 		title       : req.brew.title || 'Untitled Brew',
 		description : req.brew.description || 'No description.',
@@ -340,22 +351,25 @@ app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, r
 			await HomebrewModel.increaseView({ shareId: brew.shareId });
 		}
 	};
-	sanitizeBrew(req.brew, 'share');
+
+	brew.authors.includes(req.account?.username) ? sanitizeBrew(req.brew, 'shareAuthor') : sanitizeBrew(req.brew, 'share');
 	splitTextStyleAndMetadata(req.brew);
 	return next();
 }));
 
-//Print Page
-app.get('/print/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
-	sanitizeBrew(req.brew, 'share');
-	splitTextStyleAndMetadata(req.brew);
-	next();
-});
-
 //Account Page
 app.get('/account', asyncHandler(async (req, res, next)=>{
 	const data = {};
 	data.title = 'Account Information Page';
+	
+	if(!req.account) {
+		res.set('WWW-Authenticate', 'Bearer realm="Authorization Required"');
+		const error = new Error('No valid account');
+		error.status = 401;
+		error.HBErrorCode = '50';
+		error.page = data.title;
+		return next(error);
+	};
 
 	let auth;
 	let googleCount = [];
@@ -386,7 +400,7 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
 				console.log(err);
 			});
 
-		data.uiItems = {
+		data.accountDetails = {
 			username    : req.account.username,
 			issued      : req.account.issued,
 			googleId    : Boolean(req.account.googleId),
@@ -420,8 +434,21 @@ if(isLocalEnvironment){
 	});
 }
 
+//Vault Page
+app.get('/vault', asyncHandler(async(req, res, next)=>{
+	return next();
+}));
+
+//Send rendered page
+app.use(asyncHandler(async (req, res, next)=>{
+	if (!req.route) return res.redirect('/'); // Catch-all for invalid routes
+		
+	const page = await renderPage(req, res);
+	if(!page) return;
+	res.send(page);
+}));
+
 //Render the page
-const templateFn = require('./../client/template.js');
 const renderPage = async (req, res)=>{
 	// Create configuration object
 	const configuration = {
@@ -439,7 +466,8 @@ const renderPage = async (req, res)=>{
 		enable_v3     : config.get('enable_v3'),
 		enable_themes : config.get('enable_themes'),
 		config        : configuration,
-		ogMeta        : req.ogMeta
+		ogMeta        : req.ogMeta,
+		userThemes    : req.userThemes
 	};
 	const title = req.brew ? req.brew.title : '';
 	const page = await templateFn('homebrew', title, props)
@@ -449,13 +477,6 @@ const renderPage = async (req, res)=>{
 	return page;
 };
 
-//Send rendered page
-app.use(asyncHandler(async (req, res, next)=>{
-	const page = await renderPage(req, res);
-	if(!page) return;
-	res.send(page);
-}));
-
 //v=====----- Error-Handling Middleware -----=====v//
 //Format Errors as plain objects so all fields will appear in the string sent
 const formatErrors = (key, value)=>{
@@ -482,11 +503,6 @@ app.use(async (err, req, res, next)=>{
 		res.status(err.status || err.response?.status || 500).send(err);
 		return;
 	}
-	if(err.originalUrl?.startsWith('/archive/')) {
-		// console.log('archive error');
-		res.status(err.status || err.response?.status || 500).send(err);
-		return;
-	}
 
 	// console.log('non-API error');
 	const status = err.status || err.code || 500;
@@ -510,8 +526,6 @@ app.use(async (err, req, res, next)=>{
 	res.send(page);
 });
 
-
-
 app.use((req, res)=>{
 	if(!res.headersSent) {
 		console.error('Headers have not been sent, responding with a server error.', req.url);

server/archive.api.js

@@ -1,53 +0,0 @@
-const HomebrewModel = require('./homebrew.model.js').model;
-const router = require('express').Router();
-const asyncHandler = require('express-async-handler');
-
-const archive = {
-	archiveApi : router,
-	/* Searches for matching title, also attempts to partial match */
-	findBrews  : async (req, res, next)=>{
-		try {
-			const title = req.query.title || '';
-			const page = parseInt(req.query.page) || 1;
-			console.log('try:', page);
-			const pageSize = 10; // Set a default page size
-			const skip = (page - 1) * pageSize;
-
-			const titleQuery = {
-				title     : { $regex: decodeURIComponent(title), $options: 'i' },
-				published : true
-			};
-
-			const projection = {
-				editId   : 0,
-				googleId : 0,
-				text     : 0,
-				textBin  : 0,
-			};
-
-			const brews = await HomebrewModel.find(titleQuery, projection)
-                .skip(skip)
-                .limit(pageSize)
-                .maxTimeMS(5000)
-                .exec();
-
-			if(!brews || brews.length === 0) {
-				// No published documents found with the given title
-				return res.status(404).json({ error: 'Published documents not found' });
-			}
-
-			const totalDocuments = await HomebrewModel.countDocuments(title);
-
-			const totalPages = Math.ceil(totalDocuments / pageSize);
-
-			return res.json({ brews, page, totalPages });
-		} catch (error) {
-			console.error(error);
-			return res.status(500).json({ error: 'Internal Server Error' });
-		}
-	}
-};
-
-router.get('/api/archive', asyncHandler(archive.findBrews));
-
-module.exports = router;

server/googleActions.js

@@ -1,5 +1,4 @@
 /* eslint-disable max-lines */
-const _ = require('lodash');
 const googleDrive = require('@googleapis/drive');
 const { nanoid } = require('nanoid');
 const token = require('./token.js');
@@ -7,7 +6,9 @@ const config = require('./config.js');
 
 let serviceAuth;
 if(!config.get('service_account')){
-	console.log('No Google Service Account in config files - Google Drive integration will not be available.');
+	const reset = '\x1b[0m'; // Reset to default style
+	const yellow = '\x1b[33m'; // yellow color
+	console.warn(`\n${yellow}No Google Service Account in config files - Google Drive integration will not be available.${reset}`);
 } else  {
 	const keys = typeof(config.get('service_account')) == 'string' ?
 		JSON.parse(config.get('service_account')) :
@@ -18,7 +19,7 @@ if(!config.get('service_account')){
 		serviceAuth.scopes = ['https://www.googleapis.com/auth/drive'];
 	} catch (err) {
 		console.warn(err);
-		console.log('Please make sure the Google Service Account is set up properly in your config files.');
+		console.warn('Please make sure the Google Service Account is set up properly in your config files.');
 	}
 }
 

server/homebrew.api.js

@@ -8,9 +8,16 @@ const Markdown = require('../shared/naturalcrit/markdown.js');
 const yaml = require('js-yaml');
 const asyncHandler = require('express-async-handler');
 const { nanoid } = require('nanoid');
+const { splitTextStyleAndMetadata } = require('../shared/helpers.js');
 
 const { DEFAULT_BREW, DEFAULT_BREW_LOAD } = require('./brewDefaults.js');
 
+const Themes = require('../themes/themes.json');
+
+const isStaticTheme = (renderer, themeName)=>{
+	return Themes[renderer]?.[themeName] !== undefined;
+};
+
 // const getTopBrews = (cb) => {
 // 	HomebrewModel.find().sort({ views: -1 }).limit(5).exec(function(err, brews) {
 // 		cb(brews);
@@ -37,6 +44,43 @@ const api = {
 		}
 		return { id, googleId };
 	},
+	//Get array of any of this user's brews tagged with `meta:theme`
+	getUsersBrewThemes : async (username)=>{
+		if(!username)
+			return {};
+
+		const fields = [
+			'title',
+			'tags',
+			'shareId',
+			'thumbnail',
+			'textBin',
+			'text',
+			'authors',
+			'renderer'
+		];
+
+		const userThemes = {};
+
+		const brews = await HomebrewModel.getByUser(username, true, fields, { tags: { $in: ['meta:theme', 'meta:Theme'] } });
+
+		if(brews) {
+			for (const brew of brews) {
+				userThemes[brew.renderer] ??= {};
+				userThemes[brew.renderer][brew.shareId] = {
+					name         : brew.title,
+					renderer     : brew.renderer,
+					baseTheme    : brew.theme,
+					baseSnippets : false,
+					author       : brew.authors[0],
+					path         : brew.shareId,
+					thumbnail    : brew.thumbnail || '/assets/naturalCritLogoWhite.svg'
+				};
+			}
+		}
+
+		return userThemes;
+	},
 	getBrew : (accessType, stubOnly = false)=>{
 		// Create middleware with the accessType passed in as part of the scope
 		return async (req, res, next)=>{
@@ -54,6 +98,10 @@ const api = {
 				});
 			stub = stub?.toObject();
 
+			if(stub?.lock?.locked && accessType != 'edit') {
+				throw { HBErrorCode: '51', code: stub.lock.code, message: stub.lock.shareMessage, brewId: stub.shareId, brewTitle: stub.title };
+			}
+
 			// If there is a google id, try to find the google brew
 			if(!stubOnly && (googleId || stub?.googleId)) {
 				let googleError;
@@ -81,7 +129,7 @@ const api = {
 				if(req.account){
 					throw { ...accessError, message: 'User is not an Author', HBErrorCode: '03', authors: stub.authors, brewTitle: stub.title, shareId: stub.shareId };
 				}
-				throw { ...accessError, message: 'User is not logged in', HBErrorCode: '04', authors: stub.authors, brewTitle: stub.title };
+				throw { ...accessError, message: 'User is not logged in', HBErrorCode: '04', authors: stub.authors, brewTitle: stub.title, shareId: stub.shareId };
 			}
 
 			// If after all of that we still don't have a brew, throw an exception
@@ -100,6 +148,20 @@ const api = {
 			next();
 		};
 	},
+
+	getCSS : async (req, res)=>{
+		const { brew } = req;
+		if(!brew) return res.status(404).send('');
+		splitTextStyleAndMetadata(brew);
+		if(!brew.style) return res.status(404).send('');
+
+		res.set({
+			'Cache-Control' : 'no-cache',
+			'Content-Type'  : 'text/css'
+		});
+		return res.status(200).send(brew.style);
+	},
+
 	mergeBrewText : (brew)=>{
 		let text = brew.text;
 		if(brew.style !== undefined) {
@@ -138,7 +200,7 @@ const api = {
 		return modified;
 	},
 	excludeStubProps : (brew)=>{
-		const propsToExclude = ['text', 'textBin', 'renderer', 'pageCount'];
+		const propsToExclude = ['text', 'textBin'];
 		for (const prop of propsToExclude) {
 			brew[prop] = undefined;
 		}
@@ -205,6 +267,58 @@ const api = {
 
 		res.status(200).send(saved);
 	},
+	getThemeBundle : async(req, res)=>{
+		/*	getThemeBundle: Collects the theme and all parent themes
+				returns an object containing an array of css, and an array of snippets, in render order
+
+				req.params.id       : The shareId ( User theme ) or name ( static theme )
+				req.params.renderer : The Markdown renderer used for this theme */
+
+		req.params.renderer = _.upperFirst(req.params.renderer);
+		let currentTheme;
+		const completeStyles   = [];
+		const completeSnippets = [];
+
+		while (req.params.id) {
+			//=== User Themes ===//
+			if(!isStaticTheme(req.params.renderer, req.params.id)) {
+				await api.getBrew('share')(req, res, ()=>{})
+					.catch((err)=>{
+						if(err.HBErrorCode == '05')
+							err = { ...err, name: 'ThemeLoad Error', message: 'Theme Not Found', HBErrorCode: '09' };
+						throw err;
+					});
+
+				currentTheme = req.brew;
+				splitTextStyleAndMetadata(currentTheme);
+
+				// If there is anything in the snippets or style members, append them to the appropriate array
+				if(currentTheme?.snippets) completeSnippets.push(JSON.parse(currentTheme.snippets));
+				if(currentTheme?.style) completeStyles.push(`/* From Brew: ${req.protocol}://${req.get('host')}/share/${req.params.id} */\n\n${currentTheme.style}`);
+
+				req.params.id       = currentTheme.theme;
+				req.params.renderer = currentTheme.renderer;
+			}
+			//=== Static Themes ===//
+			else {
+				const localSnippets = `${req.params.renderer}_${req.params.id}`; // Just log the name for loading on client
+				const localStyle    = `@import url(\"/themes/${req.params.renderer}/${req.params.id}/style.css\");`;
+				completeSnippets.push(localSnippets);
+				completeStyles.push(`/* From Theme ${req.params.id} */\n\n${localStyle}`);
+
+				req.params.id = Themes[req.params.renderer][req.params.id].baseTheme;
+			}
+		}
+
+		const returnObj = {
+			// Reverse the order of the arrays so they are listed oldest parent to youngest child.
+			styles   : completeStyles.reverse(),
+			snippets : completeSnippets.reverse()
+		};
+
+		res.setHeader('Content-Type', 'application/json');
+		return res.status(200).send(returnObj);
+	},
 	updateBrew : async (req, res)=>{
 		// Initialize brew from request and body, destructure query params, and set the initial value for the after-save method
 		const brewFromClient = api.excludePropsFromUpdate(req.body);
@@ -365,5 +479,6 @@ router.put('/api/:id', asyncHandler(api.getBrew('edit', true)), asyncHandler(api
 router.put('/api/update/:id', asyncHandler(api.getBrew('edit', true)), asyncHandler(api.updateBrew));
 router.delete('/api/:id', asyncHandler(api.deleteBrew));
 router.get('/api/remove/:id', asyncHandler(api.deleteBrew));
+router.get('/api/theme/:renderer/:id', asyncHandler(api.getThemeBundle));
 
 module.exports = api;

server/homebrew.api.spec.js

@@ -14,6 +14,9 @@ describe('Tests for api', ()=>{
 	let saved;
 
 	beforeEach(()=>{
+		jest.resetModules();
+		jest.restoreAllMocks();
+
 		saved = undefined;
 		saveFunc = jest.fn(async function() {
 			saved = { ...this, _id: '1' };
@@ -45,8 +48,10 @@ describe('Tests for api', ()=>{
 		model.mockImplementation((brew)=>modelBrew(brew));
 
 		res = {
-			status : jest.fn(()=>res),
-			send   : jest.fn(()=>{})
+			status    : jest.fn(()=>res),
+			send      : jest.fn(()=>{}),
+			set       : jest.fn(()=>{}),
+			setHeader : jest.fn(()=>{})
 		};
 
 		api = require('./homebrew.api');
@@ -81,10 +86,6 @@ describe('Tests for api', ()=>{
 		};
 	});
 
-	afterEach(()=>{
-		jest.restoreAllMocks();
-	});
-
 	describe('getId', ()=>{
 		it('should return only id if google id is not present', ()=>{
 			const { id, googleId } = api.getId({
@@ -117,7 +118,7 @@ describe('Tests for api', ()=>{
 					id : '123456789012345678901234567890123abcdefghijkl'
 				}
 			});
-			
+
 			expect(googleId).toEqual('123456789012345678901234567890123');
 			expect(id).toEqual('abcdefghijkl');
 		});
@@ -128,7 +129,7 @@ describe('Tests for api', ()=>{
 					id : '123456789012345678901234567890123abcdefghij'
 				}
 			});
-			
+
 			expect(googleId).toEqual('123456789012345678901234567890123');
 			expect(id).toEqual('abcdefghij');
 		});
@@ -298,6 +299,18 @@ describe('Tests for api', ()=>{
 			expect(model.get).toHaveBeenCalledWith({ shareId: '1' });
 			expect(google.getGoogleBrew).toHaveBeenCalledWith('2', '1', 'share');
 		});
+
+		it('access is denied to a locked brew', async()=>{
+			const lockBrew = { title: 'test brew', shareId: '1', lock: { locked: true, code: 404, shareMessage: 'brew locked' } };
+			model.get = jest.fn(()=>toBrewPromise(lockBrew));
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+
+			const fn = api.getBrew('share', false);
+			const req = { brew: {} };
+			const next = jest.fn();
+
+			await expect(fn(req, null, next)).rejects.toEqual({ 'HBErrorCode': '51', 'brewId': '1', 'brewTitle': 'test brew', 'code': 404, 'message': 'brew locked' });
+		});
 	});
 
 	describe('mergeBrewText', ()=>{
@@ -396,8 +409,8 @@ brew`);
 			expect(sent).not.toEqual(googleBrew);
 			expect(result.text).toBeUndefined();
 			expect(result.textBin).toBeUndefined();
-			expect(result.renderer).toBeUndefined();
-			expect(result.pageCount).toBeUndefined();
+			expect(result.renderer).toBe('v3');
+			expect(result.pageCount).toBe(1);
 		});
 	});
 
@@ -528,9 +541,9 @@ brew`);
 				description : '',
 				editId      : expect.any(String),
 				gDrive      : false,
-				pageCount   : undefined,
+				pageCount   : 1,
 				published   : false,
-				renderer    : undefined,
+				renderer    : 'V3',
 				lang        : 'en',
 				shareId     : expect.any(String),
 				googleId    : expect.any(String),
@@ -569,6 +582,121 @@ brew`);
 		});
 	});
 
+	describe('Theme bundle', ()=>{
+		it('should return Theme Bundle for a User Theme', async ()=>{
+			const brews = {
+				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: null, shareId: 'userThemeAID', style: 'User Theme A Style' }
+			};
+
+			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+			model.get = jest.fn((getParams)=>toBrewPromise(brews[getParams.shareId]));
+			const req = { params: { renderer: 'V3', id: 'userThemeAID' }, get: ()=>{ return 'localhost'; }, protocol: 'https' };
+
+			await api.getThemeBundle(req, res);
+
+			expect(res.status).toHaveBeenCalledWith(200);
+			expect(res.send).toHaveBeenCalledWith({
+				styles   : ['/* From Brew: https://localhost/share/userThemeAID */\n\nUser Theme A Style'],
+				snippets : []
+			});
+		});
+
+		it('should return Theme Bundle for nested User Themes', async ()=>{
+			const brews = {
+				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'userThemeBID', shareId: 'userThemeAID', style: 'User Theme A Style' },
+				userThemeBID : { title: 'User Theme B', renderer: 'V3', theme: 'userThemeCID', shareId: 'userThemeBID', style: 'User Theme B Style' },
+				userThemeCID : { title: 'User Theme C', renderer: 'V3', theme: null, shareId: 'userThemeCID', style: 'User Theme C Style' }
+			};
+
+			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+			model.get = jest.fn((getParams)=>toBrewPromise(brews[getParams.shareId]));
+			const req = { params: { renderer: 'V3', id: 'userThemeAID' }, get: ()=>{ return 'localhost'; }, protocol: 'https' };
+
+			await api.getThemeBundle(req, res);
+
+			expect(res.status).toHaveBeenCalledWith(200);
+			expect(res.send).toHaveBeenCalledWith({
+				styles : [
+					'/* From Brew: https://localhost/share/userThemeCID */\n\nUser Theme C Style',
+					'/* From Brew: https://localhost/share/userThemeBID */\n\nUser Theme B Style',
+					'/* From Brew: https://localhost/share/userThemeAID */\n\nUser Theme A Style'
+				],
+				snippets : []
+			});
+		});
+
+		it('should return Theme Bundle for a Static Theme', async ()=>{
+			const req = { params: { renderer: 'V3', id: '5ePHB' }, get: ()=>{ return 'localhost'; }, protocol: 'https' };
+
+			await api.getThemeBundle(req, res);
+
+			expect(res.status).toHaveBeenCalledWith(200);
+			expect(res.send).toHaveBeenCalledWith({
+				styles : [
+					`/* From Theme Blank */\n\n@import url("/themes/V3/Blank/style.css");`,
+					`/* From Theme 5ePHB */\n\n@import url("/themes/V3/5ePHB/style.css");`
+				],
+				snippets : [
+					'V3_Blank',
+					'V3_5ePHB'
+				]
+			});
+		});
+
+		it('should return Theme Bundle for nested User and Static Themes together', async ()=>{
+			const brews = {
+				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'userThemeBID', shareId: 'userThemeAID', style: 'User Theme A Style' },
+				userThemeBID : { title: 'User Theme B', renderer: 'V3', theme: 'userThemeCID', shareId: 'userThemeBID', style: 'User Theme B Style' },
+				userThemeCID : { title: 'User Theme C', renderer: 'V3', theme: '5eDMG', shareId: 'userThemeCID', style: 'User Theme C Style' }
+			};
+
+			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+			model.get = jest.fn((getParams)=>toBrewPromise(brews[getParams.shareId]));
+			const req = { params: { renderer: 'V3', id: 'userThemeAID' }, get: ()=>{ return 'localhost'; }, protocol: 'https' };
+
+			await api.getThemeBundle(req, res);
+
+			expect(res.status).toHaveBeenCalledWith(200);
+			expect(res.send).toHaveBeenCalledWith({
+				styles : [
+					`/* From Theme Blank */\n\n@import url("/themes/V3/Blank/style.css");`,
+					`/* From Theme 5ePHB */\n\n@import url("/themes/V3/5ePHB/style.css");`,
+					`/* From Theme 5eDMG */\n\n@import url("/themes/V3/5eDMG/style.css");`,
+					'/* From Brew: https://localhost/share/userThemeCID */\n\nUser Theme C Style',
+					'/* From Brew: https://localhost/share/userThemeBID */\n\nUser Theme B Style',
+					'/* From Brew: https://localhost/share/userThemeAID */\n\nUser Theme A Style'
+				],
+				snippets : [
+					'V3_Blank',
+					'V3_5ePHB',
+					'V3_5eDMG'
+				]
+			});
+		});
+
+		it('should fail for an invalid Theme in the chain', async()=>{
+			const brews = {
+				userThemeAID : { title: 'User Theme A', renderer: 'V3', theme: 'missingTheme', shareId: 'userThemeAID', style: 'User Theme A Style' },
+			};
+
+			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+			model.get = jest.fn((getParams)=>toBrewPromise(brews[getParams.shareId]));
+			const req = { params: { renderer: 'V3', id: 'userThemeAID' }, get: ()=>{ return 'localhost'; }, protocol: 'https' };
+
+			let err;
+			await api.getThemeBundle(req, res)
+			.catch((e)=>err = e);
+
+			expect(err).toEqual({
+				HBErrorCode : '09',
+				accessType  : 'share',
+				brewId      : 'missingTheme',
+				message     : 'Theme Not Found',
+				name        : 'ThemeLoad Error',
+				status      : 404 });
+		});
+	});
+
 	describe('deleteBrew', ()=>{
 		it('should handle case where fetching the brew returns an error', async ()=>{
 			api.getBrew = jest.fn(()=>async ()=>{ throw { message: 'err', HBErrorCode: '02' }; });
@@ -789,4 +917,66 @@ brew`);
 			expect(saved.googleId).toEqual(brew.googleId);
 		});
 	});
+	describe('Get CSS', ()=>{
+		it('should return brew style content as CSS text', async ()=>{
+			const testBrew = { title: 'test brew', text: '```css\n\nI Have a style!\n````\n\n' };
+
+			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+			model.get = jest.fn(()=>toBrewPromise(testBrew));
+
+			const fn = api.getBrew('share', true);
+			const req = { brew: {} };
+			const next = jest.fn();
+			await fn(req, null, next);
+			await api.getCSS(req, res);
+
+			expect(req.brew).toEqual(testBrew);
+			expect(req.brew).toHaveProperty('style', '\nI Have a style!\n');
+			expect(res.status).toHaveBeenCalledWith(200);
+			expect(res.send).toHaveBeenCalledWith("\nI Have a style!\n");
+			expect(res.set).toHaveBeenCalledWith({
+				'Cache-Control' : 'no-cache',
+				'Content-Type'  : 'text/css'
+			});
+		});
+
+		it('should return 404 when brew has no style content', async ()=>{
+			const testBrew = { title: 'test brew', text: 'I don\'t have a style!' };
+
+			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+			model.get = jest.fn(()=>toBrewPromise(testBrew));
+
+			const fn = api.getBrew('share', true);
+			const req = { brew: {} };
+			const next = jest.fn();
+			await fn(req, null, next);
+			await api.getCSS(req, res);
+
+			expect(req.brew).toEqual(testBrew);
+			expect(req.brew).toHaveProperty('style');
+			expect(res.status).toHaveBeenCalledWith(404);
+			expect(res.send).toHaveBeenCalledWith('');
+		});
+
+		it('should return 404 when brew does not exist', async ()=>{
+			const testBrew = { };
+
+			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
+			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
+			model.get = jest.fn(()=>toBrewPromise(testBrew));
+
+			const fn = api.getBrew('share', true);
+			const req = { brew: {} };
+			const next = jest.fn();
+			await fn(req, null, next);
+			await api.getCSS(req, res);
+
+			expect(req.brew).toEqual(testBrew);
+			expect(req.brew).toHaveProperty('style');
+			expect(res.status).toHaveBeenCalledWith(404);
+			expect(res.send).toHaveBeenCalledWith('');
+		});
+	});
 });

server/homebrew.model.js

@@ -50,8 +50,8 @@ HomebrewSchema.statics.get = async function(query, fields=null){
 	return brew;
 };
 
-HomebrewSchema.statics.getByUser = async function(username, allowAccess=false, fields=null){
-	const query = { authors: username, published: true };
+HomebrewSchema.statics.getByUser = async function(username, allowAccess=false, fields=null, filter=null){
+	const query = { authors: username, published: true, ...filter };
 	if(allowAccess){
 		delete query.published;
 	}

server/vault.api.js

@@ -0,0 +1,102 @@
+const express = require('express');
+const asyncHandler = require('express-async-handler');
+const HomebrewModel = require('./homebrew.model.js').model;
+
+const router = express.Router();
+
+const titleConditions = (title)=>{
+	if(!title) return {};
+	return {
+		$text : {
+			$search        : title,
+			$caseSensitive : false,
+		},
+	};
+};
+
+const authorConditions = (author)=>{
+	if(!author) return {};
+	return { authors: author };
+};
+
+const rendererConditions = (legacy, v3)=>{
+	if(legacy === 'true' && v3 !== 'true')
+		return { renderer: 'legacy' };
+
+	if(v3 === 'true' && legacy !== 'true')
+		return { renderer: 'V3' };
+
+	return {}; // If all renderers selected, renderer field not needed in query for speed
+};
+
+const findBrews = async (req, res)=>{
+	const title  = req.query.title || '';
+	const author = req.query.author || '';
+	const page   = Math.max(parseInt(req.query.page)  || 1, 1);
+	const count  = Math.max(parseInt(req.query.count) || 20, 10);
+	const skip   = (page - 1) * count;
+
+	const combinedQuery = {
+		$and : [
+			{ published: true },
+			rendererConditions(req.query.legacy, req.query.v3),
+			titleConditions(title),
+			authorConditions(author)
+		],
+	};
+
+	const projection = {
+		editId   : 0,
+		googleId : 0,
+		text     : 0,
+		textBin  : 0,
+		version  : 0
+	};
+
+	await HomebrewModel.find(combinedQuery, projection)
+		.skip(skip)
+		.limit(count)
+		.maxTimeMS(5000)
+		.exec()
+		.then((brews)=>{
+			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+			const processedBrews = brews.map((brew)=>{
+				brew.authors = brew.authors.map((author)=>emailRegex.test(author) ? 'hidden' : author
+				);
+				return brew;
+			});
+			res.json({ brews: processedBrews, page });
+		})
+		.catch((error)=>{
+			throw { ...error, message: 'Error finding brews in Vault search', HBErrorCode: 90 };
+		});
+};
+
+const findTotal = async (req, res)=>{
+	const title  = req.query.title || '';
+	const author = req.query.author || '';
+
+	const combinedQuery = {
+		$and : [
+			{ published: true },
+			rendererConditions(req.query.legacy, req.query.v3),
+			titleConditions(title),
+			authorConditions(author)
+		],
+	};
+
+	await HomebrewModel.countDocuments(combinedQuery)
+		.then((totalBrews)=>{
+			console.log(`when returning, the total of brews is ${totalBrews} for the query ${JSON.stringify(combinedQuery)}`);
+			res.json({ totalBrews });
+		})
+		.catch((error)=>{
+			throw { ...error, message: 'Error finding brews in Vault search findTotal function', HBErrorCode: 91 };
+		});
+};
+
+router.get('/api/vault/total', asyncHandler(findTotal));
+router.get('/api/vault', asyncHandler(findBrews));
+
+module.exports = router;

shared/helpers.js

@@ -0,0 +1,58 @@
+const _ = require('lodash');
+const yaml = require('js-yaml');
+const request = require('../client/homebrew/utils/request-middleware.js');
+
+const splitTextStyleAndMetadata = (brew)=>{
+	brew.text = brew.text.replaceAll('\r\n', '\n');
+	if(brew.text.startsWith('```metadata')) {
+		const index = brew.text.indexOf('```\n\n');
+		const metadataSection = brew.text.slice(12, index - 1);
+		const metadata = yaml.load(metadataSection);
+		Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang']));
+		brew.text = brew.text.slice(index + 5);
+	}
+	if(brew.text.startsWith('```css')) {
+		const index = brew.text.indexOf('```\n\n');
+		brew.style = brew.text.slice(7, index - 1);
+		brew.text = brew.text.slice(index + 5);
+	}
+	if(brew.text.startsWith('```snippets')) {
+		const index = brew.text.indexOf('```\n\n');
+		brew.snippets = brew.text.slice(11, index - 1);
+		brew.text = brew.text.slice(index + 5);
+	}
+};
+
+const printCurrentBrew = ()=>{
+	if(window.typeof !== 'undefined') {
+		window.frames['BrewRenderer'].contentWindow.print();
+		//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
+		const node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0);
+		node.style.display='none';
+		node.offsetHeight; // accessing this is enough to trigger a reflow
+		node.style.display='';
+	}
+};
+
+const fetchThemeBundle = async (obj, renderer, theme)=>{
+	if(!renderer || !theme) return;
+	const res = await request
+			.get(`/api/theme/${renderer}/${theme}`)
+			.catch((err)=>{
+				obj.setState({ error: err });
+			});
+	if(!res) return;
+
+	const themeBundle = res.body;
+	themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n');
+	obj.setState((prevState)=>({
+		...prevState,
+		themeBundle : themeBundle
+	}));
+};
+
+module.exports = {
+	splitTextStyleAndMetadata,
+	printCurrentBrew,
+	fetchThemeBundle,
+};

shared/homebrewery/renderWarnings/renderWarnings.jsx

@@ -2,9 +2,8 @@ require('./renderWarnings.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const cx    = require('classnames');
 
-const DISMISS_KEY = 'dismiss_render_warning';
+import Dialog from '../../../client/components/dialog.jsx';
 
 const RenderWarnings = createClass({
 	displayName     : 'RenderWarnings',
@@ -35,9 +34,6 @@ const RenderWarnings = createClass({
 		},
 	},
 	checkWarnings : function(){
-		const hideDismiss = localStorage.getItem(DISMISS_KEY);
-		if(hideDismiss) return this.setState({ warnings: {} });
-
 		this.setState({
 			warnings : _.reduce(this.warnings, (r, fn, type)=>{
 				const element = fn();
@@ -46,20 +42,18 @@ const RenderWarnings = createClass({
 			}, {})
 		});
 	},
-	dismiss : function(){
-		localStorage.setItem(DISMISS_KEY, true);
-		this.checkWarnings();
-	},
 	render : function(){
 		if(_.isEmpty(this.state.warnings)) return null;
 
-		return <div className='renderWarnings'>
-			<i className='fas fa-times dismiss' onClick={this.dismiss}/>
+		const DISMISS_KEY = 'dismiss_render_warning';
+		const DISMISS_TEXT = <i className='fas fa-times dismiss' />;
+
+		return <Dialog className='renderWarnings' dismissKey={DISMISS_KEY} closeText={DISMISS_TEXT}>
 			<i className='fas fa-exclamation-triangle ohno' />
 			<h3>Render Warnings</h3>
 			<small>If this homebrew is rendering badly if might be because of the following:</small>
 			<ul>{_.values(this.state.warnings)}</ul>
-		</div>;
+		</Dialog>;
 	}
 });
 

shared/homebrewery/renderWarnings/renderWarnings.less

@@ -1,53 +1,48 @@
-.renderWarnings{
-	position		 : relative;
-	float			 : right;
-	display          : inline-block;
+.renderWarnings {
+	position         : relative;
+	float            : right;
 	width            : 350px;
 	padding          : 20px;
 	padding-bottom   : 10px;
 	padding-left     : 85px;
 	margin-bottom    : 10px;
-	background-color : @yellow;
 	color            : white;
-	a{
-		font-weight : 800;
-	}
-	i.ohno{
+	background-color : @yellow;
+	border           : none;
+	a { font-weight : 800; }
+	i.ohno {
 		position  : absolute;
 		top       : 24px;
 		left      : 24px;
-		opacity   : 0.8;
 		font-size : 2.5em;
+		opacity   : 0.8;
 	}
-	i.dismiss{
-		position : absolute;
-		top      : 10px;
-		right    : 10px;
-		cursor   : pointer;
-		opacity  : 0.6;
-		&:hover{
-			opacity : 1;
-		}
+	button.dismiss {
+		position         : absolute;
+		top              : 10px;
+		right            : 10px;
+		cursor           : pointer;
+		background-color : transparent;
+		opacity          : 0.6;
+		&:hover { opacity : 1; }
 	}
-	small{
-		opacity   : 0.7;
+	small {
 		font-size : 0.6em;
+		opacity   : 0.7;
 	}
-	h3{
+	h3 {
 		font-size   : 1.1em;
 		font-weight : 800;
 	}
-	ul{
+	ul {
 		margin-top          : 15px;
 		font-size           : 0.8em;
 		list-style-position : outside;
 		list-style-type     : disc;
-		li{
+		li {
 			font-size   : 0.8em;
 			line-height : 1.6em;
-			em{
-				font-weight : 800;
-			}
+			em { font-weight : 800; }
 		}
 	}
 }

shared/naturalcrit/codeEditor/autocompleteEmoji.js

@@ -0,0 +1,84 @@
+const diceFont      = require('../../../themes/fonts/iconFonts/diceFont.js');
+const elderberryInn = require('../../../themes/fonts/iconFonts/elderberryInn.js');
+const fontAwesome   = require('../../../themes/fonts/iconFonts/fontAwesome.js');
+const gameIcons     = require('../../../themes/fonts/iconFonts/gameIcons.js');
+
+const emojis = {
+	...diceFont,
+	...elderberryInn,
+	...fontAwesome,
+	...gameIcons
+};
+
+const showAutocompleteEmoji = function(CodeMirror, editor) {
+	CodeMirror.commands.autocomplete = function(editor) {
+		editor.showHint({
+			completeSingle : false,
+			hint           : function(editor) {
+				const cursor = editor.getCursor();
+				const line = cursor.line;
+				const lineContent = editor.getLine(line);
+				const start = lineContent.lastIndexOf(':', cursor.ch - 1) + 1;
+				const end = cursor.ch;
+				const currentWord = lineContent.slice(start, end);
+
+
+				const list = Object.keys(emojis).filter(function(emoji) {
+					return emoji.toLowerCase().indexOf(currentWord.toLowerCase()) >= 0;
+				}).sort((a, b)=>{
+					const lowerA = a.replace(/\d+/g, function(match) {	// Temporarily convert any numbers in emoji string
+						return match.padStart(4, '0');										// to 4-digits, left-padded with 0's, to aid in
+					}).toLowerCase();																		// sorting numbers, i.e., "d6, d10, d20", not "d10, d20, d6"
+					const lowerB = b.replace(/\d+/g, function(match) {	// Also make lowercase for case-insensitive alpha sorting
+						return match.padStart(4, '0');
+					}).toLowerCase();
+
+					if(lowerA < lowerB)
+						return -1;
+					return 1;
+				}).map(function(emoji) {
+					return {
+						text   : `${emoji}:`,														// Text to output to editor when option is selected
+						render : function(element, self, data) {				// How to display the option in the dropdown
+							const div = document.createElement('div');
+							div.innerHTML = `<i class="emojiPreview ${emojis[emoji]}"></i> ${emoji}`;
+							element.appendChild(div);
+						}
+					};
+				});
+
+				return {
+					list : list.length ? list : [],
+					from : CodeMirror.Pos(line, start),
+					to   : CodeMirror.Pos(line, end)
+				};
+			}
+		});
+	};
+
+	editor.on('inputRead', function(instance, change) {
+		const cursor = editor.getCursor();
+		const line = editor.getLine(cursor.line);
+
+		// Get the text from the start of the line to the cursor
+		const textToCursor = line.slice(0, cursor.ch);
+
+		// Do not autosuggest emojis in curly span/div/injector properties
+		if(line.includes('{')) {
+			const curlyToCursor = textToCursor.slice(textToCursor.indexOf(`{`));
+			const curlySpanRegex = /{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1$/g;
+
+			if(curlySpanRegex.test(curlyToCursor))
+				return;
+		}
+
+		// Check if the text ends with ':xyz'
+		if(/:[^\s:]+$/.test(textToCursor)) {
+			CodeMirror.commands.autocomplete(editor);
+		}
+	});
+};
+
+module.exports = {
+	showAutocompleteEmoji
+};

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -3,8 +3,8 @@ require('./codeEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
-const cx = require('classnames');
 const closeTag = require('./close-tag');
+const autoCompleteEmoji = require('./autocompleteEmoji');
 
 let CodeMirror;
 if(typeof window !== 'undefined'){
@@ -36,9 +36,13 @@ if(typeof window !== 'undefined'){
 	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
 	require('codemirror/addon/fold/xml-fold.js');
 	require('codemirror/addon/edit/closetag.js');
+	//Autocompletion
+	require('codemirror/addon/hint/show-hint.js');
 
-	const foldCode = require('./fold-code');
-	foldCode.registerHomebreweryHelper(CodeMirror);
+	const foldPagesCode = require('./fold-pages');
+	foldPagesCode.registerHomebreweryHelper(CodeMirror);
+	const foldCSSCode = require('./fold-css');
+	foldCSSCode.registerHomebreweryHelper(CodeMirror);
 }
 
 const CodeEditor = createClass({
@@ -60,6 +64,8 @@ const CodeEditor = createClass({
 		};
 	},
 
+	editor : React.createRef(null),
+
 	componentDidMount : function() {
 		this.buildEditor();
 		const newDoc = CodeMirror.Doc(this.props.value, this.props.language);
@@ -99,7 +105,7 @@ const CodeEditor = createClass({
 	},
 
 	buildEditor : function() {
-		this.codeMirror = CodeMirror(this.refs.editor, {
+		this.codeMirror = CodeMirror(this.editor.current, {
 			lineNumbers       : true,
 			lineWrapping      : this.props.wrap,
 			indentWithTabs    : false,
@@ -177,7 +183,10 @@ const CodeEditor = createClass({
 			// 	return el;
 			// }
 		});
+
+		// Add custom behaviors (auto-close curlies and auto-complete emojis)
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
+		autoCompleteEmoji.showAutocompleteEmoji(CodeMirror, this.codeMirror);
 
 		// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works.
 		this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());});
@@ -404,11 +413,11 @@ const CodeEditor = createClass({
 	foldOptions : function(cm){
 		return {
 			scanUp      : true,
-			rangeFinder : CodeMirror.fold.homebrewery,
+			rangeFinder : this.props.language === 'css' ? CodeMirror.fold.homebrewerycss : CodeMirror.fold.homebrewery,
 			widget      : (from, to)=>{
 				let text = '';
 				let currentLine = from.line;
-				const maxLength = 50;
+				let maxLength = 50;
 
 				let foldPreviewText = '';
 				while (currentLine <= to.line && text.length <= maxLength) {
@@ -423,10 +432,15 @@ const CodeEditor = createClass({
 					}
 				}
 				text = foldPreviewText || `Lines ${from.line+1}-${to.line+1}`;
+				text = text.replace('{', '').trim();
+
+				// Truncate data URLs at `data:`
+				const startOfData = text.indexOf('data:');
+				if(startOfData > 0)
+					maxLength = Math.min(startOfData + 5, maxLength);
 
-				text = text.trim();
 				if(text.length > maxLength)
-					text = `${text.substr(0, maxLength)}...`;
+					text = `${text.slice(0, maxLength)}...`;
 
 				return `\u21A4 ${text} \u21A6`;
 			}
@@ -436,10 +450,11 @@ const CodeEditor = createClass({
 
 	render : function(){
 		return <>
-			<link href={`../homebrew/cm-themes/${this.props.editorTheme}.css`} rel='stylesheet' />
-			<div className='codeEditor' ref='editor' style={this.props.style}/>
+			<link href={`../homebrew/cm-themes/${this.props.editorTheme}.css`} type='text/css' rel='stylesheet' />
+			<div className='codeEditor' ref={this.editor} style={this.props.style}/>
 		</>;
 	}
 });
 
 module.exports = CodeEditor;
+

shared/naturalcrit/codeEditor/codeEditor.less

@@ -2,6 +2,13 @@
 @import (less) 'codemirror/addon/fold/foldgutter.css';
 @import (less) 'codemirror/addon/search/matchesonscrollbar.css';
 @import (less) 'codemirror/addon/dialog/dialog.css';
+@import (less) 'codemirror/addon/hint/show-hint.css';
+
+//Icon fonts included so they can appear in emoji autosuggest dropdown
+@import (less) './themes/fonts/iconFonts/diceFont.less';
+@import (less) './themes/fonts/iconFonts/elderberryInn.less';
+@import (less) './themes/fonts/iconFonts/gameIcons.less';
+@import (less) './themes/fonts/iconFonts/fontAwesome.less';
 
 @keyframes sourceMoveAnimation {
 	50%  {background-color: red;   color: white;}
@@ -17,13 +24,24 @@
     text-shadow: none;
     font-weight: 600;
     color: grey;
-}
+  }
 
   .sourceMoveFlash .CodeMirror-line{
     animation-name: sourceMoveAnimation;
     animation-duration: 0.4s;
   }
 
+  .CodeMirror-vscrollbar {
+    &::-webkit-scrollbar {
+      width: 20px;
+    }
+    &::-webkit-scrollbar-thumb {
+      width: 20px;
+      background: linear-gradient(90deg, #858585 15px, #808080 15px);
+    }
+  }
+
+
   //.cm-tab {
   //  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
   //}
@@ -34,3 +52,8 @@
   //  }
   //}
 }
+
+.emojiPreview {
+	font-size: 1.5em;
+	line-height: 1.2em;
+}

shared/naturalcrit/codeEditor/fold-css.js

@@ -0,0 +1,44 @@
+module.exports = {
+	registerHomebreweryHelper : function(CodeMirror) {
+		CodeMirror.registerHelper('fold', 'homebrewerycss', function(cm, start) {
+
+			// BRACE FOLDING
+			const startMatcher = /\{[ \t]*$/;
+			const endMatcher = /\}[ \t]*$/;
+			const activeLine = cm.getLine(start.line);
+
+
+			if(activeLine.match(startMatcher)) {
+				const lastLineNo = cm.lastLine();
+				let end = start.line + 1;
+				let braceCount = 1;
+
+				while (end < lastLineNo) {
+					const curLine = cm.getLine(end);
+					if(curLine.match(startMatcher)) braceCount++;
+					if(curLine.match(endMatcher)) braceCount--;
+					if(braceCount == 0) break;
+					++end;
+				}
+
+				return {
+					from : CodeMirror.Pos(start.line, 0),
+					to   : CodeMirror.Pos(end, cm.getLine(end).length)
+				};
+			}
+
+			// @import and data-url folding
+			const importMatcher  = /^@import.*?;/;
+			const dataURLMatcher = /url\(.*?data\:.*\)/;
+
+			if(activeLine.match(importMatcher) || activeLine.match(dataURLMatcher)) {
+				return {
+					from : CodeMirror.Pos(start.line, 0),
+					to   : CodeMirror.Pos(start.line, activeLine.length)
+				};
+			}
+
+			return null;
+		});
+	}
+};

shared/naturalcrit/markdown.js

@@ -3,8 +3,60 @@ const _ = require('lodash');
 const Marked = require('marked');
 const MarkedExtendedTables = require('marked-extended-tables');
 const { markedSmartypantsLite: MarkedSmartypantsLite } = require('marked-smartypants-lite');
-const { gfmHeadingId: MarkedGFMHeadingId } = require('marked-gfm-heading-id');
+const { gfmHeadingId: MarkedGFMHeadingId, resetHeadings: MarkedGFMResetHeadingIDs } = require('marked-gfm-heading-id');
+const { markedEmoji: MarkedEmojis } = require('marked-emoji');
+
+//Icon fonts included so they can appear in emoji autosuggest dropdown
+const diceFont      = require('../../themes/fonts/iconFonts/diceFont.js');
+const elderberryInn = require('../../themes/fonts/iconFonts/elderberryInn.js');
+const fontAwesome   = require('../../themes/fonts/iconFonts/fontAwesome.js');
+const gameIcons     = require('../../themes/fonts/iconFonts/gameIcons.js');
+
+const MathParser = require('expr-eval').Parser;
 const renderer = new Marked.Renderer();
+const tokenizer = new Marked.Tokenizer();
+
+//Limit math features to simple items
+const mathParser = new MathParser({
+	operators : {
+		// These default to true, but are included to be explicit
+		add      : true,
+		subtract : true,
+		multiply : true,
+		divide   : true,
+		power    : true,
+		round    : true,
+		floor    : true,
+		ceil     : true,
+		abs      : true,
+
+		sin     : false, cos     : false, tan     : false, asin    : false, acos    : false,
+		atan    : false, sinh    : false, cosh    : false, tanh    : false, asinh   : false,
+		acosh   : false, atanh   : false, sqrt    : false, cbrt    : false, log     : false,
+		log2    : false, ln      : false, lg      : false, log10   : false, expm1   : false,
+		log1p   : false, trunc   : false, join    : false, sum     : false, indexOf : false,
+		'-'     : false, '+'     : false, exp     : false, not     : false, length  : false,
+		'!'     : false, sign    : false, random  : false, fac     : false, min     : false,
+		max     : false, hypot   : false, pyt     : false, pow     : false, atan2   : false,
+		'if'    : false, gamma   : false, roundTo : false, map     : false, fold    : false,
+		filter  : false,
+
+		remainder   : false, factorial   : false,
+		comparison  : false, concatenate : false,
+		logical     : false, assignment  : false,
+		array       : false, fndef       : false
+	}
+});
+// Add sign function
+mathParser.functions.sign = function (a) {
+	if(a >= 0) return '+';
+	return '-';
+};
+// Add signed function
+mathParser.functions.signed = function (a) {
+	if(a >= 0) return `+${a}`;
+	return `${a}`;
+};
 
 //Processes the markdown within an HTML block if it's just a class-wrapper
 renderer.html = function (html) {
@@ -17,7 +69,7 @@ renderer.html = function (html) {
 	return html;
 };
 
-// Don't wrap {{ Divs or {{ empty Spans in <p> tags
+// Don't wrap {{ Spans alone on a line, or {{ Divs in <p> tags
 renderer.paragraph = function(text){
 	let match;
 	if(text.startsWith('<div') || text.startsWith('</div'))
@@ -34,7 +86,7 @@ renderer.link = function (href, title, text) {
 	if(href[0] == '#') {
 		self = true;
 	}
-	href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
+	href = cleanUrl(href);
 
 	if(href === null) {
 		return text;
@@ -50,24 +102,43 @@ renderer.link = function (href, title, text) {
 	return out;
 };
 
+// Expose `src` attribute as `--HB_src` to make the URL accessible via CSS
+renderer.image = function (href, title, text) {
+	href = cleanUrl(href);
+	if (href === null)
+		return text;
+
+	let out = `<img src="${href}" alt="${text}" style="--HB_src:url(${href});"`;
+	if (title)
+		out += ` title="${title}"`;
+
+	out += '>';
+	return out;
+}
+
+// Disable default reflink behavior, as it steps on our variables extension
+tokenizer.def = function () {
+	return undefined;
+};
+
 const mustacheSpans = {
 	name  : 'mustacheSpans',
 	level : 'inline',                                   // Is this a block-level or inline-level tokenizer?
 	start(src) { return src.match(/{{[^{]/)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const completeSpan = /^{{[^\n]*}}/;               // Regex for the complete token
-		const inlineRegex = /{{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *|}}/g;
+		const inlineRegex = /{{(?=((?:[:=](?:"['\w,\-()#%=?. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *|}}/g;
 		const match = completeSpan.exec(src);
 		if(match) {
 			//Find closing delimiter
 			let blockCount = 0;
-			let tags = '';
+			let tags = {};
 			let endTags = 0;
 			let endToken = 0;
 			let delim;
 			while (delim = inlineRegex.exec(match[0])) {
-				if(!tags) {
-					tags = `${processStyleTags(delim[0].substring(2))}`;
+				if(_.isEmpty(tags)) {
+					tags = processStyleTags(delim[0].substring(2));
 					endTags = delim[0].length;
 				}
 				if(delim[0].startsWith('{{')) {
@@ -96,7 +167,14 @@ const mustacheSpans = {
 		}
 	},
 	renderer(token) {
-		return `<span class="inline-block${token.tags}>${this.parser.parseInline(token.tokens)}</span>`; // parseInline to turn child tokens into HTML
+		const tags = token.tags;
+		tags.classes = ['inline-block', tags.classes].join(' ').trim();
+		return `<span` +
+			`${tags.classes    ? ` class="${tags.classes}"` : ''}` +
+			`${tags.id         ? ` id="${tags.id}"`         : ''}` +
+			`${tags.styles     ? ` style="${tags.styles}"`  : ''}` +
+			`${tags.attributes ? ` ${Object.entries(tags.attributes).map(([key, value])=>`${key}="${value}"`).join(' ')}` : ''}` +
+			`>${this.parser.parseInline(token.tokens)}</span>`; // parseInline to turn child tokens into HTML
 	}
 };
 
@@ -106,18 +184,18 @@ const mustacheDivs = {
 	start(src) { return src.match(/\n *{{[^{]/m)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const completeBlock = /^ *{{[^\n}]* *\n.*\n *}}/s;                // Regex for the complete token
-		const blockRegex = /^ *{{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *$|^ *}}$/gm;
+		const blockRegex = /^ *{{(?=((?:[:=](?:"['\w,\-()#%=?. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *$|^ *}}$/gm;
 		const match = completeBlock.exec(src);
 		if(match) {
 			//Find closing delimiter
 			let blockCount = 0;
-			let tags = '';
+			let tags = {};
 			let endTags = 0;
 			let endToken = 0;
 			let delim;
 			while (delim = blockRegex.exec(match[0])?.[0].trim()) {
-				if(!tags) {
-					tags = `${processStyleTags(delim.substring(2))}`;
+				if(_.isEmpty(tags)) {
+					tags = processStyleTags(delim.substring(2));
 					endTags = delim.length + src.indexOf(delim);
 				}
 				if(delim.startsWith('{{')) {
@@ -145,7 +223,14 @@ const mustacheDivs = {
 		}
 	},
 	renderer(token) {
-		return `<div class="block${token.tags}>${this.parser.parse(token.tokens)}</div>`; // parseInline to turn child tokens into HTML
+		const tags = token.tags;
+		tags.classes = ['block', tags.classes].join(' ').trim();
+		return `<div` +
+			`${tags.classes    ? ` class="${tags.classes}"` : ''}` +
+			`${tags.id         ? ` id="${tags.id}"`         : ''}` +
+			`${tags.styles     ? ` style="${tags.styles}"`  : ''}` +
+			`${tags.attributes ? ` ${Object.entries(tags.attributes).map(([key, value])=>`${key}="${value}"`).join(' ')}` : ''}` +
+			`>${this.parser.parse(token.tokens)}</div>`; // parse to turn child tokens into HTML
 	}
 };
 
@@ -154,30 +239,46 @@ const mustacheInjectInline = {
 	level : 'inline',
 	start(src) { return src.match(/ *{[^{\n]/)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
-		const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/g;
+		const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%=?. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/g;
 		const match = inlineRegex.exec(src);
 		if(match) {
 			const lastToken = tokens[tokens.length - 1];
 			if(!lastToken || lastToken.type == 'mustacheInjectInline')
 				return false;
 
-			const tags = `${processStyleTags(match[1])}`;
+			const tags = processStyleTags(match[1]);
 			lastToken.originalType = lastToken.type;
 			lastToken.type         = 'mustacheInjectInline';
-			lastToken.tags         = tags;
+			lastToken.injectedTags = tags;
 			return {
-				type : 'text',            // Should match "name" above
+				type : 'mustacheInjectInline',            // Should match "name" above
 				raw  : match[0],          // Text to consume from the source
 				text : ''
 			};
 		}
 	},
 	renderer(token) {
+		if(!token.originalType){
+			return;
+		}
 		token.type = token.originalType;
 		const text = this.parser.parseInline([token]);
-		const openingTag = /(<[^\s<>]+)([^\n<>]*>.*)/s.exec(text);
+		const originalTags = extractHTMLStyleTags(text);
+		const injectedTags = token.injectedTags;
+		const tags = {
+			id         : injectedTags.id || originalTags.id || null,
+			classes    : [originalTags.classes,    injectedTags.classes].join(' ').trim() || null,
+			styles     : [originalTags.styles,     injectedTags.styles].join(' ').trim()  || null,
+			attributes : Object.assign(originalTags.attributes ?? {}, injectedTags.attributes ?? {})
+		};
+		const openingTag = /(<[^\s<>]+)[^\n<>]*(>.*)/s.exec(text);
 		if(openingTag) {
-			return `${openingTag[1]} class="${token.tags}${openingTag[2]}`;
+			return `${openingTag[1]}` +
+				`${tags.classes    ? ` class="${tags.classes}"` : ''}` +
+				`${tags.id         ? ` id="${tags.id}"`         : ''}` +
+				`${tags.styles     ? ` style="${tags.styles}"`  : ''}` +
+				`${!_.isEmpty(tags.attributes) ? ` ${Object.entries(tags.attributes).map(([key, value])=>`${key}="${value}"`).join(' ')}` : ''}` +
+				`${openingTag[2]}`; // parse to turn child tokens into HTML
 		}
 		return text;
 	}
@@ -189,7 +290,7 @@ const mustacheInjectBlock = {
 		level : 'block',
 		start(src) { return src.match(/\n *{[^{\n]/m)?.index; },  // Hint to Marked.js to stop and check for a match
 		tokenizer(src, tokens) {
-			const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/ym;
+			const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%=?. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/ym;
 			const match = inlineRegex.exec(src);
 			if(match) {
 				const lastToken = tokens[tokens.length - 1];
@@ -197,7 +298,7 @@ const mustacheInjectBlock = {
 					return false;
 
 				lastToken.originalType = 'mustacheInjectBlock';
-				lastToken.tags         = `${processStyleTags(match[1])}`;
+				lastToken.injectedTags = processStyleTags(match[1]);
 				return {
 					type : 'mustacheInjectBlock', // Should match "name" above
 					raw  : match[0],              // Text to consume from the source
@@ -211,9 +312,22 @@ const mustacheInjectBlock = {
 			}
 			token.type = token.originalType;
 			const text = this.parser.parse([token]);
-			const openingTag = /(<[^\s<>]+)([^\n<>]*>.*)/s.exec(text);
+			const originalTags = extractHTMLStyleTags(text);
+			const injectedTags = token.injectedTags;
+			const tags = {
+				id         : injectedTags.id || originalTags.id || null,
+				classes    : [originalTags.classes,    injectedTags.classes].join(' ').trim() || null,
+				styles     : [originalTags.styles,     injectedTags.styles].join(' ').trim()  || null,
+				attributes : Object.assign(originalTags.attributes ?? {}, injectedTags.attributes ?? {})
+			};
+			const openingTag = /(<[^\s<>]+)[^\n<>]*(>.*)/s.exec(text);
 			if(openingTag) {
-				return `${openingTag[1]} class="${token.tags}${openingTag[2]}`;
+				return `${openingTag[1]}` +
+					`${tags.classes    ? ` class="${tags.classes}"` : ''}` +
+					`${tags.id         ? ` id="${tags.id}"`         : ''}` +
+					`${tags.styles     ? ` style="${tags.styles}"`  : ''}` +
+					`${!_.isEmpty(tags.attributes) ? ` ${Object.entries(tags.attributes).map(([key, value])=>`${key}="${value}"`).join(' ')}` : ''}` +
+					`${openingTag[2]}`; // parse to turn child tokens into HTML
 			}
 			return text;
 		}
@@ -256,25 +370,55 @@ const superSubScripts = {
 	}
 };
 
-const definitionLists = {
-	name  : 'definitionLists',
+const forcedParagraphBreaks = {
+	name  : 'hardBreaks',
 	level : 'block',
-	start(src) { return src.match(/^.*?::.*/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	start(src) { return src.match(/\n:+$/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const regex  = /^(:+)(?:\n|$)/ym;
+		const match = regex.exec(src);
+		if(match?.length) {
+			return {
+				type   : 'hardBreaks', // Should match "name" above
+				raw    : match[0],     // Text to consume from the source
+				length : match[1].length,
+				text   : ''
+			};
+		}
+	},
+	renderer(token) {
+		return `<div class='blank'></div>`.repeat(token.length).concat('\n');
+	}
+};
+
+const definitionListsSingleLine = {
+	name  : 'definitionListsSingleLine',
+	level : 'block',
+	start(src) { return src.match(/\n[^\n]*?::[^\n]*/m)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const regex = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym;
 		let match;
 		let endIndex = 0;
 		const definitions = [];
 		while (match = regex.exec(src)) {
-			definitions.push({
-				dt : this.lexer.inlineTokens(match[1].trim()),
-				dd : this.lexer.inlineTokens(match[2].trim())
-			});
+			const originalLine = match[0];											// This line and below to handle conflict with emojis
+			let firstLine = originalLine;											// Remove in V4 when definitionListsInline updated to
+			this.lexer.inlineTokens(firstLine.trim())					// require spaces around `::`
+				.filter((t)=>t.type == 'emoji')
+				.map((emoji)=>firstLine = firstLine.replace(emoji.raw, 'x'.repeat(emoji.raw.length)));
+
+			const newMatch = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym.exec(firstLine);
+			if(newMatch) {
+				definitions.push({
+					dt : this.lexer.inlineTokens(originalLine.slice(0, newMatch[1].length).trim()),
+					dd : this.lexer.inlineTokens(originalLine.slice(newMatch[1].length + 2).trim())
+				});
+			}																									// End of emoji hack.
 			endIndex = regex.lastIndex;
 		}
 		if(definitions.length) {
 			return {
-				type : 'definitionLists',
+				type : 'definitionListsSingleLine',
 				raw  : src.slice(0, endIndex),
 				definitions
 			};
@@ -288,34 +432,337 @@ const definitionLists = {
 	}
 };
 
-Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists, superSubScripts] });
-Marked.use(mustacheInjectBlock);
-Marked.use({ renderer: renderer, mangle: false });
-Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId(), MarkedSmartypantsLite());
-
-const nonWordAndColonTest = /[^\w:]/g;
-const cleanUrl = function (sanitize, base, href) {
-	if(sanitize) {
-		let prot;
-		try {
-			prot = decodeURIComponent(unescape(href))
-        .replace(nonWordAndColonTest, '')
-        .toLowerCase();
-		} catch (e) {
-			return null;
+const definitionListsMultiLine = {
+	name  : 'definitionListsMultiLine',
+	level : 'block',
+	start(src) { return src.match(/\n[^\n]*\n::[^:\n]/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const regex = /(\n?\n?(?!::)[^\n]+?(?=\n::[^:\n]))|\n::([^:\n](?:.|\n)*?(?=(?:\n::)|(?:\n\n)|$))/y;
+		let match;
+		let endIndex = 0;
+		const definitions = [];
+		while (match = regex.exec(src)) {
+			if(match[1]) {
+				if(this.lexer.blockTokens(match[1].trim())[0]?.type !== 'paragraph') // DT must not be another block-level token besides <p>
+					break;
+				definitions.push({
+					dt  : this.lexer.inlineTokens(match[1].trim()),
+					dds : []
+				});
+			}
+			if(match[2] && definitions.length) {
+				definitions[definitions.length - 1].dds.push(
+					this.lexer.inlineTokens(match[2].trim().replace(/\s/g, ' '))
+				);
+			}
+			endIndex = regex.lastIndex;
 		}
-		if(prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0 || prot.indexOf('data:') === 0) {
-			return null;
+		if(definitions.length) {
+			return {
+				type : 'definitionListsMultiLine',
+				raw  : src.slice(0, endIndex),
+				definitions
+			};
 		}
+	},
+	renderer(token) {
+		let returnVal = `<dl>`;
+		token.definitions.forEach((def)=>{
+			const dds = def.dds.map((s)=>{
+				return `\n<dd>${this.parser.parseInline(s).trim()}</dd>`;
+			}).join('');
+			returnVal += `<dt>${this.parser.parseInline(def.dt)}</dt>${dds}\n`;
+		});
+		returnVal = returnVal.trim();
+		return `${returnVal}</dl>`;
 	}
-	try {
-		href = encodeURI(href).replace(/%25/g, '%');
-	} catch (e) {
-		return null;
-	}
-	return href;
 };
 
+//v=====--------------------< Variable Handling >-------------------=====v// 242 lines
+const replaceVar = function(input, hoist=false, allowUnresolved=false) {
+	const regex = /([!$]?)\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]/g;
+	const match = regex.exec(input);
+
+	const prefix = match[1];
+	const label  = match[2];
+
+	//v=====--------------------< HANDLE MATH >-------------------=====v//
+	const mathRegex = /[a-z]+\(|[+\-*/^(),]/g;
+	const matches = label.split(mathRegex);
+	const mathVars = matches.filter((match)=>isNaN(match))?.map((s)=>s.trim()); // Capture any variable names
+
+	let replacedLabel = label;
+
+	if(prefix[0] == '$' && mathVars?.[0] !== label.trim())  {// If there was mathy stuff not captured, let's do math!
+		mathVars?.forEach((variable)=>{
+			const foundVar = lookupVar(variable, globalPageNumber, hoist);
+			if(foundVar && foundVar.resolved && foundVar.content && !isNaN(foundVar.content)) // Only subsitute math values if fully resolved, not empty strings, and numbers
+				replacedLabel = replacedLabel.replaceAll(new RegExp(`(?<!\\w)(${variable})(?!\\w)`, 'g'), foundVar.content);
+		});
+
+		try {
+			return mathParser.evaluate(replacedLabel);
+		} catch (error) {
+			return undefined;		// Return undefined if invalid math result
+		}
+	}
+	//^=====--------------------< HANDLE MATH >-------------------=====^//
+
+	const foundVar = lookupVar(label, globalPageNumber, hoist);
+
+	if(!foundVar || (!foundVar.resolved && !allowUnresolved))
+		return undefined;			// Return undefined if not found, or parially-resolved vars are not allowed
+
+	//                    url or <url>            "title"    or   'title'     or  (title)
+	const linkRegex =  /^([^<\s][^\s]*|<.*?>)(?: ("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\((?:\\\(|\\\)|[^()])*\)))?$/m;
+	const linkMatch = linkRegex.exec(foundVar.content);
+
+	const href  = linkMatch ? linkMatch[1]               : null; //TODO: TRIM OFF < > IF PRESENT
+	const title = linkMatch ? linkMatch[2]?.slice(1, -1) : null;
+
+	if(!prefix[0] && href)        // Link
+		return `[${label}](${href}${title ? ` "${title}"` : ''})`;
+
+	if(prefix[0] == '!' && href)  // Image
+		return `![${label}](${href} ${title ? ` "${title}"` : ''})`;
+
+	if(prefix[0] == '$')          // Variable
+		return foundVar.content;
+};
+
+const lookupVar = function(label, index, hoist=false) {
+	while (index >= 0) {
+		if(globalVarsList[index]?.[label] !== undefined)
+			return globalVarsList[index][label];
+		index--;
+	}
+
+	if(hoist) {	//If normal lookup failed, attempt hoisting
+		index = Object.keys(globalVarsList).length; // Move index to start from last page
+		while (index >= 0) {
+			if(globalVarsList[index]?.[label] !== undefined)
+				return globalVarsList[index][label];
+			index--;
+		}
+	}
+
+	return undefined;
+};
+
+const processVariableQueue = function() {
+	let resolvedOne = true;
+	let finalLoop   = false;
+	while (resolvedOne || finalLoop) { // Loop through queue until no more variable calls can be resolved
+		resolvedOne = false;
+		for (const item of varsQueue) {
+			if(item.type == 'text')
+				continue;
+
+			if(item.type == 'varDefBlock') {
+				const regex = /[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]/g;
+				let match;
+				let resolved = true;
+				let tempContent = item.content;
+				while (match = regex.exec(item.content)) { // regex to find variable calls
+					const value = replaceVar(match[0], true);
+
+					if(value == undefined)
+						resolved = false;
+					else
+						tempContent = tempContent.replaceAll(match[0], value);
+				}
+
+				if(resolved == true || item.content != tempContent) {
+					resolvedOne = true;
+					item.content = tempContent;
+				}
+
+				globalVarsList[globalPageNumber][item.varName] = {
+					content  : item.content,
+					resolved : resolved
+				};
+
+				if(resolved)
+					item.type = 'resolved';
+			}
+
+			if(item.type == 'varCallBlock' || item.type == 'varCallInline') {
+				const value = replaceVar(item.content, true, finalLoop); // final loop will just use the best value so far
+
+				if(value == undefined)
+					continue;
+
+				resolvedOne  = true;
+				item.content = value;
+				item.type    = 'text';
+			}
+		}
+		varsQueue = varsQueue.filter((item)=>item.type !== 'resolved'); // Remove any fully-resolved variable definitions
+
+		if(finalLoop)
+			break;
+		if(!resolvedOne)
+			finalLoop   = true;
+	}
+	varsQueue = varsQueue.filter((item)=>item.type !== 'varDefBlock');
+};
+
+function MarkedVariables() {
+	return {
+		hooks : {
+			preprocess(src) {
+				const codeBlockSkip   = /^(?: {4}[^\n]+(?:\n(?: *(?:\n|$))*)?)+|^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})(?:[^\n]*)(?:\n|$)(?:|(?:[\s\S]*?)(?:\n|$))(?: {0,3}\2[~`]* *(?=\n|$))|`[^`]*?`/;
+				const blockDefRegex   = /^[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]:(?!\() *((?:\n? *[^\s].*)+)(?=\n+|$)/; //Matches 3, [4]:5
+				const blockCallRegex  = /^[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\](?=\n|$)/;                              //Matches 6, [7]
+				const inlineDefRegex  = /([!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\])\(([^\n]+)\)/;                         //Matches 8, 9[10](11)
+				const inlineCallRegex =  /[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\](?!\()/;                                //Matches 12, [13]
+
+				// Combine regexes and wrap in parens like so: (regex1)|(regex2)|(regex3)|(regex4)
+				const combinedRegex = new RegExp([codeBlockSkip, blockDefRegex, blockCallRegex, inlineDefRegex, inlineCallRegex].map((s)=>`(${s.source})`).join('|'), 'gm');
+
+				let lastIndex = 0;
+				let match;
+				while ((match = combinedRegex.exec(src)) !== null) {
+					// Format any matches into tokens and store
+					if(match.index > lastIndex) { // Any non-variable stuff
+						varsQueue.push(
+							{ type    : 'text',
+								varName : null,
+								content : src.slice(lastIndex, match.index)
+							});
+					}
+					if(match[1]) {
+						varsQueue.push(
+							{ type    : 'text',
+								varName : null,
+								content : match[0]
+							});
+					}
+					if(match[3]) { // Block Definition
+						const label   = match[4] ? match[4].trim().replace(/\s+/g, ' ')    : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+						const content = match[5] ? match[5].trim().replace(/[ \t]+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+
+						varsQueue.push(
+							{ type    : 'varDefBlock',
+								varName : label,
+								content : content
+							});
+					}
+					if(match[6]) { // Block Call
+						const label = match[7] ? match[7].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+
+						varsQueue.push(
+							{ type    : 'varCallBlock',
+								varName : label,
+								content : match[0]
+							});
+					}
+					if(match[8]) { // Inline Definition
+						const label = match[10] ? match[10].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+						let content = match[11] ? match[11].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+
+						// In case of nested (), find the correct matching end )
+						let level = 0;
+						let i;
+						for (i = 0; i < content.length; i++) {
+							if(content[i] === '\\') {
+								i++;
+							} else if(content[i] === '(') {
+								level++;
+							} else if(content[i] === ')') {
+								level--;
+								if(level < 0)
+									break;
+							}
+						}
+						if(i > -1) {
+							combinedRegex.lastIndex = combinedRegex.lastIndex - (content.length - i);
+							content = content.slice(0, i).trim().replace(/\s+/g, ' ');
+						}
+
+						varsQueue.push(
+							{ type    : 'varDefBlock',
+								varName : label,
+								content : content
+							});
+						varsQueue.push(
+							{ type    : 'varCallInline',
+								varName : label,
+								content : match[9]
+							});
+					}
+					if(match[12]) { // Inline Call
+						const label = match[13] ? match[13].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
+
+						varsQueue.push(
+							{ type    : 'varCallInline',
+								varName : label,
+								content : match[0]
+							});
+					}
+					lastIndex = combinedRegex.lastIndex;
+				}
+
+				if(lastIndex < src.length) {
+					varsQueue.push(
+						{ type    : 'text',
+							varName : null,
+							content : src.slice(lastIndex)
+						});
+				}
+
+				processVariableQueue();
+
+				const output = varsQueue.map((item)=>item.content).join('');
+				varsQueue = []; // Must clear varsQueue because custom HTML renderer uses Marked.parse which will preprocess again without clearing the array
+				return output;
+			}
+		}
+	};
+};
+//^=====--------------------< Variable Handling >-------------------=====^//
+
+// Emoji options
+// To add more icon fonts, need to do these things
+// 1) Add the font file as .woff2 to themes/fonts/iconFonts folder
+// 2) Create a .less file mapping CSS class names to the font character
+// 3) Create a .js file mapping Autosuggest names to CSS class names
+// 4) Import the .less file into shared/naturalcrit/codeEditor/codeEditor.less
+// 5) Import the .less file into themes/V3/blank.style.less
+// 6) Import the .js file to shared/naturalcrit/codeEditor/autocompleteEmoji.js and add to `emojis` object
+// 7) Import the .js file here to markdown.js, and add to `emojis` object below
+const MarkedEmojiOptions = {
+	emojis : {
+		...diceFont,
+		...elderberryInn,
+		...fontAwesome,
+		...gameIcons,
+	},
+	renderer : (token)=>`<i class="${token.emoji}"></i>`
+};
+
+const tableTerminators = [
+	`:+\\n`,                // hardBreak
+	` *{[^\n]+}`,           // blockInjector
+	` *{{[^{\n]*\n.*?\n}}`  // mustacheDiv
+]
+
+Marked.use(MarkedVariables());
+Marked.use({ extensions : [definitionListsMultiLine, definitionListsSingleLine, forcedParagraphBreaks, superSubScripts,
+	mustacheSpans, mustacheDivs, mustacheInjectInline] });
+Marked.use(mustacheInjectBlock);
+Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false });
+Marked.use(MarkedExtendedTables(tableTerminators), MarkedGFMHeadingId({ globalSlugs: true }), MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions));
+
+function cleanUrl(href) {
+  try {
+    href = encodeURI(href).replace(/%25/g, '%');
+  } catch {
+    return null;
+  }
+  return href;
+}
+
 const escapeTest = /[&<>"']/;
 const escapeReplace = /[&<>"']/g;
 const escapeTestNoEncode = /[<>"']|&(?!#?\w+;)/;
@@ -358,23 +805,75 @@ const processStyleTags = (string)=>{
 	//TODO: can we simplify to just split on commas?
 	const tags = string.match(/(?:[^, ":=]+|[:=](?:"[^"]*"|))+/g);
 
-	const id         = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0];
-	const classes    = _.remove(tags, (tag)=>(!tag.includes(':')) && (!tag.includes('=')));
-	const attributes = _.remove(tags, (tag)=>(tag.includes('='))).map((tag)=>tag.replace(/="?([^"]*)"?/g, '="$1"'));
-	const styles     = tags?.length ? tags.map((tag)=>tag.replace(/:"?([^"]*)"?/g, ':$1;').trim()) : [];
+	const id         = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0]        || null;
+	const classes    = _.remove(tags, (tag)=>(!tag.includes(':')) && (!tag.includes('='))).join(' ') || null;
+	const attributes = _.remove(tags, (tag)=>(tag.includes('='))).map((tag)=>tag.replace(/="?([^"]*)"?/g, '="$1"'))
+		?.filter((attr)=>!attr.startsWith('class="') && !attr.startsWith('style="') && !attr.startsWith('id="'))
+		.reduce((obj, attr)=>{
+			const index = attr.indexOf('=');
+			let [key, value] = [attr.substring(0, index), attr.substring(index + 1)];
+			value = value.replace(/"/g, '');
+			obj[key] = value;
+			return obj;
+		}, {}) || null;
+	const styles     = tags?.length ? tags.map((tag)=>tag.replace(/:"?([^"]*)"?/g, ':$1;').trim()).join(' ') : null;
 
-	return `${classes?.length ? ` ${classes.join(' ')}`        : ''}"` +
-		`${id                   ? ` id="${id}"`                  : ''}` +
-		`${styles?.length       ? ` style="${styles.join(' ')}"` : ''}` +
-		`${attributes?.length   ? ` ${attributes.join(' ')}`     : ''}`;
+	return {
+		id         : id,
+		classes    : classes,
+		styles     : styles,
+		attributes : _.isEmpty(attributes) ? null : attributes
+	};
 };
 
+//Given a string representing an HTML element, extract all of its properties (id, class, style, and other attributes)
+const extractHTMLStyleTags = (htmlString)=>{
+	const firstElementOnly = htmlString.split('>')[0];
+	const id         = firstElementOnly.match(/id="([^"]*)"/)?.[1]    || null;
+	const classes    = firstElementOnly.match(/class="([^"]*)"/)?.[1] || null;
+	const styles     = firstElementOnly.match(/style="([^"]*)"/)?.[1] || null;
+	const attributes = firstElementOnly.match(/[a-zA-Z]+="[^"]*"/g)
+		?.filter((attr)=>!attr.startsWith('class="') && !attr.startsWith('style="') && !attr.startsWith('id="'))
+		.reduce((obj, attr)=>{
+			const index = attr.indexOf('=');
+			let [key, value] = [attr.substring(0, index), attr.substring(index + 1)];
+			value = value.replace(/"/g, '');
+			obj[key] = value;
+			return obj;
+		}, {}) || null;
+
+	return {
+		id         : id,
+		classes    : classes,
+		styles     : styles,
+		attributes : _.isEmpty(attributes) ? null : attributes
+	};
+};
+
+const globalVarsList    = {};
+let varsQueue       = [];
+let globalPageNumber = 0;
+
 module.exports = {
 	marked : Marked,
-	render : (rawBrewText)=>{
-		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`)
-														 .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`);
-		return Marked.parse(rawBrewText);
+	render : (rawBrewText, pageNumber=0)=>{
+		globalVarsList[pageNumber] = {};					//Reset global links for current page, to ensure values are parsed in order
+		varsQueue                  = [];						//Could move into MarkedVariables()
+		globalPageNumber           = pageNumber;
+		if(pageNumber==0) {
+			MarkedGFMResetHeadingIDs();
+		}
+
+		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`);
+		const opts = Marked.defaults;
+
+		rawBrewText = opts.hooks.preprocess(rawBrewText);
+		const tokens = Marked.lexer(rawBrewText, opts);
+
+		Marked.walkTokens(tokens, opts.walkTokens);
+
+		const html = Marked.parser(tokens, opts);
+		return opts.hooks.postprocess(html);
 	},
 
 	validate : (rawBrewText)=>{

shared/naturalcrit/nav/nav.jsx

@@ -1,4 +1,4 @@
-require('./nav.less');
+require('client/homebrew/navbar/navbar.less');
 const React = require('react');
 const { useState, useRef, useEffect } = React;
 const createClass = require('create-react-class');
@@ -47,8 +47,8 @@ const Nav = {
 				color   : null
 			};
 		},
-		handleClick : function(){
-			this.props.onClick();
+		handleClick : function(e){
+			this.props.onClick(e);
 		},
 		render : function(){
 			const classes = cx('navItem', this.props.color, this.props.className);
@@ -104,7 +104,7 @@ const Nav = {
 		});
 
 		return (
-			<div className={`navDropdownContainer ${props.className}`}
+			<div className={`navDropdownContainer ${props.className ?? ''}`}
 				ref={myRef}
 				onMouseEnter = { props.trigger.includes('hover') ? ()=>handleDropdown(true)  : undefined }
 				onMouseLeave = { props.trigger.includes('hover') ? ()=>handleDropdown(false) : undefined }

shared/naturalcrit/nav/nav.less

@@ -1,97 +0,0 @@
-@import '../styles/colors';
-@keyframes glideDropDown {
-	0%   {transform : translate(0px, -100%);
-				opacity   : 0;
-			  background-color: #333;}
-	100% {transform : translate(0px, 0px);
-				opacity   : 1;
-			  background-color: #333;}
-}
-nav{
-	background-color : #333;
-	.navContent{
-		position			  : relative;
-		display         : flex;
-		justify-content : space-between;
-		z-index         : 2;
-	}
-	.navSection{
-		display     : flex;
-		align-items : center;
-	}
-	.navLogo{
-		display         : block;
-		margin-top      : 0px;
-		margin-right    : 8px;
-		margin-left     : 8px;
-		color           : white;
-		text-decoration : none;
-		&:hover{
-			.name{ color : @orange; }
-			svg{ fill : @orange }
-		}
-		svg{
-			height       : 13px;
-			margin-right : 0.2em;
-			cursor       : pointer;
-			fill         : white;
-		}
-		span.name{
-			font-family : 'CodeLight';
-			font-size   : 15px;
-			span.crit{
-				font-family : 'CodeBold';
-			}
-			small{
-				font-family    : 'Open Sans';
-				font-size      : 0.3em;
-				font-weight    : 800;
-				text-transform : uppercase;
-			}
-		}
-	}
-	.navItem{
-		#backgroundColorsHover;
-		.animate(background-color);
-		padding          : 8px 12px;
-		cursor           : pointer;
-		background-color : #333;
-		font-size        : 10px;
-		font-weight      : 800;
-		color            : white;
-		text-decoration  : none;
-		text-transform   : uppercase;
-		line-height      : 13px;
-		i{
-			margin-left : 5px;
-			font-size   : 13px;
-			float       : right;
-		}
-	}
-	.navSection:last-child .navItem{
-		border-left : 1px solid #666;
-	}
-	.navDropdownContainer{
-		position: relative;
-		.navDropdown {
-			position : absolute;
-			top      : 28px;
-			left     : 0px;
-			z-index  : 10000;
-			width    : 100%;
-			overflow : hidden auto;
-			max-height : calc(100vh - 28px);
-			.navItem{
-				animation-name: glideDropDown;
-				animation-duration: 0.4s;
-				position         : relative;
-				display          : block;
-				width            : 100%;
-				vertical-align   : middle;
-				padding          : 8px 5px;
-				border           : 1px solid #888;
-				border-bottom    : 0;
-			}
-		}
-	}
-}

shared/naturalcrit/splitPane/splitPane.jsx

@@ -1,15 +1,15 @@
 require('./splitPane.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const _ = require('lodash');
 const cx = require('classnames');
 
 const SplitPane = createClass({
 	displayName     : 'SplitPane',
 	getDefaultProps : function() {
 		return {
-			storageKey   : 'naturalcrit-pane-split',
-			onDragFinish : function(){} //fires when dragging
+			storageKey         : 'naturalcrit-pane-split',
+			onDragFinish       : function(){}, //fires when dragging
+			showDividerButtons : true
 		};
 	},
 
@@ -19,11 +19,13 @@ const SplitPane = createClass({
 			windowWidth       : 0,
 			isDragging        : false,
 			moveSource        : false,
-			moveBrew          : false,
-			showMoveArrows    : true
+			moveBrew          : false
 		};
 	},
 
+	pane1 : React.createRef(null),
+	pane2 : React.createRef(null),
+
 	componentDidMount : function() {
 		const dividerPos = window.localStorage.getItem(this.props.storageKey);
 		if(dividerPos){
@@ -137,17 +139,18 @@ const SplitPane = createClass({
 	render : function(){
 		return <div className='splitPane' onPointerMove={this.handleMove} onPointerUp={this.handleUp}>
 			<Pane
-				ref='pane1'
 				width={this.state.currentDividerPos}
 			>
 				{React.cloneElement(this.props.children[0], {
-					moveBrew      : this.state.moveBrew,
-					moveSource    : this.state.moveSource,
-					setMoveArrows : this.setMoveArrows
+					...(this.props.showDividerButtons && {
+						moveBrew: this.state.moveBrew,
+						moveSource: this.state.moveSource,
+						setMoveArrows: this.setMoveArrows,
+					}),
 				})}
 			</Pane>
 			{this.renderDivider()}
-			<Pane ref='pane2' isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
+			<Pane isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
 		</div>;
 	}
 });

stylelint_plugins/declaration-block-multi-line-min-declarations.js

@@ -1,5 +1,5 @@
 const stylelint = require('stylelint');
-const { isNumber } = require('stylelint/lib/utils/validateTypes');
+const { isNumber } = require('stylelint/lib/utils/validateTypes.cjs');
 
 const { report, ruleMessages, validateOptions } = stylelint.utils;
 const ruleName = 'naturalcrit/declaration-block-multi-line-min-declarations';

stylelint_plugins/declaration-colon-min-space-before.js

@@ -1,5 +1,5 @@
 const stylelint = require('stylelint');
-const { isNumber } = require('stylelint/lib/utils/validateTypes');
+const { isNumber } = require('stylelint/lib/utils/validateTypes.cjs');
 
 const { report, ruleMessages, validateOptions } = stylelint.utils;
 const ruleName = 'naturalcrit/declaration-colon-min-space-before';

tests/markdown/definition-lists.test.js

@@ -0,0 +1,103 @@
+/* eslint-disable max-lines */
+
+const Markdown = require('naturalcrit/markdown.js');
+
+describe('Inline Definition Lists', ()=>{
+	test('No Term 1 Definition', function() {
+		const source = ':: My First Definition\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt></dt><dd>My First Definition</dd>\n</dl>');
+	});
+
+	test('Single Definition Term', function() {
+		const source = 'My term :: My First Definition\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>My term</dt><dd>My First Definition</dd>\n</dl>');
+	});
+
+	test('Multiple Definition Terms', function() {
+		const source = 'Term 1::Definition of Term 1\nTerm 2::Definition of Term 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt><dd>Definition of Term 1</dd>\n<dt>Term 2</dt><dd>Definition of Term 2</dd>\n</dl>');
+	});
+});
+
+describe('Multiline Definition Lists', ()=>{
+	test('Single Term, Single Definition', function() {
+		const source = 'Term 1\n::Definition 1\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd></dl>');
+	});
+
+	test('Single Term, Plural Definitions', function() {
+		const source = 'Term 1\n::Definition 1\n::Definition 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl>');
+	});
+
+	test('Multiple Term, Single Definitions', function() {
+		const source = 'Term 1\n::Definition 1\n\nTerm 2\n::Definition 1\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd></dl>');
+	});
+
+	test('Multiple Term, Plural Definitions', function() {
+		const source = 'Term 1\n::Definition 1\n::Definition 2\n\nTerm 2\n::Definition 1\n::Definition 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl>');
+	});
+
+	test('Single Term, Single multi-line definition', function() {
+		const source = 'Term 1\n::Definition 1\nand more and\nmore and more\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more and more</dd></dl>');
+	});
+
+	test('Single Term, Plural multi-line definitions', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n::Definition 2\nand more\nand more\n::Definition 3\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dd>Definition 2 and more and more</dd>\n<dd>Definition 3</dd></dl>');
+	});
+
+	test('Multiple Term, Single multi-line definition', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n\nTerm 2\n::Definition 1\n::Definition 2\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl>');
+	});
+
+	test('Multiple Term, Single multi-line definition, followed by an inline dl', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n\nTerm 2\n::Definition 1\n::Definition 2\n\n::Inline Definition (no term)';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl><dl><dt></dt><dd>Inline Definition (no term)</dd>\n</dl>');
+	});
+
+	test('Multiple Term, Single multi-line definition, followed by paragraph', function() {
+		const source = 'Term 1\n::Definition 1\nand more and more\n\nTerm 2\n::Definition 1\n::Definition 2\n\nParagraph';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt>\n<dd>Definition 1 and more and more</dd>\n<dt>Term 2</dt>\n<dd>Definition 1</dd>\n<dd>Definition 2</dd></dl><p>Paragraph</p>');
+	});
+
+	test('Block Token cannot be the Term of a multi-line definition', function() {
+		const source = '## Header\n::Definition 1 of a single-line DL\n::Definition 1 of another single-line DL';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<h2 id="header">Header</h2>\n<dl><dt></dt><dd>Definition 1 of a single-line DL</dd>\n<dt></dt><dd>Definition 1 of another single-line DL</dd>\n</dl>');
+	});
+
+	test('Inline DL has priority over Multiline', function() {
+		const source = 'Term 1 :: Inline definition 1\n:: Inline definition 2 (no DT)';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt><dd>Inline definition 1</dd>\n<dt></dt><dd>Inline definition 2 (no DT)</dd>\n</dl>');
+	});
+
+	test('Multiline Definition Term must have at least one non-empty Definition', function() {
+		const source = 'Term 1\n::';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div><div class='blank'></div>`);
+	});
+
+	test('Multiline Definition List must have at least one non-newline character after ::', function() {
+		const source = 'Term 1\n::\nDefinition 1\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div><div class='blank'></div>\n<p>Definition 1</p>`);
+	});
+});

tests/markdown/emojis.test.js

@@ -0,0 +1,58 @@
+const Markdown = require('naturalcrit/markdown.js');
+const dedent = require('dedent-tabs').default;
+
+// Marked.js adds line returns after closing tags on some default tokens.
+// This removes those line returns for comparison sake.
+String.prototype.trimReturns = function(){
+	return this.replace(/\r?\n|\r/g, '');
+};
+
+const emoji = 'df_d12_2';
+
+describe(`When emojis/icons are active`, ()=>{
+	it('when a word is between two colons (:word:), and a matching emoji exists, it is rendered as an emoji', function() {
+		const source = `:${emoji}:`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><i class="df d12-2"></i></p>`);
+	});
+
+	it('when a word is between two colons (:word:), and no matching emoji exists, it is not parsed', function() {
+		const source = `:invalid:`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>:invalid:</p>`);
+	});
+
+	it('two valid emojis with no whitespace are prioritized over definition lists', function() {
+		const source = `:${emoji}::${emoji}:`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><i class="df d12-2"></i><i class="df d12-2"></i></p>`);
+	});
+
+	it('definition lists that are not also part of an emoji can coexist with normal emojis', function() {
+		const source = `definition :: term ${emoji}::${emoji}:`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<dl><dt>definition</dt><dd>term df_d12_2:<i class="df d12-2"></i></dd></dl>`);
+	});
+
+	it('A valid emoji is compatible with curly injectors', function() {
+		const source = `:${emoji}:{color:blue,myClass}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><i class="df d12-2 myClass" style="color:blue;"></i></p>`);
+	});
+
+	it('Emojis are not parsed inside of curly span CSS blocks', function() {
+		const source = `{{color:${emoji} text}}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<span class="inline-block" style="color:df_d12_2;">text</span>`);
+	});
+
+	it('Emojis are not parsed inside of curly div CSS blocks', function() {
+		const source = dedent`{{color:${emoji}
+													text
+													}}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="color:df_d12_2;"><p>text</p></div>`);
+	});
+
+	// another test of the editor to confirm an autocomplete menu opens
+});

tests/markdown/hard-breaks.test.js

@@ -0,0 +1,47 @@
+/* eslint-disable max-lines */
+
+const Markdown = require('naturalcrit/markdown.js');
+
+describe('Hard Breaks', ()=>{
+	test('Single Break', function() {
+		const source = ':\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>`);
+	});
+
+	test('Double Break', function() {
+		const source = '::\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div>`);
+	});
+
+	test('Triple Break', function() {
+		const source = ':::\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
+	});
+
+	test('Many Break', function() {
+		const source = '::::::::::\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
+	});
+
+	test('Multiple sets of Breaks', function() {
+		const source = ':::\n:::\n:::';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div>\n<div class='blank'></div><div class='blank'></div><div class='blank'></div>\n<div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
+	});
+
+	test('Break directly between two paragraphs', function() {
+		const source = 'Line 1\n::\nLine 2';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Line 1</p>\n<div class='blank'></div><div class='blank'></div>\n<p>Line 2</p>`);
+	});
+
+	test('Ignored inside a code block', function() {
+		const source = '```\n\n:\n\n```\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<pre><code>\n:\n</code></pre>`);
+	});
+});

tests/markdown/mustache-syntax.test.js

@@ -130,8 +130,8 @@ describe('Inline: When using the Inline syntax {{ }}', ()=>{
 describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
 	it('Renders a div with text only', function() {
 		const source = dedent`{{
-		text
-		}}`;
+													text
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block"><p>text</p></div>`);
 	});
@@ -139,14 +139,14 @@ describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
 	it('Renders an empty div', function() {
 		const source = dedent`{{
 
-		}}`;
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block"></div>`);
 	});
 
 	it('Renders a single paragraph with opening and closing brackets', function() {
 		const source = dedent`{{
-		}}`;
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>{{}}</p>`);
 	});
@@ -154,79 +154,79 @@ describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
 	it('Renders a div with a single class', function() {
 		const source = dedent`{{cat
 
-		}}`;
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat"></div>`);
 	});
 
 	it('Renders a div with a single class and text', function() {
 		const source = dedent`{{cat
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat"><p>Sample text.</p></div>`);
 	});
 
 	it('Renders a div with two classes and text', function() {
 		const source = dedent`{{cat,dog
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat dog"><p>Sample text.</p></div>`);
 	});
 
 	it('Renders a div with a style and text', function() {
 		const source = dedent`{{color:red
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="color:red;"><p>Sample text.</p></div>`);
 	});
 
 	it('Renders a div with a style that has a string variable, and text', function() {
 		const source = dedent`{{--stringVariable:"'string'"
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string';"><p>Sample text.</p></div>`);
 	});
 
 	it('Renders a div with a style that has a string variable, and text', function() {
 		const source = dedent`{{--stringVariable:"'string'"
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string';"><p>Sample text.</p></div>`);
 	});
 
 	it('Renders a div with a class, style and text', function() {
 		const source = dedent`{{cat,color:red
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat" style="color:red;"><p>Sample text.</p></div>`);
 	});
 
 	it('Renders a div with an ID, class, style and text (different order)', function() {
 		const source = dedent`{{color:red,cat,#dog
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat" id="dog" style="color:red;"><p>Sample text.</p></div>`);
 	});
 
 	it('Renders a div with a single ID', function() {
 		const source = dedent`{{#cat,#dog
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" id="cat"><p>Sample text.</p></div>`);
 	});
 
 	it('Renders a div with an ID, class, style and text, and a variable assignment', function() {
 		const source = dedent`{{color:red,cat,#dog,a="b and c",d="e"
-		Sample text.
-		}}`;
+													Sample text.
+													}}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class=\"block cat\" id=\"dog\" style=\"color:red;\" a=\"b and c\" d=\"e\"><p>Sample text.</p></div>`);
 	});
@@ -243,124 +243,218 @@ describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
 describe('Injection: When an injection tag follows an element', ()=>{
 	// FIXME: Most of these fail because injections currently replace attributes, rather than append to.  Or just minor extra whitespace issues.
 	describe('and that element is an inline-block', ()=>{
-		it.failing('Renders a span "text" with no injection', function() {
+		it('Renders a span "text" with no injection', function() {
 			const source = '{{ text}}{}';
 			const rendered = Markdown.render(source);
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block">text</span>');
 		});
 
-		it.failing('Renders a span "text" with injected Class name', function() {
+		it('Renders a span "text" with injected Class name', function() {
 			const source = '{{ text}}{ClassName}';
 			const rendered = Markdown.render(source);
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block ClassName">text</span>');
 		});
 
-		it.failing('Renders a span "text" with injected attribute', function() {
+		it('Renders a span "text" with injected attribute', function() {
 			const source = '{{ text}}{a="b and c"}';
 			const rendered = Markdown.render(source);
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span a="b and c" class="inline-block ">text</span>');
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" a="b and c">text</span>');
 		});
 
-		it.failing('Renders a span "text" with injected style', function() {
+		it('Renders a span "text" with injected style', function() {
 			const source = '{{ text}}{color:red}';
 			const rendered = Markdown.render(source);
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red;">text</span>');
 		});
 
-		it.failing('Renders a span "text" with injected style using a string variable', function() {
+		it('Renders a span "text" with injected style using a string variable', function() {
 			const source = `{{ text}}{--stringVariable:"'string'"}`;
 			const rendered = Markdown.render(source);
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<span class="inline-block" style="--stringVariable:'string';">text</span>`);
 		});
 
-		it.failing('Renders a span "text" with two injected styles', function() {
+		it('Renders a span "text" with two injected styles', function() {
 			const source = '{{ text}}{color:red,background:blue}';
 			const rendered = Markdown.render(source);
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red; background:blue;">text</span>');
 		});
 
-		it.failing('Renders an emphasis element with injected Class name', function() {
+		it('Renders a span "text" with its own ID, overwritten with an injected ID', function() {
+			const source = '{{#oldId text}}{#newId}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" id="newId">text</span>');
+		});
+
+		it('Renders a span "text" with its own attributes, overwritten with an injected attribute, plus a new one', function() {
+			const source = '{{attrA="old",attrB="old" text}}{attrA="new",attrC="new"}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" attrA="new" attrB="old" attrC="new">text</span>');
+		});
+
+		it('Renders a span "text" with its own attributes, overwritten with an injected attribute, ignoring "class", "style", and "id"', function() {
+			const source = '{{attrA="old",attrB="old" text}}{attrA="new",attrC="new",class="new",style="new",id="new"}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" attrA="new" attrB="old" attrC="new">text</span>');
+		});
+
+		it('Renders a span "text" with its own styles, appended with injected styles', function() {
+			const source = '{{color:blue,height:10px text}}{width:10px,color:red}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:blue; height:10px; width:10px; color:red;">text</span>');
+		});
+
+		it('Renders a span "text" with its own classes, appended with injected classes', function() {
+			const source = '{{classA,classB text}}{classA,classC}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block classA classB classA classC">text</span>');
+		});
+
+		it('Renders an emphasis element with injected Class name', function() {
 			const source = '*emphasis*{big}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><em class="big">emphasis</em></p>');
 		});
 
-		it.failing('Renders a code element with injected style', function() {
+		it('Renders a code element with injected style', function() {
 			const source = '`code`{background:gray}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><code style="background:gray;">code</code></p>');
 		});
 
-		it.failing('Renders an image element with injected style', function() {
-			const source = '![alt text](http://i.imgur.com/hMna6G0.png){position:absolute}';
+		it('Renders an image element with injected style', function() {
+			const source = '![alt text](https://i.imgur.com/hMna6G0.png){position:absolute}';
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><img src="http://i.imgur.com/hMna6G0.png" alt="homebrew mug" style="position:absolute;"></p>');
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute;" src="https://i.imgur.com/hMna6G0.png" alt="alt text"></p>');
 		});
 
-		it.failing('Renders an element modified by only the first of two consecutive injections', function() {
+		it('Renders an element modified by only the first of two consecutive injections', function() {
 			const source = '{{ text}}{color:red}{background:blue}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><span class="inline-block" style="color:red;">text</span>{background:blue}</p>');
 		});
 
+		it('Renders an parent and child element, each modified by an injector', function() {
+			const source = dedent`**bolded text**{color:red}
+														{color:blue}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p style="color:blue;"><strong style="color:red;">bolded text</strong></p>');
+		});
+
 		it('Renders an image with added attributes', function() {
 			const source = `![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img class="" style="position:absolute; bottom:20px; left:130px; width:220px;" a="b and c" d="e" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug"></p>`);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug" a="b and c" d="e"></p>`);
+		});
+
+		it('Renders an image with "=" in the url, and added attributes', function() {
+			const source = `![homebrew mug](https://i.imgur.com/hMna6G0.png?auth=12345&height=1024) {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png?auth=12345&height=1024); position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png?auth=12345&height=1024" alt="homebrew mug" a="b and c" d="e"></p>`);
+		});
+
+		it('Renders an image and added attributes with "=" in the value, ', function() {
+			const source = `![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e,otherUrl="url?auth=12345"}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug" a="b and c" d="e" otherUrl="url?auth=12345"></p>`);
 		});
 	});
 
 	describe('and that element is a block', ()=>{
-		it.failing('renders a div "text" with no injection', function() {
+		it('renders a div "text" with no injection', function() {
 			const source = '{{\ntext\n}}\n{}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block"><p>text</p></div>');
 		});
 
-		it.failing('renders a div "text" with injected Class name', function() {
+		it('renders a div "text" with injected Class name', function() {
 			const source = '{{\ntext\n}}\n{ClassName}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block ClassName"><p>text</p></div>');
 		});
 
-		it.failing('renders a div "text" with injected style', function() {
+		it('renders a div "text" with injected style', function() {
 			const source = '{{\ntext\n}}\n{color:red}';
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" style="color:red;"><p>text</p></div>');
 		});
 
-		it.failing('renders a div "text" with two injected styles', function() {
+		it('renders a div "text" with two injected styles', function() {
 			const source = dedent`{{
-			text
-			}}
-			{color:red,background:blue}`;
+														text
+														}}
+														{color:red,background:blue}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="color:red; background:blue"><p>text</p></div>`);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="color:red; background:blue;"><p>text</p></div>`);
 		});
 
-		it.failing('renders a div "text" with injected variable string', function() {
+		it('renders a div "text" with injected variable string', function() {
 			const source = dedent`{{
-			text
-			}}
-			{--stringVariable:"'string'"}`;
+														text
+														}}
+														{--stringVariable:"'string'"}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string'"><p>text</p></div>`);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string';"><p>text</p></div>`);
 		});
 
-		it.failing('renders an h2 header "text" with injected class name', function() {
+		it('Renders a span "text" with its own ID, overwritten with an injected ID', function() {
+			const source = dedent`{{#oldId
+														text
+														}}
+														{#newId}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" id="newId"><p>text</p></div>');
+		});
+
+		it('Renders a span "text" with its own attributes, overwritten with an injected attribute, plus a new one', function() {
+			const source = dedent`{{attrA="old",attrB="old"
+														text
+														}}
+														{attrA="new",attrC="new"}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" attrA="new" attrB="old" attrC="new"><p>text</p></div>');
+		});
+
+		it('Renders a span "text" with its own attributes, overwritten with an injected attribute, ignoring "class", "style", and "id"', function() {
+			const source = dedent`{{attrA="old",attrB="old"
+														text
+														}}
+														{attrA="new",attrC="new",class="new",style="new",id="new"}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" attrA="new" attrB="old" attrC="new"><p>text</p></div>');
+		});
+
+		it('Renders a span "text" with its own styles, appended with injected styles', function() {
+			const source = dedent`{{color:blue,height:10px
+														text
+														}}
+														{width:10px,color:red}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" style="color:blue; height:10px; width:10px; color:red;"><p>text</p></div>');
+		});
+
+		it('Renders a span "text" with its own classes, appended with injected classes', function() {
+			const source = dedent`{{classA,classB
+														text
+														}}
+														{classA,classC}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block classA classB classA classC"><p>text</p></div>');
+		});
+
+		it('renders an h2 header "text" with injected class name', function() {
 			const source = dedent`## text
-			{ClassName}`;
+														{ClassName}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<h2 class="ClassName">text</h2>');
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<h2 class="ClassName" id="text">text</h2>');
 		});
 
-		it.failing('renders a table with injected class name', function() {
+		it('renders a table with injected class name', function() {
 			const source = dedent`| Experience Points | Level |
-			|:------------------|:-----:|
-			| 0                 | 1     |
-			| 300               | 2     |
+														|:------------------|:-----:|
+														| 0                 | 1     |
+														| 300               | 2     |
 
-			{ClassName}`;
+														{ClassName}`;
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<table class="ClassName"><thead><tr><th align=left>Experience Points</th><th align=center>Level</th></tr></thead><tbody><tr><td align=left>0</td><td align=center>1</td></tr><tr><td align=left>300</td><td align=center>2</td></tr></tbody></table>`);
 		});
@@ -376,23 +470,23 @@ describe('Injection: When an injection tag follows an element', ()=>{
 		// 	expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`...`);   // FIXME: expect this to be injected into <ul>?  Currently injects into last <li>
 		// });
 
-		it.failing('renders an h2 header "text" with injected class name, and "secondInjection" as regular text on the next line.', function() {
+		it('renders an h2 header "text" with injected class name, and "secondInjection" as regular text on the next line.', function() {
 			const source = dedent`## text
 			{ClassName}
 			{secondInjection}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<h2 class="ClassName">text</h2><p>{secondInjection}</p>');
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<h2 class="ClassName" id="text">text</h2><p>{secondInjection}</p>');
 		});
 
-		it.failing('renders a div nested into another div, the inner with class=innerDiv and the other class=outerDiv', function() {
+		it('renders a div nested into another div, the inner with class=innerDiv and the other class=outerDiv', function() {
 			const source = dedent`{{
-			outer text
-			{{
-			inner text
-			}}
-			{innerDiv}
-			}}
-			{outerDiv}`;
+														outer text
+														{{
+														inner text
+														}}
+														{innerDiv}
+														}}
+														{outerDiv}`;
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block outerDiv"><p>outer text</p><div class="block innerDiv"><p>inner text</p></div></div>');
 		});

tests/markdown/variables.test.js

@@ -0,0 +1,405 @@
+/* eslint-disable max-lines */
+
+const dedent = require('dedent-tabs').default;
+const Markdown = require('naturalcrit/markdown.js');
+
+// Marked.js adds line returns after closing tags on some default tokens.
+// This removes those line returns for comparison sake.
+String.prototype.trimReturns = function(){
+	return this.replace(/\r?\n|\r/g, '').trim();
+};
+
+renderAllPages = function(pages){
+	const outputs = [];
+	pages.forEach((page, index)=>{
+		const output = Markdown.render(page, index);
+		outputs.push(output);
+	});
+
+	return outputs;
+};
+
+// Adding `.failing()` method to `describe` or `it` will make failing tests "pass" as long as they continue to fail.
+// Remove the `.failing()` method once you have fixed the issue.
+
+describe('Block-level variables', ()=>{
+	it('Handles variable assignment and recall with simple text', function() {
+		const source = dedent`
+			[var]: string
+
+			$[var]
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string</p>');
+	});
+
+	it('Handles variable assignment and recall with multiline string', function() {
+		const source = dedent`
+			[var]: string
+			across multiple
+			lines
+
+			$[var]`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string across multiple lines</p>');
+	});
+
+	it('Handles variable assignment and recall with tables', function() {
+		const source = dedent`
+			[var]:
+			##### Title
+			| H1 | H2 | 
+			|:---|:--:|
+			| A  | B  |
+			| C  | D  |
+			
+			$[var]`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+			<h5 id="title">Title</h5>
+			<table><thead><tr><th align=left>H1</th>
+			<th align=center>H2</th>
+			</tr></thead><tbody><tr><td align=left>A</td>
+			<td align=center>B</td>
+			</tr><tr><td align=left>C</td>
+			<td align=center>D</td>
+			</tr></tbody></table>`.trimReturns());
+	});
+
+	it('Hoists undefined variables', function() {
+		const source = dedent`
+			$[var]
+
+			[var]: string`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string</p>');
+	});
+
+	it('Hoists last instance of variable', function() {
+		const source = dedent`
+			$[var]
+
+			[var]: string
+
+			[var]: new string`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>new string</p>');
+	});
+
+	it('Handles complex hoisting', function() {
+		const source = dedent`
+			$[titleAndName]: $[title] $[fullName]
+
+			$[title]: Mr.
+
+			$[fullName]: $[firstName] $[lastName]
+
+			[firstName]: Bob
+
+			Welcome, $[titleAndName]!
+
+			[lastName]: Jacob
+
+			[lastName]: $[lastName]son
+			`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Welcome, Mr. Bob Jacobson!</p>');
+	});
+
+	it('Handles variable reassignment', function() {
+		const source = dedent`
+			[var]: one
+
+			$[var]
+
+			[var]: two
+
+			$[var]
+			`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>one</p><p>two</p>'.trimReturns());
+	});
+
+	it('Handles variable reassignment with hoisting', function() {
+		const source = dedent`
+			$[var]
+		
+			[var]: one
+
+			$[var]
+
+			[var]: two
+
+			$[var]
+			`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>two</p><p>one</p><p>two</p>'.trimReturns());
+	});
+
+	it('Ignores undefined variables that can\'t be hoisted', function() {
+		const source = dedent`
+			$[var](My name is $[first] $[last])
+
+			$[last]: Jones
+			`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>My name is $[first] Jones</p>`.trimReturns());
+	});
+});
+
+describe('Inline-level variables', ()=>{
+	it('Handles variable assignment and recall with simple text', function() {
+		const source = dedent`
+			$[var](string)
+
+			$[var]
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>string</p><p>string</p>');
+	});
+
+	it('Hoists undefined variables when possible', function() {
+		const source = dedent`
+			$[var](My name is $[name] Jones)
+
+			[name]: Bob`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>My name is Bob Jones</p>');
+	});
+
+	it('Hoists last instance of variable', function() {
+		const source = dedent`
+			$[var](My name is $[name] Jones)
+
+			$[name](Bob)
+
+			[name]: Bill`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>My name is Bill Jones</p> <p>Bob</p>`.trimReturns());
+	});
+
+	it('Only captures nested parens if balanced', function() {
+		const source = dedent`
+			$[var1](A variable (with nested parens) inside)
+
+			$[var1]
+
+			$[var2](A variable ) with unbalanced parens)
+
+			$[var2]`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+		<p>A variable (with nested parens) inside</p>
+		<p>A variable (with nested parens) inside</p>
+		<p>A variable with unbalanced parens)</p>
+		<p>A variable</p>
+		`.trimReturns());
+	});
+});
+
+describe('Math', ()=>{
+	it('Handles simple math using numbers only', function() {
+		const source = dedent`
+			$[1 + 3 * 5 - (1 / 4)]
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>15.75</p>');
+	});
+
+	it('Handles round function', function() {
+		const source = dedent`
+			$[round(1/4)]`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>0</p>');
+	});
+
+	it('Handles floor function', function() {
+		const source = dedent`
+			$[floor(0.6)]`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>0</p>');
+	});
+
+	it('Handles ceil function', function() {
+		const source = dedent`
+			$[ceil(0.2)]`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>1</p>');
+	});
+
+	it('Handles nested functions', function() {
+		const source = dedent`
+			$[ceil(floor(round(0.6)))]`;
+		const rendered = Markdown.render(source).replace(/\s/g, ' ').trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>1</p>');
+	});
+
+	it('Handles simple math with variables', function() {
+		const source = dedent`
+			$[num1]: 5
+
+			$[num2]: 4
+
+			Answer is $[answer]($[1 + 3 * num1 - (1 / num2)]).
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Answer is 15.75.</p>');
+	});
+
+	it('Handles variable incrementing', function() {
+		const source = dedent`
+			$[num1]: 5
+
+			Increment num1 to get $[num1]($[num1 + 1]) and again to $[num1]($[num1 + 1]).
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Increment num1 to get 6 and again to 7.</p>');
+	});
+});
+
+describe('Code blocks', ()=>{
+	it('Ignores all variables in fenced code blocks', function() {
+		const source = dedent`
+		  \`\`\`
+			[var]: string
+
+			$[var]
+
+			$[var](new string)
+			\`\`\`
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+		 <pre><code>
+		 [var]: string
+		 
+		 $[var]
+		 
+		 $[var](new string)
+		 </code></pre>`.trimReturns());
+	});
+
+	it('Ignores all variables in indented code blocks', function() {
+		const source = dedent`
+			test
+
+			    [var]: string
+
+			    $[var]
+
+			    $[var](new string)
+		`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+		 <p>test</p>
+
+		 <pre><code>
+		 [var]: string
+		 
+		 $[var]
+		 
+		 $[var](new string)
+		 </code></pre>`.trimReturns());
+	});
+
+	it('Ignores all variables in inline code blocks', function() {
+		const source = '[var](Hello) `[link](url)`. This `[var] does not work`';
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+			<p><a href="Hello">var</a> <code>[link](url)</code>. This <code>[var] does not work</code></p>`.trimReturns());
+	});
+});
+
+describe('Normal Links and Images', ()=>{
+	it('Renders normal images', function() {
+		const source = `![alt text](url)`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+			<p><img src="url" alt="alt text" style="--HB_src:url(url);"></p>`.trimReturns());
+	});
+
+	it('Renders normal images with a title', function() {
+		const source = 'An image ![alt text](url "and title")!';
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+			<p>An image <img src="url" alt="alt text" style="--HB_src:url(url);" title="and title">!</p>`.trimReturns());
+	});
+
+	it('Applies curly injectors to images', function() {
+		const source = `![alt text](url){width:100px}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+			<p><img style="--HB_src:url(url); width:100px;" src="url" alt="alt text"></p>`.trimReturns());
+	});
+
+	it('Renders normal links', function() {
+		const source = 'A Link to my [website](url)!';
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+		<p>A Link to my <a href="url">website</a>!</p>`.trimReturns());
+	});
+
+	it('Renders normal links with a title', function() {
+		const source = 'A Link to my [website](url "and title")!';
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
+		<p>A Link to my <a href="url" title="and title">website</a>!</p>`.trimReturns());
+	});
+});
+
+describe('Cross-page variables', ()=>{
+	it('Handles variable assignment and recall across pages', function() {
+		const source0 = `[var]: string`;
+		const source1 = `$[var]`;
+		const rendered = renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();
+		expect(rendered, `Input:\n${[source0, source1].join('\n\\page\n')}`, { showPrefix: false }).toBe('\\page<p>string</p>');
+	});
+
+	it('Handles hoisting across pages', function() {
+		const source0 = `$[var]`;
+		const source1 = `[var]: string`;
+		renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();	//Requires one full render of document before hoisting is picked up
+		const rendered = renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();
+		expect(rendered, `Input:\n${[source0, source1].join('\n\\page\n')}`, { showPrefix: false }).toBe('<p>string</p>\\page');
+	});
+
+	it('Handles reassignment and hoisting across pages', function() {
+		const source0 = `$[var]\n\n[var]: one\n\n$[var]`;
+		const source1 = `[var]: two\n\n$[var]`;
+		renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();	//Requires one full render of document before hoisting is picked up
+		const rendered = renderAllPages([source0, source1]).join('\n\\page\n').trimReturns();
+		expect(rendered, `Input:\n${[source0, source1].join('\n\\page\n')}`, { showPrefix: false }).toBe('<p>two</p><p>one</p>\\page<p>two</p>');
+	});
+});
+
+describe('Math function parameter handling', ()=>{
+	it('allows variables in single-parameter functions', function() {
+		const source = '[var]:4.1\n\n$[floor(var)]';
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>4</p>`);
+	});
+	it('allows one variable and a number in two-parameter functions', function() {
+		const source = '[var]:4\n\n$[min(1,var)]';
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>1</p>`);
+	});
+	it('allows two variables in two-parameter functions', function() {
+		const source = '[var1]:4\n\n[var2]:8\n\n$[min(var1,var2)]';
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>4</p>`);
+	});
+});
+
+describe('Variable names that are subsets of other names', ()=>{
+	it('do not conflict with function names', function() {
+		const source = `[a]: -1\n\n$[abs(a)]`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered).toBe('<p>1</p>');
+	});
+
+	it('do not conflict with other variable names', function() {
+		const source = `[ab]: 2\n\n[aba]: 8\n\n[ba]: 4\n\n$[ab + aba + ba]`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered).toBe('<p>14</p>');
+	});
+});

themes/V3/5ePHB/settings.json

@@ -1,6 +1,6 @@
 {
   "name" : "5e PHB",
   "renderer" : "V3",
-  "baseTheme" : false,
+  "baseTheme" : "Blank",
   "baseSnippets" : false
 }

themes/V3/5ePHB/snippets.js

@@ -21,9 +21,43 @@ module.exports = [
 		view      : 'text',
 		snippets  : [
 			{
-				name : 'Table of Contents',
-				icon : 'fas fa-book',
-				gen  : TableOfContentsGen
+				name         : 'Table of Contents',
+				icon         : 'fas fa-book',
+				gen          : TableOfContentsGen,
+				experimental : true,
+				subsnippets  : [
+					{
+						name         : 'Table of Contents',
+						icon         : 'fas fa-book',
+						gen          : TableOfContentsGen,
+						experimental : true
+					},
+					{
+						name : 'Include in ToC up to H3',
+						icon : 'fas fa-dice-three',
+						gen  : dedent `\n{{tocDepthH3
+							}}\n`,
+
+					},
+					{
+						name : 'Include in ToC up to H4',
+						icon : 'fas fa-dice-four',
+						gen  : dedent `\n{{tocDepthH4
+							}}\n`,
+					},
+					{
+						name : 'Include in ToC up to H5',
+						icon : 'fas fa-dice-five',
+						gen  : dedent `\n{{tocDepthH5
+							}}\n`,
+					},
+					{
+						name : 'Include in ToC up to H6',
+						icon : 'fas fa-dice-six',
+						gen  : dedent `\n{{tocDepthH6
+							}}\n`,
+					}
+				]
 			},
 			{
 				name         : 'Index',
@@ -315,7 +349,7 @@ module.exports = [
 					/* Ink Friendly */
 					*:is(.page,.monster,.note,.descriptive) {
 						background : white !important;
-						filter : drop-shadow(0px 0px 3px #888) !important;
+						box-shadow : 1px 4px 14px #888 !important;
 					}
 
 					.page img {

themes/V3/5ePHB/snippets/coverpage.gen.js

@@ -149,8 +149,6 @@ module.exports = {
 			![](/assets/naturalCritLogoWhite.svg)
 
 			Homebrewery.Naturalcrit.com
-			}}
-
-			\page`;
+			}}`;
 	}
 };