0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-05-07 16:38:38 +00:00

I feel like there is a cleaner way to handle this, but this embeds as desired and it doesn't blink

This commit is contained in:
David Bolack
2026-03-28 15:24:49 -05:00
parent 8ad208600d
commit e61556e43b
6 changed files with 4 additions and 267 deletions
@@ -340,15 +340,15 @@ const BrewRenderer = (props)=>{
const brewRenderDivWrapper = (
<>
<div id='BrewRenderer'
<div id='BrewRendererFlat'
style={{ width: '100%', height: '100%', visibility: state.visibility }}
onLoad={frameDidMount}
>
{brewRenderFrameContents}
</div>
</>
);
if (!props.showToolbar && state.visibility != 'visible') { frameDidMount(); }
return (
<>
{/*render dummy page while iFrame is mounting.*/}
@@ -369,7 +369,7 @@ const BrewRenderer = (props)=>{
{props.showToolbar ? toolbarEl : ''}
{/*render in iFrame so broken code doesn't crash the site.*/}
{brewRenderDivWrapper}
{props.showToolbar ? brewRenderFrameWrapper:brewRenderDivWrapper}
{state.isMounted &&
<div id='brewRendered'></div>
}
+1 -2
View File
@@ -9,7 +9,6 @@ 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';
@@ -72,7 +71,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={EmbedPage} brew={brew} share={false} />} />
<Route path='/embed/:id' element={<WithRoute el={SharePage} 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} />} />
@@ -1,124 +0,0 @@
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;
@@ -1,7 +0,0 @@
.sharePage {
nav .navSection.titleSection {
flex-grow : 1;
justify-content : center;
}
.content { overflow-y : hidden; }
}
@@ -1,124 +0,0 @@
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;
@@ -1,7 +0,0 @@
.sharePage {
nav .navSection.titleSection {
flex-grow : 1;
justify-content : center;
}
.content { overflow-y : hidden; }
}