Post.cshtml

@page "/posts/{slug}"
@model PostModel
@inject MarkdownBlog Blog
@inject AppConfig AppConfig

@implements IRenderStatic<PostModel>
@functions {
    public List<PostModel> GetStaticProps(RenderContext ctx)
    {
        var blog = ctx.Resolve<MarkdownBlog>();
        return blog.VisiblePosts.Map(doc => new PostModel { Slug = doc.Slug });
    }
}

@{
    var doc = Blog.FindPostBySlug(Model.Slug!);
    if (doc == null)
    {
        Response.Redirect("/404");
        return;
    }
    if (doc.Layout != null) 
        Layout = doc.Layout == "none"
            ? null
            : doc.Layout;
    ViewData["Title"] = doc.Title;

    var author = Blog.Authors.FirstOrDefault(x => x.Name == doc.Author);
    var image = doc.Image ?? Blog.FallbackSplashUrl;

    var docMjs = Blog.VirtualFiles.GetFile($"/wwwroot/posts/{doc.Slug}.mjs");
    var docCss = Blog.VirtualFiles.GetFile($"/wwwroot/posts/{doc.Slug}.css");
}

@section head {
    @await Html.PartialAsync("MetaHeaders", new Shared.MetaHeaders(doc) {
        CanonicalUrl = AppConfig.PublicBaseUrl.CombineWith("posts", doc.Slug),
        Author = author,
        Image = image, 
    })
}

<link rel="stylesheet" href="css/typography.css">
<link rel="stylesheet" href="css/lite-yt-embed.css">

@{
    if (docCss != null)
    {
        <link rel="stylesheet" href="posts/@(doc.Slug).css">
    }

    void AuthorLinks()
    {
        if (author?.GitHubUrl != null || author?.TwitterUrl != null || author?.ThreadsUrl != null || author?.MastodonUrl != null)
        {
            <ul role="list" class="flex">
                @if (author.TwitterUrl != null)
                {
                    <li>
                        <a title="Follow on Twitter" class="mr-1 group flex text-sm font-medium text-zinc-800 transition hover:text-indigo-500 dark:text-zinc-200 dark:hover:text-indigo-500" href="@author.TwitterUrl">
                            <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-zinc-500 fill-zinc-500 transition group-hover:fill-indigo-500">
                                <path d="M20.055 7.983c.011.174.011.347.011.523 0 5.338-3.92 11.494-11.09 11.494v-.003A10.755 10.755 0 0 1 3 18.186c.308.038.618.057.928.058a7.655 7.655 0 0 0 4.841-1.733c-1.668-.032-3.13-1.16-3.642-2.805a3.753 3.753 0 0 0 1.76-.07C5.07 13.256 3.76 11.6 3.76 9.676v-.05a3.77 3.77 0 0 0 1.77.505C3.816 8.945 3.288 6.583 4.322 4.737c1.98 2.524 4.9 4.058 8.034 4.22a4.137 4.137 0 0 1 1.128-3.86A3.807 3.807 0 0 1 19 5.274a7.657 7.657 0 0 0 2.475-.98c-.29.934-.9 1.729-1.713 2.233A7.54 7.54 0 0 0 22 5.89a8.084 8.084 0 0 1-1.945 2.093Z"></path>
                            </svg>
                        </a>
                    </li>
                }
                @if (author.ThreadsUrl != null)
                {
                    <li>
                        <a title="Follow on threads.net" class="mr-1 group flex text-sm font-medium text-zinc-800 transition hover:text-indigo-500 dark:text-zinc-200 dark:hover:text-indigo-500" href="@author.ThreadsUrl">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-none text-zinc-500 fill-zinc-500 transition group-hover:fill-indigo-500" width="24" height="24" viewBox="0 0 24 24">
                                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7.5c-1.333-3-3.667-4.5-7-4.5c-5 0-8 2.5-8 9s3.5 9 8 9s7-3 7-5s-1-5-7-5c-2.5 0-3 1.25-3 2.5C9 15 10 16 11.5 16c2.5 0 3.5-1.5 3.5-5s-2-4-3-4s-1.833.333-2.5 1"/>
                            </svg>
                        </a>
                    </li>
                }
                @if (author.MastodonUrl != null)
                {
                    <li>
                        <a title="Follow on Mastodon" class="mr-1 group flex text-sm font-medium text-zinc-800 transition hover:text-indigo-500 dark:text-zinc-200 dark:hover:text-indigo-500" href="@author.MastodonUrl">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-none text-zinc-500 fill-zinc-500 transition group-hover:fill-indigo-500" width="24" height="24" viewBox="0 0 24 24">
                                <path fill="currentColor" d="M20.94 14c-.28 1.41-2.44 2.96-4.97 3.26c-1.31.15-2.6.3-3.97.24c-2.25-.11-4-.54-4-.54v.62c.32 2.22 2.22 2.35 4.03 2.42c1.82.05 3.44-.46 3.44-.46l.08 1.65s-1.28.68-3.55.81c-1.25.07-2.81-.03-4.62-.5c-3.92-1.05-4.6-5.24-4.7-9.5l-.01-3.43c0-4.34 2.83-5.61 2.83-5.61C6.95 2.3 9.41 2 11.97 2h.06c2.56 0 5.02.3 6.47.96c0 0 2.83 1.27 2.83 5.61c0 0 .04 3.21-.39 5.43M18 8.91c0-1.08-.3-1.91-.85-2.56c-.56-.63-1.3-.96-2.23-.96c-1.06 0-1.87.41-2.42 1.23l-.5.88l-.5-.88c-.56-.82-1.36-1.23-2.43-1.23c-.92 0-1.66.33-2.23.96C6.29 7 6 7.83 6 8.91v5.26h2.1V9.06c0-1.06.45-1.62 1.36-1.62c1 0 1.5.65 1.5 1.93v2.79h2.07V9.37c0-1.28.5-1.93 1.51-1.93c.9 0 1.35.56 1.35 1.62v5.11H18V8.91Z"/>
                            </svg>
                        </a>
                    </li>
                }
                @if (author.GitHubUrl != null)
                {
                    <li>
                        <a title="Follow on GitHub" class="mr-1 group flex text-sm font-medium text-zinc-800 transition hover:text-indigo-500 dark:text-zinc-200 dark:hover:text-indigo-500" href="@author.GitHubUrl">
                            <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none text-zinc-500 fill-zinc-500 transition group-hover:fill-indigo-500">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"></path>
                            </svg>
                        </a>
                    </li>
                }
                @if (author.Email != null)
                {
                    <li>
                        <a title="Email @author.Name" href="mailto:@author.Email" class="mr-1 group flex text-sm font-medium text-zinc-800 transition hover:text-indigo-500 dark:text-zinc-200 dark:hover:text-indigo-500">
                            <svg class="h-6 w-6 flex-none text-zinc-500 fill-zinc-500 transition group-hover:fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.413-.588T2 18V6q0-.825.588-1.413T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.588 1.413T20 20H4Zm8-7L4 8v10h16V8l-8 5Zm0-2l8-5H4l8 5ZM4 8V6v12V8Z"/></svg>
                        </a>
                    </li>
                }
            </ul>
        } 
    }
}
<div class="container px-5 mb-32 mx-auto">
    @if (!string.IsNullOrEmpty(doc.Title))
    {
        var authorHref = Blog.GetAuthorLink(author?.Name);
        var authorProfileUrl = Blog.GetAuthorProfileUrl(doc.Author);
        <article class="mt-20">
            <h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
                @doc.Title
            </h1>
            <div class="flex justify-between">
                <div class="md:mb-12 flex items-center">
                    @if (authorHref != null)
                    {
                        <a href="@authorHref"><img class="w-12 h-12 rounded-full mr-4 text-cyan-600" src="@authorProfileUrl"></a>
                    }
                    else
                    {
                        <img class="w-12 h-12 rounded-full mr-4 text-cyan-600" src="@authorProfileUrl">
                    }
                    <div class="flex flex-col">
                        @if (authorHref != null)
                        {
                            <a class="text-xl font-semibold hover:underline" href="@authorHref">@author!.Name</a>
                        }
                        else if (author != null)
                        {
                            <span class="text-xl font-semibold">@author.Name</span>
                        }
                        @{ AuthorLinks(); }
                    </div>
                </div>
                <div class="mb-4 max-w-sm" data-mail="JoinMailingList" data-props="{ submitLabel:'Join our newsletter' }"></div>
            </div>
            <div class="mb-8 md:mb-16 sm:mx-0">
                <div class="sm:mx-0">
                    <img src="@image" alt="@doc.Title Background" class="shadow-small">
                </div>
            </div>
            <div class="flex max-w-7xl mx-auto justify-between" style="width:100%;">
                <div>
                    <div class="mb-4 flex flex-wrap">
                        @foreach (var tag in doc.Tags)
                        {
                            <a href="@Blog.GetTagLink(tag)" class="mr-2 text-xs leading-5 font-semibold bg-slate-400/10 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:highlight-white/5">@tag</a>
                        }
                    </div>
                    @if (doc.Date != null)
                    {
                        <div class="max-w-3xl mx-auto">
                            <div class="mb-6 text-lg text-gray-500">
                                <time datetime="@Blog.GetDateTimestamp(doc.Date)">@Blog.GetDateLabel(doc.Date)</time>
                                <span aria-hidden="true">&middot;</span>
                                <span>@Blog.MinutesToRead(doc.WordCount) min read</span>
                            </div>
                        </div>
                    }
                </div>
                <div class="flex flex-grow-0">
                    <div data-post="PostVotes"></div>
                    <a href="javascript:;" onclick="document.location.hash='comments'" class="cursor-pointer" title="Jump to comments">
                        <svg class="ml-4 text-gray-700 mt-1 w-7 h-7" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M3 11.2c0 .1 0 .1 0 0c0 .1 0 .1 0 0zM8.3 1C3.9 1 0 3.6 0 6.6c0 2 1.1 3.7 3 4.7s0 .1 0 .1c-.1 1.3-.9 1.7-.9 1.7L.3 14h2c2.5 0 4.3-1.1 5.1-1.9h.8c4.3 0 7.8-2.5 7.8-5.6S12.6 1 8.3 1zm-.1 10.1H7l-.2.2c-.5.5-1.6 1.4-3.3 1.7c.3-.5.5-1.1.5-2v-.3l-.3-.1C1.9 9.7 1 8.3 1 6.6C1 4.2 4.5 2 8.3 2C12 2 15 4 15 6.6c0 2.4-3.1 4.5-6.8 4.5z"/></svg>
                    </a>
                </div>
            </div>
            <div class="max-w-3xl mx-auto">
                <div id="post" class="prose lg:prose-xl max-w-none mb-32">
                    @Html.Raw(Blog.SanitizeVueTemplate(doc.Preview))
                </div>
            </div>
        </article>
    }
    else
    {
        <h2 class="py-8 text-center text-3xl font-bold text-gray-900 dark:text-gray-100 sm:text-4xl">
            Post was not found
        </h2>
    }
</div>

<div id="comments" data-post="PostComments" class="my-48"></div>

@{
    var authorPosts = Blog.VisiblePosts.Where(x => x.Author == doc.Author && x.Slug != doc.Slug)
        .OrderByDescending(x => x.Date)
        .Take(4)
        .ToList();
    if (author != null && authorPosts.Count > 0)
    {
        var authorHref = Blog.GetAuthorLink(author?.Name);
        var authorProfileUrl = Blog.GetAuthorProfileUrl(doc.Author);

        <div class="bg-gray-50 py-20">
            <div class="max-w-3xl mx-auto">
                <div class="flex justify-between">
                    <div>
                        @if (authorHref != null)
                        {
                            <a href="@authorHref"><img class="w-20 h-20 rounded-full text-cyan-600" src="@authorProfileUrl"></a>
                        }
                        else
                        {
                            <img class="w-20 h-20 rounded-full text-cyan-600" src="@authorProfileUrl">
                        }

                        <div class="mt-2 font-medium text-2xl">
                            Written by @doc.Author
                        </div>
                        <div class="text-gray-600">
                            @author.Bio
                        </div>
                    </div>
                    <div class="flex items-end">
                        @{ AuthorLinks(); }
                    </div>
                </div>

                <div class="mt-4 border-t">
                    <div class="py-8 text-lg text-gray-700 font-medium">
                        More from @author.Name
                    </div>
                    <div class="grid grid-cols-2 gap-8">
                        @foreach (var post in authorPosts)
                        {
                            <div>
                                <div class="flex flex-col overflow-hidden">
                                    <div class="flex-shrink-0">
                                        <a href="@Blog.GetPostLink(post)">
                                            <img class="h-48 w-full object-cover" src="@Blog.GetSplashImage(post)" alt="">
                                        </a>
                                    </div>
                                    <div class="flex flex-1 flex-col justify-between bg-white dark:bg-black p-6">
                                        <div class="flex-1">
                                            <p class="text-sm font-medium text-indigo-600 dark:text-indigo-300">
                                                Article
                                            </p>
                                            <a href="@Blog.GetPostLink(post)" class="mt-2 block">
                                                <p class="text-xl font-semibold text-gray-900 dark:text-gray-50 whitespace-nowrap overflow-hidden text-ellipsis" title="@post.Title">
                                                    @post.Title
                                                </p>
                                                <p class="mt-3 text-base text-gray-500">@post.Summary</p>
                                            </a>
                                        </div>
                                        <div class="mt-6 flex items-center">
                                            <div class="flex-shrink-0">
                                                <a href="">
                                                    <span class="sr-only">@post.Author</span>
                                                    <img class="h-10 w-10 rounded-full" src="@Blog.GetAuthorProfileUrl(post.Author)" alt="@post.Title background">
                                                </a>
                                            </div>
                                            <div class="ml-3">
                                                <p class="text-sm font-medium text-gray-900">
                                                    @if (authorHref != null)
                                                    {
                                                        <a href="@Blog.GetAuthorLink(post.Author!)" class="hover:underline">@post.Author</a>
                                                    }
                                                    else
                                                    {
                                                        <span>@post.Author</span>
                                                    }
                                                </p>
                                                <div class="flex space-x-1 text-sm text-gray-500">
                                                    <time datetime="@Blog.GetDateTimestamp(post.Date)">@Blog.GetDateLabel(post.Date)</time>
                                                    <span aria-hidden="true">&middot;</span>
                                                    <span>@Blog.MinutesToRead(post.WordCount) min read</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        }                        
                    </div>
                </div>
            </div>
        </div>
    }
}

<script type="module">
import { init } from "app.mjs"
init()
</script>

<link rel="stylesheet" href="css/highlight.css">
<script src="lib/js/highlight.js"></script>
<script>hljs.highlightAll()</script>
<script src="lib/js/lite-yt-embed.js"></script>
<script src="mjs/docs.mjs" type="module"></script>

<script type="module">
import { mount } from "app.mjs"
@if (docMjs != null)
{
    <text>
        import App from "./posts/@(doc.Slug).mjs" 
    </text>
}
else
{
    <text>
    const App = {
        setup() {
            function nav(url) {
                window.open(url)
            }
            return { nav }
        }
    }
    </text>
}
mount('#post', App)
</script>