First Push

This commit is contained in:
nsturtz 2021-01-20 16:46:23 -05:00
commit a832461316
6 changed files with 167 additions and 0 deletions

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
posts
image

57
index.html Normal file
View File

@ -0,0 +1,57 @@
<title>Loading BLOG</title>
<meta http-equiv="refresh" content="35; URL=index.php" />
<link rel="stylesheet" href="matrix.css">
<canvas id="c"></canvas>
<script>
c = document.getElementById("c");
var ctx = c.getContext("2d");
//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;
//chinese characters - taken from the unicode charset
var chinese = "MIF";
//converting the string into an array of single characters
chinese = chinese.split(" ");
var font_size = 25;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
drops[x] = 1;
//drawing the characters
function draw()
{
//Black BG for the canvas
//translucent BG to show trail
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0F0"; //green text
ctx.font = font_size + "px arial";
//looping over drops
for(var i = 0; i < drops.length; i++)
{
//a random chinese character to print
var text = chinese[Math.floor(Math.random()*chinese.length)];
//x = i*font_size, y = value of drops[i]*font_size
ctx.fillText(text, i*font_size, drops[i]*font_size);
//sending the drop back to the top randomly after it has crossed the screen
//adding a randomness to the reset to make the drops scattered on the Y axis
if(drops[i]*font_size > c.height && Math.random() > 0.91)
drops[i] = 0;
//incrementing Y coordinate
drops[i]++;
}
}
setInterval(draw, 90);
</script>

55
index.php Normal file
View File

@ -0,0 +1,55 @@
<?php require "markdown.php"; ?>
<!DOCTYPE html>
<html>
<head>
<title>MIF's Blog</title>
<style>
body, html {
background: lightgrey;
margin: auto;
width: 70%;
}
.post {
background: white;
padding: 5px 5px;
margin-bottom: 20px;
white-space: pre-wrap;
}
.post h1 {
margin: 0px;
}
.header {
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>My Blog</h1>
<h3>Cool things go here.</h3>
</div>
<?php
$specificPost = $_GET["post"];
$postCount = 2;
# Show specific post or all
if (!isset($specificPost)) {
for ($post = $postCount; $post >= 1; $post--) {
makePost($post, FALSE);
}
} else {
makePost($specificPost, TRUE);
}
function makePost($post, $showRest) {
$text = file_get_contents("posts/" . strval($post));
$text = parse($text, $showRest, $post);
echo("<div class='post' title='Post number $post'>" . $text . "</div>");
}
?>
</body>
</html>

38
markdown.php Normal file
View File

@ -0,0 +1,38 @@
<?php
function parse($string, $showRest, $post) {
$asHtml = $string;
$asHtml = htmlspecialchars($asHtml);
# Replace "# " with h1
$asHtml = preg_replace("/# (.+)/i", "<h1>$1</h1>", $asHtml);
# Replace [text](link) with HTML links. Prevent ][ and )( in them
$findBetween = "([^\n|\[\]]+)";
# Parse images first, since they require a ! in front of them
$imageRegex = "/\!\[" . $findBetween . "\]\(" . $findBetween . "\)/i";
$asHtml = preg_replace($imageRegex, "<img src='$2' title='$1'>", $asHtml);
# Parse links, Prevent ! at beginning
$linkRegex = "/(?!\!)\[" . $findBetween . "\]\(" . $findBetween . "\)/i";
$asHtml = preg_replace($linkRegex, "<a href='$2'>$1</a>", $asHtml);
#
$asHtml = preg_replace("/```([^```]+)```/s", "<code>$1</code>", $asHtml);
$asHtml = preg_replace("/\`([^\n]+)\`/i", "<code>$1</code>", $asHtml);
# Replace --- and after with read more if needed
if ($showRest == TRUE) {
$asHtml = preg_replace("/---/s", "", $asHtml);
$asHtml .= "<a href='index.php'>Back</a>";
} else {
$asHtml = preg_replace("/---(.+)/s", "<p><a href='?post=$post'>Read more</a></p>", $asHtml);
}
# Replace two newlines with a paragraph element
//$asHtml = preg_replace("/[\n][\n](.*)/i", "<p>$1</p>", $asHtml);
return $asHtml;
}
?>

7
matrix.css Normal file
View File

@ -0,0 +1,7 @@
/* Credit https://codepen.io/P3R0/pen/MwgoKv */
/*basic reset*/
* {margin: 0; padding: 0;}
/*adding a black bg to the body to make things clearer*/
body {background: black;}
canvas {display: block;}

8
readme.md Normal file
View File

@ -0,0 +1,8 @@
# TinyBlog
See it in action: http://petabyte.heb12.com/blog/
## Setup
Make a folder called "posts", and touch files 1 - however many posts you want.
Edit them with markdown, and bam.
(You have to change index.php $postCount to how many posts you have. This will be fixed soon.)