Content Websites
In its simplest form #Script is just plain HTML marked up with variable place holders, coupled with partials just being HTML pages themselves and the intuitive Cascading Layout Selection and using #Script becomes a natural solution for building complete websites without any code.
The flexibility of #Script allows for several different solutions for generating websites:
Website Sub Directory
A lightweight solution that can be embedded in any existing ASP.NET or ASP.NET Core Web Application is to embed and maintain an entire Website in a stand-alone sub directory. To showcase an example we've ported the content in the .NET Core Razor Rockstars into the /usecases/rockstar-files sub directory with the entire website viewable from:
/rockstar-files
Porting an existing Razor Website
Porting an existing Razor Website is fairly straight-forward, to port Razor Rockstars we needed to rename all .cshtml files back to .html and replace all their C# code. Using /cobain page as an example we needed to replace:
@{
Layout = "DeadLayout";
ViewBag.Title = "Kurt Cobain";
}
To use the equivalent page metadata:
<!--
title: Kurt Cobain
-->
You won't need to specify a custom layout as #Script Pages will automatically select the closest layout from the page at: /rockstar-files/dead/_layout.html. You'll also no longer need to maintain your Layout pages and partials in /Views/Shared separate from your views as they all get to all live cohesively in the same logical folder structure.
The declarative {{ page }} is used to embed a page in a layout instead of the imperative @RenderBody(). Likewise the syntax for partials changes to {{ "menu-alive" |> partial }} from @Html.Partial("MenuAlive"). #Script Pages also alleviates the need for bespoke partials like @Html.PartialMarkdown("Content") as it can instead leverage the flexibility of chaining existing filters to achieve the same result like {{ "content.md" |> includeFile |> markdown }}.
To get a feel for what an equivalent Razor Website looks like compared to #Script Pages checkout:
type | before | after |
Layout | /Views/Shared/DeadLayout.cshtml | /dead/_layout.html |
Partial | /Views/Shared/MenuAlive.cshtml | /menu-alive.html |
Page | /alive/vedder/default.cshtml | /alive/vedder/index.html |
Embedding Remote Content
A useful alternative to embedding static file content in pages is to source the content from a external url. Using the includeUrlWithCache method this is easy to do with great performance where you can embed remote url content, cache it for 1 minute and convert from markdown with:
{{ url |> includeUrlWithCache |> markdown }}
As seen in /grohl-url/index.html which is viewable at: