Start adding new class

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -272,7 +272,7 @@ const BrewRenderer = (props)=>{
 
 	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
 		scrollToHash(window.location.hash);
-
+		console.log('Frame');
 		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
 			renderPages(); //Make sure page is renderable before showing
 			setState((prevState)=>({
@@ -326,6 +326,29 @@ const BrewRenderer = (props)=>{
 		</>
 	);
 
+	const brewRenderFrameWrapper = (
+		<>
+			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
+				style={{ width: '100%', height: '100%', visibility: state.visibility }}
+				contentDidMount={frameDidMount}
+				onClick={()=>{emitClick();}}
+			>
+				{brewRenderFrameContents}
+			</Frame>
+		</>
+	);
+
+	const brewRenderDivWrapper = (
+		<>
+			<div id='BrewRenderer'
+				style={{ width: '100%', height: '100%', visibility: state.visibility }}
+				onLoad={frameDidMount}
+			>
+				{brewRenderFrameContents}
+			</div>
+		</>
+	);
+
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
@@ -346,13 +369,7 @@ const BrewRenderer = (props)=>{
 			{props.showToolbar ? toolbarEl : ''}
 
 			{/*render in iFrame so broken code doesn't crash the site.*/}
-			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
+			{brewRenderDivWrapper}
-				style={{ width: '100%', height: '100%', visibility: state.visibility }}
-				contentDidMount={frameDidMount}
-				onClick={()=>{emitClick();}}
-			>
-				{brewRenderFrameContents}
-			</Frame>
 			{state.isMounted &&
 			  <div id='brewRendered'></div>
 			}

client/homebrew/homebrew.jsx

@@ -9,6 +9,7 @@ import HomePage    from './pages/homePage/homePage.jsx';
 import EditPage    from './pages/editPage/editPage.jsx';
 import UserPage    from './pages/userPage/userPage.jsx';
 import SharePage   from './pages/sharePage/sharePage.jsx';
+import EmbedPage   from './pages/embedPage/embedPage.jsx';
 import NewPage     from './pages/newPage/newPage.jsx';
 import ErrorPage   from './pages/errorPage/errorPage.jsx';
 import VaultPage   from './pages/vaultPage/vaultPage.jsx';
@@ -71,7 +72,7 @@ const Homebrew = (props)=>{
 				<Routes>
 					<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={brew} userThemes={userThemes}/>} />
 					<Route path='/share/:id' element={<WithRoute el={SharePage} brew={brew} share={true} />} />
-					<Route path='/embed/:id' element={<WithRoute el={SharePage} brew={brew} share={false} />} />
+					<Route path='/embed/:id' element={<WithRoute el={EmbedPage} brew={brew} share={false} />} />
 					<Route path='/new/:id' element={<WithRoute el={NewPage} brew={brew} userThemes={userThemes}/>} />
 					<Route path='/new' element={<WithRoute el={NewPage} userThemes={userThemes}/> } />
 					<Route path='/user/:username' element={<WithRoute el={UserPage} brews={brews} />} />

client/homebrew/pages/embedPage/embedPage.jsx

@@ -0,0 +1,124 @@
+import './embedPage.less';
+import React, { useState, useEffect, useCallback } from 'react';
+import Headtags   from '../../../../vitreum/headtags.js';
+const Meta = Headtags.Meta;
+
+import Nav from '@navbar/nav.jsx';
+import Navbar from '@navbar/navbar.jsx';
+import MetadataNav from '@navbar/metadata.navitem.jsx';
+import PrintNavItem from '@navbar/print.navitem.jsx';
+import RecentNavItems from '@navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
+import Account from '@navbar/account.navitem.jsx';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
+
+import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
+
+const SharePage = (props)=>{
+	const { brew = DEFAULT_BREW_LOAD, disableMeta = false, share = true } = props;
+
+	const [themeBundle,                setThemeBundle]                = useState({});
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+
+	const handleBrewRendererPageChange = useCallback((pageNumber)=>{
+		setCurrentBrewRendererPageNum(pageNumber);
+	}, []);
+
+	const handleControlKeys = (e)=>{
+		if(!(e.ctrlKey || e.metaKey)) return;
+		const P_KEY = 80;
+		if(e.keyCode === P_KEY) {
+			printCurrentBrew();
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	};
+
+	useEffect(()=>{
+		document.addEventListener('keydown', handleControlKeys);
+		fetchThemeBundle(undefined, setThemeBundle, brew.renderer, brew.theme);
+
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
+		};
+	}, []);
+
+	const processShareId = ()=>{
+		return brew.googleId && !brew.stubbed ? brew.googleId + brew.shareId : brew.shareId;
+	};
+
+	const renderEditLink = ()=>{
+		if(!brew.editId) return null;
+
+		const editLink = brew.googleId && ! brew.stubbed ? brew.googleId + brew.editId : brew.editId;
+
+		return (
+			<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
+				edit
+			</Nav.item>
+		);
+	};
+
+	const titleEl = (
+		<Nav.item className='brewTitle' style={disableMeta ? { cursor: 'default' } : {}}>
+			{brew.title}
+		</Nav.item>
+	);
+
+	const showNav = (
+		<Navbar>
+			<Nav.section className='titleSection'>
+				{disableMeta ? titleEl : <MetadataNav brew={brew}>{titleEl}</MetadataNav>}
+			</Nav.section>
+
+			<Nav.section>
+				{brew.shareId && (
+					<>
+						<PrintNavItem brew={brew}/>
+						<Nav.dropdown>
+							<Nav.item color='red' icon='fas fa-code'>
+								source
+							</Nav.item>
+							<Nav.item color='blue' icon='fas fa-eye' href={`/source/${processShareId()}`}>
+								view
+							</Nav.item>
+							{renderEditLink()}
+							<Nav.item color='blue' icon='fas fa-download' href={`/download/${processShareId()}`}>
+								download
+							</Nav.item>
+							<Nav.item color='blue' icon='fas fa-clone' href={`/new/${processShareId()}`}>
+								clone to new
+							</Nav.item>
+						</Nav.dropdown>
+					</>
+				)}
+				<RecentNavItem brew={brew} storageKey='view' />
+				<Account />
+			</Nav.section>
+		</Navbar>
+	);
+
+	return (
+		<div className='sharePage sitePage'>
+			<Meta name='robots' content='noindex, nofollow' />
+			{share ? showNav : ''}
+			<div className='content'>
+				<BrewRenderer
+					text={brew.text}
+					style={brew.style}
+					lang={brew.lang}
+					renderer={brew.renderer}
+					theme={brew.theme}
+					themeBundle={themeBundle}
+					onPageChange={handleBrewRendererPageChange}
+					currentBrewRendererPageNum={currentBrewRendererPageNum}
+					allowPrint={true}
+					showToolbar={share}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default SharePage;

client/homebrew/pages/embedPage/embedPage.less

@@ -0,0 +1,7 @@
+.sharePage {
+	nav .navSection.titleSection {
+		flex-grow       : 1;
+		justify-content : center;
+	}
+	.content { overflow-y : hidden; }
+}

client/homebrew/pages/embedPage/sharePage.jsx

@@ -0,0 +1,124 @@
+import './sharePage.less';
+import React, { useState, useEffect, useCallback } from 'react';
+import Headtags   from '../../../../vitreum/headtags.js';
+const Meta = Headtags.Meta;
+
+import Nav from '@navbar/nav.jsx';
+import Navbar from '@navbar/navbar.jsx';
+import MetadataNav from '@navbar/metadata.navitem.jsx';
+import PrintNavItem from '@navbar/print.navitem.jsx';
+import RecentNavItems from '@navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
+import Account from '@navbar/account.navitem.jsx';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
+
+import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
+
+const SharePage = (props)=>{
+	const { brew = DEFAULT_BREW_LOAD, disableMeta = false, share = true } = props;
+
+	const [themeBundle,                setThemeBundle]                = useState({});
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+
+	const handleBrewRendererPageChange = useCallback((pageNumber)=>{
+		setCurrentBrewRendererPageNum(pageNumber);
+	}, []);
+
+	const handleControlKeys = (e)=>{
+		if(!(e.ctrlKey || e.metaKey)) return;
+		const P_KEY = 80;
+		if(e.keyCode === P_KEY) {
+			printCurrentBrew();
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	};
+
+	useEffect(()=>{
+		document.addEventListener('keydown', handleControlKeys);
+		fetchThemeBundle(undefined, setThemeBundle, brew.renderer, brew.theme);
+
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
+		};
+	}, []);
+
+	const processShareId = ()=>{
+		return brew.googleId && !brew.stubbed ? brew.googleId + brew.shareId : brew.shareId;
+	};
+
+	const renderEditLink = ()=>{
+		if(!brew.editId) return null;
+
+		const editLink = brew.googleId && ! brew.stubbed ? brew.googleId + brew.editId : brew.editId;
+
+		return (
+			<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
+				edit
+			</Nav.item>
+		);
+	};
+
+	const titleEl = (
+		<Nav.item className='brewTitle' style={disableMeta ? { cursor: 'default' } : {}}>
+			{brew.title}
+		</Nav.item>
+	);
+
+	const showNav = (
+		<Navbar>
+			<Nav.section className='titleSection'>
+				{disableMeta ? titleEl : <MetadataNav brew={brew}>{titleEl}</MetadataNav>}
+			</Nav.section>
+
+			<Nav.section>
+				{brew.shareId && (
+					<>
+						<PrintNavItem brew={brew}/>
+						<Nav.dropdown>
+							<Nav.item color='red' icon='fas fa-code'>
+								source
+							</Nav.item>
+							<Nav.item color='blue' icon='fas fa-eye' href={`/source/${processShareId()}`}>
+								view
+							</Nav.item>
+							{renderEditLink()}
+							<Nav.item color='blue' icon='fas fa-download' href={`/download/${processShareId()}`}>
+								download
+							</Nav.item>
+							<Nav.item color='blue' icon='fas fa-clone' href={`/new/${processShareId()}`}>
+								clone to new
+							</Nav.item>
+						</Nav.dropdown>
+					</>
+				)}
+				<RecentNavItem brew={brew} storageKey='view' />
+				<Account />
+			</Nav.section>
+		</Navbar>
+	);
+
+	return (
+		<div className='sharePage sitePage'>
+			<Meta name='robots' content='noindex, nofollow' />
+			{share ? showNav : ''}
+			<div className='content'>
+				<BrewRenderer
+					text={brew.text}
+					style={brew.style}
+					lang={brew.lang}
+					renderer={brew.renderer}
+					theme={brew.theme}
+					themeBundle={themeBundle}
+					onPageChange={handleBrewRendererPageChange}
+					currentBrewRendererPageNum={currentBrewRendererPageNum}
+					allowPrint={true}
+					showToolbar={share}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default SharePage;

client/homebrew/pages/embedPage/sharePage.less

@@ -0,0 +1,7 @@
+.sharePage {
+	nav .navSection.titleSection {
+		flex-grow       : 1;
+		justify-content : center;
+	}
+	.content { overflow-y : hidden; }
+}

server/app.js

@@ -475,13 +475,13 @@ export default async function createApp(vite) {
 
 	//Share Page
 	app.get('/share/:id', dbCheck, asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
-		shareEmbedCommon(req,res);
+		await shareEmbedCommon(req,res);
 		return next();
 	}));
 
 	//Embed Page - More work will be done on this later...
 	app.get('/embed/:id', dbCheck, asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
-		shareEmbedCommon(req,res);
+		await shareEmbedCommon(req,res);
 		return next();
 	}));