Skip to content

Commit

Permalink
added blog-posts.json
Browse files Browse the repository at this point in the history
  • Loading branch information
Venn X authored and Venn X committed Oct 21, 2024
1 parent 5a6eb99 commit be268d0
Show file tree
Hide file tree
Showing 6 changed files with 260 additions and 125 deletions.
112 changes: 44 additions & 68 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,9 @@ <h1 class="source-code-pro-regular"><b>Mono is More</b></h1>
</header>

<main>
<section class="blog-list">
<!-- Latest Blog Post -->
<a href="posts/Break Time.html" class="blog-post" data-title="Break Time" data-published="18-10-2024" data-image="../blog-images/break time.jpg"></a>

</a>

<!-- Blog Post -->
<a href="posts/Whisky and the Sun.html" class="blog-post" data-title="Whisky and the Sun" data-published="13-10-2024" data-image="../blog-images/Whisky and the Sun.jpeg">

</a>

<!-- Blog Post -->
<a href="posts/Sea.html" class="blog-post" data-title="Sea" data-published="11-10-2024" data-image="../blog-images/Sea.JPG">

</a>

<!-- Blog Post -->
<a href="posts/Road.html" class="blog-post" data-title="Road" data-published="11-10-2024" data-image="../blog-images/Road.JPG">

</a>

<section id="blog-list" class="blog-list">
<!-- Blog posts will be inserted here dynamically -->
</section>
</main>

<footer>
Expand All @@ -53,60 +35,54 @@ <h1 class="source-code-pro-regular"><b>Mono is More</b></h1>
</footer>

<script>
// Select all blog post links
const blogPosts = document.querySelectorAll('.blog-post');
// Fetch the blog posts JSON
fetch('./posts/blog-posts.json')
.then(response => response.json())
.then(data => {
const blogList = document.getElementById('blog-list');

// Sort posts by date (latest first)
data.posts.sort((a, b) => {
// Convert dates from DD-MM-YYYY to a comparable format (YYYY-MM-DD)
const dateA = new Date(a.published.split('-').reverse().join('-'));
const dateB = new Date(b.published.split('-').reverse().join('-'));
return dateB - dateA; // Sort in descending order (latest first)
});

blogPosts.forEach(post => {
// Get the publication date and title from data attributes
const publishedDate = post.getAttribute('data-published');
const title = post.getAttribute('data-title');
const imageSrc = post.getAttribute('data-image'); // New: Get the dynamic image source
// Dynamically create blog posts
data.posts.forEach(post => {
// Create blog post elements
const postLink = document.createElement('a');
postLink.href = post.link;
postLink.classList.add('blog-post');
postLink.dataset.title = post.title;
postLink.dataset.published = post.published;
postLink.dataset.image = post.image;

// Format the date to "11, Oct, 2024"
const dateParts = publishedDate.split('-');
const formattedDate = `${dateParts[0]}, ${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(new Date(`${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`))}, ${dateParts[2]}`;
const titleElement = document.createElement('p');
const dateElement = document.createElement('p');
const imgElement = document.createElement('img');

// Create title and date paragraph elements
const titleElement = document.createElement('p');
const dateElement = document.createElement('p');
const imgElement = document.createElement('img'); // New: Dynamically create an image element
titleElement.className = 'source-code-pro-light';
titleElement.innerHTML = `<strong>${post.title}</strong>`;

// Set the text content of the paragraphs
titleElement.className = 'source-code-pro-light'; // Add your desired class
titleElement.textContent = title; // Dynamic title from data attribute
titleElement.innerHTML = `<strong>${title}</strong>`; // Make the title bold using innerHTML
dateElement.className = 'source-code-pro-light date-published'; // Add class for styling
dateElement.textContent = formattedDate;

imgElement.src = imageSrc; // Set the src attribute of the image
imgElement.alt = "Blog Post Image"; // You might want to make this dynamic too, depending on your needs
// Format the date (e.g., 11, Oct, 2024)
const dateParts = post.published.split('-');
const formattedDate = `${dateParts[0]}, ${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(new Date(`${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`))}, ${dateParts[2]}`;
dateElement.className = 'source-code-pro-light date-published';
dateElement.textContent = formattedDate;

// Insert the title and date elements to the left of the image
// Insert the elements into the blog post link
post.appendChild(titleElement);
post.appendChild(dateElement);
post.appendChild(imgElement);
post.insertBefore(dateElement, post.firstChild);
post.insertBefore(titleElement, dateElement);
imgElement.src = post.image;
imgElement.alt = "Blog Post Image";

// Get the image and adjust its size based on its natural size
const img = post.querySelector('img');
img.onload = function() {
const originalWidth = img.naturalWidth;
const maxDisplayWidth = 1020; // Define max display width
postLink.appendChild(titleElement);
postLink.appendChild(dateElement);
postLink.appendChild(imgElement);

// Set image width based on original size
if (originalWidth < maxDisplayWidth) {
img.style.width = 'auto'; // Keep original size
img.style.maxWidth = 'none'; // Disable max width
} else {
img.style.width = '100%'; // Otherwise, make it responsive
img.style.height = 'auto'; // Maintain aspect ratio
}
};

// Removed image title section
});
blogList.appendChild(postLink);
});
})
.catch(error => console.error('Error loading blog posts:', error));
</script>

</body>
Expand Down
51 changes: 44 additions & 7 deletions posts/Break Time.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,20 @@
</head>
<body>
<header>
<h2>Break Time</h2>
<h2 id="post-title">Loading Post...</h2>
<br>
<p>Published on October 18, 2024</p>
<p id="post-date">Published on DATE</p>
<br>
<p><a href="../index.html">Back to Home</a></p>
</header>

<main>
<article>
<p>A man taking a cigarette break by the window.</p>
<p id="post-content"></p>

<img src="../blog-images/break time.jpg" alt="Break Time" style="max-width:100%; height:auto; margin:20px 0;">
<img id="post-image" src="../blog-images/default.jpg" alt="Break Time" style="max-width:100%; height:auto; margin:20px 0;">

<p>Taken in Jioufen, New Taipei City, Taiwan, by Vayan, in March 2023</p>

<p></p>
<p id="post-caption"></p>
</article>
</main>

Expand All @@ -43,5 +41,44 @@ <h2>Break Time</h2>
</nav>
</footer>

<script>
// Function to format the date as "18 Oct 2024"
function formatDate(dateString) {
const dateParts = dateString.split('-');
const day = dateParts[0];
const month = new Date(`${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`).toLocaleString('en-US', { month: 'short' });
const year = dateParts[2];
return `${day} ${month} ${year}`;
}

// Fetch the blog posts JSON
fetch('../posts/blog-posts.json')
.then(response => response.json())
.then(data => {
// Find the post for "Break Time"
const post = data.posts.find(p => p.title === "Break Time");

if (post) {
// Update the page content with the post data
document.getElementById('post-title').textContent = post.title;
document.getElementById('post-date').textContent = `Published on ${formatDate(post.published)}`;
document.getElementById('post-image').src = post.image;
document.getElementById('post-image').alt = post.title;

// Add the original content and caption
const originalContent = "A man taking a cigarette break by the window.";
document.getElementById('post-content').textContent = originalContent;

const caption = "Taken in Jioufen, New Taipei City, Taiwan, by Vayan, in March 2023";
document.getElementById('post-caption').textContent = caption;
} else {
document.getElementById('post-title').textContent = "Post not found";
document.getElementById('post-date').textContent = "";
document.getElementById('post-image').style.display = 'none';
}
})
.catch(error => console.error('Error loading blog post:', error));
</script>

</body>
</html>
45 changes: 35 additions & 10 deletions posts/Road.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,19 @@
</head>
<body>
<header>
<h2>Road</h2>
<h2 id="post-title">Loading Post...</h2>
<br>
<p>Published on October 11, 2024</p>
<p id="post-date">Published on DATE</p>
<br>
<p><a href="../index.html">Back to Home</a></p>
</header>

<main>
<article>
<p></p>

<img src="../blog-images/Road.JPG" alt="Sample Photography" style="max-width:100%; height:auto; margin:20px 0;">

<p></p>

<p></p>
<img id="post-image" src="../blog-images/default.jpg" alt="Sample Photography" style="max-width:100%; height:auto; margin:20px 0;">
</article>
</main>


<footer>
<p class="source-code-pro-light">&copy; 2024 Long Winter Project</p>
<nav>
Expand All @@ -44,5 +37,37 @@ <h2>Road</h2>
</nav>
</footer>

<script>
// Function to format the date as "11 Oct 2024"
function formatDate(dateString) {
const dateParts = dateString.split('-');
const day = dateParts[0];
const month = new Date(`${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`).toLocaleString('en-US', { month: 'short' });
const year = dateParts[2];
return `${day} ${month} ${year}`;
}

// Fetch the blog posts JSON
fetch('../posts/blog-posts.json')
.then(response => response.json())
.then(data => {
// Find the post for "Road"
const post = data.posts.find(p => p.title === "Road");

if (post) {
// Update the page content with the post data
document.getElementById('post-title').textContent = post.title;
document.getElementById('post-date').textContent = `Published on ${formatDate(post.published)}`;
document.getElementById('post-image').src = post.image;
document.getElementById('post-image').alt = post.title;
} else {
document.getElementById('post-title').textContent = "Post not found";
document.getElementById('post-date').textContent = "";
document.getElementById('post-image').style.display = 'none';
}
})
.catch(error => console.error('Error loading blog post:', error));
</script>

</body>
</html>
Loading

0 comments on commit be268d0

Please sign in to comment.