scriptorium 0.0.3 → 0.7.2

data/test/manual/test_banner_features.rb

@@ -0,0 +1,306 @@
+# Manual inspection tests for BannerSVG features
+# 
+# This file creates individual HTML pages for each banner feature test,
+# with simple navigation between them. Each page is completely isolated
+# to prevent state sharing issues.
+# 
+# Usage:
+#   ruby test_banner_features_simple.rb          # Interactive mode with browser
+#   ruby test_banner_features_simple.rb --automated  # Automated mode for CI/AI testing
+# 
+require_relative "../../lib/scriptorium"
+require_relative "./banner_environment"
+
+# Test definitions
+tests = [
+  {
+    title: "Red Background",
+    subtitle: "Solid color test",
+    config: "back.color #ff0000",
+    description: "Red Background"
+  },
+  {
+    title: "Blue Background", 
+    subtitle: "Solid color test",
+    config: "back.color #0000ff",
+    description: "Blue Background"
+  },
+  {
+    title: "Green Background",
+    subtitle: "Solid color test", 
+    config: "back.color #00ff00",
+    description: "Green Background"
+  },
+  {
+    title: "Red to Blue Gradient",
+    subtitle: "Linear gradient test",
+    config: "back.linear red blue lr",
+    description: "Linear Gradient (Left to Right)"
+  },
+  {
+    title: "Green to Yellow Gradient",
+    subtitle: "Linear gradient test",
+    config: "back.linear green yellow tb", 
+    description: "Linear Gradient (Top to Bottom)"
+  },
+  {
+    title: "Red to Blue Radial",
+    subtitle: "Radial gradient test",
+    config: "back.radial red blue",
+    description: "Radial Gradient"
+  },
+  {
+    title: "Green to Yellow Radial",
+    subtitle: "Radial gradient test",
+    config: "back.radial green yellow",
+    description: "Radial Gradient"
+  },
+  {
+    title: "Small Text",
+    subtitle: "Size test",
+    config: "title.scale 0.5\nsubtitle.scale 0.3",
+    description: "Small Text (0.5x, 0.3x)"
+  },
+  {
+    title: "Large Text",
+    subtitle: "Size test", 
+    config: "title.scale 1.5\nsubtitle.scale 1.0",
+    description: "Large Text (1.5x, 1.0x)"
+  },
+  {
+    title: "Bold Text",
+    subtitle: "Style test",
+    config: "title.style bold\nsubtitle.style bold",
+    description: "Bold Text"
+  },
+  {
+    title: "Italic Text",
+    subtitle: "Style test",
+    config: "title.style italic\nsubtitle.style italic", 
+    description: "Italic Text"
+  },
+  {
+    title: "Bold & Italic",
+    subtitle: "Style test",
+    config: "title.style bold italic\nsubtitle.style bold italic",
+    description: "Bold & Italic Text"
+  },
+  {
+    title: "Blue Text",
+    subtitle: "Color test",
+    config: "title.color #0000ff\nsubtitle.color #0000ff",
+    description: "Blue Text"
+  },
+  {
+    title: "Green Text",
+    subtitle: "Color test",
+    config: "title.color #00ff00\nsubtitle.color #00ff00",
+    description: "Green Text"
+  },
+  {
+    title: "Left Position",
+    subtitle: "Position test",
+    config: "text.align left",
+    description: "Left Positioned Text"
+  },
+  {
+    title: "Center Position",
+    subtitle: "Position test",
+    config: "text.align center",
+    description: "Center Positioned Text"
+  },
+  {
+    title: "Right Position",
+    subtitle: "Position test",
+    config: "text.align right",
+    description: "Right Positioned Text"
+  },
+  {
+    title: "Perfect Image Background",
+    subtitle: "Image test (8:1 aspect)",
+    config: "back.image ../../assets/images/perfect.png",
+    description: "Perfect match: 8:1 aspect ratio image fits banner exactly - no cropping or scaling needed"
+  },
+  {
+    title: "Wide Image Background", 
+    subtitle: "Image test (16:1 aspect)",
+            config: "back.image ../../assets/images/wide.png",
+    description: "Wide image (16:1) cropped to fit 8:1 banner - left/right edges removed, center preserved"
+  },
+  {
+    title: "Tall Image Background",
+    subtitle: "Image test (1:1 aspect)", 
+    config: "back.image ../../assets/images/tall.png",
+    description: "Square image (1:1) cropped to fit 8:1 banner - top/bottom removed, center strip visible"
+  },
+  {
+    title: "Very Tall Image Background",
+    subtitle: "Image test (1:4 aspect)",
+    config: "back.image ../../assets/images/very_tall.png", 
+    description: "Very tall image (1:4) heavily cropped - only narrow center strip visible, most content lost"
+  },
+  {
+    title: "Very Wide Image Background",
+    subtitle: "Image test (16:1 aspect)",
+    config: "back.image ../../assets/images/very_wide.png",
+    description: "Very wide image (16:1) heavily cropped - only narrow center strip visible, sides removed"
+  },
+  {
+    title: "Small Image Background",
+    subtitle: "Image test (low res, 8:1 aspect)",
+    config: "back.image ../../assets/images/small.png",
+    description: "Small low-res image scaled up to fill banner - may appear pixelated but maintains aspect"
+  },
+  {
+    title: "Odd Aspect Image Background",
+    subtitle: "Image test (~4:1 aspect)",
+    config: "back.image ../../assets/images/odd_aspect.png",
+    description: "Non-standard aspect ratio (~4:1) cropped to fit 8:1 banner - moderate cropping applied"
+  },
+  {
+    title: "Another gradient test",
+    subtitle: "Just one more, I swear",
+    config: "back.linear #0000ff #000033 lr\ntitle.color #fff\nsubtitle.color #fff",
+    description: "Linear Gradient (Left to Right)"
+  }
+]
+
+# Create temp directory for tests
+test_dir = File.dirname(__FILE__)/"banner-tests"
+Dir.mkdir(test_dir) unless Dir.exist?(test_dir)
+
+# Create individual pages for each test
+pages = []
+tests.each_with_index do |test, index|
+  page_num = index + 1
+  filename = "test#{page_num.to_s.rjust(2, '0')}.html"
+  
+  # Write config file for this test
+  File.write(test_dir/"svg.txt", test[:config])
+  
+  # Create banner
+  require_relative '../../lib/scriptorium'
+  Dir.chdir(test_dir) do
+    banner = Scriptorium::BannerSVG.new(test[:title], test[:subtitle])
+    banner.parse_header_svg
+    svg_output = banner.get_svg
+    
+    # Check if this is an image background test
+    image_path = nil
+    if test[:config].include?("back.image")
+      image_path = test[:config].match(/back\.image\s+(.+)/)&.[](1)
+      # For the original image display, we need the path relative to the HTML file
+      # The HTML is in test/manual/banner-tests/, and images are in test/assets/images/
+      # Convert ../../assets/images/... to /assets/images/... (absolute from web server root)
+      display_path = image_path.gsub('../../assets/images/', '/assets/images/') if image_path
+      
+      # Fix the SVG pattern path to use the correct absolute path
+      svg_output = svg_output.gsub('../../assets/images/', '/assets/images/')
+    end
+    
+    # Create standalone HTML page
+    html_content = <<~HTML
+      <!DOCTYPE html>
+      <html>
+      <head>
+          <title>#{test[:title]}</title>
+          <style>
+              body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }
+              .banner { width: 100%; margin: 0; padding: 0; border: 3px solid #007cba; border-radius: 8px; }
+              .content { padding: 20px; padding-bottom: 80px; }
+              .description { margin: 10px 0; font-weight: bold; }
+              .config { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; font-size: 12px; }
+              .navigation { 
+                  position: fixed; 
+                  bottom: 0; 
+                  left: 0; 
+                  right: 0; 
+                  background: #e0e0e0; 
+                  padding: 15px; 
+                  text-align: center; 
+                  border-top: 2px solid #007cba;
+                  z-index: 1000;
+              }
+              .navigation a { margin: 0 10px; padding: 8px 15px; background: #007cba; color: white; text-decoration: none; border-radius: 3px; }
+              .navigation a:hover { background: #005a87; }
+              .original-image { margin: 20px 0; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+              .original-image h3 { margin: 0 0 10px 0; color: #333; }
+              .original-image img { max-width: 100%; height: auto; border: 1px solid #ddd; }
+          </style>
+      </head>
+      <body>
+          <div class="banner" id="header">
+            #{svg_output}
+          </div>
+          <div class="content">
+              <div class="description">#{test[:description]}</div>
+              <div class="config">#{test[:config]}</div>
+              #{image_path ? "<div class='original-image'>\n                <h3>Original Image (for comparison):</h3>\n                <img src='#{display_path}' alt='Original image'>\n              </div>" : ""}
+              <div class="navigation">
+                  <a href="index.html">Back to Index</a>
+              </div>
+          </div>
+      </body>
+      </html>
+    HTML
+    
+    File.write(filename, html_content)
+  end
+  
+  pages << { number: page_num, title: test[:title], filename: filename }
+end
+
+# Add navigation links to each page
+pages.each_with_index do |page, index|
+  prev_page = index > 0 ? pages[index - 1][:filename] : nil
+  next_page = index < pages.length - 1 ? pages[index + 1][:filename] : nil
+  
+  # Read the current page
+  page_file = test_dir/page[:filename]
+  content = File.read(page_file)
+  
+  # Create navigation HTML
+  nav_html = '<div class="navigation">'
+  nav_html += '<a href="index.html">Back to Index</a>'
+  nav_html += " <a href=\"#{prev_page}\">Previous</a>" if prev_page
+  nav_html += " <a href=\"#{next_page}\">Next</a>" if next_page
+  nav_html += '</div>'
+  
+  # Replace the placeholder navigation
+  content.gsub!(/<div class="navigation">.*?<\/div>/m, nav_html)
+  
+  # Write the updated page
+  File.write(page_file, content)
+end
+
+# Create index page
+index_html = <<~HTML
+  <!DOCTYPE html>
+  <html>
+  <head>
+      <title>BannerSVG Feature Tests</title>
+      <style>
+          body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
+          .test-list { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+          .test-item { margin: 10px 0; padding: 10px; background: #f9f9f9; border-left: 4px solid #007cba; }
+          .test-item a { color: #007cba; text-decoration: none; font-weight: bold; }
+          .test-item a:hover { text-decoration: underline; }
+          .test-description { color: #666; font-size: 14px; margin-top: 5px; }
+      </style>
+  </head>
+  <body>
+      <h1>BannerSVG Feature Tests</h1>
+      <div class="test-list">
+          <p>Click on any test to view the banner in isolation:</p>
+          #{pages.map.with_index { |page, index| 
+            "<div class='test-item'><a href='#{page[:filename]}'>#{index + 1}. #{page[:title]}</a><div class='test-description'>#{tests[index][:description]}</div></div>"
+          }.join("\n")}
+      </div>
+  </body>
+  </html>
+HTML
+
+File.write(test_dir/"index.html", index_html)
+
+# Call the environment's examine function
+examine("banner-test") 

data/test/manual/test_banner_integration.rb

@@ -0,0 +1,115 @@
+require_relative './environment'
+
+manual_setup
+
+# Create multiple views to test different banner integration scenarios
+views = []
+
+# Test 1: Simple banner in header
+view1 = @repo.create_view("banner-simple", "Simple Banner Site", "A site with basic SVG banner in header")
+File.open(view1.dir/:config/"layout.txt", "w") do |f|
+  f.puts "header"
+  f.puts "main"
+end
+view1.generate_empty_containers
+File.open(view1.dir/:config/"header.txt", "w") do |f|
+  f.puts "banner svg"
+end
+view1.generate_front_page
+views << view1
+
+# Test 2: SVG debug test (header only)
+view2 = @repo.create_view("svg-debug", "SVG Debug Test", "Testing SVG insertion")
+File.open(view2.dir/:config/"layout.txt", "w") do |f|
+  f.puts "header"
+end
+view2.generate_empty_containers
+File.open(view2.dir/:config/"header.txt", "w") do |f|
+  f.puts "banner_svg"
+end
+File.open(view2.dir/:config/"config.txt", "w") do |f|
+  f.puts "# Simple debug config"
+  f.puts "back.radial #FF0000 #0000FF"
+  f.puts "title.color #FFFFFF"
+  f.puts "subtitle.color #FFFF00"
+  f.puts "title.style bold"
+  f.puts "subtitle.style italic"
+end
+view2.generate_front_page
+views << view2
+
+# Test 3: Complex header with multiple elements
+view3 = @repo.create_view("complex-header", "My Awesome Blog", "Exploring the Power of SVG Banners")
+File.open(view3.dir/:config/"layout.txt", "w") do |f|
+  f.puts "header"
+  f.puts "main"
+end
+view3.generate_empty_containers
+File.open(view3.dir/:config/"header.txt", "w") do |f|
+  f.puts "banner_svg"
+  f.puts "title"
+  f.puts "subtitle"
+end
+File.open(view3.dir/:config/"config.txt", "w") do |f|
+  f.puts "# Complex SVG Banner Configuration"
+  f.puts "# This exercises multiple features at once"
+  f.puts ""
+  f.puts "# Background: Radial gradient from purple to blue"
+  f.puts "back.radial #8B5CF6 #3B82F6"
+  f.puts ""
+  f.puts "# Custom aspect ratio (wider banner)"
+  f.puts "aspect 6.0"
+  f.puts ""
+  f.puts "# Custom font"
+  f.puts "text.font Georgia serif"
+  f.puts ""
+  f.puts "# Title styling: Bold, larger scale, custom color"
+  f.puts "title.scale 1.2"
+  f.puts "title.style bold"
+  f.puts "title.color #FFFFFF"
+  f.puts "title.align center"
+  f.puts ""
+  f.puts "# Subtitle styling: Italic, smaller scale, different color"
+  f.puts "subtitle.scale 0.6"
+  f.puts "subtitle.style italic"
+  f.puts "subtitle.color #E5E7EB"
+  f.puts "subtitle.align center"
+  f.puts ""
+  f.puts "# Custom positioning for both title and subtitle"
+  f.puts "title.xy 50% 45%"
+  f.puts "subtitle.xy 50% 75%"
+end
+view3.generate_front_page
+views << view3
+
+# Test 4: Empty header (placeholder test)
+view4 = @repo.create_view("empty-header-test", "Empty Header Test", "Testing placeholder text")
+File.open(view4.dir/:config/"layout.txt", "w") do |f|
+  f.puts "header"
+  f.puts "main"
+end
+view4.generate_empty_containers
+File.open(view4.dir/:config/"header.txt", "w") do |f|
+  # Empty file - should trigger placeholder
+end
+view4.generate_front_page
+views << view4
+
+instruct <<~EOS
+  Banner Integration Tests
+  
+  This test demonstrates different banner integration scenarios:
+  
+  1. banner-simple: Basic SVG banner in header with main content
+  2. svg-debug: Header-only layout with red-to-blue radial gradient banner
+  3. complex-header: Multiple header elements with sophisticated banner styling
+  4. empty-header-test: Empty header to verify placeholder text behavior
+  
+  Each view tests different aspects of banner integration:
+  - Simple banner insertion
+  - Header-only layouts
+  - Complex styling combinations
+  - Placeholder text handling
+EOS
+
+examine views

data/test/manual/test_banner_radial.rb

@@ -0,0 +1,87 @@
+require_relative './environment'
+
+manual_setup
+
+# Create multiple views to test different radial gradient scenarios
+views = []
+
+# Test 1: Custom radial gradient with custom center and radius
+view1 = @repo.create_view("radial-custom", "Custom Radial Test", "Testing custom radial gradient parameters")
+File.open(view1.dir/:config/"layout.txt", "w") do |f|
+  f.puts "header"
+end
+view1.generate_empty_containers
+File.open(view1.dir/:config/"header.txt", "w") do |f|
+  f.puts "banner_svg"
+end
+File.open(view1.dir/:config/"config.txt", "w") do |f|
+  f.puts "# Custom Radial Gradient Test"
+  f.puts "# Default: circular vignette (ar omitted, will use 1/aspect)"
+  f.puts "aspect 5.0"
+  f.puts "back.radial #FF6B6B #4ECDC4 75% 25% 60%"
+  f.puts ""
+  f.puts "# Custom: elliptical vignette (ar = 0.5, i.e. squished horizontally)"
+  f.puts "# Uncomment to test:"
+  f.puts "# back.radial #FF6B6B #4ECDC4 75% 25% 60% 0.5"
+  f.puts ""
+  f.puts "# Title styling"
+  f.puts "title.color #FFFFFF"
+  f.puts "title.style bold"
+  f.puts "title.align center"
+  f.puts ""
+  f.puts "# Subtitle styling"
+  f.puts "subtitle.color #FFFFFF"
+  f.puts "subtitle.style italic"
+  f.puts "subtitle.align center"
+end
+view1.generate_front_page
+views << view1
+
+# Test 2: Large radius radial gradient (soft vignette)
+view2 = @repo.create_view("radial-large-radius", "Large Radius Radial Test", "Testing r > 100% for soft vignette")
+File.open(view2.dir/:config/"layout.txt", "w") do |f|
+  f.puts "header"
+end
+view2.generate_empty_containers
+File.open(view2.dir/:config/"header.txt", "w") do |f|
+  f.puts "banner_svg"
+end
+File.open(view2.dir/:config/"config.txt", "w") do |f|
+  f.puts "# Large Radius Radial Gradient Test"
+  f.puts "aspect 5.0"
+  f.puts "# r = 150% (soft vignette, gradient extends beyond banner)"
+  f.puts "back.radial #FF6B6B #4ECDC4 50% 50% 150%"
+  f.puts ""
+  f.puts "# Title styling"
+  f.puts "title.color #FFFFFF"
+  f.puts "title.style bold"
+  f.puts "title.align center"
+  f.puts ""
+  f.puts "# Subtitle styling"
+  f.puts "subtitle.color #FFFFFF"
+  f.puts "subtitle.style italic"
+  f.puts "subtitle.align center"
+end
+view2.generate_front_page
+views << view2
+
+instruct <<~EOS
+  Radial Gradient Banner Tests
+  
+  This test demonstrates different radial gradient scenarios:
+  
+  1. radial-custom: Custom center position (75%, 25%) and radius (60%)
+     - Tests aspect-ratio compensation for circular vignettes
+     - Includes commented example for elliptical vignettes (ar=0.5)
+  
+  2. radial-large-radius: Large radius (150%) for soft vignette effect
+     - Tests gradients that extend beyond the banner boundaries
+     - Creates a very soft, subtle color transition
+  
+  Both tests use:
+  - Wide aspect ratio (5.0) to test gradient behavior in non-square banners
+  - White text with bold title and italic subtitle
+  - Centered text alignment
+EOS
+
+examine views

data/test/manual/test_basic_posts.rb

@@ -0,0 +1,47 @@
+require_relative "./environment"
+
+manual_setup
+
+@repo.create_view("testview", "Test View", "A test view for manual inspection")
+
+# Post 1
+draft_1_body = <<~BODY
+  .blurb It's sort of the William Riker of blog posts.
+  This is the first post.
+
+  It contains multiple paragraphs:
+  - Introduction to the topic.<br>
+  - A deep dive into the details.<br>
+  - Conclusion with key takeaways.<br>
+
+  This should span multiple lines in the draft.
+BODY
+
+name1 = @repo.create_draft(title: "Post number one", views: ["testview"], body: draft_1_body)
+num = @repo.finish_draft(name1)
+@repo.generate_post(num)
+
+# Post 2
+draft_2_body = <<~BODY
+  .blurb In Roman numerals, this is post II.
+  This is the second post.
+
+  - Discussing the second topic.<br>
+  - Elaborating on several points.<br>
+  - Wrapping up with some additional comments.<br>
+
+  It also spans multiple lines in the draft.
+BODY
+
+name2 = @repo.create_draft(title: "Post number two", views: ["testview"], body: draft_2_body)
+num = @repo.finish_draft(name2)
+@repo.generate_post(num)
+
+@repo.generate_front_page("testview")   # Generate the front page
+
+instruct <<~EOS
+  Front page should have two posts.
+  Each should have a blurb.
+  Links should work (and back button to return).
+EOS
+examine("testview")

data/test/manual/test_layout_widgets.rb

@@ -0,0 +1,40 @@
+require_relative './environment'
+
+manual_setup
+
+srand(42)  # for random posts
+
+create_3_views
+create_13_posts_manual
+alter_pubdates
+
+view = @repo.view("blog3")
+File.open(view.dir/:config/"layout.txt", "w") do |f|
+  f.puts "header"
+  f.puts "main"
+  f.puts "right  20%"
+end
+view.generate_empty_containers
+File.open(view.dir/:config/"right.txt", "w") do |f|
+  f.puts "widget links"
+end
+
+data = view.dir/:widgets/"links/list.txt"
+Dir.mkdir(view.dir/:widgets/"links")
+File.open(data, "w") do |f|
+  f.puts "https://www.google.com,Google"
+  f.puts "https://www.yahoo.com,Yahoo"
+end
+see_file data
+
+view.generate_front_page
+
+instruct <<~EOS
+  Again, 13 posts in three views
+  blog3 will have only header, main, right
+  It will have the Links widget
+  Click the + to expand
+  Links open in new tabs
+EOS
+
+examine view

data/test/manual/test_pagination.rb

@@ -0,0 +1,24 @@
+require_relative './environment'
+
+manual_setup
+
+srand(42)  # for random posts
+
+view = @repo.create_view("testview", "Another Test View", "testing pagination for post index")
+
+35.times do |i|
+  post = @repo.create_post(title: pseudowords(5, "Post #{i}"), body: pseudolines(10))
+  post.set_pubdate_with_seconds("2025-07-26", i)  # Set seconds to 00, 01, 02, etc.
+  @repo.generate_post(post.id)
+end
+
+view.generate_front_page
+
+instruct <<~EOS
+  Creates 35 posts (now instant!)
+  Posts have timestamps 12:00:00, 12:00:01, 12:00:02, etc.
+  Confirm they are in "recent first" order -- 35 down to 1
+  Confirm pagination works
+EOS
+
+examine view

data/test/manual/test_random_posts.rb

@@ -0,0 +1,38 @@
+require_relative './environment'
+
+# Handle --automated flag at the end
+automated_mode = ARGV.last == '--automated'
+if automated_mode
+  ARGV.pop  # Remove --automated from ARGV
+end
+
+abort "Need a view name (blog1 blog2 blog3)" unless ARGV.size == 1
+
+view = ARGV.first
+
+# Restore --automated flag for the examine function
+ARGV << '--automated' if automated_mode
+
+manual_setup
+
+srand(42)  # for random posts
+
+create_3_views
+create_13_posts_manual
+alter_pubdates
+
+view = @repo.lookup_view(view)
+
+instruct <<~EOS
+  Three blogs created: blog1 blog2 blog3
+  Browser goes to whichever you put on command line: #{view.name}
+  You can also navigate to the others.
+  Total of 13 posts 
+  Each post may be in only one view or two or all three
+EOS
+
+%w[blog1 blog2 blog3].each do |v|
+  @repo.generate_front_page(v)
+end
+
+examine view