Add more installation options

Author: bash

index.html

@@ -79,20 +79,34 @@ <h2>Getting started</h2>
                 <div class="nuget-box">
                     <ul role="tablist" class="tabs">
                         <li role="presentation">
-                            <button id="tab-dotnet-cli" aria-expanded="false" aria-selected="true" aria-controls="panel-dotnet-cli" role="tab" class="tab">.NET CLI</button> 
+                            <button id="tab-package-manager" aria-expanded="false" aria-selected="true" aria-controls="panel-package-manager" role="tab" class="tab">Package Manager</button> 
+                        </li>
+                        <li role="presentation">
+                            <button id="tab-dotnet-cli" aria-expanded="false" aria-selected="true" aria-controls="panel-dotnet-cli" role="tab" class="tab" data-default-tab>.NET CLI</button> 
                         </li>
                         <li role="presentation">
                             <button id="tab-package-refererence" aria-expanded="false" aria-selected="false" aria-controls="panel-package-refererence" role="tab" class="tab">PackageReference</button> 
                         </li>
+                        <li role="presentation">
+                            <button id="tab-script-interactive" aria-expanded="false" aria-selected="false" aria-controls="panel-script-interactive" role="tab" class="tab">Script &amp; Interactive</button> 
+                        </li>
                     </ul>
 
+                    <div id="panel-package-manager" role="tabpanel" aria-labelledby="tab-package-manager" class="panel">
+                        <code>Install-Package Funcky -Version {{PackageVersion}}</code>
+                    </div>
+
                     <div id="panel-dotnet-cli" role="tabpanel" aria-labelledby="tab-dotnet-cli" class="panel">
                         <code>dotnet add package Funcky --version {{PackageVersion}}</code>
                     </div>
 
                     <div id="panel-package-refererence" role="tabpanel" aria-labelledby="tab-package-refererence" class="panel">
                         <code>&lt;PackageReference Include="Funcky" Version="{{PackageVersion}}" /&gt;</code>
                     </div>
+                    
+                    <div id="panel-script-interactive" role="tabpanel" aria-labelledby="tab-script-interactive" class="panel">
+                        <code>#r "nuget: Funcky, {{PackageVersion}}"</code>
+                    </div>
                 </div>
             </div>
         </section>

style.css

@@ -117,11 +117,17 @@ footer {
     display: grid;
     grid-auto-flow: column;
     justify-content: start;
-    grid-gap: 8px;
+    align-items: stretch;
+    gap: 0 8px;
+}
+
+.nuget-box .tabs li {
+    display: contents;
 }
 
 .nuget-box .tab {
     cursor: pointer;
+    font-size: 14px;
     padding: 6px var(--nuget-box-horizontal-padding);
     border-radius: 6px 6px 0 0;
     background-color: var(--primary-color);
@@ -184,4 +190,13 @@ p:not(:last-child),
     .feature-list {
         grid-template-columns: 1fr;
     }
+
+    .nuget-box .tabs {
+        grid-auto-flow: row;
+        justify-content: stretch;
+    }
+
+    .nuget-box .tabs li:not(:first-child) .tab {
+        border-radius: 0;
+    }
 }

tabs.js

@@ -7,6 +7,6 @@ function updateActiveTab(activeTab) {
     tabs.forEach(t => { t.setAttribute('aria-expanded', t === activeTab); t.setAttribute('aria-active', t === activeTab) })
 }
 
-updateActiveTab(tabs[0])
+updateActiveTab(tabs.filter(t => t.hasAttribute('data-default-tab'))[0])
 
 tabs.forEach(tab => tab.addEventListener('click', _ => updateActiveTab(tab)))