Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

New blog post

This commit is contained in:
Helen Chong 2023-07-28 19:59:34 +08:00
parent 3937a0e337
commit 360f3fb31e
5 changed files with 145 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
blog/blog.js
View File

@ -1,20 +1,20 @@
/*Welcome to the script file! Your 1st time here, you should update /*Welcome to the script file! Your 1st time here, you should update
the basic info section to include your name and website/social the basic info section to include your name and website/social
media link (if desired). Most of the time, you will just come media link (if desired). Most of the time, you will just come
here to update the posts array. However, you can also edit or here to update the posts array. However, you can also edit or
add your own scripts to do whatever you like!*/ add your own scripts to do whatever you like!*/
//TABLE OF CONTENTS //TABLE OF CONTENTS
// 1. Basic Info // 1. Basic Info
// 2. Posts Array // 2. Posts Array
// 3. Creating HTML Sections to Be Inserted (Header, Footer, etc) // 3. Creating HTML Sections to Be Inserted (Header, Footer, etc)
// 4. Inserting the Sections Into our Actual HTML Pages // 4. Inserting the Sections Into our Actual HTML Pages
//----------------------------- //-----------------------------
//==[ 1. BASIC INFO ]== //==[ 1. BASIC INFO ]==
let blogName = "Leilukin's Blog"; let blogName = "Leilukin's Hub Blog";
let authorName = "Leilukin"; let authorName = "Leilukin";
let authorLink = "https://leilukin.neocities.org/"; // Enter your website, social media, etc. Some way for people to tell you they like your blog! (Leaving it empty is okay too) let authorLink = "https://leilukin.neocities.org/"; // Enter your website, social media, etc. Some way for people to tell you they like your blog! (Leaving it empty is okay too)
@ -23,18 +23,19 @@ let authorLink = "https://leilukin.neocities.org/"; // Enter your website, socia
//==[ 2. POSTS ARRAY ]== //==[ 2. POSTS ARRAY ]==
/*Each time you make a new post, add the filepath here at the top of postsArray. /*Each time you make a new post, add the filepath here at the top of postsArray.
This will cause all the right links to appear and work. This will cause all the right links to appear and work.
NOTE: It's important to follow this exact naming convention, because the scripts NOTE: It's important to follow this exact naming convention, because the scripts
below are expecting it ( 'posts/YYYY-MM-DD-Title-of-Your-Post.html', ). You can below are expecting it ( 'posts/YYYY-MM-DD-Title-of-Your-Post.html', ). You can
alter the scripts if you want to use a different naming convention*/ alter the scripts if you want to use a different naming convention*/
/*UPDATE: as of version 1.3, you may omit the date if you would like. But if you /*UPDATE: as of version 1.3, you may omit the date if you would like. But if you
use a date it must still follow that format.*/ use a date it must still follow that format.*/
let postsArray = [ let postsArray = [
[ "posts/2023-05-09-Onboard-the-Dracula-Daily-Hype-Train.html" ], [ "posts/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html", encodeURI( `My First Birthday After the Launch of Leilukin's Hub` ) ],
[ "posts/2023-01-28-Leilukins-Hub-Now-Has-a-Blog.html", encodeURI( `Leilukin's Hub Now Has a Blog!` ) ] [ "posts/2023-05-09-Onboard-the-Dracula-Daily-Hype-Train.html" ],
//[ "posts/2020-11-10-Special-Characters-Example.html", encodeURI( 'Spéci@l "Character\'s" Examp|e' ) ], [ "posts/2023-01-28-Leilukins-Hub-Now-Has-a-Blog.html", encodeURI( `Leilukin's Hub Now Has a Blog!` ) ]
//[ "posts/2020-11-10-Post-Template.html" ] // [ "posts/2020-11-10-Special-Characters-Example.html", encodeURI( 'Spéci@l "Character\'s" Examp|e' ) ],
// [ "posts/2020-11-10-Post-Template.html" ]
]; ];
//----------------------------- //-----------------------------
@ -49,7 +50,7 @@ const postDateFormat = /\d{4}\-\d{2}\-\d{2}\-/;
//Check if you are in posts (if so, the links will have to go up a directory) //Check if you are in posts (if so, the links will have to go up a directory)
let relativePath = "."; let relativePath = ".";
if ( url.includes("posts/") ) { if ( url.includes("posts/") ) {
relativePath = ".."; relativePath = "..";
} }
//Variable for my main site URL //Variable for my main site URL
@ -68,80 +69,80 @@ let currentIndex = -1;
let currentFilename = url.substring(url.lastIndexOf('posts/')); let currentFilename = url.substring(url.lastIndexOf('posts/'));
//Depending on the web server settings (Or something?), the browser url may or may not have ".html" at the end. If not, we must add it back in to match the posts array. (12-19-2022 fix) //Depending on the web server settings (Or something?), the browser url may or may not have ".html" at the end. If not, we must add it back in to match the posts array. (12-19-2022 fix)
if ( ! currentFilename.endsWith(".html") ) { if ( ! currentFilename.endsWith(".html") ) {
currentFilename += ".html"; currentFilename += ".html";
} }
let i; let i;
for (i = 0; i < postsArray.length; i++) { for (i = 0; i < postsArray.length; i++) {
if ( postsArray[i][0] === currentFilename ) { if ( postsArray[i][0] === currentFilename ) {
currentIndex = i; currentIndex = i;
} }
} }
//Convert the post url to readable post name. E.g. changes "2020-10-10-My-First-Post.html" to "My First Post" //Convert the post url to readable post name. E.g. changes "2020-10-10-My-First-Post.html" to "My First Post"
//Or pass along the "special characters" version of the title if one exists //Or pass along the "special characters" version of the title if one exists
function formatPostTitle(i) { function formatPostTitle(i) {
// Check if there is an alternate post title // Check if there is an alternate post title
if ( postsArray[i].length > 1 ) { if ( postsArray[i].length > 1 ) {
//Remember how we had to use encodeURI for special characters up above? Now we use decodeURI to get them back. //Remember how we had to use encodeURI for special characters up above? Now we use decodeURI to get them back.
return decodeURI(postsArray[i][1]); return decodeURI(postsArray[i][1]);
} else { } else {
//If there is no alternate post title, check if the post uses the date format or not, and return the proper title //If there is no alternate post title, check if the post uses the date format or not, and return the proper title
if ( postDateFormat.test ( postsArray[i][0].slice( 6,17 ) ) ) { if ( postDateFormat.test ( postsArray[i][0].slice( 6,17 ) ) ) {
return postsArray[i][0].slice(17,-5).replace(/-/g," "); return postsArray[i][0].slice(17,-5).replace(/-/g," ");
} else { } else {
return postsArray[i][0].slice(6,-5).replace(/-/g," "); return postsArray[i][0].slice(6,-5).replace(/-/g," ");
}
} }
}
} }
//Get the current post title and date (if we are on a post page) //Get the current post title and date (if we are on a post page)
let currentPostTitle = ""; let currentPostTitle = "";
let niceDate = ""; let niceDate = "";
if ( currentIndex > -1 ) { if ( currentIndex > -1 ) {
currentPostTitle = formatPostTitle( currentIndex ); currentPostTitle = formatPostTitle( currentIndex );
//Generate the "nice to read" version of date //Generate the "nice to read" version of date
if ( postDateFormat.test ( postsArray[currentIndex][0].slice( 6,17 ) ) ) { if ( postDateFormat.test ( postsArray[currentIndex][0].slice( 6,17 ) ) ) {
let monthSlice = postsArray[currentIndex][0].slice( 11,13 ); let monthSlice = postsArray[currentIndex][0].slice( 11,13 );
let month = ""; let month = "";
if ( monthSlice === "01") { month = "Jan";} if ( monthSlice === "01") { month = "Jan";}
else if ( monthSlice === "02") { month = "Feb";} else if ( monthSlice === "02") { month = "Feb";}
else if ( monthSlice === "03") { month = "Mar";} else if ( monthSlice === "03") { month = "Mar";}
else if ( monthSlice === "04") { month = "Apr";} else if ( monthSlice === "04") { month = "Apr";}
else if ( monthSlice === "05") { month = "May";} else if ( monthSlice === "05") { month = "May";}
else if ( monthSlice === "06") { month = "Jun";} else if ( monthSlice === "06") { month = "Jun";}
else if ( monthSlice === "07") { month = "Jul";} else if ( monthSlice === "07") { month = "Jul";}
else if ( monthSlice === "08") { month = "Aug";} else if ( monthSlice === "08") { month = "Aug";}
else if ( monthSlice === "09") { month = "Sep";} else if ( monthSlice === "09") { month = "Sep";}
else if ( monthSlice === "10") { month = "Oct";} else if ( monthSlice === "10") { month = "Oct";}
else if ( monthSlice === "11") { month = "Nov";} else if ( monthSlice === "11") { month = "Nov";}
else if ( monthSlice === "12") { month = "Dec";} else if ( monthSlice === "12") { month = "Dec";}
niceDate = postsArray[currentIndex][0].slice( 14,16 ) + " " + month + ", " + postsArray[currentIndex][0].slice( 6,10 ); niceDate = postsArray[currentIndex][0].slice( 14,16 ) + " " + month + ", " + postsArray[currentIndex][0].slice( 6,10 );
} }
} }
//Generate the Post List HTML, which will be shown on the "Archive" page. //Generate the Post List HTML, which will be shown on the "Archive" page.
function formatPostLink(i) { function formatPostLink(i) {
let postTitle_i = ""; let postTitle_i = "";
if ( postsArray[i].length > 1 ) { if ( postsArray[i].length > 1 ) {
postTitle_i = decodeURI(postsArray[i][1]); postTitle_i = decodeURI(postsArray[i][1]);
} else { } else {
if ( postDateFormat.test ( postsArray[i][0].slice( 6,17 ) ) ) { if ( postDateFormat.test ( postsArray[i][0].slice( 6,17 ) ) ) {
postTitle_i = postsArray[i][0].slice(17,-5).replace(/-/g," "); postTitle_i = postsArray[i][0].slice(17,-5).replace(/-/g," ");
} else { } else {
postTitle_i = postsArray[i][0].slice(6,-5).replace(/-/g," "); postTitle_i = postsArray[i][0].slice(6,-5).replace(/-/g," ");
}
}
if ( postDateFormat.test ( postsArray[i][0].slice( 6,17 ) ) ) {
return '<li><a href="' + relativePath + '/'+ postsArray[i][0] +'">' + postsArray[i][0].slice(6,16) + " \u00BB " + postTitle_i + '</a></li>';
} else {
return '<li><a href="' + relativePath + '/'+ postsArray[i][0] +'">' + postTitle_i + '</a></li>';
} }
}
if ( postDateFormat.test ( postsArray[i][0].slice( 6,17 ) ) ) {
return '<li><a href="' + relativePath + '/'+ postsArray[i][0] +'">' + postsArray[i][0].slice(6,16) + " \u00BB " + postTitle_i + '</a></li>';
} else {
return '<li><a href="' + relativePath + '/'+ postsArray[i][0] +'">' + postTitle_i + '</a></li>';
}
} }
let postListHTML = "<ul>"; let postListHTML = "<ul>";
for ( let i = 0; i < postsArray.length; i++ ) { for ( let i = 0; i < postsArray.length; i++ ) {
postListHTML += formatPostLink(i); postListHTML += formatPostLink(i);
} }
postListHTML += "</ul>"; postListHTML += "</ul>";
@ -150,15 +151,15 @@ let recentPostsCutoff = 3; //Hey YOU! Change this number to set how many recent
let recentPostListHTML = "<h2>Recent Posts:</h2><ul>"; let recentPostListHTML = "<h2>Recent Posts:</h2><ul>";
let numberOfRecentPosts = Math.min( recentPostsCutoff, postsArray.length ); let numberOfRecentPosts = Math.min( recentPostsCutoff, postsArray.length );
for ( let i = 0; i < numberOfRecentPosts; i++ ) { for ( let i = 0; i < numberOfRecentPosts; i++ ) {
recentPostListHTML += formatPostLink(i); recentPostListHTML += formatPostLink(i);
} }
/*If you've written more posts than can fit in the Recent Posts List, /*If you've written more posts than can fit in the Recent Posts List,
then we'll add a link to the archive so readers can find the rest of then we'll add a link to the archive so readers can find the rest of
your wonderful posts and be filled with knowledge.*/ your wonderful posts and be filled with knowledge.*/
if ( postsArray.length > recentPostsCutoff ) { if ( postsArray.length > recentPostsCutoff ) {
recentPostListHTML += '<li class="moreposts"><a href=' + relativePath + '/archive.html>\u00BB more posts</a></li></ul>'; recentPostListHTML += '<li class="moreposts"><a href=' + relativePath + '/archive.html>\u00BB more posts</a></li></ul>';
} else { } else {
recentPostListHTML += "</ul>"; recentPostListHTML += "</ul>";
} }
//Generate the Next and Previous Post Links HTML //Generate the Next and Previous Post Links HTML
@ -170,17 +171,17 @@ let prevlink = "";
a "Next Post" link, right? And vice versa with the oldest a "Next Post" link, right? And vice versa with the oldest
post! That's what the following code handles.*/ post! That's what the following code handles.*/
if ( postsArray.length < 2 ) { if ( postsArray.length < 2 ) {
nextprevHTML = '<a href="' + relativePath + '/index.html">Blog</a>'; nextprevHTML = '<a href="' + relativePath + '/index.html">Blog</a>';
} else if ( currentIndex === 0 ) { } else if ( currentIndex === 0 ) {
prevlink = postsArray[currentIndex + 1][0]; prevlink = postsArray[currentIndex + 1][0];
nextprevHTML = '<a href="' + relativePath + '/index.html">Blog</a> | <a href="'+ relativePath + '/' + prevlink +'">Previous Post \u00BB</a>'; nextprevHTML = '<a href="' + relativePath + '/index.html">Blog</a> | <a href="'+ relativePath + '/' + prevlink +'">Previous Post \u00BB</a>';
} else if ( currentIndex === postsArray.length - 1 ) { } else if ( currentIndex === postsArray.length - 1 ) {
nextlink = postsArray[currentIndex - 1][0]; nextlink = postsArray[currentIndex - 1][0];
nextprevHTML = '<a href="' + relativePath + '/' + nextlink +'">\u00AB Next Post</a> | <a href="' + relativePath + '/index.html">Blog</a>'; nextprevHTML = '<a href="' + relativePath + '/' + nextlink +'">\u00AB Next Post</a> | <a href="' + relativePath + '/index.html">Blog</a>';
} else if ( 0 < currentIndex && currentIndex < postsArray.length - 1 ) { } else if ( 0 < currentIndex && currentIndex < postsArray.length - 1 ) {
nextlink = postsArray[currentIndex - 1][0]; nextlink = postsArray[currentIndex - 1][0];
prevlink = postsArray[currentIndex + 1][0]; prevlink = postsArray[currentIndex + 1][0];
nextprevHTML = '<a href="' + relativePath + '/'+ nextlink +'">\u00AB Next Post</a> | <a href="' + relativePath + '/index.html">Blog</a> | <a href="' + relativePath + '/'+ prevlink +'">Previous Post \u00BB</a>'; nextprevHTML = '<a href="' + relativePath + '/'+ nextlink +'">\u00AB Next Post</a> | <a href="' + relativePath + '/index.html">Blog</a> | <a href="' + relativePath + '/'+ prevlink +'">Previous Post \u00BB</a>';
} }
//----------------------------- //-----------------------------
@ -188,37 +189,37 @@ if ( postsArray.length < 2 ) {
//==[ 4. INSERTING THE SECTIONS INTO OUR ACTUAL HTML PAGES ]== //==[ 4. INSERTING THE SECTIONS INTO OUR ACTUAL HTML PAGES ]==
/*Here we check if each relevant div exists. If so, we inject the correct HTML! /*Here we check if each relevant div exists. If so, we inject the correct HTML!
NOTE: All of these sections are optional to use on any given page. For example, if there's NOTE: All of these sections are optional to use on any given page. For example, if there's
one particular blog post where we don't want the footer to appear, one particular blog post where we don't want the footer to appear,
we simply don't put a <div id="footer"> on that page.*/ we simply don't put a <div id="footer"> on that page.*/
if (document.getElementById("nextprev")) { if (document.getElementById("nextprev")) {
document.getElementById("nextprev").innerHTML = nextprevHTML; document.getElementById("nextprev").innerHTML = nextprevHTML;
} }
if (document.getElementById("postlistdiv")) { if (document.getElementById("postlistdiv")) {
document.getElementById("postlistdiv").innerHTML = postListHTML; document.getElementById("postlistdiv").innerHTML = postListHTML;
} }
if (document.getElementById("recentpostlistdiv")) { if (document.getElementById("recentpostlistdiv")) {
document.getElementById("recentpostlistdiv").innerHTML = recentPostListHTML; document.getElementById("recentpostlistdiv").innerHTML = recentPostListHTML;
} }
if (document.getElementById("header")) { if (document.getElementById("header")) {
document.getElementById("header").innerHTML = headerHTML; document.getElementById("header").innerHTML = headerHTML;
} }
if (document.getElementById("blogTitleH1")) { if (document.getElementById("blogTitleH1")) {
document.getElementById("blogTitleH1").innerHTML = blogTitle; document.getElementById("blogTitleH1").innerHTML = blogTitle;
} }
if (document.getElementById("postTitleH1")) { if (document.getElementById("postTitleH1")) {
document.getElementById("postTitleH1").innerHTML = currentPostTitle; document.getElementById("postTitleH1").innerHTML = currentPostTitle;
} }
if (document.getElementById("postDate")) { if (document.getElementById("postDate")) {
document.getElementById("postDate").innerHTML = niceDate; document.getElementById("postDate").innerHTML = niceDate;
} }
if (document.getElementById("footer")) { if (document.getElementById("footer")) {
document.getElementById("footer").innerHTML = footerHTML; document.getElementById("footer").innerHTML = footerHTML;
} }
//Dynamically set the HTML <title> tag from the postTitle variable we created earlier //Dynamically set the HTML <title> tag from the postTitle variable we created earlier
//The <title> tag content is what shows up on browser tabs //The <title> tag content is what shows up on browser tabs
if (document.title === "Blog Post") { if (document.title === "Blog Post") {
document.title = currentPostTitle + ` | Blog | Leilukin's Hub`; document.title = currentPostTitle + ` | Blog | Leilukin's Hub`;
} }

4
blog/index.html
View File

@ -27,9 +27,9 @@
<div id="header">This site requires JavaScript!</div> <div id="header">This site requires JavaScript!</div>
<div id="content"> <div id="content">
<h1>Welcome to my blog!</h1> <h1>Welcome to Leilukin's Hub Blog!</h1>
<p>This is a blog that is hosted on my own website. I hope you enjoy your time here!</p> <p>This is my blog that is hosted on my own personal website. Hope you enjoy your time here!</p>
<div id="recentpostlistdiv"></div> <div id="recentpostlistdiv"></div>

47
blog/posts/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:url" content="https://leilukin.neocities.org/blog/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:title" content="My First Birthday After the Launch of Leilukin's Hub">
<meta name="author" content="Leilukin">
<meta property="og:description" content="28th July 2023 marks my first birthday after the launch of this personal website.">
<link rel="stylesheet" href="../blog.css" type="text/css" media="all">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<script src="../blog.js" defer></script>
<title>Blog Post</title> <!-- If you leave title as "Blog Post", it will automatically be updated to the post title -->
</head>
<body>
<div id="container">
<div id="header">...</div>
<div id="content">
<h1 id="postTitleH1"></h1>
<h4 id="postDate"></h4>
<p>July 28th is my birthday, and in 2023, it also marks my first birthday after the launch of this personal website. I have had a nice birthday this year.</p>
<p>I spent the moments counting down to my birthday by playing <cite>Cassette Beasts</cite>, which has become one of my all-time favourite video games, to the extent that I am planning to make a shrine for it on this site. I defeated <a href="https://wiki.cassettebeasts.com/wiki/Lamento_Mori" target="_blank">Lamento Mori</a>, who in the lore of <cite>Cassette Beasts</cite> is an <a href="https://wiki.cassettebeasts.com/wiki/Archangel" target="_blank">Archangel</a>, one of the eldritch entities in the game's settings, that specifically embodies humanity's fear of death. It is both amusing and poetic that I celebrated the countdown to my birthday by defeating a boss in a video game that represents death.</p>
<p>Since I have been playing and loving <cite>Cassette Beasts</cite>, and I want to support indie developers of indie games I love, I decided to purchase the Deluxe Edition on Steam, which includes the soundtrack, the art book and the Cosplay Pack as a birthday gift for myself. I received the base game as a Steam gift from a friend, and now I chose to use my money to support the developers myself as well. Not to mention, the music of <cite>Cassette Beasts</cite> is amazing. "Same Old Story", the battle theme of the Archangels, in particular, has become one of my all-time favourite battle themes in video games.</p>
<p>I had my birthday celebration with my family and received birthday wishes from friends.</p>
<p>Happy Birthday to me!</p>
<div id="nextprev"></div>
</div> <!-- end of div id="content" -->
<div id="footer"></div>
</div> <!-- end of div id="container" -->
</body>
</html>

5
changelog/index.html
View File

@ -39,6 +39,11 @@
Archive: <span class="date-style">Latest</span> | <a href="./2022.html">2022</a> | <a href="./layouts.html">Website Layouts</a> Archive: <span class="date-style">Latest</span> | <a href="./2022.html">2022</a> | <a href="./layouts.html">Website Layouts</a>
</p> </p>
<p class="date-style">July 28, 2023:</p>
<ul>
<li>New blog post: <a href="/blog/posts/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html">My First Birthday After the Launch of Leilukin's Hub</a></li>
</ul>
<p class="date-style">July 27, 2023:</p> <p class="date-style">July 27, 2023:</p>
<ul> <ul>
<li>For <a href="/mymods/">my mods page</a>, adjusted the background width of the individual mods.</li> <li>For <a href="/mymods/">my mods page</a>, adjusted the background width of the individual mods.</li>

11
home.html
View File

@ -64,16 +64,9 @@
<section class="content-section"> <section class="content-section">
<h2>Updates</h2> <h2>Updates</h2>
<div class="text-box"> <div class="text-box">
<p class="date-style">July 27, 2023:</p> <p class="date-style">July 28, 2023:</p>
<ul> <ul>
<li>For <a href="/mymods/">my mods page</a>, adjusted the background width of the individual mods.</li> <li>New blog post: <a href="/blog/posts/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html">My First Birthday After the Launch of Leilukin's Hub</a></li>
<li>Rearranged my <a href="/links/">Links</a> page.</li>
<li>For my <a href="/shrines/starwarskotor/"><cite>Star Wars: Knights of the Old Republic</cite> shrine</a>:</li>
<ul>
<li>Updated the main page.</li>
<li>Moved links to <cite>KotOR</cite> fan listings to the sidebar.</li>
<li>Added articles I recommend to the <a href="/shrines/starwarskotor/articles/">articles page</a>.</li>
</ul>
</ul> </ul>
</div> </div>
<a href="/changelog">View all site changelog</a> <a href="/changelog">View all site changelog</a>