Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content

update: prototype – serializedTitle, improving logic, and little revamp #210

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

Merged
merged 10 commits into from
May 27, 2025
Merged

update: prototype – serializedTitle, improving logic, and little revamp #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2e98745
update: `prototype-section` naming convention
EmptyWork May 26, 2025
d835709
update: `styles` – moving .note to global class instead of nesting
EmptyWork May 26, 2025
1efd9fc
update: `.eleventy.js` – add more filters
EmptyWork May 26, 2025
fa18eea
fix: `_aboutme.scss` – visual bugs
EmptyWork May 26, 2025
79b33f4
update: `.eleventy.js` – more filter and refactor
EmptyWork May 26, 2025
36d0680
update: `snippets/prototype.njk`
EmptyWork May 26, 2025
2c4635e
update: `error.njk` – javascript link to onclick action
EmptyWork May 26, 2025
3de320e
update: `contact.njk` – typo
EmptyWork May 26, 2025
84b191e
update: `_prototype.scss` – improve spacing
EmptyWork May 26, 2025
8ad51c5
change: `blog.njk` – improved logic and rendering logic
EmptyWork May 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions .eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('src/robots.txt')

eleventyConfig.addFilter('postDate', (dateObj) => {
if (typeof (dateObj) !== 'object') dateObj = new Date(dateObj)
return DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_MED)
})

Expand All @@ -75,6 +76,32 @@ module.exports = function (eleventyConfig) {
return string.split(' ').splice(0, 12).join(' ')
})

eleventyConfig.addFilter('cutText', (string, size) => {
return string.split('-').splice(0, size).join('-')
})

eleventyConfig.addFilter('serializeTitle', (string, yearSplice = 2) => {
const titleParts = string.split('-')
const [year, ...title] = titleParts
const titleInitials = title.map(title => title.split('')[0]).join('')
const yearSuffix = year.slice(-yearSplice)

return `${yearSuffix}-${titleInitials}`
})

eleventyConfig.addFilter('breakLine', (string, cutAt = 3, maxSize = 30) => {
const titleWords = string.split(' ')
const titleLength = string.length
const titlePreview = titleWords.slice(0, cutAt).join(" ")
const titleRemaining = titleWords.slice(cutAt).join(" ")

const hasTitleRemaining = !!titleRemaining
const formattedTitleWithBreak = hasTitleRemaining ? `${titlePreview}<br/>${titleRemaining}` : titlePreview

const returnTitle = titleLength <= maxSize || !hasTitleRemaining ? string : formattedTitleWithBreak
return returnTitle
})

Comment on lines +79 to +104
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still not sure the naming of the functions, but for now the naming is sufficient.

eleventyConfig.addFilter('renderMarkdown', (text) => {
return markdownIt.render(text)
})
Expand Down
4 changes: 2 additions & 2 deletions src/_includes/components/snippets/prototype.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<header class="note-header">
<div>
{% include 'components/svg/logo.njk' %}
<h3 id="{{ post.fileSlug }}-code">{{ post.fileSlug | truncate(12) }}.dev</h3>
<h3 id="{{ post.fileSlug }}-code">dev#{{ post.fileSlug | serializeTitle }}</h3>
</div>
<div>
<span class="dot"></span>
Expand All @@ -30,7 +30,7 @@
<span aria-hidden="true">#</span>
<span class="sr-only">Link to heading "{{ post.data.title }}"</span>
</a>
<h3 id="{{ post.fileSlug }}-header">{{ post.data.title }}</h3>
<h3 id="{{ post.fileSlug }}-header">{{ post.data.title | breakLine | safe}}</h3>
</header>
<p lang="{{ post.data.language }}">
{{ post.data.description }}
Expand Down
94 changes: 48 additions & 46 deletions src/assets/scss/modules/component/_aboutme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,59 +227,61 @@

.note {
rotate: -3deg;
display: flex;
flex: 0 0 auto;
position: relative;
flex-direction: column;
background-color: hsl(0, 0%, 13%);
border-radius: 0.6rem;
box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
height: 100%;
transition: all 300ms ease-in-out;
}
}

.note {
display: flex;
flex: 0 0 auto;
position: relative;
flex-direction: column;
background-color: hsl(0, 0%, 13%);
border-radius: 0.6rem;
box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
height: 100%;
transition: all 300ms ease-in-out;

& > svg {
position: absolute;
right: 0.1rem;
bottom: 0.1rem;
color: hsl(0, 0%, 11%);
}

&>svg {
position: absolute;
right: 0.1rem;
bottom: 0.1rem;
color: hsl(0, 0%, 11%);
z-index: -1;
}
&-heading {
font-weight: 600;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
}

&-heading {
font-weight: 600;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
}
&-header {
display: flex;
height: 2.5rem;
padding: 0 1rem;
width: 100%;
justify-content: space-between;
box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
flex: 0 0 auto;

&-header {
div {
display: flex;
height: 2.5rem;
padding: 0 1rem;
width: 100%;
justify-content: space-between;
box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
flex: 0 0 auto;
align-items: center;
font-weight: 600;
gap: 0.2rem;

div {
display: flex;
align-items: center;
font-weight: 600;
gap: 0.2rem;
.dot {
height: 0.9375rem;
width: 0.9375rem;
background-color: hsl(0, 100%, 43%);
border-radius: 50%;

.dot {
height: 0.9375rem;
width: 0.9375rem;
background-color: hsl(0, 100%, 43%);
border-radius: 50%;

&:first-of-type {
background-color: green;
}
&:first-of-type {
background-color: green;
}

&:nth-of-type(2) {
background-color: yellow;
}
&:nth-of-type(2) {
background-color: yellow;
}
}
}
Expand Down
52 changes: 5 additions & 47 deletions src/assets/scss/modules/component/_prototype.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@
gap: 0.5em;
font-weight: 700;
align-items: center;
line-height: 1.2;
}
}

Expand Down Expand Up @@ -208,24 +209,6 @@
}

.note {
display: flex;
position: relative;
flex-direction: column;
background-color: hsl(0, 0%, 13%);
border-radius: 0.6rem;
box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
height: 100%;
transition: all 300ms ease-in-out;
z-index: 0;

& > svg {
position: absolute;
right: 0.1rem;
bottom: 0.1rem;
color: hsl(0, 0%, 11%);
z-index: -1;
}

article {
padding: 1rem;
height: 100%;
Expand All @@ -238,35 +221,10 @@
}
}

&-header {
display: flex;
height: 2.5rem;
padding: 0 1rem;
width: 100%;
justify-content: space-between;
box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
flex: 0 0 auto;

div {
display: flex;
align-items: center;
font-weight: 600;
gap: 0.2rem;

.dot {
height: 0.9375rem;
width: 0.9375rem;
background-color: hsl(0, 100%, 43%);
border-radius: 50%;

&:first-of-type {
background-color: green;
}

&:nth-of-type(2) {
background-color: yellow;
}
}
pre {
overflow: scroll;
&::-webkit-scrollbar {
width: 0;
}
}
}
Expand Down
109 changes: 64 additions & 45 deletions src/blog.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,36 @@ title : 'Recent Articles - Blog | EmptyWork'
description : "List of all articles that was written by me, its mostly contain topics about Accessibility, PHP, HTML, CSS and Fullstack development"
layout: 'layouts/secondary.njk'
---

{% set posts = [] %}
{% set recentPosts = [] %}
{% for post in collections.post | reverse %}
{% if post.data.draft == false %}
{% set postDate = {
year: post.data.date | postYear,
fullDate: post.data.date
} %}
{% set posts = (posts.push({
title: post.data.title,
url: post.url,
date: postDate,
desc: post.data.description,
author: post.data.author,
slug: post.fileSlug
}), posts) %}
{% endif %}
{% endfor %}{% set recentPosts = [] %}
{% for post in collections.post | reverse %}
{% if post.data.draft == false %}
{% set recentPosts = (recentPosts.push({
title: post.data.title,
description: post.data.description,
url: post.url,
slug: post.fileSlug,
author: post.data.author,
date: post.data.date,
image: post.data.image
}), recentPosts) %}
{% endif %}
{% endfor %}{% set lengthRecentPosts = recentPosts | length %}
{% if lengthRecentPosts > 3 %}{% set recentPosts = recentPosts | sliceRecent %}
{% if not post.data.draft %}
{% set postDate = {
year: post.data.date | postYear,
fullDate: post.data.date
} %}
{% set _ = posts.push({
title: post.data.title,
url: post.url,
date: postDate,
desc: post.data.description,
author: post.data.author,
slug: post.fileSlug
}) %}
{% set _ = recentPosts.push({
title: post.data.title,
description: post.data.description,
url: post.url,
slug: post.fileSlug,
author: post.data.author,
date: post.data.date,
image: post.data.image
}) %}
{% endif %}
{% endfor %}
{% if recentPosts | length > 3 %}
{% set recentPosts = recentPosts | sliceRecent %}
{% endif %}
<main id="main" class="main blog">
<section aria-labelledby="article" class="articles">
Expand All @@ -48,38 +47,51 @@ layout: 'layouts/secondary.njk'
<span aria-hidden="true">#</span>
<span class="sr-only">Link to heading "recent articles"</span>
</a>
Recent Articles
Recent Articles
</h1>
</header>
<ul class="cards cards-horizontal{% if lengthRecentPosts == 3 %} cards-3-item{% endif %}">
{%- for post in recentPosts -%}
{% include 'components/snippets/article.njk' %}
{% include "components/snippets/article.njk" %}
{% else %}
<li class="card card-empty">
<h2>You haven't post anything yet.</h2>
It seems like there is no article right now...
It seems like there is no article right now...
</li>
{%- endfor -%}
</ul>
{% set groupedPosts = posts | groupby("date.year") %}
{% for year, posts in groupedPosts | reverseGroupedPosts %}
<div class="posts">
<h2 class="posts-yeargroup" data-animation="fade-in" data-delay="{{ loop.index }}">{{ year }}</h2>
<h2 class="posts-yeargroup"
data-animation="fade-in"
data-delay="{{ loop.index }}">{{ year }}</h2>
<ul class="posts-list">
{% for post in posts %}
<li class="posts-detail" data-animation="prototype-card" data-delay="{{ loop.index + 0.5 | float }}">
<li class="posts-detail"
data-animation="prototype-card"
data-delay="{{ loop.index + 0.5 | float }}">
<p class="posts-detail_accent">
<time class="posts-detail_accent-item posts-detail_accent-item_filled" datetime="{{ post.date.fullDate | htmlDateString }}">
<svg xmlns="http://www.w3.org/2000/svg" class="posts-detail_svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
<time class="posts-detail_accent-item posts-detail_accent-item_filled"
datetime="{{ post.date.fullDate | htmlDateString }}">
<svg xmlns="http://www.w3.org/2000/svg"
class="posts-detail_svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
{{ post.date.fullDate | postDate }}
</time>
<span class="posts-detail_accent-item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="article-detail_item_svg">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
<svg xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="article-detail_item_svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
{{ post.author }}
</span>
Expand All @@ -91,14 +103,21 @@ layout: 'layouts/secondary.njk'
<span id="{{ post.slug }}">{{ post.title }}</span>
</a>
</p>
<p>
{{ post.desc | truncate(60) }}
</p>
<p>{{ post.desc | truncate(60) }}</p>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</section>
</main>
</main>
<script>
let links = document.links
for (link of links) {
if (document.location.hostname == 'localhost') break
let regex = /\/articles\/blog/g
const currentHref = link.href
if (currentHref.includes("/articles/blog")) link.href = currentHref.replace(regex, "/blog")
}
</script>
Loading