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

Convert single page into hugo template

Browse source
This commit is contained in:
hossainemruz 2020-04-17 02:40:14 +06:00
parent e7540fe5a9
commit 6106bb0fb3
21 changed files with 400 additions and 2310 deletions
Download patch file Download diff file Expand all files Collapse all files

8
archetypes/default.md
View file

@ -1,2 +1,6 @@
+++
+++
---
hero: /assets/images/background/sunrise.jpg
author:
name: Md. Emruz Hossain
image: /assets/images/profile-image.jpg
---

39
layouts/_default/baseof.html
View file

@ -1,11 +1,34 @@
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
<div id="content">
{{- block "main" . }}{{- end }}
</div>
{{- partial "footer.html" . -}}
</body>
<head>
<!------ ADD COMMON HEADERS -------->
{{- partial "header.html" . -}}
<!------ ADD PAGE SPECIFIC HEADERS ------->
{{ block "header" . }} {{ end }}
<!-- ADD GOOGLE ANALYTICS IF ENABLED -->
{{ if .Site.GoogleAnalytics }}
{{ template "_internal/google_analytics_async.html" . }}
{{ end }}
</head>
<body>
<div class="container-fluid bg-dimmed wrapper">
<!----- ADD NAVBAR --------------->
{{ block "navbar" . }} {{ end }}
<!----- ADD PAGE CONTENT --------->
{{ block "content" . }} {{ end }}
</div>
<!------- ADD FOOTER ------------>
{{- partial "footer.html" . -}}
<!------- ADD COMMON SCRIPTS ------->
{{ partial "scripts.html" . }}
<!------- ADD PAGE SPECIFIC SCRIPTS ------>
{{ block "scripts" . }} {{ end }}
</body>
</html>

27
layouts/_default/list.html
View file

@ -1,11 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List</title>
</head>
<body>
<h1>This is list page....</h1>
</body>
</html>
{{ define "header" }}
{{ end }}
{{ define "navbar" }}
{{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true) }}
{{ end }}
{{ define "content" }}
<h1>Here is the actual content</h1>
{{ end }}
{{ define "scripts" }}
<script src="/assets/js/list.js"></script>
{{ end }}

85
layouts/_default/single.html
View file

@ -1,11 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single</title>
</head>
<body>
<h1>This is single page</h1>
</body>
</html>
{{ define "header" }}
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
/>
<link rel="stylesheet" href="/assets/css/single.css" />
{{ end }}
{{ define "navbar" }}
{{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
{{ end }}
{{ define "content" }}
<div class="container p-0 read-area">
<!--Hero Area-->
<div class="hero-area col-sm-12" style="background-image: url({{ .Page.Params.hero }});">
</div>
<!--Content Start-->
<div class="page-content">
<div class="author-profile ml-auto align-self-lg-center">
<img class="rounded-circle" src="{{.Page.Params.author.image }}" alt="" />
<h5>{{ .Page.Params.author.name }}</h5>
<p>{{ .Page.Date.Format "January 2, 2006" }}</p>
</div>
<div class="title">
<h1>{{ .Page.Title }}</h1>
</div>
<div class="post-content">
{{ .Page.Content }}
</div>
<!---Next and Previous Navigator -->
<hr />
<div class="row next-prev-navigator">
{{ if .Prev }}
<div class="col-md-6 previous-article">
<a href="{{.Prev.RelPermalink}}" class="btn btn-outline-info">
<span><i class="fas fa-chevron-circle-left"></i> Prev</span>
<br />
<span>{{ .Prev.Title }}</span>
</a>
</div>
{{ end }}
{{ if .Next }}
<div class="col-md-6 next-article">
<a href="{{ .Next.RelPermalink }}" class="btn btn-outline-info">
<span>Next <i class="fas fa-chevron-circle-right"></i></span>
<br />
<span>{{ .Next.Title }}</span>
</a>
</div>
{{ end }}
</div>
<hr />
<!-- Add Disqus forum -->
{{ if .Site.DisqusShortname }}
{{ partial "disqus.html" . }}
{{ end }}
</div>
{{ end }}
{{ define "scripts" }}
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
{{ if .Params.math }}
{{ partial "math.html" . }}
{{ end }}
{{ end }}

60
layouts/index.html
View file

@ -1,47 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>{{- .Site.Title -}}</title>
{{- partial "head.html" . -}}
</head>
<body data-spy="scroll" data-target="#top-navbar" data-offset="50">
<!--- NAVBAR START ---->
<!-- import common headers -->
{{- partial "header.html" . -}}
<!-- import index page specific headers -->
<link rel="stylesheet" href="/assets/css/home.css" />
<link rel="stylesheet" href="/assets/css/about.css" />
<link rel="stylesheet" href="/assets/css/skills.css" />
<link rel="stylesheet" href="/assets/css/experiences.css" />
<link rel="stylesheet" href="/assets/css/projects.css" />
<link rel="stylesheet" href="/assets/css/recent-posts.css" />
<link rel="stylesheet" href="/assets/css/achievements.css" />
</head>
<body data-spy="scroll" data-target="#top-navbar" data-offset="50">
<!--- NAVBAR ------------------------->
{{- partial "navbar.html" . -}}
<!--- NAVBAR END ---->
<!--- Home SECTION START ---->
<!--- ADD HOME SECTION ---------------->
{{- partial "home.html" . -}}
<!--- Home SECTION END ---->
<!--- ABOUT SECTION START --->
<!--- ADD ABOUT SECTION --------------->
{{- partial "about.html" . -}}
<!--- ABOUT SECTION END ---->
<!--- SKILLS SECTION START --->
<!--- ADD SKILLS SECTION -------------->
{{- partial "skills.html" . -}}
<!--- SKILLS SECTION END ---->
<!--- EXPERIENCE SECTION START --->
<!--- ADD EXPERIENCE SECTION ----------->
{{- partial "experiences.html" . -}}
<!--- EXPERIENCE SECTION END ---->
<!--- PROJECT SECTION START --->
<!--- ADD PROJECT SECTION -------------->
{{- partial "projects.html" . -}}
<!--- PROJECT SECTION END ---->
<!--- RECENT-POSTS SECTION START --->
<!--- ADD RECENT-POSTS SECTION --------->
{{- partial "recent-posts.html" . -}}
<!--- RECENTS-POSTS SECTION END ---->
<!--- ACHIEVEMENT SECTION START --->
<!--- ADD ACHIEVEMENT SECTION ---------->
{{- partial "achievements.html" . -}}
<!--- ACHIEVEMENTS SECTION END ---->
<!--- FOOTER START --->
<!--- ADD FOOTER ----------------------->
{{- partial "footer.html" . -}}
<!--- FOOTER END ---->
</body>
</html>
<!--- ADD COMMON SCRIPTS --------------->
{{ partial "scripts.html" . }}
<!--- ADD INDEX PAGE SPECIFIC SCRIPTS -->
<script src="/assets/js/itype.min.js"></script>
<script src="/assets/js/github-button.js"></script>
<script src="/assets/js/home.js"></script>
</body>
</html>

27
layouts/partials/disqus.html Normal file
View file

@ -0,0 +1,27 @@
<div id="disqus_thread"></div>
<script type="text/javascript">
(function () {
// Don't ever inject Disqus on localhost--it creates unwanted
// discussions from 'localhost:1313' on your Disqus account...
if (window.location.hostname == "localhost") return;
var dsq = document.createElement("script");
dsq.type = "text/javascript";
dsq.async = true;
var disqus_shortname = "{{ .Site.DisqusShortname }}";
dsq.src = "//" + disqus_shortname + ".disqus.com/embed.js";
(
document.getElementsByTagName("head")[0] ||
document.getElementsByTagName("body")[0]
).appendChild(dsq);
})();
</script>
<noscript
>Please enable JavaScript to view the
<a href="https://disqus.com/?ref_noscript"
>comments powered by Disqus.</a
></noscript
>
<a href="https://disqus.com/" class="dsq-brlink"
>comments powered by <span class="logo-disqus">Disqus</span></a
>

14
layouts/partials/footer.html
View file

@ -1,4 +1,3 @@
<!-- FOOTER START -->
<footer class="container-fluid text-center align-content-center footer pb-2">
<div class="container pt-5">
<div class="row text-left">
@ -60,16 +59,3 @@
</div>
</div>
</footer>
<!-- FOOTER END -->
<!-- Scripts Start --->
<script src="assets/js/jquery-3.4.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/itype.min.js"></script>
<script src="assets/js/github-button.js"></script>
<script src="assets/js/navbar.js"></script>
<script src="assets/js/home.js"></script>
<script src="assets/js/jquery.filterizr.min.js"></script>
<!-- Scripts Ends -->

20
layouts/partials/head.html
View file

@ -1,20 +0,0 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<!-- ============ import custom CSS ========== -->
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/navbar.css" />
<link rel="stylesheet" href="assets/css/home.css" />
<link rel="stylesheet" href="assets/css/about.css" />
<link rel="stylesheet" href="assets/css/skills.css" />
<link rel="stylesheet" href="assets/css/experiences.css" />
<link rel="stylesheet" href="assets/css/projects.css" />
<link rel="stylesheet" href="assets/css/recent-posts.css" />
<link rel="stylesheet" href="assets/css/achievements.css" />
{{/* <link rel="stylesheet" href="assets/css/blog.css" /> */}}
{{/* <link rel="stylesheet" href="assets/css/read.css" /> */}}
<link rel="icon" type="image/png" href="{{ .Site.Params.logo }}" />
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />

16
layouts/partials/header.html Normal file
View file

@ -0,0 +1,16 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- ============ import common css ========== -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="/assets/css/style.css" />
<link rel="stylesheet" href="/assets/css/navbar.css" />
<!--=================== cdn ==============================-->
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<!--================= fab-icon =========================-->
<link rel="icon" type="image/png" href="{{ .Site.Params.logo }}" />

5
layouts/partials/math.html Normal file
View file

@ -0,0 +1,5 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
onload="renderMathInElement(document.body);">
</script>

14
layouts/partials/navbar-2.html Normal file
View file

@ -0,0 +1,14 @@
<nav class="navbar navbar-expand-xs top-navbar final-navbar shadow">
<div class="container">
<a class="navbar-brand" href="{{ .baseURL }}">{{ .title }}</a>
<button class="navbar-toggler navbar-light" type="button" {{ if .hasToggleButton }}onclick="toggleSidebar()"{{ end }}>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-nav-items">
<ul class="navbar-nav ml-auto">
</ul>
</ul>
</div>
</div>
</nav>

5
layouts/partials/scripts.html Normal file
View file

@ -0,0 +1,5 @@
<script src="/assets/js/jquery-3.4.1.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/navbar.js"></script>
<script src="/assets/js/jquery.filterizr.min.js"></script>

2
static/assets/css/home.css
View file

@ -100,7 +100,7 @@
.content {
position: relative;
top: -75%;
height: 70%;
height: 65%;
}
.home img {

0
static/assets/css/blog.css → static/assets/css/list.css
View file

80
static/assets/css/read.css → static/assets/css/single.css
View file

@ -2,21 +2,24 @@
background-color: #f9fafc;
}
.wrapper {
padding: 0;
}
.hero-area {
margin-top: 50px;
width: 100%;
height: 400px;
background-image: url(/assets/img/bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
.page-content {
width: 100%;
position: relative;
top: -60px;
padding: 5px;
top: -4.5rem;
padding: 15px;
}
.author-profile {
@ -38,19 +41,52 @@
}
.post-content {
padding: 10px;
padding: 15px;
}
.post-content h1,
h2 {
margin-top: 1.4rem;
}
.post-content h3,
h4,
h5,
h6 {
margin-top: 1.3rem;
}
.post-content blockquote {
border-left: 4px solid #248aaa;
background-color: #248baa15;
padding: 0.3rem;
padding-left: 1rem;
}
.post-content blockquote > p {
color: #3c4858;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
table {
border-radius: 20px;
border-radius: 0.1rem;
background: #e5e9f2;
border: 1px solid #c0ccda;
padding: 0.1rem;
}
table tr {
height: 40px !important;
}
table th,
td {
padding: 0.5rem;
border-left: 1px solid #8392a5;
border-bottom: 1px solid #8392a5;
}
table thead tr {
background: #248aaa;
color: #e5e9f2;
@ -95,18 +131,36 @@ code {
display: none;
}
ul > ol,
ol > ul,
ul > ul,
ol > ol,
li > ol,
li > ul {
padding-inline-start: 25px;
}
kbd {
background-color: #248aaa !important;
color: #f9fafc;
}
mark {
background-color: #ffc21280;
}
.next-prev-navigator {
padding-left: 10px;
padding-right: 10px;
}
.next-prev-navigator a {
color: #3c4858;
color: #2098d1;
transition: all 0.3s ease-out;
}
.next-prev-navigator a:hover {
color: #2098d1;
color: #3c4858;
transition: all 0.3 ease-out;
}
@ -123,15 +177,15 @@ code {
}
.next-prev-navigator .btn-outline-info {
color: #3c4858 !important;
color: #f9fafc !important;
border-color: #e5e9f2 !important;
background-color: #e5e9f2 !important;
background-color: #248aaa !important;
transition: all 0.3s ease-out;
}
.next-prev-navigator .btn-outline-info:hover {
color: #f9fafc !important;
background-color: #248aaa !important;
color: #3c4858 !important;
background-color: #e5e9f2 !important;
transition: all 0.3s ease-out;
}
@ -161,7 +215,7 @@ code {
height: 200px;
}
.content {
.page-content {
padding: 0px;
}

5
static/assets/js/fontawesome.all.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
static/assets/js/jquery-3.4.1.slim.min.js vendored
View file

File diff suppressed because one or more lines are too long

0
static/assets/js/blog.js → static/assets/js/list.js
View file

5
static/assets/js/popper.min.js vendored
View file

File diff suppressed because one or more lines are too long

2191
static/assets/js/shuffle.js
View file

File diff suppressed because it is too large Load diff

105
static/assets/js/single.js Normal file
View file

@ -0,0 +1,105 @@
"use strict";
var isMobile = false, isTablet = false, isLaptop = false;
(function ($) {
jQuery(document).ready(function () {
function detectDevice() {
if (window.innerWidth <= 425) {
isMobile = true;
isTablet = false;
isLaptop = false;
} else if (window.innerWidth <= 768) {
isMobile = false;
isTablet = true;
isLaptop = false;
} else {
isMobile = false;
isTablet = false;
isLaptop = true;
}
}
detectDevice();
console.log(isMobile);
// ======= Add table wrapper ===========
function adjustPostCardsHeight() {
if (!isMobile) { // no need to adjust height for mobile devices
let el = document.getElementById("post-cards").children;
let maxHeight = 0;
for (let i = 0; i < el.length; i++) {
if (el[i].children[0].clientHeight > maxHeight) {
maxHeight = el[i].children[0].clientHeight;
}
}
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);
// 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);
}