diff --git a/README.md b/README.md index b68e347..3289bb3 100644 --- a/README.md +++ b/README.md @@ -107,6 +107,10 @@ The component currently being used is on [Github](https://github.com/BoyWithSilv You can substitute the same with `componentUrl` input in your workflow file. For more info on creating this web component, visit [source](https://github.com/BoyWithSilverWings/generate-og-image/blob/304fd9aa0b21b01b0fdc8a3d1a63a19ffdc1840d/demo/test-file.jpg) +## Contributing + +See [docs](./docs/contributors.md) + ## Credits 1. [Zeit OG Image](https://github.com/zeit/og-image) diff --git a/__tests__/generate-html.test.ts b/__tests__/generate-html.test.ts index 431548f..b44ecda 100644 --- a/__tests__/generate-html.test.ts +++ b/__tests__/generate-html.test.ts @@ -54,9 +54,15 @@ describe("Generate HTML", () => { const result = generateHtml({ background: "linear-gradient(to right, #000428, #004e92)" }); - console.log(result); expect(result.includes("linear-gradient(to right, #000428, #004e92)")).toBe( true ); }); + + it("process emojis", () => { + const result = generateHtml({ + imageUrl: "😍" + }); + expect(result.includes(`class="emoji"`)).toBe(true); + }); }); diff --git a/demo/test-file.md b/demo/test-file.md index 48dcf22..35413d6 100644 --- a/demo/test-file.md +++ b/demo/test-file.md @@ -2,12 +2,9 @@ title: Just hack'n description: Nothing to see here ogImage: - title: Generating open graph images with Github Actions + title: Generating *open graph* images with Github Actions subtitle: Works with Markdown files - imageUrl: https://avatars3.githubusercontent.com/u/8883368?s=40&v=4 - background: "linear-gradient(to right, #000428, #004e92)" - fontColor: yellow - fontSize: 90% + imageUrl: 😍 filename: this-file --- diff --git a/demo/this-file.jpg b/demo/this-file.jpg new file mode 100644 index 0000000..bec63ab Binary files /dev/null and b/demo/this-file.jpg differ diff --git a/docs/contributors.md b/docs/contributors.md index fece2ea..ee74f7d 100644 --- a/docs/contributors.md +++ b/docs/contributors.md @@ -1,22 +1,36 @@ # Contributors -### Checkin +## Getting started -- Do checkin source (src) -- Do checkin build output (lib) -- Do checkin runtime node_modules -- Do not checkin devDependency node_modules (husky can help see below) +1. Clone the repository -### devDependencies +## Prerequisites -In order to handle correctly checking in node_modules without devDependencies, we run [Husky](https://github.com/typicode/husky) before each commit. -This step ensures that formatting and checkin rules are followed and that devDependencies are excluded. To make sure Husky runs correctly, please use the following workflow: +1. NodeJS + +## Developing + +``` +npm install +``` + +Push the branch after making the changes and create a PR. + +The output is the workflow named _Generate OG Images_ running in Github Actions on every PR. + +## Build + +Uses `ncc` to generate builds for application. ``` -npm install # installs all devDependencies including Husky -git add abc.ext # Add the files you've changed. This should include files in src, lib, and node_modules (see above) -git commit -m "Informative commit message" # Commit. This will run Husky +npm install +npm run build-release ``` -During the commit step, Husky will take care of formatting all files with [Prettier](https://github.com/prettier/prettier) as well as pruning out devDependencies using `npm prune --production`. -It will also make sure these changes are appropriately included in your commit (no further work is needed) \ No newline at end of file +## Tests + +Tests are written with `Jest`. + +``` +npm test +``` diff --git a/package-lock.json b/package-lock.json index afab23b..a8b199f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1933,6 +1933,26 @@ "js-yaml": "^3.13.1" } }, + "fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "dependencies": { + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "requires": { + "graceful-fs": "^4.1.6" + } + } + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2549,8 +2569,7 @@ "graceful-fs": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.0.tgz", - "integrity": "sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==", - "dev": true + "integrity": "sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==" }, "growly": { "version": "1.3.0", @@ -3657,6 +3676,15 @@ "minimist": "^1.2.0" } }, + "jsonfile": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz", + "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==", + "requires": { + "graceful-fs": "^4.1.6", + "universalify": "^0.1.2" + } + }, "jsprim": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", @@ -5595,6 +5623,22 @@ "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", "dev": true }, + "twemoji": { + "version": "12.1.3", + "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-12.1.3.tgz", + "integrity": "sha512-Y5mC7vVovHZvCzdXDepJaU6FHPd7PaW6ZTBMWy9sGYafLBn1x0h2T6aGA3cpnz3WgWWg2QI+3D+9Rn4Z/ViitQ==", + "requires": { + "fs-extra": "^8.0.1", + "jsonfile": "^5.0.0", + "twemoji-parser": "12.1.0", + "universalify": "^0.1.2" + } + }, + "twemoji-parser": { + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-12.1.0.tgz", + "integrity": "sha512-jaHYltumP/E8nR+YzRrY753j9dEpL3zH8+pDXgf9h/10wHeW/9IIjs6mZ1Z/Syh8rIaOQObev1BAX/AinFmuOg==" + }, "type-check": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", @@ -5652,6 +5696,11 @@ "os-name": "^3.0.0" } }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==" + }, "unset-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz", diff --git a/package.json b/package.json index d577c76..6237669 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "front-matter": "^3.0.2", "lodash": "^4.17.15", "marked": "^0.7.0", - "puppeteer-core": "^1.20.0" + "puppeteer-core": "^1.20.0", + "twemoji": "^12.1.3" }, "devDependencies": { "@types/jest": "^24.0.13", diff --git a/src/generate-html.ts b/src/generate-html.ts index 1f26d65..c0af282 100644 --- a/src/generate-html.ts +++ b/src/generate-html.ts @@ -1,4 +1,5 @@ import marked from "marked"; +import twemoji from "twemoji"; import { IRepoProps } from "./types"; @@ -9,6 +10,27 @@ function createVariables(name: string, value?: string) { return ""; } +function getImageUrl(imageUrl?: string) { + if (!imageUrl) { + return ""; + } + if (twemoji.test(imageUrl)) { + return twemoji.parse(imageUrl, { + attributes: () => ({ + slot: "image" + }) + }); + } + return ``; +} + +function getMarked(text?: string) { + if (!text) { + return ""; + } + return marked(text); +} + function generateHtml(prop: Partial) { return ` @@ -32,12 +54,8 @@ function generateHtml(prop: Partial) { - ${ - prop.imageUrl - ? `` - : `` - } -
${marked(prop.title || "")}
+ ${getImageUrl(prop.imageUrl)} +
${getMarked(prop.title)}