fastest/post.hbs at main · frontendweb3/fastest · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
{{!< default}}

{{#post}}

    <article class="prose-sm sm:prose-base lg:prose-lg dark:format-invert pt-8 pb-16 lg:pt-16 lg:pb-24 antialiased flex flex-col justify-between mx-auto">

        <section  class="prose prose-fastest mx-auto text-center flex flex-col w-full max-w-5xl">

            <time class="w-full font-extrabold text-xs xs:text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm 2xl:text-sm" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>

            <h1 class="not-prose animate-in fade-in slide-in-from-bottom-4 inline-block align-middle text-[clamp(2rem,5vw,4rem)] font-bold tracking-tight duration-700">
            {{title}}
        </h1>

        {{#if custom_excerpt}}
            <p class="lead animate-in fade-in slide-in-from-bottom-3 inline-block align-middle text-[clamp(1rem,2.5vw,1.8rem)] tracking-wide duration-400">
            {{custom_excerpt}}
        </p>
        {{else}}
        <p
            class="lead animate-in fade-in slide-in-from-bottom-3 inline-block align-middle text-[clamp(1rem,2vw,1.5rem)] tracking-wide duration-400">
            {{excerpt}}
        </p>
        {{/if}}

        {{#if authors}}

        <div class="flex  mt-10  not-prose items-center justify-center space-x-3">
            <div class="flex items-center space-x-6">

                {{#foreach authors}}

                <div class="flex items-center p-2 space-x-3">

                    {{#if profile_image}}
                    <img src="{{ img_url profile_image size="s"}}" alt="{{name}}"
                        class="hidden sm:block w-10 h-10 rounded-full " />
                    {{else}}
                    <div
                        class="rounded-full border border-gray-400 fill-white bg-gray-400 dark:fill-white dark:bg-gray-500 flex p-2 items-center justify-center">
                        {{> "components/icon" name="circle-user-round" class="size-6" ariaLabel="circle user icon"}}
                    </div>
                    {{/if}}
                    <div class="flex flex-row justify-between items-center">
                        <a href="{{url}}" rel="author" class="text-xl">{{name}}</a>
                    </div>
                </div>
                {{/foreach}}
            </div>
        </div>

        {{/if}}
        <div class="my-12 space-x-5">

            {{#foreach tags visibility="public"}}
            <a href="{{url}}"
                class="bg-purple-100 text-purple-800 text-xs font-medium no-underline hover:underline me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-purple-400 border border-purple-400">
                # {{name}}</a>
            {{/foreach}}

        </div>

    </section>

    {{!-- Feature Image --}}
    {{> featureImage}}

    {{!-- Content --}}
        <section class="prose prose-fastest w-full max-w-4xl prose-sm prose-pre:px-0 sm:prose-base lg:prose-lg mx-auto"> {{content}} </section>

    </article>

    {{!-- partials/comment --}}
    {{> comment}}


    {{!-- Show related posts --}}
    {{#get "posts" filter="authors:{{primary_author.slug}}+id:-{{id}}" limit="3" include="authors"}}

    {{!-- if posts is available then show it --}}
    {{#if posts}}

    <div class="mt-10 container mx-auto px-6 py-10 space-y-12 md:space-y-28 lg:py-12 lg:px-8 ">
        <h3 class="mt-5 mb-20 text-left text-xl font-bold lg:text-2xl"> More By {{../primary_author.name}}</h3>
        {{!-- loop all post --}}
        {{> "posts-loop" posts=posts layout=@custom.home_layout}}
    </div>

    {{/if}}

    {{/get}}


    {{/post}}


    {{!-- Download Highlight.js Scripts --}}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/typescript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/jsx.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/css.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.9.0/highlightjs-line-numbers.min.js"></script>

    {{!-- Highlight code and config the copy code button on code block --}}
        <script src="{{asset "dist/js/post.js"}}"></script>