scriptorium 0.6.1 → 0.7.2

data/test/manual/create_posts_for_web.rb

@@ -0,0 +1,114 @@
+require_relative './environment'
+
+manual_setup
+
+# Create a view for testing posts in the correct location for the web app
+# First, clean up the old repo and create a new one in the right location
+system("rm -rf ui/web/scriptorium-TEST")
+@repo = Scriptorium::Repo.create("ui/web/scriptorium-TEST", testmode: true)
+view = @repo.create_view("web-test", "Web App Test View", "Testing posts in the web interface")
+
+puts "Creating posts for web app testing..."
+
+# Create 45 posts with varied content
+45.times do |i|
+  # Create posts with different titles and content
+  title = case i % 5
+  when 0
+    "Technical Post #{i + 1}: Ruby Programming"
+  when 1
+    "Creative Post #{i + 1}: Writing and Art"
+  when 2
+    "Science Post #{i + 1}: Physics and Math"
+  when 3
+    "Philosophy Post #{i + 1}: Deep Thoughts"
+  else
+    "Misc Post #{i + 1}: Random Topics"
+  end
+  
+  # Create varied body content
+  body = case i % 4
+  when 0
+    "This is a technical post about programming and software development. " +
+    "It covers various aspects of Ruby programming, including best practices, " +
+    "design patterns, and performance optimization techniques."
+  when 1
+    "A creative exploration of writing, art, and expression. " +
+    "This post delves into the creative process, inspiration, and " +
+    "the intersection of technology and creativity."
+  when 2
+    "An exploration of scientific concepts, from physics to mathematics. " +
+    "This post discusses fundamental principles, recent discoveries, " +
+    "and the beauty of scientific understanding."
+  else
+    "Philosophical musings on life, technology, and human nature. " +
+    "This post explores deep questions about consciousness, existence, " +
+    "and the meaning of it all."
+  end
+  
+  # Add some code examples for syntax highlighting
+  if i % 3 == 0
+    body += "\n\n```ruby\n# Example Ruby code\ndef hello_world\n  puts 'Hello, World!'\nend\n\nhello_world\n```"
+  end
+  
+  # Create the post
+  post = @repo.create_post(title: title, body: body)
+  
+  # Set publication dates spread across different days
+  # Use modulo to get valid dates (1-31 for January)
+  day = (i % 31) + 1
+  post.set_pubdate_with_seconds("2025-01-#{day.to_s.rjust(2, '0')}", i % 60)
+  
+  # Generate the post
+  @repo.generate_post(post.id)
+  
+  puts "Created post #{i + 1}: #{title}"
+end
+
+# Generate the front page for the view
+view.generate_front_page
+
+puts "\n" + "="*60
+puts "POSTS CREATED SUCCESSFULLY!"
+puts "="*60
+puts "Created 45 posts in view 'web-test'"
+puts "Posts have varied titles, content, and publication dates"
+puts "Some posts include code examples for syntax highlighting"
+puts "\nTo view in web app:"
+puts "1. Start the web app: ./ui/web/bin/scriptorium-web start"
+puts "2. Open browser to: http://localhost:4567"
+puts "3. Select the 'web-test' view"
+puts "4. Browse posts and test pagination"
+puts "\nFiles generated in: test/scriptorium-TEST/views/web-test/output/"
+
+instruct <<~EOS
+  Posts created successfully!
+  
+  Next steps:
+  1. Start the web app with: ./ui/web/bin/scriptorium-web start
+  2. Open browser to http://localhost:4567
+  3. Select 'web-test' view from the dropdown
+  4. Browse the posts and test the interface
+  
+  The posts include:
+  - 45 posts with varied content types
+  - Different publication dates (spread across 45 days)
+  - Code examples for syntax highlighting
+  - Varied titles and content themes
+  
+EOS
+
+# Clean up webrick if it was started
+begin
+  line = `ps | grep "ruby -run -e httpd" | grep -v grep`
+  if line.strip != ""
+    pid = line.split.first
+    pid2 = pid.to_i + 1
+    system("kill #{pid} #{pid2}")
+    puts "Cleaned up webrick server"
+  end
+rescue => e
+  puts "No webrick server to clean up"
+end
+
+puts "\nManual test complete! You can now test the web app with these posts."

data/test/manual/preview_manual_test.rb

@@ -0,0 +1,129 @@
+require 'minitest/autorun'
+require_relative '../../lib/scriptorium'
+require_relative '../test_helpers'
+require_relative '../web_test_helper'
+require_relative '../support/preview_utils'
+require 'fileutils'
+require 'shellwords'
+
+# Manual-inspection oriented preview tests
+# - Does not enforce strict order
+# - Prints absolute paths and preview URLs to inspect
+# - Set MANUAL_KEEP=1 to skip teardown so artifacts remain
+
+class PreviewManualTest < Minitest::Test
+  include TestHelpers
+  include WebTestHelper
+
+  def interactive_open(label:, paths: [], urls: [])
+    PreviewUtils.interactive_open(label: label, paths: paths, urls: urls)
+  end
+
+  def setup
+    # Use the web app's test repo location so preview routes see generated files
+    @repo_name = "ui/web/scriptorium-TEST"
+    @view_name = "manual_preview_view"
+
+    @api = Scriptorium::API.new
+    # Ensure a clean slate before creating the repo
+    begin
+      FileUtils.rm_rf(@repo_name)
+      backup_dir = File.join(File.dirname(@repo_name), 'backup-scriptorium-TEST')
+      FileUtils.rm_rf(backup_dir)
+    rescue => e
+      puts "[Manual] Warning: cleanup failed: #{e.message}"
+    end
+    @api.create_repo(@repo_name)
+    @api.open_repo(@repo_name)
+    @api.create_view(@view_name, "Manual Preview View")
+
+    # Ensure required UI/social icons are available in the view
+    begin
+      @api.copy_asset('icons/ui/back.png',    from: 'gem', to: 'view', view: @view_name)
+    rescue => e
+      puts "[Manual] Warning: could not copy icons/ui/back.png from gem: #{e.message}"
+    end
+    begin
+      @api.copy_asset('icons/social/reddit.png', from: 'gem', to: 'view', view: @view_name)
+    rescue => e
+      puts "[Manual] Warning: could not copy icons/social/reddit.png from gem: #{e.message}"
+    end
+
+    # Seed some posts
+    @api.create_post("Manual Post A", "Blurb A")
+    @api.create_post("Manual Post B", "Blurb B")
+
+    # Configure post index (line break in date, enable pagination)
+    PreviewUtils.write_post_index_config(@repo_name, @view_name)
+
+    # Add an image and reference it in post 0001
+    # Use a real image so the browser can render it
+    sample_image = File.expand_path("test/assets/testbanner.jpg")
+    @api.upload_asset(sample_image, filename: 'manual.jpg')
+    PreviewUtils.reference_image_in_post(@repo_name, '0001', 'manual.jpg')
+
+    @api.generate_view(@view_name)
+  end
+
+  def teardown
+    return if ENV['MANUAL_KEEP'] == '1'
+    FileUtils.rm_rf(@repo_name)
+  end
+
+  # 100-series: Index preview
+  def test_100_preview_index_artifacts
+    base = File.expand_path(File.join(@repo_name, 'views', @view_name))
+    index_file = File.join(base, 'output', 'index.html')
+    post_index = File.join(base, 'output', 'post_index.html')
+    page1 = File.join(base, 'output', 'page1.html')
+
+    assert File.exist?(index_file), 'index.html missing'
+    assert File.exist?(post_index), 'post_index.html missing'
+    assert File.exist?(page1), 'page1.html missing'
+
+    puts "\n[Manual] Inspect artifacts (server-first). Files shown for reference:"
+    puts "  URL : http://localhost:4567/preview/#{@view_name}/index.html"
+    puts "  File: #{index_file}"
+    puts "  File: #{post_index}"
+    puts "  File: #{page1}"
+    # Restart server to ensure preview routes work
+    stop_web_server
+    start_web_server
+    # Open server URL only to avoid file:// CORS issues
+    interactive_open(label: 'index (server)', paths: [], urls: ["http://localhost:4567/preview/#{@view_name}/index.html"])
+  end
+
+  # 200-series: One post page and asset
+  def test_200_post_and_asset_reference
+    base = File.expand_path(File.join(@repo_name, 'views', @view_name))
+    meta = File.read(File.join(@repo_name, 'posts', '0001', 'meta.txt'))
+    slug = meta.lines.grep(/^post.slug\s+/).first.split.last
+    post_html = File.join(base, 'output', 'posts', slug)
+    asset_in_output = File.join(base, 'output', 'assets', 'manual.jpg')
+
+    assert File.exist?(post_html), 'Post HTML missing'
+    html = File.read(post_html)
+    assert_includes html, "<img src=../assets/manual.jpg", 'Expected relative asset path in post'
+
+    # Global asset copied to output for serving
+    assert File.exist?(asset_in_output), 'Expected asset copied to output/assets'
+
+    # Clarify exact image path and how the browser resolves it
+    img_src = html[/<img[^>]+src=([^\s>]+)/, 1]
+    resolved_img_path = File.expand_path(img_src, File.dirname(post_html)) if img_src
+
+    puts "\n[Manual] Inspect post and asset:"
+    puts "  File: #{post_html}"
+    puts "  File: #{asset_in_output}"
+    puts "  IMG  src (from HTML): #{img_src}"
+    puts "  IMG  resolves to    : #{resolved_img_path}"
+    puts "  URL : /preview/#{@view_name}/posts/#{slug}"
+    puts "  URL : /preview/#{@view_name}/assets/manual.jpg"
+    # Restart server to ensure preview routes work
+    stop_web_server
+    start_web_server
+    # Open server URLs only; list local paths for reference
+    interactive_open(label: 'post (server)', paths: [], urls: ["http://localhost:4567/preview/#{@view_name}/posts/#{slug}"])
+    interactive_open(label: 'asset (server)', paths: [], urls: ["http://localhost:4567/preview/#{@view_name}/assets/manual.jpg"])
+  end
+end

data/test/manual/test_banner_features.rb

@@ -118,37 +118,37 @@ tests = [
   {
     title: "Perfect Image Background",
     subtitle: "Image test (8:1 aspect)",
-          config: "back.image ../../assets/images/perfect.png",
+    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",
+            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",
+    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", 
+    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",
+    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",
+    config: "back.image ../../assets/images/small.png",
     description: "Small low-res image scaled up to fill banner - may appear pixelated but maintains aspect"
   },
   {
@@ -176,26 +176,26 @@ tests.each_with_index do |test, index|
   filename = "test#{page_num.to_s.rjust(2, '0')}.html"
   
   # Write config file for this test
-  File.write(test_dir/"config.txt", test[:config])
+  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.generate_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 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
+      # 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 relative path for the HTML file
-      svg_output = svg_output.gsub('../../assets/images/', '')
+      # 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
@@ -229,7 +229,7 @@ tests.each_with_index do |test, index|
           </style>
       </head>
       <body>
-          <div class="banner">
+          <div class="banner" id="header">
             #{svg_output}
           </div>
           <div class="content">

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