Make website different

CONTRIBUTING.md

@@ -30,15 +30,15 @@ These are guidelines not rules, you can do whatever you want to make things work
 
 These people are awesome and you should go follow them to keep tabs on all the other awesome stuff they're doing:
 
-- [@patriksvensson](https://github.com/patriksvensson)  
+- **[@patriksvensson](https://github.com/patriksvensson)**  
   The [Spectre Console](https://spectreconsole.net/) creator. Without the dotnet library this module wouldn't exist.
-- [@dfinke](https://github.com/dfinke)  
+- **[@dfinke](https://github.com/dfinke)**  
   Doug Finke helped fix some broken table logic in the earliest days of the module yet his biggest contribution has been to my growth as a developer. Thanks for helping me gather the courage to build in the open.
-- [@trackd](https://github.com/trackd)  
+- **[@trackd](https://github.com/trackd)**  
   The table whisperer. Most of the logic for translating between PowerShell objects and the format required by the Spectre Console table widgets has come from their big brain and it's melted mine. They're a crazy-talented PowerShell developer who has helped teach me a lot and their contributions are a big part of the v2 release.
-- [@StartAutomating](https://github.com/StartAutomating)  
+- **[@StartAutomating](https://github.com/StartAutomating)**  
   Thanks for the sponsorship, EZOut and HelpOut modules. HelpOut is used to generate the markdown that powers the [pwshspectreconsole.com](https://pwshspectreconsole.com/reference/formatting/format-spectrebarchart/) documentation site.
-- [@futuremotiondev](https://github.com/futuremotiondev), [@ruckii](https://github.com/ruckii) and [@csillikd-messerli](https://github.com/csillikd-messerli)  
+- **[@futuremotiondev](https://github.com/futuremotiondev)**, **[@ruckii](https://github.com/ruckii)** and **[@csillikd-messerli](https://github.com/csillikd-messerli)**  
   Thank you for the issues raised and the fixes you've pulled together making this module better.
 
 ## Contact Me

PwshSpectreConsole.Docs/astro.config.mjs

@@ -15,8 +15,10 @@ export default defineConfig({
       favicon: "/favicon.png",
       customCss: ["./src/tailwind.css"],
       social: {
+        rss: "https://shaunlawrie.com/rss.xml",
         github: "https://github.com/ShaunLawrie/PwshSpectreConsole",
-        twitter: "https://twitter.com/Shaun_Lawrie",
+        "x.com": "https://twitter.com/Shaun_Lawrie",
+        youtube: "https://www.youtube.com/@shaunlawrie",
       },
       components: {
         Head: './src/components/Head.astro',

PwshSpectreConsole.Docs/src/components/TerminalPreview.astro

@@ -1,87 +1,65 @@
 ---
-const { speed } = Astro.props;
----
+import fs from 'fs';
+const framesDirectory = './src/components/frames/';
 
-<animated-terminal class="animated-terminal mt-0" data-speed={speed}>
+const frame1 = fs.readFileSync(`${framesDirectory}/terminal-preview-1.html`, 'utf8');
+const frame2 = fs.readFileSync(`${framesDirectory}/terminal-preview-2.html`, 'utf8');
+const frame3 = fs.readFileSync(`${framesDirectory}/terminal-preview-3.html`, 'utf8');
+const frame4 = fs.readFileSync(`${framesDirectory}/terminal-preview-4.html`, 'utf8');
 
-    <div class="mt-6 overflow-hidden" data-terminal-frame>
-        <pre class="font-mono bg-slate-50 dark:bg-slate-950">
-What's for <span class="text-pink-500">dinner</span>?
-&nbsp;
-<span class="text-pink-500">&gt; Sushi</span>
-&nbsp;&nbsp;Pizza
-&nbsp;&nbsp;Burgers</span>
-&nbsp;
-<span class="text-slate-600">(Move up and down to reveal more choices)</span></pre>
-    </div>
-
-    <div class="mt-6 overflow-hidden hidden" data-terminal-frame>
-        <pre class="font-mono bg-slate-50 dark:bg-slate-950">
-What's for <span class="text-pink-500">dinner</span>?
-&nbsp;
-&nbsp;&nbsp;Sushi
-<span class="text-pink-500">&gt; Pizza</span>
-&nbsp;&nbsp;Burgers
-&nbsp;
-<span class="text-slate-600">(Move up and down to reveal more choices)</span></pre>
-    </div>
+let frames = JSON.stringify([
+    frame1,
+    frame2,
+    frame3,
+    frame4
+]);
 
-    <div class="mt-6 overflow-hidden hidden" data-terminal-frame>
-        <pre class="font-mono bg-slate-50 dark:bg-slate-950">
-What's for <span class="text-pink-500">dinner</span>?
-&nbsp;
-&nbsp;&nbsp;Pizza
-<span class="text-pink-500">&gt; Burgers</span>
-&nbsp;&nbsp;Tacos
-&nbsp;
-<span class="text-slate-600">(Move up and down to reveal more choices)</span></pre>
-    </div>
+const { speed } = Astro.props;
+---
 
-    <div class="mt-6 overflow-hidden hidden" data-terminal-frame>
-        <pre class="font-mono bg-slate-50 dark:bg-slate-950">
-What's for <span class="text-pink-500">dinner</span>?
-&nbsp;
+<animated-terminal class="animated-terminal mt-0" data-speed={speed} data-frames={frames}>
+    <div class="mt-6">
+        <div id="terminal-wrapper" class="mt-0 overflow-hidden">
+            <div class="spectre-panel">
+<pre>
+😛 What's for dinner?
+</pre>
+</div>
+<pre class="spectre-selection">
+<span class="terminal-preview-accent">&gt; Sushi</span>
 &nbsp;&nbsp;Pizza
 &nbsp;&nbsp;Burgers</span>
-<span class="text-pink-500">&gt; Tacos</span>
 &nbsp;
 <span class="text-slate-600">(Move up and down to reveal more choices)</span></pre>
+        </div>
     </div>
-
 </animated-terminal>
 
 <script>
     class AnimatedTerminal extends HTMLElement {
         constructor() {
             super();
 
+            // Get a reference to the terminal-wrapper id
+            const terminalWrapper = this.querySelector('#terminal-wrapper');
+
             // Get all frames in the terminal
-            const frames = document.querySelectorAll('[data-terminal-frame]');
+            const frames = JSON.parse(this.getAttribute('data-frames') || '[]');
 
             // Get speed converted to a number
             const speed = parseInt(this.getAttribute('data-speed') || '1000');
 
             // Remember the current frame
-            let currentFrame = 0;
-            let totalFrames = 0;
-
-            // Every {speed} milliseconds show the next frame
-            setInterval(() => {
-                frames.forEach((frame, index) => {
-                    if (index === currentFrame) {
-                        console.log(`Showing frame ${index}`);
-                        frame.classList.remove('hidden');
-                    } else {
-                        console.log(`Hiding frame ${index}`);
-                        frame.classList.contains('hidden') || frame.classList.add('hidden');
-                    }
-                });
-
-                console.log(`Current frame: ${currentFrame}`);
-                currentFrame = (currentFrame + 1) % frames.length;
-                totalFrames++;
-            }, speed);
+            let currentFrame = 1;
+
+            if (terminalWrapper !== null) {
+                // Every {speed} milliseconds show the next frame
+                setInterval(() => {
 
+                    terminalWrapper.innerHTML = frames[currentFrame];
+                    currentFrame = (currentFrame + 1) % frames.length;
+                }, speed);
+            }
         }
     }
 

PwshSpectreConsole.Docs/src/components/frames/terminal-preview-1.html

@@ -0,0 +1,11 @@
+<div class="spectre-panel">
+<pre>
+😛 What's for dinner?
+</pre>
+</div>
+<pre class="spectre-selection">
+<span class="terminal-preview-accent">&gt; Sushi</span>
+&nbsp;&nbsp;Pizza
+&nbsp;&nbsp;Burgers
+&nbsp;
+<span class="text-slate-600">(Move up and down to reveal more choices)</span></pre>

PwshSpectreConsole.Docs/src/components/frames/terminal-preview-2.html

@@ -0,0 +1,11 @@
+<div class="spectre-panel">
+<pre>
+😛 What's for dinner?
+</pre>
+</div>
+<pre class="spectre-selection">
+&nbsp;&nbsp;Sushi
+<span class="terminal-preview-accent">&gt; Pizza</span>
+&nbsp;&nbsp;Burgers
+&nbsp;
+<span class="text-slate-600">(Move up and down to reveal more choices)</span></pre>

PwshSpectreConsole.Docs/src/components/frames/terminal-preview-3.html

@@ -0,0 +1,11 @@
+<div class="spectre-panel">
+<pre>
+😛 What's for dinner?
+</pre>
+</div>
+<pre class="spectre-selection">
+&nbsp;&nbsp;Pizza
+<span class="terminal-preview-accent">&gt; Burgers</span>
+&nbsp;&nbsp;Tacos
+&nbsp;
+<span class="text-slate-600">(Move up and down to reveal more choices)</span></pre>

PwshSpectreConsole.Docs/src/components/frames/terminal-preview-4.html

@@ -0,0 +1,11 @@
+<div class="spectre-panel">
+<pre>
+😛 What's for dinner?
+</pre>
+</div>
+<pre class="spectre-selection">
+&nbsp;&nbsp;Pizza
+&nbsp;&nbsp;Burgers
+<span class="terminal-preview-accent">&gt; Tacos</span>
+&nbsp;
+<span class="text-slate-600">(Move up and down to reveal more choices)</span></pre>

PwshSpectreConsole.Docs/src/content/docs/guides/faqs.md

@@ -7,7 +7,10 @@ description: What is this?
 Spectre Console is a .NET library to help people create really, really, ridiculously good-looking console applications in C# and other languages. See [https://spectreconsole.net/](https://spectreconsole.net/) for the original project.
 
 2. **Why build PwshSpectreConsole?**  
-The original library uses a lot of C# features that are not easily accessible in PowerShell so PwshSpectreConsole wraps the library to make it easier to use for the basic use-cases. I also like to write a lot of PowerShell and find some of the PowerShell core library options a bit boring for my scripts.
+The C# library uses a lot of language features that are not easily accessible in PowerShell so PwshSpectreConsole wraps the library to make it easier to use for the basic use-cases.
 
 3. **Why is this not written in C#?**  
 I wanted to see if I could do it in PowerShell and I think it's a fun project. I also wanted to see if I could make it easier to use for PowerShell users to contribute if they're not familiar with C#.  
+
+4. **How can I help?**  
+Check out the contributing guide at [https://github.com/ShaunLawrie/PwshSpectreConsole/blob/prerelease/CONTRIBUTING.md](https://github.com/ShaunLawrie/PwshSpectreConsole/blob/prerelease/CONTRIBUTING.md)

PwshSpectreConsole.Docs/src/content/docs/index.mdx

@@ -3,7 +3,7 @@ title: PwshSpectreConsole
 description: A PowerShell module that provides a Spectre.Console wrapper for PowerShell.
 template: splash
 hero:
-  tagline: A module of convenience functions to make it easy to use <a class="text-slate-700 dark:text-slate-100" href="https://spectreconsole.net/">Spectre.Console</a> in PowerShell.
+  tagline: A module to help you build pretty scripts with <a class="text-slate-700 dark:text-slate-100" href="https://spectreconsole.net/">Spectre.Console</a> in PowerShell.
   image:
     file: ../../assets/logo.png
   actions:
@@ -17,9 +17,10 @@ hero:
 ---
 
 import TerminalPreview from '../../components/TerminalPreview.astro'
+import './src/styles/homepage.css'
 
 ```powershell
-PS> Set-SpectreColors -AccentColor HotPink
-PS> Read-SpectreSelection -Title "What's for [hot_pink]dinner[/]?" -Choices @("Sushi", "Pizza", "Burgers", "Tacos")
+":face_with_tongue: What's for dinner?" | Format-SpectrePanel -Expand
+Read-SpectreSelection -Choices @("Sushi", "Pizza", "Burgers", "Tacos")
 ```
-<TerminalPreview />
+<TerminalPreview speed={1000} />

PwshSpectreConsole.Docs/src/powershell/UpdateDocs.ps1

@@ -191,6 +191,7 @@ foreach ($doc in $docs) {
                 Set-Location "$PSScriptRoot/../../../PwshSpectreConsole"
                 Push-Location -StackName "ExampleInvoke"
                 Invoke-Expression $code
+                Set-SpectreColors -AccentColor "Turquoise2"
                 Pop-Location -StackName "ExampleInvoke"
                 $recording = Stop-SpectreRecording -Title "Example $([int]$example++)"
 

PwshSpectreConsole.Docs/src/styles/homepage.css

@@ -0,0 +1,39 @@
+:root {
+    --sl-sidebar-width: 28rem;
+    --sl-content-width: 80rem;
+    --sl-color-bg-sidebar: #020617;
+    --sl-color-bg: #11001f;
+    --sl-color-bg-nav: #01030e;
+    --astro-code-color-background: transparent;
+    --sl-color-gray-5: transparent;
+}
+
+.terminal-preview {
+    @apply font-mono bg-slate-50 dark:bg-slate-950 rounded-lg;
+    border-color: rgba(189, 83, 238, 1.0)!important;
+    border-width: 2px!important;
+}
+
+.terminal-preview-accent {
+    @apply text-purple-500;
+}
+
+.action.primary {
+    @apply bg-purple-800 text-white rounded-xl;
+}
+
+.spectre-panel {
+    @apply rounded-xl border-2 border-purple-500;
+}
+
+.spectre-panel > pre {
+    @apply border-none;
+}
+
+.spectre-selection {
+    border: none!important;
+}
+
+.hero {
+  @apply pb-6;
+}

PwshSpectreConsole.Docs/src/tailwind.css

@@ -14,6 +14,23 @@
 :root {
   --sl-sidebar-width: 28rem;
   --sl-content-width: 80rem;
+  --sl-color-bg-sidebar: transparent;
+  --sl-color-bg: #020617;
+  --sl-color-bg-nav: #01030e;
+  --astro-code-color-background: #0f0829;
+  --background-radial: radial-gradient(circle, rgb(16, 0, 31) 0%, rgba(1, 3, 14, 1) 100%);
+}
+
+:root[data-theme="light"] {
+  --sl-color-bg-sidebar: transparent;
+  --sl-color-bg: #f9f9f9;
+  --sl-color-bg-nav: rgb(244, 232, 255);
+  --astro-code-color-background: #f9f9f9;
+  --background-radial: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 243, 255) 100%);
+}
+
+body {
+  background: var(--background-radial);
 }
 
 @media (min-width: 50rem) {

PwshSpectreConsole/private/completions/Transformers.psm1

@@ -102,7 +102,7 @@ class RenderableTransformationAttribute : ArgumentTransformationAttribute {
         }
 
         # For others just dump them as either strings formatted with markup which are easy to identify by the closing tag [/] or as plain text
-        if ($InputData -like "*[/]*") {
+        if ($InputData -like "*[/]*" -or $InputData -like "*:*:*") {
             return [Spectre.Console.Markup]::new($InputData)
         } else {
             return [Spectre.Console.Text]::new(($InputData | Out-String -NoNewline))