Website/BlazorApp/Components/Pages/Sdk.razor

@page "/sdk"

<PageTitle>SilverSHELL SDK - SilverLabs</PageTitle>

<div class="main-content visible">
    <header class="header">
        <img src="../logo.png" alt="SilverLabs Logo" class="logo">
    </header>

    <div class="sdk-container">
        <div class="sdk-header">
            <h1>SilverSHELL SDK</h1>
            <p style="font-size: 1.2rem; color: rgba(255, 255, 255, 0.7);">Build modular Blazor WebAssembly applications with ease</p>
        </div>

        <!-- Quick Start Section -->
        <div class="sdk-section">
            <h2>🚀 Quick Start</h2>
            <p>Get started with SilverSHELL in just a few minutes. Follow these simple steps:</p>

            <ol class="steps-list">
                <li>
                    <strong>Install the templates</strong> from NuGet
                    <div class="code-block"><code>dotnet new install SilverLabs.SilverSHELL.Templates</code></div>
                </li>
                <li>
                    <strong>Create your first project</strong>
                    <div class="code-block"><code>dotnet new silvershell-starter -n MyApp --pwa true --module-repository true
cd MyApp
dotnet run</code></div>
                </li>
                <li>
                    <strong>Access your application</strong> at <code>https://localhost:5001</code>
                </li>
            </ol>
        </div>

        <!-- Downloads Section -->
        <div class="sdk-section">
            <h2>📦 Templates Package</h2>
            <p>Install the SilverSHELL templates package from NuGet:</p>

            <div class="download-grid">
                <div class="download-card">
                    <h3>SilverSHELL Templates</h3>
                    <p>Complete package with both Starter and Module templates</p>
                    <p><strong>Package ID:</strong> SilverLabs.SilverSHELL.Templates</p>
                    <p><strong>Includes:</strong> Blazor WebAssembly starter template, module template with CI/CD, PWA support, module repository integration</p>
                    <div class="code-block"><code>dotnet new install SilverLabs.SilverSHELL.Templates</code></div>
                    <a href="https://nuget.silverlabs.uk/packages/silverlabs.silvershell.templates/" class="download-btn" target="_blank">
                        View on NuGet
                    </a>
                </div>
            </div>
        </div>

        <!-- Creating Applications Section -->
        <div class="sdk-section">
            <h2>🏗️ Creating Applications</h2>

            <h3>Using the Starter Template</h3>
            <div class="code-block"><code># Create a new application
dotnet new silvershell-starter -n MyAwesomeApp

# With PWA support
dotnet new silvershell-starter -n MyAwesomeApp --pwa true

# With Module Repository integration
dotnet new silvershell-starter -n MyAwesomeApp --module-repository true</code></div>

            <h3>Adding Modules</h3>
            <p>SilverSHELL supports multiple ways to add modules to your application:</p>

            <h3>Option 1: Configuration File</h3>
            <p>Edit <code>wwwroot/appsettings.json</code>:</p>
            <div class="code-block"><code>{
  "AMS": {
    "Deployment": {
      "PreloadModules": [
        "SilverLabs.SilverSHELL.Auth.Login",
        "SilverSHELL.Modules.ModuleBrowser"
      ]
    }
  }
}</code></div>

            <h3>Option 2: Module Browser UI</h3>
            <ol>
                <li>Navigate to <code>/modules/browse</code> in your application</li>
                <li>Search for modules from <strong>library.silverlabs.uk</strong></li>
                <li>Click "Install" on any module</li>
                <li>Modules are downloaded and installed automatically</li>
            </ol>

            <h3>Option 3: Manual Installation</h3>
            <div class="code-block"><code># Copy module DLLs to the modules directory
cp SomeModule.dll wwwroot/modules/
dotnet run
# Module is automatically discovered and loaded!</code></div>
        </div>

        <!-- Creating Modules Section -->
        <div class="sdk-section">
            <h2>🔧 Creating Modules</h2>

            <h3>Using the Module Template</h3>
            <div class="code-block"><code># Create a basic module
dotnet new silvershell-module -n MyModule

# Create a module with widgets
dotnet new silvershell-module -n MyModule --includeWidgets true

# Create a module with search provider
dotnet new silvershell-module -n MyModule --includeSearchProvider true

# Create a module with everything
dotnet new silvershell-module -n MyModule \
  --includeWidgets true \
  --includeSearchProvider true \
  --includeTests true</code></div>

            <h3>Module Structure</h3>
            <p>The template creates an organized structure:</p>
            <div class="code-block"><code>MyModule/
├── Configuration/
│   ├── ModuleMetadata.cs        # Module identity and version
│   ├── EndpointConfiguration.cs # Navigation routes
│   └── WidgetConfiguration.cs   # Dashboard widgets
├── Pages/
│   └── Index.razor              # Razor pages
├── Components/
│   └── ...                      # Razor components
├── .gitlab-ci.yml               # GitLab CI/CD
├── .github/workflows/
│   └── publish.yml              # GitHub Actions
└── MyModuleMain.cs              # Module entry point</code></div>
        </div>

        <!-- Publishing Modules Section -->
        <div class="sdk-section">
            <h2>🚀 Publishing Modules</h2>

            <div class="info-box">
                <strong>CI/CD Included!</strong> The module template includes ready-to-use CI/CD pipelines for both GitLab and GitHub.
            </div>

            <h3>Automated Publishing (Recommended)</h3>
            <p>The templates include CI/CD pipelines for automatic publishing:</p>

            <ol class="steps-list">
                <li>
                    <strong>Configure CI/CD variables</strong>
                    <div class="code-block"><code># In GitLab: Settings > CI/CD > Variables
# In GitHub: Settings > Secrets > Actions

# Add variable:
MODULE_REPO_TOKEN: [your token from library.silverlabs.uk]</code></div>
                </li>
                <li>
                    <strong>Commit and push your code</strong>
                    <div class="code-block"><code>git add .
git commit -m "feat: Initial module implementation"
git push</code></div>
                </li>
                <li>
                    <strong>Create a release tag</strong>
                    <div class="code-block"><code>git tag v1.0.0
git push --tags</code></div>
                </li>
                <li>
                    <strong>Trigger publish</strong> from your CI/CD pipeline UI
                </li>
            </ol>

            <h3>Manual Publishing</h3>
            <div class="code-block"><code># Build and package
dotnet pack --configuration Release -o dist/

# Upload to repository
curl -X POST "https://library.silverlabs.uk/api/modules/publish" \
  -F "id=MyModule" \
  -F "name=My Awesome Module" \
  -F "version=1.0.0" \
  -F "description=A great module" \
  -F "author=Your Name" \
  -F "package=@@dist/MyModule.1.0.0.nupkg"</code></div>
        </div>

        <!-- Available Modules Section -->
        <div class="sdk-section">
            <h2>📚 Available Modules</h2>
            <p>Browse and install modules from the SilverSHELL module repository:</p>

            <div class="info-box">
                <strong>Module Repository:</strong> <a href="https://library.silverlabs.uk" target="_blank" style="color: #a78bfa;">library.silverlabs.uk</a>
            </div>

            <h3>Featured Modules:</h3>
            <ul>
                <li><strong>Auth.Login</strong> - User authentication and login UI</li>
                <li><strong>Auth.Registration</strong> - User registration system</li>
                <li><strong>Auth.UserManagement</strong> - User administration</li>
                <li><strong>Auth.MyAccount</strong> - User profile management</li>
                <li><strong>ModuleBrowser</strong> - Browse and install modules from the UI</li>
            </ul>

            <h3>Explore All Modules</h3>
            <div class="code-block"><code># List all available modules via API
curl https://library.silverlabs.uk/api/modules

# Search for specific modules
curl https://library.silverlabs.uk/api/modules/search?q=auth</code></div>
        </div>

        <!-- Resources Section -->
        <div class="sdk-section">
            <h2>📖 Resources</h2>
            <ul>
                <li><strong>Module Repository API:</strong> <a href="https://library.silverlabs.uk/api/modules" target="_blank" style="color: #a78bfa;">https://library.silverlabs.uk/api/modules</a></li>
                <li><strong>Demo Application:</strong> <a href="https://demo.silverlabs.uk" target="_blank" style="color: #a78bfa;">https://demo.silverlabs.uk</a></li>
                <li><strong>GitLab Repository:</strong> <a href="https://gitlab.silverlabs.uk/silverlabs/silvershell" target="_blank" style="color: #a78bfa;">GitLab</a></li>
            </ul>
        </div>

        <!-- Support Section -->
        <div class="sdk-section">
            <h2>💬 Support</h2>
            <p>Need help? We're here for you:</p>
            <ul>
                <li><strong>Help Desk:</strong> <a href="https://silverdesk.silverlabs.uk" target="_blank" style="color: #a78bfa;">silverdesk.silverlabs.uk</a></li>
                <li><strong>Issues:</strong> <a href="https://gitlab.silverlabs.uk/silverlabs/silvershell/-/issues" target="_blank" style="color: #a78bfa;">GitLab Issues</a></li>
            </ul>
        </div>

        <a href="/" class="back-link">← Back to SilverLabs Home</a>
    </div>
</div>