Skip to content

Commit

Permalink
Improve writing page (#82)
Browse files Browse the repository at this point in the history 
* Update font size and line height in article card

* Refactor badge styles and article card layout

* Add hidden-badge class to hide badges

* Remove unnecessary tags from natatoko index.md file

* Fix category links in writing template and add filterByCategory function

* Add collections for writing tags and categories

* Fix category tags in writing.njk

* Refactor writing tags and categories

* Fix conditional statement in meta.njk

* Fix styling issues in badge and header components

* Add display and alignment styles to social card

* Fix formatting issue in writing.njk

* Refactor code to improve performance and readability
  • Loading branch information
@afnizarnur
afnizarnur committed May 7, 2024
1 parent 3cdfbfc commit 20561d0
Show file tree
Hide file tree
Showing 25 changed files with 417 additions and 194 deletions.
24 changes: 24 additions & 0 deletions .eleventy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,30 @@ module.exports = function (config) {
.sort((a, b) => b.date - a.date)
})

// Collections: Writing Tags
config.addCollection("writingTags", function (collection) {
let tagsSet = new Set()
collection.getAll().forEach((item) => {
if (item.data.tags) {
item.data.tags.forEach((tags) => tagsSet.add(tags))
}
})
return Array.from(tagsSet)
})

// Collections: Writing Categories
config.addCollection("writingCategories", function (collection) {
let categorySet = new Set()
collection.getAll().forEach((item) => {
if (item.data.category) {
item.data.category.forEach((category) =>
categorySet.add(category)
)
}
})
return Array.from(categorySet)
})

// Collections: Writing by year
config.addCollection("writingbyyear", (collection) => {
return lodash
Expand Down
2 changes: 1 addition & 1 deletion src/assets/scripts/modules/tag-toggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function () {
toggleButtons.forEach(function (toggleButton) {
toggleButton.addEventListener("click", function () {
const parentItem = toggleButton.closest("ul")
const hiddenTagsList = parentItem.querySelectorAll(".hidden-tags")
const hiddenTagsList = parentItem.querySelectorAll(".hidden-badge")

hiddenTagsList.forEach(function (hiddenTags) {
const isHidden = hiddenTags.style.display === "none"
Expand Down
12 changes: 12 additions & 0 deletions src/assets/styles/components/_badge.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@
}
}

&.badge-category {
padding: 4px 12px;
background: var(--surface-default);
color: var(--text-disabled);
border-radius: 24px;
text-transform: capitalize;
}

&.badge-draft {
padding: 8px 16px;
background: var(--text-primary);
Expand All @@ -30,3 +38,7 @@
}
}
}

.hidden-badge {
display: none;
}
4 changes: 4 additions & 0 deletions src/assets/styles/components/_social-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@ body.social-card {
letter-spacing: -0.001em;
position: absolute;
bottom: 48px;

display: flex;
gap: 16px;
align-items: center;
}
}
}
Expand Down
18 changes: 12 additions & 6 deletions src/assets/styles/components/writing/_article-card.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.article-card {
padding: 24px 24px 32px 24px;
padding: 24px;
position: relative;
overflow: hidden;
border: 1px solid var(--border-default);
Expand All @@ -20,8 +20,8 @@
margin-bottom: 24px;

p {
font-size: 1.8125rem;
line-height: 1.99375rem;
font-size: 1.25rem;
line-height: 1.375rem;
text-rendering: optimizeLegibility;
font-family: $font-family-sans-serif-heading;
font-variation-settings: "ital" 0, "wdth" 90;
Expand Down Expand Up @@ -64,7 +64,13 @@
display: flex;
margin-top: 44px;
flex-wrap: wrap;
gap: 4px;
gap: 8px;
align-items: center;
color: var(--text-disabled);

@include mq-down(sm) {
margin-top: 24px;
}

a {
text-decoration: none;
Expand All @@ -79,8 +85,8 @@
}
}

.hidden-tags {
display: none;
small.helper {
color: var(--text-disabled);
}
}
}
20 changes: 18 additions & 2 deletions src/assets/styles/components/writing/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,24 @@
.info {
display: flex;
gap: 8px;
color: var(--text-secondary);
margin-top: 24px;
color: var(--text-disabled);
margin-top: 32px;
align-items: center;
font-weight: 520;

p {
color: var(--text-disabled);
}

.badge-category {
text-decoration: none;
margin: 0;

&:hover {
color: var(--background-default);
background: var(--text-primary);
}
}
}

h1 {
Expand Down
148 changes: 74 additions & 74 deletions src/includes/home/selected-work.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,91 +5,91 @@
span-lg="row"
id="selected-work"
>
<div class="selected-work--content" >
<h2>Selected work</h2>
<div class="selected-work--content" >
<h2>Selected work</h2>

{% for item in collections.selected | slice(0, 4) %}
<div class="selected-work--item">
<div class="thumbnail-wrapper">
{% if item.data.draft %}
<div class="badge badge-draft">
<small class="helper">Coming Soon</small>
</div>
{% endif %}
{% for item in collections.selected | slice(0, 4) %}
<div class="selected-work--item">
<div class="thumbnail-wrapper">
{% if item.data.draft %}
<div class="badge badge-draft">
<small class="helper">Coming Soon</small>
</div>
{% endif %}

{% if item.data.draft %}
{% image "work/"+item.data.thumbnail, "Thumbnail of " + item.data.title,
{% if item.data.draft %}
{% image "work/"+item.data.thumbnail, "Thumbnail of " + item.data.title,
"(max-width: 480px) 100vw, (max-width: 768px) 90vw, 1280px",
955, 689 %}

{% else %}
<a href="{{ item.url }}">
{% image "work/"+item.data.thumbnail, "Thumbnail of " + item.data.title,
{% else %}
<a href="{{ item.url }}">
{% image "work/"+item.data.thumbnail, "Thumbnail of " + item.data.title,
"(max-width: 480px) 100vw, (max-width: 768px) 90vw, 1280px",
955, 689 %}
</a>
{% endif %}
</div>
</a>
{% endif %}
</div>

<r-grid columns="10" class="description">
<r-cell span="3" span-s="row">
<p class="body-large">
{% if item.data.draft %}
{{ item.data.title }}
{% else %}
<a href="{{ item.url }}">{{ item.data.title }}</a>
{% endif %}
</p>
</r-cell>
<r-cell span="4-10" span-s="row">
<p class="description--project">{{ item.data.description }}</p>
<ul>
{% if item.data.tags.length > 3 %}
{% for i in item
.data
.tags
.slice(0, 3) %}
<li>
<a href="{{ '/work/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
</li>
{% endfor %}
<r-grid columns="10" class="description">
<r-cell span="3" span-s="row">
<p class="body-large">
{% if item.data.draft %}
{{ item.data.title }}
{% else %}
<a href="{{ item.url }}">{{ item.data.title }}</a>
{% endif %}
</p>
</r-cell>
<r-cell span="4-10" span-s="row">
<p class="description--project">{{ item.data.description }}</p>
<ul>
{% if item.data.tags.length > 3 %}
{% for i in item
.data
.tags
.slice(0, 3) %}
<li>
<a href="{{ '/work/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
</li>
{% endfor %}

{% if item.data.tags.length > 3 %}
{% for i in item
.data
.tags
.slice(3) %}
<li class="hidden-tags" style="display: none;">
{% if item.data.tags.length > 3 %}
{% for i in item
.data
.tags
.slice(3) %}
<li class="hidden-badge" style="display: none;">

<a href="{{ '/work/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
</li>
{% endfor %}
<a href="{{ '/work/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
</li>
{% endfor %}

{% endif %}
{% endif %}

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

{% else %}
{% for i in item.data.tags %}
<li>
<a href="{{ '/work/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
</li>
{% endfor %}
{% endif %}
</ul>
</r-cell>
</r-grid>
</div>
{% endfor %}
</div>
{% else %}
{% for i in item.data.tags %}
<li>
<a href="{{ '/work/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
</li>
{% endfor %}
{% endif %}
</ul>
</r-cell>
</r-grid>
</div>
{% endfor %}
</div>
</r-cell>
4 changes: 3 additions & 1 deletion src/includes/meta.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ endset -%}
{% if page.url == '/writing/' or
page
.url
.startsWith('/writing/tags/') %}
.startsWith('/writing/tags/')or page
.url
.startsWith('/writing/category/') %}
<meta
property="og:image"
content="{{ 'https://afnizarnur.com/assets/images/meta-image.png' | url }}"
Expand Down
8 changes: 4 additions & 4 deletions src/includes/work/other-work-card.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
.data
.tags
.slice(3) %}
<li class="hidden-tags" style="display: none;">
<li class="hidden-badge" style="display: none;">
<a href="{{ '/work/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
Expand Down Expand Up @@ -102,7 +102,7 @@
.data
.tags
.slice(3) %}
<li class="hidden-tags" style="display: none;">
<li class="hidden-badge" style="display: none;">
<a href="{{ '/work/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
Expand Down Expand Up @@ -167,7 +167,7 @@
.data
.tags
.slice(3) %}
<li class="hidden-tags" style="display: none;">
<li class="hidden-badge" style="display: none;">
<a href="{{ '/work/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
Expand Down Expand Up @@ -230,7 +230,7 @@
.data
.tags
.slice(3) %}
<li class="hidden-tags" style="display: none;">
<li class="hidden-badge" style="display: none;">
<a href="{{ '/work/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
Expand Down
2 changes: 1 addition & 1 deletion src/includes/work/tags/work.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
.data
.tags
.slice(3) %}
<li class="hidden-tags" style="display: none;">
<li class="hidden-badge" style="display: none;">
<a href="{{ '/work/tags/' + i | slugify | url }}">
<small class="badge badge-tags helper">{{ i }}</small>
</a>
Expand Down

0 comments on commit 20561d0

Please sign in to comment.