112 lines
6.6 KiB
Handlebars
112 lines
6.6 KiB
Handlebars
<aside class="sidebar sidebar--right">
|
|
{{#is "post"}}
|
|
{{#post}}
|
|
{{#primary_author}}
|
|
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
|
|
<a class="flex gap-2 hover:opacity-80">{{#if profile_image}}
|
|
<img class="object-cover size-10 sm:size-12 aspect-square" src="{{img_url profile_image size="s"}}" alt="{{name}}">
|
|
{{else}}
|
|
<div class="object-cover size-10 sm:size-12 aspect-square avatar--fallback">A</div>
|
|
{{/if}}
|
|
<div class="flex-1 flex flex-col gap-1">
|
|
<h3 class="text-sm font-medium leading-tight flex items-center justify-between gap-1">{{name}}</h3>
|
|
{{#if bio}}<p class="text-xs text-typ-tone leading-tight line-clamp-3 text-overflow-ellipsis">{{bio}}</p>{{/if}}
|
|
</div>
|
|
<span class="author-feature__action">↗</span>
|
|
</a>
|
|
</section>
|
|
{{/primary_author}}
|
|
{{/post}}
|
|
{{/is}}
|
|
|
|
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-3 border-b border-brd ">
|
|
<div class="flex items-center gap-2.5">
|
|
{{#if @site.icon}}
|
|
<img class="w-12 min-h-12 rounded-md h-full relative" src="{{@site.icon}}" alt="{{@site.title}}">
|
|
{{else}}
|
|
<div class="w-12 min-h-12 rounded-md h-full relative site-icon--fallback">T</div>
|
|
{{/if}}
|
|
<div class="flex flex-col gap-0.5">
|
|
<h2 class="text-sm md:text-base font-medium leading-tight">{{@site.title}}</h2>
|
|
{{#if @site.description}}
|
|
<p class="text-sm text-typ-tone leading-tight">{{@site.description}}</p>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
{{subscribe_form
|
|
placeholder="Your email"
|
|
button_class="button button--subscribe"
|
|
form_class="subscribe-form"
|
|
}}
|
|
|
|
|
|
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-wrap items-center justify-between gap-1.5 border-b border-brd">
|
|
<h2 class="uppercase font-medium text-xs text-typ-tone">Follow</h2>
|
|
<nav class="relative flex flex-wrap items-center gap-1 text-typ text-sm z-10">
|
|
{{!-- {{#if @site.facebook}}<a href="{{social_url type="facebook"}}" class="hover:opacity-75 p-0.5" aria-label="Facebook">f</a>{{/if}} --}}
|
|
{{#if @site.twitter}}<a href="{{social_url type="twitter"}}" class="w-5 h-5 hover:opacity-75 p-0.5" aria-label="X">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
|
|
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
|
|
</svg>
|
|
</a>{{/if}}
|
|
<a href="{{@site.url}}/rss/" class="hover:w-5 h-5 opacity-75 p-0.5" aria-label="RSS">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rss" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<circle cx="5" cy="19" r="1"></circle>
|
|
<path d="M4 4a16 16 0 0 1 16 16"></path>
|
|
<path d="M4 11a9 9 0 0 1 9 9"></path>
|
|
</svg>
|
|
</a>
|
|
</nav>
|
|
</section>
|
|
|
|
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
|
|
<div class="flex items-center justify-between gap-2 mb-2">
|
|
<h2 class="uppercase font-medium text-xs text-typ-tone">Recommended</h2>
|
|
<button class="text-sm font-medium flex items-center gap-1 rounded-btn group bg-bgr text-typ hover:text-typ-tone cursor-pointer gh-portal-close">↗</button>
|
|
</div>
|
|
<ul class="flex flex-col gap-1 rounded-theme overflow-hidden">
|
|
{{#get "posts" filter="featured:true" limit="3" include="tags"}}
|
|
{{#foreach posts}}
|
|
<li><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75">{{title}}</a></li>
|
|
{{/foreach}}
|
|
{{else}}
|
|
<li><a href="{{@site.url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75">{{@site.title}}</a></li>
|
|
{{/get}}
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-2.5 border-b border-brd">
|
|
<p class="text-sm white-space: pre-wrap;">{{@site.title}} is a thoughtfully designed Ghost theme inspired by editorial communities, with flexible settings that let you shape it to your publication.</p>
|
|
<a class="button button--accent" href="{{@site.url}}">About {{@site.title}}</a>
|
|
</section>
|
|
|
|
{{#is "post"}}
|
|
{{#post}}
|
|
<section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
|
|
<div class="flex items-center justify-between gap-2 mb-1">
|
|
<h2 class="uppercase font-medium text-xs text-typ-tone">Read next</h2>
|
|
</div>
|
|
<ul class="flex flex-col gap-0.5 rounded-theme overflow-hidden">
|
|
{{#get "posts" filter=(concat "id:-" id) limit="4"}}
|
|
{{#foreach posts}}
|
|
<li class="style-none"><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75"><h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{title}}</h3></a></li>
|
|
{{/foreach}}
|
|
{{/get}}
|
|
</ul>
|
|
</section>
|
|
{{/post}}
|
|
{{/is}}
|
|
<span class="md:flex-1"></span>
|
|
<footer class="px-5 sm:px-6 xl:pr-1">
|
|
<div class="py-3 flex flex-col items-start justify-start text-typ-tone text-xs">
|
|
©{{date format="YYYY"}} {{@site.title}}. Published with Ghost.
|
|
</div>
|
|
</footer>
|
|
</aside>
|