refactor: html component for post list item
This commit is contained in:
Ayo
parent
ba8a7dc2a9
commit
49c649a398
8 changed files with 72 additions and 256 deletions
46
_includes/post-item.html
Normal file
46
_includes/post-item.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<li class="blog-home__list-items__item">
|
||||
<div class="blog-home__list-items__item__header">
|
||||
<div class="blog-home__list-items__item__header__description">
|
||||
<span
|
||||
>🗓️ {% assign date_format = site.minima.date_format | default: "%b %-d,
|
||||
%Y" %} {{ post.date | date: date_format }}
|
||||
</span>
|
||||
•
|
||||
<span
|
||||
>️#️⃣
|
||||
<a href="/{{post.category}}">{{post.category | capitalize }}</a></span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="blog-home__list-items__item__header__title">
|
||||
<a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__header__description">
|
||||
<span>{{post.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__excerpt">
|
||||
{% if post.image %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/{{ post.image }}.jpg"
|
||||
/></a>
|
||||
{% else %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/hello-world.jpg"
|
||||
/></a>
|
||||
|
||||
{% endif %} {{ post.excerpt }}
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__readmore">
|
||||
<a href="{{ post.url | relative_url }}" class="button">Continue Reading</a>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -5,60 +5,7 @@ layout: default
|
|||
<div class="blog-home">
|
||||
{% include message.html %} {% if site.posts.size > 0 %}
|
||||
<ul class="blog-home__list-items">
|
||||
{% for post in site.posts %}
|
||||
<li class="blog-home__list-items__item">
|
||||
<div class="blog-home__list-items__item__header">
|
||||
<div class="blog-home__list-items__item__header__description">
|
||||
<span
|
||||
>🗓️ {% assign date_format = site.minima.date_format | default: "%b
|
||||
%-d, %Y" %} {{ post.date | date: date_format }}
|
||||
</span>
|
||||
•
|
||||
<span
|
||||
>️#️⃣
|
||||
<a href="/{{post.category}}"
|
||||
>{{post.category | capitalize }}</a
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="blog-home__list-items__item__header__title">
|
||||
<a href="{{ post.url | relative_url }}"
|
||||
>{{ post.title | escape }}</a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__header__description">
|
||||
<span>{{post.description}}</span><br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__excerpt">
|
||||
{% if post.image %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/{{ post.image }}.jpg"
|
||||
/></a>
|
||||
{% else %}
|
||||
<!-- <a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/hello-world.jpg"
|
||||
/></a> -->
|
||||
|
||||
{% endif %} {{ post.excerpt }}
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__readmore">
|
||||
<a href="{{ post.url | relative_url }}" class="button"
|
||||
>Continue Reading</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% for post in site.posts %} {% include post-list.html %} {% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,46 +9,7 @@ permalink: /entertaining/
|
|||
<div class="blog-home">
|
||||
{% if site.categories.entertaining.size > 0 %}
|
||||
<ul class="blog-home__list-items">
|
||||
{% for post in site.categories.entertaining %}
|
||||
<li class="blog-home__list-items__item">
|
||||
<div class="blog-home__list-items__item__header">
|
||||
<div>
|
||||
<h3 class="blog-home__list-items__item__header__title">
|
||||
<a href="{{ post.url | relative_url }}"
|
||||
>{{ post.title | escape }}</a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__header__description">
|
||||
<span>{{post.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__excerpt">
|
||||
{% if post.image %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/{{ post.image }}.jpg"
|
||||
/></a>
|
||||
{% else %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/hello-world.jpg"
|
||||
/></a>
|
||||
|
||||
{% endif %} {{ post.excerpt }}
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__readmore">
|
||||
<a href="{{ post.url | relative_url }}" class="button"
|
||||
>Continue Reading</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
{% for post in site.categories.entertaining %} {% include post-list.html %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
|
|
|
|||
|
|
@ -9,46 +9,7 @@ permalink: /motivational/
|
|||
<div class="blog-home">
|
||||
{% if site.categories.motivational.size > 0 %}
|
||||
<ul class="blog-home__list-items">
|
||||
{% for post in site.categories.motivational %}
|
||||
<li class="blog-home__list-items__item">
|
||||
<div class="blog-home__list-items__item__header">
|
||||
<div>
|
||||
<h3 class="blog-home__list-items__item__header__title">
|
||||
<a href="{{ post.url | relative_url }}"
|
||||
>{{ post.title | escape }}</a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__header__description">
|
||||
<span>{{post.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__excerpt">
|
||||
{% if post.image %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/{{ post.image }}.jpg"
|
||||
/></a>
|
||||
{% else %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/hello-world.jpg"
|
||||
/></a>
|
||||
|
||||
{% endif %} {{ post.excerpt }}
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__readmore">
|
||||
<a href="{{ post.url | relative_url }}" class="button"
|
||||
>Continue Reading</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
{% for post in site.categories.motivational %} {% include post-list.html %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
|
|
|
|||
|
|
@ -9,47 +9,8 @@ permalink: /personal/
|
|||
<div class="blog-home">
|
||||
{% if site.categories.personal.size > 0 %}
|
||||
<ul class="blog-home__list-items">
|
||||
{% for post in site.categories.personal %}
|
||||
<li class="blog-home__list-items__item">
|
||||
<div class="blog-home__list-items__item__header">
|
||||
<div>
|
||||
<h3 class="blog-home__list-items__item__header__title">
|
||||
<a href="{{ post.url | relative_url }}"
|
||||
>{{ post.title | escape }}</a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__header__description">
|
||||
<span>{{post.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__excerpt">
|
||||
{% if post.image %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/{{ post.image }}.jpg"
|
||||
/></a>
|
||||
{% else %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/hello-world.jpg"
|
||||
/></a>
|
||||
|
||||
{% endif %} {{ post.excerpt }}
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__readmore">
|
||||
<a href="{{ post.url | relative_url }}" class="button"
|
||||
>Continue Reading</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% for post in site.categories.personal %} {% include post-list.html %} {%
|
||||
endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<span>No posts to show.</span>
|
||||
|
|
|
|||
|
|
@ -9,46 +9,7 @@ permalink: /productivity/
|
|||
<div class="blog-home">
|
||||
{% if site.categories.productivity.size > 0 %}
|
||||
<ul class="blog-home__list-items">
|
||||
{% for post in site.categories.productivity %}
|
||||
<li class="blog-home__list-items__item">
|
||||
<div class="blog-home__list-items__item__header">
|
||||
<div>
|
||||
<h3 class="blog-home__list-items__item__header__title">
|
||||
<a href="{{ post.url | relative_url }}"
|
||||
>{{ post.title | escape }}</a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__header__description">
|
||||
<span>{{post.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__excerpt">
|
||||
{% if post.image %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/{{ post.image }}.jpg"
|
||||
/></a>
|
||||
{% else %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/hello-world.jpg"
|
||||
/></a>
|
||||
|
||||
{% endif %} {{ post.excerpt }}
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__readmore">
|
||||
<a href="{{ post.url | relative_url }}" class="button"
|
||||
>Continue Reading</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
{% for post in site.categories.productivity %}{% include post-list.html %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
|
|
|
|||
18
projects.html
Normal file
18
projects.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
layout: category
|
||||
category-name: projects
|
||||
permalink: /projects/
|
||||
---
|
||||
|
||||
<h1>Projects Posts</h1>
|
||||
|
||||
<div class="blog-home">
|
||||
{% if site.categories.projects.size > 0 %}
|
||||
<ul class="blog-home__list-items">
|
||||
{% for post in site.categories.projects %} {% include post-list.html %} {%
|
||||
endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<span>No posts to show.</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -9,47 +9,8 @@ permalink: /technology/
|
|||
<div class="blog-home">
|
||||
{% if site.categories.technology.size > 0 %}
|
||||
<ul class="blog-home__list-items">
|
||||
{% for post in site.categories.technology %}
|
||||
<li class="blog-home__list-items__item">
|
||||
<div class="blog-home__list-items__item__header">
|
||||
<div>
|
||||
<h3 class="blog-home__list-items__item__header__title">
|
||||
<a href="{{ post.url | relative_url }}"
|
||||
>{{ post.title | escape }}</a
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__header__description">
|
||||
<span>{{post.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__excerpt">
|
||||
{% if post.image %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/{{ post.image }}.jpg"
|
||||
/></a>
|
||||
{% else %}
|
||||
<a href="{{post.url | relative_url}}"
|
||||
><img
|
||||
class="blog-home__list-items__item__excerpt__thumb"
|
||||
alt="{{ post.description | escape }}"
|
||||
title="{{ post.description | escape }}"
|
||||
src="../assets/images/hello-world.jpg"
|
||||
/></a>
|
||||
|
||||
{% endif %} {{ post.excerpt }}
|
||||
</div>
|
||||
<div class="blog-home__list-items__item__readmore">
|
||||
<a href="{{ post.url | relative_url }}" class="button"
|
||||
>Continue Reading</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% for post in site.categories.technology %} {% include post-list.html %} {%
|
||||
endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<span>No posts to show.</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue