Skip to content

Adding quick nav, sandbox and posts content templates #2

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.

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
32 changes: 32 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018
},
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
};
122 changes: 122 additions & 0 deletions assets/js/journey.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
const urlToText = (url) =>
url === "/"
? "Home"
: url
.split("/")
.join(" ")
.replace(/(^|\s)\S/g, (t) => t.toUpperCase());

class Journey {
constructor(parent = document.body, location = window.location) {
this.location = location;
this.parent = parent;
this.places = [];
this.start();
}

start() {
this.savePlaces();
}

html() {
const Box = Object.assign(document.createElement("div"), {
id: "journey",
className: "card bg-dark",
});

const ToggleBtn = Object.assign(document.createElement("button"), {
className: "btn btn-dark text-light",
innerHTML: "<i class='far fa-clone'></i>",
onclick() {
const isOpen = Box.classList.contains("open");
if (isOpen) {
Box.classList.remove("open");
Box.classList.add("closed");
} else {
Box.classList.remove("closed");
Box.classList.add("open");
}
},
});

const Heading = document.createElement("h5");
const headingText = document.createTextNode("Your recent views");
Heading.className = "h5 text-light";
Heading.appendChild(headingText);

const List = Object.assign(document.createElement("div"), {
className: "list-group",
});

this.places.forEach((place) => {
const Place = Object.assign(document.createElement("a"), {
className: "list-group-item bg-light text-dark",
href: place.href,
textContent: urlToText(place.pathname),
});

List.appendChild(Place);
});

Box.appendChild(ToggleBtn);
Box.appendChild(Heading);
Box.appendChild(List);

return Box;
}

initPlaces() {
sessionStorage.setItem("places", "");
}

savePlaces() {
this.places = this.getPlaces();

const existingPlace = this.places.find(
(place) => place.pathname === this.location.pathname
);

this.location.updated = new Date().getTime();

if (!existingPlace) {
this.places.push(this.location);
} else {
const placeIndex = this.places.findIndex(
(place) => existingPlace.pathname === place.pathname
);
existingPlace.updated = new Date().getTime();
this.places[placeIndex] = existingPlace;
}

sessionStorage.setItem("places", JSON.stringify(this.places));
this.render();
}

getPlaces() {
if (
sessionStorage.getItem("places") &&
sessionStorage.getItem("places") !== ""
) {
return JSON.parse(sessionStorage.getItem("places")).sort((a, b) =>
a.updated < b.updated ? 1 : -1
);
} else {
return [];
}
}

render() {
if (this.parent.querySelector("#journey")) {
this.parent.replaceChild(
this.parent.querySelector("#journey"),
this.html()
);
} else {
this.parent.prepend(this.html());
}
}
}

document.addEventListener("DOMContentLoaded", () => {
window.Journey = Journey;
});
13 changes: 13 additions & 0 deletions assets/js/navigation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
document.addEventListener("DOMContentLoaded", () => {
const navigation = document.querySelector(".js-navigation");

navigation.selectedIndex = null;

navigation.addEventListener("change", (e) => {
if (e.target.value === "back") {
history.go(-1);
} else {
location.href = e.target.value;
}
});
});
75 changes: 75 additions & 0 deletions assets/sass/journey.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
#journey {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
bottom: 0;
box-shadow: -3px 5px 10px #000;
color: #fff;
display: flex;
flex-flow: column wrap;
right: -290px;
padding: 25px 5px 25px 20px;
position: fixed;
width: 300px;
z-index: 2;

&.open {
animation: slide-open 150ms linear;
right: 0;
}

&.closed {
animation: slide-close 150ms linear;
}

button {
border-right: none;
box-shadow: -3px 5px 10px #000;
height: 50px;
width: 50px;
position: absolute;
left: -45px;
top: 20%;
}
}

@keyframes slide-open {
0% {
right: -290px;
}
20% {
right: -250px;
}
45% {
right: -200px;
}
65% {
right: -100px;
}
80% {
right: -50px;
}
100% {
right: 0;
}
}

@keyframes slide-close {
0% {
right: 0;
}
20% {
right: -50px;
}
45% {
right: -100px;
}
65% {
right: -200px;
}
80% {
right: -250px;
}
100% {
right: -290px;
}
}
11 changes: 11 additions & 0 deletions assets/sass/navigation.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.navigation {
border-radius: 0;
cursor: pointer;
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;

.sidebar & {
border-radius: 6px;
}
}
4 changes: 4 additions & 0 deletions content/posts/_index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
title: Blog
draft: false
---
4 changes: 4 additions & 0 deletions content/sandboxes/_index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
title: Sandboxes
draft: false
---
8 changes: 8 additions & 0 deletions content/sandboxes/templating.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: Templating in Javascript
draft: false
---

{{< rawhtml >}}
<p> I am a paragraph tag in html</p>
{{< /rawhtml >}}
20 changes: 20 additions & 0 deletions layouts/partials/footer-scripts.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
</body>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="/js/main.js"></script>

{{ $navigation := resources.Get "js/navigation.js" }}
{{ $journey := resources.Get "js/journey.js" }}
{{ $opts := dict "minified" true }}
{{ $js := slice $navigation $journey | resources.Concat "js/bundle.js" }}

<script src="{{ $js.Permalink }}"></script>

<script>
document.addEventListener("DOMContentLoaded", () => {
new Journey();
});
</script>
</html>
9 changes: 6 additions & 3 deletions layouts/partials/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,20 @@
<!-- Font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

{{ $navStyle := resources.Get "sass/navigation.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $navStyle.Permalink }}">
{{ $journeyStyle := resources.Get "sass/journey.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $journeyStyle.Permalink }}">

<!-- Meta tags -->
<meta name="author" content="{{ $config.author }}">
<meta name="theme-color" content="#000000">

{{ range .AlternativeOutputFormats -}}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}" />
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}" />
{{ end -}}

{{ partial "seo_schema.html" . }}

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-83646552-1"></script>
<script>
Expand Down
14 changes: 14 additions & 0 deletions layouts/partials/navigation.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<select class="navigation btn btn-lg btn-dark mx-auto mb-lg-5 w-100 js-navigation">
<option disabled value="">Goto...</option>
{{ if len .Pages }}
{{ range .Pages }}
<option value="{{ .Permalink }}">
{{ .Title }}
</option>
{{ end }}
{{ end }}
{{ if not .IsHome }}
<option value="back">Back</option>
<option value="/">Home</option>
{{ end }}
</select>
4 changes: 2 additions & 2 deletions layouts/partials/sidebar.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ <h1 class="heading">{{ $sidebar.title }} <span class="highlight">{{ $sidebar.hig

</div>

<a href="#contact" class="btn btn-dark btn-lg">Contact</a>

{{ partial "navigation.html" . }}

<a href="#contact" class="btn btn-dark btn-lg">Contact</a>
</div>
</section>
12 changes: 12 additions & 0 deletions layouts/posts/list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{{ partial "header.html" . }}

<main>
{{ partial "navigation.html" . }}

{{ range .Pages }}
<a href="{{ .Permalink }}">{{ .Title }}</a>
{{ end }}
{{ partial "contact.html" . }}
</main>

{{ partial "footer-scripts.html" . }}
9 changes: 9 additions & 0 deletions layouts/posts/single.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{{ partial "header.html" . }}

<main>
{{ partial "navigation.html" . }}
{{ .Content }}
{{ partial "contact.html" . }}
</main>

{{ partial "footer-scripts.html" . }}
11 changes: 11 additions & 0 deletions layouts/sandboxes/list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{{ partial "header.html" . }}

<main>
{{ partial "navigation.html" . }}
{{ range .Pages }}
<a href="{{ .Permalink }}">{{ .Title }}</a>
{{ end }}
{{ partial "contact.html" . }}
</main>

{{ partial "footer-scripts.html" . }}
9 changes: 9 additions & 0 deletions layouts/sandboxes/single.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{{ partial "header.html" . }}

<main>
{{ partial "navigation.html" . }}
{{ .Content }}
{{ partial "contact.html" . }}
</main>

{{ partial "footer-scripts.html" . }}
2 changes: 2 additions & 0 deletions layouts/shortcodes/rawhtml.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<!-- raw html -->
{{ .Inner }}
Loading