logly/post.hbs at main · frontendweb3/logly · 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
{{!< default}}
{{#post}}

<article class="prose-sm prose-logly 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="not-prose w-full mb-12 max-w-5xl mx-auto">

        <div class="flex items-center justify-between gap-4 mb-8">
            <div class="flex flex-wrap md:flex-row text-xs font-bold list-disc items-center gap-4">
                {{#if primary_tag}}
                    <a href="{{primary_tag.url}}" class="flex gap-1 items-center uppercase"> {{> "components/icon" name="hash" class="hidden sm:inline" ariaLabel="hash icon"}} {{primary_tag.name}} </a>
                {{/if}}
                    <span class="hidden sm:inline uppercase">{{reading_time}} </span>
                    <span class="uppercase"> <span class="hidden sm:inline"> Published on </span> <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time> </span>
                {{#if authors}}
                <div class="flex items-center gap-1"> {{> "components/icon" name="circle-user-round" class="hidden sm:inline" ariaLabel="circle-user-round icon"}}
                    {{#foreach authors}}
                     <a class="items-center flex gap-0.5" href="{{url}}" title="{{name}}"> {{name}} </a>
                        {{#unless @last}}
                            {{> "components/icon" name="dot" ariaLabel="dot icon"}}
                         {{/unless}}
                    {{/foreach}}
                    </div>
                {{/if}}
            </div>
            <div class="flex flex-row items-center gap-2">

                <a href="#/share" aria="Share on social media" class="inline-flex justify-center items-center aspect-square whitespace-nowrap rounded-full p-2 text-sm font-medium tracking-wide transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed">
                    {{> "components/icon" name="share2" ariaLabel="share icon"}}
                </a>

                <button
                    x-data="{ copied: false }"
                    @click="navigator.clipboard.writeText('{{url absolute='true'}}'); copied = true; setTimeout(() => copied = false, 2000)"
                    aria-label="Copy link to clipboard"
                    title="Copy link to clipboard"
                    class="inline-flex justify-center items-center aspect-square whitespace-nowrap rounded-full p-2 text-sm font-medium tracking-wide transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed">
                    <span x-show="!copied">{{> "components/icon" name="copy" ariaLabel="copy icon"}}</span>
                    <span x-show="copied" style="display:none;">{{> "components/icon" name="copy-check" ariaLabel="copy check icon"}}</span>
                </button>
            </div>
        </div>

        <h1
            class="animate-in fade-in slide-in-from-bottom-4 text-[clamp(3.5rem,8vw,6rem)] tracking-tighter leading-tight duration-700 ">
            {{title}}
        </h1>

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

    </section>

    {{!-- content --}}
    <div aria-label="article content" class="prose prose-pre:px-0 prose-pre:py-0 prose-logly max-w-5xl prose-sm sm:prose-base lg:prose-lg mx-auto w-full">
        {{content}}
    </div>

    </article>

    {{!-- navigation Previous and Next Posts --}}

    <div class="container mx-auto px-4 mt-10 flex flex-row justify-between items-center" role="navigation"
        aria-label="Pagination">
        {{#prev_post}}
        <a href="{{url}}" aria-label="Previous article"
            class="text-xs inline-flex h-16 w-16 md:w-auto justify-center items-center gap-2 whitespace-nowrap rounded-full bg-surface-alt border border-surface-alt dark:border-surface-dark-alt px-4 py-2 font-medium tracking-wide text-on-surface-strong transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-alt active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-surface-dark-alt dark:text-on-surface-dark-strong dark:focus-visible:outline-surface-dark-alt">
                        {{> "components/icon" name="chevron-left" class="size-5" ariaLabel="previous page"}}  <span class="hidden md:inline-flex">{{title}} </span>

        </a>
        {{/prev_post}}

        {{#next_post}}
        <a href="{{url}}" aria-label="Next article"
            class="text-xs inline-flex h-16 w-16 md:w-auto justify-center items-center gap-2 whitespace-nowrap rounded-full bg-surface-alt border border-surface-alt dark:border-surface-dark-alt px-4 py-2 font-medium tracking-wide text-on-surface-strong transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-alt active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-surface-dark-alt dark:text-on-surface-dark-strong dark:focus-visible:outline-surface-dark-alt">
                  <span class="hidden md:inline-flex">{{title}} </span>     {{> "components/icon" name="chevron-right" class="size-5" ariaLabel="next page"}}

        </a>
        {{/next_post}}
    </div>


    {{!-- Author Related Posts --}}
    {{#get "posts" filter="authors:{{primary_author.slug}}+id:-{{id}}" limit="3" include="authors" as |related_posts| }}

    {{#if related_posts}}

    <div class="container mx-auto mt-10 px-5 py-10">
        <h3 class="mt-5 mb-10 text-left text-xl font-bold lg:text-2xl">
            More By {{../primary_author.name}}
        </h3>
        {{!-- Posts --}}
        {{> "layout/posts" posts=related_posts layout=@custom.layout }}

    </div>

    {{/if}}

    {{/get}}

    {{!-- comment --}}
    {{> "comment"}}

    {{/post}}