Skip to content

Commit

Permalink
docs: change markdown to use 2 spaces instead of tab
Browse files Browse the repository at this point in the history
  • Loading branch information
egil committed May 9, 2024
1 parent c7543bb commit 4803997
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 78 deletions.
13 changes: 8 additions & 5 deletions .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,9 @@ tab_size = 2

[*.md]
trim_trailing_whitespace = false
indent_style = space
tab_size = 2
end_of_line = crlf

[*.{cmd,bat}]
end_of_line = crlf
Expand Down Expand Up @@ -280,12 +283,12 @@ dotnet_naming_style.prefix_type_parameters_with_t_style.capitalization = pascal_
dotnet_naming_style.prefix_type_parameters_with_t_style.required_prefix = T
# disallowed_style - Anything that has this style applied is marked as disallowed
dotnet_naming_style.disallowed_style.capitalization = pascal_case
dotnet_naming_style.disallowed_style.required_prefix =
dotnet_naming_style.disallowed_style.required_suffix =
dotnet_naming_style.disallowed_style.required_prefix =
dotnet_naming_style.disallowed_style.required_suffix =
# internal_error_style - This style should never occur... if it does, it indicates a bug in file or in the parser using the file
dotnet_naming_style.internal_error_style.capitalization = pascal_case
dotnet_naming_style.internal_error_style.required_prefix =
dotnet_naming_style.internal_error_style.required_suffix =
dotnet_naming_style.internal_error_style.required_prefix =
dotnet_naming_style.internal_error_style.required_suffix =

##########################################
# .NET Design Guideline Field Naming Rules
Expand Down Expand Up @@ -488,7 +491,7 @@ csharp_style_pattern_local_over_anonymous_function = false # IDE0039: Use local
dotnet_diagnostic.MA0006.severity = suggestion # MA0006: use String.Equals
dotnet_diagnostic.MA0007.severity = none # MA0007: Add a comma after the last value
dotnet_diagnostic.MA0048.severity = silent # MA0048: File name must match type name
dotnet_diagnostic.MA0016.severity = none
dotnet_diagnostic.MA0016.severity = none

# Microsoft - Code Analysis
# https://docs.microsoft.com/en-us/dotnet/fundamentals/code-analysis/quality-rules/
Expand Down
146 changes: 73 additions & 73 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,101 +17,101 @@ To start fresh from a (new) Blazor Web App project, follow these steps:

Modify `Program.cs` to include Htmxor services and middleware:

```diff
var builder = WebApplication.CreateBuilder(args);
```diff
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services
.AddRazorComponents()
+ .AddHtmx();
// Add services to the container.
builder.Services
.AddRazorComponents()
+ .AddHtmx();

var app = builder.Build();
var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
app.UseHsts();
}
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
app.UseHsts();
}

app.UseHttpsRedirection();
app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();
+ app.UseHtmxAntiforgery();
app.MapRazorComponents<App>()
+ .AddHtmxorComponentEndpoints(app);
app.UseStaticFiles();
app.UseAntiforgery();
+ app.UseHtmxAntiforgery();
app.MapRazorComponents<App>()
+ .AddHtmxorComponentEndpoints(app);

app.Run();
```
Note: You can use `AddHtmx(options => { ... })` to change [htmx's config](https://htmx.org/reference/#config) for your app.
app.Run();
```
Note: You can use `AddHtmx(options => { ... })` to change [htmx's config](https://htmx.org/reference/#config) for your app.

3. **Update App.razor**

Modify `App.razor` to include Htmxor components:

```diff
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="MinimalHtmxorApp.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
+ <HtmxHeadOutlet />
<HeadOutlet />
</head>

<!--
Adding hx-boost="true" is optional.
Learn more here: https://htmx.org/ attributes/hx-boost/
-->
+ <body hx-boost="true">
<Routes />

- <script src="_framework/blazor.web.js"></script>
</body>

</html>
```
```diff
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="MinimalHtmxorApp.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
+ <HtmxHeadOutlet />
<HeadOutlet />
</head>

<!--
Adding hx-boost="true" is optional.
Learn more here: https://htmx.org/ attributes/hx-boost/
-->
+ <body hx-boost="true">
<Routes />

- <script src="_framework/blazor.web.js"></script>
</body>

</html>
```

4. **Create an Optional Direct Request Layout**

Optionally, create a layout that will be used during [direct routing](routing.md#direct-routing), e.g., `/Components/Layout/HtmxorLayout.razor`:

```razor
@inherits HtmxLayoutComponentBase
@Body
```
```razor
@inherits HtmxLayoutComponentBase
@Body
```

The `HtmxLayoutComponentBase` includes the `<HeadOutlet>` component. This makes it possible to use the `<PageTitle>` component during htmx requests to update the page title.
The `HtmxLayoutComponentBase` includes the `<HeadOutlet>` component. This makes it possible to use the `<PageTitle>` component during htmx requests to update the page title.

5. **Update _Imports.razor (Optional)**

Modify _Imports.razor to include Htmxor namespaces and set a default layout:

```diff
@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 static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
+ @using Htmxor.Components
+ @using Htmxor.Http
+ @using Htmxor
+ @using static Htmxor.Constants

+ @attribute [HtmxLayout(typeof(HtmxorLayout))]
```

Note that we set up the custom layout for all components by defining the `[HtmxLayout(typeof(HtmxorLayout))]` attribute in the `_Imports.razor` file.
```diff
@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 static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
+ @using Htmxor.Components
+ @using Htmxor.Http
+ @using Htmxor
+ @using static Htmxor.Constants

+ @attribute [HtmxLayout(typeof(HtmxorLayout))]
```

Note that we set up the custom layout for all components by defining the `[HtmxLayout(typeof(HtmxorLayout))]` attribute in the `_Imports.razor` file.

## Routing in Htmxor

Expand Down

0 comments on commit 4803997

Please sign in to comment.