md-lv 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2026-01-25
+
+### Added
+
+- **Copy Filename Button**: Added a button next to the current filename in breadcrumbs to copy the filename to clipboard
+
 ## [2.0.0] - 2026-01-25
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-lv",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Serve Markdown files as HTML with live features - syntax highlighting, Mermaid diagrams, and MathJax formulas",
   "type": "module",
   "engines": {

package/public/js/navigation.js

@@ -7,6 +7,7 @@ document.addEventListener('DOMContentLoaded', () => {
   initKeyboardNavigation();
   initDirectoryListNavigation();
   initBackToTop();
+  initCopyFilename();
 });
 
 /**
@@ -181,6 +182,71 @@ function initBackToTop() {
   });
 }
 
+/**
+ * ファイル名コピーボタンを初期化
+ */
+function initCopyFilename() {
+  const breadcrumbs = document.getElementById('breadcrumbs');
+  if (!breadcrumbs) return;
+
+  const currentSpan = breadcrumbs.querySelector('.current');
+  if (!currentSpan) return;
+
+  const filename = currentSpan.textContent.trim();
+  if (!filename) return;
+
+  // コピーボタンを作成
+  const copyButton = document.createElement('button');
+  copyButton.id = 'copy-filename';
+  copyButton.type = 'button';
+  copyButton.title = 'Copy filename';
+  copyButton.setAttribute('aria-label', 'Copy filename');
+  copyButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
+
+  // currentSpanの後にボタンを挿入
+  currentSpan.insertAdjacentElement('afterend', copyButton);
+
+  // クリックイベント
+  copyButton.addEventListener('click', async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    try {
+      await navigator.clipboard.writeText(filename);
+      showCopySuccess(copyButton);
+    } catch (err) {
+      // フォールバック: execCommandを使用
+      const textArea = document.createElement('textarea');
+      textArea.value = filename;
+      textArea.style.position = 'fixed';
+      textArea.style.left = '-9999px';
+      document.body.appendChild(textArea);
+      textArea.select();
+      try {
+        document.execCommand('copy');
+        showCopySuccess(copyButton);
+      } catch (e) {
+        console.error('Copy failed:', e);
+      }
+      document.body.removeChild(textArea);
+    }
+  });
+}
+
+/**
+ * コピー成功時のフィードバック表示
+ */
+function showCopySuccess(button) {
+  const originalHTML = button.innerHTML;
+  button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+  button.classList.add('copied');
+
+  setTimeout(() => {
+    button.innerHTML = originalHTML;
+    button.classList.remove('copied');
+  }, 1500);
+}
+
 /**
  * 入力フィールドにフォーカスがあるかチェック
  */

package/public/styles/base.css

@@ -172,7 +172,7 @@ table th {
 }
 
 table tr {
-  background-color: #ffffff;
+  background-color: #f8f9fb;
   border-top: 1px solid #c6cbd1;
 }
 

package/public/styles/modern.css

@@ -16,6 +16,7 @@
   --color-border: #e1e4e8;
   --color-border-strong: #c6cbd1;
   --color-code-bg: #f6f8fa;
+  --color-table-row: #f8f9fb;
   --color-table-row-alt: #eef1f4;
   --color-blockquote-border: #dfe2e5;
   --color-success: #28a745;
@@ -41,6 +42,7 @@
     --color-border: #30363d;
     --color-border-strong: #484f58;
     --color-code-bg: #161b22;
+    --color-table-row: #13171d;
     --color-table-row-alt: #1c2128;
     --color-blockquote-border: #3b434b;
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -87,6 +89,41 @@ a:hover {
   font-weight: 500;
 }
 
+/* Copy Filename Button */
+#copy-filename {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  padding: 4px 6px;
+  background-color: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  vertical-align: middle;
+}
+
+#copy-filename:hover {
+  background-color: var(--color-bg);
+  border-color: var(--color-border-strong);
+  color: var(--color-text);
+}
+
+#copy-filename:active {
+  transform: scale(0.95);
+}
+
+#copy-filename.copied {
+  color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+#copy-filename svg {
+  display: block;
+}
+
 /* ============================================
    Code Blocks Enhancement
    ============================================ */
@@ -207,7 +244,7 @@ table th {
 }
 
 table tr {
-  background-color: var(--color-bg);
+  background-color: var(--color-table-row);
   border-top: 1px solid var(--color-border);
 }