Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve writing page #82

Merged
merged 13 commits into from
May 7, 2024
Merged

Improve writing page #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c4501c7
Update font size and line height in article card
afnizarnur May 7, 2024
07a8698
Refactor badge styles and article card layout
afnizarnur May 7, 2024
2fb300b
Add hidden-badge class to hide badges
afnizarnur May 7, 2024
457f066
Remove unnecessary tags from natatoko index.md file
afnizarnur May 7, 2024
48a8d7c
Fix category links in writing template and add filterByCategory function
afnizarnur May 7, 2024
5bfac6f
Add collections for writing tags and categories
afnizarnur May 7, 2024
a8cde9c
Fix category tags in writing.njk
afnizarnur May 7, 2024
59c2caf
Refactor writing tags and categories
afnizarnur May 7, 2024
4c43f0d
Fix conditional statement in meta.njk
afnizarnur May 7, 2024
51a87bd
Fix styling issues in badge and header components
afnizarnur May 7, 2024
09eabe1
Add display and alignment styles to social card
afnizarnur May 7, 2024
46b7acc
Fix formatting issue in writing.njk
afnizarnur May 7, 2024
89be585
Refactor code to improve performance and readability
afnizarnur May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 24 additions & 0 deletions .eleventy.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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