f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-04 12:32:39 +00:00
Code Wiki Activity

jsx files

Browse Source
This commit is contained in:
Víctor Losada Hernández
2025-03-18 19:47:49 +01:00
parent f076e05f49
commit 8e37806791
10 changed files with 150 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -189,14 +189,14 @@ const BrewRenderer = (props)=>{
const injectedTags = firstLineTokens.find((obj)=>obj.injectedTags !== undefined)?.injectedTags; const injectedTags = firstLineTokens.find((obj)=>obj.injectedTags !== undefined)?.injectedTags;
if(injectedTags) { if(injectedTags) {
styles = { ...styles, ...injectedTags.styles }; styles = { ...styles, ...injectedTags.styles };
styles = _.mapKeys(styles, (v, k) => k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React styles = _.mapKeys(styles, (v, k)=>k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React
classes = [classes, injectedTags.classes].join(' ').trim(); classes = [classes, injectedTags.classes].join(' ').trim();
attributes = injectedTags.attributes; attributes = injectedTags.attributes;
} }
pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line
} }
let html = Markdown.render(pageText, index); const html = Markdown.render(pageText, index);
return <BrewPage className={classes} index={index} key={index} contents={html} style={styles} attributes={attributes} onVisibilityChange={handlePageVisibilityChange} />; return <BrewPage className={classes} index={index} key={index} contents={html} style={styles} attributes={attributes} onVisibilityChange={handlePageVisibilityChange} />;
} }

16
client/homebrew/brewRenderer/headerNav/headerNav.jsx
View File

@@ -25,7 +25,7 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
'.toc' : ()=>{ return 'Table of Contents'; }, '.toc' : ()=>{ return 'Table of Contents'; },
}; };
const getHeaderContent = el => el.querySelector('h1')?.textContent; const getHeaderContent = (el)=>el.querySelector('h1')?.textContent;
const topLevelPageSelector = Object.keys(topLevelPages).join(','); const topLevelPageSelector = Object.keys(topLevelPages).join(',');
@@ -52,25 +52,23 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
depth : 7, // All unmatched elements with IDs are set to the maximum depth (7) depth : 7, // All unmatched elements with IDs are set to the maximum depth (7)
text : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto' text : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
link : el.id link : el.id
} };
if(el.classList.contains('page')) { if(el.classList.contains('page')) {
let text = `Page ${el.id.slice(1)}`; // Get the page # by trimming off the 'p' from the ID let text = `Page ${el.id.slice(1)}`; // Get the page # by trimming off the 'p' from the ID
const pageType = Object.keys(topLevelPages).find(pageType => el.querySelector(pageType)); const pageType = Object.keys(topLevelPages).find((pageType)=>el.querySelector(pageType));
if (pageType) if(pageType)
text += ` - ${topLevelPages[pageType](el, pageType)}` // If a Top Level Page, add extra label text += ` - ${topLevelPages[pageType](el, pageType)}`; // If a Top Level Page, add extra label
navEntry.depth = 0; // Pages are always at the least indented level navEntry.depth = 0; // Pages are always at the least indented level
navEntry.text = text; navEntry.text = text;
navEntry.className = 'pageLink'; navEntry.className = 'pageLink';
} } else if(el.localName.match(/^h[1-6]/)){ // Header elements H1 through H6
else if(el.localName.match(/^h[1-6]/)){ // Header elements H1 through H6
navEntry.depth = el.localName[1]; // Depth is set by the header level navEntry.depth = el.localName[1]; // Depth is set by the header level
} }
navList.push(navEntry); navList.push(navEntry);
}); });
return _.map(navList, (navItem, index)=> return _.map(navList, (navItem, index)=><HeaderNavItem {...navItem} key={index} />
<HeaderNavItem {...navItem} key={index} />
); );
}; };

1
client/homebrew/editor/metadataEditor/metadataEditor.jsx
View File

@@ -4,7 +4,6 @@ const React = require('react');
const createClass = require('create-react-class'); const createClass = require('create-react-class');
const _ = require('lodash'); const _ = require('lodash');
import request from '../../utils/request-middleware.js'; import request from '../../utils/request-middleware.js';
const Nav = require('naturalcrit/nav/nav.jsx');
const Combobox = require('client/components/combobox.jsx'); const Combobox = require('client/components/combobox.jsx');
const TagInput = require('../tagInput/tagInput.jsx'); const TagInput = require('../tagInput/tagInput.jsx');

96
client/homebrew/editor/snippetbar/snippetbar.jsx
View File

@@ -207,59 +207,59 @@ const Snippetbar = createClass({
renderEditorButtons : function(){ renderEditorButtons : function(){
if(!this.props.showEditButtons) return; if(!this.props.showEditButtons) return;
return ( return (
<div className='editors'> <div className='editors'>
{this.props.view !== 'meta' && <><div className='historyTools'> {this.props.view !== 'meta' && <><div className='historyTools'>
<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`} <div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
onClick={this.toggleHistoryMenu} > onClick={this.toggleHistoryMenu} >
<i className='fas fa-clock-rotate-left' /> <i className='fas fa-clock-rotate-left' />
{ this.state.showHistory && this.renderHistoryItems() } { this.state.showHistory && this.renderHistoryItems() }
</div>
<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
onClick={this.props.undo} >
<i className='fas fa-undo' />
</div>
<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
onClick={this.props.redo} >
<i className='fas fa-redo' />
</div>
</div> </div>
<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`} <div className='codeTools'>
onClick={this.props.undo} > <div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
<i className='fas fa-undo' /> onClick={this.props.foldCode} >
</div> <i className='fas fa-compress-alt' />
<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`} </div>
onClick={this.props.redo} > <div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
<i className='fas fa-redo' /> onClick={this.props.unfoldCode} >
</div> <i className='fas fa-expand-alt' />
</div> </div>
<div className='codeTools'> <div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`} onClick={this.toggleThemeSelector} >
onClick={this.props.foldCode} > <i className='fas fa-palette' />
<i className='fas fa-compress-alt' /> {this.state.themeSelector && this.renderThemeSelector()}
</div> </div>
<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`} </div></>}
onClick={this.props.unfoldCode} >
<i className='fas fa-expand-alt' />
</div>
<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
onClick={this.toggleThemeSelector} >
<i className='fas fa-palette' />
{this.state.themeSelector && this.renderThemeSelector()}
</div>
</div></>}
<div className='tabs'>
<div className={cx('text', { selected: this.props.view === 'text' })}
onClick={()=>this.props.onViewChange('text')}>
<i className='fa fa-beer' />
</div>
<div className={cx('style', { selected: this.props.view === 'style' })}
onClick={()=>this.props.onViewChange('style')}>
<i className='fa fa-paint-brush' />
</div>
<div className={cx('meta', { selected: this.props.view === 'meta' })}
onClick={()=>this.props.onViewChange('meta')}>
<i className='fas fa-info-circle' />
</div>
</div>
</div> <div className='tabs'>
) <div className={cx('text', { selected: this.props.view === 'text' })}
onClick={()=>this.props.onViewChange('text')}>
<i className='fa fa-beer' />
</div>
<div className={cx('style', { selected: this.props.view === 'style' })}
onClick={()=>this.props.onViewChange('style')}>
<i className='fa fa-paint-brush' />
</div>
<div className={cx('meta', { selected: this.props.view === 'meta' })}
onClick={()=>this.props.onViewChange('meta')}>
<i className='fas fa-info-circle' />
</div>
</div>
</div>
);
}, },
render : function(){ render : function(){

54
client/homebrew/editor/tagInput/tagInput.jsx
View File

@@ -3,43 +3,43 @@ const React = require('react');
const { useState, useEffect } = React; const { useState, useEffect } = React;
const _ = require('lodash'); const _ = require('lodash');
const TagInput = ({ unique = true, values = [], ...props }) => { const TagInput = ({ unique = true, values = [], ...props })=>{
const [tempInputText, setTempInputText] = useState(''); const [tempInputText, setTempInputText] = useState('');
const [tagList, setTagList] = useState(values.map((value) => ({ value, editing: false }))); const [tagList, setTagList] = useState(values.map((value)=>({ value, editing: false })));
useEffect(()=>{ useEffect(()=>{
handleChange(tagList.map((context)=>context.value)) handleChange(tagList.map((context)=>context.value));
}, [tagList]) }, [tagList]);
const handleChange = (value)=>{ const handleChange = (value)=>{
props.onChange({ props.onChange({
target : { value } target : { value }
}) });
}; };
const handleInputKeyDown = ({ evt, value, index, options = {} }) => { const handleInputKeyDown = ({ evt, value, index, options = {} })=>{
if (_.includes(['Enter', ','], evt.key)) { if(_.includes(['Enter', ','], evt.key)) {
evt.preventDefault(); evt.preventDefault();
submitTag(evt.target.value, value, index); submitTag(evt.target.value, value, index);
if (options.clear) { if(options.clear) {
setTempInputText(''); setTempInputText('');
} }
} }
}; };
const submitTag = (newValue, originalValue, index) => { const submitTag = (newValue, originalValue, index)=>{
setTagList((prevContext) => { setTagList((prevContext)=>{
// remove existing tag // remove existing tag
if(newValue === null){ if(newValue === null){
return [...prevContext].filter((context, i)=>i !== index); return [...prevContext].filter((context, i)=>i !== index);
} }
// add new tag // add new tag
if(originalValue === null){ if(originalValue === null){
return [...prevContext, { value: newValue, editing: false }] return [...prevContext, { value: newValue, editing: false }];
} }
// update existing tag // update existing tag
return prevContext.map((context, i) => { return prevContext.map((context, i)=>{
if (i === index) { if(i === index) {
return { ...context, value: newValue, editing: false }; return { ...context, value: newValue, editing: false };
} }
return context; return context;
@@ -47,10 +47,10 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
}); });
}; };
const editTag = (index) => { const editTag = (index)=>{
setTagList((prevContext) => { setTagList((prevContext)=>{
return prevContext.map((context, i) => { return prevContext.map((context, i)=>{
if (i === index) { if(i === index) {
return { ...context, editing: true }; return { ...context, editing: true };
} }
return { ...context, editing: false }; return { ...context, editing: false };
@@ -58,25 +58,25 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
}); });
}; };
const renderReadTag = (context, index) => { const renderReadTag = (context, index)=>{
return ( return (
<li key={index} <li key={index}
data-value={context.value} data-value={context.value}
className='tag' className='tag'
onClick={() => editTag(index)}> onClick={()=>editTag(index)}>
{context.value} {context.value}
<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index)}}><i className='fa fa-times fa-fw'/></button> <button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index);}}><i className='fa fa-times fa-fw'/></button>
</li> </li>
); );
}; };
const renderWriteTag = (context, index) => { const renderWriteTag = (context, index)=>{
return ( return (
<input type='text' <input type='text'
key={index} key={index}
defaultValue={context.value} defaultValue={context.value}
onKeyDown={(evt) => handleInputKeyDown({evt, value: context.value, index: index})} onKeyDown={(evt)=>handleInputKeyDown({ evt, value: context.value, index: index })}
autoFocus autoFocus
/> />
); );
}; };
@@ -86,7 +86,7 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
<label>{props.label}</label> <label>{props.label}</label>
<div className='value'> <div className='value'>
<ul className='list'> <ul className='list'>
{tagList.map((context, index) => { return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })} {tagList.map((context, index)=>{ return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
</ul> </ul>
<input <input
@@ -94,8 +94,8 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
className='value' className='value'
placeholder={props.placeholder} placeholder={props.placeholder}
value={tempInputText} value={tempInputText}
onChange={(e) => setTempInputText(e.target.value)} onChange={(e)=>setTempInputText(e.target.value)}
onKeyDown={(evt) => handleInputKeyDown({ evt, value: null, options: { clear: true } })} onKeyDown={(evt)=>handleInputKeyDown({ evt, value: null, options: { clear: true } })}
/> />
</div> </div>
</div> </div>

6
client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
View File

@@ -30,11 +30,11 @@ const BrewItem = ({
} }
request.delete(`/api/${brew.googleId ?? ''}${brew.editId}`).send().end((err, res)=>{ request.delete(`/api/${brew.googleId ?? ''}${brew.editId}`).send().end((err, res)=>{
if (err) reportError(err); else window.location.reload(); if(err) reportError(err); else window.location.reload();
}); });
}, [brew, reportError]); }, [brew, reportError]);
const updateFilter = useCallback((type, term)=> updateListFilter(type, term), [updateListFilter]); const updateFilter = useCallback((type, term)=>updateListFilter(type, term), [updateListFilter]);
const renderDeleteBrewLink = ()=>{ const renderDeleteBrewLink = ()=>{
if(!brew.editId) return null; if(!brew.editId) return null;

52
client/homebrew/pages/homePage/homePage.jsx
View File

@@ -100,32 +100,32 @@ const HomePage = createClass({
return <div className='homePage sitePage'> return <div className='homePage sitePage'>
<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' /> <Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
{this.renderNavbar()} {this.renderNavbar()}
<div className="content"> <div className='content'>
<SplitPane onDragFinish={this.handleSplitMove}> <SplitPane onDragFinish={this.handleSplitMove}>
<Editor <Editor
ref={this.editor} ref={this.editor}
brew={this.state.brew} brew={this.state.brew}
onTextChange={this.handleTextChange} onTextChange={this.handleTextChange}
renderer={this.state.brew.renderer} renderer={this.state.brew.renderer}
showEditButtons={false} showEditButtons={false}
snippetBundle={this.state.themeBundle.snippets} snippetBundle={this.state.themeBundle.snippets}
onCursorPageChange={this.handleEditorCursorPageChange} onCursorPageChange={this.handleEditorCursorPageChange}
onViewPageChange={this.handleEditorViewPageChange} onViewPageChange={this.handleEditorViewPageChange}
currentEditorViewPageNum={this.state.currentEditorViewPageNum} currentEditorViewPageNum={this.state.currentEditorViewPageNum}
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum} currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum} currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
/> />
<BrewRenderer <BrewRenderer
text={this.state.brew.text} text={this.state.brew.text}
style={this.state.brew.style} style={this.state.brew.style}
renderer={this.state.brew.renderer} renderer={this.state.brew.renderer}
onPageChange={this.handleBrewRendererPageChange} onPageChange={this.handleBrewRendererPageChange}
currentEditorViewPageNum={this.state.currentEditorViewPageNum} currentEditorViewPageNum={this.state.currentEditorViewPageNum}
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum} currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum} currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
themeBundle={this.state.themeBundle} themeBundle={this.state.themeBundle}
/> />
</SplitPane> </SplitPane>
</div> </div>
<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}> <div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
Save current <i className='fas fa-save' /> Save current <i className='fas fa-save' />

66
client/homebrew/pages/newPage/newPage.jsx
View File

@@ -223,39 +223,39 @@ const NewPage = createClass({
render : function(){ render : function(){
return <div className='newPage sitePage'> return <div className='newPage sitePage'>
{this.renderNavbar()} {this.renderNavbar()}
<div className="content"> <div className='content'>
<SplitPane onDragFinish={this.handleSplitMove}> <SplitPane onDragFinish={this.handleSplitMove}>
<Editor <Editor
ref={this.editor} ref={this.editor}
brew={this.state.brew} brew={this.state.brew}
onTextChange={this.handleTextChange} onTextChange={this.handleTextChange}
onStyleChange={this.handleStyleChange} onStyleChange={this.handleStyleChange}
onMetaChange={this.handleMetaChange} onMetaChange={this.handleMetaChange}
renderer={this.state.brew.renderer} renderer={this.state.brew.renderer}
userThemes={this.props.userThemes} userThemes={this.props.userThemes}
themeBundle={this.state.themeBundle} themeBundle={this.state.themeBundle}
snippetBundle={this.state.themeBundle.snippets} snippetBundle={this.state.themeBundle.snippets}
onCursorPageChange={this.handleEditorCursorPageChange} onCursorPageChange={this.handleEditorCursorPageChange}
onViewPageChange={this.handleEditorViewPageChange} onViewPageChange={this.handleEditorViewPageChange}
currentEditorViewPageNum={this.state.currentEditorViewPageNum} currentEditorViewPageNum={this.state.currentEditorViewPageNum}
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum} currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum} currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
/> />
<BrewRenderer <BrewRenderer
text={this.state.brew.text} text={this.state.brew.text}
style={this.state.brew.style} style={this.state.brew.style}
renderer={this.state.brew.renderer} renderer={this.state.brew.renderer}
theme={this.state.brew.theme} theme={this.state.brew.theme}
themeBundle={this.state.themeBundle} themeBundle={this.state.themeBundle}
errors={this.state.htmlErrors} errors={this.state.htmlErrors}
lang={this.state.brew.lang} lang={this.state.brew.lang}
onPageChange={this.handleBrewRendererPageChange} onPageChange={this.handleBrewRendererPageChange}
currentEditorViewPageNum={this.state.currentEditorViewPageNum} currentEditorViewPageNum={this.state.currentEditorViewPageNum}
currentEditorCursorPageNum={this.state.currentEditorCursorPageNum} currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum} currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
allowPrint={true} allowPrint={true}
/> />
</SplitPane> </SplitPane>
</div> </div>
</div>; </div>;
} }

4
shared/naturalcrit/nav/nav.jsx
View File

@@ -12,8 +12,8 @@ const Nav = {
displayName : 'Nav.base', displayName : 'Nav.base',
render : function(){ render : function(){
return <nav> return <nav>
{this.props.children} {this.props.children}
</nav>; </nav>;
} }
}), }),
logo : function(){ logo : function(){

4
shared/naturalcrit/splitPane/splitPane.jsx
View File

@@ -29,8 +29,8 @@ const SplitPane = (props)=>{
const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x))); const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position //when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))); const handleResize = ()=>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
const handleUp =(e)=>{ const handleUp =(e)=>{
e.preventDefault(); e.preventDefault();
if(isDragging) { if(isDragging) {