style(generate): changed generator to an HTML based one [WIP]

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
2025-01-09 13:36:29 +00:00 · 2019-01-29 15:46:36 +00:00 · 2019-01-29 15:46:36 +00:00 · 2babe26b08
commit 2babe26b08
parent 48fecd3ca7
8 changed files with 167 additions and 56 deletions
--- a/README.md
+++ b/README.md
--- a/package.json
+++ b/package.json
@ -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": {
--- a/src/generate/tests/snapshots/index.js.snap
+++ b/src/generate/tests/snapshots/index.js.snap
@ -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!"
@ -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!"
--- a/src/generate/tests/format-contribution-type.js
+++ b/src/generate/tests/format-contribution-type.js
@ -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 = () => {
@ -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>',
  )
 })

@ -31,13 +31,13 @@ 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>`,
  )
 })

@ -45,7 +45,7 @@ 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)
 })
@ -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>',
  )
 })

@ -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>',
  )
 })

@ -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', () => {
@ -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>',
  )
 })

@ -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', () => {
@ -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', () => {
--- a/src/generate/tests/format-contributor.js
+++ b/src/generate/tests/format-contributor.js
@ -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() {
@ -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)
 })
@ -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)
 })
@ -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)
 })
@ -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)
 })
@ -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)
 })
--- a/src/generate/format-contribution-type-html.js
+++ b/src/generate/format-contribution-type-html.js
@ -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}`
+  }
+}
--- a/src/generate/format-contributor-html.js
+++ b/src/generate/format-contributor-html.js
@ -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)
+}
--- a/src/generate/index.js
+++ b/src/generate/index.js
@ -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+\)/

@ -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)
 }
@ -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)
 }