Add new SVG asset for canvas image in documentation

Author: phil-scott-78

Spectre.Docs.Examples/Showcase/CanvasImageSample.cs

@@ -1,4 +1,4 @@
-using SixLabors.ImageSharp.Processing;
+using System.Reflection;
 using Spectre.Console;
 
 namespace Spectre.Docs.Examples.Showcase;
@@ -7,20 +7,18 @@ internal class CanvasImageSample : BaseSample
 {
     public override void Run(IAnsiConsole console)
     {
-        var image = new CanvasImage("../../../examples/Console/Canvas/cake.png");
-        image.MaxWidth(16);
-        console.Write(image);
-    }
-}
+        var assembly = Assembly.GetExecutingAssembly();
+        using var stream = assembly.GetManifestResourceStream("Spectre.Docs.Examples.spectre-logo.png")!;
+        using var ms = new MemoryStream();
+        stream.CopyTo(ms);
 
-internal class CanvasImageManipulationSample : BaseSample
-{
-    public override void Run(IAnsiConsole console)
-    {
-        var image = new CanvasImage("../../../examples/Console/Canvas/cake.png");
-        image.MaxWidth(24);
-        image.BilinearResampler();
-        image.Mutate(ctx => ctx.Grayscale().Rotate(-45).EntropyCrop());
-        console.Write(image);
+        var image = new CanvasImage(ms.ToArray());
+        image.MaxWidth(22);
+
+        var panel = new Panel(image).Padding(8,1,8,1)
+            .Header("[yellow]Canvas Image[/]")
+            .BorderColor(Color.Blue);
+
+        console.Write(panel);
     }
-}
+}

Spectre.Docs.Examples/Spectre.Docs.Examples.csproj

@@ -15,4 +15,9 @@
       <PackageReference Include="Spectre.Console.ImageSharp" Version="0.54.1-alpha.0.7" />
       <PackageReference Include="Spectre.Console.Json" Version="0.54.1-alpha.0.7" />
     </ItemGroup>
+
+    <ItemGroup>
+      <None Remove="spectre-logo.png" />
+      <EmbeddedResource Include="spectre-logo.png" />
+    </ItemGroup>
 </Project>

Spectre.Docs.Examples/VCR/canvas-image.tape

@@ -0,0 +1,11 @@
+Set DisableCursor true
+Set FontSize 22
+Set Theme "one dark"
+Set TransparentBackground "true"
+Set Cols 82
+Set Rows 20
+Set EndBuffer 2s
+
+Exec "dotnet run --project .\Spectre.Docs.Examples\ --no-build showcase canvas-image"
+Wait
+Screenshot "Spectre.Docs/Content/assets/canvas-image.svg"

Spectre.Docs.Examples/spectre-logo.png

@@ -12,6 +12,9 @@ The CanvasImage widget loads and displays image files in the console by converti
 > part of Spectre.Console. The Six Labors Split License covers all other usage,
 > see: https://github.com/SixLabors/ImageSharp/blob/master/LICENSE
 
+<Screenshot src="/assets/canvas-image.svg" />
+
+
 ## When to Use
 
 Use CanvasImage when you need to **display visual content from image files** in your console application. Common

Spectre.Docs/Content/assets/canvas-image.svg

@@ -7,6 +7,9 @@ order: 3850
 
 The Canvas widget enables pixel-level drawing in the console, where you can set individual pixels with specific colors to create graphics, patterns, and visualizations.
 
+<Screenshot src="/assets/canvas.svg" />
+
+
 ## When to Use
 
 Use Canvas when you need to **create custom graphics or visualizations** at the pixel level. Common scenarios: