From 360f3fb31ec11fd28c0f0d270e5bd41a9c989c3e Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Fri, 28 Jul 2023 19:59:34 +0800 Subject: [PATCH] New blog post --- blog/blog.js | 177 +++++++++--------- blog/index.html | 4 +- ...day-After-the-Launch-of-Leilukins-Hub.html | 47 +++++ changelog/index.html | 5 + home.html | 11 +- 5 files changed, 145 insertions(+), 99 deletions(-) create mode 100644 blog/posts/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html diff --git a/blog/blog.js b/blog/blog.js index 7ee52239..eb6364b2 100644 --- a/blog/blog.js +++ b/blog/blog.js @@ -1,20 +1,20 @@ /*Welcome to the script file! Your 1st time here, you should update - the basic info section to include your name and website/social - media link (if desired). Most of the time, you will just come - here to update the posts array. However, you can also edit or - add your own scripts to do whatever you like!*/ + the basic info section to include your name and website/social + media link (if desired). Most of the time, you will just come + here to update the posts array. However, you can also edit or + add your own scripts to do whatever you like!*/ //TABLE OF CONTENTS - // 1. Basic Info - // 2. Posts Array - // 3. Creating HTML Sections to Be Inserted (Header, Footer, etc) - // 4. Inserting the Sections Into our Actual HTML Pages + // 1. Basic Info + // 2. Posts Array + // 3. Creating HTML Sections to Be Inserted (Header, Footer, etc) + // 4. Inserting the Sections Into our Actual HTML Pages //----------------------------- //==[ 1. BASIC INFO ]== -let blogName = "Leilukin's Blog"; +let blogName = "Leilukin's Hub Blog"; 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) @@ -23,18 +23,19 @@ let authorLink = "https://leilukin.neocities.org/"; // Enter your website, socia //==[ 2. POSTS ARRAY ]== /*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. - 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 - alter the scripts if you want to use a different naming convention*/ + This will cause all the right links to appear and work. + 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 + 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 - use a date it must still follow that format.*/ + use a date it must still follow that format.*/ let postsArray = [ - [ "posts/2023-05-09-Onboard-the-Dracula-Daily-Hype-Train.html" ], - [ "posts/2023-01-28-Leilukins-Hub-Now-Has-a-Blog.html", encodeURI( `Leilukin's Hub Now Has a Blog!` ) ] -//[ "posts/2020-11-10-Special-Characters-Example.html", encodeURI( 'Spéci@l "Character\'s" Examp|e' ) ], -//[ "posts/2020-11-10-Post-Template.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-05-09-Onboard-the-Dracula-Daily-Hype-Train.html" ], + [ "posts/2023-01-28-Leilukins-Hub-Now-Has-a-Blog.html", encodeURI( `Leilukin's Hub Now Has a Blog!` ) ] + // [ "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) let relativePath = "."; if ( url.includes("posts/") ) { - relativePath = ".."; + relativePath = ".."; } //Variable for my main site URL @@ -68,80 +69,80 @@ let currentIndex = -1; 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) if ( ! currentFilename.endsWith(".html") ) { - currentFilename += ".html"; + currentFilename += ".html"; } let i; for (i = 0; i < postsArray.length; i++) { - if ( postsArray[i][0] === currentFilename ) { - currentIndex = i; - } + if ( postsArray[i][0] === currentFilename ) { + currentIndex = i; + } } //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 function formatPostTitle(i) { - // Check if there is an alternate post title - 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. - return decodeURI(postsArray[i][1]); - } else { - //If there is no alternate post title, check if the post uses the date format or not, and return the proper title + // Check if there is an alternate post title + 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. + return decodeURI(postsArray[i][1]); + } else { + //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 ) ) ) { return postsArray[i][0].slice(17,-5).replace(/-/g," "); - } else { - return postsArray[i][0].slice(6,-5).replace(/-/g," "); + } else { + return postsArray[i][0].slice(6,-5).replace(/-/g," "); + } } - } } //Get the current post title and date (if we are on a post page) let currentPostTitle = ""; let niceDate = ""; if ( currentIndex > -1 ) { - currentPostTitle = formatPostTitle( currentIndex ); - //Generate the "nice to read" version of date - if ( postDateFormat.test ( postsArray[currentIndex][0].slice( 6,17 ) ) ) { - let monthSlice = postsArray[currentIndex][0].slice( 11,13 ); - let month = ""; - if ( monthSlice === "01") { month = "Jan";} - else if ( monthSlice === "02") { month = "Feb";} - else if ( monthSlice === "03") { month = "Mar";} - else if ( monthSlice === "04") { month = "Apr";} - else if ( monthSlice === "05") { month = "May";} - else if ( monthSlice === "06") { month = "Jun";} - else if ( monthSlice === "07") { month = "Jul";} - else if ( monthSlice === "08") { month = "Aug";} - else if ( monthSlice === "09") { month = "Sep";} - else if ( monthSlice === "10") { month = "Oct";} - else if ( monthSlice === "11") { month = "Nov";} - else if ( monthSlice === "12") { month = "Dec";} + currentPostTitle = formatPostTitle( currentIndex ); + //Generate the "nice to read" version of date + if ( postDateFormat.test ( postsArray[currentIndex][0].slice( 6,17 ) ) ) { + let monthSlice = postsArray[currentIndex][0].slice( 11,13 ); + let month = ""; + if ( monthSlice === "01") { month = "Jan";} + else if ( monthSlice === "02") { month = "Feb";} + else if ( monthSlice === "03") { month = "Mar";} + else if ( monthSlice === "04") { month = "Apr";} + else if ( monthSlice === "05") { month = "May";} + else if ( monthSlice === "06") { month = "Jun";} + else if ( monthSlice === "07") { month = "Jul";} + else if ( monthSlice === "08") { month = "Aug";} + else if ( monthSlice === "09") { month = "Sep";} + else if ( monthSlice === "10") { month = "Oct";} + else if ( monthSlice === "11") { month = "Nov";} + else if ( monthSlice === "12") { month = "Dec";} 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. function formatPostLink(i) { - let postTitle_i = ""; - if ( postsArray[i].length > 1 ) { - postTitle_i = decodeURI(postsArray[i][1]); - } else { + let postTitle_i = ""; + if ( postsArray[i].length > 1 ) { + postTitle_i = decodeURI(postsArray[i][1]); + } else { if ( postDateFormat.test ( postsArray[i][0].slice( 6,17 ) ) ) { postTitle_i = postsArray[i][0].slice(17,-5).replace(/-/g," "); - } else { - postTitle_i = postsArray[i][0].slice(6,-5).replace(/-/g," "); + } else { + postTitle_i = postsArray[i][0].slice(6,-5).replace(/-/g," "); + } + } + if ( postDateFormat.test ( postsArray[i][0].slice( 6,17 ) ) ) { + return '
  • ' + postsArray[i][0].slice(6,16) + " \u00BB " + postTitle_i + '
    • '; + } else { + return '
  • ' + postTitle_i + '
    • '; } - } - if ( postDateFormat.test ( postsArray[i][0].slice( 6,17 ) ) ) { - return '
  • ' + postsArray[i][0].slice(6,16) + " \u00BB " + postTitle_i + '
    • '; - } else { - return '
  • ' + postTitle_i + '
    • '; - } } let postListHTML = ""; @@ -150,15 +151,15 @@ let recentPostsCutoff = 3; //Hey YOU! Change this number to set how many recent let recentPostListHTML = "

    Recent Posts:

    '; + recentPostListHTML += '
  • \u00BB more posts
    • '; } else { - recentPostListHTML += ""; + recentPostListHTML += ""; } //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 post! That's what the following code handles.*/ if ( postsArray.length < 2 ) { - nextprevHTML = 'Blog'; + nextprevHTML = 'Blog'; } else if ( currentIndex === 0 ) { - prevlink = postsArray[currentIndex + 1][0]; - nextprevHTML = 'Blog | Previous Post \u00BB'; + prevlink = postsArray[currentIndex + 1][0]; + nextprevHTML = 'Blog | Previous Post \u00BB'; } else if ( currentIndex === postsArray.length - 1 ) { - nextlink = postsArray[currentIndex - 1][0]; - nextprevHTML = '\u00AB Next Post | Blog'; + nextlink = postsArray[currentIndex - 1][0]; + nextprevHTML = '\u00AB Next Post | Blog'; } else if ( 0 < currentIndex && currentIndex < postsArray.length - 1 ) { - nextlink = postsArray[currentIndex - 1][0]; - prevlink = postsArray[currentIndex + 1][0]; - nextprevHTML = '\u00AB Next Post | Blog | Previous Post \u00BB'; + nextlink = postsArray[currentIndex - 1][0]; + prevlink = postsArray[currentIndex + 1][0]; + nextprevHTML = '\u00AB Next Post | Blog | Previous Post \u00BB'; } //----------------------------- @@ -188,37 +189,37 @@ if ( postsArray.length < 2 ) { //==[ 4. INSERTING THE SECTIONS INTO OUR ACTUAL HTML PAGES ]== /*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 - one particular blog post where we don't want the footer to appear, - we simply don't put a