Making image bigger

spectreconsole · patriksvensson · Jul 15, 2021 · Jul 10, 2021 · Jul 11, 2021 · Jul 11, 2021
commit 01daef109247c6576a6743588a2d22c579a10000
diff --git a/docs/input/exceptions.md b/docs/input/exceptions.md
@@ -1,5 +1,9 @@
 Title: Exceptions
 Order: 40
+Description: "Exceptions aren't always readable when viewed in the terminal. You can make exception a bit more readable by using the **WriteException** method."
+Highlights:
+    - Color coded output.
+    - Shorten long identifiers and paths.
 ---
 
 Exceptions aren't always readable when viewed in the terminal.  

diff --git a/docs/input/markup.md b/docs/input/markup.md
@@ -2,9 +2,9 @@ Title: Markup
 Order: 30
 Description: The Markup class allows you to output rich text to the console.
 Highlights:
- - Easily add *color*
- - Add [hyperlinks](http://example.com) to text
- - Emoji 🚀 parsing
+ - Easily add *color*.
+ - Add hyperlinks to for supported terminals.
+ - Emoji 🚀 parsing.
 ---
 
 The `Markup` class allows you to output rich text to the console.

diff --git a/docs/input/widgets/tree.md b/docs/input/widgets/tree.md
@@ -1,7 +1,9 @@
 Title: Tree
 Order: 10
 Description: "The **Tree** widget can be used to render hierarchical data."
-
+Highlights:
+    - Custom colors and styles for guidelines.
+    - Include any *Spectre.Console* widgets as child nodes.
 ---
 
 The `Tree` widget can be used to render hierarchical data.

diff --git a/docs/src/Pipelines/SocialCardPipeline.cs b/docs/src/Pipelines/SocialCardPipeline.cs
@@ -50,6 +50,7 @@ class GenerateSocialImage : Module
     {
         protected override async Task<IEnumerable<IDocument>> ExecuteContextAsync(IExecutionContext context)
         {
+            context.Logger.LogInformation("Starting social image generation");
             var builder = WebApplication.CreateBuilder();
             builder.Logging.ClearProviders();
 
@@ -68,13 +69,17 @@ protected override async Task<IEnumerable<IDocument>> ExecuteContextAsync(IExecu
 
             await app.StartAsync().ConfigureAwait(false);
 
+            context.Logger.LogInformation("Web application started");
+
             using var playwright = await Playwright.CreateAsync().ConfigureAwait(false);
+            context.Logger.LogInformation("Playwright started");
             var browser = await playwright.Chromium.LaunchAsync().ConfigureAwait(false);
+            context.Logger.LogInformation("Chrome launched");
 
             var url = app.Urls.FirstOrDefault(u => u.StartsWith("http://"));
             var page = await browser.NewPageAsync(new BrowserNewPageOptions
                 {
-                    ViewportSize = new ViewportSize { Width = 680, Height = 340 },
+                    ViewportSize = new ViewportSize { Width = 1200, Height = 618 },
                 }
             );
 
@@ -85,7 +90,9 @@ protected override async Task<IEnumerable<IDocument>> ExecuteContextAsync(IExecu
                 var description = input.GetString("Description");
                 var highlights = input.GetList<string>("Highlights") ?? Array.Empty<string>();
 
+                context.Logger.LogInformation("Build social card for {Url}", url);
                 await page.GotoAsync($"{url}/?title={title}&desc={description}&highlights={string.Join("||", highlights)}");
+                context.Logger.LogInformation("Finished building social card for {Url}", url);
                 var bytes = await page.ScreenshotAsync();
 
                 var destination = input.Destination.InsertSuffix("-social").ChangeExtension("png");

diff --git a/docs/src/SocialCards/index.cshtml b/docs/src/SocialCards/index.cshtml
@@ -14,7 +14,7 @@
 
   <div id="container">
     <div id="console">
-        <div class="line"><span style="color:var(--brightBlack)">╭─</span><span style="color:var(--folder)">&#xe0b2;</span><span style="background-color:var(--folder);color:var(--black)"> ~/spectre.console</span><span style="color:var(--folder);background-color:var(--dotnet)">&#xe0b0;</span><span style="background-color:var(--blue)"> .NET 5.0 </span><span style="color:var(--dotnet);background-color:var(--git)">&#xe0b0;</span><span style="background-color:var(--git)"> &#xe0a0; main </span><span style="color:var(--git)">&#xe0b4;</span></div>
+        <div class="line"><span style="color:var(--brightBlack)">╭─</span><span style="color:var(--folder)">&#xe0b2;</span><span style="background-color:var(--folder);color:var(--black)"> ~/spectre.console</span><span style="color:var(--folder);background-color:var(--dotnet)">&#xe0b0;</span><span style="background-color:var(--blue)"> .NET 5.0 </span><span style="color:var(--dotnet);background-color:var(--git)">&#xe0b0;</span><span style="background-color:var(--git);color:var(--background)"> &#xe0a0; main </span><span style="color:var(--git)">&#xe0b4;</span></div>
         <div class="line"><span style="color:var(--brightBlack)">╰─</span> dotnet run</div>
         <div class="line"></div>
         <div class="line">╭────────────────────────────────────────────────────────╮</div>

diff --git a/docs/src/SocialCards/styles.css b/docs/src/SocialCards/styles.css
@@ -4,16 +4,16 @@
 }
 
 * {
-    padding: 0;
-    margin: 0;
-}
-
-:root {
-    --height: 340px;
-    --width: 680px;
-    --line-height: 22px;
-    --padding: 10px;
-    --rows: calc((var(--height) - var(--padding) * 2) / var(--line-height));
+    padding:0;
+    margin:0;
+  }
+
+  :root {
+    --height: 618px;
+    --width:1200px;
+    --line-height: 39px;
+    --padding: 20px;
+    --rows: calc((--var(--height) - var(--padding) * 2) / var(--line-height));
     --background: #1E2127;
     --black: #000000;
     --blue: #61AFEF;
@@ -35,101 +35,103 @@
     --folder: var(--yellow);
     --dotnet: var(--blue);
     --git: var(--green);
-}
+  }
 
 
-body {
-    font-family: 'CascadiaCodePL', monospace;
-    font-weight: 400;
-    font-size: calc(var(--line-height) - 3px);
-}
+  body{
+    font-family:'CascadiaCodePL',monospace;
+    font-weight:400;
+    font-size: calc(var(--line-height) - 5px);
+  }
 
-#container {
+  #container {
     background-color: var(--background);
     color: #fff;
     width: calc(var(--width) - var(--padding) * 2);
     height: calc(var(--height) - var(--padding) * 2);
-    padding: var(--padding);
+    padding:var(--padding);
     position: relative;
-}
+  }
 
-#console {
+  #console{
     position: relative;
-}
+  }
 
-.line {
-    height: var(--line-height);
-    width: 100%;
-    white-space: pre;
-}
+  .line{
+      height:var(--line-height);
+      width:100%;
+      white-space: pre;
+  }
 
-#title {
+  #title{
     position: absolute;
-    margin: 0 -3px;
-    padding: 0 3px;
     left: 3ch;
     top: calc(3 * var(--line-height));
-    background: var(--background);
-    z-index: 4;
-}
+    margin: 0 -3px;
+    padding: 0 3px;
+    background:var(--background);
+    z-index:4;
+  }
 
-#content {
+  #content{
     position: absolute;
     left: 3ch;
     top: calc(5 * var(--line-height));;
-    height: calc(var(--height) - 7 * var(--line-height));
+    height:calc(var(--height) - 7 * var(--line-height));
     width: 53ch;
-    line-height: var(--line-height);
+    line-height:var(--line-height);
     overflow-y: hidden;
-}
+  }
 
-#content p {
+  #content p {
     margin: 0;
-}
+  }
 
-#content p + ul {
-    margin-top: var(--line-height);
-}
+  #content p + ul {
+    margin-top:var(--line-height);
+  }
 
-#content ul {
-    list-style: "*";
-    margin-left: 1ch;
-}
-
-#content ul li {
-    padding-left: 1ch;
-}
-
-#content strong, #content b {
+  #content strong {
     color: var(--yellow);
-    font-weight: normal;
-}
+    font-weight: 400;
+  }
 
-#content em, #content i {
+  #content em, #content i {
     color: var(--blue);
     font-style: normal;
-}
+  }
+
+  #content ul {
+    list-style: "*";
+    margin-left: 1ch;
+  }
+
+  #content ul li {
+    padding-left:1ch;
+  }
 
-#footer {
-    position: absolute;
-    top: calc(var(--height) - var(--line-height) * 3);
-    left: 3ch;
-    background: var(--background);
-    width: 51ch;
-    z-index: 4;
-}
 
-#logo {
-    height: calc(var(--line-height) * 2.5);
-    width: calc(var(--line-height) * 2.5);
+
+  #footer{
     position: absolute;
-    right: 2ch;
-    top: calc(var(--padding) / 2);
+    top: calc(var(--height) - var(--padding) - var(--line-height) * 3);
+    left  : 3ch;
+    background:var(--background);
+    width:51ch;
+    z-index:4;
+  }
+
+  #logo{
+    height:calc(var(--line-height) * 2.5);
+    width:calc(var(--line-height) * 2.5);
+    position:absolute;
+    right:2ch;
+    top:calc(var(--padding) / 2);
     fill: var(--white);
-    opacity: .4;
-}
+    opacity:.4;
+  }
 
-#container::before {
+  #container::before {
     /* fake scan lines */
     content: " ";
     display: block;
@@ -140,6 +142,7 @@ body {
     right: 0;
     background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
     z-index: 200;
-    background-size: 100% 2px, 3px 100%;
+    background-size: 100% 4px, 5px 100%;
     pointer-events: none;
-}
+  }
+