readysite / website / internal / content / seed / templates / blog-view.html
3.8 KB
blog-view.html
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    {{partial "head"}}
    {{with $post := document (.query.Get "id")}}
    <title>{{$post.GetString "title"}} - {{site_name}}</title>
    {{else}}
    <title>Post Not Found - {{site_name}}</title>
    {{end}}
</head>
<body class="min-h-screen bg-base-200 flex flex-col">
    {{partial "header"}}
    <main class="container mx-auto p-8 flex-1">
        {{with $post := document (.query.Get "id")}}
        <article class="max-w-3xl mx-auto">
            <div class="mb-8">
                <a href="/blog" class="btn btn-ghost btn-sm gap-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                    Back to Blog
                </a>
            </div>

            {{if $post.GetBool "featured"}}
            <div class="badge badge-primary mb-4">Featured</div>
            {{end}}

            <h1 class="text-4xl font-bold mb-4">{{$post.GetString "title"}}</h1>

            <div class="flex items-center gap-4 text-base-content/60 mb-8">
                <span class="font-medium">{{$post.GetString "author"}}</span>
                {{with $t := $post.GetTime "publishedAt"}}
                {{if not $t.IsZero}}
                <span>&middot;</span>
                <time>{{$t.Format "January 2, 2006"}}</time>
                {{end}}
                {{end}}
            </div>

            {{if $post.GetString "excerpt"}}
            <p class="text-xl text-base-content/80 mb-8 border-l-4 border-primary pl-4 italic">
                {{$post.GetString "excerpt"}}
            </p>
            {{end}}

            <div class="prose prose-lg max-w-none">
                {{$post.GetString "content"}}
            </div>

            <div class="divider my-12"></div>

            <div class="flex justify-between items-center">
                <a href="/blog" class="btn btn-ghost">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                    All Posts
                </a>
                {{if $.current_user}}
                <a href="/blog-edit?id={{$post.ID}}" class="btn btn-outline">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                    Edit Post
                </a>
                {{end}}
            </div>
        </article>
        {{else}}
        <div class="flex flex-col items-center justify-center py-16 text-center">
            <div class="text-6xl mb-4 opacity-20">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <h3 class="text-xl font-semibold mb-2">Post Not Found</h3>
            <p class="text-base-content/60 mb-6">The post you're looking for doesn't exist or has been removed.</p>
            <a href="/blog" class="btn btn-primary">Back to Blog</a>
        </div>
        {{end}}
    </main>
    {{partial "footer"}}
</body>
</html>
← Back