wip

Author: ploMP4

PROMPT.md

@@ -0,0 +1,8 @@
+This is a TUI presentation tool with transition animations based on string manipulation. I am trying to integrate images, I have
+manged to output symbol based images and I want to when I am not animating to output high res ones based on terminal capabilities.
+The image based on capabilities part is already implemented @internal/img/chafa_backend.go. The other logic is located
+@internal/process/image.go. The idea I had on how to implement it was to render the high res image on top of the symbol one when not
+animating using placeOverlay function from @internal/tui/overlay.go on the Post hook or something similar. My problem is that between
+the Pre and Post hook the slide will get styled by lipgloss (which is the behaviour I want or else the high res image conflicts with
+the lipgloss styling) meaning the position of the image might change and I need it to find where to place the overlay.
+

internal/img/chafa_backend.go

@@ -11,7 +11,7 @@ type chafaBackend struct{}
 
 const nChannels = 4
 
-func (b chafaBackend) Render(path string, width, height int32) (string, error) {
+func (b chafaBackend) Render(path string, width, height int32, animating bool) (string, error) {
 	var err error
 
 	defer func() {
@@ -24,11 +24,11 @@ func (b chafaBackend) Render(path string, width, height int32) (string, error) {
 		}
 	}()
 
-	out, err := b.render(path, width, height)
+	out, err := b.render(path, width, height, animating)
 	return out, err
 }
 
-func (b chafaBackend) render(path string, width, height int32) (string, error) {
+func (b chafaBackend) render(path string, width, height int32, animating bool) (string, error) {
 	pixels, pixelWidth, pixelHeight, err := chafa.Load(path)
 	if err != nil {
 		return "", err
@@ -44,7 +44,11 @@ func (b chafaBackend) render(path string, width, height int32) (string, error) {
 	chafa.CanvasConfigSetGeometry(config, width, height)
 	chafa.CanvasConfigSetCellGeometry(config, 18, 36)
 	chafa.CanvasConfigSetCanvasMode(config, capabilities.canvasMode)
-	chafa.CanvasConfigSetPixelMode(config, capabilities.pixelMode)
+	if animating {
+		chafa.CanvasConfigSetPixelMode(config, chafa.CHAFA_PIXEL_MODE_SYMBOLS)
+	} else {
+		chafa.CanvasConfigSetPixelMode(config, capabilities.pixelMode)
+	}
 	chafa.CanvasConfigSetPassthrough(config, capabilities.passthrough)
 	chafa.CanvasConfigSetSymbolMap(config, capabilities.symbolMap)
 

internal/img/images.go

@@ -1,7 +1,7 @@
 package img
 
 type ImageBackend interface {
-	Render(path string, width, height int32) (string, error)
+	Render(path string, width, height int32, animating bool) (string, error)
 }
 
 func Get(backend string) ImageBackend {

internal/process/image.go

@@ -20,11 +20,9 @@ func NewImageProcessor() *ImageProcessor {
 	}
 }
 
-const imgPlaceholderToken = "{{IMG-TOKEN-%d}}"
-
-func (p ImageProcessor) Pre(content string) (string, error) {
+func (p ImageProcessor) Pre(content string, themeName string) (string, error) {
 	// Clear all images
-	fmt.Print("\x1b_Ga=d\x1b\\")
+	// fmt.Print("\x1b_Ga=d\x1b\\")
 
 	// Regex to match markdown image syntax: ![alt text](path)
 	imageRegex := regexp.MustCompile(`!\[([^\]]*)\]\(([^)]+)\)`)
@@ -34,32 +32,46 @@ func (p ImageProcessor) Pre(content string) (string, error) {
 		return content, nil
 	}
 
+	var parts []string
+	lastIndex := 0
+	indices := imageRegex.FindAllStringIndex(content, -1)
+
 	for i, match := range matches {
-		fullMatch := match[0] // Full match: ![alt](path)
+		matchStart := indices[i][0]
+		matchEnd := indices[i][1]
+
+		// fullMatch := match[0] // Full match: ![alt](path)
 		altText := match[1]   // Alt text
 		imagePath := match[2] // Image path
 
-		token := fmt.Sprintf(imgPlaceholderToken, i)
+		if matchStart > lastIndex {
+			beforeText := content[lastIndex:matchStart]
+			parts = append(parts, renderMarkdownSection(beforeText, themeName))
+		}
 
-		renderedImage, err := p.backend.Render(imagePath, 10, 10)
+		renderedImage, err := p.backend.Render(imagePath, 80, 15, true)
 		if err != nil {
-			p.imageData[token] = fmt.Sprintf("[Error rendering image: %s]", altText)
-			content = strings.Replace(content, fullMatch, token, 1)
-			continue
+			parts = append(parts, fmt.Sprintf("[Error rendering image: %s]", altText))
+		} else {
+			parts = append(parts, renderedImage)
 		}
 
-		p.imageData[token] = renderedImage
-		content = strings.Replace(content, fullMatch, token, 1)
+		lastIndex = matchEnd
 	}
 
-	return content, nil
+	if lastIndex < len(content) {
+		remainingText := content[lastIndex:]
+		parts = append(parts, renderMarkdownSection(remainingText, themeName))
+	}
+
+	return strings.Join(parts, ""), nil
 }
 
 func (p ImageProcessor) Post(content string) (string, error) {
-	for token, imgData := range p.imageData {
-		if strings.Contains(content, token) {
-			content = strings.ReplaceAll(content, token, imgData)
-		}
-	}
+	// for token, imgData := range p.imageData {
+	// 	if strings.Contains(content, token) {
+	// 		content = strings.ReplaceAll(content, token, imgData)
+	// 	}
+	// }
 	return content, nil
 }

internal/process/process.go

@@ -1,7 +1,13 @@
 package process
 
+import (
+	"strings"
+
+	"github.com/charmbracelet/glamour"
+)
+
 type PreProcessor interface {
-	Pre(content string) (string, error)
+	Pre(content string, themeName string) (string, error)
 }
 
 type PostProcessor interface {
@@ -12,3 +18,15 @@ type Processor interface {
 	PreProcessor
 	PostProcessor
 }
+
+func renderMarkdownSection(text, themeName string) string {
+	if strings.TrimSpace(text) == "" {
+		return ""
+	}
+
+	rendered, err := glamour.Render(text, themeName)
+	if err != nil {
+		return text
+	}
+	return rendered
+}

internal/tui/slide.go

@@ -4,8 +4,6 @@ import (
 	"strings"
 
 	tea "github.com/charmbracelet/bubbletea"
-	"github.com/charmbracelet/glamour"
-	"github.com/charmbracelet/lipgloss"
 
 	"github.com/museslabs/kyma/internal/config"
 	"github.com/museslabs/kyma/internal/process"
@@ -61,20 +59,20 @@ func (s Slide) view() string {
 	}
 
 	p := process.NewImageProcessor()
-	data, _ := p.Pre(s.Data)
+	out, _ := p.Pre(s.Data, themeName)
 
 	// Pre-process markdown to handle custom highlighting syntax
-	out, err := processMarkdownWithHighlighting(data, themeName)
-	if err != nil {
-		// If preprocessing fails, fall back to regular Glamour rendering
-		out, err = glamour.Render(s.Data, themeName)
-		if err != nil {
-			b.WriteString("\n\n" + lipgloss.NewStyle().
-				Foreground(lipgloss.Color("9")). // Red
-				Render("Error: "+err.Error()))
-			return b.String()
-		}
-	}
+	// out, err := processMarkdownWithHighlighting(data, themeName)
+	// if err != nil {
+	// 	// If preprocessing fails, fall back to regular Glamour rendering
+	// 	out, err = glamour.Render(s.Data, themeName)
+	// 	if err != nil {
+	// 		b.WriteString("\n\n" + lipgloss.NewStyle().
+	// 			Foreground(lipgloss.Color("9")). // Red
+	// 			Render("Error: "+err.Error()))
+	// 		return b.String()
+	// 	}
+	// }
 
 	if s.ActiveTransition != nil && s.ActiveTransition.Animating() {
 		direction := s.ActiveTransition.Direction()