Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SQL-MisterMagoo/BlazorEmbedLibrary
Provides Blazor-style embedded static content files for Razor Components projects.
https://github.com/SQL-MisterMagoo/BlazorEmbedLibrary
Last synced: 18 days ago
JSON representation
Provides Blazor-style embedded static content files for Razor Components projects.
- Host: GitHub
- URL: https://github.com/SQL-MisterMagoo/BlazorEmbedLibrary
- Owner: SQL-MisterMagoo
- License: mit
- Created: 2019-03-04T21:02:43.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-06-15T16:17:10.000Z (over 4 years ago)
- Last Synced: 2024-08-01T15:06:05.346Z (4 months ago)
- Language: C#
- Size: 229 KB
- Stars: 24
- Watchers: 7
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BlazorEmbedLibrary
This is a component library that provides Blazor-style static file embedding for Razor Components/Blazor.
Changelog:
#### Version 1.0.0
- Update to Preview9
#### Version 0.1.0-beta-4
- Add BlazorFileProvider : Static File Provider that serves embedded files from Blazor Libraries
- Add usage example to RazorComponentSample to serve files from BlazorComponentSample
#### Version 0.1.0-beta-3
- Restructure source folders
- Add ability to handle multiple component assemblies in one go
- Add ability to block specific content files
-- Including in Blazor
#### Version 0.1.0-beta-2
- Add compatibility with Pre-Rendering
#### Version 0.1.0-beta-1
- Initial release
- Enable support for embedded content files (CSS/JS) in Razor Components
Projects in this repo:
## BlazorEmbedLibrary
This is the component library that provides all the functionality.
It is a netstandard component library (i.e. a netstandard2.0 library).
## How to use this library
Add the nuget package BlazorEmbedLibrary
https://www.nuget.org/packages/BlazorEmbedLibrary/
#### Using the EmbeddedComponent to extract CSS/JS files
I recommend placing this in your MainLayout (or equivalent), but you can do it on individual pages if that suits your project.
Add a *Using* statement to the page to make it easier to reference the component
*MainLayout.razor*
``` C#
@using BlazorEmbedLibrary
```
...add the component :
``` HTML
```
``` C#
@code
{
bool hasConnected = false;
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (firstRender)
{
StateHasChanged();
hasConnected = true;
}
}
}
```
Note, by default the EmbeddedContent component has Debug turned off - if you enable it by setting Debug=true, it outputs the list of embedded resources.
This will read any CSS or Js files, which are embedded resources, from the Component1 library and add them to the `head` of the document.
### Multiple Assemblies
From version 0.1.0-beta-3 onwards, you can now handle multiple component libraries in one hit using the Assemblies Parameter
```
@code
{
List Assemblies = new List()
{
typeof(BlazorComponentSample.Component1).Assembly,
typeof(Blazored.Toast.BlazoredToasts).Assembly
};
}
```
### Block Files
From version 0.1.0-beta-3 onwards, you can now block individual files using the BlockCss Parameter
This example will load content from Blazored.Toast and Component1, but will block the *styles.css* from BlazorComponentSample.
```
@code
{
List BlockCss = new List()
{
"BlazorComponentSample,styles.css"
};
List Assemblies = new List()
{
typeof(BlazorComponentSample.Component1).Assembly,
typeof(Blazored.Toast.BlazoredToasts).Assembly
};
}
```
### Serve Static Files (images/data etc) using BlazorFileProvider
Available in 0.1.0-beta-4 is a new class that provides aspnetcore middleware to server embedded resources as static files in the pipeline.
To use this facility in a Razor Components project, add the nuget to your project and simply add the new BlazorFileProvider to your Configure method and pass it a list of Blazor Library assemblies.
```
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new BlazorFileProvider(
new List()
{
typeof(BlazorComponentSample.Component1).Assembly
}
)
});
```
_Note: Currently, there is a restriction that this provider will not allow duplicate file names. This is because CSS files added via the EmbeddedComponent appear in the root of the application, so any images requested by a relative URL will need to come from the root path as well, which means there is no way to distinguish between files with the same name. If two libraries have a file with the same name, the first one found will be used._
## Sample Projects
I have included Blazored.Toast and a simple custom component in the Razorcomponents and Blazor Apps
### BlazorComponentSample
An out-of-the-box sample Blazor component library with static files.
### BlazorEmbedContent - Runnable
A sample Blazor app to show how this library detects if Blazor has already linked the static files, and does not duplicate them.
Also shows how we can toggle CSS files on/off at runtime.
### RazorComponentsSample.Server - Runnable
A sample Razor Components App to show static files working.
Also shows how we can toggle CSS files on/off at runtime.