Author page integrated 👨🏽‍💻

This commit is contained in:
Eduardo 2019-02-24 22:06:24 +01:00
parent 022b9185d5
commit 7c634a5ef9
14 changed files with 218 additions and 58 deletions

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
View 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>&bull;</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>

View file

@ -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>

View file

@ -1,7 +1,6 @@
{{!< default}}
{{!-- The header --}}
{{> header background=@site.cover_image}}
{{> header}}
<main>
<main role="main">
</main>

View file

@ -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>

View file

@ -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
View 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
View 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>&bull;</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
View 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>

View file

@ -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>