diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/.template.config/icon.png b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/.template.config/icon.png new file mode 100644 index 0000000000..8422b59695 Binary files /dev/null and b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/.template.config/icon.png differ diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/.template.config/ide.host.json b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/.template.config/ide.host.json new file mode 100644 index 0000000000..746b2f62e2 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/.template.config/ide.host.json @@ -0,0 +1,5 @@ +{ + "$schema": "http://json.schemastore.org/vs-2017.3.host", + "order": 600, + "icon": "icon.png" +} \ No newline at end of file diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/.template.config/template.json b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/.template.config/template.json new file mode 100644 index 0000000000..e6f4654fd8 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/.template.config/template.json @@ -0,0 +1,23 @@ +{ + "$schema": "http://json.schemastore.org/template", + "author": "Microsoft Fast", + "sourceName": "FluentUIBlazorServerApp", + "classifications": [ + "Linux", + "macOS", + "Windows", + "Blazor", + "Cloud", + "Web" + ], + "identity": "Microsoft.Fast.Templates.FluentUI.Server", + "name": "FluentUI Blazor Server App", + "shortName": "fluentuiblazorserver", + "defaultName": "BlazorApp", + "description": "A project template for creating a Blazor app that uses the Fluent UI component library, runs server-side inside an ASP.NET Core app and handles user interactions over a SignalR connection. This template can be used for web apps with rich dynamic user interfaces (UIs).", + "tags": { + "language": "C#", + "type": "project" + }, + "preferNameDirectory": true +} \ No newline at end of file diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/App.razor b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/App.razor new file mode 100644 index 0000000000..2f14c34c8d --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/App.razor @@ -0,0 +1,13 @@ + + + + + + + Not found + +

Sorry, there's nothing at this address.

+ + + + \ No newline at end of file diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Data/WeatherForecast.cs b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Data/WeatherForecast.cs new file mode 100644 index 0000000000..480ccd13b7 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Data/WeatherForecast.cs @@ -0,0 +1,12 @@ +namespace FluentUIBlazorServerApp.Data; + +public class WeatherForecast +{ + public DateTime Date { get; set; } + + public int TemperatureC { get; set; } + + public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); + + public string? Summary { get; set; } +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Data/WeatherForecastService.cs b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Data/WeatherForecastService.cs new file mode 100644 index 0000000000..0bc9081703 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Data/WeatherForecastService.cs @@ -0,0 +1,19 @@ +namespace FluentUIBlazorServerApp.Data; + +public class WeatherForecastService +{ + private static readonly string[] Summaries = new[] + { + "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" + }; + + public Task GetForecastAsync(DateTime startDate) + { + return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast + { + Date = startDate.AddDays(index), + TemperatureC = Random.Shared.Next(-20, 55), + Summary = Summaries[Random.Shared.Next(Summaries.Length)] + }).ToArray()); + } +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/FluentUIBlazorServerApp.csproj b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/FluentUIBlazorServerApp.csproj new file mode 100644 index 0000000000..33896cd333 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/FluentUIBlazorServerApp.csproj @@ -0,0 +1,14 @@ + + + + net6.0 + enable + enable + true + + + + + + + diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Counter.razor b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Counter.razor new file mode 100644 index 0000000000..2565d8f8cf --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Counter.razor @@ -0,0 +1,18 @@ +@page "/counter" + +Counter + +

Counter

+ +

Current count: @currentCount

+ +Click me + +@code { + private int currentCount = 0; + + private void IncrementCount() + { + currentCount++; + } +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Error.cshtml b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Error.cshtml new file mode 100644 index 0000000000..76437f6158 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Error.cshtml @@ -0,0 +1,42 @@ +@page +@model FluentUIBlazorServerApp.Pages.ErrorModel + + + + + + + + Error + + + + + +
+
+

Error.

+

An error occurred while processing your request.

+ + @if (Model.ShowRequestId) + { +

+ Request ID: @Model.RequestId +

+ } + +

Development Mode

+

+ Swapping to the Development environment displays detailed information about the error that occurred. +

+

+ The Development environment shouldn't be enabled for deployed applications. + It can result in displaying sensitive information from exceptions to end users. + For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development + and restarting the app. +

+
+
+ + + diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Error.cshtml.cs b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Error.cshtml.cs new file mode 100644 index 0000000000..a2d4233dc0 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Error.cshtml.cs @@ -0,0 +1,27 @@ +using System.Diagnostics; +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; + +namespace FluentUIBlazorServerApp.Pages +{ + [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] + [IgnoreAntiforgeryToken] + public class ErrorModel : PageModel + { + public string? RequestId { get; set; } + + public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); + + private readonly ILogger _logger; + + public ErrorModel(ILogger logger) + { + _logger = logger; + } + + public void OnGet() + { + RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier; + } + } +} \ No newline at end of file diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/FetchData.razor b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/FetchData.razor new file mode 100644 index 0000000000..af496c48ab --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/FetchData.razor @@ -0,0 +1,48 @@ +@page "/fetchdata" + +Weather forecast + +@using FluentUIBlazorServerApp.Data +@inject WeatherForecastService ForecastService + +

Weather forecast

+ +

This component demonstrates fetching data from a service.

+ +@if (forecasts == null) +{ +

Loading...

+} +else +{ + + + Date + Temp. (C) + Temp. (F) + Summary + + + @foreach (var forecast in forecasts) + { + + @forecast.Date.ToShortDateString() + @forecast.TemperatureC + @forecast.TemperatureF + @forecast.Summary + + + } + + + +} + +@code { + private WeatherForecast[]? forecasts; + + protected override async Task OnInitializedAsync() + { + forecasts = await ForecastService.GetForecastAsync(DateTime.Now); + } +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Index.razor b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Index.razor new file mode 100644 index 0000000000..101c4662b3 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Index.razor @@ -0,0 +1,15 @@ +@page "/" + +Index + +

Hello, world!

+ +

+ Welcome to your new app. +

+ + + + + + diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Index.razor.css b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Index.razor.css new file mode 100644 index 0000000000..cc375828d4 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/Index.razor.css @@ -0,0 +1,26 @@ +fluent-card { + --card-height: 400px; + --card-width: 500px; + padding: 20px; + margin: 12px; +} + +.class-override { + height: 163px; + width: 300px; +} + +.state-override { + --card-width: 350px; + --card-height: 300px; + --elevation: 6; +} + + .state-override:hover { + --elevation: 12; + } + +.contents { + display: flex; + flex-direction: column; +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/_Host.cshtml b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/_Host.cshtml new file mode 100644 index 0000000000..82a35c071a --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/_Host.cshtml @@ -0,0 +1,8 @@ +@page "/" +@namespace FluentUIBlazorServerApp.Pages +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers +@{ + Layout = "_Layout"; +} + + diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/_Layout.cshtml b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/_Layout.cshtml new file mode 100644 index 0000000000..32434aaf9e --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Pages/_Layout.cshtml @@ -0,0 +1,32 @@ +@using Microsoft.AspNetCore.Components.Web +@namespace FluentUIBlazorServerApp.Pages +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers + + + + + + + + + + + + + @RenderBody() + +
+ + An error has occurred. This application may no longer respond until reloaded. + + + An unhandled exception has occurred. See browser dev tools for details. + + Reload + 🗙 +
+ + + + + diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Program.cs b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Program.cs new file mode 100644 index 0000000000..d8302ebf27 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Program.cs @@ -0,0 +1,29 @@ +using FluentUIBlazorServerApp.Data; + +WebApplicationBuilder? builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorPages(); +builder.Services.AddServerSideBlazor(); +builder.Services.AddSingleton(); + +WebApplication? app = builder.Build(); + +// Configure the HTTP request pipeline. +if (!app.Environment.IsDevelopment()) +{ + app.UseExceptionHandler("/Error"); + // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. + app.UseHsts(); +} + +app.UseHttpsRedirection(); + +app.UseStaticFiles(); + +app.UseRouting(); + +app.MapBlazorHub(); +app.MapFallbackToPage("/_Host"); + +app.Run(); diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Properties/launchSettings.json b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Properties/launchSettings.json new file mode 100644 index 0000000000..6570f0c8e5 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Properties/launchSettings.json @@ -0,0 +1,28 @@ +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:14184", + "sslPort": 44320 + } + }, + "profiles": { + "FluentUIBlazorServerApp": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "applicationUrl": "https://localhost:7061;http://localhost:5061", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + } + } +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/MainLayout.razor b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/MainLayout.razor new file mode 100644 index 0000000000..c4c8d7174a --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/MainLayout.razor @@ -0,0 +1,31 @@ +@inherits LayoutComponentBase + +FluentUIBlazorServerApp + +
+
+ Home + About +
+
+
+ +
+ +
+
+
+ + + + @Body + + +

@ex.Message

+ + +
+
+
+
+
\ No newline at end of file diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/NavMenu.razor b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/NavMenu.razor new file mode 100644 index 0000000000..fbbce4580a --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/NavMenu.razor @@ -0,0 +1,38 @@ +@inject NavigationManager navigationmanager + + + +

FluentUI Web Components

+
    +
  • + Counter +
    • +
  • + Fetch Data +
    • +
+ + + +@code { + private string? target; + + protected override void OnInitialized() + { + navigationmanager.LocationChanged += LocationChanged; + base.OnInitialized(); + } + + private void LocationChanged(object? sender, LocationChangedEventArgs e) + { + Uri uri = new Uri(e.Location); + if (uri.Segments.Count() > 1) + target = uri.Segments[1]; + else + target = ""; + StateHasChanged(); + } + + private Appearance SetAppearance(string location) => (location == target) ? Appearance.Neutral : Appearance.Stealth; + +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/NavMenu.razor.css b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/NavMenu.razor.css new file mode 100644 index 0000000000..d6768ae73f --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/NavMenu.razor.css @@ -0,0 +1,43 @@ + +.nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; +} + + .nav-item:first-of-type { + padding-top: 1rem; + } + + .nav-item:last-of-type { + padding-bottom: 1rem; + } + + .nav-item ::deep a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } + +.nav-item ::deep a.active { + background-color: rgba(255,255,255,0.25); + color: white; +} + +.nav-item ::deep a:hover { + background-color: rgba(255,255,255,0.1); + color: white; +} + +@media (min-width: 641px) { + .navbar-toggler { + display: none; + } + + .collapse { + /* Never collapse the sidebar for wide screens */ + display: block; + } +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/SurveyPrompt.razor b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/SurveyPrompt.razor new file mode 100644 index 0000000000..6ddf74b131 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/Shared/SurveyPrompt.razor @@ -0,0 +1,16 @@ +
+ + @Title + +

+ Please take our + brief survey + and tell us what you think. +

+
+ +@code { + // Demonstrates how a parent component can supply parameters + [Parameter] + public string? Title { get; set; } +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/_Imports.razor b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/_Imports.razor new file mode 100644 index 0000000000..85d9ab0c2e --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/_Imports.razor @@ -0,0 +1,11 @@ +@using System.Net.Http +@using Microsoft.AspNetCore.Authorization +@using Microsoft.AspNetCore.Components.Authorization +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web +@using Microsoft.AspNetCore.Components.Web.Virtualization +@using Microsoft.JSInterop +@using FluentUIBlazorServerApp +@using FluentUIBlazorServerApp.Shared +@using Microsoft.Fast.Components.FluentUI diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/appsettings.Development.json b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/appsettings.Development.json new file mode 100644 index 0000000000..770d3e9314 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/appsettings.Development.json @@ -0,0 +1,9 @@ +{ + "DetailedErrors": true, + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + } +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/appsettings.json b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/appsettings.json new file mode 100644 index 0000000000..10f68b8c8b --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/appsettings.json @@ -0,0 +1,9 @@ +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*" +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/wwwroot/css/site.css b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/wwwroot/css/site.css new file mode 100644 index 0000000000..51fe70dd21 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/wwwroot/css/site.css @@ -0,0 +1,119 @@ +body { + --body-font: Segoe UI, sans-serif; + font-family: var(--body-font); + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); + margin: 0; +} + +.container { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 60px 1fr; + gap: 0px 0px; + grid-auto-flow: row; + grid-template-areas: + "siteheader" + "main"; +} + +.siteheader { + grid-area: siteheader; + background-color: #f7f7f7; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-start; + height: 3.5rem; + display: flex; + align-items: center; + white-space: nowrap; + padding-left: 1.5rem; +} + + .siteheader a { + padding-inline-end: 10px; + } + +.main { + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-rows: 1fr; + gap: 0px 0px; + grid-auto-flow: row; + grid-template-areas: + "navigation content"; + grid-area: main; +} + +.navigation { + grid-area: navigation; + background-color: var(--fill-color); + color: var(--neutral-foreground-rest); + padding-left: calc(var(--design-unit) * 3px); +} + + .navigation > ul { + list-style: none; + padding: 0; + } + + .navigation h1 { + font-size: var(--type-ramp-plus-1-font-size); + line-height: var(--type-ramp-plus-1-line-height); + padding: 15px calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px); + margin: 0; + } + + .navigation fluent-anchor { + width: 100%; + } + + .navigation fluent-anchor::part(control) { + justify-content: start; + } + +.content { + grid-area: content; + --elevation: 2; + background-color: var(--fill-color); + color: var(--neutral-foreground-rest); + padding-inline-start: calc(var(--design-unit) * 6px); + padding-inline-end: calc(var(--design-unit) * 6px); +} + + +#blazor-error-ui { + background: lightyellow; + bottom: 0; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + display: none; + left: 0; + padding: 0.6rem 1.25rem 0.7rem 1.25rem; + position: fixed; + width: 100%; + z-index: 1000; +} + + #blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; + } + +.blazor-error-boundary { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; + padding: 1rem 1rem 1rem 3.7rem; + color: white; +} + + .blazor-error-boundary::after { + content: "An error has occurred." + } + +.prompt { + + position: relative; + padding: 1rem 1rem; + + border: 1px solid transparent; +} diff --git a/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/wwwroot/favicon.ico b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/wwwroot/favicon.ico new file mode 100644 index 0000000000..63e859b476 Binary files /dev/null and b/templates/FluentUIBlazorServerApp/Content/FluentUIBlazorServerApp/wwwroot/favicon.ico differ diff --git a/templates/FluentUIBlazorServerApp/FluentUIBlazorServerApp.sln b/templates/FluentUIBlazorServerApp/FluentUIBlazorServerApp.sln new file mode 100644 index 0000000000..d9f17218e1 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/FluentUIBlazorServerApp.sln @@ -0,0 +1,25 @@ + +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 17 +VisualStudioVersion = 17.1.32102.18 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "FluentUIBlazorServerApp", "Content\FluentUIBlazorServerApp\FluentUIBlazorServerApp.csproj", "{9A828C59-809E-49E0-A4B3-034E9FAB82BE}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {9A828C59-809E-49E0-A4B3-034E9FAB82BE}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {9A828C59-809E-49E0-A4B3-034E9FAB82BE}.Debug|Any CPU.Build.0 = Debug|Any CPU + {9A828C59-809E-49E0-A4B3-034E9FAB82BE}.Release|Any CPU.ActiveCfg = Release|Any CPU + {9A828C59-809E-49E0-A4B3-034E9FAB82BE}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {9FBCD98F-0B1B-4927-AEFB-7D7E0993BD6D} + EndGlobalSection +EndGlobal diff --git a/templates/FluentUIBlazorServerApp/Microsoft.Fast.Templates.FluentUI.BlazorServer.nuspec b/templates/FluentUIBlazorServerApp/Microsoft.Fast.Templates.FluentUI.BlazorServer.nuspec new file mode 100644 index 0000000000..8d1dadba92 --- /dev/null +++ b/templates/FluentUIBlazorServerApp/Microsoft.Fast.Templates.FluentUI.BlazorServer.nuspec @@ -0,0 +1,18 @@ + + + + Microsoft.Fast.Templates.FluentUI.BlazorServer + 1.0.0 + + A project template for creating a Blazor server app that uses the Fluent UI component library and runs server-side inside an ASP.NET Core app and handles user interactions over a SignalR connection. This template can be used for web apps with rich dynamic user interfaces (UIs).. + + Microsoft Fast + MIT + + + + + + + + \ No newline at end of file diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/.template.config/icon.png b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/.template.config/icon.png new file mode 100644 index 0000000000..8422b59695 Binary files /dev/null and b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/.template.config/icon.png differ diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/.template.config/ide.host.json b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/.template.config/ide.host.json new file mode 100644 index 0000000000..746b2f62e2 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/.template.config/ide.host.json @@ -0,0 +1,5 @@ +{ + "$schema": "http://json.schemastore.org/vs-2017.3.host", + "order": 600, + "icon": "icon.png" +} \ No newline at end of file diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/.template.config/template.json b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/.template.config/template.json new file mode 100644 index 0000000000..59cd9577e4 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/.template.config/template.json @@ -0,0 +1,23 @@ +{ + "$schema": "http://json.schemastore.org/template", + "author": "Microsoft Fast", + "sourceName": "FluentUIBlazorWebAssemblyApp", + "classifications": [ + "Linux", + "macOS", + "Windows", + "Blazor", + "Cloud", + "Web" + ], + "identity": "Microsoft.Fast.Templates.FluentUI.WebAssembly", + "name": "FluentUI Blazor WebAssembly App", + "shortName": "fluentuiblazorwasm", + "defaultName": "BlazorApp", + "description": "A project template for creating a Blazor app that uses the Fluent UI component library and runs on WebAssembly. This template can be used for web apps with rich dynamic user interfaces (UIs).", + "tags": { + "language": "C#", + "type": "project" + }, + "preferNameDirectory": true +} \ No newline at end of file diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/App.razor b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/App.razor new file mode 100644 index 0000000000..2f14c34c8d --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/App.razor @@ -0,0 +1,13 @@ + + + + + + + Not found + +

Sorry, there's nothing at this address.

+ + + + \ No newline at end of file diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/FluentUIBlazorWebAssemblyApp.csproj b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/FluentUIBlazorWebAssemblyApp.csproj new file mode 100644 index 0000000000..c3c8b04844 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/FluentUIBlazorWebAssemblyApp.csproj @@ -0,0 +1,16 @@ + + + + net6.0 + enable + enable + true + + + + + + + + + diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/Counter.razor b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/Counter.razor new file mode 100644 index 0000000000..2565d8f8cf --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/Counter.razor @@ -0,0 +1,18 @@ +@page "/counter" + +Counter + +

Counter

+ +

Current count: @currentCount

+ +Click me + +@code { + private int currentCount = 0; + + private void IncrementCount() + { + currentCount++; + } +} diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/FetchData.razor b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/FetchData.razor new file mode 100644 index 0000000000..047b0f42b7 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/FetchData.razor @@ -0,0 +1,57 @@ +@page "/fetchdata" +@inject HttpClient Http + +Weather forecast + +

Weather forecast

+ +

This component demonstrates fetching data from a service.

+ +@if (forecasts == null) +{ +

Loading...

+} +else +{ + + + Date + Temp. (C) + Temp. (F) + Summary + + + @foreach (var forecast in forecasts) + { + + @forecast.Date.ToShortDateString() + @forecast.TemperatureC + @forecast.TemperatureF + @forecast.Summary + + + } + + + +} + +@code { + private WeatherForecast[]? forecasts; + + protected override async Task OnInitializedAsync() + { + forecasts = await Http.GetFromJsonAsync("sample-data/weather.json"); + } + + public class WeatherForecast + { + public DateTime Date { get; set; } + + public int TemperatureC { get; set; } + + public string? Summary { get; set; } + + public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); + } +} diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/Index.razor b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/Index.razor new file mode 100644 index 0000000000..101c4662b3 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/Index.razor @@ -0,0 +1,15 @@ +@page "/" + +Index + +

Hello, world!

+ +

+ Welcome to your new app. +

+ + + + + + diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/Index.razor.css b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/Index.razor.css new file mode 100644 index 0000000000..cc375828d4 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Pages/Index.razor.css @@ -0,0 +1,26 @@ +fluent-card { + --card-height: 400px; + --card-width: 500px; + padding: 20px; + margin: 12px; +} + +.class-override { + height: 163px; + width: 300px; +} + +.state-override { + --card-width: 350px; + --card-height: 300px; + --elevation: 6; +} + + .state-override:hover { + --elevation: 12; + } + +.contents { + display: flex; + flex-direction: column; +} diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Program.cs b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Program.cs new file mode 100644 index 0000000000..e60d2d2154 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Program.cs @@ -0,0 +1,11 @@ +using FluentUIBlazorWebAssemblyApp; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.RootComponents.Add("#app"); +builder.RootComponents.Add("head::after"); + +builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + +await builder.Build().RunAsync(); diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Properties/launchSettings.json b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Properties/launchSettings.json new file mode 100644 index 0000000000..816e1ef428 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Properties/launchSettings.json @@ -0,0 +1,30 @@ +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:54273", + "sslPort": 44381 + } + }, + "profiles": { + "FluentUIBlazorWebAssemblyApp": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + "applicationUrl": "https://localhost:7247;http://localhost:5247", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + } + } +} diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/MainLayout.razor b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/MainLayout.razor new file mode 100644 index 0000000000..7ff0812da2 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/MainLayout.razor @@ -0,0 +1,31 @@ +@inherits LayoutComponentBase + +FluentUIBlazorWebAssemblyApp + +
+
+ Home + About +
+
+
+ +
+ +
+
+
+ + + + @Body + + +

@ex.Message

+ + +
+
+
+
+
\ No newline at end of file diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/NavMenu.razor b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/NavMenu.razor new file mode 100644 index 0000000000..fbbce4580a --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/NavMenu.razor @@ -0,0 +1,38 @@ +@inject NavigationManager navigationmanager + + + +

FluentUI Web Components

+
    +
  • + Counter +
    • +
  • + Fetch Data +
    • +
+ + + +@code { + private string? target; + + protected override void OnInitialized() + { + navigationmanager.LocationChanged += LocationChanged; + base.OnInitialized(); + } + + private void LocationChanged(object? sender, LocationChangedEventArgs e) + { + Uri uri = new Uri(e.Location); + if (uri.Segments.Count() > 1) + target = uri.Segments[1]; + else + target = ""; + StateHasChanged(); + } + + private Appearance SetAppearance(string location) => (location == target) ? Appearance.Neutral : Appearance.Stealth; + +} diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/NavMenu.razor.css b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/NavMenu.razor.css new file mode 100644 index 0000000000..d6768ae73f --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/NavMenu.razor.css @@ -0,0 +1,43 @@ + +.nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; +} + + .nav-item:first-of-type { + padding-top: 1rem; + } + + .nav-item:last-of-type { + padding-bottom: 1rem; + } + + .nav-item ::deep a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } + +.nav-item ::deep a.active { + background-color: rgba(255,255,255,0.25); + color: white; +} + +.nav-item ::deep a:hover { + background-color: rgba(255,255,255,0.1); + color: white; +} + +@media (min-width: 641px) { + .navbar-toggler { + display: none; + } + + .collapse { + /* Never collapse the sidebar for wide screens */ + display: block; + } +} diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/SurveyPrompt.razor b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/SurveyPrompt.razor new file mode 100644 index 0000000000..6ddf74b131 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/Shared/SurveyPrompt.razor @@ -0,0 +1,16 @@ +
+ + @Title + +

+ Please take our + brief survey + and tell us what you think. +

+
+ +@code { + // Demonstrates how a parent component can supply parameters + [Parameter] + public string? Title { get; set; } +} diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/_Imports.razor b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/_Imports.razor new file mode 100644 index 0000000000..a0319b6748 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/_Imports.razor @@ -0,0 +1,11 @@ +@using System.Net.Http +@using System.Net.Http.Json +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web +@using Microsoft.AspNetCore.Components.Web.Virtualization +@using Microsoft.AspNetCore.Components.WebAssembly.Http +@using Microsoft.JSInterop +@using FluentUIBlazorWebAssemblyApp +@using FluentUIBlazorWebAssemblyApp.Shared +@using Microsoft.Fast.Components.FluentUI diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/css/app.css b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/css/app.css new file mode 100644 index 0000000000..500182aa1d --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/css/app.css @@ -0,0 +1,119 @@ +body { + --body-font: Segoe UI, sans-serif; + font-family: var(--body-font); + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); + margin: 0; +} + +.container { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 60px 1fr; + gap: 0px 0px; + grid-auto-flow: row; + grid-template-areas: + "siteheader" + "main"; +} + +.siteheader { + grid-area: siteheader; + background-color: #f7f7f7; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-start; + height: 3.5rem; + display: flex; + align-items: center; + white-space: nowrap; + padding-left: 1.5rem; +} + + .siteheader a { + padding-inline-end: 10px; + } + +.main { + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-rows: 1fr; + gap: 0px 0px; + grid-auto-flow: row; + grid-template-areas: + "navigation content"; + grid-area: main; +} + +.navigation { + grid-area: navigation; + background-color: var(--fill-color); + color: var(--neutral-foreground-rest); + padding-left: calc(var(--design-unit) * 3px); +} + + .navigation > ul { + list-style: none; + padding: 0; + } + + .navigation h1 { + font-size: var(--type-ramp-plus-1-font-size); + line-height: var(--type-ramp-plus-1-line-height); + padding: 15px calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px); + margin: 0; + } + + .navigation fluent-anchor { + width: 100%; + } + + .navigation fluent-anchor::part(control) { + justify-content: start; + } + +.content { + grid-area: content; + --elevation: 2; + background-color: var(--fill-color); + color: var(--neutral-foreground-rest); + padding-inline-start: calc(var(--design-unit) * 6px); + padding-inline-end: calc(var(--design-unit) * 6px); +} + + +#blazor-error-ui { + background: lightyellow; + bottom: 0; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + display: none; + left: 0; + padding: 0.6rem 1.25rem 0.7rem 1.25rem; + position: fixed; + width: 100%; + z-index: 1000; +} + + #blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; + } + +.blazor-error-boundary { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; + padding: 1rem 1rem 1rem 3.7rem; + color: white; +} + + .blazor-error-boundary::after { + content: "An error has occurred." + } + +.prompt { + + position: relative; + padding: 1rem 1rem; + + border: 1px solid transparent; +} diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/favicon.ico b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/favicon.ico new file mode 100644 index 0000000000..63e859b476 Binary files /dev/null and b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/favicon.ico differ diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/icon-192.png b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/icon-192.png new file mode 100644 index 0000000000..166f56da76 Binary files /dev/null and b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/icon-192.png differ diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/index.html b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/index.html new file mode 100644 index 0000000000..c22b407e09 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/index.html @@ -0,0 +1,25 @@ + + + + + + + FluentUIBlazorWebAssemblyApp + + + + + + +
Loading...
+ +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + diff --git a/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/sample-data/weather.json b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/sample-data/weather.json new file mode 100644 index 0000000000..06463c02f1 --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Content/FluentUIBlazorWebAssemblyApp/wwwroot/sample-data/weather.json @@ -0,0 +1,27 @@ +[ + { + "date": "2018-05-06", + "temperatureC": 1, + "summary": "Freezing" + }, + { + "date": "2018-05-07", + "temperatureC": 14, + "summary": "Bracing" + }, + { + "date": "2018-05-08", + "temperatureC": -13, + "summary": "Freezing" + }, + { + "date": "2018-05-09", + "temperatureC": -16, + "summary": "Balmy" + }, + { + "date": "2018-05-10", + "temperatureC": -2, + "summary": "Chilly" + } +] diff --git a/templates/FluentUIBlazorWebAssemblyApp/FluentUIBlazorWebAssemblyApp.sln b/templates/FluentUIBlazorWebAssemblyApp/FluentUIBlazorWebAssemblyApp.sln new file mode 100644 index 0000000000..7fdbe9f55c --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/FluentUIBlazorWebAssemblyApp.sln @@ -0,0 +1,25 @@ + +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 17 +VisualStudioVersion = 17.1.32102.18 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "FluentUIBlazorWebAssemblyApp", "Content\FluentUIBlazorWebAssemblyApp\FluentUIBlazorWebAssemblyApp.csproj", "{1FC26380-F47D-4CF3-88E5-5CCCC30843B6}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {1FC26380-F47D-4CF3-88E5-5CCCC30843B6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {1FC26380-F47D-4CF3-88E5-5CCCC30843B6}.Debug|Any CPU.Build.0 = Debug|Any CPU + {1FC26380-F47D-4CF3-88E5-5CCCC30843B6}.Release|Any CPU.ActiveCfg = Release|Any CPU + {1FC26380-F47D-4CF3-88E5-5CCCC30843B6}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {CB96E2A1-5C79-4A32-A7CC-D3F40F151706} + EndGlobalSection +EndGlobal diff --git a/templates/FluentUIBlazorWebAssemblyApp/Microsoft.Fast.Templates.FluentUI.BlazorWebAssembly.nuspec b/templates/FluentUIBlazorWebAssemblyApp/Microsoft.Fast.Templates.FluentUI.BlazorWebAssembly.nuspec new file mode 100644 index 0000000000..83dd6ab6fe --- /dev/null +++ b/templates/FluentUIBlazorWebAssemblyApp/Microsoft.Fast.Templates.FluentUI.BlazorWebAssembly.nuspec @@ -0,0 +1,18 @@ + + + + Microsoft.Fast.Templates.FluentUI.BlazorWebAssembly + 1.0.0 + + A project template for creating a Blazor app that uses the Fluent UI component library and runs on WebAssembly. This template can be used for web apps with rich dynamic user interfaces (UIs). + + Microsoft Fast + MIT + + + + + + + + \ No newline at end of file diff --git a/templates/Microsoft.Fast.Templates.FluentUI.BlazorServer.1.0.0.nupkg b/templates/Microsoft.Fast.Templates.FluentUI.BlazorServer.1.0.0.nupkg new file mode 100644 index 0000000000..3c1e05ce96 Binary files /dev/null and b/templates/Microsoft.Fast.Templates.FluentUI.BlazorServer.1.0.0.nupkg differ diff --git a/templates/Microsoft.Fast.Templates.FluentUI.BlazorWebAssembly.1.0.0.nupkg b/templates/Microsoft.Fast.Templates.FluentUI.BlazorWebAssembly.1.0.0.nupkg new file mode 100644 index 0000000000..a8faa6699a Binary files /dev/null and b/templates/Microsoft.Fast.Templates.FluentUI.BlazorWebAssembly.1.0.0.nupkg differ diff --git a/templates/README.md b/templates/README.md new file mode 100644 index 0000000000..7f5ee6dc01 --- /dev/null +++ b/templates/README.md @@ -0,0 +1,60 @@ +### For Blazor Server + +#### Installation +Install the template by running the command: +``` +dotnet new -i {path to package}\Microsoft.Fast.Templates.FluentUI.BlazorServer.{version}.nupkg +``` +The current version is 1.0.0. After instalation the template will be available to create a new project from both the CLI as from Visual Studio 2022 + +#### Usage +After installing the template you can create new a project from either the CLI or by creating a new project in Visual studio 2022. + +For creating a project form the CLI run the following command (in the folder of your choice): +``` +dotnet new fluentuiblazorserver -o {your project name} +``` +In Visual Studio you can create a new project by selecting the FluentUI Blazor Server App template in the 'File->New->Project'-dialog. + +#### Creating a template package +After changing the template source, a new package needs to be created. Remember to update the version number in the `.nuspec` file (see path below). To create the package run the following command: +``` +nuget.exe pack {path to repo}\templates\FluentUIBlazorServerApp\Microsoft.Fast.Templates.FluentUI.BlazorServer.nuspec -OutputDirectory {output path} +``` + +#### Uninstalling the template +If you want to uninstall the template, both from the CLI and Visual Studio 2022, run the following command: +``` +dotnet new -u Microsoft.Fast.Templates.FluentUI.BlazorServer +``` + + +### For Blazor WebAssembly + +#### Installation +Install the template by running the command: +``` +dotnet new -i {path to package}\Microsoft.Fast.Templates.FluentUI.BlazorWebAssembly.{version}.nupkg +``` +The current version is 1.0.0. After instalation the template will be available to create a new project from both the CLI as from Visual Studio 2022 + +#### Usage +After installing the template you can create new a project from either the CLI or by creating a new project in Visual studio 2022. + +For creating a project form the CLI run the following command (in the folder of your choice): +``` +dotnet new fluentuiBlazorWebAssembly -o {your project name} +``` +In Visual Studio you can create a new project by selecting the FluentUI Blazor Server App template in the 'File->New->Project'-dialog. + +#### Creating a template package +After changing the template source, a new package needs to be created. Remember to update the version number in the `.nuspec` file (see path below). To create the package run the following command: +``` +nuget.exe pack {path to repo}\templates\FluentUIBlazorWebAssemblyApp\Microsoft.Fast.Templates.FluentUI.BlazorWebAssembly.nuspec -OutputDirectory {output path} +``` + +#### Uninstalling the template +If you want to uninstall the template, both from the CLI and Visual Studio 2022, run the following command: +``` +dotnet new -u Microsoft.Fast.Templates.FluentUI.BlazorWebAssembly +```