Add to /new page

client/homebrew/homebrew.jsx

@@ -69,7 +69,7 @@ const Homebrew = createClass({
 						<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
 						<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
 						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
-						<Route path='/new' element={<WithRoute el={NewPage}/>} />
+						<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='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
 						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />

client/homebrew/pages/editPage/editPage.jsx

@@ -159,7 +159,6 @@ const EditPage = createClass({
 				themeBundle : themeBundle
 			}));
 		});
-
 	},
 
 	trySave : function(immediate=false){
@@ -434,7 +433,6 @@ const EditPage = createClass({
 						themeBundle={this.state.themeBundle}
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
-						userThemes={this.props.userThemes}
 						currentEditorPage={this.state.currentEditorPage}
 						allowPrint={true}
 					/>

client/homebrew/pages/newPage/newPage.jsx

@@ -44,7 +44,8 @@ const NewPage = createClass({
 			saveGoogle        : (global.account && global.account.googleId ? true : false),
 			error             : null,
 			htmlErrors        : Markdown.validate(brew.text),
-			currentEditorPage : 0
+			currentEditorPage : 0,
+			themeBundle       : {}
 		};
 	},
 
@@ -77,6 +78,8 @@ const NewPage = createClass({
 			saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle)
 		});
 
+		this.fetchThemeBundle(this.props.brew.renderer, this.props.brew.theme);
+
 		localStorage.setItem(BREWKEY, brew.text);
 		if(brew.style)
 			localStorage.setItem(STYLEKEY, brew.style);
@@ -86,6 +89,17 @@ const NewPage = createClass({
 		document.removeEventListener('keydown', this.handleControlKeys);
 	},
 
+	// Loads the theme bundle and parses it out. Called when the iFrame is first mounted, and when a new theme is selected
+	fetchThemeBundle : function(renderer, theme) {
+		fetch(`${window.location.protocol}//${window.location.host}/theme/${renderer}/${theme}`).then((response)=>response.json()).then((themeBundle)=>{
+			themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n'); //DOMPurify.sanitize(joinedStyles, purifyConfig);
+			this.setState((prevState)=>({ // MOVE TO MOUNT STEP OF SHARE / NEW / EDIT
+				...prevState,
+				themeBundle : themeBundle
+			}));
+		});
+	},
+
 	handleControlKeys : function(e){
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const S_KEY = 83;
@@ -122,7 +136,10 @@ const NewPage = createClass({
 		localStorage.setItem(STYLEKEY, style);
 	},
 
-	handleMetaChange : function(metadata){
+	handleMetaChange : function(metadata, field=undefined){
+		if(field == 'theme')	// Fetch theme bundle only if theme was changed
+			this.fetchThemeBundle(metadata.renderer, metadata.theme);
+
 		this.setState((prevState)=>({
 			brew : { ...prevState.brew, ...metadata },
 		}), ()=>{
@@ -157,7 +174,7 @@ const NewPage = createClass({
 			.catch((err)=>{
 				this.setState({ isSaving: false, error: err });
 			});
-			if(!res) return;
+		if(!res) return;
 
 		brew = res.body;
 		localStorage.removeItem(BREWKEY);
@@ -217,9 +234,9 @@ const NewPage = createClass({
 						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}
-						userThemes={this.props.userThemes}
 						currentEditorPage={this.state.currentEditorPage}
 						allowPrint={true}
 					/>

client/homebrew/pages/sharePage/sharePage.jsx

@@ -19,13 +19,12 @@ const SharePage = createClass({
 	getDefaultProps : function() {
 		return {
 			brew : DEFAULT_BREW_LOAD,
-			themeBundle : {}
 		};
 	},
 
 	getInitialState : function() {
 		return {
-			themeBundle : this.props.themeBundle
+			themeBundle : {}
 		};
 	},
 

server/app.js

@@ -286,7 +286,7 @@ app.get('/edit/:id', asyncHandler(getBrew('edit')), asyncHandler(async(req, res,
 	return next();
 }));
 
-//New Page
+//New Page from ID
 app.get('/new/:id', asyncHandler(getBrew('share')), asyncHandler(async(req, res, next)=>{
 	sanitizeBrew(req.brew, 'share');
 	splitTextStyleAndMetadata(req.brew);
@@ -311,6 +311,18 @@ app.get('/new/:id', asyncHandler(getBrew('share')), asyncHandler(async(req, res,
 	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;