From 87586f73fc5741070466d189dfab807a190753e5 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 31 Mar 2021 19:41:58 +0200 Subject: add potential to generate custom headers and custom pages --- README.md | 13 +++ cli/app/controllers/graph_controller.py | 6 ++ cli/app/site/export.py | 4 +- frontend/app/views/index/components/graph.form.js | 46 ++++++-- frontend/site/index.js | 2 +- frontend/site/viewer/viewer.container.js | 25 +++-- package.json | 2 + static/site.html | 20 ++-- webpack.config.site.js | 124 ++++++++++++---------- 9 files changed, 161 insertions(+), 81 deletions(-) diff --git a/README.md b/README.md index 9e8cca6..c1411c8 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,19 @@ yarn demo To programmatically create pages, modify `cli/commands/site/populate.py` +## Customizing builds + +If the functionality of the live site needs to change, make a new router and go from there. See `frontend/site/projects/museum/app.js` for an example. + +``` +# Building the museum site (development) +yarn build:museum:dev + +# Building the museum site (production) +yarn build:museum:production +rsync -rlptuvz ./exports/last-museum/ lens@garden:swimmer/data_store/exports/last-museum/ +``` + ## Deploying a site A hypothetical rsync command: diff --git a/cli/app/controllers/graph_controller.py b/cli/app/controllers/graph_controller.py index fcca50a..9169818 100644 --- a/cli/app/controllers/graph_controller.py +++ b/cli/app/controllers/graph_controller.py @@ -13,6 +13,12 @@ class GraphView(CrudView): model = Graph form = GraphForm + def on_create(self, session, form, item): + item.settings = form['settings'] + + def on_update(self, session, form, item): + item.settings = form['settings'] + def on_destroy(self, session, item): for item in item.pages: session.query(Tile).filter(Tile.page_id == item.id).delete(synchronize_session=False) diff --git a/cli/app/site/export.py b/cli/app/site/export.py index aa74165..4ddd01d 100644 --- a/cli/app/site/export.py +++ b/cli/app/site/export.py @@ -25,6 +25,7 @@ def export_site(opt_graph_path, opt_output_dir=app_cfg.DIR_EXPORTS, opt_build_js # load site index index_html = load_text(join(app_cfg.DIR_STATIC, 'site.html'), split=False) + index_html = index.html.replace('CUSTOM_HEADER', graph.settings.get('custom_header', '')) index_html = index_html.replace('SITE_PATH', '/' + graph.path) # write site JSON data @@ -44,7 +45,8 @@ def export_site(opt_graph_path, opt_output_dir=app_cfg.DIR_EXPORTS, opt_build_js print("Homepage not set! Shift-click a page on the graph to make it the homepage.") session.close() return - write_text(f'', join(graph_dir, 'index.html')) + # write_text(f'', join(graph_dir, 'index.html')) + write_index(graph=graph, page=None, index_html=index_html, fp_out=join(graph_dir, 'index.html')) index_path = "" for page in graph.pages: diff --git a/frontend/app/views/index/components/graph.form.js b/frontend/app/views/index/components/graph.form.js index 4b3a7af..5710beb 100644 --- a/frontend/app/views/index/components/graph.form.js +++ b/frontend/app/views/index/components/graph.form.js @@ -10,6 +10,9 @@ const newGraph = () => ({ title: '', username: session('username'), description: '', + settings: { + custom_header: "", + } }) export default class GraphForm extends Component { @@ -20,6 +23,14 @@ export default class GraphForm extends Component { errorFields: new Set([]), } + constructor(props){ + super(props) + this.handleChange = this.handleChange.bind(this) + this.handleSettingsChange = this.handleSettingsChange.bind(this) + this.handleSettingsSelect = this.handleSettingsSelect.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + componentDidMount() { const { data, isNew } = this.props const title = isNew ? 'new project' : 'editing ' + data.title @@ -54,6 +65,23 @@ export default class GraphForm extends Component { }) } + handleSettingsChange(e) { + const { name, value } = e.target + this.handleSettingsSelect(name, value) + } + + handleSettingsSelect(name, value) { + this.setState({ + data: { + ...this.state.data, + settings: { + ...this.state.data.settings, + [name]: value, + } + } + }) + } + handleSelect(name, value) { const { errorFields } = this.state if (errorFields.has(name)) { @@ -73,7 +101,7 @@ export default class GraphForm extends Component { const { isNew, onSubmit } = this.props const { data } = this.state const requiredKeys = "title username path description".split(" ") - const validKeys = "title username path description".split(" ") + const validKeys = "title username path description settings".split(" ") const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {}) const errorFields = requiredKeys.filter(key => !validData[key]) if (errorFields.length) { @@ -104,7 +132,7 @@ export default class GraphForm extends Component { required data={data} error={errorFields.has('path')} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> @@ -118,7 +146,7 @@ export default class GraphForm extends Component { required data={data} error={errorFields.has('title')} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" />