init: YaeBlog

YaeBlog.Theme.FluentUI/Component1.razor

@@ -0,0 +1,3 @@
+<div class="my-component">
+    This component is defined in the <strong>YaeBlog.Theme.FluentUI</strong> library.
+</div>

YaeBlog.Theme.FluentUI/Component1.razor.css

@@ -0,0 +1,6 @@
+.my-component {
+    border: 2px dashed red;
+    padding: 1em;
+    margin: 1em 0;
+    background-image: url('background.png');
+}

YaeBlog.Theme.FluentUI/ExampleJsInterop.cs

@@ -0,0 +1,36 @@
+using Microsoft.JSInterop;
+
+namespace YaeBlog.Theme.FluentUI;
+
+// This class provides an example of how JavaScript functionality can be wrapped
+// in a .NET class for easy consumption. The associated JavaScript module is
+// loaded on demand when first needed.
+//
+// This class can be registered as scoped DI service and then injected into Blazor
+// components for use.
+
+public class ExampleJsInterop : IAsyncDisposable
+{
+    private readonly Lazy<Task<IJSObjectReference>> moduleTask;
+
+    public ExampleJsInterop(IJSRuntime jsRuntime)
+    {
+        moduleTask = new (() => jsRuntime.InvokeAsync<IJSObjectReference>(
+            "import", "./_content/YaeBlog.Theme.FluentUI/exampleJsInterop.js").AsTask());
+    }
+
+    public async ValueTask<string> Prompt(string message)
+    {
+        var module = await moduleTask.Value;
+        return await module.InvokeAsync<string>("showPrompt", message);
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (moduleTask.IsValueCreated)
+        {
+            var module = await moduleTask.Value;
+            await module.DisposeAsync();
+        }
+    }
+}

YaeBlog.Theme.FluentUI/YaeBlog.Theme.FluentUI.csproj

@@ -0,0 +1,18 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+
+  <ItemGroup>
+    <SupportedPlatform Include="browser" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
+  </ItemGroup>
+
+</Project>

YaeBlog.Theme.FluentUI/_Imports.razor

@@ -0,0 +1 @@
+@using Microsoft.AspNetCore.Components.Web

YaeBlog.Theme.FluentUI/wwwroot/exampleJsInterop.js

@@ -0,0 +1,6 @@
+// This is a JavaScript module that is loaded on demand. It can export any number of
+// functions, and may import other JavaScript modules if required.
+
+export function showPrompt(message) {
+  return prompt(message, 'Type anything here');
+}