Page Title Format

[Foxtrek64]

Hello,

I have a few pages where the formatting of the name is important (stylized product names). I am building a navigational sidebar which needs to use these stylized names.

The sidebar is held in a partial which is rendered next to the main content as so:

<div class="is-container">
    <div class="main-sidebar">
        <partial name="_projectsSidebar" />
    </div>
    <div class="main-content">
        <div class="box">
            @RenderBody()
        </div>
    </div>
</div>

Here is the code for the sidebar. Following is how the entry for the currently selected page renders:

<div class="box is-hidden-mobile">
    <h3>Forms</h3>
    <nav>
        <ul>
            <li>
                <a href="@indexLink">Projects</a>
            </li>
            @foreach (IDocument document in OutputPages.GetChildrenOf(contactRoot).OrderBy(x => x.GetTitle()))
            {
                // var title = document.GetString(Constants.Title) ?? document.GetTitle();
                var title = @ViewData[Constants.Title];
                <li>@Html.DocumentLink(document)</li>
                <ul>
                    <li>ViewData[Title]: @title</li>
                    <li>document.GetString(Keys.Title): @document.GetString(Keys.Title)</li>
                    <li>document.Source.GetTitle(): @document.Source.GetTitle()</li>
                </ul>
            } 
        </ul>
    </nav>
</div>

Collecting the title from ViewData[Title] displays the correctly stylized title. However, because the ViewData store is context-dependent, this means that the tiles are the same for all of the entries in the sidebar.

Am I able to store this stylized title information in an alternate location, such as in front matter or in a sidecar? The pages in question are all razor pages, so I'm not sure if I'm able to manipulate front matter directly in the initialization block for the page.

Here's what my current setup for the RavenRock RP page looks like, in case it helps:

@{
    ViewData[Constants.Title] = "RavenRock RP";
    ViewData[Constants.OpenGraphTitle] = ViewData[Constants.Title];
    ViewData[Constants.OpenGraphDescription] = "Free community roleplay project based in Minecraft.";
    Layout = "_ProjectsLayout";
}

<h1>RavenRock RP</h1>

[daveaglick]

The short answer is "yes" :)

I know you've been using Wyam/Statiq for a while, so you probably already know some/most of this, but I'll start from the basics for completion and in case anyone else stumbles here...

ViewData is essentially a per-page dictionary that ASP.NET and Razor maintain for you. In a standard ASP.NET server-style application, you can set stuff in ViewData through a controller or action, middleware, etc. and it's available to the view. But as you noted, the ViewData is specific to a particular "rendering" of a view and not actually tied to the more general concept of that Razor file or page. In a server environment this makes sense given that a request is only ever going to render a particular view - for most intents, the other views don't even really exist for a server-style request rendering.

In Statiq the document itself is essentially the same thing. Statiq continues to provide the ViewData because it's baked into the ASP.NET base Razor page type and it's nice for backwards compatibility. But since Statiq supports other modules and view engines, and all the views exist essentially all at once, a more general-purpose and persistent data storage dictionary was needed. Every document is also a dictionary. And you can set the values in that dictionary using frontmatter, sidecar files, other modules, etc. There's actually a ton of ways to change the metadata for a document, so for simplicity we'll stick to frontmatter here.

So now the question is: what's the equivalent of:

@{
    ViewData[Constants.Title] = "RavenRock RP";
    ViewData[Constants.OpenGraphTitle] = ViewData[Constants.Title];
    ViewData[Constants.OpenGraphDescription] = "Free community roleplay project based in Minecraft.";
    Layout = "_ProjectsLayout";
}

<h1>RavenRock RP</h1>

but that gets evaluated for every view (I.e. every .cshtml file) and will be available when generating the navigation. Frontmatter to the rescue:

Title: RavenRock RP
OpenGraphTitle: => GetString("Title")
OpenGraphDescription: Free community roleplay project based in Minecraft.
---
@{
    Layout = "_ProjectsLayout";
}

<h1>RavenRock RP</h1>

Notice that I'm still using a code block to specify the layout (though that could also be moved out to a common _ViewStart.cshtml file if it's the same for all the .cshtml files in a folder).

Statiq will parse everything above the ---, add it to the metadata for that document, and make it available during Razor rendering for each document. The => is a special kind of frontmatter called a computed value - that lets us use one frontmatter value in another.

Then when you're iterating over documents, you can access those values like this: document.GetString(Constants.Title) (or document.GetString("Title")). Note that because the key "Title" is generally used by Statiq, you might need to use a different metadata key if you want to define a kind of title that's a little different. Or you can set and use the "Title" key directly if you don't need two different types of page titles.

[Foxtrek64]

I didn't think you could set frontmatter like that in a .cshtml file. That's good to know.

While I'm here, I might as well ask about this-
In my Projects Layout file, I have this:

@{
    // Sets the value of the ViewData items only if they are null.
    // cshtml pages will set these values directly, but markdown docs
    // will use Front Matter, meaning the view data item will be null.
    // If they are null, pull the value from the document's Front Matter.
    ViewData[Constants.Title] ??= Document.GetTitle();
    ViewData[Constants.OpenGraphTitle] ??= ViewData[Constants.Title];
    ViewData[Constants.OpenGraphDescription] ??= Document.GetString(Constants.OpenGraphDescription);
    ViewData[Constants.PoliciesEnableHeaderLink] ??= Document.GetBool(Constants.PoliciesEnableHeaderLink);
    Layout = "_MasterLayout";
}

I don't remember if I did this out of necessity or for my own sanity, but does setting frontmatter also set viewdata or do I need to do that manually here in the layout document? I use the viewdata more traditionally further up the chain (in my master layout), but I feel like I could probably also get rid of that and simply pull Document.GetTitle() instead of referencing ViewData.