FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make header linkable + fix bug

Browse source
This commit is contained in:
hossainemruz 2020-06-17 05:46:46 +06:00
parent 6cc935dfbc
commit b57d2bcf52
13 changed files with 124 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

9
exampleSite/data/about.yaml
View file

@ -5,13 +5,11 @@ company:
name: Example Co. name: Example Co.
url: "https://www.example.com" url: "https://www.example.com"
# your resume # your resume. this file path should be relative to you "static" directory
resume: "files/resume.pdf" resume: "files/resume.pdf"
# a summary about you # a summary about you
summary: 'I am a passionate software engineer with x years of working summary: 'I am a passionate software engineer with x years of working experience. I built OSS tools for [Kubernetes](https://kubernetes.io/) using GO. My tools help people to deploy their workloads in Kubernetes. Sometimes, I work on some fun projects such as writing a theme, etc.'
experience. I built OSS tools for [Kubernetes](https://kubernetes.io/) using GO. My tools helps people to
deploy their workloads in Kuberenetes. Sometimes, I work on some fun projects such as writing a theme etc.'
# your social links # your social links
# give as many as you want. use font-awesome for the icons. # give as many as you want. use font-awesome for the icons.
@ -38,9 +36,10 @@ socialLinks:
- name: Facebook - name: Facebook
icon: "fab fa-facebook" icon: "fab fa-facebook"
url: "#"
# your soft skills # your soft skills
# give the percentage between 50 to 100 with 5 interval. # give the percentage between 50 to 100 with 5 intervals.
# currently supported color: blue, yellow, pink, green # currently supported color: blue, yellow, pink, green
softSkills: softSkills:
- name: Leadership - name: Leadership

1
layouts/_default/single.html
View file

@ -80,6 +80,7 @@
{{ define "scripts" }} {{ define "scripts" }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script src="/assets/js/single.js"></script>
<script> <script>
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();
</script> </script>

62
layouts/partials/about.html
View file

@ -1,39 +1,41 @@
<div class="container-fluid about bg-white anchor p-md-5 d-flex" id="about"> <div class="container-fluid about bg-white anchor p-md-5 d-flex" id="about">
<div class="container"> <div class="container">
<div class="row pt-sm-2 pt-md-4 align-self-center"> <div class="row pt-sm-2 pt-md-4 align-self-center">
<!-- summery --> {{ if .Site.Data.about }}
<div class="col-md-6"> <!-- summery -->
<h3 class="p-1">{{ .Site.Data.home.author.name }}</h3> <div class="col-md-6">
<h5 class="p-1"> <h3 class="p-1">{{ .Site.Data.home.author.name }}</h3>
{{ .Site.Data.about.designation }} at <h5 class="p-1">
<a href="{{ .Site.Data.about.company.url }}" {{ .Site.Data.about.designation }} at
>{{ .Site.Data.about.company.name }}</a <a href="{{ .Site.Data.about.company.url }}"
>{{ .Site.Data.about.company.name }}</a
>
</h5>
<p class="p-1 text-justify">
{{ .Site.Data.about.summary | markdownify }}
</p>
<div class="text-container ml-auto">
<ul class="social-link d-flex">
{{ range .Site.Data.about.socialLinks }}
<li>
<a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
</li>
{{ end }}
</ul>
</div>
<a href="{{ .Site.Data.about.resume }}" target="#"
><button class="btn btn-dark">My Resume</button></a
> >
</h5> </div>
<p class="p-1 text-justify"> <!-- soft skills circular-progressbar -->
{{ .Site.Data.about.summary | markdownify }} <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
</p> <div class="row">
<div class="text-container ml-auto"> {{ range .Site.Data.about.softSkills }}
<ul class="social-link d-flex"> {{ partial "progress/soft-skills" . }}
{{ range .Site.Data.about.socialLinks }}
<li>
<a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
</li>
{{ end }} {{ end }}
</ul> </div>
</div> </div>
<a href="{{ .Site.Data.about.resume }}" target="#" {{ end }}
><button class="btn btn-dark">My Resume</button></a
>
</div>
<!-- soft skills circular-progressbar -->
<div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
<div class="row">
{{ range .Site.Data.about.softSkills }}
{{ partial "progress/soft-skills" . }}
{{ end }}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

22
layouts/partials/achievements.html
View file

@ -1,14 +1,16 @@
<div class="container-fluid achievements bg-dimmed anchor pb-5" id="achievements"> <div class="container-fluid achievements bg-dimmed anchor pb-5" id="achievements">
<h1 class="text-center">Achievements</h1> {{ if .Site.Data.achievements }}
<h1 class="text-center">Achievements</h1>
<div class="container"> <div class="container">
<div class="row" id="gallery"> <div class="row" id="gallery">
</div>
</div> </div>
</div> <!-- achievements-holder holds achievement-entry -->
<!-- achievements-holder holds achievement-entry --> <div class="d-none" id="achievements-holder">
<div class="d-none" id="achievements-holder"> {{ range .Site.Data.achievements.achievements }}
{{ range .Site.Data.achievements.achievements }} {{ partial "misc/achievement.html" . }}
{{ partial "misc/achievement.html" . }} {{ end }}
{{ end }} </div>
</div> {{ end }}
</div> </div>

2
layouts/partials/cards/recent-post.html
View file

@ -2,7 +2,7 @@
<a href="{{ .RelPermalink }}" class="post-card-link"> <a href="{{ .RelPermalink }}" class="post-card-link">
<div class="card"> <div class="card">
<div class="card-head"> <div class="card-head">
<img class="card-img-top" src='{{ partial "helpers/get-hero.html" .Params }}' <img class="card-img-top" src='{{ partial "helpers/get-hero.html" . }}'
alt="Card image cap" alt="Card image cap"
/> />
</div> </div>

11
layouts/partials/experiences.html
View file

@ -1,7 +1,8 @@
<div class="container-fluid experiences bg-white anchor" id="experiences"> <div class="container-fluid experiences bg-white anchor" id="experiences">
<h1 class="text-center">Experiences</h1> {{ if .Site.Data.experiences }}
<div class="container timeline text-justify"> <h1 class="text-center">Experiences</h1>
{{ if .Site.Data }}
<div class="container timeline text-justify">
{{ $total:= len .Site.Data.experiences.experiences }} {{ $total:= len .Site.Data.experiences.experiences }}
{{ range $idx,$val:= .Site.Data.experiences.experiences }} {{ range $idx,$val:= .Site.Data.experiences.experiences }}
{{ if eq (mod $idx 2) 0 }} {{ if eq (mod $idx 2) 0 }}
@ -22,6 +23,6 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} </div>
</div> {{ end }}
</div> </div>

16
layouts/partials/footer.html
View file

@ -3,13 +3,15 @@
<div class="row text-left"> <div class="row text-left">
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-sm-12">
<h5>Navigation</h5> <h5>Navigation</h5>
<ul> {{ if .Site.Data.site }}
{{ range .Site.Data.site.menus }} <ul>
<li class="nav-item"> {{ range .Site.Data.site.menus }}
<a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a> <li class="nav-item">
</li> <a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
{{ end }} </li>
</ul> {{ end }}
</ul>
{{ end }}
</div> </div>
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-sm-12">
<h5>Contact Me</h5> <h5>Contact Me</h5>

8
layouts/partials/home.html
View file

@ -1,14 +1,14 @@
<div class="container-fluid home" id="home"> <div class="container-fluid home" id="home">
<div <div
class="background container-fluid" class="background container-fluid"
style="background-image: url('{{ .Site.Data.site.background }}');" style="background-image: url('{{ if .Site.Data.site.background }}{{ .Site.Data.site.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
></div> ></div>
<div class="container content text-center"> <div class="container content text-center">
<img <img src="{{ if .Site.Data.site.author.image }}{{ .Site.Data.site.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
src="{{ .Site.Data.site.author.image }}"
class="rounded-circle mx-auto d-block img-fluid" class="rounded-circle mx-auto d-block img-fluid"
/> />
<h1 class="greeting">Hi, I am {{ .Site.Data.site.author.name -}}</h1> <h1 class="greeting">Hi, I am {{ if .Site.Data.author.name }}{{ .Site.Data.site.author.name }}{{ else }}Jane Doe{{ end }}
</h1>
<div class="typing-carousel"> <div class="typing-carousel">
<span id="ityped" class="ityped"></span> <span id="ityped" class="ityped"></span>
<span class="ityped-cursor"></span> <span class="ityped-cursor"></span>

32
layouts/partials/projects.html
View file

@ -1,19 +1,21 @@
<div class="container-fluid projects bg-dimmed anchor pb-5" id="projects"> <div class="container-fluid projects bg-dimmed anchor pb-5" id="projects">
<h1 class="text-center">Projects</h1> {{ if .Site.Data.projects }}
<div class="container ml-auto text-center"> <h1 class="text-center">Projects</h1>
<div class="btn-group flex-wrap" role="group" id="project-filter-buttons"> <div class="container ml-auto text-center">
{{ range .Site.Data.projects.buttons }} <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
<button type="button" class="btn btn-dark" data-filter="{{ .filter }}"> {{ range .Site.Data.projects.buttons }}
{{ .name }} <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
</button> {{ .name }}
{{ end }} </button>
{{ end }}
</div>
</div> </div>
</div> <div class="container filtr-projects">
<div class="container filtr-projects"> <div class="row" id="project-card-holder">
<div class="row" id="project-card-holder"> {{ range .Site.Data.projects.projects }}
{{ range .Site.Data.projects.projects }} {{ partial "cards/project" . }}
{{ partial "cards/project" . }} {{ end }}
{{ end }} </div>
</div> </div>
</div> {{ end }}
</div> </div>

2
layouts/partials/recent-posts.html
View file

@ -2,7 +2,7 @@
<h1 class="text-center">Recent Posts</h1> <h1 class="text-center">Recent Posts</h1>
<div class="container"> <div class="container">
<div class="row" id="recent-post-cards"> <div class="row" id="recent-post-cards">
{{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Type" "!=" "section" )}} {{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
{{ partial "cards/recent-post.html" . }} {{ partial "cards/recent-post.html" . }}
{{ end }} {{ end }}
</div> </div>

16
layouts/partials/skills.html
View file

@ -1,11 +1,13 @@
<div class="container-fluid skills bg-dimmed anchor pb-5" id="skills"> <div class="container-fluid skills bg-dimmed anchor pb-5" id="skills">
<h1 class="text-center">Skills</h1> {{ if .Site.Data.skills }}
<h1 class="text-center">Skills</h1>
<div class="container d-flex-block"> <div class="container d-flex-block">
<div class="row" id="primary-skills"> <div class="row" id="primary-skills">
{{ range .Site.Data.skills.skills }} {{ range .Site.Data.skills.skills }}
{{ partial "cards/skill.html" . }} {{ partial "cards/skill.html" . }}
{{ end }} {{ end }}
</div>
</div> </div>
</div> {{ end }}
</div> </div>

18
static/assets/css/single.css
View file

@ -136,6 +136,24 @@ pre>code {
padding: 10px !important; padding: 10px !important;
} }
a.header-anchor{
text-decoration: none;
color: #1c2d41;
}
a.header-anchor i{
font-size: 10pt;
color: #3c4858;
display: none;
margin-left: 0.5rem;
}
a.header-anchor:hover i{
display: inline-block;
}
a.header-anchor code{
color: #e83e8c;
}
.navbar-toggler { .navbar-toggler {
display: none; display: none;
} }

88
static/assets/js/single.js
View file

@ -19,87 +19,19 @@ var isMobile = false, isTablet = false, isLaptop = false;
} }
} }
detectDevice(); detectDevice();
console.log(isMobile);
// ======= Add table wrapper =========== // =========== Add anchor to the headers ================
function adjustPostCardsHeight() { function addAnchor(element) {
if (!isMobile) { // no need to adjust height for mobile devices element.innerHTML = `<a href="#${element.id}" class="header-anchor">${element.innerHTML}<sup><i class="fas fa-link"></i></sup></a>`;
let el = document.getElementById("post-cards").children; }
let maxHeight = 0;
for (let i = 0; i < el.length; i++) { var headerTypes = ["h1", "h2", "h3", "h4", "h5", "h6"];
if (el[i].children[0].clientHeight > maxHeight) { for (var i = 0; i < headerTypes.length; i++) {
maxHeight = el[i].children[0].clientHeight; var headers = document.querySelectorAll(headerTypes[i]);
} if (headers) {
} headers.forEach(addAnchor);
for (let i = 0; i < el.length; i++) {
el[i].children[0].setAttribute("style", "min-height: " + maxHeight + "px;")
}
} }
} }
adjustPostCardsHeight();
// ============= Sidebar Tre ================
function buildSidebarMenu() {
var openedClass = "fa-minus-circle";
var closedClass = "fa-plus-circle";
// initialize top level
var tree = $("#tree");
// add expand icon to those li who has ul as children
tree.find("li").has("ul").each(function () {
var branch = $(this);
branch.prepend('<i class="fas ' + closedClass + '"></i>');
branch.on('click', function (e) {
if (this.children[1] == e.target) {
// toggle "expand" class and icon
branch.toggleClass("expand");
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
}
});
});
// remove "expnad" class from siblings of the clicked item
tree.find("li").on("click", function () {
var item = $(this);
var shiblings = item.siblings().each(function () {
var sibling = $(this);
if (sibling.hasClass("expand")) {
sibling.removeClass("expand");
var icon = sibling.children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
}
});
});
// focus the cliked item
tree.find("a").on("click", function () {
// clear other focused link
tree.find("a.focused").each(function () {
$(this).removeClass("focused");
});
// focus cliked link
$(this).addClass("focused");
});
}
buildSidebarMenu();
// initialize filterizr
filterizd = $(".filtr-container").filterizr({ layout: 'sameWidth' });
}); });
})(jQuery); })(jQuery);
// toggle sidebar on click
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("hide");
document.getElementById("content").classList.toggle("overley");
// if it is mobile device. then scroll to top.
if (isMobile && $("#sidebar").hasClass("hide")) {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
setTimeout(function () {
filterizd.filterizr('sort');
}, 300);
}