taleem-engine 1.0.0

package/src/compiler/templates/compileImageRightBulletsLeft.js

@@ -0,0 +1,79 @@
+
+// /src/compiler/templates/compileImageRightBulletsLeft.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileImageRightBulletsLeft(
+  slide
+) {
+  const rawItems =
+    slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const imageItem =
+    items.find(
+      d => d.name === "image"
+    );
+
+  const bullets =
+    items.filter(
+      d => d.name === "bullet"
+    );
+
+  if (
+    !imageItem ||
+    !bullets.length
+  ) {
+    throw new Error(
+      "imageRightBulletsLeft: requires image and bullets"
+    );
+  }
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <section class="slide imageRightBulletsLeft">
+
+      <ul>
+
+        ${bullets.map(b => `
+          <li
+            id="${b.id}"
+
+            class="
+              hidden
+              ${b.classes || ""}
+            "
+          >
+            ${b.content}
+          </li>
+        `).join("")}
+
+      </ul>
+
+      <img
+        id="${imageItem.id}"
+
+        class="
+          hidden
+          ${imageItem.classes || ""}
+        "
+
+        src="${imageItem.content}"
+      />
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}

package/src/compiler/templates/compileImageSlide.js

@@ -0,0 +1,52 @@
+// /src/compiler/templates/compileImageSlide.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileImageSlide(slide) {
+  const rawItems = slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const imageItem =
+    items.find(
+      d => d.name === "image"
+    );
+
+  if (!imageItem) {
+    throw new Error(
+      "imageSlide: requires image"
+    );
+  }
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <section class="slide imageSlide">
+
+      <img
+        id="${imageItem.id}"
+
+        class="
+          hidden
+          ${imageItem.classes || ""}
+        "
+
+        src="${imageItem.content}"
+
+        alt=""
+      />
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}

package/src/compiler/templates/compileImageStrip.js

@@ -0,0 +1,60 @@
+// /src/compiler/templates/compileImageStrip.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileImageStrip(slide) {
+  const rawItems = slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const images =
+    items.filter(
+      d => d.name === "image"
+    );
+
+  if (!images.length) {
+    throw new Error(
+      "imageStrip: requires images"
+    );
+  }
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <section class="slide imageStrip">
+
+      <div class="image-strip">
+
+        ${images.map(img => `
+          <div class="image-strip-item">
+
+            <img
+              id="${img.id}"
+
+              class="
+                hidden
+                ${img.classes || ""}
+              "
+
+              src="${img.content}"
+            />
+
+          </div>
+        `).join("")}
+
+      </div>
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}

package/src/compiler/templates/compileImageWithCaption.js

@@ -0,0 +1,75 @@
+// /src/compiler/templates/compileImageWithCaption.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileImageWithCaption(
+  slide
+) {
+  const rawItems =
+    slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const imageItem =
+    items.find(
+      d => d.name === "image"
+    );
+
+  const captionItem =
+    items.find(
+      d => d.name === "caption"
+    );
+
+  if (!imageItem) {
+    throw new Error(
+      "imageWithCaption: requires image"
+    );
+  }
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <figure class="slide imageWithCaption">
+
+      <img
+        id="${imageItem.id}"
+
+        class="
+          hidden
+          ${imageItem.classes || ""}
+        "
+
+        src="${imageItem.content}"
+      />
+
+      ${
+        captionItem
+          ? `
+            <figcaption
+              id="${captionItem.id}"
+
+              class="
+                hidden
+                ${captionItem.classes || ""}
+              "
+            >
+              ${captionItem.content}
+            </figcaption>
+          `
+          : ""
+      }
+
+    </figure>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}

package/src/compiler/templates/compileImageWithTitle.js

@@ -0,0 +1,75 @@
+// /src/compiler/templates/compileImageWithTitle.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileImageWithTitle(
+  slide
+) {
+  const rawItems =
+    slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const titleItem =
+    items.find(
+      d => d.name === "title"
+    );
+
+  const imageItem =
+    items.find(
+      d => d.name === "image"
+    );
+
+  if (!imageItem) {
+    throw new Error(
+      "imageWithTitle: requires image"
+    );
+  }
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <section class="slide imageWithTitle">
+
+      ${
+        titleItem
+          ? `
+            <h1
+              id="${titleItem.id}"
+
+              class="
+                hidden
+                ${titleItem.classes || ""}
+              "
+            >
+              ${titleItem.content}
+            </h1>
+          `
+          : ""
+      }
+
+      <img
+        id="${imageItem.id}"
+
+        class="
+          hidden
+          ${imageItem.classes || ""}
+        "
+
+        src="${imageItem.content}"
+      />
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}

package/src/compiler/templates/compileKeyIdeasSlide.js

@@ -0,0 +1,62 @@
+// /src/compiler/templates/compileKeyIdeasSlide.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileKeyIdeasSlide(
+  slide
+) {
+  const rawItems =
+    slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const cards =
+    items.filter(
+      d => d.name === "card"
+    );
+
+  if (!cards.length) {
+    throw new Error(
+      "keyIdeasSlide: requires cards"
+    );
+  }
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <section class="slide keyIdeasSlide">
+
+      ${cards.map(card => `
+        <div
+          id="${card.id}"
+
+          class="
+            key-idea
+            hidden
+            ${card.classes || ""}
+          "
+        >
+          <div class="icon">
+            ${card.icon ?? ""}
+          </div>
+
+          <div class="label">
+            ${card.label}
+          </div>
+        </div>
+      `).join("")}
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}

package/src/compiler/templates/compileProgressbar.js

@@ -0,0 +1,74 @@
+// /src/compiler/templates/compileProgressbar.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileProgressbar(slide) {
+  const rawItems = slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const bars =
+    items.filter(
+      d => d.name === "bar"
+    );
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <section class="slide progressbar">
+
+      ${bars.map(bar => {
+        const value =
+          Math.max(
+            0,
+
+            Math.min(
+              100,
+
+              Number(
+                bar.value ?? 0
+              )
+            )
+          );
+
+        return `
+          <div
+            id="${bar.id}"
+
+            class="
+              progressbar-item
+              hidden
+              ${bar.classes || ""}
+            "
+          >
+
+            <div class="progressbar-label">
+              ${bar.label}
+            </div>
+
+            <div class="progressbar-track">
+              <div
+                class="progressbar-fill"
+
+                style="width:${value}%"
+              ></div>
+            </div>
+
+          </div>
+        `;
+      }).join("")}
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}

package/src/compiler/templates/compileQuoteSlide.js

@@ -0,0 +1,72 @@
+// /src/compiler/templates/compileQuoteSlide.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileQuoteSlide(slide) {
+  const rawItems = slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const quoteItem =
+    items.find(
+      d => d.name === "quote"
+    );
+
+  const authorItem =
+    items.find(
+      d => d.name === "author"
+    );
+
+  if (!quoteItem) {
+    throw new Error(
+      "quoteSlide: requires quote"
+    );
+  }
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <blockquote class="slide quoteSlide">
+
+      <p
+        id="${quoteItem.id}"
+
+        class="
+          hidden
+          ${quoteItem.classes || ""}
+        "
+      >
+        ${quoteItem.content}
+      </p>
+
+      ${
+        authorItem
+          ? `
+            <footer
+              id="${authorItem.id}"
+
+              class="
+                hidden
+                ${authorItem.classes || ""}
+              "
+            >
+              ${authorItem.content}
+            </footer>
+          `
+          : ""
+      }
+
+    </blockquote>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}

package/src/compiler/templates/compileSkeletonSlide.js

@@ -0,0 +1,80 @@
+// /src/compiler/templates/compileSkeletonSlide.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileSkeletonSlide(slide) {
+  const rawItems = slide.data ?? [];
+
+  if (!rawItems.length) {
+    throw new Error(
+      "skeletonSlide: requires items"
+    );
+  }
+
+  const items = addIdToItems(rawItems);
+
+  const ids = items.map(i => i.id);
+
+  function renderItem(item) {
+    const id = item.id;
+
+    const classes =
+      item.classes ?? "";
+
+    // --- title ---
+    if (item.name === "title") {
+      return `
+        <h1
+          id="${id}"
+          class="hidden ${classes}"
+        >
+          ${item.content}
+        </h1>
+      `;
+    }
+
+    // --- para ---
+    if (item.name === "para") {
+      return `
+        <p
+          id="${id}"
+          class="hidden ${classes}"
+        >
+          ${item.content}
+        </p>
+      `;
+    }
+
+    // --- image ---
+    if (item.name === "image") {
+      return `
+        <div
+          id="${id}"
+          class="skeleton-image hidden ${classes}"
+        >
+          <img src="${item.content}" />
+        </div>
+      `;
+    }
+
+    return "";
+  }
+
+  const html = `
+    <section class="slide skeleton">
+
+      <div class="skeleton-body">
+        ${items.map(renderItem).join("")}
+      </div>
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation: "oneAtATime",
+
+    ids
+  };
+}

package/src/compiler/templates/compileTable.js

@@ -0,0 +1,70 @@
+
+// /src/compiler/templates/compileTable.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileTable(slide) {
+  const rawItems = slide.data ?? [];
+
+  if (!rawItems.length) {
+    throw new Error(
+      "table: requires rows"
+    );
+  }
+
+  const items =
+    addIdToItems(rawItems);
+
+  const rows =
+    items.filter(
+      d => d.name === "row"
+    );
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <section class="slide table">
+
+      <table>
+        <tbody>
+
+          ${rows.map(row => {
+            const cells =
+              row.content
+                .split(",")
+                .map(s => s.trim());
+
+            return `
+              <tr
+                id="${row.id}"
+
+                class="hidden ${
+                  row.classes || ""
+                }"
+              >
+                ${cells
+                  .map(
+                    cell =>
+                      `<td>${cell}</td>`
+                  )
+                  .join("")}
+              </tr>
+            `;
+          }).join("")}
+
+        </tbody>
+      </table>
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}