Skip to content

Commit

Permalink
style(generate): changed generator to an HTML based one [WIP]
Browse files Browse the repository at this point in the history
I added and set the HTML generator for resolving #154 (which works when testing manually but doesn't
when running the cli in dev mode).

fix #154
  • Loading branch information
Berkmann18 committed Jan 29, 2019
1 parent 48fecd3 commit 2babe26
Show file tree
Hide file tree
Showing 8 changed files with 167 additions and 56 deletions.
22 changes: 15 additions & 7 deletions README.md

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@
"lint": "kcd-scripts lint",
"test": "kcd-scripts test",
"validate": "kcd-scripts validate",
"commit": "npx git-cz"
"commit": "git-cz",
"start": "./dist/cli.js",
"dev": "./src/cli.js"
},
"husky": {
"hooks": {
Expand Down
7 changes: 2 additions & 5 deletions src/generate/__tests__/__snapshots__/index.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ Description
These people contributed to the project:
<!-- ALL-CONTRIBUTORS-LIST:START -->
<!-- prettier-ignore -->
| Kent C. Dodds is awesome! | Divjot Singh is awesome! | Jeroen Engels is awesome! |
| :---: | :---: | :---: |
<style>#emoji-table, #emoji-table td { border: 1px solid #ccc; }</style><table id=\\"emoji-table\\" cellspacing=0 cellpadding=1><tr><td>Kent C. Dodds is awesome!</td><td>Divjot Singh is awesome!</td><td>Jeroen Engels is awesome!</td></tr></table>
<!-- ALL-CONTRIBUTORS-LIST:END -->
Thanks a lot everyone!"
Expand All @@ -25,9 +24,7 @@ Description
These people contributed to the project:
<!-- ALL-CONTRIBUTORS-LIST:START -->
<!-- prettier-ignore -->
| Kent C. Dodds is awesome! | Kent C. Dodds is awesome! | Kent C. Dodds is awesome! | Kent C. Dodds is awesome! | Kent C. Dodds is awesome! |
| :---: | :---: | :---: | :---: | :---: |
| Kent C. Dodds is awesome! | Kent C. Dodds is awesome! |
<style>#emoji-table, #emoji-table td { border: 1px solid #ccc; }</style><table id=\\"emoji-table\\" cellspacing=0 cellpadding=1><tr><td>Kent C. Dodds is awesome!</td><td>Kent C. Dodds is awesome!</td><td>Kent C. Dodds is awesome!</td><td>Kent C. Dodds is awesome!</td><td>Kent C. Dodds is awesome!</td></tr><tr><td>Kent C. Dodds is awesome!</td><td>Kent C. Dodds is awesome!</td></tr></table>
<!-- ALL-CONTRIBUTORS-LIST:END -->
Thanks a lot everyone!"
Expand Down
32 changes: 16 additions & 16 deletions src/generate/__tests__/format-contribution-type.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import formatContributionType from '../format-contribution-type'
import formatContributionType from '../format-contribution-type-html'
import contributors from './fixtures/contributors.json'

const fixtures = () => {
Expand All @@ -17,10 +17,10 @@ test('return corresponding symbol', () => {
const {options} = fixtures()

expect(formatContributionType(options, contributor, 'tool')).toBe(
'[🔧](#tool-kentcdodds "Tools")',
'<a href="#tool-kentcdodds" title="Tools">🔧</a>',
)
expect(formatContributionType(options, contributor, 'question')).toBe(
'[💬](#question-kentcdodds "Answering Questions")',
'<a href="#question-kentcdodds" title="Answering Questions">💬</a>',
)
})

Expand All @@ -31,21 +31,21 @@ test('return link to commits', () => {
'https://github.com/all-contributors/all-contributors-cli/commits?author=kentcdodds'

expect(formatContributionType(options, contributor, 'code')).toBe(
`[💻](${expectedLink} "Code")`,
`<a href="${expectedLink}" title="Code">💻</a>`,
)
expect(formatContributionType(options, contributor, 'doc')).toBe(
`[📖](${expectedLink} "Documentation")`,
`<a href="${expectedLink}" title="Documentation">📖</a>`,
)
expect(formatContributionType(options, contributor, 'test')).toBe(
`[⚠️](${expectedLink} "Tests")`,
`<a href="${expectedLink}" title="Tests">⚠️</a>`,
)
})

test('return link to issues', () => {
const contributor = contributors.kentcdodds
const {options} = fixtures()
const expected =
'[🐛](https://github.com/all-contributors/all-contributors-cli/issues?q=author%3Akentcdodds "Bug reports")'
'<a href="https://github.com/all-contributors/all-contributors-cli/issues?q=author%3Akentcdodds" title="Bug reports">🐛</a>'

expect(formatContributionType(options, contributor, 'bug')).toBe(expected)
})
Expand All @@ -59,7 +59,7 @@ test('make any symbol into a link if contribution is an object', () => {
}

expect(formatContributionType(options, contributor, contribution)).toBe(
'[🔧](www.foo.bar "Tools")',
'<a href="www.foo.bar" title="Tools">🔧</a>',
)
})

Expand All @@ -72,7 +72,7 @@ test('override url for given types', () => {
}

expect(formatContributionType(options, contributor, contribution)).toBe(
'[💻](www.foo.bar "Code")',
'<a href="www.foo.bar" title="Code">💻</a>',
)
})

Expand All @@ -84,14 +84,14 @@ test('be able to add types to the symbol list', () => {
}

expect(formatContributionType(options, contributor, 'cheerful')).toBe(
'[:smiley:](#cheerful-kentcdodds "")',
'<a href="#cheerful-kentcdodds" title="">:smiley:</a>',
)
expect(
formatContributionType(options, contributor, {
type: 'cheerful',
url: 'www.foo.bar',
}),
).toBe('[:smiley:](www.foo.bar "")')
).toBe('<a href="www.foo.bar" title="">:smiley:</a>')
})

test('be able to add types with template to the symbol list', () => {
Expand All @@ -105,7 +105,7 @@ test('be able to add types with template to the symbol list', () => {
}

expect(formatContributionType(options, contributor, 'web')).toBe(
'[:web:](www.kentcdodds.com "")',
'<a href="www.kentcdodds.com" title="">:web:</a>',
)
})

Expand All @@ -117,14 +117,14 @@ test('be able to override existing types', () => {
}

expect(formatContributionType(options, contributor, 'code')).toBe(
'[:smiley:](#code-kentcdodds "")',
'<a href="#code-kentcdodds" title="">:smiley:</a>',
)
expect(
formatContributionType(options, contributor, {
type: 'code',
url: 'www.foo.bar',
}),
).toBe('[:smiley:](www.foo.bar "")')
).toBe('<a href="www.foo.bar" title="">:smiley:</a>')
})

test('be able to override existing templates', () => {
Expand All @@ -138,14 +138,14 @@ test('be able to override existing templates', () => {
}

expect(formatContributionType(options, contributor, 'code')).toBe(
'[:web:](www.kentcdodds.com "")',
'<a href="www.kentcdodds.com" title="">:web:</a>',
)
expect(
formatContributionType(options, contributor, {
type: 'code',
url: 'www.foo.bar',
}),
).toBe('[:web:](www.foo.bar "")')
).toBe('<a href="www.foo.bar" title="">:web:</a>')
})

test('throw a helpful error on unknown type', () => {
Expand Down
12 changes: 6 additions & 6 deletions src/generate/__tests__/format-contributor.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import _ from 'lodash/fp'
import formatContributor from '../format-contributor'
import formatContributor from '../format-contributor-html'
import contributors from './fixtures/contributors.json'

function fixtures() {
Expand All @@ -20,7 +20,7 @@ test('format a simple contributor', () => {
const {options} = fixtures()

const expected =
'[<img src="https://avatars1.githubusercontent.com/u/1500684" width="150px;" alt="Kent C. Dodds"/><br /><sub><b>Kent C. Dodds</b></sub>](http://kentcdodds.com)<br />[👀](#review-kentcdodds "Reviewed Pull Requests")'
'<a href="http://kentcdodds.com"><img src="https://avatars1.githubusercontent.com/u/1500684" width="150px;" alt="Kent C. Dodds"/><br /><sub><b>Kent C. Dodds</b></sub></a><br /><a href="#review-kentcdodds" title="Reviewed Pull Requests">👀</a>'

expect(formatContributor(options, contributor)).toBe(expected)
})
Expand All @@ -30,7 +30,7 @@ test('format contributor with complex contribution types', () => {
const {options} = fixtures()

const expected =
'[<img src="https://avatars1.githubusercontent.com/u/1500684" width="150px;" alt="Kent C. Dodds"/><br /><sub><b>Kent C. Dodds</b></sub>](http://kentcdodds.com)<br />[📖](https://github.com/all-contributors/all-contributors-cli/commits?author=kentcdodds "Documentation") [👀](#review-kentcdodds "Reviewed Pull Requests") [💬](#question-kentcdodds "Answering Questions")'
'<a href="http://kentcdodds.com"><img src="https://avatars1.githubusercontent.com/u/1500684" width="150px;" alt="Kent C. Dodds"/><br /><sub><b>Kent C. Dodds</b></sub></a><br /><a href="https://github.com/all-contributors/all-contributors-cli/commits?author=kentcdodds" title="Documentation">📖</a> <a href="#review-kentcdodds" title="Reviewed Pull Requests">👀</a> <a href="#question-kentcdodds" title="Answering Questions">💬</a>'

expect(formatContributor(options, contributor)).toBe(expected)
})
Expand All @@ -53,7 +53,7 @@ test('default image size to 100', () => {
delete options.imageSize

const expected =
'[<img src="https://avatars1.githubusercontent.com/u/1500684" width="100px;" alt="Kent C. Dodds"/><br /><sub><b>Kent C. Dodds</b></sub>](http://kentcdodds.com)<br />[👀](#review-kentcdodds "Reviewed Pull Requests")'
'<a href="http://kentcdodds.com"><img src="https://avatars1.githubusercontent.com/u/1500684" width="100px;" alt="Kent C. Dodds"/><br /><sub><b>Kent C. Dodds</b></sub></a><br /><a href="#review-kentcdodds" title="Reviewed Pull Requests">👀</a>'

expect(formatContributor(options, contributor)).toBe(expected)
})
Expand All @@ -63,7 +63,7 @@ test('format contributor with pipes in their name', () => {
const {options} = fixtures()

const expected =
'[<img src="https://avatars1.githubusercontent.com/u/1500684" width="150px;" alt="Who &#124; Needs &#124; Pipes?"/><br /><sub><b>Who &#124; Needs &#124; Pipes?</b></sub>](http://github.com/chrisinajar)<br />[📖](https://github.com/all-contributors/all-contributors-cli/commits?author=pipey "Documentation")'
'<a href="http://github.com/chrisinajar"><img src="https://avatars1.githubusercontent.com/u/1500684" width="150px;" alt="Who &#124; Needs &#124; Pipes?"/><br /><sub><b>Who &#124; Needs &#124; Pipes?</b></sub></a><br /><a href="https://github.com/all-contributors/all-contributors-cli/commits?author=pipey" title="Documentation">📖</a>'

expect(formatContributor(options, contributor)).toBe(expected)
})
Expand All @@ -73,7 +73,7 @@ test('format contributor with no github account', () => {
const {options} = fixtures()

const expected =
'<img src="https://avatars1.githubusercontent.com/u/1500684" width="150px;" alt="No Github Account"/><br /><sub><b>No Github Account</b></sub><br />[🌍](#translation "Translation")'
'<img src="https://avatars1.githubusercontent.com/u/1500684" width="150px;" alt="No Github Account"/><br /><sub><b>No Github Account</b></sub><br /><a href="#translation" title="Translation">🌍</a>'

expect(formatContributor(options, contributor)).toBe(expected)
})
52 changes: 52 additions & 0 deletions src/generate/format-contribution-type-html.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
const _ = require('lodash/fp')

const util = require('../util')

const linkTemplate = _.template(
'<a href="<%= url %>" title="<%= description %>"><%= symbol %></a>',
)

function getType(options, contribution) {
const types = util.contributionTypes(options)
return types[contribution.type || contribution]
}

module.exports = function formatContribution(
options,
contributor,
contribution,
) {
const type = getType(options, contribution)

if (!type) {
throw new Error(
`Unknown contribution type ${contribution} for contributor ${contributor.login ||
contributor.name}`,
)
}

const templateData = {
symbol: type.symbol,
description: type.description,
contributor,
options,
}

let url = getUrl(contribution, contributor)

if (contribution.url) {
url = contribution.url
} else if (type.link) {
url = _.template(type.link)(templateData)
}

return linkTemplate(_.assign({url}, templateData))
}

function getUrl(contribution, contributor) {
if (contributor.login) {
return `#${contribution}-${contributor.login}`
} else {
return `#${contribution}`
}
}
59 changes: 59 additions & 0 deletions src/generate/format-contributor-html.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
const _ = require('lodash/fp')
const formatContributionType = require('./format-contribution-type-html')

const avatarTemplate = _.template(
'<img src="<%= contributor.avatar_url %>" width="<%= options.imageSize %>px;" alt="<%= name %>"/>',
)
const avatarBlockTemplate = _.template(
'<a href="<%= contributor.profile %>"><%= avatar %><br /><sub><b><%= name %></b></sub></a>',
)
const avatarBlockTemplateNoProfile = _.template(
'<%= avatar %><br /><sub><b><%= name %></b></sub>',
)
const contributorTemplate = _.template(
'<%= avatarBlock %><br /><%= contributions %>',
)

const defaultImageSize = 100

function defaultTemplate(templateData) {
const name = escapeName(templateData.contributor.name)
const avatar = avatarTemplate(
_.assign(templateData, {
name,
}),
)
const avatarBlockTemplateData = _.assign(
{
name,
avatar,
},
templateData,
)
let avatarBlock = null

if (templateData.contributor.profile) {
avatarBlock = avatarBlockTemplate(avatarBlockTemplateData)
} else {
avatarBlock = avatarBlockTemplateNoProfile(avatarBlockTemplateData)
}

return contributorTemplate(_.assign({avatarBlock}, templateData))
}

function escapeName(name) {
return name.replace(new RegExp('\\|', 'g'), '&#124;')
}

module.exports = function formatContributor(options, contributor) {
const formatter = _.partial(formatContributionType, [options, contributor])
const contributions = contributor.contributions.map(formatter).join(' ')
const templateData = {
contributions,
contributor,
options: _.assign({imageSize: defaultImageSize}, options),
}
const customTemplate =
options.contributorTemplate && _.template(options.contributorTemplate)
return (customTemplate || defaultTemplate)(templateData)
}
35 changes: 14 additions & 21 deletions src/generate/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
const _ = require('lodash/fp')
const injectContentBetween = require('../util').markdown.injectContentBetween
const formatBadge = require('./format-badge')
const formatContributor = require('./format-contributor')
const formatContributor = require('./format-contributor-html')

const badgeRegex = /\[!\[All Contributors\]\([a-zA-Z0-9\-./_:?=]+\)\]\(#\w+\)/

Expand Down Expand Up @@ -36,29 +35,22 @@ function injectListBetweenTags(newContent) {
}
}

function formatLine(contributors) {
return `| ${contributors.join(' | ')} |`
function formatLineHtml(contributors) {
return `<td>${contributors.join('</td><td>')}</td>`
}

function createColumnLine(options, contributors) {
const nbColumns = Math.min(options.contributorsPerLine, contributors.length)
return `${_.repeat(nbColumns, '| :---: ')}|`
}

function generateContributorsList(options, contributors) {
function generateContributorsListHtml(options, contributors) {
return _.flow(
_.map(function formatEveryContributor(contributor) {
return formatContributor(options, contributor)
}),
_.chunk(options.contributorsPerLine),
_.map(formatLine),
function insertColumns(lines) {
const columnLine = createColumnLine(options, contributors)
return injectContentBetween(lines, columnLine, 1, 1)
},
_.join('\n'),
_.map(formatLineHtml),
_.join('</tr><tr>'),
newContent => {
return `\n${newContent}\n`
const style =
'<style>#emoji-table, #emoji-table td { border: 1px solid #ccc; }</style>'
return `\n${style}<table id="emoji-table" cellspacing=0 cellpadding=1><tr>${newContent}</tr></table>\n`
},
)(contributors)
}
Expand All @@ -81,9 +73,10 @@ module.exports = function generate(options, contributors, fileContent) {
const contributorsList =
contributors.length === 0
? '\n'
: generateContributorsList(options, contributors)
: generateContributorsListHtml(options, contributors)
const badge = formatBadge(options, contributors)
return _.flow(injectListBetweenTags(contributorsList), replaceBadge(badge))(
fileContent,
)
return _.flow(
injectListBetweenTags(contributorsList),
replaceBadge(badge),
)(fileContent)
}

0 comments on commit 2babe26

Please sign in to comment.