coradoc-html 1.1.7 → 1.1.13

data/lib/coradoc/html/theme/modern/components/ui_components.rb

@@ -1,344 +0,0 @@
-# frozen_string_literal: true
-
-module Coradoc
-  module Html
-    module Theme
-      class ModernRenderer
-        # UI component templates for interactive elements
-        module UIComponents
-          class << self
-            # Generate UI components HTML
-            #
-            # @param config [Hash] Theme configuration
-            # @return [String] UI components HTML
-            def generate_html(config)
-              <<~HTML
-                <!-- Reading Progress Bar -->
-                #{reading_progress_html(config)}
-
-                <!-- Theme Toggle Button -->
-                #{theme_toggle_html(config)}
-
-                <!-- Back to Top Button -->
-                #{back_to_top_html(config)}
-              HTML
-            end
-
-            # Reading progress bar HTML
-            #
-            # @param config [Hash] Theme configuration
-            # @return [String] Reading progress bar HTML
-            def reading_progress_html(config)
-              return '' unless config[:reading_progress]
-
-              <<~HTML
-                <div id="reading-progress" :style="{ width: scrollProgress + '%' }"></div>
-              HTML
-            end
-
-            # Theme toggle button HTML
-            #
-            # @param config [Hash] Theme configuration
-            # @return [String] Theme toggle button HTML
-            def theme_toggle_html(config)
-              return '' unless config[:theme_toggle]
-
-              <<~HTML
-                <button
-                  id="theme-toggle"
-                  @click="toggleTheme"
-                  :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
-                  aria-label="Toggle dark mode"
-                  class="fixed top-4 right-4 p-2 rounded-full bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200 dark:border-gray-700 shadow-lg hover:shadow-xl transition-all hover:scale-110 z-50"
-                >
-                  <svg v-if="!isDark" class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h1a1 1 0 100 2h-1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
-                  </svg>
-                  <svg v-else class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-                  </svg>
-                </button>
-              HTML
-            end
-
-            # Back to top button HTML
-            #
-            # @param config [Hash] Theme configuration
-            # @return [String] Back to top button HTML
-            def back_to_top_html(config)
-              return '' unless config[:back_to_top]
-
-              <<~HTML
-                <button
-                  id="back-to-top"
-                  v-show="showBackToTop"
-                  @click="scrollToTop"
-                  title="Back to top"
-                  aria-label="Back to top"
-                  class="fixed bottom-6 right-6 p-3 rounded-full bg-gradient-to-r from-primary-600 to-primary-500 text-white shadow-lg hover:shadow-xl transition-all hover:scale-110 z-50"
-                  :class="{ 'opacity-0 pointer-events-none translate-y-2': !showBackToTop }"
-                >
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
-                  </svg>
-                </button>
-              HTML
-            end
-
-            # Enhanced document template with UI components
-            #
-            # @return [String] Enhanced document template
-            def enhanced_document_template(_config)
-              <<~VUE
-                <div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 transition-colors duration-300">
-                  <!-- Reading Progress Bar -->
-                  <div v-if="config.reading_progress" class="reading-progress-bar" :style="{ width: scrollProgress + '%' }"></div>
-
-                  <!-- Theme Toggle Button -->
-                  <button
-                    v-if="config.theme_toggle"
-                    @click="toggleTheme"
-                    class="theme-toggle-btn"
-                    :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
-                  >
-                    <svg v-if="!isDark" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                      <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h1a1 1 0 100 2h-1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
-                    </svg>
-                    <svg v-else class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-                    </svg>
-                  </button>
-
-                  <!-- Back to Top Button -->
-                  <button
-                    v-if="config.back_to_top"
-                    v-show="showBackToTop"
-                    @click="scrollToTop"
-                    class="back-to-top-btn"
-                    title="Back to top"
-                  >
-                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
-                    </svg>
-                  </button>
-
-                  <!-- Main Document Container -->
-                  <div class="document-container mx-auto px-4 py-8 max-w-7xl">
-                    <div class="flex gap-8">
-                      <!-- TOC Sidebar -->
-                      <aside v-if="config.toc_sticky && showToc" class="toc-sidebar" :class="{ 'collapsed': tocCollapsed }">
-                        <nav class="toc-nav sticky top-4">
-                          <h3 class="toc-title text-lg font-semibold mb-4 text-gray-900 dark:text-white">Contents</h3>
-                          <ul class="toc-list space-y-1">
-                            <li
-                              v-for="item in tocItems"
-                              :key="item.id"
-                              @click="scrollToSection(item.id)"
-                              class="toc-item p-2 rounded-lg cursor-pointer transition-all"
-                              :class="{ 'active': activeSection === item.id }"
-                              :style="{ paddingLeft: (item.level * 0.75 + 1) + 'rem' }"
-                            >
-                              {{ item.title }}
-                            </li>
-                          </ul>
-                        </nav>
-                      </aside>
-
-                      <!-- Main Content -->
-                      <main class="flex-1 min-w-0">
-                        <article class="prose prose-lg dark:prose-invert max-w-none
-                                       prose-headings:text-gray-900 dark:prose-headings:text-white
-                                       prose-p:text-gray-700 dark:prose-p:text-gray-300
-                                       prose-a:text-primary-600 dark:prose-a:text-primary-400
-                                       prose-strong:text-gray-900 dark:prose-strong:text-white
-                                       prose-code:text-pink-600 dark:prose-code:text-pink-400
-                                       prose-pre:bg-gray-100 dark:prose-pre:bg-gray-800">
-                          <template v-for="(section, index) in document.sections" :key="section.id || index">
-                            <component :is="'section-' + section.type" :data="section" v-if="section.type === 'section'" />
-                            <component :is="'element-' + section.type" :data="section" v-else />
-                          </template>
-                        </article>
-                      </main>
-                    </div>
-                  </div>
-                </div>
-              VUE
-            end
-
-            # Generate complete CSS with enhanced styles
-            #
-            # @param config [Hash] Theme configuration
-            # @return [String] Enhanced CSS
-            def enhanced_css(config)
-              base_css = CSSGenerator.generate(config)
-
-              base_css + <<~CSS
-
-                /* Reading Progress Bar */
-                .reading-progress-bar {
-                  position: fixed;
-                  top: 0;
-                  left: 0;
-                  height: 3px;
-                  background: linear-gradient(90deg, #{config[:primary_color]}, #{config[:accent_color]});
-                  transition: width 0.1s ease-out;
-                  z-index: 9999;
-                }
-
-                /* Theme Toggle Button */
-                .theme-toggle-btn {
-                  position: fixed;
-                  top: 1.5rem;
-                  right: 1.5rem;
-                  width: 2.75rem;
-                  height: 2.75rem;
-                  border-radius: 9999px;
-                  background: rgba(255, 255, 255, 0.9);
-                  backdrop-filter: blur(10px);
-                  border: 1px solid rgba(0, 0, 0, 0.1);
-                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  cursor: pointer;
-                  transition: all 0.3s ease;
-                  z-index: 1000;
-                }
-
-                .theme-toggle-btn:hover {
-                  transform: scale(1.1);
-                  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
-                }
-
-                .dark .theme-toggle-btn {
-                  background: rgba(0, 0, 0, 0.5);
-                  border-color: rgba(255, 255, 255, 0.1);
-                }
-
-                /* Back to Top Button */
-                .back-to-top-btn {
-                  position: fixed;
-                  bottom: 1.5rem;
-                  right: 1.5rem;
-                  width: 3rem;
-                  height: 3rem;
-                  border-radius: 9999px;
-                  background: linear-gradient(135deg, #{config[:primary_color]}, #{config[:accent_color]});
-                  color: white;
-                  border: none;
-                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  cursor: pointer;
-                  transition: all 0.3s ease;
-                  opacity: 1;
-                  transform: translateY(0);
-                  z-index: 1000;
-                }
-
-                .back-to-top-btn:hover {
-                  transform: translateY(-2px);
-                  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
-                }
-
-                .back-to-top-btn.opacity-0 {
-                  opacity: 0;
-                  pointer-events: none;
-                  transform: translateY(10px);
-                }
-
-                /* TOC Sidebar */
-                .toc-sidebar {
-                  position: sticky;
-                  top: 2rem;
-                  width: #{config[:sidebar_width] || '280px'};
-                  max-height: calc(100vh - 4rem);
-                  overflow-y: auto;
-                  padding: 1.5rem;
-                  background: rgba(255, 255, 255, 0.8);
-                  backdrop-filter: blur(10px);
-                  border: 1px solid rgba(0, 0, 0, 0.1);
-                  border-radius: 0.75rem;
-                  transition: all 0.3s ease;
-                  z-index: 100;
-                }
-
-                .dark .toc-sidebar {
-                  background: rgba(0, 0, 0, 0.5);
-                  border-color: rgba(255, 255, 255, 0.1);
-                }
-
-                .toc-sidebar.collapsed {
-                  transform: translateX(-120%);
-                  opacity: 0;
-                }
-
-                .toc-item {
-                  display: block;
-                  color: #6b7280;
-                  transition: all 0.2s ease;
-                }
-
-                .dark .toc-item {
-                  color: #9ca3af;
-                }
-
-                .toc-item:hover {
-                  background: rgba(99, 102, 241, 0.1);
-                  color: #{config[:primary_color]};
-                }
-
-                .toc-item.active {
-                  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
-                  color: #{config[:primary_color]};
-                  font-weight: 600;
-                }
-
-                /* Document Container */
-                .document-container {
-                  background: transparent;
-                }
-
-                /* Smooth animations */
-                @media (prefers-reduced-motion: no-preference) {
-                  .toc-item {
-                    animation: slideIn 0.3s ease-out;
-                  }
-
-                  @keyframes slideIn {
-                    from {
-                      opacity: 0;
-                      transform: translateX(-10px);
-                    }
-                    to {
-                      opacity: 1;
-                      transform: translateX(0);
-                    }
-                  }
-                }
-
-                /* Responsive */
-                @media (max-width: 1024px) {
-                  .toc-sidebar {
-                    position: fixed;
-                    left: 0;
-                    top: 0;
-                    height: 100vh;
-                    max-height: 100vh;
-                    z-index: 200;
-                    transform: translateX(-100%);
-                  }
-
-                  .toc-sidebar:not(.collapsed) {
-                    transform: translateX(0);
-                  }
-                }
-              CSS
-            end
-          end
-        end
-      end
-    end
-  end
-end

data/lib/coradoc/html/theme/modern/css_generator.rb

@@ -1,311 +0,0 @@
-# frozen_string_literal: true
-
-module Coradoc
-  module Html
-    module Theme
-      class ModernRenderer
-        # Generate custom CSS for glass morphism and special effects
-        module CSSGenerator
-          class << self
-            # Generate custom CSS
-            #
-            # @param config [Hash] Theme configuration
-            # @return [String] CSS content
-            def generate(config)
-              <<~CSS
-                /* Glass Morphism Effects */
-                .glass {
-                  background: rgba(255, 255, 255, 0.1);
-                  backdrop-filter: blur(10px);
-                  -webkit-backdrop-filter: blur(10px);
-                  border: 1px solid rgba(255, 255, 255, 0.2);
-                }
-
-                .glass-dark {
-                  background: rgba(0, 0, 0, 0.2);
-                  backdrop-filter: blur(10px);
-                  -webkit-backdrop-filter: blur(10px);
-                  border: 1px solid rgba(255, 255, 255, 0.1);
-                }
-
-                /* Custom scrollbar */
-                ::-webkit-scrollbar {
-                  width: 8px;
-                  height: 8px;
-                }
-
-                ::-webkit-scrollbar-track {
-                  background: rgba(0, 0, 0, 0.05);
-                  border-radius: 4px;
-                }
-
-                ::-webkit-scrollbar-thumb {
-                  background: rgba(99, 102, 241, 0.5);
-                  border-radius: 4px;
-                  transition: background 0.3s;
-                }
-
-                ::-webkit-scrollbar-thumb:hover {
-                  background: rgba(99, 102, 241, 0.7);
-                }
-
-                .dark ::-webkit-scrollbar-track {
-                  background: rgba(255, 255, 255, 0.05);
-                }
-
-                .dark ::-webkit-scrollbar-thumb {
-                  background: rgba(139, 92, 246, 0.5);
-                }
-
-                .dark ::-webkit-scrollbar-thumb:hover {
-                  background: rgba(139, 92, 246, 0.7);
-                }
-
-                /* Reading progress bar */
-                #reading-progress {
-                  position: fixed;
-                  top: 0;
-                  left: 0;
-                  height: 3px;
-                  background: linear-gradient(90deg, #{config[:primary_color]}, #{config[:accent_color]});
-                  transition: width 0.1s ease-out;
-                  z-index: 9999;
-                }
-
-                /* Back to top button */
-                #back-to-top {
-                  position: fixed;
-                  bottom: 2rem;
-                  right: 2rem;
-                  width: 3rem;
-                  height: 3rem;
-                  border-radius: 50%;
-                  background: #{config[:primary_color]};
-                  color: white;
-                  border: none;
-                  cursor: pointer;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-                  transition: all 0.3s ease;
-                  z-index: 1000;
-                }
-
-                #back-to-top:hover {
-                  transform: translateY(-2px);
-                  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
-                }
-
-                #back-to-top.hidden {
-                  opacity: 0;
-                  pointer-events: none;
-                  transform: translateY(10px);
-                }
-
-                /* Theme toggle button */
-                #theme-toggle {
-                  position: fixed;
-                  top: 1rem;
-                  right: 1rem;
-                  padding: 0.5rem;
-                  border-radius: 0.5rem;
-                  background: rgba(255, 255, 255, 0.9);
-                  border: 1px solid rgba(0, 0, 0, 0.1);
-                  cursor: pointer;
-                  transition: all 0.3s ease;
-                  z-index: 1000;
-                }
-
-                .dark #theme-toggle {
-                  background: rgba(0, 0, 0, 0.5);
-                  border-color: rgba(255, 255, 255, 0.1);
-                }
-
-                #theme-toggle:hover {
-                  transform: scale(1.05);
-                }
-
-                /* Table of contents */
-                .toc-sidebar {
-                  position: fixed;
-                  top: 0;
-                  left: 0;
-                  height: 100vh;
-                  width: #{config[:sidebar_width] || '280px'};
-                  padding: 2rem 1rem;
-                  overflow-y: auto;
-                  background: rgba(255, 255, 255, 0.95);
-                  backdrop-filter: blur(10px);
-                  border-right: 1px solid rgba(0, 0, 0, 0.1);
-                  transition: transform 0.3s ease;
-                  z-index: 100;
-                }
-
-                .dark .toc-sidebar {
-                  background: rgba(0, 0, 0, 0.5);
-                  border-right-color: rgba(255, 255, 255, 0.1);
-                }
-
-                .toc-sidebar.collapsed {
-                  transform: translateX(-100%);
-                }
-
-                .toc-item {
-                  padding: 0.5rem;
-                  border-radius: 0.375rem;
-                  cursor: pointer;
-                  transition: all 0.2s ease;
-                }
-
-                .toc-item:hover {
-                  background: rgba(99, 102, 241, 0.1);
-                }
-
-                .toc-item.active {
-                  background: rgba(99, 102, 241, 0.2);
-                  color: #{config[:primary_color]};
-                  font-weight: 500;
-                }
-
-                /* Code blocks */
-                pre {
-                  position: relative;
-                  border-radius: 0.5rem;
-                  overflow: hidden;
-                }
-
-                .copy-code-button {
-                  position: absolute;
-                  top: 0.5rem;
-                  right: 0.5rem;
-                  padding: 0.25rem 0.5rem;
-                  font-size: 0.75rem;
-                  border-radius: 0.25rem;
-                  background: rgba(255, 255, 255, 0.9);
-                  border: 1px solid rgba(0, 0, 0, 0.1);
-                  cursor: pointer;
-                  opacity: 0;
-                  transition: opacity 0.2s ease;
-                }
-
-                pre:hover .copy-code-button {
-                  opacity: 1;
-                }
-
-                .copy-code-button.copied {
-                  background: rgba(34, 197, 94, 0.9);
-                  color: white;
-                }
-
-                /* Admonition styles */
-                .admonition {
-                  border-radius: 0.5rem;
-                  padding: 1rem;
-                  margin: 1rem 0;
-                  border-left: 4px solid;
-                }
-
-                .admonition-note {
-                  background: rgba(59, 130, 246, 0.1);
-                  border-color: rgb(59, 130, 246);
-                }
-
-                .admonition-tip {
-                  background: rgba(34, 197, 94, 0.1);
-                  border-color: rgb(34, 197, 94);
-                }
-
-                .admonition-warning {
-                  background: rgba(251, 191, 36, 0.1);
-                  border-color: rgb(251, 191, 36);
-                }
-
-                .admonition-caution {
-                  background: rgba(239, 68, 68, 0.1);
-                  border-color: rgb(239, 68, 68);
-                }
-
-                .admonition-important {
-                  background: rgba(139, 92, 246, 0.1);
-                  border-color: rgb(139, 92, 246);
-                }
-
-                /* Print styles */
-                @media print {
-                  #reading-progress,
-                  #back-to-top,
-                  #theme-toggle,
-                  .toc-sidebar {
-                    display: none !important;
-                  }
-
-                  .content-wrapper {
-                    max-width: 100% !important;
-                  }
-                }
-
-                #{config[:enable_animations] ? animation_css : ''}
-              CSS
-            end
-
-            private
-
-            # Animation CSS
-            #
-            # @return [String] Animation CSS
-            def animation_css
-              <<~CSS
-                /* Animations */
-                @media (prefers-reduced-motion: no-preference) {
-                  .animate-fade-in {
-                    animation: fadeIn 0.3s ease-out;
-                  }
-
-                  .animate-slide-up {
-                    animation: slideUp 0.3s ease-out;
-                  }
-
-                  .animate-scale-in {
-                    animation: scaleIn 0.3s ease-out;
-                  }
-                }
-
-                @keyframes fadeIn {
-                  from {
-                    opacity: 0;
-                  }
-                  to {
-                    opacity: 1;
-                  }
-                }
-
-                @keyframes slideUp {
-                  from {
-                    opacity: 0;
-                    transform: translateY(10px);
-                  }
-                  to {
-                    opacity: 1;
-                    transform: translateY(0);
-                  }
-                }
-
-                @keyframes scaleIn {
-                  from {
-                    opacity: 0;
-                    transform: scale(0.95);
-                  }
-                  to {
-                    opacity: 1;
-                    transform: scale(1);
-                  }
-                }
-              CSS
-            end
-          end
-        end
-      end
-    end
-  end
-end