2024-05-14 19:09:43 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Blog</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
max-width: 25%;
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div id="blog-list"></div>
|
|
|
|
|
|
|
|
|
|
<script src="frontend.js"></script>
|
|
|
|
|
<script>
|
2024-08-25 12:54:32 -05:00
|
|
|
const copyrightName = "Sammy (Sparksammy/Nodemixaholic/Charles D Spellman) Lord"
|
|
|
|
|
const githubUsername = "the-spellman"
|
2024-05-14 19:09:43 -05:00
|
|
|
const githubRepoName = "blog-posts"
|
|
|
|
|
// Fetch list of blog posts from GitHub repository
|
|
|
|
|
async function fetchBlogPosts() {
|
|
|
|
|
const response = await fetch(`https://api.github.com/repos/${githubUsername}/${githubRepoName}/contents`);
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
// Filter out Markdown files and extract titles and URLs
|
|
|
|
|
const blogPosts = data
|
|
|
|
|
.filter(item => item.name.endsWith('.md'))
|
|
|
|
|
.map(item => ({
|
|
|
|
|
url: item.download_url
|
|
|
|
|
}));
|
|
|
|
|
return blogPosts;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Function to create dynamic links for blog posts
|
|
|
|
|
async function createBlogPostLinks() {
|
|
|
|
|
const blogPosts = await fetchBlogPosts();
|
|
|
|
|
const blogList = document.getElementById('blog-list');
|
|
|
|
|
blogPosts.forEach(async post => {
|
|
|
|
|
const response = await fetch(post.url);
|
|
|
|
|
const markdown = await response.text();
|
|
|
|
|
const html = await markdownToHTML(markdown);
|
|
|
|
|
const tempDiv = document.createElement('div');
|
|
|
|
|
tempDiv.innerHTML = html;
|
|
|
|
|
const title = tempDiv.querySelector('h1').innerText;
|
|
|
|
|
const link = document.createElement('a');
|
|
|
|
|
link.href = `javascript:void(0);`;
|
|
|
|
|
link.onclick = function() {
|
|
|
|
|
loadBlogPost(post.url);
|
|
|
|
|
};
|
|
|
|
|
link.innerText = title;
|
|
|
|
|
const br = document.createElement('br')
|
|
|
|
|
blogList.appendChild(link);
|
|
|
|
|
blogList.appendChild(br);
|
|
|
|
|
});
|
|
|
|
|
const horiz = document.createElement("hr")
|
|
|
|
|
document.body.appendChild(horiz);
|
|
|
|
|
const copyright = document.createElement("p");
|
|
|
|
|
copyright.innerText = `Copyright ${copyrightName}. All rights reserved.`;
|
|
|
|
|
document.body.appendChild(copyright);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Function to load blog post content
|
|
|
|
|
async function loadBlogPost(url) {
|
|
|
|
|
const response = await fetch(url);
|
|
|
|
|
const markdown = await response.text();
|
|
|
|
|
const html = await markdownToHTML(markdown);
|
|
|
|
|
document.body.innerHTML = html;
|
|
|
|
|
const title = document.querySelector('h1').innerText;
|
|
|
|
|
document.title = title; // Change title tag to the first h1 element's inner text
|
|
|
|
|
const backButton = document.createElement('button');
|
|
|
|
|
backButton.innerText = 'Back';
|
|
|
|
|
backButton.onclick = goBack;
|
|
|
|
|
document.body.appendChild(backButton);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Function to go back to the main page
|
|
|
|
|
function goBack() {
|
|
|
|
|
location.reload();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Initialize the page
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
createBlogPostLinks();
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
