21 Commits

Author SHA1 Message Date
Guru Sabarish 98f6f9c223 Merge pull request #97 from Monpoke/master
Adds translations for static texts
2023-02-06 22:17:15 +05:30
Guru Sabarish 03a9f1b237 Merge pull request #95 from benarmstead/round-hero-image
Make hero image round if roundImage: true
2023-02-06 22:14:13 +05:30
Guru Sabarish 308342eefc Merge pull request #94 from benarmstead/master
Add showBrandLogo flag to allow hiding in nav bar
2023-02-06 22:12:05 +05:30
Pierre Bourgeois aae2408ef7 Adds translations for static texts 2023-02-05 20:09:51 +01:00
Ben Armstead 1f289595f9 Make hero image round if roundImage: true 2023-02-05 12:05:22 +00:00
Ben Armstead 62a2507e19 Add showBrandLogo flag to allow hiding in nav bar 2023-02-05 11:45:13 +00:00
Guru Sabarish 6930cf2da2 Merge pull request #91 from pantera-rosa/patch-1
add primary-font to experience
2023-02-03 00:02:06 +05:30
ilona 7ce2ea3ae2 add primary-font to experience
keeping font consistent
2023-01-31 23:33:51 -08:00
gurusabarish 4dad914f15 Merge branch 'master' of https://github.com/gurusabarish/hugo-profile 2023-01-22 12:36:56 +05:30
gurusabarish 8e8d33799b added bootstrap js map file 2023-01-22 12:36:42 +05:30
Guru Sabarish bd4225c25c Update config.yaml 2023-01-22 01:12:44 +05:30
gurusabarish 123418edea on escape and schortcut functionality added for search 2023-01-22 01:10:14 +05:30
gurusabarish c28b579ab6 window.matchMedia check 2023-01-21 23:34:17 +05:30
gurusabarish 1d476eb2b5 added reading time in single page 2023-01-21 23:31:22 +05:30
Guru Sabarish 07c0b9652f Merge pull request #88 from gurusabarish/87
Integrate with FormSpree for submitting 'Contact me' form #87 by @dmantula
2023-01-16 20:22:27 +05:30
gurusabarish cd85ec46cd added styling 2023-01-16 20:15:05 +05:30
Dmytro Mantula 001841d6e6 Integrate with FormSpree for submitting 'Contact me' form
To enable the integration, uncomment the section `params.contact.formspree` and set the `formId` value (provided by FormSpree).
It's recommended to change the `btnName` from "Mail me" to "Contact me" as far as visitors won't see your email address.
FormSpree section has preference over `email` if the both are set.
2023-01-14 15:47:14 +01:00
Guru Sabarish 9c1b16ec3d Update FUNDING.yml 2023-01-10 00:07:33 +05:30
Guru Sabarish a15bcb6699 Update config.yaml 2023-01-02 23:27:30 +05:30
Guru Sabarish 43d6a7b957 Merge pull request #84 from fbartels/patch-1
Fix toggle to disable projects from the menu
2022-12-22 23:44:23 +05:30
Felix Bartels fcbbf9219b Fix toggle to disable projects from the menu 2022-12-21 17:42:37 +01:00
20 changed files with 268 additions and 60 deletions
+1 -1
View File
@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
liberapay: # Replace with a single Liberapay username liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username otechie: # Replace with a single Otechie username
custom: ['https://donate.stripe.com/7sIeWp3aG07vd6o8ww'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] custom: ['https://www.buymeacoffee.com/gurusabarish'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+1
View File
@@ -24,6 +24,7 @@ A high performance and mobile first hugo template for personal portfolio and blo
- [Google Analytics](https://gohugo.io/templates/internal/#google-analytics) - [Google Analytics](https://gohugo.io/templates/internal/#google-analytics)
- Comment Support - Comment Support
- [Disqus](https://gohugo.io/content-management/comments/) - [Disqus](https://gohugo.io/content-management/comments/)
- Integration with [FormSpree](https://formspree.io/) for submitting "Contact me" form
Technology used: Bootstrap, fontawesome Technology used: Bootstrap, fontawesome
+28
View File
@@ -14,6 +14,8 @@ outputs:
Paginate: 3 Paginate: 3
enableRobotsTXT: true enableRobotsTXT: true
# disqusShortname: your-disqus-shortname
# googleAnalytics: G-MEASUREMENT_ID
markup: markup:
goldmark: goldmark:
@@ -100,6 +102,7 @@ params:
navbar: navbar:
align: ms-auto # Left: ms-auto | center: mx-auto | right: me-auto | Default: ms-auto align: ms-auto # Left: ms-auto | center: mx-auto | right: me-auto | Default: ms-auto
# brandLogo: "/logo.png" # Logo for the brand | default is the favicon variable # brandLogo: "/logo.png" # Logo for the brand | default is the favicon variable
# showBrandLogo: false # Show brand logo in nav bar | default is true
brandName: "Hugo Profile" # Brand name for the brand | default is the title variable brandName: "Hugo Profile" # Brand name for the brand | default is the title variable
disableSearch: false disableSearch: false
menus: menus:
@@ -118,6 +121,7 @@ params:
subtitle: "I build things for the web" subtitle: "I build things for the web"
content: "A passionate web app developer. I tend to make use of modern web technologies to build websites that looks great, feels fantastic, and functions correctly." content: "A passionate web app developer. I tend to make use of modern web technologies to build websites that looks great, feels fantastic, and functions correctly."
image: /images/hero.svg image: /images/hero.svg
# roundImage: true # Make hero image circular | default false
button: button:
enable: true enable: true
name: "Resume" name: "Resume"
@@ -338,6 +342,11 @@ params:
content: My inbox is always open. Whether you have a question or just want to say hi, Ill try my best to get back to you! content: My inbox is always open. Whether you have a question or just want to say hi, Ill try my best to get back to you!
email: gurusabarisha@gmail.com email: gurusabarisha@gmail.com
btnName: Mail me btnName: Mail me
# formspree:
# enable: true # `contact.email` value will be ignored
# formId: abcdefgh # Take it from your form's endpoint, like 'https://formspree.io/f/abcdefgh'
# emailCaption: "Enter your email address"
# messageCaption: "Enter your message here"
footer: footer:
recentPosts: recentPosts:
@@ -356,3 +365,22 @@ params:
# List pages like blogs and posts # List pages like blogs and posts
listPages: listPages:
disableFeaturedImage: false disableFeaturedImage: false
# Single pages like blog and post
singlePages:
readTime:
enable: true
content: "min read"
# For translations
terms:
read: "Read"
toc: "Table Of Contents"
copyright: "All rights reserved"
pageNotFound: "Page not found"
emailText: "Check out this site"
datesFormat:
article: "Jan 2, 2006"
articleList: "Jan 2, 2006"
articleRecent: "Jan 2, 2006"
+3 -3
View File
@@ -3,12 +3,12 @@
{{ end }} {{ end }}
{{ define "title" }} {{ define "title" }}
{{ .Site.Title }} | 404 page not found {{ .Site.Title }} | {{ .Site.Params.terms.pageNotFound | default "404 page not found" }}
{{ end }} {{ end }}
{{ define "main" }} {{ define "main" }}
<div class="container py-5 text-center"> <div class="container py-5 text-center">
<img src="{{ .Site.Params.staticPath }}/404.png" alt="404 page not found" class="img-fluid" width="40%"> <img src="{{ .Site.Params.staticPath }}/404.png" alt='{{ .Site.Params.terms.pageNotFound | default "404 page not found" }}' class="img-fluid" width="40%">
<h1>404 Page Not Found</h1> <h1>{{ .Site.Params.terms.pageNotFound | default "404 page not found" }}</h1>
</div> </div>
{{ end }} {{ end }}
+1 -1
View File
@@ -9,7 +9,7 @@
</title> </title>
</head> </head>
<body class="light" onload="loading()"> <body class="light">
<!-- javascripts --> <!-- javascripts -->
<!-- <script src="/js/jquery-3.6.0.min.js"></script> --> <!-- <script src="/js/jquery-3.6.0.min.js"></script> -->
+2 -2
View File
@@ -31,8 +31,8 @@
</div> </div>
</div> </div>
<div class="mt-auto post-footer bg-transparent py-3"> <div class="mt-auto post-footer bg-transparent py-3">
<span class="float-start bg-transparent">{{ .Date.Format "January 2, 2006" }}</span> <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">Read</a> <a href="{{ .RelPermalink }}" class="float-end btn btn-outline-info btn-sm">{{ .Site.Params.terms.read | default "Read" }}</a>
</div> </div>
</div> </div>
</div> </div>
+15 -5
View File
@@ -21,7 +21,13 @@
<div class="text-center"> <div class="text-center">
{{ .Params.author }} {{ .Params.author }}
<small>|</small> <small>|</small>
{{ .Date.Format "Jan 2, 2006" }} {{ .Date.Format (.Site.Params.datesFormat.article | default "Jan 2, 2006") }}
{{ if or (.Site.Params.singlePages.readTime.enable | default true) (.Params.enableReadingTime) }}
<span id="readingTime">
{{ .Site.Params.singlePages.readTime.content | default "min read" }}
</span>
{{ end }}
</div> </div>
</div> </div>
{{ if .Params.image }} {{ if .Params.image }}
@@ -39,7 +45,7 @@
{{ if .Params.toc | default true}} {{ if .Params.toc | default true}}
<aside class="toc"> <aside class="toc">
<h5> <h5>
Table Of Contents {{ .Site.Params.terms.toc | default "Table Of Contents" }}
</h5> </h5>
<div class="toc-content"> <div class="toc-content">
{{.TableOfContents}} {{.TableOfContents}}
@@ -49,7 +55,7 @@
{{ if .Params.tags }} {{ if .Params.tags }}
<aside class="tags"> <aside class="tags">
<h5>Tags</h5> <h5>{{ .Site.Params.terms.tags | default "Tags" }}</h5>
<ul class="tags-ul list-unstyled list-inline"> <ul class="tags-ul list-unstyled list-inline">
{{range .Params.tags}} {{range .Params.tags}}
<li class="list-inline-item"><a href="{{`tags` | absURL}}/{{.| urlize}}" target="_blank">{{.}}</a></li> <li class="list-inline-item"><a href="{{`tags` | absURL}}/{{.| urlize}}" target="_blank">{{.}}</a></li>
@@ -60,7 +66,7 @@
{{ if .Params.socialShare | default true }} {{ if .Params.socialShare | default true }}
<aside class="social"> <aside class="social">
<h5>Social</h5> <h5>{{ .Site.Params.terms.social | default "Social" }}</h5>
<div class="social-content"> <div class="social-content">
<ul class="list-inline"> <ul class="list-inline">
<li class="list-inline-item text-center"> <li class="list-inline-item text-center">
@@ -74,7 +80,7 @@
</a> </a>
</li> </li>
<li class="list-inline-item text-center"> <li class="list-inline-item text-center">
<a target="_blank" href="mailto:?subject={{ .Title }}&amp;body=Check out this site {{ .Site.Params.hostName }}{{ .Permalink | absURL }}"> <a target="_blank" href='mailto:?subject={{ .Title }}&amp;body={{ .Site.Params.terms.emailText | default "Check out this site" }} {{ .Site.Params.hostName }}{{ .Permalink | absURL }}'>
<i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i>
</a> </a>
</li> </li>
@@ -114,4 +120,8 @@
} }
</script> </script>
{{ if or (.Site.Params.singlePages.readTime.enable | default true) (.Params.enableReadingTime) }}
<script src="{{.Site.Params.staticPath}}/js/readingTime.js"></script>
{{end}}
{{ end }} {{ end }}
+6 -16
View File
@@ -22,7 +22,7 @@
document.body.classList.add('dark'); document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") { } else if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark') document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark'); document.body.classList.add('dark');
} }
@@ -49,22 +49,8 @@
</script> </script>
{{- end }} {{- end }}
<script>
let loadingIcons;
function loading() {
myVar = setTimeout(showPage, 100);
}
function showPage() {
try{
document.getElementById("loading-icons").style.display = "block";
} catch(err) {}
}
</script>
{{ if not (.Site.Params.navbar.disableSearch | default false) }} {{ if not (.Site.Params.navbar.disableSearch | default false) }}
<script src="/js/search.js"></script> <script src="{{ .Site.Params.staticPath }}/js/search.js"></script>
{{ end }} {{ end }}
@@ -98,3 +84,7 @@
</script> </script>
{{ end }} {{ end }}
{{ if (.Site.Params.contact.formspree.enable | default false) }}
<script src="{{ .Site.Params.staticPath }}/js/contact.js"></script>
{{ end }}
+28 -1
View File
@@ -8,7 +8,21 @@
<div class="text-center"> <div class="text-center">
{{ .Site.Params.contact.content | emojify | markdownify }} {{ .Site.Params.contact.content | emojify | markdownify }}
</div> </div>
{{ if .Site.Params.contact.email }} {{ if .Site.Params.contact.formspree.enable | default false }}
<div class="row justify-content-center">
<form id="contact-form" action="https://formspree.io/f/{{ .Site.Params.contact.formspree.formId }}" onsubmit="handleFormspreeSubmit(event)" method="POST" class="col-md-7">
<div class="form-group pt-3">
<input type="email" class="form-control" name="email" required="true" placeholder='{{ .Site.Params.contact.formspree.emailCaption | emojify | default "Enter your email" }}'>
</div>
<div class="form-group pt-3">
<textarea class="form-control" name="message" required="true" placeholder='{{ .Site.Params.contact.formspree.messageCaption | emojify | default "Enter your message" }}' rows="3"></textarea>
</div>
<div class="form-group text-center pt-3">
<button type="submit" class="btn">{{ .Site.Params.contact.btnName | default "Get in Touch" }}</button>
</div>
</form>
</div>
{{ else if .Site.Params.contact.email }}
<div class="text-center pt-3"> <div class="text-center pt-3">
<a href="mailto:{{ .Site.Params.contact.email }}" class="btn"> <a href="mailto:{{ .Site.Params.contact.email }}" class="btn">
{{ .Site.Params.contact.btnName | default "Get in Touch" }} {{ .Site.Params.contact.btnName | default "Get in Touch" }}
@@ -19,5 +33,18 @@
</div> </div>
</div> </div>
</div> </div>
<div id="contact-form-status"></div>
</section> </section>
{{ end }} {{ end }}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
+1 -1
View File
@@ -5,7 +5,7 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-sm-12 col-md-8 col-lg-8 py-5"> <div class="col-sm-12 col-md-8 col-lg-8 py-5">
<div class="experience-container px-3 pt-2"> <div class="experience-container px-3 pt-2">
<ul class="nav nav-pills mb-3 bg-transparent" id="pills-tab" role="tablist"> <ul class="nav nav-pills mb-3 bg-transparent primary-font" id="pills-tab" role="tablist">
{{ range $index, $element := .Site.Params.experience.items }} {{ range $index, $element := .Site.Params.experience.items }}
{{ if (eq $index 0) }} {{ if (eq $index 0) }}
<li class="nav-item px-1 bg-transparent" role="presentation"> <li class="nav-item px-1 bg-transparent" role="presentation">
@@ -7,7 +7,7 @@
height="40px" width="40px"> height="40px" width="40px">
</a> </a>
</div> </div>
&copy; {{ now.Format "2006"}} {{ .Site.Params.copyright }} All Rights Reserved &copy; {{ now.Format "2006"}} {{ .Site.Params.copyright }} {{ .Site.Params.terms.copyright | default "All Rights Reserved" }}
<div class="text-secondary"> <div class="text-secondary">
Made with Made with
<span class="text-danger"> <span class="text-danger">
@@ -26,8 +26,8 @@
</div> </div>
</div> </div>
<div class="mt-auto card-footer"> <div class="mt-auto card-footer">
<span class="float-start">{{ .Date.Format "January 2, 2006" }}</span> <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">Read</a> <a href="{{ .RelPermalink }}" class="float-end btn btn-outline-info btn-sm">{{ .Site.Params.terms.read | default "Read" }}</a>
</div> </div>
</div> </div>
</div> </div>
+6 -6
View File
@@ -6,7 +6,7 @@
document.body.classList.add('dark'); document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") { } else if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark') document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark'); document.body.classList.add('dark');
} }
@@ -14,7 +14,7 @@
{{- /* theme-toggle is disabled and theme is auto */}} {{- /* theme-toggle is disabled and theme is auto */}}
{{- else if (and (ne .Site.Params.theme.defaultTheme "light") (ne .Site.Params.theme.defaultTheme "dark"))}} {{- else if (and (ne .Site.Params.theme.defaultTheme "light") (ne .Site.Params.theme.defaultTheme "dark"))}}
<script> <script>
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark'); document.body.classList.add('dark');
} }
@@ -28,7 +28,7 @@
<div class="container-fluid mx-xs-2 mx-sm-5 mx-md-5 mx-lg-5"> <div class="container-fluid mx-xs-2 mx-sm-5 mx-md-5 mx-lg-5">
<!-- navbar brand --> <!-- navbar brand -->
<a class="navbar-brand primary-font text-wrap" href="{{ .Site.BaseURL | relURL }}"> <a class="navbar-brand primary-font text-wrap" href="{{ .Site.BaseURL | relURL }}">
{{ if or (.Site.Params.favicon) (.Site.Params.navbar.brandLogo) }} {{ if and (or (.Site.Params.favicon) (.Site.Params.navbar.brandLogo)) .Site.Params.navbar.showBrandLogo | default true }}
<img src="{{ .Site.Params.navbar.brandLogo | default .Site.Params.favicon }}" width="30" height="30" <img src="{{ .Site.Params.navbar.brandLogo | default .Site.Params.favicon }}" width="30" height="30"
class="d-inline-block align-top"> class="d-inline-block align-top">
{{ .Site.Params.navbar.brandName | default .Site.Params.title }} {{ .Site.Params.navbar.brandName | default .Site.Params.title }}
@@ -39,7 +39,7 @@
{{ if not (.Site.Params.navbar.disableSearch | default false) }} {{ if not (.Site.Params.navbar.disableSearch | default false) }}
<div> <div>
<input id="search" autocomplete="off" class="form-control mr-sm-2 d-none d-md-block" placeholder="Search ..." <input id="search" autocomplete="off" class="form-control mr-sm-2 d-none d-md-block" placeholder="Ctrl + k"
aria-label="Search" oninput="searchOnChange(event)"> aria-label="Search" oninput="searchOnChange(event)">
</div> </div>
{{ end }} {{ end }}
@@ -58,7 +58,7 @@
{{ if not (.Site.Params.navbar.disableSearch | default false) }} {{ if not (.Site.Params.navbar.disableSearch | default false) }}
<li class="nav-item navbar-text d-block d-md-none"> <li class="nav-item navbar-text d-block d-md-none">
<div class="nav-link"> <div class="nav-link">
<input id="search" autocomplete="off" class="form-control mr-sm-2" placeholder="Search ..." aria-label="Search" oninput="searchOnChange(event)"> <input id="search" autocomplete="off" class="form-control mr-sm-2" placeholder="Ctrl + k" aria-label="Search" oninput="searchOnChange(event)">
</div> </div>
</li> </li>
{{ end }} {{ end }}
@@ -89,7 +89,7 @@
</li> </li>
{{ end }} {{ end }}
{{ if and (.Site.Params.projects.enable | default false) (not (.Site.Params.navbar.menus.disableEducation | default false)) }} {{ if and (.Site.Params.projects.enable | default false) (not (.Site.Params.navbar.menus.disableProjects | default false)) }}
<li class="nav-item navbar-text"> <li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#projects" <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#projects"
aria-label="projects"> aria-label="projects">
+1 -1
View File
@@ -35,7 +35,7 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-sm-12 col-md-9 pt-5 image {{ if .Site.Params.animate }}animate{{ end }} px-5 px-md-5 px-lg-0 text-center"> <div class="col-sm-12 col-md-9 pt-5 image {{ if .Site.Params.animate }}animate{{ end }} px-5 px-md-5 px-lg-0 text-center">
<img src="{{ .Site.Params.hero.image }}" <img src="{{ .Site.Params.hero.image }}"
class="img-thumbnail mx-auto" class="img-thumbnail mx-auto{{ if .Site.Params.hero.roundImage }} rounded-circle{{ end }}"
alt="" alt=""
> >
</div> </div>
+1 -1
View File
@@ -1,4 +1,4 @@
<span id="loading-icons" style="display: {{ if .Site.Params.animate }}none{{else}}block{{ end }};"> <span>
{{ range .Site.Params.hero.socialLinks.fontAwesomeIcons }} {{ range .Site.Params.hero.socialLinks.fontAwesomeIcons }}
<span class="px-1"> <span class="px-1">
<a href="{{ .url }}" target="_blank" class="btn social-icon"> <a href="{{ .url }}" target="_blank" class="btn social-icon">
File diff suppressed because one or more lines are too long
+37
View File
@@ -537,3 +537,40 @@ header .navbar.animate {
#contact .btn:focus { #contact .btn:focus {
box-shadow: none !important; box-shadow: none !important;
} }
#contact form .form-control {
background-color: var(--secondary-color);
color: var(--text-color);
border-radius: .7rem;
border: 1px solid var(--text-secondary-color);
box-shadow: 0px 8px 56px rgb(15 80 100 / 5%);
}
#contact-form-status {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1;
transform: translate3d(0, 0, 0);
}
#contact-form-status svg {
height: 18px;
width: 18px;
}
#contact-form-status button {
border-radius: 50%;
border: none;
background-color: white;
padding: 0.5rem;
margin-left: 0.5rem;
box-shadow: 0px 8px 56px rgb(15 80 100 / 5%);
font-size: .6rem !important;
}
#contact-form-status .alert {
border-radius: 0.5rem;
box-shadow: 0px 8px 56px rgb(15 80 100 / 5%);
padding: .5rem 1rem;
}
+45
View File
@@ -0,0 +1,45 @@
async function handleFormspreeSubmit(event) {
event.preventDefault();
var form = document.getElementById("contact-form");
var data = new FormData(event.target);
fetch(event.target.action, {
method: form.method,
body: data,
headers: {
Accept: "application/json",
},
})
.then((response) => {
if (response.ok) {
contactAlert("success", "Thanks for your submission!");
form.reset();
} else {
response.json().then((data) => {
var errMessage = data.errors;
for (var i = 0; i < errMessage.length; i++) {
contactAlert("danger", errMessage[i].message);
}
});
}
})
.catch((error) => {
contactAlert("danger", "Oops! There was a problem submitting your form");
});
}
function contactAlert(type, message) {
var contactFormStatus = document.getElementById("contact-form-status");
var alert = `<div class="alert alert-${type} d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:">
<use xlink:href="#check-circle-fill" />
</svg>
<div>${message}</div>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>`;
contactFormStatus.innerHTML = alert;
// Remove alert after 3 seconds
setTimeout(function () {
contactFormStatus.innerHTML = "";
}, 3000);
}
+10
View File
@@ -0,0 +1,10 @@
function readingTime() {
const text = document.querySelector("article").innerText;
const wpm = 225;
const words = text.trim().split(/\s+/).length;
const time = Math.ceil(words / wpm);
const timeElement = document.querySelector("span#readingTime");
timeElement.innerHTML = "<small> | </small>" + time + timeElement.innerHTML;
}
readingTime();
+74 -15
View File
@@ -1,22 +1,11 @@
async function searchOnChange(evt) { async function searchOnChange(evt) {
let searchQuery = evt.target.value; let searchQuery = evt.target.value;
var inputEle = document.querySelectorAll("input#search");
inputEle.forEach((element) => {
element.value = searchQuery;
});
if (searchQuery !== "") { if (searchQuery !== "") {
const searchButtonEle = document.querySelectorAll("#search");
let searchButtonPosition;
if (window.innerWidth > 768) {
searchButtonPosition = searchButtonEle[0].getBoundingClientRect();
document.getElementById("search-content").style.width = "500px";
} else {
searchButtonPosition = searchButtonEle[1].getBoundingClientRect();
document.getElementById("search-content").style.width = "300px";
}
document.getElementById("search-content").style.top =
searchButtonPosition.top + 50 + "px";
document.getElementById("search-content").style.left =
searchButtonPosition.left + "px";
let searchJson = await fetch("/index.json").then((res) => res.json()); let searchJson = await fetch("/index.json").then((res) => res.json());
let searchResults = searchJson.filter((item) => { let searchResults = searchJson.filter((item) => {
let res = false; let res = false;
@@ -65,9 +54,79 @@ async function searchOnChange(evt) {
let searchResultsHtml = `<p class="text-center py-3">No results found for "${searchQuery}"</p>`; let searchResultsHtml = `<p class="text-center py-3">No results found for "${searchQuery}"</p>`;
document.getElementById("search-results").innerHTML = searchResultsHtml; document.getElementById("search-results").innerHTML = searchResultsHtml;
} }
alignSearchContent();
document.getElementById("search-content").style.display = "block"; document.getElementById("search-content").style.display = "block";
} else { } else {
document.getElementById("search-content").style.display = "none"; document.getElementById("search-content").style.display = "none";
document.getElementById("search-results").innerHTML = ""; document.getElementById("search-results").innerHTML = "";
} }
} }
function alignSearchContent() {
const searchButtonEle = document.querySelectorAll("#search");
if (searchButtonEle.value !== "") {
let searchButtonPosition;
if (window.innerWidth > 768) {
searchButtonPosition = searchButtonEle[0].getBoundingClientRect();
document.getElementById("search-content").style.width = "500px";
} else {
var navbarCollapse = document.querySelector("#navbarContent");
navbarCollapse.classList.add("show");
searchButtonPosition = searchButtonEle[1].getBoundingClientRect();
document.getElementById("search-content").style.width = "300px";
}
document.getElementById("search-content").style.top =
searchButtonPosition.top + 50 + "px";
document.getElementById("search-content").style.left =
searchButtonPosition.left + "px";
}
}
function resetSearch(e) {
if (
e.keyCode === 27 ||
(e.target.id !== "search" &&
e.target.closest("section#search-content") === null)
) {
if (document.getElementById("search-results").innerHTML !== "") {
document.getElementById("search-content").style.display = "none";
document.getElementById("search-results").innerHTML = "";
var inputEle = document.querySelectorAll("input#search");
inputEle.forEach((element) => {
element.value = "";
element.blur();
});
}
}
}
document.onkeyup = function () {
switch (event.keyCode) {
// ESC
case 27:
resetSearch(event);
break;
// ctrl + k
case 75:
if (event.ctrlKey) {
document.getElementById("search").focus();
}
break;
}
};
window.addEventListener("keydown", function (e) {
if (e.keyCode === 75 && e.ctrlKey) {
e.preventDefault();
}
});
// Close search on click outside and on resize
document.addEventListener("click", function (e) {
resetSearch(e);
});
window.addEventListener("resize", function (e) {
alignSearchContent();
});