@riebeckite/plugin-flashcards 0.0.5 → 0.0.7

package/dist/client.js

@@ -118,7 +118,8 @@ function createDeckUi(doc, prefix) {
   const answer = doc.createElement("p");
   answer.className = `${prefix}__answer`;
   answer.hidden = true;
-  card.append(question, answer);
+  card.appendChild(question);
+  card.appendChild(answer);
   const controls = doc.createElement("div");
   controls.className = `${prefix}__controls`;
   const prev = createButton(doc, prefix, "prev", "Previous card");
@@ -126,8 +127,13 @@ function createDeckUi(doc, prefix) {
   const next = createButton(doc, prefix, "next", "Next card");
   const shuffle = createButton(doc, prefix, "shuffle", "Shuffle cards");
   reveal.setAttribute("aria-pressed", "false");
-  controls.append(prev, reveal, next, shuffle);
-  root.append(counter, card, controls);
+  controls.appendChild(prev);
+  controls.appendChild(reveal);
+  controls.appendChild(next);
+  controls.appendChild(shuffle);
+  root.appendChild(counter);
+  root.appendChild(card);
+  root.appendChild(controls);
   return { root, counter, question, answer, reveal, prev, next, shuffle };
 }
 function createButton(doc, prefix, action, label) {

package/dist/index.d.ts

@@ -5,8 +5,8 @@ export { parseFlashcards, splitFlashcardGroups } from "./src/parse.js";
 export { createFlashcardsPlaceholder, createFlashcardsPlaceholderPattern, decodeFlashcardsSource, encodeFlashcardsSource, FLASHCARDS_ATTRIBUTE, } from "./src/placeholder.js";
 export { remarkFlashcards } from "./src/remark.js";
 export { renderFlashcards, renderFlashcardsFallback, renderFlashcardsPayload, } from "./src/render.js";
-export { createFlashcardsRuntime } from "./src/runtime.js";
 export type { FlashcardsRuntime } from "./src/runtime.js";
+export { createFlashcardsRuntime } from "./src/runtime.js";
 export type { FlashcardsCard, FlashcardsOptions, FlashcardsParseFailure, FlashcardsParseResult, FlashcardsParseSuccess, FlashcardsPayload, ResolvedFlashcardsOptions, } from "./src/types.js";
 export declare function flashcards(options?: FlashcardsOptions): import("@riebeckite/core").RiebeckitePlugin<FlashcardsOptions>;
 export declare const flashcardsPlugin: typeof flashcards;

package/dist/index.js

@@ -20,24 +20,6 @@ function resolveFlashcardsOptions(options = {}) {
 // src/remark.ts
 import { visit } from "unist-util-visit";
 
-// src/placeholder.ts
-var FLASHCARDS_ATTRIBUTE = "data-rr-flashcards-spec";
-function encodeFlashcardsSource(source) {
-  return encodeURIComponent(source);
-}
-function decodeFlashcardsSource(encoded) {
-  return decodeURIComponent(encoded);
-}
-function createFlashcardsPlaceholder(source) {
-  return `<div ${FLASHCARDS_ATTRIBUTE}="${encodeFlashcardsSource(source)}"></div>`;
-}
-function createFlashcardsPlaceholderPattern() {
-  return new RegExp(
-    `<div\\b[^>]*\\b${FLASHCARDS_ATTRIBUTE}="([^"]*)"[^>]*>\\s*</div>`,
-    "g"
-  );
-}
-
 // src/parse.ts
 var SEPARATOR_LINE = /^[ \t]*-{3,}[ \t]*$/gm;
 var GROUP_BREAK = /\n[ \t]*\n/;
@@ -73,6 +55,24 @@ function parseCard(group) {
   return { front, back };
 }
 
+// src/placeholder.ts
+var FLASHCARDS_ATTRIBUTE = "data-rr-flashcards-spec";
+function encodeFlashcardsSource(source) {
+  return encodeURIComponent(source);
+}
+function decodeFlashcardsSource(encoded) {
+  return decodeURIComponent(encoded);
+}
+function createFlashcardsPlaceholder(source) {
+  return `<div ${FLASHCARDS_ATTRIBUTE}="${encodeFlashcardsSource(source)}"></div>`;
+}
+function createFlashcardsPlaceholderPattern() {
+  return new RegExp(
+    `<div\\b[^>]*\\b${FLASHCARDS_ATTRIBUTE}="([^"]*)"[^>]*>\\s*</div>`,
+    "g"
+  );
+}
+
 // src/remark.ts
 var FLASHCARDS_DIAGNOSTIC_SOURCE = "@riebeckite/plugin-flashcards";
 function remarkFlashcards(options = {}) {
@@ -115,7 +115,11 @@ import {
 } from "@riebeckite/core";
 
 // src/render.ts
-import { escapeHtml, escapeHtmlAttribute } from "@riebeckite/core";
+import {
+  escapeHtml,
+  escapeHtmlAttribute,
+  escapeScriptJson
+} from "@riebeckite/core";
 function renderFlashcards(cards, options) {
   const { className } = options;
   const attributes = [
@@ -134,7 +138,7 @@ function renderFlashcards(cards, options) {
 }
 function renderFlashcardsPayload(cards) {
   const payload = { cards: [...cards] };
-  return `<script type="application/json" data-flashcards-payload>${escapeJsonForScript(JSON.stringify(payload))}</script>`;
+  return `<script type="application/json" data-flashcards-payload>${escapeScriptJson(JSON.stringify(payload))}</script>`;
 }
 function renderFlashcardsFallback(cards, className = "rb-flashcards") {
   const items = cards.map((card) => renderFallbackItem(card, className)).join("");
@@ -150,9 +154,6 @@ function renderFallbackItem(card, className) {
     "</li>"
   ].join("");
 }
-function escapeJsonForScript(json) {
-  return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
-}
 
 // src/runtime.ts
 function createFlashcardsRuntime(options) {
@@ -332,7 +333,8 @@ function createDeckUi(doc, prefix) {
   const answer = doc.createElement("p");
   answer.className = `${prefix}__answer`;
   answer.hidden = true;
-  card.append(question, answer);
+  card.appendChild(question);
+  card.appendChild(answer);
   const controls = doc.createElement("div");
   controls.className = `${prefix}__controls`;
   const prev = createButton(doc, prefix, "prev", "Previous card");
@@ -340,8 +342,13 @@ function createDeckUi(doc, prefix) {
   const next = createButton(doc, prefix, "next", "Next card");
   const shuffle = createButton(doc, prefix, "shuffle", "Shuffle cards");
   reveal.setAttribute("aria-pressed", "false");
-  controls.append(prev, reveal, next, shuffle);
-  root.append(counter, card, controls);
+  controls.appendChild(prev);
+  controls.appendChild(reveal);
+  controls.appendChild(next);
+  controls.appendChild(shuffle);
+  root.appendChild(counter);
+  root.appendChild(card);
+  root.appendChild(controls);
   return { root, counter, question, answer, reveal, prev, next, shuffle };
 }
 function createButton(doc, prefix, action, label) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-flashcards",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@types/mdast": "^4.0.4",
     "unist-util-visit": "^5.1.0",
-    "@riebeckite/core": "0.0.5"
+    "@riebeckite/core": "0.0.7"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -1,116 +1,116 @@
-.rb-flashcards {
-  --rb-flashcards-ink: var(--rb-color-ink, #000000);
-  --rb-flashcards-paper: var(--rb-color-paper, #ffffff);
-  --rb-flashcards-muted: var(--rb-color-muted, #69645c);
-  --rb-flashcards-accent: var(--rb-color-accent, #686868);
-  --rb-flashcards-rule: var(
-    --rb-color-border,
-    color-mix(in srgb, var(--rb-flashcards-ink) 18%, transparent)
-  );
-
-  margin: 1.5rem 0;
-  color: var(--rb-flashcards-ink);
-}
-
-.rb-flashcards__list {
-  display: grid;
-  gap: 0.75rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.rb-flashcards__item {
-  display: grid;
-  gap: 0.25rem;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--rb-flashcards-rule);
-}
-
-.rb-flashcards__front {
-  font-weight: 600;
-  white-space: pre-line;
-}
-
-.rb-flashcards__back {
-  color: var(--rb-flashcards-muted);
-  white-space: pre-line;
-}
-
-.rb-flashcards__deck {
-  display: grid;
-  gap: 1rem;
-  outline-offset: 4px;
-}
-
-.rb-flashcards__deck:focus-visible {
-  outline: 2px solid var(--rb-flashcards-accent);
-}
-
-.rb-flashcards__counter {
-  margin: 0;
-  color: var(--rb-flashcards-muted);
-  font-size: 0.8125rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.rb-flashcards__card {
-  padding: 1.25rem 1.5rem;
-  border: 1px solid var(--rb-flashcards-rule);
-}
-
-.rb-flashcards__question {
-  margin: 0;
-  font-size: 1.0625rem;
-  font-weight: 600;
-  line-height: 1.6;
-  white-space: pre-line;
-}
-
-.rb-flashcards__answer {
-  margin: 0.75rem 0 0;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--rb-flashcards-rule);
-  line-height: 1.7;
-  white-space: pre-line;
-}
-
-.rb-flashcards__answer[hidden] {
-  display: none;
-}
-
-.rb-flashcards__controls {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.rb-flashcards__button {
-  padding: 0.375rem 0.75rem;
-  border: 1px solid var(--rb-flashcards-ink);
-  border-radius: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 0.875rem;
-  cursor: pointer;
-}
-
-.rb-flashcards__button:hover,
-.rb-flashcards__button:focus-visible {
-  border-color: var(--rb-flashcards-accent);
-  color: var(--rb-flashcards-accent);
-  outline: none;
-}
-
-.rb-flashcards--invalid {
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--rb-flashcards-ink);
-  font-size: 0.875rem;
-}
-
-html[data-theme="dark"] .rb-flashcards,
-html.dark .rb-flashcards {
-  --rb-flashcards-ink: var(--rb-color-paper, #ffffff);
-  --rb-flashcards-paper: var(--rb-color-ink, #000000);
-}
+.rb-flashcards {
+  --rb-flashcards-ink: var(--rb-color-ink, #000000);
+  --rb-flashcards-paper: var(--rb-color-paper, #ffffff);
+  --rb-flashcards-muted: var(--rb-color-muted, #69645c);
+  --rb-flashcards-accent: var(--rb-color-accent, #686868);
+  --rb-flashcards-rule: var(
+    --rb-color-border,
+    color-mix(in srgb, var(--rb-flashcards-ink) 18%, transparent)
+  );
+
+  margin: 1.5rem 0;
+  color: var(--rb-flashcards-ink);
+}
+
+.rb-flashcards__list {
+  display: grid;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.rb-flashcards__item {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--rb-flashcards-rule);
+}
+
+.rb-flashcards__front {
+  font-weight: 600;
+  white-space: pre-line;
+}
+
+.rb-flashcards__back {
+  color: var(--rb-flashcards-muted);
+  white-space: pre-line;
+}
+
+.rb-flashcards__deck {
+  display: grid;
+  gap: 1rem;
+  outline-offset: 4px;
+}
+
+.rb-flashcards__deck:focus-visible {
+  outline: 2px solid var(--rb-flashcards-accent);
+}
+
+.rb-flashcards__counter {
+  margin: 0;
+  color: var(--rb-flashcards-muted);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.rb-flashcards__card {
+  padding: 1.25rem 1.5rem;
+  border: 1px solid var(--rb-flashcards-rule);
+}
+
+.rb-flashcards__question {
+  margin: 0;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  line-height: 1.6;
+  white-space: pre-line;
+}
+
+.rb-flashcards__answer {
+  margin: 0.75rem 0 0;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--rb-flashcards-rule);
+  line-height: 1.7;
+  white-space: pre-line;
+}
+
+.rb-flashcards__answer[hidden] {
+  display: none;
+}
+
+.rb-flashcards__controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.rb-flashcards__button {
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--rb-flashcards-ink);
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.rb-flashcards__button:hover,
+.rb-flashcards__button:focus-visible {
+  border-color: var(--rb-flashcards-accent);
+  color: var(--rb-flashcards-accent);
+  outline: none;
+}
+
+.rb-flashcards--invalid {
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--rb-flashcards-ink);
+  font-size: 0.875rem;
+}
+
+html[data-theme="dark"] .rb-flashcards,
+html.dark .rb-flashcards {
+  --rb-flashcards-ink: var(--rb-color-paper, #ffffff);
+  --rb-flashcards-paper: var(--rb-color-ink, #000000);
+}