Skip to content

Commit

Permalink
Add year blog (#60)
Browse files Browse the repository at this point in the history 
* Remove subtitle from writing page

* Refactor writing collection and display by year

* Add styles for year titles in writing page

* Fix duplicate meta property in meta.njk and update lang attribute in base.njk
  • Loading branch information
@afnizarnur
afnizarnur authored Apr 25, 2024
1 parent 9bbe573 commit e6b9c3a
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 60 deletions.
11 changes: 11 additions & 0 deletions .eleventy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,17 @@ module.exports = function (config) {
.sort((a, b) => b.date - a.date)
})

// Collections: Writing by year
config.addCollection("writingbyyear", (collection) => {
return lodash
.chain(collection.getFilteredByGlob(CONTENT_GLOBS.writing))
.filter((item) => !(item.data.draft && IS_PRODUCTION))
.groupBy((works) => works.date.getFullYear())
.toPairs()
.reverse()
.value()
})

// Base Config
return {
dir: {
Expand Down
12 changes: 10 additions & 2 deletions src/assets/styles/pages/_writing.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,17 @@
@include mq-down(sm) {
margin: 0px 0px 32px 0px;
}
}

h1 {
margin: 0px 0px 24px 0px;
h2 {
&.year-title {
color: var(--text-inverse-subdued);
margin-top: 64px;
margin-bottom: 24px;

@include mq-down(lg) {
margin-top: 44px;
}
}
}

Expand Down
1 change: 0 additions & 1 deletion src/includes/meta.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ endset -%}
<meta property="og:site_name" content="{{ meta.title }}"/>
<meta property="og:locale" content="{{ meta.locale }}"/>
<meta property="og:site_name" content="{{ meta.title }}"/>
<meta property="og:locale" content="{{ meta.locale }}"/>
<meta name="author" content="{{ author.name }}"/>
<meta
property="og:image"
Expand Down
115 changes: 59 additions & 56 deletions src/includes/writing/writing.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,78 +7,81 @@
<div class="writing--content">
<div class="title">
<h1>Writing</h1>
<p class="subtitle">Sharing things related to design, development, career, and personal life.</p>
</div>

<r-grid columns="10" class="writing--article-list">
{% for article in collections.writing %}
<r-cell span="5" span-s="row"class="article-card">
<div class="article-header">
<div class="article-date">
<p>
{{ article.date | dateToFormat('d') }}
</p>
<small class="helper">
{{ article.date | dateToFormat('MMM') }}
</small>
</div>
{% for year, yearWorks in collections.writingbyyear %}
<h2 class="year-title">{{ year }}</h2>
<r-grid columns="10" class="writing--article-list">
{% for item in yearWorks | reverse %}
<r-cell span="5" span-s="row"class="article-card">
<div class="article-header">
<div class="article-date">
<p>
{{ item.date | dateToFormat('d') }}
</p>
<small class="helper">
{{ item.date | dateToFormat('MMM') }}
</small>
</div>

<div class="article-title">
<a href="{{ article.url }}">
<h5>
{{ article.data.title }}
</h5>
</a>
<div class="article-title">
<a href="{{ item.url }}">
<h5>
{{ item.data.title }}
</h5>
</a>

<p class="description">{{ article.data.description }}</p>
<p class="description">{{ item.data.description }}</p>
</div>
</div>
</div>

<ul>
{% if article.data.tags.length > 3 %}
{% for i in article
.data
.tags
.slice(0, 3) %}
<li>
<a href="{{ '/writing/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
</li>
{% endfor %}

{% if article.data.tags.length > 3 %}
{% for i in article
<ul>
{% if item.data.tags.length > 3 %}
{% for i in item
.data
.tags
.slice(3) %}
<li class="hidden-tags" style="display: none;">
.slice(0, 3) %}
<li>
<a href="{{ '/writing/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
</li>
{% endfor %}

{% endif %}
{% if item.data.tags.length > 3 %}
{% for i in item
.data
.tags
.slice(3) %}
<li class="hidden-tags" style="display: none;">
<a href="{{ '/writing/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
</li>
{% endfor %}

<li>
<button class="button toggle-tags" aria-label="Show more tags" aria-expanded="false">
{% icon "three-dot" %}
</button>
</li>
{% endif %}

{% else %}
{% for i in article.data.tags %}
<li>
<a href="{{ '/writing/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
<button class="button toggle-tags" aria-label="Show more tags" aria-expanded="false">
{% icon "three-dot" %}
</button>
</li>
{% endfor %}
{% endif %}
</ul>
</r-cell>
{% endfor %}
</r-grid>
</div

{% else %}
{% for i in item.data.tags %}
<li>
<a href="{{ '/writing/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
</li>
{% endfor %}
{% endif %}
</ul>
</r-cell>

{% endfor %}
</r-grid>
{% endfor %}
</div>
</r-cell>
2 changes: 1 addition & 1 deletion src/layouts/base.njk
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ meta.lang }}">
<html lang="{{ lang or meta.lang }}">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Expand Down

0 comments on commit e6b9c3a

Please sign in to comment.