Update blog.html

blakebyer · Jul 4, 2024 · 5357ec7 · 5357ec7
1 parent 4944b1a
commit 5357ec7
Showing 1 changed file with 28 additions and 3 deletions.
diff --git a/docs/blog.html b/docs/blog.html
@@ -57,6 +57,16 @@
         section {
             margin-top: 20px;
         }
+        .post {
+            margin-bottom: 20px;
+        }
+        .post h2 {
+            margin: 0;
+            font-size: 1.8em;
+        }
+        .post p {
+            margin-bottom: 10px;
+        }
         footer {
             text-align: center;
             padding: 10px 0;
@@ -80,18 +90,33 @@ <h1>Blake Byer</h1>
                 </ul>
             </nav>
         </header>
-        <section>
+        <section id="blog-posts">
             <h2>Blog</h2>
-            <p>Content of your blog goes here.</p>
         </section>
         <footer>
             &copy; Blake Byer <span id="currentYear"></span>
         </footer>
     </div>
 
-    <!-- JavaScript to update the current year -->
     <script>
         document.getElementById('currentYear').textContent = new Date().getFullYear();
+
+        fetch('posts.json')
+            .then(response => response.json())
+            .then(posts => {
+                const blogPostsSection = document.getElementById('blog-posts');
+                posts.forEach(post => {
+                    const postDiv = document.createElement('div');
+                    postDiv.classList.add('post');
+                    postDiv.innerHTML = `
+                        <h2>${post.title}</h2>
+                        <p><em>${post.date}</em></p>
+                        ${post.content}
+                    `;
+                    blogPostsSection.appendChild(postDiv);
+                });
+            })
+            .catch(error => console.error('Error loading posts:', error));
     </script>
 </body>
 </html>