Skip to content

Commit 4c1ca4c

Browse files
ProcStackProcStack
committed
Dynamic Meta Tags, History States, & CSS
_Page style updates to be less noticeable; removed borders, added flourish before-after page content _Page changes update the History State and pops from history are caught __Still a bug where multiple back's will return the user to the prior website, not prior page, to investigate _404 catching to redirect the user to their desired page added
1 parent 3694d8d commit 4c1ca4c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2989
-554
lines changed

‎Public/404.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Routing to page...</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
text-align: center;
11+
background-color: #000822;
12+
color: #fff;
13+
}
14+
a {
15+
color: #fff;
16+
text-decoration: none;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<br>If you are not redirected automatically, follow this <a href="/index.htm" id="linkOut">link to ---</a>.
22+
<script>
23+
(()=>{
24+
let basePath = window.location.pathname;
25+
basePath = basePath.split('/');
26+
basePath = basePath.pop();
27+
let redirectUrl = '/index.htm?redirect=' + encodeURIComponent(basePath + window.location.search);
28+
29+
let metaRedirect = document.createElement('meta');
30+
metaRedirect.setAttribute('http-equiv', 'refresh');
31+
metaRedirect.setAttribute('content', '0;url=' + redirectUrl);
32+
document.head.appendChild(metaRedirect);
33+
34+
// -- -- --
35+
36+
let linkOut = document.getElementById('linkOut');
37+
if(linkOut) {
38+
linkOut.setAttribute('href', redirectUrl);
39+
linkOut.innerHTML = "link to " + basePath;
40+
}
41+
})();
42+
</script>
43+
</body>
44+
</html>

‎Public/images/ProcStack_sm.jpg‎

30.3 KB
Loading

‎Public/images/ProcStack_sm.png‎

44.9 KB
Loading

‎Public/images/ProcStack_th.jpg‎

164 KB
Loading

‎Public/images/ProcStack_th.png‎

802 KB
Loading

‎Public/index.htm‎

Lines changed: 205 additions & 138 deletions
Large diffs are not rendered by default.

‎Public/js/PageMetaData.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
// Page Meta Data Objects
2+
// Written by Kevin Edzenga; 2024
3+
// -- -- --
4+
// Just a way to keep track of page meta tag updates to aid in SEO / web crawlers and social media sharing.
5+
6+
class PageMetaData {
7+
constructor( page="Default", title="", description="", keywords="", image="", url="" ){
8+
this.page = page;
9+
this.title = title;
10+
this.description = description;
11+
this.keywords = keywords;
12+
this.image = image;
13+
this.url = url;
14+
this.metaTagList = {
15+
'title':['title', 'og:title', 'twitter:title'],
16+
'description':['description', 'og:description', 'twitter:description'],
17+
'keywords':['keywords'],
18+
'image':['og:image', 'twitter:image'],
19+
'url':['og:url']
20+
}
21+
}
22+
setAttribute( attribute, value ){
23+
attribute = attribute.toLowerCase();
24+
if (this.hasOwnProperty(attribute)) {
25+
this[attribute] = value;
26+
}
27+
}
28+
}
29+
30+
// -- -- --
31+
32+
const initMetaData = new PageMetaData();
33+
initMetaData.setAttribute('page', "Init");
34+
initMetaData.setAttribute('title', "ProcStack's GitHub Portfolio");
35+
initMetaData.setAttribute('description', 'The personal portfolio of Kevin Edzenga');
36+
initMetaData.setAttribute('keywords', 'Kevin Edzenga, Portfolio, ProcStack, ProcStack.GitHub.io');
37+
initMetaData.setAttribute('image', 'https://procstack.github.io/images/ProcStack_th.jpg');
38+
initMetaData.setAttribute('url', 'Init.htm');
39+
40+
// -- -- --
41+
42+
const pxlNavMetaData = new PageMetaData();
43+
pxlNavMetaData.setAttribute('page', 'pxlNav');
44+
pxlNavMetaData.setAttribute('title', 'pxlNav Breakdown');
45+
pxlNavMetaData.setAttribute('description', 'Explore what pxlNav offers as a javascript player controller & room manager for Three.js');
46+
pxlNavMetaData.setAttribute('keywords', 'pxlNav, player controller, javascript, room manager, threejs, three.js, Kevin Edzenga, ProcStack');
47+
pxlNavMetaData.setAttribute('image', 'https://procstack.github.io/images/ProcStack_th.jpg');
48+
pxlNavMetaData.setAttribute('url', 'pxlNav.htm');
49+
50+
// -- -- --
51+
52+
const reposMetaData = new PageMetaData();
53+
reposMetaData.setAttribute('page', 'Repos');
54+
reposMetaData.setAttribute('title', "Proc's GitHub Repositories");
55+
reposMetaData.setAttribute('description', "A selection of GitHub repositories by ProcStack / Kevin Edzenga");
56+
reposMetaData.setAttribute('keywords', 'ProcStack, Kevin Edzenga, GitHub, Repositories, Portfolio');
57+
reposMetaData.setAttribute('image', 'https://procstack.github.io/images/ProcStack_th.jpg');
58+
reposMetaData.setAttribute('url', 'Repos.htm');
59+
60+
// -- -- --
61+
62+
const projectMetaData = new PageMetaData();
63+
projectMetaData.setAttribute('page', 'ProjectsLinks');
64+
projectMetaData.setAttribute('title', "Proc's Projects & Socials");
65+
projectMetaData.setAttribute('description', "See a collection of projects and links by ProcStack / Kevin Edzenga");
66+
projectMetaData.setAttribute('keywords', 'ProcStack, Kevin Edzenga, Projects, Socials, Portfolio, Plushie, Plushies, neural network, neural networks, ESN, GRU, GAT');
67+
projectMetaData.setAttribute('image', 'https://procstack.github.io/images/ProcStack_th.jpg');
68+
projectMetaData.setAttribute('url', 'ProjectsLinks.htm');
69+
70+
// -- -- --
71+
72+
const blogMetaData = new PageMetaData();
73+
blogMetaData.setAttribute('page', 'Blog');
74+
blogMetaData.setAttribute('title', "Proc's Random Ramblings");
75+
blogMetaData.setAttribute('description', "A collection of mental vomit written by ProcStack / Kevin Edzenga");
76+
blogMetaData.setAttribute('keywords', 'ProcStack, Kevin Edzenga, Blog, Portfolio');
77+
blogMetaData.setAttribute('image', 'https://procstack.github.io/images/ProcStack_th.jpg');
78+
blogMetaData.setAttribute('url', 'Blog.htm');
79+
80+
// -- -- --
81+
82+
const aboutMeMetaData = new PageMetaData();
83+
aboutMeMetaData.setAttribute('page', 'AboutMe');
84+
aboutMeMetaData.setAttribute('title', "About Kevin Edzenga");
85+
aboutMeMetaData.setAttribute('description', "Who am I? What do I do? Why do I do the things I do?");
86+
aboutMeMetaData.setAttribute('keywords', 'Kevin Edzenga, About, Portfolio');
87+
aboutMeMetaData.setAttribute('image', 'https://procstack.github.io/images/ProcStack_th.jpg');
88+
aboutMeMetaData.setAttribute('url', 'AboutMe.htm');
89+
90+
// -- -- --
91+
92+
const PageMetaDataObjects = {
93+
'Init': initMetaData,
94+
'pxlNav': pxlNavMetaData,
95+
'Repos': reposMetaData,
96+
'ProjectsLinks': projectMetaData,
97+
'Blog': blogMetaData,
98+
'AboutMe': aboutMeMetaData
99+
};
100+
101+
export { PageMetaDataObjects };

0 commit comments

Comments
 (0)