ayo/blog
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: html component for post list item

Browse source
This commit is contained in:
Ayo 2023-05-22 12:07:35 +02:00
parent ba8a7dc2a9
commit 49c649a398
8 changed files with 72 additions and 256 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
_includes/post-item.html Normal file
View 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>

55
_layouts/home.html
View file

@ -5,60 +5,7 @@ layout: default
<div class="blog-home"> <div class="blog-home">
{% include message.html %} {% if site.posts.size > 0 %} {% include message.html %} {% if site.posts.size > 0 %}
<ul class="blog-home__list-items"> <ul class="blog-home__list-items">
{% for post in site.posts %} {% for post in site.posts %} {% include post-list.html %} {% endfor %}
<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 %}
</ul> </ul>
{% endif %} {% endif %}
</div> </div>

41
entertaining.html
View file

@ -9,46 +9,7 @@ permalink: /entertaining/
<div class="blog-home"> <div class="blog-home">
{% if site.categories.entertaining.size > 0 %} {% if site.categories.entertaining.size > 0 %}
<ul class="blog-home__list-items"> <ul class="blog-home__list-items">
{% for post in site.categories.entertaining %} {% for post in site.categories.entertaining %} {% include post-list.html %}
<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 %} {% endfor %}
</ul> </ul>
{% else %} {% else %}

41
motivational.html
View file

@ -9,46 +9,7 @@ permalink: /motivational/
<div class="blog-home"> <div class="blog-home">
{% if site.categories.motivational.size > 0 %} {% if site.categories.motivational.size > 0 %}
<ul class="blog-home__list-items"> <ul class="blog-home__list-items">
{% for post in site.categories.motivational %} {% for post in site.categories.motivational %} {% include post-list.html %}
<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 %} {% endfor %}
</ul> </ul>
{% else %} {% else %}

43
personal.html
View file

@ -9,47 +9,8 @@ permalink: /personal/
<div class="blog-home"> <div class="blog-home">
{% if site.categories.personal.size > 0 %} {% if site.categories.personal.size > 0 %}
<ul class="blog-home__list-items"> <ul class="blog-home__list-items">
{% for post in site.categories.personal %} {% for post in site.categories.personal %} {% include post-list.html %} {%
<li class="blog-home__list-items__item"> endfor %}
<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 %}
</ul> </ul>
{% else %} {% else %}
<span>No posts to show.</span> <span>No posts to show.</span>

41
productivity.html
View file

@ -9,46 +9,7 @@ permalink: /productivity/
<div class="blog-home"> <div class="blog-home">
{% if site.categories.productivity.size > 0 %} {% if site.categories.productivity.size > 0 %}
<ul class="blog-home__list-items"> <ul class="blog-home__list-items">
{% for post in site.categories.productivity %} {% for post in site.categories.productivity %}{% include post-list.html %}
<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 %} {% endfor %}
</ul> </ul>
{% else %} {% else %}

18
projects.html Normal file
View 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>

43
technology.html
View file

@ -9,47 +9,8 @@ permalink: /technology/
<div class="blog-home"> <div class="blog-home">
{% if site.categories.technology.size > 0 %} {% if site.categories.technology.size > 0 %}
<ul class="blog-home__list-items"> <ul class="blog-home__list-items">
{% for post in site.categories.technology %} {% for post in site.categories.technology %} {% include post-list.html %} {%
<li class="blog-home__list-items__item"> endfor %}
<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 %}
</ul> </ul>
{% else %} {% else %}
<span>No posts to show.</span> <span>No posts to show.</span>