coradoc-html 1.1.7

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

@@ -0,0 +1,314 @@
+# frozen_string_literal: true
+
+module Coradoc
+  module Html
+    module Theme
+      class ModernRenderer
+        # Generate Vue.js application code
+        module JavascriptGenerator
+          autoload :VueTemplates, "#{__dir__}/vue_template_generator"
+
+          class << self
+            # Generate Vue application
+            #
+            # @param document_data [Hash] Serialized document data
+            # @param config [Hash] Theme configuration
+            # @return [String] Vue application JavaScript
+            def generate(document_data, config)
+              # Get Vue templates
+              templates = load_templates
+
+              # Get enhanced document template
+              document_template = UIComponents.enhanced_document_template(config)
+
+              <<~JS
+                const { createApp, ref, computed, onMounted, onUnmounted } = Vue;
+
+                // Define Vue components
+                const components = {
+                  'element-paragraph': {
+                    props: ['data'],
+                    template: `#{templates[:paragraph]}`
+                  },
+                  'element-admonition': {
+                    props: ['data'],
+                    setup(props) {
+                      const admonitionIcon = (style) => {
+                        const styles = { note: '📝', tip: '💡', warning: '⚠️', caution: '🔥', important: '❗' };
+                        return styles[style?.toLowerCase()] || 'ℹ️';
+                      };
+                      const admonitionTitle = (style) => style?.charAt(0).toUpperCase() + style?.slice(1) || 'Note';
+                      return { admonitionIcon, admonitionTitle };
+                    },
+                    template: `#{templates[:admonition]}`
+                  },
+                  'element-list': {
+                    props: ['data'],
+                    template: `#{templates[:list]}`
+                  },
+                  'element-block': {
+                    props: ['data'],
+                    setup(props) {
+                      const blockContent = (data) => {
+                        if (!data.content || data.content.length === 0) return '';
+                        return data.content.map(item => item.content || item.text || '').join('');
+                      };
+                      const cellContent = (cell) => {
+                        if (!cell.content || cell.content.length === 0) return '';
+                        return cell.content.map(item => item.content || item.text || '').join('');
+                      };
+                      return { blockContent, cellContent };
+                    },
+                    template: `#{templates[:block]}`
+                  },
+                  'element-table': {
+                    props: ['data'],
+                    setup(props) {
+                      const cellContent = (cell) => {
+                        if (!cell.content || cell.content.length === 0) return '';
+                        return cell.content.map(item => item.content || item.text || '').join('');
+                      };
+                      return { cellContent };
+                    },
+                    template: `#{templates[:table]}`
+                  },
+                  'element-image': {
+                    props: ['data'],
+                    template: `#{templates[:image]}`
+                  },
+                  'element-link': {
+                    props: ['data'],
+                    template: `#{templates[:link]}`
+                  },
+                  'element-xref': {
+                    props: ['data'],
+                    template: `#{templates[:xref]}`
+                  },
+                  'element-text': {
+                    props: ['data'],
+                    template: '<span>{{ data.content || data }}</span>'
+                  },
+                  'inline-bold': {
+                    props: ['data'],
+                    template: '<strong><template v-for="(item, i) in data.content" :key="i">{{ item.content || item }}</template></strong>'
+                  },
+                  'inline-italic': {
+                    props: ['data'],
+                    template: '<em><template v-for="(item, i) in data.content" :key="i">{{ item.content || item }}</template></em>'
+                  },
+                  'inline-monospace': {
+                    props: ['data'],
+                    template: '<code class="bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm"><template v-for="(item, i) in data.content" :key="i">{{ item.content || item }}</template></code>'
+                  },
+                  'inline-text': {
+                    props: ['data'],
+                    setup(props) {
+                      const renderContent = (content) => {
+                        if (!content) return '';
+                        if (typeof content === 'string') return content;
+                        if (Array.isArray(content)) {
+                          return content.map(item => item.content || item.text || item).join('');
+                        }
+                        return content;
+                      };
+                      return { renderContent };
+                    },
+                    template: '<span>{{ renderContent(data.content) || data.text || data }}</span>'
+                  },
+                  'section-section': {
+                    props: ['data'],
+                    template: `#{templates[:section]}`
+                  },
+                };
+
+                const app = createApp({
+                  components,
+                  template: `#{document_template}`,
+                  setup() {
+                    // Document data (use docData to avoid shadowing global document)
+                    const docData = #{JSON.generate(document_data)};
+                    const config = #{JSON.generate(config)};
+
+                    // UI state
+                    const isDark = ref(false);
+                    const showToc = ref(#{config[:toc_sticky]});
+                    const tocCollapsed = ref(false);
+                    const activeSection = ref('');
+                    const showBackToTop = ref(false);
+                    const scrollProgress = ref(0);
+
+                    // Initialize theme from localStorage or system preference
+                    onMounted(() => {
+                      // Theme detection
+                      const storedTheme = localStorage.getItem('theme');
+                      if (storedTheme) {
+                        isDark.value = storedTheme === 'dark';
+                      } else {
+                        isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                      }
+                      applyTheme();
+
+                      // Scroll listeners
+                      window.addEventListener('scroll', handleScroll);
+                      window.addEventListener('resize', handleResize);
+
+                      // Initialize intersection observer for active section
+                      initObserver();
+                    });
+
+                    onUnmounted(() => {
+                      window.removeEventListener('scroll', handleScroll);
+                      window.removeEventListener('resize', handleResize);
+                    });
+
+                    // Theme toggle
+                    function toggleTheme() {
+                      isDark.value = !isDark.value;
+                      applyTheme();
+                      localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
+                    }
+
+                    function applyTheme() {
+                      if (isDark.value) {
+                        document.documentElement.classList.add('dark');
+                      } else {
+                        document.documentElement.classList.remove('dark');
+                      }
+                    }
+
+                    // Scroll handlers
+                    function handleScroll() {
+                      // Update scroll progress
+                      const scrollTop = window.scrollY;
+                      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+                      scrollProgress.value = (scrollTop / docHeight) * 100;
+
+                      // Show/hide back to top button
+                      showBackToTop.value = scrollTop > 300;
+                    }
+
+                    function handleResize() {
+                      // Auto-collapse TOC on small screens
+                      if (window.innerWidth < 1024) {
+                        tocCollapsed.value = true;
+                      } else {
+                        tocCollapsed.value = false;
+                      }
+                    }
+
+                    function scrollToTop() {
+                      window.scrollTo({ top: 0, behavior: 'smooth' });
+                    }
+
+                    function scrollToSection(id) {
+                      const element = document.getElementById(id);
+                      if (element) {
+                        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                      }
+                    }
+
+                    // Intersection observer for active section
+                    function initObserver() {
+                      const observer = new IntersectionObserver(
+                        (entries) => {
+                          entries.forEach((entry) => {
+                            if (entry.isIntersecting) {
+                              activeSection.value = entry.target.id;
+                            }
+                          });
+                        },
+                        {
+                          rootMargin: '-10% 0px -80% 0px',
+                          threshold: 0
+                        }
+                      );
+
+                      // Observe all sections
+                      document.querySelectorAll('section[id]').forEach((section) => {
+                        observer.observe(section);
+                      });
+                    }
+
+                    // Copy code to clipboard
+                    async function copyCode(code, event) {
+                      try {
+                        await navigator.clipboard.writeText(code);
+                        const button = event.target;
+                        button.textContent = 'Copied!';
+                        button.classList.add('copied');
+                        setTimeout(() => {
+                          button.textContent = 'Copy';
+                          button.classList.remove('copied');
+                        }, 2000);
+                      } catch (err) {
+                        console.error('Failed to copy code:', err);
+                      }
+                    }
+
+                    // Flatten sections for TOC rendering
+                    function flattenToc(sections, level = 0) {
+                      const result = [];
+                      for (const section of sections) {
+                        result.push({ ...section, level });
+                        if (section.children && section.children.length > 0) {
+                          result.push(...flattenToc(section.children, level + 1));
+                        }
+                      }
+                      return result;
+                    }
+
+                    // Computed properties
+                    const tocItems = computed(() => flattenToc(docData.toc || []));
+
+                    return {
+                      document: docData,
+                      config,
+                      isDark,
+                      showToc,
+                      tocCollapsed,
+                      activeSection,
+                      showBackToTop,
+                      scrollProgress,
+                      tocItems,
+                      toggleTheme,
+                      scrollToTop,
+                      scrollToSection,
+                      copyCode,
+                    };
+                  },
+                });
+
+                // Register components globally for dynamic component resolution
+                // This allows <component :is="..."> to work in nested templates
+                Object.keys(components).forEach((name) => {
+                  app.component(name, components[name]);
+                });
+
+                app.mount('#app');
+              JS
+            end
+
+            private
+
+            # Load Vue component templates
+            #
+            # @return [Hash] Hash of templates
+            def load_templates
+              {
+                paragraph: VueTemplates.template_for('paragraph'),
+                admonition: VueTemplates.template_for('admonition'),
+                list: VueTemplates.template_for('list'),
+                block: VueTemplates.template_for('block'),
+                table: VueTemplates.template_for('table'),
+                image: VueTemplates.template_for('image'),
+                link: VueTemplates.template_for('link'),
+                xref: VueTemplates.template_for('xref'),
+                section: VueTemplates.template_for('section')
+              }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/coradoc/html/theme/modern/serializers/document_serializer.rb

@@ -0,0 +1,382 @@
+# frozen_string_literal: true
+
+module Coradoc
+  module Html
+    module Theme
+      class ModernRenderer
+        module Serializers
+          # Serialize Coradoc CoreModel to Vue-compatible data structure
+          #
+          # This module converts the Coradoc CoreModel into a JSON-serializable
+          # hash structure that can be consumed by Vue.js components.
+          #
+          # IMPORTANT: This serializer ONLY handles CoreModel types.
+          # All format-specific documents (AsciiDoc, Markdown, etc.) should be
+          # transformed to CoreModel before using this serializer.
+          module DocumentSerializer
+            class << self
+              # Serialize document to Vue-compatible format
+              #
+              # @param document [Coradoc::CoreModel::StructuralElement] Document to serialize
+              # @return [Hash] Serialized document data
+              # @raise [ArgumentError] if document is not a CoreModel::StructuralElement
+              def serialize(document)
+                unless document.is_a?(Coradoc::CoreModel::StructuralElement)
+                  raise ArgumentError,
+                        "Expected CoreModel::StructuralElement, got #{document.class}. " \
+                        'Transform your document to CoreModel first using the appropriate ' \
+                        'format transformer (e.g., ToCoreModel for your source format).'
+                end
+
+                serialize_core_model_document(document)
+              end
+
+              # Serialize CoreModel::StructuralElement document
+              #
+              # @param document [Coradoc::CoreModel::StructuralElement] Document to serialize
+              # @return [Hash] Serialized document data
+              def serialize_core_model_document(document)
+                {
+                  id: document.id || generate_uid(document),
+                  type: 'document',
+                  header: serialize_core_model_header(document),
+                  attributes: {},
+                  sections: serialize_core_model_children(document.children),
+                  toc: build_toc_data_from_core_model(document.children),
+                  metadata: {
+                    title: document.title || 'Untitled Document',
+                    author: nil,
+                    revision: nil
+                  }
+                }
+              end
+
+              # Serialize CoreModel header (extracted from title)
+              #
+              # @param document [Coradoc::CoreModel::StructuralElement] Document
+              # @return [Hash, nil] Serialized header
+              def serialize_core_model_header(document)
+                return nil unless document.title
+
+                {
+                  id: generate_uid(document),
+                  type: 'header',
+                  title: {
+                    type: 'title',
+                    text: document.title.to_s,
+                    level: 1
+                  },
+                  author: nil
+                }
+              end
+
+              # Serialize CoreModel children
+              #
+              # @param children [Array, nil] Children to serialize
+              # @return [Array] Serialized children
+              def serialize_core_model_children(children)
+                return [] unless children
+
+                children.map do |child|
+                  serialize_core_model_element(child)
+                end.compact
+              end
+
+              # Serialize individual CoreModel element
+              #
+              # @param element [Object] Element to serialize
+              # @return [Hash] Serialized element
+              def serialize_core_model_element(element)
+                case element
+                when Coradoc::CoreModel::StructuralElement
+                  serialize_core_model_section(element)
+                when Coradoc::CoreModel::Block
+                  serialize_core_model_block(element)
+                when Coradoc::CoreModel::ListBlock
+                  serialize_core_model_list(element)
+                when Coradoc::CoreModel::Table
+                  serialize_core_model_table(element)
+                when Coradoc::CoreModel::Image
+                  serialize_core_model_image(element)
+                when Coradoc::CoreModel::AnnotationBlock
+                  serialize_core_model_admonition(element)
+                when Coradoc::CoreModel::InlineElement
+                  serialize_core_model_inline(element)
+                else
+                  serialize_generic_element(element)
+                end
+              end
+
+              # Serialize CoreModel section
+              #
+              # @param section [Coradoc::CoreModel::StructuralElement] Section to serialize
+              # @return [Hash] Serialized section
+              def serialize_core_model_section(section)
+                level = section.level || 1
+                {
+                  id: section.id || generate_uid(section),
+                  type: 'section',
+                  title: section.title ? { type: 'title', text: section.title.to_s, level: level } : nil,
+                  level: level,
+                  content: [],
+                  sections: serialize_core_model_children(section.children)
+                }
+              end
+
+              # Serialize CoreModel block
+              #
+              # @param block [Coradoc::CoreModel::Block] Block to serialize
+              # @return [Hash] Serialized block
+              def serialize_core_model_block(block)
+                semantic = block.block_semantic_type&.to_sym
+                block_type = case semantic
+                             when :paragraph then 'paragraph'
+                             when :source_code then 'source'
+                             when :quote, :verse then 'quote'
+                             when :example then 'example'
+                             else 'block'
+                             end
+
+                {
+                  id: block.id || generate_uid(block),
+                  type: block_type,
+                  block_type: block_type,
+                  title: block.title,
+                  content: serialize_block_content(block),
+                  language: block.language
+                }
+              end
+
+              # Serialize block content
+              #
+              # @param block [Coradoc::CoreModel::Block] Block to serialize
+              # @return [Array] Serialized content
+              def serialize_block_content(block)
+                return [] unless block.content
+
+                case block.content
+                when Array
+                  block.content.map { |el| serialize_core_model_element(el) }.compact
+                when Coradoc::CoreModel::InlineElement
+                  [serialize_core_model_inline(block.content)]
+                else
+                  [{ type: 'text', content: block.content.to_s }]
+                end
+              end
+
+              # Serialize CoreModel list
+              #
+              # @param list [Coradoc::CoreModel::ListBlock] List to serialize
+              # @return [Hash] Serialized list
+              def serialize_core_model_list(list)
+                list_type = case list.marker_type
+                            when 'ordered', '1' then 'ordered'
+                            when 'unordered', '*', '-' then 'unordered'
+                            when 'definition' then 'definition'
+                            else 'unordered'
+                            end
+
+                {
+                  id: generate_uid(list),
+                  type: 'list',
+                  list_type: list_type,
+                  items: (list.items || []).map do |item|
+                    serialize_list_item(item)
+                  end
+                }
+              end
+
+              # Serialize list item
+              #
+              # @param item [Coradoc::CoreModel::ListItem] List item to serialize
+              # @return [Hash] Serialized list item
+              def serialize_list_item(item)
+                content = if item.content
+                            case item.content
+                            when Array
+                              item.content.map { |el| serialize_core_model_element(el) }.compact
+                            else
+                              [{ type: 'text', content: item.content.to_s }]
+                            end
+                          else
+                            []
+                          end
+
+                {
+                  id: generate_uid(item),
+                  type: 'list_item',
+                  content: content
+                }
+              end
+
+              # Serialize CoreModel table
+              #
+              # @param table [Coradoc::CoreModel::Table] Table to serialize
+              # @return [Hash] Serialized table
+              def serialize_core_model_table(table)
+                {
+                  id: table.id || generate_uid(table),
+                  type: 'table',
+                  title: nil,
+                  rows: (table.rows || []).map do |row|
+                    serialize_table_row(row)
+                  end
+                }
+              end
+
+              # Serialize table row
+              #
+              # @param row [Coradoc::CoreModel::TableRow] Row to serialize
+              # @return [Hash] Serialized row
+              def serialize_table_row(row)
+                {
+                  type: 'table_row',
+                  header: row.is_a?(Coradoc::CoreModel::TableRow) && row.header,
+                  cells: (row.cells || []).map do |cell|
+                    serialize_table_cell(cell)
+                  end
+                }
+              end
+
+              # Serialize table cell
+              #
+              # @param cell [Coradoc::CoreModel::TableCell] Cell to serialize
+              # @return [Hash] Serialized cell
+              def serialize_table_cell(cell)
+                content = if cell.content
+                            case cell.content
+                            when Array
+                              cell.content.map { |el| serialize_core_model_element(el) }.compact
+                            else
+                              cell.content.to_s
+                            end
+                          else
+                            ''
+                          end
+
+                {
+                  type: 'table_cell',
+                  content: content
+                }
+              end
+
+              # Serialize CoreModel image
+              #
+              # @param image [Coradoc::CoreModel::Image] Image to serialize
+              # @return [Hash] Serialized image
+              def serialize_core_model_image(image)
+                {
+                  type: 'image',
+                  src: image.src,
+                  alt: image.alt,
+                  title: nil,
+                  width: image.width,
+                  height: image.height,
+                  inline: image.inline
+                }
+              end
+
+              # Serialize CoreModel admonition
+              #
+              # @param admonition [Coradoc::CoreModel::AnnotationBlock] Admonition to serialize
+              # @return [Hash] Serialized admonition
+              def serialize_core_model_admonition(admonition)
+                {
+                  id: generate_uid(admonition),
+                  type: 'admonition',
+                  style: admonition.annotation_type || :note,
+                  content: admonition.content ? [{ type: 'text', content: admonition.content.to_s }] : []
+                }
+              end
+
+              # Serialize CoreModel inline element
+              #
+              # @param element [Coradoc::CoreModel::InlineElement] Inline element to serialize
+              # @return [Hash] Serialized inline element
+              def serialize_core_model_inline(element)
+                element_type = case element.inline_type
+                               when 'bold' then 'bold'
+                               when 'italic' then 'italic'
+                               when 'monospace' then 'monospace'
+                               when 'link' then 'link'
+                               when 'xref' then 'xref'
+                               when 'highlight' then 'highlight'
+                               when 'strikethrough' then 'strikethrough'
+                               when 'underline' then 'underline'
+                               when 'subscript' then 'subscript'
+                               when 'superscript' then 'superscript'
+                               else 'inline'
+                               end
+
+                result = {
+                  type: element_type,
+                  content: element.text.to_s
+                }
+
+                # Add link-specific attributes
+                result[:href] = element.target if element.inline_type == 'link' && element.target
+
+                # Add cross-ref specific attributes
+                result[:target] = element.target if element.inline_type == 'xref' && element.target
+
+                result
+              end
+
+              # Build TOC data from CoreModel children
+              #
+              # @param children [Array] Children to process
+              # @param level [Integer] Current level
+              # @return [Array] TOC entries
+              def build_toc_data_from_core_model(children, level = 1)
+                return [] unless children
+
+                children.each_with_object([]) do |child, result|
+                  next unless child.is_a?(Coradoc::CoreModel::StructuralElement)
+
+                  entry = {
+                    id: child.id || generate_uid(child),
+                    title: child.title.to_s,
+                    level: level,
+                    children: build_toc_data_from_core_model(child.children, level + 1)
+                  }
+
+                  result << entry
+                end
+              end
+
+              # Serialize generic element (fallback for unknown types)
+              #
+              # @param element [Object] Element to serialize
+              # @return [Hash] Serialized element
+              def serialize_generic_element(element)
+                text_content = case element
+                               when String
+                                 element
+                               else
+                                 str = element.to_s
+                                 str.include?('#<') ? '' : str
+                               end
+
+                {
+                  type: 'generic',
+                  class: element.class.name,
+                  content: text_content
+                }
+              end
+
+              private
+
+              # Generate unique ID for object
+              #
+              # @param object [Object] Object to generate ID for
+              # @return [String] Unique ID
+              def generate_uid(object)
+                object.object_id.to_s(36)
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end