A simple Node app using the Wurd CMS client with Connect/Express middleware to enable switching edit mode on/off based on the questring.
When viewing the web page, add '?edit' to the end of the URL to turn on edit mode.
const app = require('express')();
const wurd = require('wurd');
//Use the returned middleware from wurd.connect()
app.use(wurd.connect('node-example', {
editMode: 'querystring'
}));
//Add route middleware to load the content and check the URL
//to enable/disable editing.
app.get('/', wurd.mw('shared,homepage'), async (req, res) => {
//The route middleware loads the content block onto the response object
const content = res.locals.wurd;
//Use shortcuts for cleaner HTML templates
const {text, el} = content;
//Use block() for creating smaller subsets of content
const footer = content.block('shared.footer');
//Only include the editor script if editMode is on
const editorWidget = content.editMode ? `<script src="https://edit-v3.wurd.io/widget.js" data-app="${content.app}"></script>` : '';
res.send(`
<html>
<head>
<!-- Use text() to get simple text content -->
<title>${text('shared.brandName')}</title>
</head>
<body>
<!-- Use el() to create editable text regions -->
<h1>${el('homepage.title')}</h1>
<h2>${el('homepage.welcome', {name: 'John'}, {markdown: true})}</h2>
<footer>
<a href="privacy">${footer.el('privacy')}</a>
<a href="terms">${footer.el('terms')}</a>
</footer>
${editorWidget}
</body>
</html>
`);
});
app.listen(3000);
no comments
sign in to comment