Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] Some site changes #3236

Merged
merged 2 commits into from
Jan 23, 2025
Merged

[Docs] Some site changes #3236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1451f2f
Some doc site changes
vnbaaij Jan 23, 2025
dbc81d5
Add some more news links
vnbaaij Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions examples/Demo/Shared/Components/NewsDate.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<div class="calendar">
<div class="calendar-header">
<div class="month">@Month</div>
@if (@IncludeYear)
{
<div class="year">@Year</div>
}
</div>
<div class="calendar-body">
<div class="date">@Day</div>
</div>
</div>

@code {
[Parameter, EditorRequired]
public string? Day { get; set; }

[Parameter, EditorRequired]
public string? Month { get; set; }

[Parameter, EditorRequired]
public string? Year { get; set; }

[Parameter]
public bool IncludeYear { get; set; } = false;

}
36 changes: 36 additions & 0 deletions examples/Demo/Shared/Components/NewsDate.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
.calendar {
width: 30px;
border: 1px solid var(--accent-fill-rest);
border-radius: 8px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.calendar-header {
background-color: var(--accent-fill-active);
color: var(--neutral-fill-rest);
text-align: center;
}

.calendar-header .month{
height: 20px;
font-size: 0.7em;
font-weight: bold;
}

.calendar-header .year {
height: 10px;
font-size: 0.7em;
}

.calendar-body {
text-align: center;
position: relative;
}

.calendar-body .date {
font-size: 1em;
font-weight: bolder;
color: var(--accent-fill-rest)
}
46 changes: 29 additions & 17 deletions examples/Demo/Shared/Pages/Home/Home.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,13 @@
<p>
To get up and running with the <code>Microsoft.FluentUI.AspNetCore.Components</code> library, see the &quot;Getting Started&quot; section below.
</p>

<h2>Introduction and getting started video</h2>
<div class="youtube-responsive">
<iframe src="https://www.youtube.com/embed/lUZ5mrg2Q8k" frameborder="0" allowfullscreen></iframe>
<div class="youtube-thumbnail">
<a href="https://youtu.be/lUZ5mrg2Q8k" target="_blank" title="Fluent UI Blazor introduction video"><img src="https://img.youtube.com/vi/lUZ5mrg2Q8k/maxresdefault.jpg" alt="Fluent UI Blazor introduction video" /></a>
</div>
<p style="margin-top: 0.5rem;">
More videos on our <a href="/Videos">videos page</a>
More videos available on our <a href="/Videos">videos page</a>.
</p>

</FluentGridItem>
Expand All @@ -35,26 +36,25 @@
<p>
The demo and documentation sites for previous version is available:<br />
<a href="https://aka.ms/fluentui-blazor-v3/" target="_blank">Version 3.8.0</a><br />
Please be aware that this version is no longer supported as both .NET 6 and .NET 7 are out of support now.
<em>Please be aware that this version is no longer supported as both .NET 6 and .NET 7 are out of support now.</em>
</p>
</div>
<h2 id="whatsnew">What's new?</h2>

<h2>What's new</h2>
<ul class="news">
<li><NewsDate Day="14" Month="Jan" Year="25" /><a href="/WhatsNew#v4.11.3">v4.11.3 released</a></li>
<li><NewsDate Day="13" Month="Jan" Year="25" /><a href="/WhatsNew#v4.11.2">v4.11.2 released</a></li>
<li><NewsDate Day="10" Month="Jan" Year="25" /><a href="/WhatsNew#v4.11.1">v4.11.1 released</a></li>
<li><NewsDate Day="19" Month="Dec" Year="24" /><a href="/WhatsNew#v4.11.0">v4.11.0 released</a></li>
<li><NewsDate Day="15" Month="Nov" Year="24" /><a href="https://youtu.be/w8BKS1a8MnU" target="_blank">Our .NET Cont 2024 session on YouTube</a></li>

<!--<li><a href=""></a></li>-->
</ul>

<p>
If you are already up-and-running and upgrading from an earlier version of the library, please go to the <a href="/WhatsNew">What's new</a> page
for information on additions, fixes and (breaking) changes.
</p>
<h2 id="interactivity">Components & render modes</h2>
<p>
As described in the <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0" target="_blank"> Blazor documentation</a>:
</p>
<blockquote>
By default, components use Static Server-side rendering (SSR). The component renders to the response stream and there is no interactivity.
</blockquote>
<p>
A component inherits its render mode from its parent. So unless a render mode is specified on the app, page or component level, every
component (including ours) is <em>statically rendered</em> on the server and <strong>will not be interactive</strong>. For the
Fluent UI Blazor library this means most components will display correctly but <strong>will not offer</strong> complete, if any, functionality.
</p>
</FluentGridItem>
<FluentGridItem xs="12" sm="12" md="6">
<h2 id="getting-started">Getting Started</h2>
Expand Down Expand Up @@ -130,6 +130,18 @@
</DemoSection>
</FluentGridItem>
<FluentGridItem xs="12" sm="12" md="4">
<h2 id="interactivity">Components & render modes</h2>
<p>
As described in the <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0" target="_blank"> Blazor documentation</a>:
</p>
<blockquote>
By default, components use Static Server-side rendering (SSR). The component renders to the response stream and there is no interactivity.
</blockquote>
<p>
A component inherits its render mode from its parent. So unless a render mode is specified on the app, page or component level, every
component (including ours) is <em>statically rendered</em> on the server and <strong>will not be interactive</strong>. For the
Fluent UI Blazor library this means most components will display correctly but <strong>will not offer</strong> complete, if any, functionality.
</p>
<h2 id="configuring-the-design-system">Configuring the Design System</h2>
<p>
The Fluent UI Blazor components are built on FAST's Adaptive UI technology, which enables design customization and personalization, while
Expand Down
10 changes: 3 additions & 7 deletions examples/Demo/Shared/Pages/Home/Videos.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<h1>Videos</h1>

<p>Every now and then, we do guests appearances in videos to promote the library and show a bit more on how it works. See the overview below for our most recent appearances</p>
<p>Every now and then, we present or do guests appearances in videos to promote the library and show a bit more on how it works. See the overview below for our most recent appearances</p>

<FluentGrid Spacing="7">
<FluentGridItem xs="12" sm="4">
Expand All @@ -15,10 +15,7 @@
<iframe src="https://www.youtube.com/embed/w8BKS1a8MnU?si=ugsYLTHGhBrXdAhn" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</FluentGridItem>
<FluentGridItem xs="12" sm="4">
</FluentGridItem>
<FluentGridItem xs="12" sm="4">
</FluentGridItem>

<FluentGridItem xs="12" sm="4">
<div class="youtube-title">ASP.NET Community Standup 2024</div>
<div class="youtube-responsive">
Expand All @@ -27,8 +24,7 @@
</FluentGridItem>
<FluentGridItem xs="12" sm="4">
</FluentGridItem>
<FluentGridItem xs="12" sm="4">
</FluentGridItem>

<FluentGridItem xs="12" sm="4">
<div class="youtube-title" style="overflow: unset;">Open at Microsoft - 2024</div>
<div class="youtube-responsive">
Expand Down
140 changes: 9 additions & 131 deletions examples/Demo/Shared/Pages/TemplatesPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,137 +4,15 @@

<h1><FluentIcon Value="@(new Icons.Regular.Size24.Classification())" /> Project templates</h1>

<p>
To make it easier to start a project that uses the Fluent UI Web Components for Blazor out of the box, we have created the
<a target="top" href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates/">Microsoft.FluentUI.AspNetCore.Templates</a> template package.
</p>
<p>
The package contains templates for creating Blazor Server and/or Blazor WebAssembly apps which mimic the regular Blazor
templates. The Fluent UI Blazor components are already fully set up. If you choose to use the sample pages when creating a project,
all components have been replaced with Fluent UI counterparts (and a few extra have been added). All Bootstrap styling is removed of course as well.
</p>
<p>
If you want to use the Icon component with applications based on the templates, we have already included and set up the Icon package for you.
The full collection of approximately 12 thousand icons in different variants and sizes can be browsed and searched from the <a href="/Icon">Icon</a> page.
</p>
<p>
If you want to use the Emoji component with applications based on the templates, you still need to make some changes to the project. See the
<a href="/IconsAndEmoji"> Icons and Emoji</a> page for more information.
</p>
<MarkdownSection FromAsset="./_content/FluentUI.Demo.Shared/docs/Templates.md" OnContentConverted="RefreshTableOfContents" />

<p>
The pages created from these templates will appear like the following based on the type of project and options selected during creation.
</p>
<p style="display: flex; flex-direction:column; align-items:center">
<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-home.png" alt="Home page for site created Fluent UI templates" />
<br />
<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-counter.png" alt="Counter page for site created Fluent UI templates" />
<br />
<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-weather.png" alt="Fetch data page for site created Fluent UI templates" />
</p>
@code {

<blockquote>
<strong>IMPORTANT!!</strong>
<p>Just as with the standard Blazor Web App template, Blazor will use SSR by default. If you want to have interactive components, make sure you add a rendermode to the app, page or component!</p>
</blockquote>
[CascadingParameter]
public EventCallback OnRefreshTableOfContents { get; set; }

<h2 id="installation">Installation</h2>
<p>
You can install the templates by running the following command:
</p>

<CodeSnippet>dotnet new install Microsoft.FluentUI.AspNetCore.Templates</CodeSnippet>

<p>
The current version can be found on the <a href="https://www.nuget.org/packages/Microsoft.FLuentUI.AspNetCore.Templates/" rel="noopener noreferrer nofollow">NuGet site</a>.
</p>

<h2 id="usage">Usage</h2>
<p>
After installing the templates, you can create a new project from either the CLI or by using the 'Creating a new project'-dialog in Visual Studio 2022.
</p>

<p>
For creating a new Fluent Blazor Web App project from the CLI:
</p>

<CodeSnippet>dotnet new fluentblazor -o {your project name}</CodeSnippet>

<p>
For creating a Fluent Blazor WebAssembly Standalone App project from the CLI:
</p>

<CodeSnippet>dotnet new fluentblazorwasm -o {your project name}</CodeSnippet>

<p>
In Visual Studio you can create a new project by selecting either the 'Fluent Blazor Web App' template or the 'Fluent Blazor WebAssembly Standalone App'
template in the 'File-&gt;New-&gt;Project'-dialog. It looks like this:
</p>
<p style="display: flex; justify-content:center">
<img style="border: 1px solid var(--neutral-foreground-focus);" src="_content/FluentUI.Demo.Shared/images/newproject.png" alt="New project dialog with Fluent UI templates" />
</p>

<h3>Blazor Web App details</h3>
<p>
The rendermode and interactivity choices made when creating an application with the template determine the behavior of the NavMenu and whether we include the web
components script in <code>App.razor</code>. Starting with v4.2.1 of the templates, the result of that choices is described in the table below:

<table width="90%">
<thead>
<tr>
<th width="33%">Rendermode / Interactivity</th>
<th width="33%">NavMenu @@rendermode</th>
<th width="33%">NavMenu Collapsible</th>
</tr>
</thead>
<tbody>
<tr>
<td>SSR / not applicable</td>
<td>❌</td>
<td>✅<sup>*</sup></td>
</tr>
<tr>
<td>Server / Global</td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>Server / Per Page</td>
<td>✅</td>
<td>✅</td>
</tr>
<tr>
<td>WebAssembly / Global<sup>**</sup></td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>WebAssembly / Per Page<sup>**</sup></td>
<td>✅</td>
<td>✅</td>
</tr>
<tr>
<td>Auto / Global<sup>**</sup></td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>Auto / Per Page<sup>**</sup></td>
<td>✅</td>
<td>✅</td>
</tr>
</tbody>
</table>
</p>
<p>
<em>* For expanding/collapsing items, this uses a JavaScript file that is only active when running in SSR mode.</em><br />
<em>** The NavMenu component is located in the Client project.</em>
</p>

<h2 id="uninstalling-the-templates">Uninstalling the templates</h2>

<p>
If you want to uninstall the templates, both from the CLI and Visual Studio 2022, run the following command:
</p>

<CodeSnippet>dotnet new uninstall Microsoft.FluentUI.AspNetCore.Templates</CodeSnippet>
private async Task RefreshTableOfContents()
{
await OnRefreshTableOfContents.InvokeAsync();
}
}
40 changes: 38 additions & 2 deletions examples/Demo/Shared/wwwroot/css/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,31 @@ nav fluent-anchor {
display: flex;
}

ul.news {
padding-left: 0;
list-style-type: none;
}

ul.news li {
display: flex;
gap: calc( var(--design-unit) * 2px);
align-items: center;
padding-bottom: calc( var(--design-unit) * 2px);
}

.news .calendar {

}

.news a {
font-size: var(--type-ramp-plus-1-font-size);
line-height: var(--type-ramp-plus-1-line-height);
font-weight: 600;
text-decoration: none;
}



article {
padding: 1.5rem 1rem;
border-right: 1px solid var(--neutral-stroke-divider-rest);
Expand Down Expand Up @@ -301,7 +326,7 @@ kbd {
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
margin-top:80px;
margin-top: 80px;
}

.loading-progress-text:after {
Expand Down Expand Up @@ -426,14 +451,15 @@ kbd {
fluent-select::part(control) {
width: 150px;
}

.content {
flex-direction: column;
}

aside {
padding: 1.5em 0.75em 1em 0.75em;
width: 100%;
height: 100%!important;
height: 100% !important;
max-height: 100% !important;
}

Expand Down Expand Up @@ -554,3 +580,13 @@ kbd {
display: block;
min-height: 24px;
}

.youtube-thumbnail {
position: relative;
overflow: hidden;
max-width: 100%;
}

.youtube-thumbnail img {
width: 100%;
}
Loading
Loading