scriptorium 0.0.2 → 0.6.1

data/test/manual/test1.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/test2.rb

@@ -0,0 +1,12 @@
+require_relative "./environment"
+
+manual_setup
+
+create_3_views
+@repo.generate_front_page("blog1")
+
+instruct <<~EOS
+  Do we still need this test??
+EOS
+
+examine("blog1")

data/test/manual/test3.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

data/test/manual/test4.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/test5.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/test6.rb

@@ -0,0 +1,73 @@
+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"
+  f.puts "widget pages"
+end
+
+# Set up the Links widget
+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
+
+# Set up the Pages widget with two dummy pages
+pages_dir = view.dir/:widgets/"pages"
+Dir.mkdir(pages_dir)
+
+# Create the list.txt file that the Pages widget reads
+File.open(pages_dir/"list.txt", "w") do |f|
+  f.puts "about"
+  f.puts "contact"
+end
+
+# Create the actual page files
+File.open(view.dir/:pages/"about.html", "w") do |f|
+  f.puts "<html><head><title>About Us</title></head><body>"
+  f.puts "<h1>About Us</h1>"
+  f.puts "<p>Learn more about our company and mission</p>"
+  f.puts "<p><a href=\"index.html\">← Back to Home</a></p>"
+  f.puts "</body></html>"
+end
+File.open(view.dir/:pages/"contact.html", "w") do |f|
+  f.puts "<html><head><title>Contact</title></head><body>"
+  f.puts "<h1>Contact</h1>"
+  f.puts "<p>Get in touch with our team</p>"
+  f.puts "<p><a href=\"index.html\">← Back to Home</a></a></p>"
+  f.puts "</body></html>"
+end
+
+see_file pages_dir/"list.txt"
+see_file view.dir/:pages/"about.html"
+see_file view.dir/:pages/"contact.html"
+
+view.generate_front_page
+
+instruct <<~EOS
+  Again, 13 posts in three views
+  blog3 will have only header, main, right
+  It will have both the Links widget and Pages widget in the right sidebar
+  Click the + to expand widgets
+  Links open in new tabs
+  Pages show dummy content (About Us and Contact)
+EOS
+
+examine view

data/test/manual/test_banner_combinations.rb

@@ -0,0 +1,120 @@
+# Manual inspection tests for BannerSVG feature combinations
+# 
+# This file creates posts with sensible combinations of banner features,
+# demonstrating how multiple features work together in realistic scenarios.
+# The posts are displayed in a browser for visual inspection.
+# 
+# Usage:
+#   ruby test_banner_combinations.rb          # Interactive mode with browser
+#   ruby test_banner_combinations.rb --automated  # Automated mode for CI/AI testing
+# 
+# Combinations tested:
+# - Professional Blue: Dark blue background with white bold centered text
+# - Gradient Elegance: Purple gradient with white bold italic centered text
+# - Warm Welcome: Yellow radial gradient with dark text, left-aligned
+# - High Contrast: Black background with large white bold text
+# - Reverse Contrast: White background with black text, right-aligned
+# - Creative Gradient: Diagonal gradient with white bold centered text
+# - Subtle Elegance: Light gray with dark italic text
+# - Bold Statement: Red gradient with large white bold text
+# - Modern Minimal: Light background with smaller dark text
+# 
+require_relative "./banner_environment"
+
+# Create test banners for sensible combinations
+create_banner_post(
+  "Professional Blue", 
+  "Clean and modern design",
+  "back.color #1e3a8a\ntext.color #ffffff\ntitle.style bold\ntext.position center\ntitle.xy 50% 30%\nsubtitle.xy 50% 70%",
+  "Professional Blue (White text, bold, centered)",
+  "banner-combo-test"
+)
+
+create_banner_post(
+  "Gradient Elegance", 
+  "Smooth color transition",
+  "back.linear #667eea #764ba2 lr\ntext.color #ffffff\ntitle.style bold italic\ntext.position center\ntitle.xy 50% 30%\nsubtitle.xy 50% 70%",
+  "Gradient Elegance (Purple gradient, white text, bold italic, centered)",
+  "banner-combo-test"
+)
+
+create_banner_post(
+  "Warm Welcome", 
+  "Friendly and inviting",
+  "back.radial #fbbf24 #f59e0b\ntext.color #1f2937\ntitle.style bold\ntext.position left\ntitle.xy 10% 30%\nsubtitle.xy 10% 70%",
+  "Warm Welcome (Yellow radial, dark text, bold, left-aligned)",
+  "banner-combo-test"
+)
+
+create_banner_post(
+  "High Contrast", 
+  "Maximum readability",
+  "back.color #000000\ntext.color #ffffff\ntitle.style bold\ntitle.scale 1.2\nsubtitle.scale 0.8\ntext.position center\ntitle.xy 50% 30%\nsubtitle.xy 50% 70%",
+  "High Contrast (Black background, white text, bold, large, centered)",
+  "banner-combo-test"
+)
+
+create_banner_post(
+  "Reverse Contrast", 
+  "Inverted color scheme",
+  "back.color #ffffff\ntext.color #000000\ntitle.style bold\ntext.position right\ntitle.xy 90% 30%\nsubtitle.xy 90% 70%",
+  "Reverse Contrast (White background, black text, bold, right-aligned)",
+  "banner-combo-test"
+)
+
+create_banner_post(
+  "Creative Gradient", 
+  "Diagonal color flow",
+  "back.linear #ff6b6b #4ecdc4 ul-lr\ntext.color #ffffff\ntitle.style bold\ntitle.scale 1.1\nsubtitle.scale 0.7\ntext.position center\ntitle.xy 50% 30%\nsubtitle.xy 50% 70%",
+  "Creative Gradient (Diagonal gradient, white text, bold, centered)",
+  "banner-combo-test"
+)
+
+create_banner_post(
+  "Subtle Elegance", 
+  "Understated beauty",
+  "back.color #f8fafc\ntext.color #475569\ntitle.style italic\ntext.position center\ntitle.xy 50% 35%\nsubtitle.xy 50% 75%",
+  "Subtle Elegance (Light gray background, dark text, italic, centered)",
+  "banner-combo-test"
+)
+
+create_banner_post(
+  "Bold Statement", 
+  "Make an impact",
+  "back.linear #dc2626 #7c2d12 tb\ntext.color #ffffff\ntitle.style bold\ntitle.scale 1.3\nsubtitle.scale 0.9\ntext.position center\ntitle.xy 50% 25%\nsubtitle.xy 50% 75%",
+  "Bold Statement (Red gradient, white text, bold, large, centered)",
+  "banner-combo-test"
+)
+
+create_banner_post(
+  "Modern Minimal", 
+  "Clean and simple",
+  "back.color #f1f5f9\ntext.color #0f172a\ntitle.style bold\ntitle.scale 0.9\nsubtitle.scale 0.6\ntext.position left\ntitle.xy 5% 40%\nsubtitle.xy 5% 80%",
+  "Modern Minimal (Light background, dark text, bold, left-aligned, smaller)",
+  "banner-combo-test"
+)
+
+generate_front_page("banner-combo-test")
+
+instruct <<~EOS
+  BannerSVG Combination Tests
+  
+  This page displays posts with sensible feature combinations:
+  - Professional Blue: Dark blue background with white bold centered text
+  - Gradient Elegance: Purple gradient with white bold italic centered text
+  - Warm Welcome: Yellow radial gradient with dark text, left-aligned
+  - High Contrast: Black background with large white bold text
+  - Reverse Contrast: White background with black text, right-aligned
+  - Creative Gradient: Diagonal gradient with white bold centered text
+  - Subtle Elegance: Light gray with dark italic text
+  - Bold Statement: Red gradient with large white bold text
+  - Modern Minimal: Light background with smaller dark text
+  
+  Each combination shows how multiple features work together.
+  Check that gradients render properly, text positioning is correct,
+  and the overall design looks cohesive and professional.
+  
+  The JavaScript should handle dynamic resizing when you resize the browser window.
+EOS
+
+examine("banner-combo-test") 

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/"config.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.generate_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 now in the same directory
+      # So browser URL should be just the filename (relative to HTML file)
+      display_path = image_path.gsub('../../assets/images/', '') if image_path
+      
+      # Fix the SVG pattern path to use the correct relative path for the HTML file
+      svg_output = svg_output.gsub('../../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">
+            #{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")