-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (108 loc) · 4.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' type='text/css' href="assets/styles/bootstrap.min.css">
<link rel='stylesheet' type='text/css' href="assets/styles/style.css">
<title>N. B. Hankes</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.png">
<meta name="description" content="A tech blog by N. B. Hankes">
<meta name="keywords" content="web development blog, web development tutorials, tech blog" />
<meta property="og:image" content="https://media.dev.to/cdn-cgi/image/2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvb1vvfap3azcietcmjot.png">
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8P35ZP4S3B"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-8P35ZP4S3B');
</script>
<body>
<div class="my-5">
<a href="../index.html" id="logo">N. B. Hankes</a>
<p class="text-center">Web development, mostly</p>
<div class="px-2">
<div class="col-12 col-md-6 col-xl-4 mx-auto">
<div id="post-list"></div>
</div>
</div>
<div class="d-flex justify-content-center mb-4">
<div id="page-directory"></div>
</div>
<div id="footer">
Copyright new Date.getFullYear();
</div>
</div>
</body>
<script src="assets/scripts/jquery.min.js"></script>
<script type="module">
const posts = new Map();
// DEFINE POSTS-PER-PAGE
const postsPerPage = 5;
// ADD POST HERE IN ORDER OF DISPLAY
posts.set("2024-04-11", {"title": "Resolve Routing Errors When Deploying Vue 3 Apps to Netlify", "url": "./posts/2024/routing-error-deploying-vue-to-netlify.html"})
posts.set("2023-12-03", {"title": "How to Submit a Form Without a Backend", "url": "./posts/2023/how-to-submit-a-form-without-a-backend.html"})
posts.set("2023-11-21", {"title": "Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)", "url": "./posts/2023/firebase-error-invalid-api-key.html"})
posts.set("2023-10-28", {"title": "This File Management System Changed My Digital Life", "url": "./posts/2023/how-to-organize-your-files.html"})
posts.set("2023-10-25", {"title": "Astrohaus Freewrite Keyboard Shortcuts", "url": "./posts/2023/astrohaus-freewrite-shortcuts.html"})
posts.set("2023-10-22", {"title": "Make a Variable Globally Available in Vue 3", "url": "./posts/2023/making-a-variable-globally-available-in-vue-three.html"})
posts.set("2023-07-19", {"title": "Getting Started with C#: Classes, Objects, and Namespaces", "url": "./posts/2023/getting-started-with-c-sharp.html"})
posts.set("2021-08-15", {"title": "Using Sass In Nuxt.js", "url": "./posts/2021/sass-in-nuxt.html"})
posts.set("2020-03-19", {"title": "Responsive Sizing With rem CSS Units", "url": "./posts/2020/responsive-sizing-with-rem-css-units.html"})
// DO NOT TOUCH BELOW
$(document).ready(function() {
setPosts(1);
setPageDirectory(1);
})
function setPosts(pageNumber) {
var postListHTML = "";
var count = 0;
const minPostIndex = postsPerPage * (pageNumber - 1);
const maxPostIndex = minPostIndex + postsPerPage - 1;
for (let [key, val] of posts) {
if (count >= minPostIndex && count <= maxPostIndex) {
postListHTML += `
<a class='post-link lead' href="${val['url']}"">
<div class="post-wrapper">
<h6>${val["title"]}</h6>
<div class="post-subtitle">
${key}
</div>
</div>
</a>
`
}
count += 1;
}
document.getElementById("post-list").innerHTML = postListHTML;
}
function setPageDirectory(currentPage) {
let numPosts = posts.size;
let numPages = Math.ceil(numPosts / postsPerPage);
if (numPages > 1) {
var pagesHTML = "";
for (let i=1; i<=numPages; i++) {
var pageText = "";
if (i == currentPage) {
pageText = `<b>${i}</b>`;
} else {
pageText = `${i}`;
}
pagesHTML += `
<a class="page-number mx-1" id="${i}" href="#">${pageText}</a>
`
}
document.getElementById("page-directory").innerHTML = pagesHTML;
}
updatePostsOnPageNumClick();
}
function updatePostsOnPageNumClick() {
$(".page-number").on("click", function() {
let pageNumber = parseInt($(this).attr("id"));
setPosts(pageNumber);
setPageDirectory(pageNumber);
})
}
</script>