Recreated project with project template

MoonlightServers.Frontend/Implementations/SidebarImplementation.cs

@@ -0,0 +1,22 @@
+using Moonlight.Client.Interfaces;
+using Moonlight.Client.Models;
+
+namespace MoonlightServers.Frontend.Implementations;
+
+public class SidebarImplementation : ISidebarItemProvider
+{
+    public SidebarItem[] Get()
+    {
+        return
+        [
+            new SidebarItem()
+            {
+                Name = "Example",
+                Path = "/example",
+                Icon = "icon-moon",
+                Group = "MoonlightServers",
+                Priority = 1
+            }
+        ];
+    }
+}

MoonlightServers.Frontend/MoonlightServers.Frontend.csproj

@@ -0,0 +1,35 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+    <PropertyGroup>
+        <TargetFramework>net8.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <ImplicitUsings>enable</ImplicitUsings>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.11"/>
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.11" PrivateAssets="all"/>
+        <PackageReference Include="Moonlight.Client" Version="2.1.0"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <_ContentIncludedByDefault Remove="wwwroot\css\app.css"/>
+        <_ContentIncludedByDefault Remove="Pages\Home.razor"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <Folder Include="Helpers\"/>
+        <Folder Include="Interfaces\"/>
+        <Folder Include="UI\Components\"/>
+        <Folder Include="wwwroot\"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <None Remove="Properties\launchSettings.json"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <ProjectReference Include="..\MoonlightServers.Shared\MoonlightServers.Shared.csproj"/>
+    </ItemGroup>
+
+</Project>

MoonlightServers.Frontend/Program.cs

@@ -0,0 +1,7 @@
+using Moonlight.Client;
+
+var startup = new Startup();
+
+await startup.Run(args, [
+    typeof(Program).Assembly
+]);

MoonlightServers.Frontend/Styles/additions/animations.css

@@ -0,0 +1,9 @@
+@keyframes shimmer {
+    0% {
+        background-position: 0 0
+    }
+
+    to {
+        background-position: -200% 0
+    }
+}

MoonlightServers.Frontend/Styles/additions/buttons.css

@@ -0,0 +1,80 @@
+/* Buttons */
+
+.btn,
+.btn-lg,
+.btn-sm,
+.btn-xs {
+    @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-sm transition;
+}
+
+.btn {
+    @apply px-3 py-2;
+}
+
+.btn-lg {
+    @apply px-4 py-3;
+}
+
+.btn-sm {
+    @apply px-2 py-1;
+}
+
+.btn-xs {
+    @apply px-2 py-0.5;
+}
+
+/* Colors */
+
+.btn-primary {
+    @apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600;
+}
+
+.btn-secondary {
+    @apply bg-secondary-800 hover:bg-secondary-700 focus-visible:outline-secondary-800;
+}
+
+.btn-tertiary {
+    @apply bg-tertiary-600 hover:bg-tertiary-500 focus-visible:outline-tertiary-600;
+}
+
+.btn-danger {
+    @apply bg-danger-600 hover:bg-danger-500 focus-visible:outline-danger-600;
+}
+
+.btn-warning {
+    @apply bg-warning-500 hover:bg-warning-400 focus-visible:outline-warning-500;
+}
+
+.btn-info {
+    @apply bg-info-600 hover:bg-info-500 focus-visible:outline-info-600;
+}
+
+.btn-success {
+    @apply bg-success-600 hover:bg-success-500 focus-visible:outline-success-600;
+}
+
+/* Outline */
+
+.btn-outline-primary {
+    @apply bg-gray-800 hover:border-gray-600 text-primary-500;
+}
+
+.btn-outline-tertiary {
+    @apply bg-gray-800 hover:border-gray-600 text-tertiary-500;
+}
+
+.btn-outline-danger {
+    @apply bg-gray-800 hover:border-gray-600 text-danger-500;
+}
+
+.btn-outline-warning {
+    @apply bg-gray-800 hover:border-gray-600 text-warning-400;
+}
+
+.btn-outline-info {
+    @apply bg-gray-800 hover:border-gray-600 text-info-500;
+}
+
+.btn-outline-success {
+    @apply bg-gray-800 hover:border-gray-600 text-success-500;
+}

MoonlightServers.Frontend/Styles/additions/cards.css

@@ -0,0 +1,19 @@
+.card {
+    @apply flex flex-col bg-gray-800 shadow-sm rounded-xl;
+}
+
+.card-header {
+    @apply px-5 py-4 border-b border-gray-700/60 flex items-center;
+}
+
+.card-title {
+    @apply font-semibold text-gray-100;
+}
+
+.card-body {
+    @apply px-5 py-5;
+}
+
+.card-footer {
+    @apply pt-3 pb-3 border-t border-gray-700/60 mt-auto;
+}

MoonlightServers.Frontend/Styles/additions/fonts.css

@@ -0,0 +1,3 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
+@import url("https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/font/lucide.css");

MoonlightServers.Frontend/Styles/additions/forms.css

@@ -0,0 +1,77 @@
+/* Forms */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox,
+.form-radio {
+    @apply bg-gray-700/60 border-2 focus:ring-0 focus:ring-offset-0 disabled:bg-gray-700/30 disabled:border-gray-700 disabled:hover:border-gray-700;
+}
+
+.form-checkbox {
+    @apply rounded;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select {
+    @apply text-sm text-gray-100 leading-5 py-2 px-3 border-gray-700 focus:border-primary-500 shadow-sm rounded-lg;
+}
+
+.form-input,
+.form-textarea {
+    @apply placeholder-gray-700;
+}
+
+.form-select {
+    @apply pr-10;
+}
+
+.form-checkbox,
+.form-radio {
+    @apply text-primary-500 checked:bg-primary-500 checked:border-transparent border border-gray-700/60 focus:border-primary-500/50;
+}
+
+/* Switch element */
+.form-switch {
+    @apply relative select-none;
+    width: 44px;
+}
+
+.form-switch label {
+    @apply block overflow-hidden cursor-pointer h-6 rounded-full;
+}
+
+.form-switch label > span:first-child {
+    @apply absolute block rounded-full;
+    width: 20px;
+    height: 20px;
+    top: 2px;
+    left: 2px;
+    right: 50%;
+    transition: all .15s ease-out;
+}
+
+.form-switch input[type="checkbox"]:checked + label {
+    @apply bg-primary-600;
+}
+
+.form-switch input[type="checkbox"]:checked + label > span:first-child {
+    left: 22px;
+}
+
+.form-switch input[type="checkbox"]:disabled + label {
+    @apply cursor-not-allowed bg-gray-700/20 border border-gray-700/60;
+}
+
+.form-switch input[type="checkbox"]:disabled + label > span:first-child {
+    @apply bg-gray-600;
+}

MoonlightServers.Frontend/Styles/additions/loaders.css

@@ -0,0 +1,19 @@
+.loader {
+    width: 42px;
+    height: 42px;
+    border: 3px solid #FFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: loader-rotation 1s linear infinite;
+}
+
+@keyframes loader-rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+} 

MoonlightServers.Frontend/Styles/additions/progress.css

@@ -0,0 +1,25 @@
+.progress {
+    @apply bg-gray-800 rounded-full overflow-hidden;
+}
+
+.progress-bar {
+    @apply bg-primary-500 rounded-full h-3;
+    transition: width 0.6s ease;
+}
+
+.progress-bar.progress-intermediate {
+    animation: progress-animation 1s infinite linear;
+    transform-origin: 0 50%
+}
+
+@keyframes progress-animation {
+    0% {
+        transform: translateX(0) scaleX(0);
+    }
+    40% {
+        transform: translateX(0) scaleX(0.4);
+    }
+    100% {
+        transform: translateX(100%) scaleX(0.5);
+    }
+}

MoonlightServers.Frontend/Styles/additions/scrollbar.css

@@ -0,0 +1,9 @@
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #64748b transparent;
+}
+
+.no-scrollbar {
+    scrollbar-width: none;
+    scrollbar-color: transparent transparent;
+}

MoonlightServers.Frontend/Styles/build.bat

@@ -0,0 +1 @@
+npx tailwindcss -i style.css -o ../wwwroot/css/MoonlightServers.min.css --watch

MoonlightServers.Frontend/Styles/build.sh

@@ -0,0 +1,2 @@
+#! /bin/bash
+npx tailwindcss -i style.css -o ../wwwroot/css/MoonlightServers.min.css --watch

MoonlightServers.Frontend/Styles/package.json

@@ -0,0 +1,8 @@
+{
+  "devDependencies": {
+    "tailwindcss": "^3.4.11"
+  },
+  "dependencies": {
+    "@tailwindcss/forms": "^0.5.9"
+  }
+}

MoonlightServers.Frontend/Styles/style.css

@@ -0,0 +1,79 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+
+@import "additions/animations.css";
+@import "additions/fonts.css";
+@import "additions/buttons.css";
+@import "additions/cards.css";
+@import "additions/forms.css";
+@import "additions/progress.css";
+@import "additions/scrollbar.css";
+@import "additions/loaders.css";
+
+@import "tailwindcss/utilities";
+
+#blazor-error-ui {
+    display: none;
+}
+
+#loader {
+    display: block;
+    width: 10rem;
+    height: 10rem;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #9370DB;
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+    @apply border-t-primary-500
+}
+#loader:before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    -webkit-animation: spin 3s linear infinite;
+    animation: spin 3s linear infinite;
+    @apply border-t-tertiary-500
+}
+#loader:after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    -webkit-animation: spin 1.5s linear infinite;
+    animation: spin 1.5s linear infinite;
+    @apply border-t-info-500
+}
+@-webkit-keyframes spin {
+    0%   {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+@keyframes spin {
+    0%   {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}

MoonlightServers.Frontend/Styles/tailwind.config.js

@@ -0,0 +1,128 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    corePlugins: {
+        preflight: false,
+    },
+    content: [
+        '../**/*.razor',
+        'mappings/*.map'
+    ],
+    theme: {
+        extend: {
+            fontFamily: {
+                inter: ['Inter', 'sans-serif'],
+                scp: ['Source Code Pro', 'mono'],
+            },
+            colors: {
+                primary: {
+                    50: '#eef2ff',
+                    100: '#e0e7ff',
+                    200: '#c7d2fe',
+                    300: '#a5b4fc',
+                    400: '#818cf8',
+                    500: '#6366f1',
+                    600: '#4f46e5',
+                    700: '#4338ca',
+                    800: '#3730a3',
+                    900: '#312e81',
+                    950: '#1e1b4b'
+                },
+                secondary: {
+                    100: '#F9F9F9',
+                    200: '#F1F1F2',
+                    300: '#DBDFE9',
+                    400: '#B5B5C3',
+                    500: '#99A1B7',
+                    600: '#707993',
+                    700: '#444e6b',
+                    750: '#293249',
+                    800: '#1c2438',
+                    900: '#111721',
+                    950: '#0e121c',
+                },
+                tertiary: {
+                    50: '#f5f3ff',
+                    100: '#ede9fe',
+                    200: '#ddd6fe',
+                    300: '#c4b5fd',
+                    400: '#a78bfa',
+                    500: '#8b5cf6',
+                    600: '#7c3aed',
+                    700: '#6d28d9',
+                    800: '#5b21b6',
+                    900: '#4c1d95',
+                    950: '#2e1065'
+                },
+                warning: {
+                    50: '#fefce8',
+                    100: '#fef9c3',
+                    200: '#fef08a',
+                    300: '#fde047',
+                    400: '#facc15',
+                    500: '#eab308',
+                    600: '#ca8a04',
+                    700: '#a16207',
+                    800: '#854d0e',
+                    900: '#713f12',
+                    950: '#422006'
+                },
+                danger: {
+                    50: '#fef2f2',
+                    100: '#fee2e2',
+                    200: '#fecaca',
+                    300: '#fca5a5',
+                    400: '#f87171',
+                    500: '#ef4444',
+                    600: '#dc2626',
+                    700: '#b91c1c',
+                    800: '#991b1b',
+                    900: '#7f1d1d',
+                    950: '#450a0a'
+                },
+                success: {
+                    50: '#f0fdf4',
+                    100: '#dcfce7',
+                    200: '#bbf7d0',
+                    300: '#86efac',
+                    400: '#4ade80',
+                    500: '#22c55e',
+                    600: '#16a34a',
+                    700: '#15803d',
+                    800: '#166534',
+                    900: '#14532d',
+                    950: '#052e16'
+                },
+                info: {
+                    50: '#eff6ff',
+                    100: '#dbeafe',
+                    200: '#bfdbfe',
+                    300: '#93c5fd',
+                    400: '#60a5fa',
+                    500: '#3b82f6',
+                    600: '#2563eb',
+                    700: '#1d4ed8',
+                    800: '#1e40af',
+                    900: '#1e3a8a',
+                    950: '#172554'
+                },
+                gray: {
+                    100: '#F9F9F9',
+                    200: '#F1F1F2',
+                    300: '#DBDFE9',
+                    400: '#B5B5C3',
+                    500: '#99A1B7',
+                    600: '#707993',
+                    700: '#444e6b',
+                    750: '#293249',
+                    800: '#1c2438',
+                    900: '#111721',
+                    950: '#0e121c',
+                }
+            },
+            animation: {
+                'shimmer': 'shimmer 2s linear infinite',
+            }
+        },
+    }
+}
+

MoonlightServers.Frontend/UI/Views/Example.razor

@@ -0,0 +1,25 @@
+@page "/example"
+
+@using MoonCore.Helpers
+@using MoonCore.Blazor.Tailwind.Components
+@using MoonlightServers.Shared.Http.Responses
+
+@inject HttpApiClient ApiClient
+
+<h3 class="text-primary-500 mb-8">Welcome to this example page</h3>
+
+<LazyLoader Load="Load">
+    <h1 class="text-center text-zinc-500">
+        @Response.Number
+    </h1>
+</LazyLoader>
+
+@code
+{
+    private ExampleResponse Response;
+
+    private async Task Load(LazyLoader _)
+    {
+        Response = await ApiClient.GetJson<ExampleResponse>("api/example");
+    }
+}