Skip to content

Commit

Permalink
feat(websites): improve docs overview of the Platform website #6595 (#…
Browse files Browse the repository at this point in the history 
…6596)
  • Loading branch information
@msynk
msynk authored Jan 16, 2024
1 parent 59c42e4 commit 196eeb8
Show file tree
Hide file tree
Showing 35 changed files with 329 additions and 251 deletions.
5 changes: 5 additions & 0 deletions src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql01OverviewPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@
<BitTypography Variant="BitTypographyVariant.H5" Gutter>Blazor Entity Framework Sqlite utilities</BitTypography>

<BitTypography Variant="BitTypographyVariant.Subtitle1">
Dreaming of an offline web application capable of saving data and syncing later?
<br />
Enter Besql, your solution to incorporating EF core & sqlite in your browser.
It's a crucial aid for achieving this objective seamlessly.
<br />
bit Besql facilitates the use of Entity Framework and sqlite in web browsers with Blazor WebAssembly.
</BitTypography>

Expand Down
5 changes: 5 additions & 0 deletions src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Bswup/Bswup01OverviewPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,13 @@
Service Worker when building PWAs with Blazor.
It utilizes the Service Worker's events to handle Installing and Updating the app
as fast and smooth as possible while minimizing the download size.
<br />
This unique tool harnesses the power of Progressive Web Apps (PWA) within the innovative
new structure of dotnet 8. By amalgamating pre-rendering techniques reminiscent of renowned
platforms like GitHub, Reddit, and Facebook, Bswup ensures an exceptional user experience.
</BitTypography>


<br />

<div class="section-card-txt">
Expand Down
5 changes: 5 additions & 0 deletions src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Butil/Butil01OverviewPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@
<BitTypography Variant="BitTypographyVariant.H5" Gutter>Blazor Utilities for JavaScript</BitTypography>

<BitTypography Variant="BitTypographyVariant.Subtitle1">
Embracing Blazor because of your love for C#?
<br />
Butil enables you to stay true to that sentiment by providing essential Browser APIs in C#,
eliminating the need to revert to JavaScript for any functionality.
<br />
bit Butil helps C# developers to access the browser APIs that are only accessible through JavaScript in C#.
</BitTypography>

Expand Down
69 changes: 19 additions & 50 deletions ...s/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates01OverviewPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,64 +14,33 @@
<BitTypography Variant="BitTypographyVariant.H3" Gutter>bit Boilerplate</BitTypography>

<BitTypography Variant="BitTypographyVariant.Subtitle1">
If our efforts in providing modern tooling have piqued your interest, dive into the Bit Boilerplate project template.
<br />
Experience all of our tools along with additional features such as ASP.NET Core Identity integration,
multilingualism, and other cool features that empowers you to develop unified Web, Android, iOS, Windows,
and macOS apps from a single codebase, while providing seamless integration with native platform features
and third-party Java, Kotlin, Swift, Objective-C, and JavaScript libraries.
<br /><br />
bit Boilerplate is a feature-rich project template for both Visual studio and the .NET CLI.
It comes with a lot of features right out of the box that are required for a real world application.
Two distinct samples that further explain the features in action are included in the project template.
<br /><br />
Watch our YouTube playlist to get more familiar with bit Boilerplate project template
<a href="https://www.youtube.com/watch?v=ReS5mHLOa3Q&list=PLKG2Zun6HtHjn9PjM7w0IsTc40PTZD4hj&ab_channel=bitplatform" target="_blank">
here
</a>:
</BitTypography>

<br />
<br />
<br />

<BitTypography Variant="BitTypographyVariant.H4" Gutter>AdminPanel sample</BitTypography>
<div class="page-flex-container">
<div class="page-content-container">
<div class="image-container">
<img class="template-img" src="/images/templates/admin/adminpanel.webp" alt="AdminPanel sample" />
<a class="demo-btn-shadow" href="@Urls.AdminPanelMultiLingual" target="_blank">
<div class="demo-btn">Demo</div>
</a>
</div>
<BitTypography Variant="BitTypographyVariant.Body1">
The AdminPanel sample is a project powered by bit Boilerplate that includes all the necessary parts to create a fully-featured cross-platform admin/management website/app.
</BitTypography>
</div>
<br /><br />

<div class="page-content-container">
<a class="primary-btn" href="@Urls.AdminPanelMultiLingual" target="_blank" title="SPA">SPA demo</a>
<a class="secondary-btn" href="@Urls.AdminPanelGooglePlay" target="_blank" title="Google Play"><span class="btn-img google-play"></span>Android</a>
<a class="secondary-btn" href="@Urls.AdminPanelAppleStore" target="_blank" title="Apple Store"><span class="btn-img apple-store"></span>Apple Store</a>
<a class="secondary-btn" href="@Urls.BoilerplateNuget" target="_blank" title="Nuget"><span class="btn-img nuget"></span>Nuget</a>
<a class="secondary-btn" href="@Urls.AdminPanelFigma" target="_blank" title="Figma"><span class="btn-img figma"></span>Figma</a>
</div>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/ReS5mHLOa3Q?si=8Z5gI7H3I2PuDPPB"
width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
</iframe>
</div>

<br />
<br />
<br />

<BitTypography Variant="BitTypographyVariant.H4" Gutter>Todo sample</BitTypography>
<div class="page-flex-container">
<div class="page-content-container">
<div class="image-container">
<img class="template-img" src="/images/templates/todo/todotemplate.webp" alt="Todo sample" />
<a class="demo-btn-shadow" href="@Urls.TodoTemplatePwaPrerendered" target="_blank">
<div class="demo-btn">Demo</div>
</a>
</div>
<BitTypography Variant="BitTypographyVariant.Body1">
The Todo sample is a project powered by Boilerplate that includes work packages and actions that you can apply to various cross-platform projects.
</BitTypography>
</div>

<div class="page-content-container">
<a class="primary-btn" href="@Urls.TodoTemplatePwaPrerendered" target="_blank" title="Prerendered PWA demo">Prerendered PWA</a>
<a class="secondary-btn" href="@Urls.TodoTemplateGooglePlay" target="_blank" title="Google Play"><i class="btn-img google-play" />Android</a>
<a class="secondary-btn" href="@Urls.TodoTemplateAppleStore" target="_blank" title="Apple Store"><span class="btn-img apple-store"></span>Apple Store</a>
<a class="secondary-btn" href="@Urls.BoilerplateNuget" target="_blank" title="NuGet"><i class="btn-img nuget" />NuGet</a>
<a class="secondary-btn" href="@Urls.TodoTemplateFigma" target="_blank" title="Figma"><i class="btn-img figma" />Figma</a>
</div>
</div>
</div>

<NavigationButtons Next="Development prerequisites" NextUrl="/templates/development-prerequisites" />
<NavigationButtons Next="Samples" NextUrl="/templates/samples" />
178 changes: 3 additions & 175 deletions ...tform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates01OverviewPage.razor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,184 +5,12 @@

.page-container {
@include PageContainer;
}

.page-flex-container {
width: 100%;
display: flex;
flex-flow: row wrap;
box-sizing: border-box;
}

.page-content-container {
margin: 0;
flex-grow: 0;
max-width: 66%;
flex-basis: 66%;
flex-direction: row;
box-sizing: border-box;

&:last-child {
max-width: 34%;
flex-basis: 34%;
padding-left: rem2(48px);
}

@include lt-xl {
flex-grow: 0;
max-width: 100%;
flex-basis: 100%;

&:last-child {
padding-left: 0;
max-width: 100%;
flex-basis: 100%;
padding-top: rem2(32px);
}
}
}

.image-container {
position: relative;
padding: 50% 0 0 0;
margin-bottom: 1rem;

.template-img {
top: 0;
width: 100%;
height: 100%;
color: #f5f5f5;
display: block;
position: absolute;
border-radius: rem2(8px);
background-color: #f5f5f5;
box-shadow: $bit-box-shadow-callout;
}

.demo-btn-shadow {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
border-radius: rem2(8px);
background-color: rgba(25, 118, 210, 0.6);
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.demo-btn {
border: 0;
margin: 0;
outline: 0;
cursor: pointer;
font-weight: 500;
line-height: 1.2;
position: relative;
align-items: center;
display: inline-flex;
min-width: rem2(64px);
font-size: rem2(16px);
text-decoration: none;
box-sizing: border-box;
border-radius: rem2(4px);
justify-content: center;
padding: rem2(12px) rem2(16px);
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
color: $White;
background-color: #1976d2;

&:hover {
background-color: #0052cc;
}
}

&:hover {
.demo-btn-shadow {
opacity: 1;
}
}
}

.primary-btn {
border: 0;
outline: 0;
width: 100%;
cursor: pointer;
font-weight: 600;
line-height: 1.2;
position: relative;
align-items: center;
font-size: rem2(16px);
min-width: rem2(64px);
display: inline-flex;
text-decoration: none;
justify-content: center;
border-radius: rem2(4px);
margin-bottom: rem2(8px);
padding: rem2(12px) rem2(16px);
color: $White;
background-color: $B6Color;

&:hover {
background-color: #0052cc;
}
flex-flow: column;
}

.secondary-btn {
outline: 0;
.video-container {
width: 100%;
cursor: pointer;
font-weight: 600;
line-height: 1.2;
position: relative;
align-items: center;
display: inline-flex;
font-size: rem2(16px);
min-width: rem2(64px);
text-decoration: none;
box-sizing: border-box;
border-radius: rem2(4px);
margin-bottom: rem2(8px);
display: flex;
justify-content: center;
padding: rem2(12px) rem2(16px);
border: rem2(1px) solid #bdbdbd;
color: #1976d2;
background-color: $White;

&:hover {
background-color: #eee;
}
}

.btn-img {
width: rem2(18px);
height: rem2(18px);
margin-right: rem2(8px);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

.google-play {
background-image: url('/images/templates/google-play.svg');
}

.apple-store {
background-image: url('/images/templates/apple-store.svg');
}

.nuget {
background-image: url('/images/templates/nuget.svg');
}

.figma {
background-image: url('/images/templates/figma.svg');
}

::deep a {
color: $bit-color-primary-main;
}
72 changes: 72 additions & 0 deletions ...es/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates02SamplesPage.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
@page "/templates/samples"
@inherits AppComponentBase

<PageOutlet Url="templates/samples"
Title="Samples - Templates"
Description="samples of the project templates of the bit platform" />

<div class="page-container">
<BitTypography Variant="BitTypographyVariant.H3" Gutter>Boilerplate Samples</BitTypography>

<BitTypography Variant="BitTypographyVariant.Subtitle1">
We published a few apps using our own bit Boilerplate project template in different platforms.
<br />
Two distinct samples that further explain the features in action are included in the project template:
</BitTypography>

<br />
<br />
<br />

<BitTypography Variant="BitTypographyVariant.H4" Gutter>AdminPanel sample</BitTypography>
<div class="page-flex-container">
<div class="page-content-container">
<div class="image-container">
<img class="template-img" src="/images/templates/admin/adminpanel.webp" alt="AdminPanel sample" />
<a class="demo-btn-shadow" href="@Urls.AdminPanelMultiLingual" target="_blank">
<div class="demo-btn">Demo</div>
</a>
</div>
<BitTypography Variant="BitTypographyVariant.Body1">
The AdminPanel sample is a project powered by bit Boilerplate that includes all the necessary parts to create a fully-featured cross-platform admin/management website/app.
</BitTypography>
</div>

<div class="page-content-container">
<a class="primary-btn" href="@Urls.AdminPanelMultiLingual" target="_blank" title="SPA">SPA demo</a>
<a class="secondary-btn" href="@Urls.AdminPanelGooglePlay" target="_blank" title="Google Play"><span class="btn-img google-play"></span>Android</a>
<a class="secondary-btn" href="@Urls.AdminPanelAppleStore" target="_blank" title="Apple Store"><span class="btn-img apple-store"></span>Apple Store</a>
<a class="secondary-btn" href="@Urls.BoilerplateNuget" target="_blank" title="Nuget"><span class="btn-img nuget"></span>Nuget</a>
<a class="secondary-btn" href="@Urls.AdminPanelFigma" target="_blank" title="Figma"><span class="btn-img figma"></span>Figma</a>
</div>
</div>

<br />
<br />
<br />

<BitTypography Variant="BitTypographyVariant.H4" Gutter>Todo sample</BitTypography>
<div class="page-flex-container">
<div class="page-content-container">
<div class="image-container">
<img class="template-img" src="/images/templates/todo/todotemplate.webp" alt="Todo sample" />
<a class="demo-btn-shadow" href="@Urls.TodoTemplatePwaPrerendered" target="_blank">
<div class="demo-btn">Demo</div>
</a>
</div>
<BitTypography Variant="BitTypographyVariant.Body1">
The Todo sample is a project powered by Boilerplate that includes work packages and actions that you can apply to various cross-platform projects.
</BitTypography>
</div>

<div class="page-content-container">
<a class="primary-btn" href="@Urls.TodoTemplatePwaPrerendered" target="_blank" title="Prerendered PWA demo">Prerendered PWA</a>
<a class="secondary-btn" href="@Urls.TodoTemplateGooglePlay" target="_blank" title="Google Play"><i class="btn-img google-play" />Android</a>
<a class="secondary-btn" href="@Urls.TodoTemplateAppleStore" target="_blank" title="Apple Store"><span class="btn-img apple-store"></span>Apple Store</a>
<a class="secondary-btn" href="@Urls.BoilerplateNuget" target="_blank" title="NuGet"><i class="btn-img nuget" />NuGet</a>
<a class="secondary-btn" href="@Urls.TodoTemplateFigma" target="_blank" title="Figma"><i class="btn-img figma" />Figma</a>
</div>
</div>
</div>

<NavigationButtons Prev="Overview" PrevUrl="/templates/overview" Next="Development prerequisites" NextUrl="/templates/development-prerequisites" />
Loading

0 comments on commit 196eeb8

Please sign in to comment.