fossbook 0.2.13 → 0.2.14

package/README.md

@@ -300,6 +300,9 @@ module.exports = {
   previousPageLabel: "앞으로",
   nextPageLabel: "뒤로",
   transcriptLabel: "말글 보이기",
+  copyLinkLabel: "링크 복사",
+  linkCopiedLabel: "링크를 복사했습니다",
+  copyLinkErrorLabel: "링크를 복사하지 못했습니다",
 };
 ```
 

package/lib/init.js

@@ -130,7 +130,7 @@ function initProject(options = {}) {
   // fossbook.config.ko.js, and so on. Menu labels can also be localized with
   // homeLabel, allPostsLabel, aboutLabel, tagsLabel, allTagsLabel,
   // postedOnLabel, readMoreLabel, previousPageLabel, nextPageLabel,
-  // and transcriptLabel.
+  // transcriptLabel, copyLinkLabel, linkCopiedLabel, and copyLinkErrorLabel.
 
   // Comment system (optional)
   // comments: { provider: "utterances", repo: "user/repo", issueTerm: "pathname", theme: "github-light" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fossbook",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "A Markdown-based authoring and web-publishing tool for comics, illustrated stories, and articles",
   "main": "lib/index.js",
   "scripts": {

package/themes/archie/assets/styles/main.css

@@ -69,12 +69,38 @@
     width: var(--dialogue-width, 100%);
   }
 
-  .transcript-control {
+  .post-controls {
+    align-items: center;
     display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
     justify-content: flex-end;
     margin: .75rem 0 1.5rem;
   }
 
+  .copy-link-button {
+    background: transparent;
+    border: 1px solid var(--bordercl);
+    border-radius: 4px;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    font-size: .78rem;
+    line-height: 1.2;
+    min-height: 1.75rem;
+    padding: .15rem .4rem;
+  }
+
+  .copy-link-button:hover {
+    background: var(--hovercolor);
+    color: #fff;
+  }
+
+  .copy-link-button:focus-visible {
+    outline: 2px solid var(--hovercolor);
+    outline-offset: 2px;
+  }
+
   .transcript-toggle {
     align-items: center;
     display: inline-flex;
@@ -124,7 +150,16 @@
   }
 
   .transcripts-hidden .image-dialogue {
-    display: none;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute !important;
+    white-space: nowrap;
+    width: 1px;
   }
 
 
@@ -152,12 +187,20 @@
   }
 
   @media print {
-    .transcript-control {
+    .post-controls {
       display: none;
     }
 
     .transcripts-hidden .image-dialogue {
       display: flex;
+      clip: auto;
+      clip-path: none;
+      height: auto;
+      margin: 0 auto;
+      overflow: visible;
+      position: static !important;
+      white-space: normal;
+      width: var(--dialogue-width, 100%);
     }
   }
   

package/themes/archie/layouts/post.html

@@ -29,9 +29,10 @@
 
         ${page.twitterCard("summary")}
         ${page.body.includes('class="blockquote-container image-dialogue"') ? `<script>
+          document.documentElement.classList.add("transcripts-hidden");
           try {
-            if (localStorage.getItem("fossbook-comic-transcript") === "hidden") {
-              document.documentElement.classList.add("transcripts-hidden");
+            if (localStorage.getItem("fossbook-comic-transcript") === "visible") {
+              document.documentElement.classList.remove("transcripts-hidden");
             }
           } catch (error) {}
         </script>` : ""}
@@ -56,12 +57,15 @@
                     <div class="meta">${page.config.postedOnLabel || "Posted on"} ${page.formatDate(new Date(page.date))}</div>
                     ${page.languageSwitcher()}
                   </div>
-                  ${page.body.includes('class="blockquote-container image-dialogue"') ? `<div class="transcript-control">
-                    <div class="transcript-toggle">
+                  <div class="post-controls">
+                    ${page.body.includes('class="blockquote-container image-dialogue"') ? `<div class="transcript-toggle">
                       <label for="comic-transcript-toggle">${page.config.transcriptLabel || "Display dialogue text"}</label>
-                      <input id="comic-transcript-toggle" type="checkbox" role="switch" aria-controls="comic-transcript" checked>
-                    </div>
-                  </div>` : ""}
+                      <input id="comic-transcript-toggle" type="checkbox" role="switch" aria-controls="comic-transcript">
+                    </div>` : ""}
+                    <button class="copy-link-button" type="button">
+                      <span aria-live="polite">${page.config.copyLinkLabel || "Copy link"}</span>
+                    </button>
+                  </div>
                   <section class="body" id="comic-transcript">
                     ${page.body}
                   </section>
@@ -100,6 +104,40 @@
             import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
             mermaid.initialize({ startOnLoad: true });
         </script>` : ""}
+        <script>
+          const copyLinkButton = document.querySelector(".copy-link-button");
+          const copyLinkLabel = copyLinkButton.querySelector("span");
+          const defaultCopyLinkLabel = copyLinkLabel.textContent;
+          let copyLinkResetTimer;
+          const copyEpisodeLink = async () => {
+            const canonicalLink = document.querySelector('link[rel="canonical"]');
+            const episodeUrl = canonicalLink ? canonicalLink.href : window.location.href;
+            try {
+              if (navigator.clipboard && navigator.clipboard.writeText) {
+                await navigator.clipboard.writeText(episodeUrl);
+              } else {
+                const textArea = document.createElement("textarea");
+                textArea.value = episodeUrl;
+                textArea.setAttribute("readonly", "");
+                textArea.style.position = "fixed";
+                textArea.style.opacity = "0";
+                document.body.appendChild(textArea);
+                textArea.select();
+                const copied = document.execCommand("copy");
+                textArea.remove();
+                if (!copied) throw new Error("Copy command failed");
+              }
+              copyLinkLabel.textContent = ${JSON.stringify(page.config.linkCopiedLabel || "Link copied")};
+            } catch (error) {
+              copyLinkLabel.textContent = ${JSON.stringify(page.config.copyLinkErrorLabel || "Could not copy link")};
+            }
+            clearTimeout(copyLinkResetTimer);
+            copyLinkResetTimer = setTimeout(() => {
+              copyLinkLabel.textContent = defaultCopyLinkLabel;
+            }, 2000);
+          };
+          copyLinkButton.addEventListener("click", copyEpisodeLink);
+        </script>
         ${page.body.includes('class="blockquote-container image-dialogue"') ? `<script>
           const transcriptToggle = document.querySelector("#comic-transcript-toggle");
           const transcriptStorageKey = "fossbook-comic-transcript";