adds trello boards support

README.md

@@ -30,6 +30,8 @@ Want support for more sites? Please [submit an issue](https://github.com/jonfrie
 |               | Profile           |
 |               | Company           |
 |               | Pulse Article     |
+| **Trello**    |                   |
+|               | Boards            |
 
 ## Installation
 

src/content/config.e2e.js

@@ -17,6 +17,7 @@ const test = base.extend({
 // Helper function to test a specific page configuration
 async function testPageConfig(page, url, config) {
 	await page.goto(url)
+	await page.waitForLoadState('domcontentloaded')
 
 	// Execute the getInfo function in the browser context
 	const info = await page.evaluate(config.getInfo)
@@ -57,6 +58,9 @@ for (const [siteName, siteConfig] of Object.entries(siteConfigs)) {
 				instagram: {
 					profile: 'https://www.instagram.com/jonfriesen/',
 				},
+				trello: {
+					board: 'https://trello.com/b/AwYSWOyt/ultimate-to-do-list',
+				},
 			}
 
 			const testUrl = testUrls[siteName][pageName]

src/content/config.js

@@ -206,6 +206,34 @@ const siteConfigs = {
 			},
 		},
 	},
+	trello: {
+		domain: 'trello.com',
+		prefix: '📋',
+		pages: {
+			board: {
+				urlPattern: /^https:\/\/trello\.com\/b\/[a-zA-Z0-9]+(?:\/[^\/]+)?$/,
+				buttonId: 'trello-board-copy-button',
+				getInfo: () => {
+					const boardName = document.querySelector('h1[data-testid="board-name-display"]').textContent.trim()
+					return { boardName }
+				},
+				buildMarkdown: (info, url) => `[${info.boardName}](${url})`,
+				buildPlaintext: (info, url) => `${info.boardName} - ${url}`,
+			},
+			// TODO: Add card support
+			// card: {
+			// 	urlPattern: /^https:\/\/trello\.com\/c\/[a-zA-Z0-9]+(?:\/[^\/]+)?$/,
+			// 	buttonId: 'trello-card-copy-button',
+			// 	getInfo: () => {
+			// 		const cardName = document.querySelector('h2#js-dialog-title').textContent.trim()
+			// 		const boardName = document.querySelector('h1[data-testid="board-name-display"]').textContent.trim()
+			// 		return { cardName, boardName }
+			// 	},
+			// 	buildMarkdown: (info, url) => `[${info.cardName}](${url}) (${info.boardName})`,
+			// 	buildPlaintext: (info, url) => `${info.cardName} (${info.boardName}) - ${url}`,
+			// },
+		},
+	},
 }
 
 export default siteConfigs

src/content/trello.test.js

@@ -0,0 +1,63 @@
+import siteConfigs from './config'
+
+describe('Trello URL pattern tests', () => {
+	const testCases = [
+		{ page: 'board', url: 'https://trello.com/b/F8vdp5Mo', shouldMatch: true },
+		{ page: 'board', url: 'https://trello.com/b/sZr0YugI/awesome-stuff', shouldMatch: true },
+		{ page: 'board', url: 'https://trello.com/c/abcdefgh', shouldMatch: false },
+		{ page: 'board', url: 'https://trello.com/b/F8vdp5Mo/subfolder/not-valid', shouldMatch: false },
+	]
+
+	test.each(testCases)('$page: $url should ${shouldMatch ? "match" : "not match"}', ({ page, url, shouldMatch }) => {
+		const pattern = siteConfigs.trello.pages[page].urlPattern
+		if (shouldMatch) {
+			expect(url).toMatch(pattern)
+		} else {
+			expect(url).not.toMatch(pattern)
+		}
+	})
+})
+
+describe('Trello markdown generator tests', () => {
+	const markdownTestCases = [
+		{
+			page: 'board',
+			info: { boardName: 'Project Roadmap' },
+			url: 'https://trello.com/b/F8vdp5Mo',
+			expected: '[Project Roadmap](https://trello.com/b/F8vdp5Mo)',
+		},
+		{
+			page: 'board',
+			info: { boardName: 'Team Tasks' },
+			url: 'https://trello.com/b/sZr0YugI/team-tasks',
+			expected: '[Team Tasks](https://trello.com/b/sZr0YugI/team-tasks)',
+		},
+	]
+
+	test.each(markdownTestCases)('$page: should generate correct markdown', ({ page, info, url, expected }) => {
+		const buildMarkdown = siteConfigs.trello.pages[page].buildMarkdown
+		expect(buildMarkdown(info, url)).toBe(expected)
+	})
+})
+
+describe('Trello plaintext generator tests', () => {
+	const plaintextTestCases = [
+		{
+			page: 'board',
+			info: { boardName: 'Project Roadmap' },
+			url: 'https://trello.com/b/F8vdp5Mo',
+			expected: 'Project Roadmap - https://trello.com/b/F8vdp5Mo',
+		},
+		{
+			page: 'board',
+			info: { boardName: 'Team Tasks' },
+			url: 'https://trello.com/b/sZr0YugI/team-tasks',
+			expected: 'Team Tasks - https://trello.com/b/sZr0YugI/team-tasks',
+		},
+	]
+
+	test.each(plaintextTestCases)('$page: should generate correct plaintext', ({ page, info, url, expected }) => {
+		const buildPlaintext = siteConfigs.trello.pages[page].buildPlaintext
+		expect(buildPlaintext(info, url)).toBe(expected)
+	})
+})

src/manifest.json

@@ -15,7 +15,8 @@
   "host_permissions": [
     "https://github.com/*",
     "https://www.instagram.com/*",
-    "https://www.linkedin.com/*"
+    "https://www.linkedin.com/*",
+    "https://trello.com/*"
   ],
   "action": {
     "default_popup": "src/popup/popup.html",
@@ -39,7 +40,8 @@
       "matches": [
         "https://github.com/*",
         "https://www.instagram.com/*",
-        "https://www.linkedin.com/*"
+        "https://www.linkedin.com/*",
+        "https://trello.com/*"
       ],
       "js": [
         "src/content/content.js"
@@ -54,7 +56,8 @@
       "matches": [
         "https://github.com/*",
         "https://www.instagram.com/*",
-        "https://www.linkedin.com/*"
+        "https://www.linkedin.com/*",
+        "https://trello.com/*"
       ]
     }
   ]

web/src/components/Intro.jsx

@@ -142,6 +142,14 @@ export function Intro() {
 						Instagram - <span className="text-xs text-gray-400">Profiles</span>
 					</span>
 				</li>
+				<li className="flex items-start">
+					<svg className="mr-2 mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+					</svg>
+					<span>
+						Trello - <span className="text-xs text-gray-400">Boards, (Cards coming soon!)</span>
+					</span>
+				</li>
 			</ul>
 			<p className="mt-4 text-xs text-gray-400">
 				I&apos;d like to continue to improve and expand our site catalog. If you have suggestions for new sites to support or encounter any bugs, please let us know using the form