Author page integrated 👨🏽💻
This commit is contained in:
parent
022b9185d5
commit
7c634a5ef9
File diff suppressed because one or more lines are too long
Binary file not shown.
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 4 KiB |
File diff suppressed because one or more lines are too long
66
author.hbs
Normal file
66
author.hbs
Normal file
|
@ -0,0 +1,66 @@
|
|||
{{!< default}}
|
||||
|
||||
{{> header}}
|
||||
|
||||
{{#author}}
|
||||
{{> hero background=cover_image}}
|
||||
<div class="m-hero__content" data-aos="fade-down">
|
||||
{{#if profile_image}}
|
||||
<div class="m-hero-avatar" style="background-image: url({{profile_image}});"></div>
|
||||
{{else}}
|
||||
<div class="m-hero-avatar" style="background-image: url({{asset "images/default-avatar-square-normal.jpg"}});"></div>
|
||||
{{/if}}
|
||||
<h1 class="m-hero-title">{{name}}</h1>
|
||||
{{#if bio}}
|
||||
<p class="m-hero-description">{{bio}}</p>
|
||||
{{/if}}
|
||||
<div class="m-hero__meta">
|
||||
{{#has any="twitter, facebook, website"}}
|
||||
<ul class="m-hero-social">
|
||||
{{#if website}}
|
||||
<li>
|
||||
<a href="{{website}}" target="_blank" rel="noopener">
|
||||
<span class="icon-globe"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if facebook}}
|
||||
<li>
|
||||
<a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener">
|
||||
<span class="icon-facebook"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if twitter}}
|
||||
<li>
|
||||
<a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener">
|
||||
<span class="icon-twitter"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
{{/has}}
|
||||
<ul class="m-hero-stats">
|
||||
<li>
|
||||
{{plural ../pagination.total empty="No posts" singular="% post" plural="% posts"}}
|
||||
</li>
|
||||
{{#if location}}
|
||||
<li>•</li>
|
||||
<li>{{location}}</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{{/author}}
|
||||
|
||||
<main role="main">
|
||||
<section class="l-content">
|
||||
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
|
||||
<section class="l-grid centered">
|
||||
{{> "loop"}}
|
||||
</section>
|
||||
</div>
|
||||
{{pagination}}
|
||||
</section>
|
||||
</main>
|
|
@ -1,9 +1,8 @@
|
|||
{{!< default}}
|
||||
|
||||
{{!-- The header --}}
|
||||
{{> header }}
|
||||
{{> header}}
|
||||
|
||||
<main class="l-fullscreen">
|
||||
<main class="l-fullscreen" role="main">
|
||||
<section class="l-fullscreen__content" data-aos="fade-up" data-aos-delay="300">
|
||||
<h1 class="m-404-title">404</h1>
|
||||
<p class="m-404-subtitle">Page not found</p>
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
{{!< default}}
|
||||
|
||||
{{!-- The header --}}
|
||||
{{> header background=@site.cover_image}}
|
||||
{{> header}}
|
||||
|
||||
<main>
|
||||
<main role="main">
|
||||
</main>
|
||||
|
|
|
@ -1,16 +1,15 @@
|
|||
{{!< default}}
|
||||
|
||||
{{!-- The header --}}
|
||||
{{> header }}
|
||||
{{> header}}
|
||||
|
||||
{{#post}}
|
||||
<main>
|
||||
<header class="m-hero" data-aos="fade">
|
||||
<div class="m-hero__content" data-aos="fade-down">
|
||||
<h1 class="m-hero-title">{{title}}</h1>
|
||||
<p class="m-hero-description">{{excerpt}}</p>
|
||||
</div>
|
||||
</header>
|
||||
{{> hero background=feature_image}}
|
||||
<div class="m-hero__content" data-aos="fade-down">
|
||||
<h1 class="m-hero-title">{{title}}</h1>
|
||||
<p class="m-hero-description">{{excerpt}}</p>
|
||||
</div>
|
||||
</header>
|
||||
<main role="main">
|
||||
<section class="l-content">
|
||||
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
|
||||
{{#get 'authors' limit='all' include='count.posts' order='count.posts desc'}}
|
||||
|
@ -22,42 +21,44 @@
|
|||
{{else}}
|
||||
<div class="m-article-card__picture" style="background-image: url({{asset "images/default-avatar-rectangle.jpg"}})">
|
||||
{{/if}}
|
||||
<a href="{{url}}" class="m-article-card__picture-link" aria-label="Author"></a>
|
||||
<h3 class="m-article-card__name">{{name}}</h3>
|
||||
</div>
|
||||
<div class="m-article-card__info">
|
||||
<a href="{{url}}" class="m-article-card__info-link">
|
||||
<p class="m-article-card__excerpt">{{bio}}</p>
|
||||
</a>
|
||||
<div class="m-article-card__author-stats">
|
||||
<span>
|
||||
{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}
|
||||
</span>
|
||||
<ul class="m-article-card__social">
|
||||
{{#if website}}
|
||||
<li>
|
||||
<a href="{{website}}" target="_blank" rel="noopener">
|
||||
<span class="icon-globe"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if facebook}}
|
||||
<li>
|
||||
<a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener">
|
||||
<span class="icon-facebook"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if twitter}}
|
||||
<li>
|
||||
<a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener">
|
||||
<span class="icon-twitter"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
<a href="{{url}}" class="m-article-card__picture-link" aria-label="Author"></a>
|
||||
<h3 class="m-article-card__name">{{name}}</h3>
|
||||
</div>
|
||||
<div class="m-article-card__info">
|
||||
<a href="{{url}}" class="m-article-card__info-link">
|
||||
<p class="m-article-card__excerpt">{{bio}}</p>
|
||||
</a>
|
||||
<div class="m-article-card__author-stats">
|
||||
<span>
|
||||
{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}
|
||||
</span>
|
||||
{{#has any="twitter, facebook, website"}}
|
||||
<ul class="m-article-card__social">
|
||||
{{#if website}}
|
||||
<li>
|
||||
<a href="{{website}}" target="_blank" rel="noopener">
|
||||
<span class="icon-globe"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if facebook}}
|
||||
<li>
|
||||
<a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener">
|
||||
<span class="icon-facebook"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if twitter}}
|
||||
<li>
|
||||
<a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener">
|
||||
<span class="icon-twitter"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
{{/has}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
</section>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<header class="m-header js-header">
|
||||
{{#if background}}
|
||||
<div class="m-header__shadow"></div>
|
||||
{{/if}}
|
||||
|
||||
{{#if background}}
|
||||
<header class="m-header with-picture js-header">
|
||||
{{else}}
|
||||
<header class="m-header js-header">
|
||||
{{/if}}
|
||||
<div class="m-mobile-topbar" data-aos="fade-down">
|
||||
<button class="m-icon-button in-mobile-topbar js-open-menu" aria-label="Open menu">
|
||||
<span class="icon-menu"></span>
|
||||
|
|
32
partials/hero.hbs
Normal file
32
partials/hero.hbs
Normal file
|
@ -0,0 +1,32 @@
|
|||
{{#if background}}
|
||||
<style type="text/css">
|
||||
.m-hero__picture {
|
||||
background-image: url({{img_url background size='xl'}});
|
||||
}
|
||||
|
||||
@media(max-width: 1000px) {
|
||||
.m-hero__picture {
|
||||
background-image: url({{img_url background size='l'}});
|
||||
background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x);
|
||||
background-image: image-set(url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.m-hero__picture {
|
||||
background-image: url({{img_url background size='m'}});
|
||||
background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x);
|
||||
background-image: image-set(url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<header class="m-hero with-picture" data-aos="fade">
|
||||
<div class="m-hero__picture"></div>
|
||||
{{else}}
|
||||
<header class="m-hero" data-aos="fade">
|
||||
{{/if}}
|
48
partials/loop.hbs
Normal file
48
partials/loop.hbs
Normal file
|
@ -0,0 +1,48 @@
|
|||
{{#foreach posts}}
|
||||
{{#if feature_image}}
|
||||
<article class="m-article-card {{post_class}}">
|
||||
<div class="m-article-card__picture" style="background-image: url({{feature_image}});">
|
||||
{{else}}
|
||||
<article class="m-article-card no-picture {{post_class}}">
|
||||
<div class="m-article-card__picture">
|
||||
{{/if}}
|
||||
<a href="{{url}}" class="m-article-card__picture-link" aria-label="Article"></a>
|
||||
<a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" data-tippy-content="Posted by {{primary_author.name}} {{authors autolink="false" from="2" prefix="<br> Among with " separator=" , "}}">
|
||||
{{#if primary_author.profile_image}}
|
||||
<div style="background-image: url({{primary_author.profile_image}});"></div>
|
||||
{{else}}
|
||||
<div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{#if featured}}
|
||||
<a href="{{url}}" class="m-article-card__featured js-tooltip" data-tippy-content="Featured" aria-label="Article">
|
||||
<span class="icon-star"></span>
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if primary_tag}}
|
||||
<div class="m-article-card__info">
|
||||
<a href="{{primary_tag.url}}" class="m-article-card__tag">{{primary_tag.name}}</a>
|
||||
{{else}}
|
||||
<div class="m-article-card__info no-tag">
|
||||
{{/if}}
|
||||
<a href="{{url}}" class="m-article-card__info-link">
|
||||
<div>
|
||||
<h2 class="m-article-card__title">{{title}}</h2>
|
||||
</div>
|
||||
<div class="m-article-card__timestamp">
|
||||
<time datetime="{{published_at}}">{{date published_at timeago="true"}}</time>
|
||||
<span>•</span>
|
||||
<span>{{reading_time}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
{{else}}
|
||||
<header class="m-heading">
|
||||
<h3>No posts found</h3>
|
||||
<p>
|
||||
Apparently there are no posts at the moment, check again later.
|
||||
</p>
|
||||
</header>
|
||||
{{/foreach}}
|
15
partials/pagination.hbs
Normal file
15
partials/pagination.hbs
Normal file
|
@ -0,0 +1,15 @@
|
|||
<div class="l-wrapper">
|
||||
<nav class="m-pagination" role="navigation">
|
||||
{{#if prev}}
|
||||
<a href="{{page_url prev}}" class="m-icon-button filled in-pagination-left" aria-label="Newer posts">
|
||||
<span class="icon-arrow-left"></span>
|
||||
</a>
|
||||
{{/if}}
|
||||
<span class="m-pagination__text">Page {{page}} of {{pages}}</span>
|
||||
{{#if next}}
|
||||
<a href="{{page_url next}}" class="m-icon-button filled in-pagination-right" aria-label="Older posts">
|
||||
<span class="icon-arrow-right"></span>
|
||||
</a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
</div>
|
|
@ -7,7 +7,7 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<main class="l-fullscreen">
|
||||
<main class="l-fullscreen" role="main">
|
||||
<section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300">
|
||||
{{^if success}}
|
||||
<div>
|
||||
|
|
Loading…
Reference in a new issue