Skip to content

Refactor duplicated code: extract reusable partials and helpers #241

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

Draft
Copilot wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Refactor duplicated code: extract reusable partials and helpers #241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
30579e8
Initial plan
Copilot Nov 2, 2025
cff2ec7
Refactor duplicated code: extract social icons, cards, and ID sanitiz…
Copilot Nov 2, 2025
c2ec682
Address code review feedback: improve readability of card partials
Copilot Nov 2, 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
22 changes: 1 addition & 21 deletions layouts/_default/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,7 @@ <h2 class="text-center pb-2">{{.Title}}</h2>
{{ range .Paginator.Pages }}
<div class="col-lg-4 col-md-6 my-3">
<div class="card-columns">
<div class="card h-100">
{{ if and (not (.Site.Params.listPages.disableFeaturedImage | default false)) (.Params.image) }}
<div class="card-header">
<a href="{{ .RelPermalink }}">
<img src="{{ .Params.image }}" class="card-img-top" alt="{{ .Title }}">
</a>
</div>
{{ end }}
<div class="card-body bg-transparent p-4 shadow-sm">
<a href="{{ .RelPermalink }}" class="primary-font card-title">
<h5 class="card-title bg-transparent" title="{{ .Title }}">{{ .Title | truncate 25 }}</h5>
</a>
<div class="card-text secondary-font">
<p>{{ .Summary | truncate 300}}</p>
</div>
</div>
<div class="mt-auto post-footer bg-transparent py-3">
<span class="float-start bg-transparent">{{ .Date.Format (.Site.Params.datesFormat.articleList | default "January 2, 2006") }}</span>
<a href="{{ .RelPermalink }}" class="float-end btn btn-outline-info btn-sm">{{ .Site.Params.terms.read | default "Read" }}</a>
</div>
</div>
{{- partial "cards/blogPost.html" (dict "Title" .Title "Params" .Params "Summary" .Summary "RelPermalink" .RelPermalink "Date" .Date "Site" .Site "disableFeaturedImage" (.Site.Params.listPages.disableFeaturedImage | default false) "dateFormat" (.Site.Params.datesFormat.articleList | default "January 2, 2006")) -}}
</div>
</div>
{{ end }}
Expand Down
53 changes: 53 additions & 0 deletions layouts/partials/cards/blogPost.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
{{/*
Reusable blog post card component
Expected context:
- .Title or .title: Post title
- .Params.image or .image: Post image URL (optional)
- .Summary or .summary: Post summary
- .RelPermalink or .relPermalink: Link to full post
- .Date or .date: Post date
- .Site: Site object (for params access)
- .disableFeaturedImage: Whether to disable featured image (optional)
- .dateFormat: Date format to use (optional)
*/}}
{{ $title := .Title | default .title }}
{{ $image := .Params.image | default .image }}
{{ $summary := .Summary | default .summary }}
{{ $relPermalink := .RelPermalink | default .relPermalink }}
{{ $date := .Date | default .date }}
{{ $disableFeaturedImage := .disableFeaturedImage | default false }}
{{ $dateFormat := .dateFormat | default "January 2, 2006" }}
{{ $readText := "Read" }}
{{ if .Site }}
{{ $readText = .Site.Params.terms.read | default "Read" }}
{{ end }}
{{ $hasImage := and (not $disableFeaturedImage) $image }}

<div class="card h-100">
{{ if $hasImage }}
<div class="card-header">
<a href="{{ $relPermalink }}">
<img src="{{ $image }}" class="card-img-top" alt="{{ $title }}">
</a>
</div>
{{ end }}
<div class="card-body bg-transparent {{ if $hasImage }}p-3{{ else }}p-4{{ end }} shadow-sm">
<a href="{{ $relPermalink }}" class="primary-font card-title">
<h5 class="card-title bg-transparent" title="{{ $title }}">{{ $title | truncate 25 }}</h5>
</a>
<div class="card-text secondary-font">
<p>{{ $summary | truncate 300}}</p>
</div>
</div>
{{ if $hasImage }}
<div class="mt-auto card-footer">
<span class="float-start">{{ $date.Format $dateFormat }}</span>
<a href="{{ $relPermalink }}" class="float-end btn btn-outline-info btn-sm">{{ $readText }}</a>
</div>
{{ else }}
<div class="mt-auto post-footer bg-transparent py-3">
<span class="float-start bg-transparent">{{ $date.Format $dateFormat }}</span>
<a href="{{ $relPermalink }}" class="float-end btn btn-outline-info btn-sm">{{ $readText }}</a>
</div>
{{ end }}
</div>
61 changes: 61 additions & 0 deletions layouts/partials/cards/project.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
{{/*
Reusable project card component
Expected context:
- .title: Project title
- .image: Project image URL
- .badges: Array of badge strings
- .content or .Summary: Project description
- .links: Array of link objects with .url and .icon
- .featured: Featured link object with .name and .link (optional)
- .RelPermalink: Link to full project page (optional, for content pages)
*/}}
{{ $isContentPage := .RelPermalink }}
{{ $displayTitle := .title }}
{{ if $isContentPage }}
{{ $displayTitle = .title | truncate 50 }}
{{ end }}

<div class="card my-3 h-100" title="{{ .title }}">
<div class="card-head">
<img class="card-img-top" src="{{ .image }}" alt="{{ .title }}">
</div>
<div class="card-body bg-transparent p-3">
<div class="pb-2 bg-transparent">
{{ range .badges }}
<span class="badge badge-secondary">{{ . }}</span>
{{ end }}
</div>
<h5 class="card-title bg-transparent {{ if not $isContentPage }}mt-1{{ end }}">{{ $displayTitle }}</h5>
<div class="card-text bg-transparent secondary-font">
{{ if .content }}
{{ .content }}
{{ else if .Summary }}
{{ .Summary | truncate 100 | safeHTML }}
{{ end }}
</div>
</div>
{{ if or (.links) (.featured) ($isContentPage) }}
<div class="card-footer py-3">
{{ range .links }}
<span class="m-1 mx-2">
<a href="{{ .url }}" {{ if not $isContentPage }}target="_blank"{{ end }}>
<i class="{{ .icon }}"></i>
</a>
</span>
{{ end }}
{{ if .featured }}
<span class="float-end">
<a class="btn btn-sm" href="{{ .featured.link }}" target="_blank">
{{ .featured.name }}
</a>
</span>
{{ else if $isContentPage }}
<span class="float-end">
<a class="btn btn-sm" href="{{ .RelPermalink }}">
Know more
</a>
</span>
{{ end }}
</div>
{{ end }}
</div>
6 changes: 6 additions & 0 deletions layouts/partials/helpers/sanitizeId.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{{/*
Sanitize a string for use as HTML ID or CSS class name
Usage: {{ partial "helpers/sanitizeId.html" "My Company Name" }}
Returns: sanitized string safe for use as ID
*/}}
{{ replaceRE "-+" "-" (replaceRE "[^a-zA-Z0-9]" "-" .) | lower }}
22 changes: 4 additions & 18 deletions layouts/partials/sections/achievements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,12 @@ <h3 class="text-center">{{ .Site.Params.achievements.title | default "Achievemen
<div class="px-0 px-md-5 px-lg-5">
<div class="row justify-content-center px-3 px-md-5 px-lg-5">
{{ range .Site.Params.achievements.items }}
{{ if .url }}
<div class="col-lg-4 col-md-6 my-3">
{{ if .url }}
<a class="card my-3 h-100 p-3" href="{{ .url }}" title="{{ .title }}" target="_blank">
{{if .image }}
<div class="card-head">
<img class="card-img-top" src="{{ .image }}">
</div>
{{ end }}
<div class="card-body bg-transparent">
<h5 class="card-title bg-transparent">{{ .title }}</h5>
<div class="card-text secondary-font">
{{ .content }}
</div>
</div>
</a>
</div>
{{ else }}
<div class="col-lg-4 col-md-6 my-3">
{{ else }}
<div class="card my-3 h-100 p-3" title="{{ .title }}">
{{ end }}
{{if .image }}
<div class="card-head">
<img class="card-img-top" src="{{ .image }}">
Expand All @@ -35,10 +22,9 @@ <h5 class="card-title bg-transparent">{{ .title }}</h5>
{{ .content }}
</div>
</div>
</div>
{{ if .url }}</a>{{ else }}</div>{{ end }}
</div>
{{ end }}
{{ end }}
</div>
</div>
</div>
Expand Down
12 changes: 7 additions & 5 deletions layouts/partials/sections/experience.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,16 @@ <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience"
{{ if .jobs }}
{{ $firstJobDate = (index .jobs 0).date }}
{{ end }}
{{ $tabId := partial "helpers/sanitizeId.html" (print .company "-" $firstJobDate) }}
<li class="nav-item px-1 bg-transparent" role="presentation">
<div
class="nav-link {{ if (eq $index 0) }}active{{ end }} bg-transparent"
aria-selected="true"
role="tab"
data-bs-toggle="pill"
id='{{ replaceRE "-+" "-" (replaceRE "[^a-zA-Z0-9]" "-" (print .company "-" $firstJobDate)) | lower }}-tab'
data-bs-target='#pills-{{ replaceRE "-+" "-" (replaceRE "[^a-zA-Z0-9]" "-" (print .company "-" $firstJobDate)) | lower }}'
aria-controls='{{ replaceRE "-+" "-" (replaceRE "[^a-zA-Z0-9]" "-" (print .company "-" $firstJobDate)) | lower }}'
id='{{ $tabId }}-tab'
data-bs-target='#pills-{{ $tabId }}'
aria-controls='{{ $tabId }}'
>
{{ .company }}
</div>
Expand All @@ -35,11 +36,12 @@ <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience"
{{ if .jobs }}
{{ $firstJobDate = (index .jobs 0).date }}
{{ end }}
{{ $tabId := partial "helpers/sanitizeId.html" (print .company "-" $firstJobDate) }}
<div
class="tab-pane fade bg-transparent {{ if eq $index 0 }}show active{{ end }}"
role="tabpanel"
id='pills-{{ replaceRE "-+" "-" (replaceRE "[^a-zA-Z0-9]" "-" (print .company "-" $firstJobDate)) | lower }}'
aria-labelledby='{{ replaceRE "-+" "-" (replaceRE "[^a-zA-Z0-9]" "-" (print .company "-" $firstJobDate)) | lower }}-tab'
id='pills-{{ $tabId }}'
aria-labelledby='{{ $tabId }}-tab'
>
{{ range $jobIdx, $job := .jobs }}
<div>
Expand Down
22 changes: 1 addition & 21 deletions layouts/partials/sections/footer/recentBlogPosts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,7 @@
<div class="row justify-content-center">
{{ range $recentPosts }}
<div class="col-lg-4 col-md-6 pt-2">
<div class="card h-100">
{{ if and (not (.Site.Params.footer.recentPosts.disableFeaturedImage | default false)) (.Params.image) }}
<div class="card-header">
<a href="{{ .RelPermalink }}">
<img src="{{ .Params.image }}" class="card-img-top" alt="{{ .Title }}">
</a>
</div>
{{ end }}
<div class="card-body bg-transparent p-3 shadow-sm">
<a href="{{ .RelPermalink }}" class="primary-font card-title">
<h5 class="card-title bg-transparent" title="{{ .Title }}">{{ .Title | truncate 25 }}</h5>
</a>
<div class="card-text secondary-font">
<p>{{ .Summary | truncate 300}}</p>
</div>
</div>
<div class="mt-auto card-footer">
<span class="float-start">{{ .Date.Format (.Site.Params.datesFormat.articleRecent | default "January 2, 2006") }}</span>
<a href="{{ .RelPermalink }}" class="float-end btn btn-outline-info btn-sm">{{ .Site.Params.terms.read | default "Read" }}</a>
</div>
</div>
{{- partial "cards/blogPost.html" (dict "Title" .Title "Params" .Params "Summary" .Summary "RelPermalink" .RelPermalink "Date" .Date "Site" .Site "disableFeaturedImage" ($.Site.Params.footer.recentPosts.disableFeaturedImage | default false) "dateFormat" ($.Site.Params.datesFormat.articleRecent | default "January 2, 2006")) -}}
</div>
{{ end }}
</div>
Expand Down
Loading