feat: Add width and valign attributes for cleaner <td> (#344)

This commit is contained in:
QriLa | Hyeon Gu 2022-10-11 05:52:06 +09:00 committed by GitHub
parent fb8f89f1e4
commit 554667bfdd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 27 deletions

View file

@ -13,9 +13,9 @@ These people contributed to the project:
<table>
<tbody>
<tr>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Divjot Singh is awesome!</td>
<td align=\\"center\\">Jeroen Engels is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Divjot Singh is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Jeroen Engels is awesome!</td>
</tr>
</tbody>
</table>
@ -41,9 +41,9 @@ These people contributed to the project:
<table>
<tbody>
<tr>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Divjot Singh is awesome!</td>
<td align=\\"center\\">Jeroen Engels is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Divjot Singh is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Jeroen Engels is awesome!</td>
</tr>
</tbody>
<tfoot>
@ -78,9 +78,9 @@ These people contributed to the project:
<table>
<tbody>
<tr>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Divjot Singh is awesome!</td>
<td align=\\"center\\">Jeroen Engels is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Divjot Singh is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Jeroen Engels is awesome!</td>
</tr>
</tbody>
</table>
@ -106,15 +106,15 @@ These people contributed to the project:
<table>
<tbody>
<tr>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
</tr>
<tr>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
</tr>
</tbody>
</table>
@ -140,15 +140,15 @@ These people contributed to the project:
<table>
<tbody>
<tr>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
</tr>
<tr>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"20%\\">Kent C. Dodds is awesome!</td>
</tr>
</tbody>
<tfoot>
@ -169,3 +169,31 @@ These people contributed to the project:
Thanks a lot everyone!"
`;
exports[`validate if cell width attribute is floored correctly 1`] = `
"# project
Description
## Contributors
These people contributed to the project:
<!-- ALL-CONTRIBUTORS-LIST:START -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tbody>
<tr>
<td align=\\"center\\" valign=\\"top\\" width=\\"14.28%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"14.28%\\">Kent C. Dodds is awesome!</td>
<td align=\\"center\\" valign=\\"top\\" width=\\"14.28%\\">Kent C. Dodds is awesome!</td>
</tr>
</tbody>
</table>
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
Thanks a lot everyone!"
`;

View file

@ -238,3 +238,18 @@ test('replace all-contributors badge if present', () => {
expect(result).toBe(expected)
})
test('validate if cell width attribute is floored correctly', () => {
const {kentcdodds} = contributors
const {options, content} = fixtures()
const contributorList = [
kentcdodds,
kentcdodds,
kentcdodds,
]
options.contributorsPerLine = 7
const result = generate(options, contributorList, content)
expect(result).toMatchSnapshot()
})

View file

@ -1,4 +1,5 @@
const _ = require('lodash/fp')
const floor = require('lodash/floor')
const formatBadge = require('./format-badge')
const formatContributor = require('./format-contributor')
@ -43,9 +44,12 @@ function injectListBetweenTags(newContent) {
}
}
function formatLine(contributors) {
return `<td align="center">${contributors.join(
'</td>\n <td align="center">',
function formatLine(options, contributors) {
const width = floor(_.divide(100)(options.contributorsPerLine), 2)
const attributes = `align="center" valign="top" width="${width}%"`
return `<td ${attributes}>${contributors.join(
`</td>\n <td ${attributes}>`,
)}</td>`
}
@ -74,7 +78,9 @@ function generateContributorsList(options, contributors) {
return formatContributor(options, contributor)
}),
_.chunk(options.contributorsPerLine),
_.map(formatLine),
_.map((currentLineContributors) => formatLine(
options, currentLineContributors
)),
_.join('\n </tr>\n <tr>\n '),
newContent => {
if (options.linkToUsage) {