Merge pull request #2 from BoyWithSilverWings/feature/generate-html

Generate HTML with Web Component

.github/workflows/main.yml

@@ -8,11 +8,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v1
-      - name: Dump GitHub context
-        env:
-          GITHUB_CONTEXT: ${{ toJson(github) }}
-        run: echo "$GITHUB_CONTEXT"
       - name: Generate Image
         uses: ./ # Uses an action in the root directory
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_CONTEXT: ${{ toJson(github) }}

Dockerfile

@@ -24,13 +24,13 @@ WORKDIR /usr/local/src/generate-og-image
 COPY package.json package-lock.json /usr/local/src/generate-og-image/
 RUN npm ci
 
-RUN npm run build-release
-
 # copy in src
-COPY LICENSE README.md /usr/local/src/generate-og-image/
+COPY tsconfig.json /usr/local/src/generate-og-image/
 COPY src/ /usr/local/src/generate-og-image/src/
 COPY __tests__/ /usr/local/src/generate-og-image/__tests__/
 
+RUN npm run build-release
+
 RUN chmod +x /usr/local/src/generate-og-image/dist/index.js
 
 ENTRYPOINT ["/usr/local/src/generate-og-image/dist/index.js"]

README.md

@@ -1,9 +1 @@
-# JavaScript Action Template
-
-This template offers an easy way to get started writing a JavaScript action with TypeScript compile time support, unit testing with Jest and using the GitHub Actions Toolkit.
-
-## Getting Started
-
-See the walkthrough located [here](https://github.com/actions/toolkit/blob/master/docs/typescript-action.md).
-
-In addition to walking your through how to create an action, it also provides strategies for versioning, releasing and referencing your actions.
+# Open Graph Generator

action.yml

@@ -1,4 +1,16 @@
+name: "Generate OG Image"
+description: "Helps users generate a OG Image from frontmatter"
 author: "Agney"
+branding:
+  icon: "share-2"
+  color: "orange"
+inputs:
+  path:
+    description: "Path to place generated assets"
+    default: "demo/"
+  commitMsg:
+    description: "commit message to be shown when adding image"
+    default: "just some wholesome content. yo all!"
 runs:
   using: "docker"
   image: "Dockerfile"

demo/test-file.md

@@ -0,0 +1,10 @@
+---
+title: Just hack'n
+description: Nothing to see here
+ogImage:
+  title: Jack Kings
+  subtitle: Another subtitle
+  imageUrl: https://avatars3.githubusercontent.com/u/8883368?s=40&v=4
+---
+
+This is some text about some stuff that happened sometime ago

package.json

@@ -12,7 +12,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/actions/javascript-template.git"
+    "url": "git@github.com:BoyWithSilverWings/generate-og-image.git"
   },
   "keywords": [
     "actions",
@@ -23,13 +23,16 @@
   "dependencies": {
     "@actions/core": "^1.0.0",
     "@actions/github": "^1.1.0",
+    "@zeit/ncc": "^0.20.5",
+    "front-matter": "^3.0.2",
+    "lodash": "^4.17.15",
+    "marked": "^0.7.0",
     "puppeteer-core": "^1.20.0"
   },
   "devDependencies": {
     "@types/jest": "^24.0.13",
     "@types/node": "^12.0.4",
     "@types/puppeteer": "^1.19.1",
-    "@zeit/ncc": "^0.20.5",
     "husky": "^3.0.5",
     "jest": "^24.8.0",
     "jest-circus": "^24.7.1",

src/commit-file.ts

@@ -2,17 +2,22 @@ import { error } from "@actions/core";
 
 import octokit from "./github-api";
 import { USER_REPO, COMMITTER, GITHUB_HEAD_REF } from "./constants";
+import { IRepoProps } from "./types";
 
-async function commitFile(content: string) {
+async function commitFile(
+  content: string,
+  repoProps: Partial<IRepoProps>,
+  filename: string
+) {
   const [owner, repo] = USER_REPO;
 
   try {
     await octokit.repos.createOrUpdateFile({
       owner,
       repo,
-      path: "dist/image.jpg",
+      path: `${repoProps.assetPath || ""}${filename}.jpg`,
       branch: GITHUB_HEAD_REF,
-      message: "Just some wholesome content, yo all",
+      message: repoProps.commitMsg || "",
       content,
       ...COMMITTER
     });

src/constants.ts

@@ -4,6 +4,7 @@ const REPO_DIRECTORY = process.env["GITHUB_WORKSPACE"];
 const GITHUB_REPOSITORY = process.env["GITHUB_REPOSITORY"];
 const GITHUB_EVENT_PATH = process.env["GITHUB_EVENT_PATH"];
 const GITHUB_HEAD_REF = process.env["GITHUB_HEAD_REF"];
+const GITHUB_CONTEXT = process.env["GITHUB_CONTEXT"];
 
 if (!REPO_DIRECTORY) {
   console.log("There is no GITHUB_WORKSPACE environment variable");
@@ -15,6 +16,8 @@ if (!GITHUB_REPOSITORY) {
   process.exit(1);
 }
 
+const FORMATS = [".md", ".mdx"];
+
 const USER_REPO = (GITHUB_REPOSITORY as string).split("/");
 
 const COMMITTER = {
@@ -24,10 +27,12 @@ const COMMITTER = {
 
 export {
   COMMITTER,
+  FORMATS,
   GITHUB_TOKEN,
   GITHUB_EVENT_NAME,
   GITHUB_EVENT_PATH,
   REPO_DIRECTORY,
   USER_REPO,
-  GITHUB_HEAD_REF
+  GITHUB_HEAD_REF,
+  GITHUB_CONTEXT
 };

src/find-file.ts

@@ -0,0 +1,55 @@
+import fm from "front-matter";
+import { readFileSync } from "fs";
+import { PullsListFilesResponseItem } from "@octokit/rest";
+
+import {
+  GITHUB_CONTEXT,
+  USER_REPO,
+  FORMATS,
+  REPO_DIRECTORY
+} from "./constants";
+import octokit from "./github-api";
+import { IFrontMatter, IFileProps } from "./types";
+
+function getFileName(filename: string) {
+  const { length: len, [len - 1]: last } = filename.split("/");
+  const name = last.replace(/.mdx?/, "");
+  return name;
+}
+
+function getAttributes(files: PullsListFilesResponseItem[]): IFileProps[] {
+  return files.map(file => {
+    const filename = file.filename;
+    const repoDirectory = REPO_DIRECTORY as string;
+    const contents = readFileSync(`${repoDirectory}/${filename}`, {
+      encoding: "utf8"
+    });
+    const { attributes } = fm<IFrontMatter>(contents);
+    return {
+      filename: getFileName(filename),
+      attributes: Object.keys(attributes).length
+        ? { ...(attributes.ogImage || {}) }
+        : {}
+    };
+  });
+}
+
+async function findFile() {
+  const [owner, repo] = USER_REPO;
+  const githubCtx: any = JSON.parse(GITHUB_CONTEXT as string);
+  const pullNumber = githubCtx.event.number;
+  const { data: filesList } = await octokit.pulls.listFiles({
+    owner,
+    repo,
+    pull_number: pullNumber
+  });
+  const markdownFiles = filesList.filter(file => {
+    return FORMATS.some(format => file.filename.endsWith(format));
+  });
+  const frontmatterAttributes = getAttributes(markdownFiles);
+
+  return frontmatterAttributes.filter(
+    frontmatterAttribute => Object.keys(frontmatterAttribute.attributes).length
+  );
+}
+export default findFile;

src/generate-html.ts

@@ -0,0 +1,35 @@
+import { IProps } from "./types";
+
+function generateHtml(prop: Partial<IProps>) {
+  return `
+    <!doctype html>
+    <html lang="en-GB">
+    <head>
+      <meta charset="utf-8">
+      <link href="https://fonts.googleapis.com/css?family=Aleo|Open+Sans&display=swap" rel="stylesheet">
+      <style>
+        body {
+          margin: 0;
+          font-family: 'Open Sans', sans-serif;
+        }
+        og-image-element {
+          --heading-font: 'Aleo', serif;
+        }
+      </style>
+      <script type="module" rel="preload" src="https://unpkg.com/@agney/og-image-element@0.1.0"></script>
+    </head>
+    <body>
+      <og-image-element .subtitle=${prop.subtitle || ""}>
+        ${
+          prop.imageUrl
+            ? `<img slot="image" src="${prop.imageUrl}" height="100%" />`
+            : ``
+        }
+        <div slot="title">${prop.title}</div>
+      </og-image-element>
+    </body>
+    </html>
+  `;
+}
+
+export default generateHtml;

src/generate-image.ts

@@ -1,6 +1,6 @@
 import puppeteer from "puppeteer-core";
 
-async function generateImage(html: string = `<h1>Default content</h1>`) {
+async function generateImage(html: string) {
   const browser = await puppeteer.launch({
     executablePath: "/usr/bin/google-chrome-unstable",
     args: ["--no-sandbox"]

src/main.ts

@@ -1,27 +1,43 @@
 #!/usr/bin/env node
-
-import * as core from '@actions/core';
+import { warning, debug } from "@actions/core";
 
 import { GITHUB_TOKEN, GITHUB_EVENT_NAME } from "./constants";
-import generateImage from './generate-image';
-import commitFile from './commit-file';
+import generateImage from "./generate-image";
+import commitFile from "./commit-file";
+import generateHtml from "./generate-html";
+import findFile from "./find-file";
+import getRepoProps from "./repo-props";
 
 if (!GITHUB_TOKEN) {
   console.log("You must enable the GITHUB_TOKEN secret");
   process.exit(1);
 }
 
 async function run() {
-
   // Bail out if the event that executed the action wasn’t a pull_request
   if (GITHUB_EVENT_NAME !== "pull_request") {
     console.log("This action only runs for pushes to PRs");
     process.exit(78);
   }
 
-  const image = await generateImage();
+  const repoProps = await getRepoProps();
+  const fileProperties = await findFile();
+  debug(JSON.stringify(fileProperties));
+
+  if (!fileProperties.length) {
+    warning("No compatible files found");
+  }
+
+  fileProperties.forEach(async property => {
+    const html = generateHtml({
+      ...repoProps,
+      ...property.attributes
+    });
+
+    const image = await generateImage(html);
 
-  commitFile(image);
+    commitFile(image, repoProps, property.filename);
+  });
 }
 
 run();