feat: _includes/Help copy code ( Fixes #331 )

Author: StartAutomating

psturtle.com/_includes/Help.ps1

@@ -14,13 +14,13 @@ $Command,
 [switch]
 $InvokeExample,
 
-# The width of the sample code (in landscape mode), in characters
-[int]
-$SampleCodeWidthLandscape = 80,
+# If set, will not show the command name
+[switch]
+$HideName,
 
-# The width of the sample code (in portrait mode), in characters
-[int]
-$SampleCodeWidthPortrait = 50
+# The identifier for the palette `<select>`.
+[string]
+$SelectPaletteId = 'SelectPalette'
 )
 
 # Try to get command help
@@ -39,10 +39,53 @@ $synopsis = $CommandHelp.Synopsis
 $description = $CommandHelp.description.text -join [Environment]::NewLine
 $notes = $CommandHelp.alertSet.alert.text -join [Environment]::NewLine
 
+filter looksLikeMarkdown {
+    if (
+        # If it's got a markdown-like link
+        $_ -match '\[[^\]]+\]\(' -or 
+        # Or any of the lines start with markdown special characters
+        $_ -split '(?>\r\n|\n)' -match '\s{0,3}[\#*~`]'
+    ) {
+        # it's probably markdown
+        $_
+    }    
+}
+
+filter looksLikeTags {
+    if ($_ -match '^\s{0,}<') {
+        $_
+    }
+}
+
 # Display the command name, synopsis, and description
-"<h1>$([Web.HttpUtility]::HtmlEncode($CommandHelp.Name))</h1>"
-"<h2>$([Web.HttpUtility]::HtmlEncode($synopsis))</h2>"
-"<h3>$([Web.HttpUtility]::HtmlEncode($description))</h3>"
+if (-not $HideName) {
+    "<h1>$([Web.HttpUtility]::HtmlEncode(
+        $CommandHelp.Name -replace '(?:.+?/){0,}' -replace '\.ps1$' -replace '\..+?$'
+    ))</h1>"
+}
+
+if ($synopsis) {
+    if ($synopsis | looksLikeMarkdown) {
+        (ConvertFrom-Markdown -InputObject $synopsis).Html
+    }
+    elseif ($synopsis | looksLikeTags) {
+        $synopsis
+    } else {
+        "<h2>$([Web.HttpUtility]::HtmlEncode($synopsis))</h2>"
+    }
+}
+
+if ($description) {
+    if ($description | lookslikeMarkdown) {
+        (ConvertFrom-Markdown -InputObject $description).Html
+    } 
+    elseif ($description | looksLikeTags) {
+        $description
+    }
+    else {
+        "<h3>$([Web.HttpUtility]::HtmlEncode($description))</h3>"        
+    }
+}
 
 if ($notes) {
     # If there were notes, convert them from markdown
@@ -53,47 +96,54 @@ if ($notes) {
 "<style>"
 ".example-grid {
     width: 90vw;
-    margin-left: auto;
-    margin-right: auto;
+    margin-left: 5vw;
+    margin-right: 5vw;
     text-align: center;
 }"
 ".example {    
     text-align: center;    
 }"
-".sampleCode {
-    text-align: center;
-    width: fit-content;
+".example-code {
+    text-align: center;    
     font-size: .9rem;
     margin-left: auto;
     margin-right: auto;
 }"
 
-<#"@media (orientation: portrait) {
-    sampleCode { width: ${SampleCodeWidthPortrait}ch }
-}"#>
-
 "code { text-align: left}"
 
+".example-menu { text-align: right; margin-top: -.5rem; margin-bottom: -.5rem }"
+".copy-button { float: right; }"
+
 ".example-outputs {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 1.5rem;
+    gap: 1rem;
     margin: 0.8rem;
-    padding: 0.4rem;
+    padding: 0.2rem;
     width: 90vw;
 }"
 ".example-output { text-align: center }"
+"
+pre {
+    position: relative;  
+}
+"
 "</style>"
 #endregion Grid Styles
 
+$exampleCount = @($CommandHelp.examples.example).Length
+$progress = [Ordered]@{id=Get-Random}
+$progress.Activity = "$($command) examples"
 # Create a grid for examples
 "<div class='example-grid'>"
 $exampleNumber = 0
 # Walk over each example
-foreach ($example in $CommandHelp.examples.example) {
+foreach ($example in $CommandHelp.examples.example) {    
     $exampleNumber++
+    
     # Combine the code and remarks
     $exampleLines = 
         @(
@@ -107,6 +157,11 @@ foreach ($example in $CommandHelp.examples.example) {
     # Anything until the first non-comment line is a markdown predicate to the example
     $nonCommentLine = $false
     $markdownLines = @()
+
+    $progress.PercentComplete = $exampleNumber * 100 / $exampleCount
+    $progress.Activity = "$($command) examples $exampleNumber"
+    $progress.Status = "$($exampleLines[0])"
+    Write-Progress @progress
 
     # Go thru each line in the example as part of a loop
     $codeBlock = @(foreach ($exampleLine in $exampleLines) {
@@ -129,7 +184,7 @@ foreach ($example in $CommandHelp.examples.example) {
             (ConvertFrom-Markdown -InputObject $Markdown).Html
         }
         # followed by our sample code
-        "<div class='sampleCode'>"
+        "<div class='example-code'>"
             "<pre>"
                 "<code class='language-powershell'>" + 
                     [Web.HttpUtility]::HtmlEncode($codeBlock) + 
@@ -142,8 +197,7 @@ foreach ($example in $CommandHelp.examples.example) {
             "</div>"
             "<hr/>"
             continue
-        }
-
+        }        
         # Otherwise, try to make our example a script block
         $exampleCode = 
             try {
@@ -153,8 +207,14 @@ foreach ($example in $CommandHelp.examples.example) {
                 continue
             }
 
+        if (-not $global:ExampleOutputCache) {
+            $global:ExampleOutputCache = [Ordered]@{}
+        }
+        if (-not $global:ExampleOutputCache[$codeBlock]) {
+            $global:ExampleOutputCache[$codeBlock] = @(. $exampleCode)
+        }
         # then run it and capture the output
-        $exampleOutputs = @(. $exampleCode)
+        $exampleOutputs = $script:ExampleOutputCache[$codeBlock]
 
         # Keep track of our example output count
         $exampleOutputNumber = 0
@@ -195,4 +255,20 @@ foreach ($example in $CommandHelp.examples.example) {
         "<hr/>"
     "</div>"    
 }
-"</div>"
+"</div>"
+
+$progress.Remove('PercentComplete')
+$progress['Completed'] = $true
+Write-Progress @progress
+
+@"
+<script>
+document.querySelectorAll('pre > code').forEach(element => {
+    const copyCodeButton = document.createElement('div')
+    copyCodeButton.classList.add('copy-button')
+    copyCodeButton.onclick = () => navigator.clipboard.writeText(element.innerText)    
+    copyCodeButton.innerHTML = ``$(. $site.includes.Feather -Icon 'clipboard')``
+    element.parentNode.parentNode.prepend(copyCodeButton)
+});
+</script>
+"@