Question: What Libraries are you using for your docs page?

[eric-wilson]

I know this is a bit off topic, but I really like your docs page (https://piranhacms.org/docs/) and I was wondering if you could share the code you use for the UI. A code sample: html, css/scss and js libraries, etc,

I understand you use statica for the actual content but I'd like to implement the same bootstrap nav on the side and the cool menu popup that loads based on the media size. Also getting the contributor information would be cool as well.

Thx!

[tidyui]

Hi there! The side navigation is custom build with bootstrap.

Subnav.cshtml

<div class="row">
    <div class="col-lg-3 pt-4 sub-nav">
        <nav class="navbar">
            <button class="btn btn-sm btn-light d-lg-none mb-3 subnav-toggle"><i class="fas fa-times"></i> Close</button>
            <label class="font-weight-bold">Version</label>
            <select id="version" class="form-control form-control-sm mb-3">
                @foreach (var s in structures)
                {
                    if (s.Id == Model.StaticId)
                    {
                        <option value="/docs/@s.Id@(Model.Slug != null ? $"/{ Model.Slug }" : "")" selected="true">@s.Title</option>
                    }
                    else
                    {
                        <option value="/docs/@s.Id@(Model.Slug != null ? $"/{ Model.Slug }" : "")">@s.Title</option>
                    }
                }
            </select>
            <ul class="navbar-nav">
                @Html.DisplayFor(m => Model.StaticSitemap.Items)
            </ul>
        </nav>
    </div>
    <div class="blocker"></div>
    <div class="col-lg-9 pt-4">
        // Main content of the page
    </div>
</div>

With the following specific styles:

subnav.scss

.sub-nav {
    background: #fff;
    width: 280px;
    height: 100%;
    border-right: solid 1px #eee;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: .5rem 0 .5rem rgba(0,0,0,.02);
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform ease-in-out .2s;
    overflow-y: auto;

    &.active {
        transform: translateX(0);

        +.blocker {
            background: rgba(0,0,0,.5);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1040;
        }
    }

    .navbar {
        padding: 0 0 4rem;
        font-size: .9rem;
        font-weight: 400;

        .navbar-nav {
            width: 100%;

            >.nav-item {
                >.nav-link {
                    border-bottom: solid 1px #eee;
                }

                &.expanded {
                    >.navbar-nav {
                        display: block;
                    }
                }
            }

            .navbar-nav {
                display: none;

                .nav-item {
                    .nav-link {
                        padding-left: 1.5rem;
                    }

                    .nav-item {
                        .nav-link {
                            padding-left: 2.5rem;
                        }
                    }
                }
            }
        }

        .nav-item {
            &.active {
                >.nav-link {
                    color: $color_primary;
                    font-weight: 600;
                    position: relative;

                    &:hover {
                        background: #fff;
                    }
                }
            }

            .folder-toggle {
                color: #999;
                display: none;
                float: right;
                margin-top: 8px;

                &:hover {
                    text-decoration: none;
                }
            }

            &.folder {
                &:not(.expanded)
                {
                    >.expand {
                        display: block;
                    }
                }

                &.expanded {
                    >.collapse {
                        display: block;
                    }
                }
            }
        }

        .nav-link {
            color: $color_text;
            padding-left: .5rem;
            transition: background-color ease-in-out .15s;

            &:hover {
                background: $color_light;
                color: darken($color_text, 10%);
            }
        }
    }
}

@media (min-width: 992px) {
    .sub-nav {
        border-right: none;
        position: initial;
        box-shadow: none;
        z-index: initial;
        transform: translateX(0);
    }
}

Then we have some simple javascript handling open/close on items and the menu.

$(document).on("click", ".folder-toggle", function () {
    $(this).parent().toggleClass("expanded");

    return false;
});

$(document).on("click", ".subnav-toggle, .blocker", function () {
    $(".sub-nav").toggleClass("active");
});

The code for getting contribution info calls the GitHub api based on the repo and current file.

function getContributors(filename) {
    var path = filename.substring(filename.indexOf("src"));
    var url = "https://api.github.com/repos/piranhacms/piranha.core.docs/commits?path=" + path;

    $.getJSON(url, function(data) {
        var distinct = [];
        var result = [];
        $.each(data, function(index, item) {
            if (item.author) {
                if (!distinct.includes(item.author.html_url)) {
                    distinct.push(item.author.html_url);
                    result.push({
                        name: item.author.login,
                        avatar: item.author.avatar_url,
                        url: item.author.html_url
                    });
                }
            }
        });
        var div = $("<div id='contributors' class='alert alert-light' />");
        div.append("<strong>" + result.length + "</strong> contributors");
        $.each(result, function(index, item) {
            div.append('<a href="' + item.url + '" target="_blank"><img src="' + item.avatar + '" alt="' + item.name + '" title="' + item.name + '"></a>')
        });

        $(".docs h1").after(div);
    })
    .done(function() { })
    .fail(function() { alert("chained error"); })
    .always(function() { });
}

Hope this gets you going in the right direction!

Best regards

[eric-wilson]

That's awesome, thanks!!

[tidyui]

Also forgot to mention that we use prism.js for syntax highlighting the code examples. https://prismjs.com

Regards

[kttary]

From Subnav.cshtml, I believe structures and slug come from page model. I'm following this statica issue but also don't have idea what is the PageModel in Docs.cshtml.cs

It will be helpful if you can share the simple code of pagemodel.

Best Regard

[tidyui]

@kttary The page model is extremely basic.

DocsPage.cs

[PageType(Title = "Docs Page")]
[PageTypeRoute(Title = "Default", Route = "/docs")]
public class DocsPage : Page<ContentPage>
{
}

The .cshtml razor page then has a wildcard route that accepts everything after /docs, i.e

Docs.cshtml

@page "/docs/{**slug}"
@model DocsPageModel

[kttary]

I follow your post with small modification but still failed.

SecureHelp.cs

using Piranha.AttributeBuilder;
using Piranha.Models;

namespace website.Models
{
    [PageType(Title = "Secure help")]
    [ContentTypeRoute(Title = "Secure help", Route = "/help")]
    public class SecureHelp : Page<SecureHelp>
    {
    }
}

SecureHelp.cshtml

@page "/help/{**slug}"
@model SecureHelp

@{
    ViewData["Title"] = !string.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Title;
}

@section head {
    @WebApp.MetaTags(Model)
}

<main>
    @foreach (var block in Model.Blocks)
    {
        <div class="block @block.CssName()">
            <div class="container">
                @Html.DisplayFor(m => block, block.GetType().Name)
            </div>
        </div>
    }
</main>

It throw NullReferenceException: Object reference not set to an instance of an object.

AspNetCore._Views_Cms_SecureHelp.get_Model()
AspNetCore._Views_Cms_SecureHelp.ExecuteAsync() in SecureHelp.cshtml
+
ViewData["Title"] = !string.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Title;
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, bool invokeViewStarts)
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)

But if i remove @page "/help/{**slug}", the page rendered normally. I'm using piranha 10.1.0