diff --git a/changelog.md b/changelog.md index 1bd6ad97a..83585bb60 100644 --- a/changelog.md +++ b/changelog.md @@ -6,6 +6,10 @@ h5 { # changelog +### Saturday, 10/6/2021 - v2.12.0 + +- New "style" tab to better organize custom CSS in preparation for new themes and sharable styles. + ### Saturday, 02/5/2021 - v2.11.2 - Fix for edge case where brews could accidentally transfer from Google Drive back to Homebrewery. diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 58981dbf3..440db1ce3 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -124,9 +124,9 @@ const BrewRenderer = createClass({ renderPage : function(pageText, index){ if(this.props.renderer == 'legacy') - return
; + return
; else - return
; + return
; }, renderPages : function(){ diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index 0d57fdb60..0c054b12b 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -37,14 +37,13 @@ const Snippetbar = createClass({ }, renderSnippetGroups : function(){ + let snippets = []; if(this.props.view === 'text') { if(this.props.renderer === 'V3') snippets = SnippetsV3; else snippets = SnippetsLegacy; - } else { - snippets = []; } return _.map(snippets, (snippetGroup)=>{ diff --git a/client/homebrew/homebrew.jsx b/client/homebrew/homebrew.jsx index ee6949ea0..f254009a0 100644 --- a/client/homebrew/homebrew.jsx +++ b/client/homebrew/homebrew.jsx @@ -45,7 +45,7 @@ const Homebrew = createClass({ }/> }/> }/> - + }/> }/> } /> } /> diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index baffa0cfc..14f14a987 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -3,6 +3,7 @@ const React = require('react'); const createClass = require('create-react-class'); const _ = require('lodash'); const request = require('superagent'); +const dedent = require('dedent-tabs').default; const Markdown = require('naturalcrit/markdown.js'); @@ -16,15 +17,20 @@ const SplitPane = require('naturalcrit/splitPane/splitPane.jsx'); const Editor = require('../../editor/editor.jsx'); const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); - const KEY = 'homebrewery-new'; const NewPage = createClass({ getDefaultProps : function() { return { brew : { - text : '', - style : '', + text : '', + style : dedent` + /*=======--- Example CSS styling ---=======*/ + /* Any CSS here will apply to your document! */ + + .myExampleClass { + color: black; + }`, shareId : null, editId : null, createdAt : null, @@ -52,7 +58,8 @@ const NewPage = createClass({ tags : this.props.brew.tags || '', published : false, authors : [], - systems : this.props.brew.systems || [] + systems : this.props.brew.systems || [], + renderer : this.props.brew.renderer || 'legacy' }, isSaving : false, @@ -214,7 +221,7 @@ const NewPage = createClass({ onMetaChange={this.handleMetaChange} renderer={this.state.brew.renderer} /> - +
; diff --git a/package-lock.json b/package-lock.json index 025ef30d7..b734949d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "homebrewery", - "version": "2.11.2", + "version": "2.12.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1472,6 +1472,108 @@ "@babel/helper-plugin-utils": "^7.12.13" } }, + "@babel/plugin-transform-runtime": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.14.5.tgz", + "integrity": "sha512-fPMBhh1AV8ZyneiCIA+wYYUH1arzlXR1UMcApjvchDhfKxhy2r2lReJv8uHEyihi4IFIGlr1Pdx7S5fkESDQsg==", + "requires": { + "@babel/helper-module-imports": "^7.14.5", + "@babel/helper-plugin-utils": "^7.14.5", + "babel-plugin-polyfill-corejs2": "^0.2.2", + "babel-plugin-polyfill-corejs3": "^0.2.2", + "babel-plugin-polyfill-regenerator": "^0.2.2", + "semver": "^6.3.0" + }, + "dependencies": { + "@babel/helper-define-polyfill-provider": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.3.tgz", + "integrity": "sha512-RH3QDAfRMzj7+0Nqu5oqgO5q9mFtQEVvCRsi8qCEfzLR9p2BHfn5FzhSB2oj1fF7I2+DcTORkYaQ6aTR9Cofew==", + "requires": { + "@babel/helper-compilation-targets": "^7.13.0", + "@babel/helper-module-imports": "^7.12.13", + "@babel/helper-plugin-utils": "^7.13.0", + "@babel/traverse": "^7.13.0", + "debug": "^4.1.1", + "lodash.debounce": "^4.0.8", + "resolve": "^1.14.2", + "semver": "^6.1.2" + } + }, + "@babel/helper-module-imports": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz", + "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==", + "requires": { + "@babel/types": "^7.14.5" + } + }, + "@babel/helper-plugin-utils": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz", + "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==" + }, + "@babel/helper-validator-identifier": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz", + "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==" + }, + "@babel/types": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz", + "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==", + "requires": { + "@babel/helper-validator-identifier": "^7.14.5", + "to-fast-properties": "^2.0.0" + } + }, + "babel-plugin-polyfill-corejs2": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.2.tgz", + "integrity": "sha512-kISrENsJ0z5dNPq5eRvcctITNHYXWOA4DUZRFYCz3jYCcvTb/A546LIddmoGNMVYg2U38OyFeNosQwI9ENTqIQ==", + "requires": { + "@babel/compat-data": "^7.13.11", + "@babel/helper-define-polyfill-provider": "^0.2.2", + "semver": "^6.1.1" + } + }, + "babel-plugin-polyfill-corejs3": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.2.tgz", + "integrity": "sha512-l1Cf8PKk12eEk5QP/NQ6TH8A1pee6wWDJ96WjxrMXFLHLOBFzYM4moG80HFgduVhTqAFez4alnZKEhP/bYHg0A==", + "requires": { + "@babel/helper-define-polyfill-provider": "^0.2.2", + "core-js-compat": "^3.9.1" + } + }, + "babel-plugin-polyfill-regenerator": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.2.tgz", + "integrity": "sha512-Goy5ghsc21HgPDFtzRkSirpZVW35meGoTmTOb2bxqdl60ghub4xOidgNTHaZfQ2FaxQsKmwvXtOAkcIS4SMBWg==", + "requires": { + "@babel/helper-define-polyfill-provider": "^0.2.2" + } + }, + "debug": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", + "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", + "requires": { + "ms": "2.1.2" + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" + } + } + }, "@babel/plugin-transform-shorthand-properties": { "version": "7.12.13", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.13.tgz", diff --git a/package.json b/package.json index fb5b3086d..c62c2eae6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "homebrewery", "description": "Create authentic looking D&D homebrews using only markdown", - "version": "2.11.2", + "version": "2.12.0", "engines": { "node": "14.15.x" }, @@ -35,12 +35,13 @@ }, "babel": { "presets": [ - "env", - "react" + "@babel/preset-env", + "@babel/preset-react" ] }, "dependencies": { "@babel/core": "^7.14.3", + "@babel/plugin-transform-runtime": "^7.14.5", "@babel/preset-env": "^7.14.4", "@babel/preset-react": "^7.13.13", "body-parser": "^1.19.0", diff --git a/scripts/buildHomebrew.js b/scripts/buildHomebrew.js index d4fa0e086..94afe801b 100644 --- a/scripts/buildHomebrew.js +++ b/scripts/buildHomebrew.js @@ -7,9 +7,13 @@ const isDev = !!process.argv.find((arg)=>arg=='--dev'); const lessTransform = require('vitreum/transforms/less.js'); const assetTransform = require('vitreum/transforms/asset.js'); -//const Meta = require('vitreum/headtags'); +const babel = require('@babel/core'); + +const babelify = async (code)=>(await babel.transformAsync(code, { presets: ['@babel/preset-env', '@babel/preset-react'], plugins: ['@babel/plugin-transform-runtime'] })).code; const transforms = { + '.js' : (code, filename, opts)=>babelify(code), + '.jsx' : (code, filename, opts)=>babelify(code), '.less' : lessTransform, '*' : assetTransform('./build') }; diff --git a/scripts/project.json b/scripts/project.json index 0dff24c6d..9bb6ef1ed 100644 --- a/scripts/project.json +++ b/scripts/project.json @@ -10,6 +10,7 @@ "classnames", "codemirror", "codemirror/mode/gfm/gfm.js", + "codemirror/mode/css/css.js", "codemirror/mode/javascript/javascript.js", "moment", "superagent", diff --git a/server.js b/server.js index b1415f130..de5b4ccd4 100644 --- a/server.js +++ b/server.js @@ -9,6 +9,7 @@ const GoogleActions = require('./server/googleActions.js'); const serveCompressedStaticAssets = require('./server/static-assets.mv.js'); const sanitizeFilename = require('sanitize-filename'); const asyncHandler = require('express-async-handler'); +const dedent = require('dedent-tabs').default; //Get the brew object from the HB database or Google Drive const getBrewFromId = asyncHandler(async (id, accessType)=>{ @@ -30,6 +31,14 @@ const getBrewFromId = asyncHandler(async (id, accessType)=>{ const index = brew.text.indexOf('```\n\n'); brew.style = brew.text.slice(7, index - 1); brew.text = brew.text.slice(index + 5); + } else { + brew.style = dedent` + /*=======--- Example CSS styling ---=======*/ + /* Any CSS here will apply to your document! */ + + .myExampleClass { + color: black; + }`; } return brew; }); @@ -208,7 +217,6 @@ app.use((req, res)=>{ templateFn('homebrew', title = req.brew ? req.brew.title : '', props) .then((page)=>{ res.send(page); }) .catch((err)=>{ - console.log('TEMPLATE ERROR'); console.log(err); return res.sendStatus(500); });