From a965274a315839842a63e18841c6ddb4ec68da82 Mon Sep 17 00:00:00 2001 From: dangrubbb Date: Sat, 28 Feb 2026 16:30:19 -0500 Subject: [PATCH 1/5] Add dynamic blog preview to homepage - Create blog/posts.json for managing blog post metadata - Add blog preview box (max 1/3 screen width) to homepage - Fetch latest post dynamically with image and excerpt - Updates automatically when new posts added to JSON - Styled to fit no-scroll homepage layout - Link to full blog page for each post --- blog/posts.json | 10 ++++++++ index.html | 6 +++++ script.js | 39 +++++++++++++++++++++++++++- style.css | 68 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 122 insertions(+), 1 deletion(-) create mode 100644 blog/posts.json diff --git a/blog/posts.json b/blog/posts.json new file mode 100644 index 0000000..6b67010 --- /dev/null +++ b/blog/posts.json @@ -0,0 +1,10 @@ +[ + { + "id": "01", + "title": "First Blog Post", + "date": "2026-02-28", + "excerpt": "This is the first blog post excerpt. Add your own blog entries by updating this JSON file with a title, date, image path, and excerpt.", + "image": "./src/img/CannotConnect.JPEG", + "slug": "first-blog-post" + } +] diff --git a/index.html b/index.html index 7dd0444..2e45751 100644 --- a/index.html +++ b/index.html @@ -243,6 +243,12 @@ EXCLUSIVE: Leaked mixtape from Darnea's vault

+
+
+

Loading latest post...

+
+
+
diff --git a/script.js b/script.js index 59b84a2..dc80c30 100644 --- a/script.js +++ b/script.js @@ -126,4 +126,41 @@ uncomment the code below. //
CSS
// 
${css.join("\n\n")}
// -// `; \ No newline at end of file +// `; + +// Load latest blog post preview +async function loadLatestBlogPost() { + try { + const response = await fetch('./blog/posts.json'); + const posts = await response.json(); + + if (posts.length === 0) { + document.getElementById('latestBlogPreview').innerHTML = '

No blog posts yet.

'; + return; + } + + // Get the latest post (first in the array) + const latestPost = posts[0]; + + // Create the preview HTML + const previewHTML = ` + ${latestPost.title} +
${new Date(latestPost.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+ ${latestPost.title} +

${latestPost.excerpt}

+ Read more → + `; + + document.getElementById('latestBlogPreview').innerHTML = previewHTML; + } catch (error) { + console.error('Error loading blog posts:', error); + document.getElementById('latestBlogPreview').innerHTML = '

Error loading blog posts.

'; + } +} + +// Load blog preview when page is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', loadLatestBlogPost); +} else { + loadLatestBlogPost(); +} \ No newline at end of file diff --git a/style.css b/style.css index de180ac..a5bffd9 100644 --- a/style.css +++ b/style.css @@ -294,6 +294,74 @@ body { text-decoration: underline; } +/* Blog Preview Box */ +.blog-preview-container { + margin: 30px auto 0; + max-width: 33%; + width: 100%; + display: flex; + justify-content: center; +} + +.blog-preview { + border: 1px solid rgba(155, 169, 180, 0.3); + border-radius: 4px; + padding: 15px; + background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3)); + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); +} + +.blog-preview img { + width: 100%; + height: auto; + max-height: 150px; + object-fit: cover; + border-radius: 3px; + margin-bottom: 10px; +} + +.blog-preview-title { + color: #ffff00; + font-weight: bold; + font-size: 0.95rem; + margin: 10px 0 5px; + text-decoration: none; + display: block; +} + +.blog-preview-title:hover { + text-decoration: underline; +} + +.blog-preview-date { + color: #aa95bd; + font-size: 0.8rem; + margin-bottom: 8px; +} + +.blog-preview-excerpt { + color: #9d9aa4; + font-size: 0.85rem; + line-height: 1.4; + margin: 8px 0 10px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.blog-preview-link { + display: inline-block; + color: #6be1e9; + font-size: 0.8rem; + text-decoration: none; +} + +.blog-preview-link:hover { + text-decoration: underline; +} + /* Push the navigation to the bottom using flexbox spacer */ .bottom-nav { margin-top: auto; -- 2.39.5 From 73f6c462f89b5c5d7d66c2f859ceede7fa81efcd Mon Sep 17 00:00:00 2001 From: dangrubbb Date: Sat, 28 Feb 2026 16:38:42 -0500 Subject: [PATCH 2/5] Make blog page dynamic using JSON data - Blog posts now load from blog/posts.json - Create blog/script.js to dynamically render posts - Each post displays: title, date, content, image - Support hash-based navigation to specific posts - Updated blog/index.html to load posts dynamically - Added styling for blog posts and containers - First post is 'Status' matching the original content --- blog/index.html | 16 +++++-------- blog/posts.json | 7 +++--- blog/script.js | 53 ++++++++++++++++++++++++++++++++++++++++ blog/style.css | 64 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 127 insertions(+), 13 deletions(-) create mode 100644 blog/script.js diff --git a/blog/index.html b/blog/index.html index c059bbc..b1394b7 100644 --- a/blog/index.html +++ b/blog/index.html @@ -237,17 +237,13 @@

dangrubb.net/blog

-
-

Status

-

- dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%. -

-

-
- Cannot Connect -
+ +
+

Loading blog posts...

+
+ - + diff --git a/blog/posts.json b/blog/posts.json index 6b67010..8291784 100644 --- a/blog/posts.json +++ b/blog/posts.json @@ -1,10 +1,11 @@ [ { "id": "01", - "title": "First Blog Post", + "title": "Status", "date": "2026-02-28", - "excerpt": "This is the first blog post excerpt. Add your own blog entries by updating this JSON file with a title, date, image path, and excerpt.", + "excerpt": "dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.", + "content": "

dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.

", "image": "./src/img/CannotConnect.JPEG", - "slug": "first-blog-post" + "slug": "status" } ] diff --git a/blog/script.js b/blog/script.js new file mode 100644 index 0000000..8fd4b6b --- /dev/null +++ b/blog/script.js @@ -0,0 +1,53 @@ +"use strict"; + +// Load and display blog posts from JSON +async function loadBlogPosts() { + try { + const response = await fetch('./posts.json'); + const posts = await response.json(); + + const blogsContainer = document.getElementById('blogsContainer'); + + if (posts.length === 0) { + blogsContainer.innerHTML = '

No blog posts yet.

'; + return; + } + + // Create HTML for each post + const postsHTML = posts.map(post => ` +
+

${post.title}

+
${new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+
+ ${post.content} +
+
+ ${post.title} +
+
+ `).join(''); + + blogsContainer.innerHTML = postsHTML; + } catch (error) { + console.error('Error loading blog posts:', error); + document.getElementById('blogsContainer').innerHTML = '

Error loading blog posts.

'; + } +} + +// Load blog posts when page is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', loadBlogPosts); +} else { + loadBlogPosts(); +} + +// Handle hash-based navigation to specific posts +window.addEventListener('hashchange', () => { + const postId = window.location.hash.slice(1); + if (postId) { + const element = document.getElementById(postId); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + } + } +}); diff --git a/blog/style.css b/blog/style.css index 4c84545..cf818cb 100644 --- a/blog/style.css +++ b/blog/style.css @@ -219,4 +219,68 @@ a:focus-visible { .viewport-image { height: 40vh; /* 60% of the viewport height */ width: auto; /* Maintain aspect ratio */ +} + +/* Blog Posts Styling */ +.blogs-container { + margin: 40px auto 0; + max-width: 65em; + width: 100%; +} + +.blog-post { + margin: 40px 0; + padding: 20px; + border: 1px solid rgba(155, 169, 180, 0.2); + border-radius: 4px; + background: linear-gradient(135deg, rgba(13, 10, 20, 0.4), rgba(50, 30, 80, 0.2)); + scroll-margin-top: 100px; +} + +.blog-post-title { + color: #ffff00; + font-weight: bold; + font-size: 1.8rem; + margin: 0 0 10px; + text-align: center; +} + +.blog-post-date { + color: #aa95bd; + font-size: 0.9rem; + text-align: center; + margin-bottom: 20px; +} + +.blog-post-content { + color: #9d9aa4; + font-size: 0.95rem; + line-height: 1.6; + margin: 20px 0; +} + +.blog-post-content p { + margin: 0 0 15px; +} + +.blog-post-image { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; +} + +.blog-post-image img { + max-width: 100%; + height: auto; + max-height: 60vh; + border-radius: 4px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); +} + +.no-posts, +.error { + text-align: center; + color: #9d9aa4; + padding: 40px 20px; } \ No newline at end of file -- 2.39.5 From e5b6d785ed98064874b32677898808945d306eed Mon Sep 17 00:00:00 2001 From: dangrubbb Date: Sat, 28 Feb 2026 16:42:56 -0500 Subject: [PATCH 3/5] Fix: Image path for homepage preview and center blog content - Use absolute path for image (/blog/src/img/...) so homepage preview loads correctly - Center blog post content with max-width for better readability --- blog/posts.json | 2 +- blog/style.css | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/blog/posts.json b/blog/posts.json index 8291784..84991bc 100644 --- a/blog/posts.json +++ b/blog/posts.json @@ -5,7 +5,7 @@ "date": "2026-02-28", "excerpt": "dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.", "content": "

dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.

", - "image": "./src/img/CannotConnect.JPEG", + "image": "/blog/src/img/CannotConnect.JPEG", "slug": "status" } ] diff --git a/blog/style.css b/blog/style.css index cf818cb..f17182b 100644 --- a/blog/style.css +++ b/blog/style.css @@ -256,7 +256,9 @@ a:focus-visible { color: #9d9aa4; font-size: 0.95rem; line-height: 1.6; - margin: 20px 0; + margin: 20px auto; + text-align: center; + max-width: 600px; } .blog-post-content p { -- 2.39.5 From 447265f7edf0bf2af03cc68b124c3492e62c9010 Mon Sep 17 00:00:00 2001 From: dangrubbb Date: Sat, 28 Feb 2026 16:45:00 -0500 Subject: [PATCH 4/5] Fix: Center blog post content properly - Use flexbox on blog-post container to center all children - Set max-width on post container to constrain width - Ensure content paragraph takes full width and centers text --- blog/style.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/blog/style.css b/blog/style.css index f17182b..d8b38d1 100644 --- a/blog/style.css +++ b/blog/style.css @@ -229,12 +229,16 @@ a:focus-visible { } .blog-post { - margin: 40px 0; + margin: 40px auto; padding: 20px; border: 1px solid rgba(155, 169, 180, 0.2); border-radius: 4px; background: linear-gradient(135deg, rgba(13, 10, 20, 0.4), rgba(50, 30, 80, 0.2)); scroll-margin-top: 100px; + display: flex; + flex-direction: column; + align-items: center; + max-width: 700px; } .blog-post-title { @@ -256,9 +260,9 @@ a:focus-visible { color: #9d9aa4; font-size: 0.95rem; line-height: 1.6; - margin: 20px auto; + margin: 20px 0; text-align: center; - max-width: 600px; + width: 100%; } .blog-post-content p { -- 2.39.5 From c1ab8e831b877442689f2345eaf9f2acce4ad467 Mon Sep 17 00:00:00 2001 From: dangrubbb Date: Sat, 28 Feb 2026 16:52:01 -0500 Subject: [PATCH 5/5] Minor Manual Fixes to Lobster's code --- blog/index.html | 4 ++++ blog/style.css | 2 -- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/blog/index.html b/blog/index.html index b1394b7..799fdad 100644 --- a/blog/index.html +++ b/blog/index.html @@ -238,6 +238,10 @@ dangrubb.net/blog

+

+ <-- back to home +

+

Loading blog posts...

diff --git a/blog/style.css b/blog/style.css index d8b38d1..08bf0ae 100644 --- a/blog/style.css +++ b/blog/style.css @@ -260,9 +260,7 @@ a:focus-visible { color: #9d9aa4; font-size: 0.95rem; line-height: 1.6; - margin: 20px 0; text-align: center; - width: 100%; } .blog-post-content p { -- 2.39.5