@edtools/cli 0.6.1 → 0.7.0

package/dist/adapters/html/templates/components/social-share.ejs

@@ -0,0 +1,202 @@
+<!-- Social Share Buttons Component -->
+<div class="social-share">
+  <div class="social-share-label">Share this article:</div>
+  <div class="social-share-buttons">
+    <!-- Twitter/X -->
+    <a href="https://twitter.com/intent/tweet?text=<%= encodeURIComponent(shareData.title) %>&url=<%= encodeURIComponent(shareData.url) %><% if (shareData.via) { %>&via=<%= shareData.via %><% } %>"
+       class="share-button share-twitter"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Share on Twitter">
+      <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+      </svg>
+      <span>Twitter</span>
+    </a>
+
+    <!-- LinkedIn -->
+    <a href="https://www.linkedin.com/shareArticle?mini=true&url=<%= encodeURIComponent(shareData.url) %>&title=<%= encodeURIComponent(shareData.title) %>&summary=<%= encodeURIComponent(shareData.description) %>"
+       class="share-button share-linkedin"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Share on LinkedIn">
+      <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
+        <circle cx="4" cy="4" r="2"></circle>
+      </svg>
+      <span>LinkedIn</span>
+    </a>
+
+    <!-- Facebook -->
+    <a href="https://www.facebook.com/sharer/sharer.php?u=<%= encodeURIComponent(shareData.url) %>"
+       class="share-button share-facebook"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Share on Facebook">
+      <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+      </svg>
+      <span>Facebook</span>
+    </a>
+
+    <!-- Email -->
+    <a href="mailto:?subject=<%= encodeURIComponent(shareData.title) %>&body=<%= encodeURIComponent('Check out this article: ' + shareData.url) %>"
+       class="share-button share-email"
+       aria-label="Share via Email">
+      <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+        <polyline points="22,6 12,13 2,6"></polyline>
+      </svg>
+      <span>Email</span>
+    </a>
+
+    <!-- Copy Link -->
+    <button class="share-button share-copy"
+            onclick="copyToClipboard('<%= shareData.url %>')"
+            aria-label="Copy link">
+      <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+      </svg>
+      <span id="copy-text">Copy</span>
+    </button>
+  </div>
+</div>
+
+<style>
+  .social-share {
+    margin: 2rem 0;
+    padding: 1.5rem;
+    background: var(--bg-light);
+    border-radius: 0.5rem;
+    border: 1px solid var(--border-color);
+  }
+
+  .social-share-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+  }
+
+  .social-share-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .share-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1rem;
+    border: 1px solid var(--border-color);
+    background: white;
+    color: var(--text-color);
+    text-decoration: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: 0.375rem;
+    transition: all 0.2s;
+    cursor: pointer;
+  }
+
+  .share-button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    text-decoration: none;
+  }
+
+  .share-twitter:hover {
+    background: #1DA1F2;
+    color: white;
+    border-color: #1DA1F2;
+  }
+
+  .share-linkedin:hover {
+    background: #0077B5;
+    color: white;
+    border-color: #0077B5;
+  }
+
+  .share-facebook:hover {
+    background: #1877F2;
+    color: white;
+    border-color: #1877F2;
+  }
+
+  .share-email:hover {
+    background: #EA4335;
+    color: white;
+    border-color: #EA4335;
+  }
+
+  .share-copy:hover {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+  }
+
+  .share-button svg {
+    flex-shrink: 0;
+  }
+
+  /* Mobile responsive */
+  @media (max-width: 640px) {
+    .social-share-buttons {
+      flex-direction: column;
+    }
+
+    .share-button {
+      justify-content: center;
+      width: 100%;
+    }
+  }
+</style>
+
+<script>
+  function copyToClipboard(url) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(url).then(function() {
+        // Show success feedback
+        const copyText = document.getElementById('copy-text');
+        const originalText = copyText.textContent;
+        copyText.textContent = 'Copied!';
+        setTimeout(function() {
+          copyText.textContent = originalText;
+        }, 2000);
+      }).catch(function(err) {
+        console.error('Failed to copy:', err);
+        fallbackCopy(url);
+      });
+    } else {
+      fallbackCopy(url);
+    }
+  }
+
+  function fallbackCopy(url) {
+    // Fallback for older browsers
+    const textArea = document.createElement('textarea');
+    textArea.value = url;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+      document.execCommand('copy');
+      const copyText = document.getElementById('copy-text');
+      const originalText = copyText.textContent;
+      copyText.textContent = 'Copied!';
+      setTimeout(function() {
+        copyText.textContent = originalText;
+      }, 2000);
+    } catch (err) {
+      console.error('Fallback copy failed:', err);
+      alert('Failed to copy link. Please copy manually: ' + url);
+    }
+
+    document.body.removeChild(textArea);
+  }
+</script>