| modules_basic/about.jsView |
|---|
| 1 … | +var fs = require('fs') |
| 2 … | +var Path = require('path') |
| 1 | 3 … | var h = require('../h') |
| 4 … | +var when = require('@mmckegg/mutant/when') |
| 2 | 5 … | |
| 3 | 6 … | exports.needs = { |
| 4 | | - blob_url: 'first' |
| 7 … | + blob_url: 'first', |
| 8 … | + markdown: 'first' |
| 5 | 9 … | } |
| 6 | 10 … | |
| 7 | 11 … | exports.gives = { |
| 8 | 12 … | mcss: true, |
| 9 | 13 … | message_content: true |
| 10 | 14 … | } |
| 11 | 15 … | |
| 12 | | -var mcss = ` |
| 13 | | - About { |
| 14 | | - display: flex |
| 15 | | - flex-wrap: wrap |
| 16 | | - |
| 17 | | - header { |
| 18 | | - margin-right: .4rem |
| 19 | | - } |
| 20 | | - } |
| 21 | | -` |
| 22 | | - |
| 23 | 16 … | exports.create = function (api) { |
| 24 | | - return { |
| 17 … | + return { |
| 25 | 18 … | message_content, |
| 26 | | - mcss: function () { return mcss } |
| 19 … | + mcss: () => fs.readFileSync(Path.join(__dirname, 'about.mcss'), 'utf8') |
| 27 | 20 … | } |
| 28 | 21 … | |
| 29 | 22 … | function message_content (msg) { |
| 30 | | - if(msg.value.content.type !== 'about') return |
| 23 … | + if (msg.value.content.type !== 'about') return |
| 31 | 24 … | |
| 32 | | - var { value } = msg |
| 33 | | - var { content: about, author: authorId } = value |
| 25 … | + var { content: about, author: authorId } = msg.value |
| 34 | 26 … | var { about: aboutId, name, image, description } = about |
| 35 | 27 … | |
| 36 | 28 … | |
| 37 | 29 … | |
| 38 | 30 … | return h('About', [ |
| 39 | | - verb({ aboutId, authorId: msg.value.author }), |
| 40 | | - profile({ aboutId, name, image, description }) |
| 31 … | + Name({ aboutId, authorId, name }), |
| 32 … | + Image({ aboutId, authorId, image }), |
| 33 … | + Description({ aboutId, authorId, description }) |
| 41 | 34 … | ]) |
| 42 | 35 … | } |
| 43 | 36 … | |
| 44 | | - function profile ({ aboutId, name, image, description }) { |
| 45 | | - return h('div', [ |
| 46 | | - name |
| 47 | | - ? h('a', {href:'#'+aboutId}, name) |
| 48 | | - : null, |
| 49 | | - image |
| 50 | | - ? h('a', {href:'#'+aboutId}, h('img.avatar--fullsize', {src: api.blob_url(image)})) |
| 51 | | - : null, |
| 52 | | - description || null |
| 37 … | + function Name ({ aboutId, authorId, name }) { |
| 38 … | + if (!name) return null |
| 39 … | + return h('section -name', [ |
| 40 … | + h('header', ['refers to ', when(authorId === aboutId, 'self', targetLink(aboutId)), ' as ']), |
| 41 … | + h('section', nameLink(aboutId, name)) |
| 53 | 42 … | ]) |
| 54 | 43 … | } |
| 55 | | -} |
| 56 | 44 … | |
| 45 … | + function Image ({ aboutId, authorId, image }) { |
| 46 … | + if (!image) return null |
| 47 … | + return h('section -image', [ |
| 48 … | + h('header', ['portrays ', when(authorId === aboutId, 'self', targetLink(aboutId)), ' as ']), |
| 49 … | + h('section', imageLink(aboutId, h('img', { src: api.blob_url(image) }))) |
| 50 … | + ]) |
| 51 … | + } |
| 57 | 52 … | |
| 58 | | -function verb ({ aboutId, authorId }) { |
| 59 | | - var content = authorId === aboutId |
| 60 | | - ? 'self-identifies as' |
| 61 | | - : ['identifies ', idLink(aboutId), ' as'] |
| 53 … | + function Description ({ aboutId, authorId, description }) { |
| 54 … | + if (!description) return null |
| 55 … | + return h('section -description', [ |
| 56 … | + h('header', ['describes ', when(authorId === aboutId, 'self', targetLink(aboutId)), ' as ']), |
| 57 … | + h('section', api.markdown(description)) |
| 58 … | + ]) |
| 59 … | + } |
| 60 … | +} |
| 62 | 61 … | |
| 63 | | - return h('header', content) |
| 62 … | +function targetLink (aboutId) { |
| 63 … | + if (!aboutId) return null |
| 64 … | + const content = aboutId.slice(0, 9) + '...' |
| 65 … | + return h( |
| 66 … | + 'a -target', |
| 67 … | + { href: `#${aboutId}` }, |
| 68 … | + content |
| 69 … | + ) |
| 64 | 70 … | } |
| 65 | 71 … | |
| 66 | | -function idLink (id) { |
| 67 | | - if (!id) return null |
| 68 | | - |
| 69 | | - return h('a', {href:'#'+id}, id.slice(0,9) + '...') |
| 72 … | +function nameLink (aboutId, name) { |
| 73 … | + if (!aboutId) return null |
| 74 … | + return h( |
| 75 … | + 'a -name', |
| 76 … | + { href: `#${aboutId}` }, |
| 77 … | + name |
| 78 … | + ) |
| 70 | 79 … | } |
| 71 | 80 … | |
| 72 | | -function asLink (ln) { |
| 73 | | - return typeof ln === 'string' ? ln : ln.link |
| 81 … | +function imageLink (aboutId, img) { |
| 82 … | + if (!aboutId) return null |
| 83 … | + return h( |
| 84 … | + 'a -image', |
| 85 … | + { href: `#${aboutId}` }, |
| 86 … | + img |
| 87 … | + ) |
| 74 | 88 … | } |
| 75 | | - |