|
| 1 | +import fs from 'fs/promises'; |
| 2 | +import path from 'path'; |
| 3 | +import he from 'he'; |
| 4 | + |
| 5 | +function renderPage(body) { |
| 6 | + return `<!DOCTYPE html> |
| 7 | +<html lang="en"> |
| 8 | +<head> |
| 9 | + <meta charset="UTF-8"> |
| 10 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| 11 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 12 | + <title>PostCSS Plugin Directory</title> |
| 13 | +
|
| 14 | + <link rel="stylesheet" href="./style.css"> |
| 15 | +</head> |
| 16 | +<body> |
| 17 | + <h1>PostCSS Plugin Directory</h1> |
| 18 | + <p>A directory of PostCSS plugins.<br>This list aims to only show plugins that you can use today.</p> |
| 19 | +
|
| 20 | + <h2>Criteria</h2> |
| 21 | + <ul> |
| 22 | + <li>published on npm</li> |
| 23 | + <li>postcss-plugin keyword in your <code>package.json</code></li> |
| 24 | + <li>a repository link in your <code>package.json</code></li> |
| 25 | + <li>valid peer dependency value for postcss</li> |
| 26 | + <li><a href="https://opensource.org/licenses/alphabetical">OSI approved license</a></li> |
| 27 | + <li>package version greater than 1.0.0</li> |
| 28 | + </ul> |
| 29 | +
|
| 30 | + <h2>Disclaimer</h2> |
| 31 | + <p> |
| 32 | + It is not possible to audit each plugin for security or interoperability issues.<br> |
| 33 | + It remains your responsibility to choose the best dependencies for your project. |
| 34 | + </p> |
| 35 | +
|
| 36 | + <hr> |
| 37 | +
|
| 38 | + <h2>Directory</h2> |
| 39 | +
|
| 40 | + ${body} |
| 41 | +</body> |
| 42 | +</html> |
| 43 | +` |
| 44 | +} |
| 45 | + |
| 46 | +function renderFunding(funding) { |
| 47 | + if (funding?.url && funding?.type) { |
| 48 | + return ` |
| 49 | + <dt>Funding</dt> |
| 50 | + <dd><a href="${he.encode(funding.url)}">${he.encode(funding.type)}</a></dd> |
| 51 | + `; |
| 52 | + } |
| 53 | + |
| 54 | + return ''; |
| 55 | +} |
| 56 | + |
| 57 | +function renderKeywords(keywords) { |
| 58 | + if (keywords?.length) { |
| 59 | + const uniqueKeywords = Array.from(new Set(keywords)).filter((x) => !excludedKeywords.includes(x)); |
| 60 | + uniqueKeywords.sort((a, b) => a.localeCompare(b)); |
| 61 | + |
| 62 | + return '<ul>' + uniqueKeywords.map((keyword) => `<li>${he.encode(keyword)}</li>`).join('') + '</ul>'; |
| 63 | + } |
| 64 | + |
| 65 | + return ''; |
| 66 | +} |
| 67 | + |
| 68 | +async function traverseDir(dir) { |
| 69 | + const out = []; |
| 70 | + |
| 71 | + const files = await fs.readdir(dir); |
| 72 | + for (let i = 0; i < files.length; i++) { |
| 73 | + const file = files[i]; |
| 74 | + let fullPath = path.join(dir, file); |
| 75 | + if ((await fs.lstat(fullPath)).isDirectory()) { |
| 76 | + out.push(...(await traverseDir(fullPath))); |
| 77 | + } else { |
| 78 | + out.push(fullPath) |
| 79 | + } |
| 80 | + } |
| 81 | + |
| 82 | + return out; |
| 83 | +} |
| 84 | + |
| 85 | +const pluginDataFiles = await traverseDir('./directory'); |
| 86 | + |
| 87 | +let result = ''; |
| 88 | +const excludedKeywords = ['postcss', 'postcss-plugin', 'css', 'css4', 'css3'] |
| 89 | + |
| 90 | +for (let i = 0; i < pluginDataFiles.length; i++) { |
| 91 | + const pluginDataFile = pluginDataFiles[i]; |
| 92 | + const pluginData = JSON.parse(await fs.readFile(pluginDataFile)) |
| 93 | + |
| 94 | + result += ` |
| 95 | + <article class="plugin"> |
| 96 | + <h3>${he.encode(pluginData.name)}</h3> |
| 97 | + <p>${he.encode(pluginData.description) || '<i>no description</i>'}</p> |
| 98 | +
|
| 99 | + <dl> |
| 100 | + <dt><a href="https://www.npmjs.com/package/${he.encode(pluginData.name)}">npm</a></dt> |
| 101 | + <dd><code>npm -i ${he.encode(pluginData.name)}</code></dd> |
| 102 | +
|
| 103 | + <dt>Version</dt> |
| 104 | + <dd><code>${he.encode(pluginData.version)}</code></dd> |
| 105 | +
|
| 106 | + <dt>License</dt> |
| 107 | + <dd><code>${he.encode(pluginData.license)}</code></dd> |
| 108 | +
|
| 109 | + <dt>PostCSS version range</dt> |
| 110 | + <dd><code>${he.encode(pluginData.peerDependencies.postcss)}</code></dd> |
| 111 | + |
| 112 | + ${renderFunding(pluginData.funding)} |
| 113 | + </dl> |
| 114 | +
|
| 115 | + ${renderKeywords(pluginData.keywords)} |
| 116 | + </article> |
| 117 | + ` |
| 118 | +} |
| 119 | + |
| 120 | +await fs.writeFile('./public/index.html', renderPage(result)) |
0 commit comments