teascade/Teascade.net
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Basic functionality pretty much done

Browse Source
This commit is contained in:
Allexit 2016-11-03 01:24:27 +02:00
parent 58da074263
commit f5263e030d
18 changed files with 399 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
blog/index.html
View File

@ -1,32 +1,41 @@
<html>
<head>
<link rel="stylesheet" href="../css/main.css">
<script src="../js/main.js"></script>
<link rel="stylesheet" href="/css/main.css">
<script type="text/javascript" src="/blogposts/blogposts.json"></script>
<script type="text/javascript" src="/js/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="main('blog')">
<div class="cont">
<div class="teacup">
<img src="../img/teascade_cropped.svg"></img>
<img src="/img/teascade_cropped.svg"></img>
</div>
<div class="stuffarea">
<ul class="navbar">
<a href="#" id="about-link"><li><div class="button">About</div></li></a>
<a href="games" id="games-link"><li><div class="button">Games</div></li></a>
<a href="blog" id="blog-link"><li><div class="button">Blog</div></li></a>
<a href="/" id="about-link"><li><div class="button">About</div></li></a>
<a href="/games" id="games-link"><li><div class="button">Games</div></li></a>
<a href="#" id="blog-link"><li><div class="button">Blog</div></li></a>
</ul>
<div id="about" class="hiddenarea">
<div id="about" class="hiddenarea" >
<h1>Teascade</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
<p>Teascade about file!<br>
This is a random link: <a href="http://google.fi">link</a></p>
</div>
<div id="games" class="hiddenarea">
<div id="games" class="hiddenarea" >
<h1>Games</h1>
<p>Games shall be listed here!</p>
<p>Here I'm going to list all my games from my <a href="https://teascade.itch.io">itch.io</a></p>
</div>
<div id="blog">
<div id="blog" >
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
<p>Some other contact info and useless garbage about me.</p>
<p>Welcome to my weird and messy blog!</p>
<noscript><p>
I'm awfully sorry though, I tried my best, but I couldn't implement a blog system
without it taking a butt-load of space and files while being Non-Javascript friendly.
<p>So this means no blogs for you, M. No-Javascript!</p>
</p></noscript>
</div>
<div id="blogtext" class="hiddenarea" >
</div>
</div>
</div>

3
blogposts-md/021116_2346_first.md Normal file
View File

@ -0,0 +1,3 @@
# First blogpost!
Test! This is just a test blogpost!

7
blogposts-md/blogposts.json Normal file
View File

@ -0,0 +1,7 @@
[
{
"title": "First blogpost!",
"source": "021116_2346_first.html",
"time": 1478123391045
}
]

2
blogposts/021116_2346_first.html Normal file
View File

@ -0,0 +1,2 @@
<h1>First blogpost!</h1>
<p>Test! This is just a test blogpost!</p>

1
blogposts/blogposts.json Normal file
View File

@ -0,0 +1 @@
window.blogpostDataStr = '[ { "title": "First blogpost!", "source": "021116_2346_first.html", "time": 1478123391045 }]';

43
blogtext/index.html Normal file
View File

@ -0,0 +1,43 @@
<html>
<head>
<link rel="stylesheet" href="/css/main.css">
<script type="text/javascript" src="/blogposts/blogposts.json"></script>
<script type="text/javascript" src="/js/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="main('blogtext')">
<div class="cont">
<div class="teacup">
<img src="/img/teascade_cropped.svg"></img>
</div>
<div class="stuffarea">
<ul class="navbar">
<a href="/" id="about-link"><li><div class="button">About</div></li></a>
<a href="/games" id="games-link"><li><div class="button">Games</div></li></a>
<a href="/blog" id="blog-link"><li><div class="button">Blog</div></li></a>
</ul>
<div id="about" class="hiddenarea" >
<h1>Teascade</h1>
<p>Teascade about file!<br>
This is a random link: <a href="http://google.fi">link</a></p>
</div>
<div id="games" class="hiddenarea" >
<h1>Games</h1>
<p>Here I'm going to list all my games from my <a href="https://teascade.itch.io">itch.io</a></p>
</div>
<div id="blog" class="hiddenarea" >
<h1>Blog</h1>
<p>Welcome to my weird and messy blog!</p>
<noscript><p>
I'm awfully sorry though, I tried my best, but I couldn't implement a blog system
without it taking a butt-load of space and files while being Non-Javascript friendly.
<p>So this means no blogs for you, M. No-Javascript!</p>
</p></noscript>
</div>
<div id="blogtext" >
</div>
</div>
</div>
</body>
</html>

100
build.py Normal file
View File

@ -0,0 +1,100 @@
import markdown
import glob
def generate_template():
content_file = open('src/template.html', 'r')
content = content_file.read()
content_file.close()
about_file = open('src/about.md', 'r')
about = about_file.read()
about_file.close()
games_file = open('src/games.md', 'r')
games = games_file.read()
games_file.close()
blog_file = open('src/blog.md', 'r')
blog = blog_file.read()
blog_file.close()
content = content.replace("$about_content$", markdown.markdown(about, output_format="html5"))
content = content.replace("$games_content$", markdown.markdown(games, output_format="html5"))
content = content.replace("$blog_content$", markdown.markdown(blog, output_format="html5"))
return content
def generate_page(template, page):
content = template.replace("$page$", page);
rel_about = "/"
rel_games = "/games"
rel_blog = "/blog"
about_hidden = 'class="hiddenarea"'
games_hidden = 'class="hiddenarea"'
blog_hidden = 'class="hiddenarea"'
blogtext_hidden = 'class="hiddenarea"'
if (page == "about"):
rel_about = "#"
about_hidden = ""
elif (page == "games"):
rel_games = "#"
games_hidden = ""
elif (page == "blog"):
rel_blog = "#"
blog_hidden = ""
elif (page == "blogtext"):
rel_blogtext = "#"
blogtext_hidden = ""
content = content.replace("$relative_about$", rel_about);
content = content.replace("$relative_games$", rel_games);
content = content.replace("$relative_blog$", rel_blog);
content = content.replace("$about_is_hidden$", about_hidden);
content = content.replace("$games_is_hidden$", games_hidden);
content = content.replace("$blog_is_hidden$", blog_hidden);
content = content.replace("$blogtext_is_hidden$", blogtext_hidden);
return content;
def build_blogposts():
blogposts = glob.glob("blogposts-md/*.md")
for path in blogposts:
with open(path, "r") as f:
with open(path.replace("blogposts-md", "blogposts").replace(".md", ".html"), "w+") as f2:
f2.write(markdown.markdown(f.read(), output_format="html5"))
with open("blogposts-md/blogposts.json", "r") as f:
with open("blogposts/blogposts.json", "w+") as f2:
f2.write("window.blogpostDataStr = '" + f.read().replace("\n", "") + "';")
def generate():
#md = markdown.markdown("hi **this is** a test markdown _right?_ `wait, let's test _the *code* block_`", output_format="html5")
print("Building blogposts..")
build_blogposts()
print("Done!\n")
print("Generating template..")
template = generate_template()
print("Done!\n")
print("Generating pages..")
with open('index.html', 'w+') as f:
f.write(generate_page(template, "about"))
print("About (index.html) done!")
with open('games/index.html', 'w+') as f:
f.write(generate_page(template, "games"))
print("Games done!")
with open('blog/index.html', 'w+') as f:
f.write(generate_page(template, "blog"))
print("Blog done!")
with open('blogtext/index.html', 'w+') as f:
f.write(generate_page(template, "blogtext"))
print("Blogtext done!")
print("Done!\n")
generate()

14
css/main.css
View File

@ -60,6 +60,20 @@ body, html {
.cont .stuffarea h1 {
margin: 0;
color: #ff0091; }
.cont .stuffarea h2 {
padding: 0.5em;
color: #ff0091;
transition: 0.2s; }
.cont .stuffarea h2 p {
padding-left: 1em;
color: #636363;
display: inline;
vertical-align: middle;
font-size: 0.4em; }
.cont .stuffarea h2:hover {
cursor: pointer;
background-color: #191919;
transition: 0.2s; }
.cont .stuffarea p {
color: #fff; }
.cont .stuffarea ul.navbar {

2
css/main.css.map
View File

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "AAIA,UAAW;EACR,gBAAgB,EAHZ,OAAO;EAIX,WAAW,EAAE,qBAAqB;EAClC,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAGb,yBAA0B;EACvB,KAAM;IACH,OAAO,EAAE,gBAAgB;IACzB,KAAK,EAAE,IAAI;IAEX,aAAQ;MACL,MAAM,EAAE,eAAe;MAEvB,iBAAI;QACD,YAAY,EAAE,GAAG;QACjB,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE,eAAe;QACvB,WAAW,EAAE,GAAG;QAChB,cAAc,EAAE,GAAG;IAIzB,gBAAW;MACR,WAAW,EAAE,GAAG;MAChB,aAAa,EAAE,YAAY;MAC3B,KAAK,EAAE,cAAc;MAErB,0BAAU;QACP,OAAO,EAAE,YAAY;QACrB,YAAY,EAAE,gBAAgB;AAM1C,KAAM;EACH,OAAO,EAAE,WAAW;EACpB,cAAc,EAAE,GAAG;EACnB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EAEZ,aAAQ;IACL,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,OAAO,EAAC,IAAI;IACZ,eAAe,EAAC,MAAM;IACtB,WAAW,EAAC,MAAM;IAClB,gBAAgB,EAAE,OAAe;IAEjC,iBAAI;MACD,KAAK,EAAE,GAAG;MACV,UAAU,EAAE,IAAI;MAChB,MAAM,EAAE,IAAI;EAKlB,gBAAW;IACR,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,EAAE;IAChB,aAAa,EAAE,EAAE;IAEjB,4BAAY;MACT,UAAU,EAAE,MAAM;MAClB,MAAM,EAAE,CAAC;MACT,KAAK,EAAE,CAAC;MACR,QAAQ,EAAE,MAAM;MAChB,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC;IAGb,oBAAI;MACD,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC;IAIb,mBAAG;MACA,MAAM,EAAE,CAAC;MACT,KAAK,EAzFP,OAAO;IA4FR,kBAAE;MACC,KAAK,EA5FJ,IAAI;IA+FR,0BAAU;MAEP,YAAY,EAAE,GAAG;MACjB,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,MAAM;MACnB,cAAc,EAAE,GAAG;MAEnB,kCAAQ;QACL,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;QAChB,MAAM,EAAE,IAAI;MAGf,6BAAG;QACA,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,KAAK;QACd,gBAAgB,EA9GrB,OAAO;QA+GF,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,IAAI;QAChB,KAAK,EAAE,OAAe;QACtB,YAAY,EAAE,iBAAsB;QACpC,SAAS,EAAE,aAAa;QAExB,qCAAQ;UACL,SAAS,EAAE,YAAY;MAG7B,2CAAiB;QACd,WAAW,EAAE,iBAAsB;MAEtC,mCAAS;QACN,gBAAgB,EAAE,OAAY;QAC9B,UAAU,EAAE,IAAI;QAChB,MAAM,EAAE,OAAO",
"mappings": "AAIA,UAAW;EACR,gBAAgB,EAHZ,OAAO;EAIX,WAAW,EAAE,qBAAqB;EAClC,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAGb,yBAA0B;EACvB,KAAM;IACH,OAAO,EAAE,gBAAgB;IACzB,KAAK,EAAE,IAAI;IAEX,aAAQ;MACL,MAAM,EAAE,eAAe;MAEvB,iBAAI;QACD,YAAY,EAAE,GAAG;QACjB,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE,eAAe;QACvB,WAAW,EAAE,GAAG;QAChB,cAAc,EAAE,GAAG;IAIzB,gBAAW;MACR,WAAW,EAAE,GAAG;MAChB,aAAa,EAAE,YAAY;MAC3B,KAAK,EAAE,cAAc;MAErB,0BAAU;QACP,OAAO,EAAE,YAAY;QACrB,YAAY,EAAE,gBAAgB;AAM1C,KAAM;EACH,OAAO,EAAE,WAAW;EACpB,cAAc,EAAE,GAAG;EACnB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EAEZ,aAAQ;IACL,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,OAAO,EAAC,IAAI;IACZ,eAAe,EAAC,MAAM;IACtB,WAAW,EAAC,MAAM;IAClB,gBAAgB,EAAE,OAAe;IAEjC,iBAAI;MACD,KAAK,EAAE,GAAG;MACV,UAAU,EAAE,IAAI;MAChB,MAAM,EAAE,IAAI;EAKlB,gBAAW;IACR,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,EAAE;IAChB,aAAa,EAAE,EAAE;IAEjB,4BAAY;MACT,UAAU,EAAE,MAAM;MAClB,MAAM,EAAE,CAAC;MACT,KAAK,EAAE,CAAC;MACR,QAAQ,EAAE,MAAM;MAChB,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC;IAGb,oBAAI;MACD,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC;IAIb,mBAAG;MACA,MAAM,EAAE,CAAC;MACT,KAAK,EAzFP,OAAO;IA4FR,mBAAG;MACA,OAAO,EAAE,KAAK;MACd,KAAK,EA9FP,OAAO;MA+FL,UAAU,EAAE,IAAI;MAEhB,qBAAE;QACC,YAAY,EAAE,GAAG;QACjB,KAAK,EAAE,OAAY;QACnB,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,MAAM;QACtB,SAAS,EAAE,KAAK;IAItB,yBAAS;MACN,MAAM,EAAE,OAAO;MACf,gBAAgB,EAAE,OAAe;MACjC,UAAU,EAAE,IAAI;IAGnB,kBAAE;MACC,KAAK,EAhHJ,IAAI;IAmHR,0BAAU;MAEP,YAAY,EAAE,GAAG;MACjB,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,MAAM;MACnB,cAAc,EAAE,GAAG;MAEnB,kCAAQ;QACL,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;QAChB,MAAM,EAAE,IAAI;MAGf,6BAAG;QACA,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,KAAK;QACd,gBAAgB,EAlIrB,OAAO;QAmIF,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,IAAI;QAChB,KAAK,EAAE,OAAe;QACtB,YAAY,EAAE,iBAAsB;QACpC,SAAS,EAAE,aAAa;QAExB,qCAAQ;UACL,SAAS,EAAE,YAAY;MAG7B,2CAAiB;QACd,WAAW,EAAE,iBAAsB;MAEtC,mCAAS;QACN,gBAAgB,EAAE,OAAY;QAC9B,UAAU,EAAE,IAAI;QAChB,MAAM,EAAE,OAAO",
"sources": ["../scss/main.scss"],
"names": [],
"file": "main.css"

35
games/index.html
View File

@ -1,32 +1,41 @@
<html>
<head>
<link rel="stylesheet" href="../css/main.css">
<script src="../js/main.js"></script>
<link rel="stylesheet" href="/css/main.css">
<script type="text/javascript" src="/blogposts/blogposts.json"></script>
<script type="text/javascript" src="/js/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="main('games')">
<div class="cont">
<div class="teacup">
<img src="../img/teascade_cropped.svg"></img>
<img src="/img/teascade_cropped.svg"></img>
</div>
<div class="stuffarea">
<ul class="navbar">
<a href="#" id="about-link"><li><div class="button">About</div></li></a>
<a href="games" id="games-link"><li><div class="button">Games</div></li></a>
<a href="blog" id="blog-link"><li><div class="button">Blog</div></li></a>
<a href="/" id="about-link"><li><div class="button">About</div></li></a>
<a href="#" id="games-link"><li><div class="button">Games</div></li></a>
<a href="/blog" id="blog-link"><li><div class="button">Blog</div></li></a>
</ul>
<div id="about" class="hiddenarea">
<div id="about" class="hiddenarea" >
<h1>Teascade</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
<p>Teascade about file!<br>
This is a random link: <a href="http://google.fi">link</a></p>
</div>
<div id="games">
<div id="games" >
<h1>Games</h1>
<p>Games shall be listed here!</p>
<p>Here I'm going to list all my games from my <a href="https://teascade.itch.io">itch.io</a></p>
</div>
<div id="blog" class="hiddenarea">
<div id="blog" class="hiddenarea" >
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
<p>Some other contact info and useless garbage about me.</p>
<p>Welcome to my weird and messy blog!</p>
<noscript><p>
I'm awfully sorry though, I tried my best, but I couldn't implement a blog system
without it taking a butt-load of space and files while being Non-Javascript friendly.
<p>So this means no blogs for you, M. No-Javascript!</p>
</p></noscript>
</div>
<div id="blogtext" class="hiddenarea" >
</div>
</div>
</div>

24
index.html
View File

@ -1,7 +1,8 @@
<html>
<head>
<link rel="stylesheet" href="/css/main.css">
<script src="/js/main.js"></script>
<script type="text/javascript" src="/blogposts/blogposts.json"></script>
<script type="text/javascript" src="/js/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="main('about')">
@ -16,18 +17,25 @@
<a href="/games" id="games-link"><li><div class="button">Games</div></li></a>
<a href="/blog" id="blog-link"><li><div class="button">Blog</div></li></a>
</ul>
<div id="about">
<div id="about" >
<h1>Teascade</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
<p>Teascade about file!<br>
This is a random link: <a href="http://google.fi">link</a></p>
</div>
<div id="games" class="hiddenarea">
<div id="games" class="hiddenarea" >
<h1>Games</h1>
<p>Games shall be listed here!</p>
<p>Here I'm going to list all my games from my <a href="https://teascade.itch.io">itch.io</a></p>
</div>
<div id="blog" class="hiddenarea">
<div id="blog" class="hiddenarea" >
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
<p>Some other contact info and useless garbage about me.</p>
<p>Welcome to my weird and messy blog!</p>
<noscript><p>
I'm awfully sorry though, I tried my best, but I couldn't implement a blog system
without it taking a butt-load of space and files while being Non-Javascript friendly.
<p>So this means no blogs for you, M. No-Javascript!</p>
</p></noscript>
</div>
<div id="blogtext" class="hiddenarea" >
</div>
</div>
</div>

44
js/main.js
View File

@ -7,8 +7,18 @@ function main(page) {
document.getElementById("about-link").onclick = function () { return openPage("about"); };
document.getElementById("games-link").onclick = function () { return openPage("games"); };
document.getElementById("blog-link").onclick = function () { return openPage("blog"); };
addBlogposts();
var search = window.location.search;
if (search != "") {
search = search.slice(1, -1);
var parts = search.split("=");
if (parts[0] == "id") {
setBlogText(parts[1] + ".html", function () { });
}
}
}
function openPage(page) {
function openPage(page, new_url) {
if (new_url === void 0) { new_url = null; }
if (page == window.currPage) {
return;
}
@ -17,7 +27,7 @@ function openPage(page) {
window.currPage = page;
document.getElementById(page).style.opacity = "0";
document.getElementById(page).className = "";
var target = page;
var target = new_url || page;
var targetPg = "/" + target;
if (target == "about") {
target = "";
@ -40,3 +50,33 @@ function slideOpacity(callback, step) {
}
}, 2);
}
function addBlogposts() {
window.blogpostData = JSON.parse(window.blogpostDataStr);
var div = document.getElementById("blog");
var blogpostData = window.blogpostData.sort(function (a, b) { return b.time - a.time; });
blogpostData.forEach(function (val) {
var title = document.createElement("h2");
title.innerHTML = val.title;
var timestamp = document.createElement("p");
timestamp.className += "timestamp";
timestamp.innerHTML = new Date(val.time).toUTCString();
title.appendChild(timestamp);
div.appendChild(title);
setBlogText(val.source, function () {
title.onclick = function () { return openPage("blogtext", "blogtext?id=" + val.source.slice(0, -5)); };
});
});
}
function setBlogText(source, callback) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("blogtext").innerHTML = xmlhttp.responseText;
callback();
}
}
};
xmlhttp.open("GET", "/blogposts/" + source, true);
xmlhttp.send();
}

20
scss/main.scss
View File

@ -90,6 +90,26 @@ body, html {
color: $pink;
}
h2 {
padding: 0.5em;
color: $pink;
transition: 0.2s;
p {
padding-left: 1em;
color: $dark + #444;
display: inline;
vertical-align: middle;
font-size: 0.4em;
}
}
h2:hover {
cursor: pointer;
background-color: $dark - #060606;
transition: 0.2s;
}
p {
color: $regular;
}

5
src/about.md Normal file
View File

@ -0,0 +1,5 @@
Teascade
========
Teascade about file!
This is a random link: [link](http://google.fi)

10
src/blog.md Normal file
View File

@ -0,0 +1,10 @@
Blog
====
Welcome to my weird and messy blog!
<noscript><p>
I'm awfully sorry though, I tried my best, but I couldn't implement a blog system
without it taking a butt-load of space and files while being Non-Javascript friendly.
<p>So this means no blogs for you, M. No-Javascript!</p>
</p></noscript>

4
src/games.md Normal file
View File

@ -0,0 +1,4 @@
Games
=====
Here I'm going to list all my games from my [itch.io](https://teascade.itch.io)

34
src/template.html Normal file
View File

@ -0,0 +1,34 @@
<html>
<head>
<link rel="stylesheet" href="/css/main.css">
<script type="text/javascript" src="/blogposts/blogposts.json"></script>
<script type="text/javascript" src="/js/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="main('$page$')">
<div class="cont">
<div class="teacup">
<img src="/img/teascade_cropped.svg"></img>
</div>
<div class="stuffarea">
<ul class="navbar">
<a href="$relative_about$" id="about-link"><li><div class="button">About</div></li></a>
<a href="$relative_games$" id="games-link"><li><div class="button">Games</div></li></a>
<a href="$relative_blog$" id="blog-link"><li><div class="button">Blog</div></li></a>
</ul>
<div id="about" $about_is_hidden$ >
$about_content$
</div>
<div id="games" $games_is_hidden$ >
$games_content$
</div>
<div id="blog" $blog_is_hidden$ >
$blog_content$
</div>
<div id="blogtext" $blogtext_is_hidden$ >
</div>
</div>
</div>
</body>
</html>

55
ts/main.ts
View File

@ -2,6 +2,8 @@
interface Window {
currPage: string;
currOpacity: number;
blogpostDataStr: string;
blogpostData: {title: string, source: string, time: number}[];
}
@ -16,9 +18,20 @@ function main(page: string) {
document.getElementById("about-link").onclick = () => openPage("about");
document.getElementById("games-link").onclick = () => openPage("games");
document.getElementById("blog-link").onclick = () => openPage("blog");
addBlogposts();
let search = window.location.search;
if (search != "") {
search = search.slice(1, -1);
let parts = search.split("=");
if (parts[0] == "id") {
setBlogText(parts[1] + ".html", () => {});
}
}
}
function openPage(page: string) {
function openPage(page: string, new_url: string = null) {
if (page == window.currPage) { return; }
slideOpacity(() => {
@ -26,7 +39,7 @@ function openPage(page: string) {
window.currPage = page;
document.getElementById(page).style.opacity = "0";
document.getElementById(page).className = "";
let target = page;
let target = new_url || page;
let targetPg = "/" + target;
if (target == "about") { target = ""; targetPg = ""; };
@ -48,3 +61,41 @@ function slideOpacity(callback: () => void, step: number) {
}
}, 2);
}
function addBlogposts() {
window.blogpostData = JSON.parse(window.blogpostDataStr);
let div = document.getElementById("blog");
let blogpostData = window.blogpostData.sort((a, b) => {return b.time - a.time});
blogpostData.forEach((val) => {
let title = document.createElement("h2");
title.innerHTML = val.title;
let timestamp = document.createElement("p");
timestamp.className += "timestamp";
timestamp.innerHTML = new Date(val.time).toUTCString();
title.appendChild(timestamp);
div.appendChild(title);
setBlogText(val.source, () => {
title.onclick = () => openPage("blogtext", "blogtext?id=" + val.source.slice(0, -5));
})
})
}
function setBlogText(source: string, callback: () => void) {
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = () => {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("blogtext").innerHTML = xmlhttp.responseText;
callback();
}
}
}
xmlhttp.open("GET", "/blogposts/" + source, true);
xmlhttp.send();
}