Skip to content

Commit

Permalink
remove css classes as they are applied using tailwind prose automatic…
Browse files Browse the repository at this point in the history 
…ally
  • Loading branch information
abdulrahmanshabeekmohamed committed Dec 13, 2024
1 parent 2df0e4d commit 947730f
Show file tree
Hide file tree
Showing 109 changed files with 1,890 additions and 1,890 deletions.
34 changes: 17 additions & 17 deletions BlazorDemoComponents/Pages/Blogs/Wasm/AppSettings.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,40 +10,40 @@

<p>
<strong>Note:</strong> If you have not done so already, I recommend you read the article on
<NavLink class="[ underline ]" href="blogs/blazor-wasm-dark-theme-and-light-theme">Blazor WASM Dark Theme and Light Theme</NavLink>.
<NavLink href="blogs/blazor-wasm-dark-theme-and-light-theme">Blazor WASM Dark Theme and Light Theme</NavLink>.
</p>

<h3 class="[ font-semibold text-lg ]">Table of Contents</h3>
<h3>Table of Contents</h3>

<ol class="[ list-decimal ] [ ml-4 ]">
<ol>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#what-is-appsettings-and-why-it-is-needed")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#what-is-appsettings-and-why-it-is-needed")" Match="NavLinkMatch.All">
What is App Settings and Why it is needed?
</NavLink>
</li>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#how-to-read-appsettings")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#how-to-read-appsettings")" Match="NavLinkMatch.All">
How to read App Settings?
</NavLink>
</li>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#appsettings-in-release-configuration")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#appsettings-in-release-configuration")" Match="NavLinkMatch.All">
App Settings in Release Configuration
</NavLink>
</li>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#multiple-appsettings-json-configuration")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#multiple-appsettings-json-configuration")" Match="NavLinkMatch.All">
What if we have multiple <ContentHighlight>appsettings.{ENVIRONMENT}.json</ContentHighlight>?
</NavLink>
</li>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#summary")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#summary")" Match="NavLinkMatch.All">
Summary
</NavLink>
</li>
</ol>

<h3 id="what-is-appsettings-and-why-it-is-needed" class="[ font-semibold text-lg ]">What is App Settings and Why it is needed?</h3>
<h3 id="what-is-appsettings-and-why-it-is-needed">What is App Settings and Why it is needed?</h3>

<p>
App Settings / Configuration (<ContentHighlight>appsettings.json</ContentHighlight>) located inside <ContentHighlight>wwwroot</ContentHighlight> is
Expand All @@ -56,7 +56,7 @@
Blazor WebAssembly loads configuration from the following app settings files by default:
</p>

<ul class="[ list-disc ] [ ml-4 ]">
<ul>
<li><ContentHighlight>wwwroot/appsettings.json</ContentHighlight></li>
<li><ContentHighlight>wwwroot/appsettings.{ENVIRONMENT}.json</ContentHighlight>, where the {ENVIRONMENT} placeholder is the app's runtime environment</li>
</ul>
Expand All @@ -68,17 +68,17 @@



<h3 id="how-to-read-appsettings" class="[ font-semibold text-lg ]">How to read App Settings?</h3>
<h3 id="how-to-read-appsettings">How to read App Settings?</h3>

<p>
To read the settings / configuration from <ContentHighlight>appsettings.json</ContentHighlight> you need to follow the below steps,
</p>

<ol class="[ list-decimal ] [ ml-4 ]">
<ol>
<li>Inject <ContentHighlight>@@inject IConfiguration configuration</ContentHighlight></li>
<li>Use injected configuration object to read settings</li>
<li>
<ul class="[ list-disc ] [ ml-4 ]">
<ul>
<li>Use <ContentHighlight>configuration.GetValue&lt;string&gt;("{KEY}")</ContentHighlight> to read simple string value</li>
<li>Use <ContentHighlight>configuration.GetValue&lt;bool&gt;("{KEY}")</ContentHighlight> to read simple boolean value</li>
<li>Use <ContentHighlight>configuration.GetSection("{KEY}")</ContentHighlight> to read section as object</li>
Expand Down Expand Up @@ -106,7 +106,7 @@



<h3 id="appsettings-in-release-configuration" class="[ font-semibold text-lg ]">App Settings in Release Configuration</h3>
<h3 id="appsettings-in-release-configuration">App Settings in Release Configuration</h3>

<p>
Generally configuration from <ContentHighlight>appsettings.json</ContentHighlight> will be used in production environment. We cannot have all same
Expand All @@ -133,14 +133,14 @@



<h3 id="multiple-appsettings-json-configuration" class="[ font-semibold text-lg ]">What if we have multiple <ContentHighlight>appsettings.{ENVIRONMENT}.json</ContentHighlight>?</h3>
<h3 id="multiple-appsettings-json-configuration">What if we have multiple <ContentHighlight>appsettings.{ENVIRONMENT}.json</ContentHighlight>?</h3>

<p>
There are scenarios where we might have multiple <ContentHighlight>appsettings.{ENVIRONMENT}.json</ContentHighlight> files. For example, I have a
standalone blazor wasm application and it has the following five environments,
</p>

<ul class="[ list-disc ] [ ml-4 ]">
<ul>
<li>Local</li>
<li>Offline</li>
<li>Docker</li>
Expand All @@ -161,7 +161,7 @@



<h3 id="summary" class="[ font-semibold text-lg ]">Summary</h3>
<h3 id="summary">Summary</h3>

<p>
I'm happy that you have reached to the end of this article. Here we learnt what is <ContentHighlight>appsettings</ContentHighlight> and why do we need
Expand Down
20 changes: 10 additions & 10 deletions BlazorDemoComponents/Pages/Blogs/Wasm/BlazorComponents.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,30 +12,30 @@

<p>
<strong>Note:</strong> If you have not done so already, I recommend you read the article on
<NavLink class="[ underline ]" href="blogs/blazor-wasm-introduction">Blazor Wasm Introduction</NavLink>.
<NavLink href="blogs/blazor-wasm-introduction">Blazor Wasm Introduction</NavLink>.
</p>

<h3 class="[ font-semibold text-lg ]">Table of Contents</h3>
<h3>Table of Contents</h3>

<ol class="[ list-decimal ] [ ml-4 ]">
<ol>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#what-is-component-in-blazor")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#what-is-component-in-blazor")" Match="NavLinkMatch.All">
What is Components in blazor?
</NavLink>
</li>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#how-to-create-a-component-in-blazor")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#how-to-create-a-component-in-blazor")" Match="NavLinkMatch.All">
How to create a component in blazor?
</NavLink>
</li>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#summary")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#summary")" Match="NavLinkMatch.All">
Summary
</NavLink>
</li>
</ol>

<h3 id="what-is-component-in-blazor" class="[ font-semibold text-lg ]">What is Components in blazor?</h3>
<h3 id="what-is-component-in-blazor">What is Components in blazor?</h3>

<p>
A <ContentHighlight>Blazor Component</ContentHighlight> is a reusable piece of UI in a Blazor application. This helps you to wrap html elements and their events into a reusable UI
Expand All @@ -61,13 +61,13 @@



<h3 id="how-to-create-a-component-in-blazor" class="[ font-semibold text-lg ]">How to create a component in blazor?</h3>
<h3 id="how-to-create-a-component-in-blazor">How to create a component in blazor?</h3>

<p>
To create a component you need to,
</p>

<ol class="[ list-decimal ] [ ml-4 ]">
<ol>
<li>Right click <ContentHighlight>Pages</ContentHighlight> folder or any folder expcet <ContentHighlight>wwwroot</ContentHighlight> folder inside your project.</li>
<li>Click on <ContentHighlight>Add</ContentHighlight>.</li>
<li>Click on <ContentHighlight>Razor Component</ContentHighlight>.</li>
Expand All @@ -88,7 +88,7 @@
<Logo></Logo>
</DemoSnippet>

<h3 id="summary" class="[ font-semibold text-lg ]">Summary</h3>
<h3 id="summary">Summary</h3>

<p>
In this article, we learn't about what is component in blazor and how to create your own component and experienced a live demo. We also listed few components used in i love dotnet.
Expand Down
32 changes: 16 additions & 16 deletions BlazorDemoComponents/Pages/Blogs/Wasm/BlazorDynamicComponent.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,40 +10,40 @@

<p>
<strong>Note:</strong> If you have not done so already, I recommend you read the article on
<NavLink class="[ underline ]" href="blogs/blazor-wasm-virtualization">Blazor WASM Virtualization</NavLink>.
<NavLink href="blogs/blazor-wasm-virtualization">Blazor WASM Virtualization</NavLink>.
</p>

<h3 class="[ font-semibold text-lg ]">Table of Contents</h3>
<h3>Table of Contents</h3>

<ol class="[ list-decimal ] [ ml-4 ]">
<ol>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#what-is-dynamic-component")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#what-is-dynamic-component")" Match="NavLinkMatch.All">
What is Dynamic Component?
</NavLink>
</li>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#how-to-use-dynamic-component-in-blazor")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#how-to-use-dynamic-component-in-blazor")" Match="NavLinkMatch.All">
How to use Dynamic Component in blazor?
</NavLink>
</li>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#when-to-use-dynamic-component-in-blazor")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#when-to-use-dynamic-component-in-blazor")" Match="NavLinkMatch.All">
When to use Dynamic Component in blazor?
</NavLink>
</li>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#steps")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#steps")" Match="NavLinkMatch.All">
Steps
</NavLink>
</li>
<li>
<NavLink class="[ underline ]" href="@($"blogs/{Slug}#summary")" Match="NavLinkMatch.All">
<NavLink href="@($"blogs/{Slug}#summary")" Match="NavLinkMatch.All">
Summary
</NavLink>
</li>
</ol>

<h3 id="what-is-dynamic-component" class="[ font-semibold text-lg ]">What is Dynamic Component in blazor?</h3>
<h3 id="what-is-dynamic-component">What is Dynamic Component in blazor?</h3>

<p>
As its name implies, <ContentHighlight>&lt;DynamicComponent&gt;</ContentHighlight> is a component that allows us to dynamically render
Expand All @@ -59,7 +59,7 @@



<h3 id="how-to-use-dynamic-component-in-blazor" class="[ font-semibold text-lg ]">How to use Dynamic Component in blazor?</h3>
<h3 id="how-to-use-dynamic-component-in-blazor">How to use Dynamic Component in blazor?</h3>

<p>
To start using <ContentHighlight>&lt;DynamicComponent&gt;</ContentHighlight>, consider the following example
Expand All @@ -69,7 +69,7 @@
In the above example,
</p>

<ul class="[ list-disc ] [ ml-4 ]">
<ul>
<li><ContentHighlight>componentType</ContentHighlight> specifies the type.</li>
<li><ContentHighlight>parameters</ContentHighlight> specifies component parameters to pass to the <ContentHighlight>componentType</ContentHighlight> component.</li>
</ul>
Expand All @@ -78,13 +78,13 @@



<h3 id="when-to-use-dynamic-component-in-blazor" class="[ font-semibold text-lg ]">When to use Dynamic Component in blazor?</h3>
<h3 id="when-to-use-dynamic-component-in-blazor">When to use Dynamic Component in blazor?</h3>

<p>
<ContentHighlight>&lt;DynamicComponent&gt;</ContentHighlight> is can be in following scenarios,
</p>

<ul class="[ list-disc ] [ ml-4 ]">
<ul>
<li>Dynamically Rendering Widget components in dashboard based on User Preference or UI Settings.</li>
<li>Dynamically generating forms from a JSON data stored in database.</li>
<li>
Expand Down Expand Up @@ -121,9 +121,9 @@



<h3 id="steps" class="[ font-semibold text-lg ]">Steps</h3>
<h3 id="steps">Steps</h3>

<ol class="[ list-decimal ] [ ml-4 ]">
<ol>
<li>
Let's start by adding all the three components as option in <ContentHighlight>&lt;select&gt;</ContentHighlight> drop down and hook an
<ContentHighlight>@@onchange="RenderComponent"</ContentHighlight>.
Expand Down Expand Up @@ -158,7 +158,7 @@



<h3 id="summary" class="[ font-semibold text-lg ]">Summary</h3>
<h3 id="summary">Summary</h3>

<p>
In this post, we walked through the new <ContentHighlight>&lt;DynamicComponent&gt;</ContentHighlight>, which allows you to render components when
Expand Down
Loading

0 comments on commit 947730f

Please sign in to comment.