Add example of actions with inputs (#3)

Add input example of the action. Use Prism.js to enable syntax highlight
for YAML files

Author: ueokande

data/actions/release-chrome-extension.yml data/actions/release-chrome-extension/action.yml

@@ -0,0 +1 @@
+major: v0

data/actions/release-chrome-extension/version.yml

@@ -0,0 +1 @@
+major: v0

data/actions/release-firefox-addon.yml data/actions/release-firefox-addon/action.yml

@@ -0,0 +1 @@
+major: v1

data/actions/release-firefox-addon/version.yml

@@ -0,0 +1 @@
+major: v1

data/actions/setup-chrome.yml data/actions/setup-chrome/action.yml

@@ -0,0 +1 @@
+major: v1

data/actions/setup-chrome/version.yml

@@ -7,30 +7,43 @@ import type { ActionType } from "./src/types";
 export const createPages: GatsbyNode["createPages"] = async ({
   actions: { createPage },
 }) => {
-  const actionFiles = (await fs.promises.readdir("./data/actions")).filter(
-    (file) => file.endsWith(".yaml") || file.endsWith(".yml"),
-  );
+  const actionDirs = await fs.promises.readdir("./data/actions");
+
+  for (const dir of actionDirs) {
+    let actionYml: string;
+    let versionYml: string;
+    try {
+      actionYml = await fs.promises.readFile(
+        `./data/actions/${dir}/action.yml`,
+        "utf-8",
+      );
+      versionYml = await fs.promises.readFile(
+        `./data/actions/${dir}/version.yml`,
+        "utf-8",
+      );
+    } catch (error) {
+      console.warn(`Failed to read action.yaml in ${dir}`, String(error));
+      continue;
+    }
 
-  for (const file of actionFiles) {
-    const slug = path.basename(file, path.extname(file));
-    const content = await fs.promises.readFile(
-      `./data/actions/${file}`,
-      "utf-8",
-    );
     const { name, description, inputs, outputs } = yaml.load(
-      content,
+      actionYml,
     ) as ActionType;
+    const { major } = yaml.load(versionYml);
     createPage({
-      path: `/${slug}/`,
+      path: `/${dir}/`,
       component: path.resolve("./src/templates/action.tsx"),
       context: {
-        name: slug,
+        name: dir,
         action: {
           name,
           description,
           inputs,
           outputs,
         },
+        version: {
+          major,
+        },
       },
     });
   }

data/actions/setup-edge.yml data/actions/setup-edge/action.yml

@@ -13,7 +13,8 @@
     "clean": "gatsby clean",
     "typecheck": "tsc --noEmit",
     "lint": "biome ci .",
-    "lint:fix": "biome check --apply ."
+    "lint:fix": "biome check --apply .",
+    "fetch": "node ./scripts/fetch-actions.mjs"
   },
   "dependencies": {
     "babel-plugin-styled-components": "^2.1.4",
@@ -30,15 +31,18 @@
     "grommet": "^2.38.0",
     "grommet-icons": "^4.12.1",
     "js-yaml": "^4.1.0",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.3",
     "@types/node": "^20.11.19",
+    "@types/prismjs": "^1.26.4",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "semver": "^7.6.2",
     "typescript": "^5.3.3"
   }
 }

data/actions/setup-edge/version.yml

@@ -0,0 +1,50 @@
+import fs from "node:fs/promises";
+import semver from "semver";
+
+const ACTION_NAMES = [
+  "release-chrome-extension",
+  "release-firefox-addon",
+  "setup-chrome",
+  "setup-edge",
+  "setup-firefox",
+];
+const ACTIONS_ROOT = "./data/actions";
+
+const { GITHUB_TOKEN } = process.env;
+
+const getLatestTagNames = async (owner, repo) => {
+  const url = `https://api.github.com/repos/${owner}/${repo}/releases/latest`;
+  const headers = GITHUB_TOKEN
+    ? { Authorization: `Bearer ${GITHUB_TOKEN}` }
+    : {};
+  const res = await fetch(url, { headers });
+  return (await res.json()).tag_name;
+};
+
+const run = async () => {
+  for (const name of ACTION_NAMES) {
+    const actionDest = `${ACTIONS_ROOT}/${name}/action.yml`;
+    const url = `https://raw.githubusercontent.com/browser-actions/${name}/latest/action.yml`;
+    const content = await fetch(url).then((res) => res.text());
+    await fs.mkdir(`${ACTIONS_ROOT}/${name}`, { recursive: true });
+    await fs.writeFile(actionDest, content);
+
+    console.log(`Fetched ${name} action.yml to ${actionDest}`);
+  }
+
+  for (const name of ACTION_NAMES) {
+    const versionDest = `${ACTIONS_ROOT}/${name}/version.yml`;
+    const latestTag = await getLatestTagNames("browser-actions", name);
+    if (!latestTag) {
+      console.error(`Failed to get latest tag for ${name}`);
+      continue;
+    }
+    const versionContent = `major: v${semver.major(latestTag)}
+`;
+    await fs.writeFile(versionDest, versionContent);
+
+    console.log(`Fetched ${name} version to ${versionDest}`);
+  }
+};
+
+await run();

data/actions/setup-firefox.yml data/actions/setup-firefox/action.yml

@@ -1,18 +1,31 @@
 import { Box } from "grommet";
-import type * as React from "react";
+import Prism from "prismjs";
+import * as React from "react";
+import "prismjs/themes/prism.css";
+import "prismjs/components/prism-yaml";
 
 interface Props {
   children: React.ReactNode;
 }
 
-export const CodeBlock: React.FC<Props> = ({ children }) => (
-  <Box
-    background="light-2"
-    pad={{ horizontal: "medium", vertical: "small" }}
-    round="small"
-  >
-    <pre>
-      <code>{children}</code>
-    </pre>
-  </Box>
-);
+export const CodeBlock: React.FC<Props> = ({ children }) => {
+  const ref = React.useRef<HTMLElement>(null);
+
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    Prism.highlightElement(ref.current, false);
+  }, []);
+
+  return (
+    <Box background="light-2" round="small">
+      <pre style={{ background: "none" }}>
+        <code ref={ref} className="language-yml">
+          {children}
+        </code>
+      </pre>
+    </Box>
+  );
+};