Merge pull request #8 from BoyWithSilverWings/feature/process-emojis

Feature/process emojis

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)

__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);
+  });
 });

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
 ---
 

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)
+## Tests
+
+Tests are written with `Jest`.
+
+```
+npm test
+```

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",

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 `<img slot="image" src="${imageUrl}" height="100%" />`;
+}
+
+function getMarked(text?: string) {
+  if (!text) {
+    return "";
+  }
+  return marked(text);
+}
+
 function generateHtml(prop: Partial<IRepoProps>) {
   return `
     <!doctype html>
@@ -32,12 +54,8 @@ function generateHtml(prop: Partial<IRepoProps>) {
     </head>
     <body>
       <og-image-element subtitle="${prop.subtitle || ""}">
-        ${
-          prop.imageUrl
-            ? `<img slot="image" src="${prop.imageUrl}" height="100%" />`
-            : ``
-        }
-        <div slot="title">${marked(prop.title || "")}</div>
+        ${getImageUrl(prop.imageUrl)}
+        <div slot="title">${getMarked(prop.title)}</div>
       </og-image-element>
     </body>
     </html>