feat(nuldoc): first implementation of rendering slide

22 files changed, 228 insertions, 5 deletions

diff --git a/content/slides/2023-01-18/phpstudy-tokyo-148.xml b/content/slides/2023-01-18/phpstudy-tokyo-148.xml
index 56bccf3..f9ea484 100644
--- a/content/slides/2023-01-18/phpstudy-tokyo-148.xml
+++ b/content/slides/2023-01-18/phpstudy-tokyo-148.xml
@@ -8,7 +8,7 @@
     <talktype>
       LT
     </talktype>
-    <link>https://github.com/nsfisis/PHPStudy148-slide/blob/main/slide.pdf</link>
+    <link>/slides/2023-01-18/phpstudy-tokyo-148/slide.pdf</link>
     <keywordset>
       <keyword>php</keyword>
       <keyword>phpstudy-tokyo</keyword>
diff --git a/content/slides/2023-01-18/phpstudy-tokyo-148/slide.pdf b/content/slides/2023-01-18/phpstudy-tokyo-148/slide.pdf
new file mode 100644
index 0000000..e50d08e
--- /dev/null
+++ b/content/slides/2023-01-18/phpstudy-tokyo-148/slide.pdf
diff --git a/content/slides/2023-02-15/phpstudy-tokyo-149.xml b/content/slides/2023-02-15/phpstudy-tokyo-149.xml
index f09e4d7..fba41d1 100644
--- a/content/slides/2023-02-15/phpstudy-tokyo-149.xml
+++ b/content/slides/2023-02-15/phpstudy-tokyo-149.xml
@@ -8,7 +8,7 @@
     <talktype>
       LT
     </talktype>
-    <link>https://github.com/nsfisis/PHPStudy149-slide/blob/main/slide.pdf</link>
+    <link>/slides/2023-02-15/phpstudy-tokyo-149/slide.pdf</link>
     <keywordset>
       <keyword>php</keyword>
       <keyword>phpstudy-tokyo</keyword>
diff --git a/content/slides/2023-02-15/phpstudy-tokyo-149/slide.pdf b/content/slides/2023-02-15/phpstudy-tokyo-149/slide.pdf
new file mode 100644
index 0000000..f51f6f8
--- /dev/null
+++ b/content/slides/2023-02-15/phpstudy-tokyo-149/slide.pdf
diff --git a/content/slides/2023-03-15/phpstudy-tokyo-150.xml b/content/slides/2023-03-15/phpstudy-tokyo-150.xml
index 6299752..a565784 100644
--- a/content/slides/2023-03-15/phpstudy-tokyo-150.xml
+++ b/content/slides/2023-03-15/phpstudy-tokyo-150.xml
@@ -8,7 +8,7 @@
     <talktype>
       LT
     </talktype>
-    <link>https://github.com/nsfisis/PHPStudy150-slide/blob/main/slide.pdf</link>
+    <link>/slides/2023-03-15/phpstudy-tokyo-150/slide.pdf</link>
     <keywordset>
       <keyword>php</keyword>
       <keyword>phpstudy-tokyo</keyword>
diff --git a/content/slides/2023-03-15/phpstudy-tokyo-150/slide.pdf b/content/slides/2023-03-15/phpstudy-tokyo-150/slide.pdf
new file mode 100644
index 0000000..fdc070c
--- /dev/null
+++ b/content/slides/2023-03-15/phpstudy-tokyo-150/slide.pdf
diff --git a/content/slides/2023-03-24/phperkaigi-2023.xml b/content/slides/2023-03-24/phperkaigi-2023.xml
index cfbfc77..e61d2e9 100644
--- a/content/slides/2023-03-24/phperkaigi-2023.xml
+++ b/content/slides/2023-03-24/phperkaigi-2023.xml
@@ -8,7 +8,7 @@
     <talktype>
       レギュラートーク
     </talktype>
-    <link>https://github.com/nsfisis/PHPerKaigi2023-slide/blob/main/slide.pdf</link>
+    <link>/slides/2023-03-24/phperkaigi-2023/slide.pdf</link>
     <keywordset>
       <keyword>php</keyword>
       <keyword>phperkaigi</keyword>
diff --git a/content/slides/2023-03-24/phperkaigi-2023/slide.pdf b/content/slides/2023-03-24/phperkaigi-2023/slide.pdf
new file mode 100644
index 0000000..6d3d9c3
--- /dev/null
+++ b/content/slides/2023-03-24/phperkaigi-2023/slide.pdf
diff --git a/nuldoc-src/commands/build.ts b/nuldoc-src/commands/build.ts
index 8961da9..38af80a 100644
--- a/nuldoc-src/commands/build.ts
+++ b/nuldoc-src/commands/build.ts
@@ -32,6 +32,7 @@ export async function runBuildCommand(config: Config) {
   await buildAboutPage(config);
   await buildNotFoundPage(config);
   await copyStaticFiles(config);
+  await copyAssetFiles(slides, config);
 }
 
 async function buildPostPages(config: Config): Promise<PostPage[]> {
@@ -182,6 +183,19 @@ async function copyStaticFiles(config: Config) {
   }
 }
 
+async function copyAssetFiles(slides: SlidePage[], config: Config) {
+  const cwd = Deno.cwd();
+  const contentDir = join(cwd, config.locations.contentDir);
+  const destDir = join(cwd, config.locations.destDir);
+
+  for (const slide of slides) {
+    const src = join(contentDir, slide.slideLink);
+    const dst = join(destDir, slide.slideLink);
+    await ensureDir(dirname(dst));
+    await Deno.copyFile(src, dst);
+  }
+}
+
 async function writePage(page: Page, config: Config) {
   const destFilePath = join(
     Deno.cwd(),
diff --git a/nuldoc-src/pages/slide.ts b/nuldoc-src/pages/slide.ts
index fdfe868..2b7e202 100644
--- a/nuldoc-src/pages/slide.ts
+++ b/nuldoc-src/pages/slide.ts
@@ -90,6 +90,27 @@ export async function generateSlidePage(
               ),
             ),
           ),
+          el(
+            "canvas",
+            [["id", "slide"], ["data-slide-link", slide.slideLink]],
+          ),
+          el(
+            "div",
+            [],
+            el("button", [["id", "prev"]], text("Prev")),
+            el("button", [["id", "next"]], text("Next")),
+          ),
+          el(
+            "script",
+            [[
+              "src",
+              "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js",
+            ]],
+          ),
+          el(
+            "script",
+            [["src", "/slide.js"], ["type", "module"]],
+          ),
         ),
       ),
     ),
diff --git a/nuldoc-src/pages/tag.ts b/nuldoc-src/pages/tag.ts
index dd7a5c0..3c1421f 100644
--- a/nuldoc-src/pages/tag.ts
+++ b/nuldoc-src/pages/tag.ts
@@ -39,7 +39,15 @@ export async function generateTagPage(
             el(
               "header",
               [["class", "entry-header"]],
-              el("h2", [], text("event" in page ? `登壇: ${page.event} (${page.talkType})` : page.title)),
+              el(
+                "h2",
+                [],
+                text(
+                  "event" in page
+                    ? `登壇: ${page.event} (${page.talkType})`
+                    : page.title,
+                ),
+              ),
             ),
             el(
               "section",
diff --git a/nuldoc-src/renderers/html.ts b/nuldoc-src/renderers/html.ts
index 94d134b..6cf632c 100644
--- a/nuldoc-src/renderers/html.ts
+++ b/nuldoc-src/renderers/html.ts
@@ -29,6 +29,10 @@ function getDtd(name: string): Dtd {
       return { type: "block" };
     case "br":
       return { type: "block", auto_closing: true };
+    case "button":
+      return { type: "block" };
+    case "canvas":
+      return { type: "block" };
     case "code":
       return { type: "inline" };
     case "div":
@@ -73,6 +77,8 @@ function getDtd(name: string): Dtd {
       return { type: "block" };
     case "pre":
       return { type: "block" };
+    case "script":
+      return { type: "block" };
     case "section":
       return { type: "block" };
     case "span":
diff --git a/public/slide.js b/public/slide.js
new file mode 100644
index 0000000..77e49ac
--- /dev/null
+++ b/public/slide.js
@@ -0,0 +1,59 @@
+document.addEventListener("DOMContentLoaded", async () => {
+  const pdfjsLib = globalThis.pdfjsLib;
+  pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js";
+
+  const canvas = document.getElementById("slide");
+  const ctx = canvas.getContext("2d");
+  const url = canvas.dataset.slideLink;
+
+  let pageNum = 1;
+  let pageNumPending = null;
+  let pageRendering = false;
+  let doc = null;
+
+  const renderPage = async (num) => {
+    pageRendering = true;
+    const page = await doc.getPage(num);
+
+    var viewport = page.getViewport({ scale: 1.0 });
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+
+    // TODO: error handling
+    await page.render({
+      canvasContext: ctx,
+      viewport: viewport,
+    });
+
+    pageRendering = false;
+    if (pageNumPending !== null) {
+      renderPage(pageNumPending);
+      pageNumPending = null;
+    }
+  };
+
+  const queueRenderPage = (num) => {
+    if (pageRendering) {
+      pageNumPending = num;
+    } else {
+      renderPage(num);
+    }
+  };
+
+  const prev = document.getElementById("prev");
+  prev.addEventListener("click", () => {
+    if (pageNum <= 1) return;
+    pageNum--;
+    queueRenderPage(pageNum);
+  });
+  const next = document.getElementById("next");
+  next.addEventListener("click", () => {
+    if (pageNum >= doc.numPages) return;
+    pageNum++;
+    queueRenderPage(pageNum);
+  });
+
+  // TODO: error handling
+  doc = await pdfjsLib.getDocument(url).promise;
+  queueRenderPage(pageNum);
+});
diff --git a/public/slides/2023-01-18/phpstudy-tokyo-148/index.html b/public/slides/2023-01-18/phpstudy-tokyo-148/index.html
index 8c7dc09..df84fd0 100644
--- a/public/slides/2023-01-18/phpstudy-tokyo-148/index.html
+++ b/public/slides/2023-01-18/phpstudy-tokyo-148/index.html
@@ -56,6 +56,20 @@
               </li>
             </ol>
           </section>
+          <canvas data-slide-link="/slides/2023-01-18/phpstudy-tokyo-148/slide.pdf" id="slide">
+          </canvas>
+          <div>
+            <button id="prev">
+              Prev
+            </button>
+            <button id="next">
+              Next
+            </button>
+          </div>
+          <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js">
+          </script>
+          <script src="/slide.js" type="module">
+          </script>
         </div>
       </article>
     </main>
diff --git a/public/slides/2023-01-18/phpstudy-tokyo-148/slide.pdf b/public/slides/2023-01-18/phpstudy-tokyo-148/slide.pdf
new file mode 100644
index 0000000..e50d08e
--- /dev/null
+++ b/public/slides/2023-01-18/phpstudy-tokyo-148/slide.pdf
diff --git a/public/slides/2023-02-15/phpstudy-tokyo-149/index.html b/public/slides/2023-02-15/phpstudy-tokyo-149/index.html
index 81b8b35..1bce7a6 100644
--- a/public/slides/2023-02-15/phpstudy-tokyo-149/index.html
+++ b/public/slides/2023-02-15/phpstudy-tokyo-149/index.html
@@ -56,6 +56,20 @@
               </li>
             </ol>
           </section>
+          <canvas data-slide-link="/slides/2023-02-15/phpstudy-tokyo-149/slide.pdf" id="slide">
+          </canvas>
+          <div>
+            <button id="prev">
+              Prev
+            </button>
+            <button id="next">
+              Next
+            </button>
+          </div>
+          <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js">
+          </script>
+          <script src="/slide.js" type="module">
+          </script>
         </div>
       </article>
     </main>
diff --git a/public/slides/2023-02-15/phpstudy-tokyo-149/slide.pdf b/public/slides/2023-02-15/phpstudy-tokyo-149/slide.pdf
new file mode 100644
index 0000000..f51f6f8
--- /dev/null
+++ b/public/slides/2023-02-15/phpstudy-tokyo-149/slide.pdf
diff --git a/public/slides/2023-03-15/phpstudy-tokyo-150/index.html b/public/slides/2023-03-15/phpstudy-tokyo-150/index.html
index da09cc7..91e35ef 100644
--- a/public/slides/2023-03-15/phpstudy-tokyo-150/index.html
+++ b/public/slides/2023-03-15/phpstudy-tokyo-150/index.html
@@ -59,6 +59,20 @@
               </li>
             </ol>
           </section>
+          <canvas data-slide-link="/slides/2023-03-15/phpstudy-tokyo-150/slide.pdf" id="slide">
+          </canvas>
+          <div>
+            <button id="prev">
+              Prev
+            </button>
+            <button id="next">
+              Next
+            </button>
+          </div>
+          <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js">
+          </script>
+          <script src="/slide.js" type="module">
+          </script>
         </div>
       </article>
     </main>
diff --git a/public/slides/2023-03-15/phpstudy-tokyo-150/slide.pdf b/public/slides/2023-03-15/phpstudy-tokyo-150/slide.pdf
new file mode 100644
index 0000000..fdc070c
--- /dev/null
+++ b/public/slides/2023-03-15/phpstudy-tokyo-150/slide.pdf
diff --git a/public/slides/2023-03-24/phperkaigi-2023/index.html b/public/slides/2023-03-24/phperkaigi-2023/index.html
index ab519dc..a07c224 100644
--- a/public/slides/2023-03-24/phperkaigi-2023/index.html
+++ b/public/slides/2023-03-24/phperkaigi-2023/index.html
@@ -56,6 +56,20 @@
               </li>
             </ol>
           </section>
+          <canvas data-slide-link="/slides/2023-03-24/phperkaigi-2023/slide.pdf" id="slide">
+          </canvas>
+          <div>
+            <button id="prev">
+              Prev
+            </button>
+            <button id="next">
+              Next
+            </button>
+          </div>
+          <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js">
+          </script>
+          <script src="/slide.js" type="module">
+          </script>
         </div>
       </article>
     </main>
diff --git a/public/slides/2023-03-24/phperkaigi-2023/slide.pdf b/public/slides/2023-03-24/phperkaigi-2023/slide.pdf
new file mode 100644
index 0000000..6d3d9c3
--- /dev/null
+++ b/public/slides/2023-03-24/phperkaigi-2023/slide.pdf
diff --git a/static/slide.js b/static/slide.js
new file mode 100644
index 0000000..77e49ac
--- /dev/null
+++ b/static/slide.js
@@ -0,0 +1,59 @@
+document.addEventListener("DOMContentLoaded", async () => {
+  const pdfjsLib = globalThis.pdfjsLib;
+  pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js";
+
+  const canvas = document.getElementById("slide");
+  const ctx = canvas.getContext("2d");
+  const url = canvas.dataset.slideLink;
+
+  let pageNum = 1;
+  let pageNumPending = null;
+  let pageRendering = false;
+  let doc = null;
+
+  const renderPage = async (num) => {
+    pageRendering = true;
+    const page = await doc.getPage(num);
+
+    var viewport = page.getViewport({ scale: 1.0 });
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+
+    // TODO: error handling
+    await page.render({
+      canvasContext: ctx,
+      viewport: viewport,
+    });
+
+    pageRendering = false;
+    if (pageNumPending !== null) {
+      renderPage(pageNumPending);
+      pageNumPending = null;
+    }
+  };
+
+  const queueRenderPage = (num) => {
+    if (pageRendering) {
+      pageNumPending = num;
+    } else {
+      renderPage(num);
+    }
+  };
+
+  const prev = document.getElementById("prev");
+  prev.addEventListener("click", () => {
+    if (pageNum <= 1) return;
+    pageNum--;
+    queueRenderPage(pageNum);
+  });
+  const next = document.getElementById("next");
+  next.addEventListener("click", () => {
+    if (pageNum >= doc.numPages) return;
+    pageNum++;
+    queueRenderPage(pageNum);
+  });
+
+  // TODO: error handling
+  doc = await pdfjsLib.getDocument(url).promise;
+  queueRenderPage(pageNum);
+});