How I Coded This Blog*

(note: Blog* = the untilted dot lol blog at this website)

I have implemented a kind of experimental code for my new blog. This code defines a multifunctional sidebar interface combined with blog post navigation, a popup message system (that people can optionally click), and my attempt at dynamic RSS JSON feed generation. Below, I explain every line and component to highlight how the code works and its technical structure.

mySidebar

The sidebar is represented by the <nav> element. It is positioned to remain fixed on the left side of the page, occupying the full height. Here I will explain its inline CSS styles (I use inline CSS for everything because it's easier to keep track of which CSS styles are linked to a specific HTML div):

The reason for the id="mySidebar" identifier is to allow JavaScript functions to interact with this element dynamically.

What's Inside The <nav>?

You will note that most everything is in block format which means that block elements stack on top of each other.

  1. <div id="makespaceforbutton">:

    • Acts as an empty container for any potential dynamic content placed via JavaScript and also to, as the id obviously puts it, “make space for button”. There is a border-bottom:1px solid #ddd line, the space between the content and the border is about 35px (padding), and all text is aligned center for consistency.

  2. <a id="aboutLink"> and its styles:

    • Serves as a navigational link titled “About This Blog.”
    • Attributes: href="javascript:void(0) prevents default link navigation, instead relying on onclick="showAboutPopup()" to show the “About This Blog” popup.
    • Styling (background-color: #616161, color:white, etc.) gives a greyish background with white text and ensures a user-friendly, visually distinct appearance.

  3. Posts Section Toggle (<a id="postsBtn">):

    • Exists to enable the visibility of the list of available posts as a clickable button. This is managed via the onclick="togglePosts()" handler. All other styles it contains is for aesthetic purposes.

Posts Section

<div id="Demo1"> shows a list of collapsible posts, initially hidden as display:none. It contains individual post links structured as (example):

<a ... onclick="showPost('Post1')">
  <div>
    <span>POST1</span>
    <p>insertdatehere</p>
  </div>
</a>

These links include:

So where the “makespaceforbutton” section is located, there is a <button> element outside the sidebar that toggles its visibility. Key features include:

Informational Popup

<div id="id01"> is a modal overlay designed to display a popup. It uses the following:

CSS Inside <style> Block

The external CSS block includes:

  1. #popup-content:
    • Defines the dimensions and animations of the popup.
    • Responsive Design: Adjusts width under smaller screens for mobile users (width:80% for max-width:768px).

Main Content and Blog Posts

The <div id="content"> represents the main content outside the sidebar:

  1. <div id="defaultMessage">:

    • Displays introductory text for first-time visitors, including FAQs and descriptions of blog functionality. Once you click on any of the blog posts, it disappears and switches to any selected post.

  2. Post Content (<div id="Post1">):

    • Encapsulates individual posts, styled for readability, with sections for headers, metadata, and footer content.
    • Integrates JSON-LD Structured Data (<script type="application/ld+json">): Originally, I did want to integrate some sort of RSS thing, but the problem is that I can't seem to upload files directly to the website's server, and my website/registrar's Cloudflare settings seem to make it difficult to turn web pages into RSS data. So I ended up with JSON-LD, which is actually apparently really only useful for SEO purposes, BUT it can be used as an RSS to a limited but useful extent as well. It took me a while to research and realize that.

JavaScript Functionality

The <script> block governs dynamic behaviors:

  1. generateRSS Function:

    • Scans posts for JSON data, builds an RSS-compatible JSON feed (or at least a semblance of it?), and returns it.
    • Utilizes querySelectorAll to locate elements containing data-rss-feed.

  2. Event Handlers:

    • togglePosts(): Toggles the visibility of the Demo1 container (posts section).
    • showPost(postId): Hides the default message and displays a specified post by its ID.
    • showAboutPopup() and toggleSidebar(): Control popup and sidebar toggling.

  3. Feed Storage: Saves RSS JSON to sessionStorage for quick retrieval.

RSS Feed Copy Button

Finally, the <button> for copying RSS JSON is placed at the bottom-right corner of the viewport. It interacts with the clipboard via navigator.clipboard.writeText().

How Well Did I Do?

This code took me about 3 weeks to get right. I think the JSON thing was the hardest part. Because of how I thought it would be somewhat simple enough to do, and it turned out to be somewhat difficult.

At some point I may add more extra things, so this is just how the code is as of this time in writing.

If you have any feedback of any kind you are welcome to leave it!

For any inquiries or feedback, please contact me at this email right here. (When commenting on a blog post, kindly include “Re: [insert blog post name here]” in the subject line.)