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

all-contributors · Oct 10, 2022 · 554667b · 554667b
1 parent fb8f89f
commit 554667b
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 27 deletions.
diff --git a/src/generate/__tests__/__snapshots__/index.js.snap b/src/generate/__tests__/__snapshots__/index.js.snap
@@ -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!"
+`;
diff --git a/src/generate/__tests__/index.js b/src/generate/__tests__/index.js
@@ -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()
+})
diff --git a/src/generate/index.js b/src/generate/index.js
@@ -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) {