devops: deploy workflow

joaomelo · Oct 20, 2023 · e5a2f96 · e5a2f96
1 parent 987e686
commit e5a2f96
Show file tree

Hide file tree

Showing 5 changed files with 182 additions and 191 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -22,15 +22,13 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - run: npm i -f
-      - run: npm run build
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:
           # Upload entire repository
-          path: "./dist"
+          path: "./index.html"
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v2
diff --git a/index.html b/index.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>loc</title>
+    <style>
+      html {
+        font-family: monospace;
+      }
+
+      .controls {
+        display: flex;
+        gap: 16px;
+        margin-top: 16px;
+        justify-content: center;
+      }
+
+      input,
+      button {
+        font-family: inherit;
+      }
+
+      .output {
+        width: 100%;
+        margin-top: 16px;
+        display: flex;
+        justify-content: center;
+      }
+
+      table {
+        border-collapse: collapse;
+      }
+
+      th,
+      td {
+        border: 1px solid #000000;
+        padding: 2px;
+        min-width: 64px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="readme">
+      <p>
+        Loc is a web tool that loads a folder from your local file system and
+        tabulates files and the line count inside them.
+      </p>
+      <p>
+        It is possible to fine-tune the considered files using
+        <a
+          href="https://en.wikipedia.org/wiki/Glob_(programming)"
+          target="_blank"
+          >glob</a
+        >
+        pattern syntax. You can easily copy and paste the computed data on your
+        favorite spreadsheet software to further your analysis and estimates.
+      </p>
+
+      <p>
+        The app uses the secure
+        <a
+          href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_API#browser_compatibility"
+          >File System API</a
+        >
+        and does not send data from your machine. Everything is done right in
+        your browser. The source code is available in this
+        <a href="https://github.com/joaomelo/loc" target="_blank"
+          >GitHub repository</a
+        >. You can check it or even download and run it locally. The site is
+        hosted in the same infrastructure using GitHub Pages.
+      </p>
+    </div>
+    <div class="controls">
+      <div>
+        <label for="include">glob include pattern</label>
+        <input id="include" type="text" placeholder="**/*.{js,jsx}" />
+      </div>
+      <div>
+        <label for="ignore">ignore</label>
+        <input
+          id="ignore"
+          type="text"
+          placeholder="**/{node_modules,index.js}"
+        />
+      </div>
+      <button id="open">open</button>
+    </div>
+    <div id="output" class="output">
+      define at least a include patter and click open to choose a root directory
+    </div>
+    <script type="module">
+      import { minimatch } from "minimatch";
+
+      const button = document.getElementById("open");
+      button.onclick = doIt;
+
+      async function doIt() {
+        const dir = await showDirectoryPicker();
+        updateProcessing();
+        const match = createMatch();
+        const files = await collectFiles({ dir, prefix: "", match });
+        updateList(files);
+      }
+
+      function createMatch() {
+        const includeValue = document.getElementById("include").value;
+        const include = (name) => minimatch(name, includeValue);
+        const ignoreValue = document.getElementById("ignore").value;
+        const ignore = (name) => minimatch(name, ignoreValue);
+        return { include, ignore };
+      }
+
+      async function collectFiles({ dir, prefix, match }) {
+        const items = [];
+        for await (const [name, handle] of dir.entries()) {
+          const path = prefix ? prefix + "/" + name : name;
+          if (match.ignore(path)) continue;
+          if (handle.kind === "file" && match.include(path)) {
+            const loc = await getLocs(handle);
+            items.push({ name: path, loc });
+          } else if (handle.kind === "directory") {
+            const dirItems = await collectFiles({
+              dir: handle,
+              prefix: path,
+              match,
+            });
+            items.push(...dirItems);
+          }
+        }
+        return items;
+      }
+
+      function updateProcessing() {
+        const output = document.getElementById("output");
+        output.innerHTML = "";
+        output.textContent = "processing...";
+      }
+
+      function updateList(files) {
+        const output = document.getElementById("output");
+        output.innerHTML = "";
+
+        const table = document.createElement("table");
+        output.appendChild(table);
+
+        const titles = document.createElement("tr");
+        ["name", "loc"].forEach((str) => {
+          const title = document.createElement("th");
+          title.textContent = str;
+          titles.appendChild(title);
+        });
+        table.appendChild(titles);
+
+        files.forEach((item) => {
+          const tr = document.createElement("tr");
+
+          const name = document.createElement("td");
+          name.textContent = item.name;
+          tr.appendChild(name);
+
+          const loc = document.createElement("td");
+          loc.textContent = item.loc;
+          tr.appendChild(loc);
+
+          table.appendChild(tr);
+        });
+      }
+
+      async function getLocs(handle) {
+        const file = await handle.getFile();
+        const text = await file.text();
+        const lines = text.split("\n");
+        const loc = lines.length;
+        return loc;
+      }
+    </script>
+  </body>
+</html>
diff --git a/src/index.html b/src/index.html
diff --git a/src/index.js b/src/index.js
diff --git a/vite.config.js b/vite.config.js
@@ -4,13 +4,6 @@ export default defineConfig(({ mode }) => {
   console.info(`bundling with vite with mode: '${mode}'`);
 
   return {
-    root: "./src",
-    envDir: "../",
-    build: {
-      outDir: "../dist",
-      emptyOutDir: true,
-      sourcemap: true,
-    },
-    plugins: [],
+    root: ".",
   };
 });