Class: Coradoc::Html::Theme::ModernRenderer

Inherits:
Base
  • Object
show all
Defined in:
lib/coradoc/html/theme/modern_renderer.rb,
lib/coradoc/html/theme/modern/css_generator.rb,
lib/coradoc/html/theme/modern/javascript_generator.rb,
lib/coradoc/html/theme/modern/vue_template_generator.rb,
lib/coradoc/html/theme/modern/tailwind_config_builder.rb,
lib/coradoc/html/theme/modern/components/ui_components.rb,
lib/coradoc/html/theme/modern/serializers/document_serializer.rb

Overview

Modern theme renderer using Vue.js 3 + Tailwind CSS

This renderer generates a complete, self-contained HTML5 document with embedded Vue.js components and Tailwind CSS styling. The modern theme features glass morphism aesthetics and interactive UI components.

Examples:

Generate modern HTML output

html = Coradoc::Output::Html.convert_to_html5(document, theme: :modern)

Defined Under Namespace

Modules: CSSGenerator, JavascriptGenerator, Serializers, TailwindConfigBuilder, UIComponents, VueTemplates

Constant Summary collapse

DEFAULT_CONFIG =

Default configuration for modern theme

{
  color_scheme: :glass,
  primary_color: '#6366f1',    # Indigo-500
  accent_color: '#8b5cf6',     # Violet-500
  max_width: '1200px',
  content_width: '65ch',
  sidebar_width: '280px',
  theme_toggle: true,
  reading_progress: true,
  back_to_top: true,
  toc_sticky: true,
  copy_code_buttons: true,
  enable_animations: true,
  animation_duration: '300ms',
  lazy_load_images: true
}.freeze

Instance Attribute Summary

Attributes inherited from Base

#document, #options

Instance Method Summary collapse

Methods inherited from Base

#initialize, #supports?, #theme_name

Constructor Details

This class inherits a constructor from Coradoc::Html::Theme::Base

Instance Method Details

#render ⇒ String

Render document to HTML

Generates a complete HTML5 document with Vue.js application.

Returns:

  • (String) —

    Complete HTML5 document



82
83
84
 
# File 'lib/coradoc/html/theme/modern_renderer.rb', line 82

def render
  render_html5
end

#render_html5 ⇒ String

Render complete HTML5 document

Returns:

  • (String) —

    Complete HTML5 document



89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
# File 'lib/coradoc/html/theme/modern_renderer.rb', line 89

def render_html5
  # Merge user options with defaults
  config = DEFAULT_CONFIG.merge(@options[:modern] || {})

  # Serialize document to Vue-compatible format
  document_data = serialize_document

  # Generate Vue application code
  vue_app = generate_vue_app(document_data, config)

  # Generate Tailwind configuration
  tailwind_config = generate_tailwind_config(config)

  # Generate custom CSS
  custom_css = generate_custom_css(config)

  # Build complete HTML document
  build_html_document(vue_app, tailwind_config, custom_css, config)
end

#supported_features ⇒ Array<Symbol>

Supported features for modern theme

Returns:

  • (Array<Symbol>) —

    Supported features



63
64
65
66
67
68
69
70
71
72
73
74
75
 
# File 'lib/coradoc/html/theme/modern_renderer.rb', line 63

def supported_features
  %i[
    dark_mode
    theme_toggle
    interactive_toc
    reading_progress
    back_to_top
    copy_code_buttons
    lazy_loading
    animations
    glass_morphism
  ]
end

#template_dirs ⇒ Array<String>

Get template directories (from options or global config)

Returns:

  • (Array<String>) 


46
47
48
 
# File 'lib/coradoc/html/theme/modern_renderer.rb', line 46

def template_dirs
  @options[:template_dirs] || global_template_dirs
end

#use_custom_templates? ⇒ Boolean

Check if custom templates are configured and available

Returns:

  • (Boolean) 


53
54
55
56
57
58
 
# File 'lib/coradoc/html/theme/modern_renderer.rb', line 53

def use_custom_templates?
  dirs = template_dirs
  return false if dirs.empty?

  dirs.any? { |dir| File.directory?(dir) }
end