Merge pull request #2 from gouz/renderWeb

Render web

README.md

@@ -20,7 +20,7 @@ In release, you can find a .deb or a ubuntu gzipped file.
 
 ## Usage
 
-Export a json of your proposal: 
+Export a json of your proposal:
 
 ![export json on conference-hall.io](assets/export-json.png)
 
@@ -44,6 +44,7 @@ Options:
   -t, --titlelength <int>  the title length (default: 100)
   -w, --links <eventId>    view links
   -x, --export <file>      export into tsv file
+  -r, --render             render on a webpage (default: false)
   -h, --help               display help for command
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choc",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "module": "src/index.ts",
   "type": "module",
   "devDependencies": {

src/choc.ts

@@ -1,4 +1,5 @@
 import { DTO, DTOExport } from "./DTO";
+import render from "./render";
 import type {
   Format,
   Options,
@@ -10,44 +11,51 @@ import type {
 import { removeEmojis } from "./utils";
 
 const choc = async (file: string, options: Options) => {
-  const { talks, speakers, formats, categories } = await Bun.file(file).json();
-  const formatsHash = new Map<string, string>();
-  (formats as Format[]).forEach(({ id, name }) => {
-    formatsHash.set(id, removeEmojis(name));
-  });
-  const speakerHash = new Map<string, SpeakerData>();
-  (speakers as Speaker[]).forEach(({ uid, displayName, company, address }) => {
-    speakerHash.set(uid, {
-      name: removeEmojis(displayName),
-      company: removeEmojis(company ?? ""),
-      address: removeEmojis(address?.formattedAddress ?? ""),
+  const json = await Bun.file(file).json();
+  if (options.render) {
+    render(json, options);
+  } else {
+    const { talks, speakers, formats, categories } = json;
+    const formatsHash = new Map<string, string>();
+    (formats as Format[]).forEach(({ id, name }) => {
+      formatsHash.set(id, removeEmojis(name));
     });
-  });
-  const categoriesHash = new Map<string, string>();
-  (categories as Format[]).forEach(({ id, name }) => {
-    categoriesHash.set(id, removeEmojis(name));
-  });
-  const talksLines = (talks as Talk[]).sort((a, b) =>
-    a.rating <= b.rating ? 1 : -1
-  );
-  if (options.export) {
-    const exportLines = DTOExport(
-      talksLines,
-      options,
-      speakerHash,
-      formatsHash,
-      categoriesHash
+    const speakerHash = new Map<string, SpeakerData>();
+    (speakers as Speaker[]).forEach(
+      ({ uid, displayName, company, address }) => {
+        speakerHash.set(uid, {
+          name: removeEmojis(displayName),
+          company: removeEmojis(company ?? ""),
+          address: removeEmojis(address?.formattedAddress ?? ""),
+        });
+      }
     );
-    Bun.write(
-      options.export,
-      `${Object.keys(exportLines[0]).join("\t")}\n${exportLines
-        .map((t: TalkRow) => Object.values(t).join("\t"))
-        .join("\n")}`
-    );
-  } else
-    console.table(
-      DTO(talksLines, options, speakerHash, formatsHash, categoriesHash)
+    const categoriesHash = new Map<string, string>();
+    (categories as Format[]).forEach(({ id, name }) => {
+      categoriesHash.set(id, removeEmojis(name));
+    });
+    const talksLines = (talks as Talk[]).sort((a, b) =>
+      a.rating <= b.rating ? 1 : -1
     );
+    if (options.export) {
+      const exportLines = DTOExport(
+        talksLines,
+        options,
+        speakerHash,
+        formatsHash,
+        categoriesHash
+      );
+      Bun.write(
+        options.export,
+        `${Object.keys(exportLines[0]).join("\t")}\n${exportLines
+          .map((t: TalkRow) => Object.values(t).join("\t"))
+          .join("\n")}`
+      );
+    } else
+      console.table(
+        DTO(talksLines, options, speakerHash, formatsHash, categoriesHash)
+      );
+  }
 };
 
 export default choc;

src/index.ts

@@ -26,6 +26,7 @@ program
   .option("-t, --titlelength <int>", "the title length", myParseInt, 100)
   .option("-w, --links <eventId>", "view links")
   .option("-x, --export <file>", "export into tsv file")
+  .option("-r, --render", "render on a webpage", false)
   .action(choc);
 
 program.parse();

src/render.ts

@@ -0,0 +1,41 @@
+import html from "./render/index.html.txt";
+import js from "./render/main.js.txt";
+import css from "./render/main.css.txt";
+import type { Options } from "./types";
+
+export const render = (json: JSON, options?: Options) => {
+  const server = Bun.serve({
+    port: 1337,
+    async fetch(req) {
+      const path = new URL(req.url).pathname;
+      if (path === "/main.css")
+        return new Response(css, {
+          headers: { "content-type": "text/css" },
+        });
+      if (path === "/main.js")
+        return new Response(
+          `
+          const exportJSON = ${JSON.stringify(json).replaceAll("\n", "<br>")}
+          const options = ${JSON.stringify(options)};
+          ${js}
+          `.trim(),
+          {
+            headers: {
+              "Content-Type": "application/javascript",
+            },
+            status: 200,
+          }
+        );
+      return new Response(html, {
+        headers: {
+          "Content-Type": "text/html",
+        },
+        status: 200,
+      });
+    },
+  });
+
+  console.log("🍫 is listening on \x1b[1m\x1b[35;49m%s\x1b[0m", server.url);
+};
+
+export default render;

src/render/index.html.txt

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+    />
+    <link rel="stylesheet" href="main.css" />
+    <title>CHoC</title>
+    <script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
+  </head>
+  <body>
+    <main class="container">
+      <h1></h1>
+      <aside class="grid container">
+        <label>
+          Categories:
+          <select id="categories" onchange="window.filterTalks()"></select>
+        </label>
+        <label>
+          Formats:
+          <select id="formats" onchange="window.filterTalks()"></select>
+        </label>
+        <label>
+          Speakers:
+          <select id="speakers" onchange="window.filterTalks()"></select>
+        </label>
+        <label>
+          Companies:
+          <select id="companies" onchange="window.filterTalks()"></select>
+        </label>
+      </aside>
+      <h2>Talks</h2>
+      <section id="talks"></section>
+    </main>
+    <script src="main.js"></script>
+  </body>
+</html>