Skip to content

Instantly share code, notes, and snippets.

@balupton

balupton/style-01.js

Last active April 23, 2017 04:23
Show Gist options
  • Save balupton/c807a9be215723f0e849697097b99a50 to your computer and use it in GitHub Desktop.
Save balupton/c807a9be215723f0e849697097b99a50 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
style-01.js
// my initial code from https://github.com/bevry/outpatient/blob/455fd3a32791259931e0fa4e3b9b3b7d1dc26d8b/source/block.js#L55-L75
'use strict'
const h = require('hyperscript')
module.exports = function (opts = {}) {
// Prepare
const { document, content } = this
const {
permalink = document.url,
heading = document.title,
subheading = document.subheading,
author = document.author,
cssClasses = (document.cssClasses || []),
editUrl = document.editUrl,
date,
prev,
next,
up,
parents = []
} = opts
// Render
const classes = ['block'].concat(cssClasses)
return h('article', {
class: classes.join(' ')
}, [
h('header', {class: 'block-header'}, [
parents.length ? h('nav', { class: 'parentcrumbs' }, [
h('ul', parents.map((parent) => h('li', [
h('a', {
class: 'permalink',
href: parent.url
}, [
h('h3', parent.title)
])
])
))
]) : null,
permalink ? h('a', {
class: 'permalink hover-link',
href: permalink
}, [
h('h1', heading)
]) : h('h1', heading),
subheading ? h('h2', subheading) : '',
date ? h('span', { class: 'date' }, date) : '',
author ? h('a', {
class: 'author',
href: `/people/${author}`
}, author) : ''
]),
h('section', { class: 'block-content', innerHTML: content }),
h('footer', { class: 'block-footer' }, [
(prev || up || next) ? h('nav', { class: 'prev-next' }, [
prev ? h('a', {
class: 'prev',
href: prev.url
}, [
h('span', { class: 'icon' }),
h('span', { class: 'title' }, prev.title)
]) : '',
up ? h('a', {
class: 'up',
href: up.url
}, [
h('span', { class: 'icon' }),
h('span', { class: 'title' }, up.title)
]) : '',
next ? h('a', {
class: 'next',
href: next.url
}, [
h('span', { class: 'icon' }),
h('span', { class: 'title' }, next.title)
]) : ''
]) : ''
]),
editUrl ? h('aside', { class: 'block-edit' }, [
h('a', { href: editUrl }, 'Edit and improve this page!')
]) : ''
])
}
Raw
style-02.js
// single object argument: tag and children properties
'use strict'
const h = require('hyperscript')
module.exports = function (opts = {}) {
// Prepare
const { document, content } = this
const {
permalink = document.url,
heading = document.title,
subheading = document.subheading,
author = document.author,
cssClasses = (document.cssClasses || []),
editUrl = document.editUrl,
date,
prev,
next,
up,
parents = []
} = opts
// Render
const classes = ['block'].concat(cssClasses)
return h({
tag: 'article',
class: classes.join(' '),
children: [
h({
tag: 'header',
class: 'block-header',
children: [
(parents.length || null) && h({
tag: 'nav',
class: 'parentcrumbs',
children: h({
tag: 'ul',
children: parents.map((parent) => h({
tag: 'li',
children: h({
tag: 'a',
class: 'permalink',
href: parent.url,
children: h('h3', parent.title)
})
}))
})
}),
(permalink || h('h1', heading)) && h({
tag: 'a',
class: 'permalink hover-link',
href: permalink,
children: h('h1', heading)
}),
(subheading || null) && h('h2', subheading),
(date || null) && h({
tag: 'span',
class: 'date',
children: date
}),
(author || null) && h({
tag: 'a',
class: 'author',
href: `/people/${author}`,
children: author
})
]
}),
h({
tag: 'section',
class: 'block-content',
innerHTML: content
}),
h({
tag: 'footer',
class: 'block-footer',
children: ((prev || up || next) || null) && h({
tag: 'nav',
class: 'prev-next',
children: [
(prev || null) && h({
tag: 'a',
class: 'prev',
href: prev.url,
children: [
h('span.icon'),
h('span.title', prev.title)
]
}),
(up || null) && h({
tag: 'a',
class: 'up',
href: up.url,
children: [
h('span.icon'),
h('span.title', up.title)
]
}),
(next || null) && h({
tag: 'a',
class: 'next',
href: next.url,
children: [
h('span.icon'),
h('span.title', next.title)
]
})
]
})
}),
(editUrl || null) && h({
tag: 'aside',
class: 'block-edit',
children: [
h({
tag: 'a',
href: editUrl,
children: 'Edit and improve this page!'
})
]
})
]
})
}
Raw
style-03.js
// minimal with children accepting a single component
'use strict'
const h = require('hyperscript')
module.exports = function (opts = {}) {
// Prepare
const { document, content } = this
const {
permalink = document.url,
heading = document.title,
subheading = document.subheading,
author = document.author,
cssClasses = (document.cssClasses || []),
editUrl = document.editUrl,
date,
prev,
next,
up,
parents = []
} = opts
// Render
const classes = ['block'].concat(cssClasses)
return h('article', { class: classes.join(' ') }, [
h('header.block-header', [
(parents.length || null) && h('nav.parentcrumbs',
h('ul', parents.map((parent) =>
h('li',
h('a.permalink', { href: parent.url },
h('h3', parent.title)
)
)
))
),
(permalink || h('h1', heading)) && h('a.permalink.hover-link', { href: permalink }, h('h1', heading)),
(subheading || null) && h('h2', subheading),
(date || null) && h('span.date', date),
(author || null) && h('a.author', { href: `/people/${author}` }, author)
]),
h('section.block-content', { innerHTML: content }),
h('footer.block-footer', ((prev || up || next) || null) && h('nav.prev-next', [
(prev || null) && h('a.prev', { href: prev.url }, [
h('span.icon'),
h('span.title', prev.title)
]),
(up || null) && h('a.up', { href: up.url }, [
h('span.icon'),
h('span.title', up.title)
]),
(next || null) && h('a.next', { href: next.url }, [
h('span.icon'),
h('span.title', next.title)
])
])),
(editUrl || null) && h('aside.block-edit',
h('a', { href: editUrl }, 'Edit and improve this page!')
)
])
}
Raw
style-04.js
// minimal with multiple children arguments - eliminating need for manual children arrays
'use strict'
const h = require('hyperscript')
module.exports = function (opts = {}) {
// Prepare
const { document, content } = this
const {
permalink = document.url,
heading = document.title,
subheading = document.subheading,
author = document.author,
cssClasses = (document.cssClasses || []),
editUrl = document.editUrl,
date,
prev,
next,
up,
parents = []
} = opts
// Render
const classes = ['block'].concat(cssClasses)
return h('article', { class: classes.join(' ') },
h('header.block-header',
(parents.length || null) && h('nav.parentcrumbs',
h('ul', parents.map((parent) =>
h('li',
h('a.permalink', { href: parent.url },
h('h3', parent.title)
)
)
))
),
(permalink || h('h1', heading)) && h('a.permalink.hover-link', { href: permalink }, h('h1', heading)),
(subheading || null) && h('h2', subheading),
(date || null) && h('span.date', date),
(author || null) && h('a.author', { href: `/people/${author}` }, author)
),
h('section.block-content', { innerHTML: content }),
h('footer.block-footer', ((prev || up || next) || null) && h('nav.prev-next',
(prev || null) && h('a.prev', { href: prev.url },
h('span.icon'),
h('span.title', prev.title)
),
(up || null) && h('a.up', { href: up.url },
h('span.icon'),
h('span.title', up.title)
),
(next || null) && h('a.next', { href: next.url },
h('span.icon'),
h('span.title', next.title)
)
)),
(editUrl || null) && h('aside.block-edit',
h('a', { href: editUrl }, 'Edit and improve this page!')
)
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment