md-lv 1.0.0

package/public/js/search.js

@@ -0,0 +1,286 @@
+/**
+ * markdown-viewer Search Functionality
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  initSearch();
+});
+
+/**
+ * 検索機能を初期化
+ */
+function initSearch() {
+  // 検索 UI を作成
+  createSearchUI();
+
+  const searchInput = document.getElementById('search-input');
+  const searchResults = document.getElementById('search-results');
+
+  if (!searchInput || !searchResults) return;
+
+  let debounceTimer;
+
+  // 入力時に検索
+  searchInput.addEventListener('input', (e) => {
+    const query = e.target.value.trim();
+
+    // デバウンス処理（300ms）
+    clearTimeout(debounceTimer);
+
+    if (query.length < 1) {
+      hideResults();
+      return;
+    }
+
+    debounceTimer = setTimeout(() => {
+      performSearch(query);
+    }, 300);
+  });
+
+  // フォーカス時に結果を表示
+  searchInput.addEventListener('focus', () => {
+    if (searchInput.value.trim().length >= 1) {
+      showResults();
+    }
+  });
+
+  // クリック外で結果を非表示
+  document.addEventListener('click', (e) => {
+    const searchContainer = document.getElementById('search-container');
+    if (searchContainer && !searchContainer.contains(e.target)) {
+      hideResults();
+    }
+  });
+
+  // Escape で結果を非表示
+  searchInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      hideResults();
+      searchInput.blur();
+    }
+
+    // Arrow Down で結果にフォーカス
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const firstResult = searchResults.querySelector('a');
+      if (firstResult) firstResult.focus();
+    }
+  });
+}
+
+/**
+ * 検索 UI を作成
+ */
+function createSearchUI() {
+  const breadcrumbs = document.getElementById('breadcrumbs');
+  if (!breadcrumbs) return;
+
+  // 検索コンテナを作成
+  const container = document.createElement('div');
+  container.id = 'search-container';
+  container.innerHTML = `
+    <div class="search-wrapper">
+      <input type="text"
+             id="search-input"
+             placeholder="Search files... (press /)"
+             autocomplete="off"
+             aria-label="Search files">
+      <div id="search-results" class="search-results" hidden></div>
+    </div>
+  `;
+
+  // スタイルを追加
+  const style = document.createElement('style');
+  style.textContent = `
+    #search-container {
+      margin-bottom: 16px;
+    }
+
+    .search-wrapper {
+      position: relative;
+    }
+
+    #search-input {
+      width: 100%;
+      max-width: 400px;
+      padding: 8px 12px;
+      font-size: 14px;
+      border: 1px solid var(--color-border, #e1e4e8);
+      border-radius: 6px;
+      background-color: var(--color-bg, #ffffff);
+      color: var(--color-text, #24292e);
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    #search-input:focus {
+      outline: none;
+      border-color: var(--color-link, #0366d6);
+      box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
+    }
+
+    #search-input::placeholder {
+      color: var(--color-text-muted, #6a737d);
+    }
+
+    .search-results {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      max-width: 400px;
+      max-height: 300px;
+      overflow-y: auto;
+      background-color: var(--color-bg, #ffffff);
+      border: 1px solid var(--color-border, #e1e4e8);
+      border-radius: 6px;
+      box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+      z-index: 100;
+      margin-top: 4px;
+    }
+
+    .search-results[hidden] {
+      display: none;
+    }
+
+    .search-result-item {
+      display: block;
+      padding: 8px 12px;
+      color: var(--color-text, #24292e);
+      text-decoration: none;
+      border-bottom: 1px solid var(--color-border, #e1e4e8);
+      font-size: 14px;
+    }
+
+    .search-result-item:last-child {
+      border-bottom: none;
+    }
+
+    .search-result-item:hover,
+    .search-result-item:focus {
+      background-color: var(--color-bg-secondary, #f6f8fa);
+      outline: none;
+    }
+
+    .search-result-item .file-name {
+      font-weight: 500;
+    }
+
+    .search-result-item .file-path {
+      color: var(--color-text-muted, #6a737d);
+      font-size: 12px;
+      margin-top: 2px;
+    }
+
+    .search-no-results {
+      padding: 12px;
+      color: var(--color-text-muted, #6a737d);
+      text-align: center;
+    }
+
+    .search-loading {
+      padding: 12px;
+      text-align: center;
+      color: var(--color-text-muted, #6a737d);
+    }
+  `;
+
+  document.head.appendChild(style);
+
+  // ブレッドクラムの後に挿入
+  breadcrumbs.parentNode.insertBefore(container, breadcrumbs.nextSibling);
+}
+
+/**
+ * 検索を実行
+ */
+async function performSearch(query) {
+  const searchResults = document.getElementById('search-results');
+  if (!searchResults) return;
+
+  // ローディング表示
+  searchResults.innerHTML = '<div class="search-loading">Searching...</div>';
+  showResults();
+
+  try {
+    const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+    const data = await response.json();
+
+    if (data.results.length === 0) {
+      searchResults.innerHTML = '<div class="search-no-results">No results found</div>';
+      return;
+    }
+
+    // 結果を表示
+    const html = data.results.map(filePath => {
+      const fileName = filePath.split('/').pop();
+      const dirPath = filePath.substring(0, filePath.lastIndexOf('/')) || '/';
+
+      return `
+        <a href="${escapeHtml(filePath)}" class="search-result-item">
+          <div class="file-name">${escapeHtml(fileName)}</div>
+          <div class="file-path">${escapeHtml(dirPath)}</div>
+        </a>
+      `;
+    }).join('');
+
+    searchResults.innerHTML = html;
+
+    // キーボードナビゲーション
+    const items = searchResults.querySelectorAll('a');
+    items.forEach((item, index) => {
+      item.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowDown' && index < items.length - 1) {
+          e.preventDefault();
+          items[index + 1].focus();
+        }
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          if (index > 0) {
+            items[index - 1].focus();
+          } else {
+            document.getElementById('search-input').focus();
+          }
+        }
+      });
+    });
+
+  } catch (error) {
+    console.error('Search error:', error);
+    searchResults.innerHTML = '<div class="search-no-results">Search failed</div>';
+  }
+}
+
+/**
+ * 結果を表示
+ */
+function showResults() {
+  const searchResults = document.getElementById('search-results');
+  if (searchResults) {
+    searchResults.hidden = false;
+  }
+}
+
+/**
+ * 結果を非表示
+ */
+function hideResults() {
+  const searchResults = document.getElementById('search-results');
+  if (searchResults) {
+    searchResults.hidden = true;
+  }
+}
+
+/**
+ * HTML エスケープ
+ */
+function escapeHtml(str) {
+  const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
+  return str.replace(/[&<>"']/g, c => map[c]);
+}
+
+// グローバルに公開
+window.mdvSearch = {
+  performSearch,
+  showResults,
+  hideResults
+};

package/public/styles/base.css

@@ -0,0 +1,314 @@
+/* ==========================================================================
+   markdown-viewer Base Styles
+   GitHub-inspired Markdown styling
+   ========================================================================== */
+
+/* Reset & Base */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 16px;
+  line-height: 1.6;
+  color: #24292e;
+  background-color: #ffffff;
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 45px;
+}
+
+/* Breadcrumbs */
+#breadcrumbs {
+  font-size: 14px;
+  color: #586069;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e1e4e8;
+}
+
+#breadcrumbs a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+#breadcrumbs a:hover {
+  text-decoration: underline;
+}
+
+/* Main Content */
+#content {
+  min-height: 400px;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+h1 {
+  font-size: 2em;
+  border-bottom: 1px solid #e1e4e8;
+  padding-bottom: 0.3em;
+}
+
+h2 {
+  font-size: 1.5em;
+  border-bottom: 1px solid #e1e4e8;
+  padding-bottom: 0.3em;
+}
+
+h3 { font-size: 1.25em; }
+h4 { font-size: 1em; }
+h5 { font-size: 0.875em; }
+h6 { font-size: 0.85em; color: #6a737d; }
+
+p {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+/* Links */
+a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Lists */
+ul, ol {
+  padding-left: 2em;
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+ul ul, ul ol, ol ul, ol ol {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+li {
+  margin-top: 0.25em;
+}
+
+li + li {
+  margin-top: 0.25em;
+}
+
+/* Code */
+code {
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 85%;
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+  padding: 0.2em 0.4em;
+}
+
+pre {
+  background-color: #f6f8fa;
+  border-radius: 6px;
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-size: 100%;
+}
+
+/* Blockquote */
+blockquote {
+  margin: 0 0 16px 0;
+  padding: 0 1em;
+  color: #6a737d;
+  border-left: 0.25em solid #dfe2e5;
+}
+
+blockquote > :first-child {
+  margin-top: 0;
+}
+
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  margin-bottom: 16px;
+  overflow: auto;
+}
+
+table th,
+table td {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
+
+table th {
+  font-weight: 600;
+  background-color: #f6f8fa;
+}
+
+table tr {
+  background-color: #ffffff;
+  border-top: 1px solid #c6cbd1;
+}
+
+table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+/* Horizontal Rule */
+hr {
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: #e1e4e8;
+  border: 0;
+}
+
+/* Images */
+img {
+  max-width: 100%;
+  box-sizing: content-box;
+}
+
+/* Directory Listing */
+.directory-listing {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.directory-listing li {
+  padding: 10px 15px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  align-items: center;
+}
+
+.directory-listing li:hover {
+  background-color: #f6f8fa;
+}
+
+.directory-listing li::before {
+  content: '';
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.directory-listing li.folder::before {
+  content: '📁';
+}
+
+.directory-listing li.file::before {
+  content: '📄';
+}
+
+.directory-listing li.file-md::before {
+  content: '📝';
+}
+
+.directory-listing a {
+  flex: 1;
+}
+
+/* Keyboard Navigation Focus */
+.directory-listing li.keyboard-focus {
+  background-color: #f6f8fa;
+  outline: 2px solid #0366d6;
+  outline-offset: -2px;
+}
+
+.directory-listing li.keyboard-focus a {
+  color: #0366d6;
+}
+
+/* Task Lists (GitHub style) */
+.task-list-item {
+  list-style-type: none;
+}
+
+.task-list-item input[type="checkbox"] {
+  margin: 0 0.2em 0.25em -1.6em;
+  vertical-align: middle;
+}
+
+/* Mermaid Diagrams */
+.mermaid {
+  margin: 16px 0;
+  text-align: center;
+}
+
+/* MathJax */
+mjx-container {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+/* Footer */
+footer {
+  margin-top: 40px;
+  padding-top: 20px;
+  color: #6a737d;
+  font-size: 12px;
+}
+
+footer hr {
+  margin-bottom: 20px;
+}
+
+/* Responsive */
+@media (max-width: 767px) {
+  body {
+    padding: 15px;
+  }
+
+  h1 { font-size: 1.5em; }
+  h2 { font-size: 1.25em; }
+
+  table {
+    display: block;
+    overflow-x: auto;
+  }
+}
+
+/* Print Styles */
+@media print {
+  body {
+    max-width: none;
+    padding: 0;
+  }
+
+  #breadcrumbs,
+  footer {
+    display: none;
+  }
+}