Last active
August 29, 2015 14:15
-
-
Save adieuadieu/91b099bc87ec3d1c5e37 to your computer and use it in GitHub Desktop.
fancy pancy DOM interpolator (test)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var glob = require('glob') | |
| , fs = require('fs') | |
| , cheerio = require('cheerio') | |
| , _ = require('lodash') | |
| , contentful = require('contentful') | |
| , htmlFilePath = './page.html' | |
| , htmlFile = fs.readFileSync(htmlFilePath); | |
| ; | |
| /* | |
| var partials = glob.sync('./partials/*.html') | |
| partials.forEach(function(partial) { | |
| $ = cheerio.load(partial); | |
| }); | |
| */ | |
| var contentfulClient = contentful.createClient({ | |
| accessToken: 'dd007e3a0cc8574666944d08c9859a60b5122cc9ac9e0d98ebe5488cc2ab4828', | |
| host: 'preview.contentful.com', | |
| space: '8fh5q3lc24r7' | |
| }); | |
| var assets = { | |
| 'main-menu': ['Main Item 1', 'Main Item 2', 'Main Item 3'] | |
| , 'footer-menu': [ {url: '/', title: 'Item 1'}, {url: '/something', title: 'Item 2'}, {url: '/else', title: 'Item 3'} ] | |
| /*, article: { | |
| title: 'Badass Title' | |
| , content: 'This is some content. This article is sweeeeeeeeet. Super sweeeeet. yea.' | |
| }*/ | |
| }; | |
| contentfulClient.entries().then( | |
| function(entries) { | |
| //console.log(entries); | |
| assets.article = entries[0].fields; | |
| renderPage(htmlFile, assets); | |
| } | |
| , console.log | |
| ); | |
| function renderPage(html, content) { | |
| $ = cheerio.load(html); | |
| $('sb-asset').each(function(i, assetNode) { | |
| var assetName = $(assetNode).attr('name') | |
| , assetNodeInnerHtml = $(assetNode).clone() | |
| , repeats = _.isArray(content[assetName]) ? content[assetName].length : 1 | |
| ; | |
| $(assetNode).empty(); | |
| for (var i = repeats - 1; i >= 0; i--) { | |
| var assetNodeChild = assetNodeInnerHtml.clone() | |
| , assetContent = _.isArray(content[assetName]) ? content[assetName][i] : content[assetName] | |
| ; | |
| $('sb-asset-text', assetNodeChild).each(function(index, el) { | |
| var assetTextName = $(el).attr('name') ? $(el).attr('name') : i; | |
| var innerContent = $(el).attr('name') ? assetContent[$(el).attr('name')] : assetContent | |
| console.log(assetName + ' - ' + assetTextName + ': ' + innerContent); | |
| $(el).replaceWith(innerContent); | |
| }); | |
| $(assetNode).prepend(assetNodeChild.html()); | |
| } | |
| $(assetNode).replaceWith($(assetNode).html()); | |
| }); | |
| fs.writeFileSync(htmlFilePath + '.rendered.html', $.html()); | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "dependencies": { | |
| "cheerio": "^0.18.0", | |
| "contentful": "^0.1.2", | |
| "glob": "^4.3.5", | |
| "lodash": "^3.1.0", | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title> | |
| <sb-asset name="article"> | |
| <sb-asset-text name="title" /> | |
| </sb-asset> | |
| </title> | |
| </head> | |
| <body> | |
| <header> | |
| <nav> | |
| <ul> | |
| <sb-asset name="main-menu"> | |
| <li><sb-asset-text>Menu item here</sb-asset-text></li> | |
| </sb-asset> | |
| </ul> | |
| </nav> | |
| </header> | |
| <article> | |
| <sb-asset name="article"> | |
| <h1><sb-asset-text name="title">Article Title</sb-asset-text></h1> | |
| <p><sb-asset-text name="content">Article content will be here. This can be as long as you want. OR, could be some lorem ipsum for preview mode. Oh yea.</sb-asset-text></p> | |
| </sb-asset> | |
| </article> | |
| <footer> | |
| <nav> | |
| <ul> | |
| <sb-asset name="footer-menu"> | |
| <li> | |
| <a href=""> | |
| <sb-asset-text name="title">Footer item here</sb-asset-test> | |
| </a> | |
| </li> | |
| </sb-asset> | |
| </ul> | |
| </nav> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment