feat: add toast notification and checkmark icon on copy success

Show a toast above the button with format-specific message
(e.g. "已复制 Markdown 格式") and swap the copy icon to a checkmark,
similar to volcengine docs.

Author: solarhell

assets/js/copy-to-llm.js

@@ -46,12 +46,15 @@
     });
   });
 
+  var toast = document.getElementById('copy-fulltext-toast');
+
   function getSourceData() {
     var mdEl = document.getElementById('copy-fulltext-markdown');
     return {
       title: container.getAttribute('data-title') || '',
       url: container.getAttribute('data-url') || '',
-      successText: container.getAttribute('data-success-text') || 'Copied',
+      successMarkdown: container.getAttribute('data-success-markdown') || 'Copied as Markdown',
+      successText: container.getAttribute('data-success-text') || 'Copied as plain text',
       markdown: mdEl ? mdEl.textContent : ''
     };
   }
@@ -90,32 +93,34 @@
   function copyContent(type) {
     var data = getSourceData();
     var text = '';
+    var actualType = type;
 
     if (type === 'markdown' && data && data.markdown) {
       text = '# ' + data.title + '\n\n' + data.markdown;
       if (data.url) {
         text += '\n\n---\nSource: ' + data.url;
       }
     } else {
+      actualType = 'text';
       text = getPlainText();
     }
 
-    copyToClipboard(text, data);
+    copyToClipboard(text, data, actualType);
   }
 
-  function copyToClipboard(text, data) {
+  function copyToClipboard(text, data, type) {
     if (navigator.clipboard && navigator.clipboard.writeText) {
       navigator.clipboard.writeText(text).then(function () {
-        showFeedback(data);
+        showFeedback(data, type);
       }).catch(function () {
-        fallbackCopy(text, data);
+        fallbackCopy(text, data, type);
       });
     } else {
-      fallbackCopy(text, data);
+      fallbackCopy(text, data, type);
     }
   }
 
-  function fallbackCopy(text, data) {
+  function fallbackCopy(text, data, type) {
     var textarea = document.createElement('textarea');
     textarea.value = text;
     textarea.style.position = 'fixed';
@@ -124,22 +129,28 @@
     textarea.select();
     try {
       document.execCommand('copy');
-      showFeedback(data);
+      showFeedback(data, type);
     } catch (e) {
       // silent fail
     }
     document.body.removeChild(textarea);
   }
 
-  function showFeedback(data) {
-    var span = defaultBtn.querySelector('span');
-    var original = span.textContent;
-    var successText = (data && data.successText) || 'Copied';
-    span.textContent = '✓ ' + successText;
+  function showFeedback(data, type) {
+    // Swap icon to checkmark
+    var icon = defaultBtn.querySelector('i');
+    icon.classList.replace('fa-copy', 'fa-check');
     defaultBtn.classList.add('copy-fulltext__btn--success');
+
+    // Show toast
+    var toastText = type === 'markdown' ? data.successMarkdown : data.successText;
+    toast.textContent = '✅ ' + toastText;
+    toast.classList.add('copy-fulltext__toast--visible');
+
     setTimeout(function () {
-      span.textContent = original;
+      icon.classList.replace('fa-check', 'fa-copy');
       defaultBtn.classList.remove('copy-fulltext__btn--success');
+      toast.classList.remove('copy-fulltext__toast--visible');
     }, 2000);
   }
 })();

assets/scss/_copy-to-llm.scss

@@ -56,6 +56,28 @@
     }
   }
 
+  &__toast {
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    background: $white;
+    border: 1px solid $gray-300;
+    border-radius: $border-radius;
+    box-shadow: 0 4px 12px rgba($black, 0.1);
+    font-size: 0.875rem;
+    color: $gray-700;
+    white-space: nowrap;
+    z-index: 11;
+
+    &--visible {
+      display: block;
+    }
+  }
+
   &__dropdown {
     display: none;
     position: absolute;

i18n/en.toml

@@ -91,5 +91,8 @@ other = "Copy Markdown"
 [copy_plain_text]
 other = "Copy Text"
 
-[copy_success]
-other = "Copied"
+[copy_success_markdown]
+other = "Copied as Markdown"
+
+[copy_success_text]
+other = "Copied as plain text"

i18n/zh.toml

@@ -85,5 +85,8 @@ other = "复制 Markdown"
 [copy_plain_text]
 other = "复制文本"
 
-[copy_success]
-other = "已复制"
+[copy_success_markdown]
+other = "已复制 Markdown 格式"
+
+[copy_success_text]
+other = "已复制纯文本"

layouts/partials/copy-to-llm.html

@@ -2,7 +2,8 @@
 <div class="copy-fulltext" id="copy-fulltext"
   data-title="{{ .Title }}"
   data-url="{{ .Permalink }}"
-  data-success-text="{{ T "copy_success" }}">
+  data-success-markdown="{{ T "copy_success_markdown" }}"
+  data-success-text="{{ T "copy_success_text" }}">
   <div class="copy-fulltext__main">
     <button class="copy-fulltext__btn" id="copy-fulltext-default" title="{{ T "copy_full_text" }}">
       <i class="fa-regular fa-copy"></i>
@@ -12,6 +13,7 @@
       <i class="fa-solid fa-chevron-up"></i>
     </button>
   </div>
+  <div class="copy-fulltext__toast" id="copy-fulltext-toast"></div>
   <div class="copy-fulltext__dropdown" id="copy-fulltext-dropdown">
     <button class="copy-fulltext__option" data-copy-type="markdown">
       {{ T "copy_markdown" }}