ghost-theme-starter-kit/post.hbs at main · frontendweb3/ghost-theme-starter-kit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
{{!< default}}

{{#post}}

<article class="pt-16 pb-24 px-4 md:px-8 max-w-7xl mx-auto w-full">
    <header class="max-w-3xl mx-auto text-center mb-12">
        {{#if primary_tag}}
        {{#primary_tag}}
        <a href="{{url}}"
            class="inline-block text-indigo-600 dark:text-indigo-400 px-3 py-1 bg-indigo-50 dark:bg-indigo-900/30 text-sm font-semibold tracking-wide uppercase mb-6 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition-colors">
            # {{name}}
        </a>
        {{/primary_tag}}
        {{/if}}

        <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight mb-8">
            {{title}}
        </h1>

        <div class="flex items-center mx-auto justify-center gap-4  font-medium">
            <div class="flex items-center gap-3 text-left">
                {{#foreach authors}}
                <div class="group flex flex-row items-center gap-3">
                    {{#if profile_image}}
                    <img src="{{img_url profile_image size=" xs"}}" alt="{{name}}"
                        class="w-10 h-10 rounded-full border border-border object-cover" />
                    {{else}}
                    <div
                        class="w-11 h-11 cursor-none rounded-full p-4 border border-border bg-secondary flex items-center justify-center text-xs font-medium text-secondary-foreground">
                        {{name}}
                    </div>
                    {{/if}}
                    <div class="flex flex-col text-xs p-2 gap-1">
                        <a href="{{url}}" class="font-semibold">{{name}}</a>
                        <time datetime="{{date ../published_at format=" YYYY-MM-DD"}}"> {{date ../published_at format="DD MMMM YYYY"}}</time>
                    </div>
                </div>
                {{/foreach}}
            </div>
    </header>

    {{#if feature_image}}
    <div class="max-w-5xl mx-auto mb-16 rounded-3xl overflow-hidden shadow-2xl">
        <img class="w-full h-auto object-cover max-h-150" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url
            feature_image size="m" }} 600w, {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl"
            }} 2000w" sizes="(max-width: 1000px) 100vw, 1000px" src="{{img_url feature_image size=" l"}}"
            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" />
    </div>
    {{/if}}

    <div
        class="prose prose-lg md:prose-xl prose-slate dark:prose-invert mx-auto max-w-3xl prose-pre:p-0 prose-headings:font-bold prose-a:text-indigo-600 dark:prose-a:text-indigo-400 hover:prose-a:text-indigo-500">
        {{content}}
    </div>

    {{!-- share --}}
    <section class="py-10 w-full">
        <div class="rounded-2xl bg-card p-6 md:p-8">
            <div class="flex flex-col gap-6 md:flex-row md:items-center justify-between">
                <div>
                    <h3 class="text-xl font-bold tracking-tight">Share this post</h3>
                    <p class="text-sm text-muted-foreground mt-1">Enjoyed it? Share it with your network.</p>
                </div>
                <div class="flex flex-wrap items-center gap-5">

                    <a href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute=" true"}}"
                        class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
                        target="_blank">Twitter</a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute=" true"}}"
                        class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
                        target="_blank">Facebook</a>
                    <a href="https://www.linkedin.com/sharing/share-offsite/?text={{encode title}} {{url absolute="
                        true"}}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
                        target="_blank">Linkedin</a>

                    <a href="#/share" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
                        {{> "components/icon" name="share2" id="share-icon" ariaLabel="Share icon"}}
                    </a>

                </div>
            </div>
        </div>
    </section>

    {{#if comments}}
    <div class="bg-card max-w-4xl mx-auto mb-20 p-20 rounded-2xl">
        {{comments}}
    </div>
    {{/if}}
</article>
{{/post}}