diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index eb5b73873..e61b4dbc7 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -22,8 +22,78 @@ jobs: uses: tj-actions/changed-files@v35 with: files: icons/*.svg - - name: Generate comment - id: generate-comment + - name: Generate cohesion check random + id: generate-cohesion-check-random + run: | + delimiter="$(openssl rand -hex 8)" + echo "body<<$delimiter" >> $GITHUB_OUTPUT + for file in $(printf "%s\\n" icons/*.svg | shuf | head -n$(awk -F' ' '{print NF}' <<< '${{ steps.changed-files.outputs.all_changed_files }}')); do + cat "$file" | # get file content + tr '\n' ' ' | # remove line breaks + sed -e 's/]*>//g' | # remove attributes from svg element + base64 -w 0 | # encode svg + sed "s|.*|\"$file\" |" + done | tr '\n' ' ' >> $GITHUB_OUTPUT + echo >> $GITHUB_OUTPUT + echo "$delimiter" >> $GITHUB_OUTPUT + - name: Generate cohesion check squares + id: generate-cohesion-check-squares + run: | + delimiter="$(openssl rand -hex 8)" + echo "body<<$delimiter" >> $GITHUB_OUTPUT + for file in $(printf "%s\\n" icons/*square*.svg | shuf | head -n$(awk -F' ' '{print NF}' <<< '${{ steps.changed-files.outputs.all_changed_files }}')); do + cat "$file" | # get file content + tr '\n' ' ' | # remove line breaks + sed -e 's/]*>//g' | # remove attributes from svg element + base64 -w 0 | # encode svg + sed "s|.*|\"$file\" |" + done | tr '\n' ' ' >> $GITHUB_OUTPUT + echo >> $GITHUB_OUTPUT + echo "$delimiter" >> $GITHUB_OUTPUT + - name: Generate 1px stroke-width + id: generate-1px-stroke-width + run: | + delimiter="$(openssl rand -hex 8)" + echo "body<<$delimiter" >> $GITHUB_OUTPUT + for file in ${{ steps.changed-files.outputs.all_changed_files }}; do + cat "$file" | # get file content + tr '\n' ' ' | # remove line breaks + sed -e 's/]*>//g' | # remove attributes from svg element + base64 -w 0 | # encode svg + sed "s|.*|\"$file\" |" + done | tr '\n' ' ' >> $GITHUB_OUTPUT + echo >> $GITHUB_OUTPUT + echo "$delimiter" >> $GITHUB_OUTPUT + - name: Generate 2px stroke-width + id: generate-2px-stroke-width + run: | + delimiter="$(openssl rand -hex 8)" + echo "body<<$delimiter" >> $GITHUB_OUTPUT + for file in ${{ steps.changed-files.outputs.all_changed_files }}; do + cat "$file" | # get file content + tr '\n' ' ' | # remove line breaks + sed -e 's/]*>//g' | # remove attributes from svg element + base64 -w 0 | # encode svg + sed "s|.*|\"$file\" |" + done | tr '\n' ' ' >> $GITHUB_OUTPUT + echo >> $GITHUB_OUTPUT + echo "$delimiter" >> $GITHUB_OUTPUT + - name: Generate 3px stroke-width + id: generate-3px-stroke-width + run: | + delimiter="$(openssl rand -hex 8)" + echo "body<<$delimiter" >> $GITHUB_OUTPUT + for file in ${{ steps.changed-files.outputs.all_changed_files }}; do + cat "$file" | # get file content + tr '\n' ' ' | # remove line breaks + sed -e 's/]*>//g' | # remove attributes from svg element + base64 -w 0 | # encode svg + sed "s|.*|\"$file\" |" + done | tr '\n' ' ' >> $GITHUB_OUTPUT + echo >> $GITHUB_OUTPUT + echo "$delimiter" >> $GITHUB_OUTPUT + - name: Generate X-rays + id: generate-x-rays run: | delimiter="$(openssl rand -hex 8)" echo "body<<$delimiter" >> $GITHUB_OUTPUT @@ -50,8 +120,21 @@ jobs: issue-number: ${{ github.event.pull_request.number }} body: | ### Added or changed icons + ${{ steps.generate-2px-stroke-width.outputs.body }}
+
+ Preview cohesion + ${{ steps.generate-cohesion-check-squares.outputs.body }}
+ ${{ steps.generate-2px-stroke-width.outputs.body }}
+ ${{ steps.generate-cohesion-check-random.outputs.body }}
+
+
+ Preview stroke widths + ${{ steps.generate-1px-stroke-width.outputs.body }}
+ ${{ steps.generate-2px-stroke-width.outputs.body }}
+ ${{ steps.generate-3px-stroke-width.outputs.body }}
+
Icon X-rays - ${{ steps.generate-comment.outputs.body }} + ${{ steps.generate-x-rays.outputs.body }}
edit-mode: replace diff --git a/site/src/pages/api/gh-icon/stroke-width/[...data].tsx b/site/src/pages/api/gh-icon/stroke-width/[...data].tsx new file mode 100644 index 000000000..712fc54aa --- /dev/null +++ b/site/src/pages/api/gh-icon/stroke-width/[...data].tsx @@ -0,0 +1,29 @@ +import { parseSync } from 'svgson'; +import { createLucideIcon, IconNode } from 'lucide-react'; + +export default async function handler(req, res) { + // ReactDOMServer needs to be imported dynamically + // https://github.com/vercel/next.js/issues/43810 + const ReactDOMServer = (await import('react-dom/server')).default; + + const url = req.url.split('/'); + const src = Buffer.from(url.at(-1).slice(0, -4), 'base64').toString('utf8'); + + const Icon = createLucideIcon( + 'icon', + parseSync(src.includes('${src}`).children.map( + ({ name, attributes }) => [name, attributes] + ) as IconNode + ); + + const svg = Buffer.from( + ReactDOMServer.renderToString().replace( + />/, + '>' + ) + ); + + res.setHeader('Cache-Control', 'public,max-age=31536000'); + res.setHeader('Content-Type', 'image/svg+xml'); + res.status(200).end(svg); +}