added a footer and made the blog template stuff better TODO: Make the template more centralised as I have 3
This commit is contained in:
DeaDvey
parent
ecd35774fa
commit
09160485f2
@ -1,3 +1,4 @@
|
|||||||
let blogs = [["Test post2", "Testicy Test"],
|
let blogs = [["I didn't like Wordpress","So... Yeah, I didn't like wordpress very much, it's pretty clunky and I don't have much control over the webpage, and it's kinda not that fun to use, I'm glad I tried it out though because I kind of know how to use it know I suppose, I might copy over the wordpress back over to this so I can use it myself for fun I suppose."],
|
||||||
|
["Test post2", "Testicy Test"],
|
||||||
["Test post", "Testy test!"]]
|
["Test post", "Testy test!"]]
|
||||||
|
|
||||||
|
|||||||
@ -1,82 +0,0 @@
|
|||||||
///////////////////////////
|
|
||||||
// ADD THE CONTENT
|
|
||||||
///////////////////////////
|
|
||||||
|
|
||||||
let div = document.getElementById('main');
|
|
||||||
let divText = div.innerHTML;
|
|
||||||
|
|
||||||
console.log(divText);
|
|
||||||
|
|
||||||
let newPageHTML = `
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8"/>
|
|
||||||
<title>DeaDvey's Domain</title>
|
|
||||||
<link rel="icon" href="../favicon.png">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../index.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="header main">
|
|
||||||
<img class="header-image" /><br/><a href="http://deadvey.com">Home page</a> <a href="/blog/index.html">Blogs</a> <a href="/videos/index.html">Videos</a><hr/>
|
|
||||||
</div>
|
|
||||||
<div class="main">
|
|
||||||
${divText}
|
|
||||||
<div id="links">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="footer">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>`
|
|
||||||
|
|
||||||
document.body.innerHTML = newPageHTML //apply the template
|
|
||||||
|
|
||||||
///////////////////////////
|
|
||||||
// ADD THE LINKS
|
|
||||||
///////////////////////////
|
|
||||||
|
|
||||||
function loadContent(page, content, header) {
|
|
||||||
console.log(page)
|
|
||||||
let blogText = content
|
|
||||||
console.log(blogText)
|
|
||||||
let newPageHTML = `
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8"/>
|
|
||||||
<title>DeaDvey's Domain</title>
|
|
||||||
<link rel="icon" href="../favicon.png">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../index.css">
|
|
||||||
</h ead>
|
|
||||||
<body>
|
|
||||||
<div class="header main">
|
|
||||||
<img class="header-image" /><br/><a href="http://deadvey.com">Home page</a> <a href="/blog/index.html">Blogs</a> <a href="/videos/index.html">Videos</a><hr/>
|
|
||||||
</div>
|
|
||||||
<div class="main">
|
|
||||||
<h1>${header}</h1>
|
|
||||||
${content}
|
|
||||||
<div id="links">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="footer">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>`
|
|
||||||
document.body.innerHTML = newPageHTML
|
|
||||||
}
|
|
||||||
|
|
||||||
let linksDiv = document.getElementById("links")
|
|
||||||
|
|
||||||
let linksText
|
|
||||||
|
|
||||||
for (let length = blogs.length; length > 0; length--) {
|
|
||||||
console.log(length)
|
|
||||||
|
|
||||||
linksText += (`<li><a href='#' onclick='loadContent(${length}, "${blogs[length-1][1]}", "${blogs[length-1][0]}")'>${blogs[length-1][0]}</a></li>`)
|
|
||||||
}
|
|
||||||
|
|
||||||
linksText = linksText.slice(9) //Remove the "undefined" at the start of the string
|
|
||||||
|
|
||||||
document.getElementById("links").innerHTML = linksText;
|
|
||||||
|
|
||||||
@ -5,5 +5,5 @@
|
|||||||
|
|
||||||
<script src="blogs.js">
|
<script src="blogs.js">
|
||||||
</script>
|
</script>
|
||||||
<script src="home-template.js">
|
<script src="template.js">
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
123
blog/template.js
Executable file
123
blog/template.js
Executable file
@ -0,0 +1,123 @@
|
|||||||
|
///////////////////////////
|
||||||
|
// ADD THE CONTENT
|
||||||
|
///////////////////////////
|
||||||
|
|
||||||
|
let div = document.getElementById('main');
|
||||||
|
let divText = div.innerHTML;
|
||||||
|
|
||||||
|
console.log(divText);
|
||||||
|
|
||||||
|
let newPageHTML = `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<title>DeaDvey's Domain</title>
|
||||||
|
<link rel="icon" href="../favicon.png">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header main">
|
||||||
|
<img class="header-image" /><br/><a href="../index.html">Home page</a> <a href="/blog/index.html">Blogs</a> <a href="/videos/index.html">Videos</a><hr/>
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
${divText}
|
||||||
|
<div id="links">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<hr/>
|
||||||
|
<li>
|
||||||
|
Internal:
|
||||||
|
<li><a href="theunderlandcouk" >theunderland webpages (internal link)</a></li>
|
||||||
|
<li><a href="experiments.html" >Experiments (internal link)</a></li>
|
||||||
|
<br/>
|
||||||
|
External:
|
||||||
|
<li><a href="https://github.com/DeaDvey" >Github (external link)</a></li>
|
||||||
|
<li><a href="https://gitlab.com/deadvey" >Gitlab (external link)</a></li>
|
||||||
|
<li><a href="https://mastodon.social/@DeaDvey" >Mastadon.social (external link)</a></li>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>`
|
||||||
|
|
||||||
|
document.body.innerHTML = newPageHTML //apply the template
|
||||||
|
|
||||||
|
///////////////////////////
|
||||||
|
// ADD THE LINKS
|
||||||
|
///////////////////////////
|
||||||
|
|
||||||
|
function loadContent(page, content, header) {
|
||||||
|
console.log(page)
|
||||||
|
let blogText = content
|
||||||
|
console.log(blogText)
|
||||||
|
let newPageHTML = `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<title>DeaDvey's Domain</title>
|
||||||
|
<link rel="icon" href="../favicon.png">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header main">
|
||||||
|
<img class="header-image" /><br/><a href="../index.html">Home page</a> <a href="/blog/index.html">Blogs</a> <a href="/videos/index.html">Videos</a><hr/>
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<h1 class="blog-title">${header}</h1>
|
||||||
|
<p class="blog-content">${content}</p>
|
||||||
|
<div id="links">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<hr/>
|
||||||
|
<li>
|
||||||
|
Internal:
|
||||||
|
<li><a href="theunderlandcouk" >theunderland webpages (internal link)</a></li>
|
||||||
|
<li><a href="experiments.html" >Experiments (internal link)</a></li>
|
||||||
|
<br/>
|
||||||
|
External:
|
||||||
|
<li><a href="https://github.com/DeaDvey" >Github (external link)</a></li>
|
||||||
|
<li><a href="https://gitlab.com/deadvey" >Gitlab (external link)</a></li>
|
||||||
|
<li><a href="https://mastodon.social/@DeaDvey" >Mastadon.social (external link)</a></li>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>`
|
||||||
|
document.body.innerHTML = newPageHTML
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeQuotes(value) {
|
||||||
|
return value.replace(/["'&<>]/g, function (char) {
|
||||||
|
switch (char) {
|
||||||
|
case '"':
|
||||||
|
return """;
|
||||||
|
case "'":
|
||||||
|
return "'";
|
||||||
|
case "&":
|
||||||
|
return "&";
|
||||||
|
case "<":
|
||||||
|
return "<";
|
||||||
|
case ">":
|
||||||
|
return ">";
|
||||||
|
default:
|
||||||
|
return char;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let linksDiv = document.getElementById("links")
|
||||||
|
|
||||||
|
let linksText
|
||||||
|
|
||||||
|
let length = blogs.length
|
||||||
|
|
||||||
|
for (let page = 0; page < length; page++) {
|
||||||
|
console.log(length)
|
||||||
|
|
||||||
|
linksText += (`<li><a href='#' onclick='loadContent(${page}, "${escapeQuotes(blogs[page][1])}", "${escapeQuotes(blogs[page][0])}")'>${escapeQuotes(blogs[page][0])}</a></li>`)
|
||||||
|
}
|
||||||
|
|
||||||
|
linksText = linksText.slice(9) //Remove the "undefined" at the start of the string
|
||||||
|
|
||||||
|
document.getElementById("links").innerHTML = linksText;
|
||||||
16
index.css
16
index.css
@ -2,7 +2,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-left: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
.header-image {
|
.header-image {
|
||||||
content: url("header-image.png");
|
content: url("header-image.png");
|
||||||
@ -37,3 +37,17 @@ a:active {
|
|||||||
color: pink;
|
color: pink;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blog-content {
|
||||||
|
text-align: center;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|||||||
10
index.html
10
index.html
@ -3,16 +3,6 @@
|
|||||||
Welcome to my personal website! I hope you have a good time<br/>
|
Welcome to my personal website! I hope you have a good time<br/>
|
||||||
Feel free to click the links above for more content!<br/>
|
Feel free to click the links above for more content!<br/>
|
||||||
Also, see below for links to my other situations<br/>
|
Also, see below for links to my other situations<br/>
|
||||||
<ol>
|
|
||||||
Internal:
|
|
||||||
<li><a href="theunderlandcouk" >theunderland webpages (internal link)</a></li>
|
|
||||||
<li><a href="experiments.html" >Experiments (internal link)</a></li>
|
|
||||||
<br/>
|
|
||||||
External:
|
|
||||||
<li><a href="https://github.com/DeaDvey" >Github (external link)</a></li>
|
|
||||||
<li><a href="https://gitlab.com/deadvey" >Gitlab (external link)</a></li>
|
|
||||||
<li><a href="https://mastodon.social/@DeaDvey" >Mastadon.social (external link)</a></li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="template.js">
|
<script src="template.js">
|
||||||
|
|||||||
11
template.js
11
template.js
@ -20,6 +20,17 @@ let newPageHTML = `
|
|||||||
${divText}
|
${divText}
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
|
<hr/>
|
||||||
|
<li>
|
||||||
|
Internal:
|
||||||
|
<li><a href="theunderlandcouk" >theunderland webpages (internal link)</a></li>
|
||||||
|
<li><a href="experiments.html" >Experiments (internal link)</a></li>
|
||||||
|
<br/>
|
||||||
|
External:
|
||||||
|
<li><a href="https://github.com/DeaDvey" >Github (external link)</a></li>
|
||||||
|
<li><a href="https://gitlab.com/deadvey" >Gitlab (external link)</a></li>
|
||||||
|
<li><a href="https://mastodon.social/@DeaDvey" >Mastadon.social (external link)</a></li>
|
||||||
|
</li>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>`
|
</html>`
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user