132 lines
4.8 KiB
HTML
132 lines
4.8 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hex Studios</title>
|
|
<link rel="alternate" type="application/rss+xml" title="Hex Studios RSS Feed" href="posts/feed.php">
|
|
|
|
<script>
|
|
(function() {
|
|
var stored = localStorage.getItem('theme');
|
|
if (stored === 'light') document.documentElement.setAttribute('data-theme', 'light');
|
|
})();
|
|
|
|
function toggleTheme() {
|
|
var isLight = document.documentElement.getAttribute('data-theme') === 'light';
|
|
if (isLight) {
|
|
document.documentElement.removeAttribute('data-theme');
|
|
localStorage.setItem('theme', 'dark');
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
localStorage.setItem('theme', 'light');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<link rel="stylesheet" href="styles/main.css">
|
|
</head>
|
|
<body>
|
|
<button id="theme-toggle" onclick="toggleTheme()">toggle light/dark</button>
|
|
|
|
<h1>// Hex Studios</h1>
|
|
<i>Developer, biker, musician, engineer, and an unapologetic centrist in the deep red south. The real @hexstudios.</i>
|
|
|
|
<div id="links-section">
|
|
<h2>Links</h2>
|
|
<ul class="custom-list">
|
|
<li><a href="https://git.bellsworne.tech/">Git repos</a></li>
|
|
<li><a href="https://youtube.com/c/hexstudios">YouTube</a></li>
|
|
<li><a href="https://bellsworne.com">My company - Bellsworne</a></li>
|
|
<li><a href="https://git.bellsworne.tech/chrisbell/hexstudios-co">Page source code (git)</a></li>
|
|
<li><a href="posts/feed.php">RSS feed</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="sticky-posts-section">
|
|
<h2>Pinned posts</h2>
|
|
<ul class="custom-list">
|
|
<li><a href="post.html?file=about.md">About <i class="post-link-date">August 13, 2026</i></a></li>
|
|
<li><a href="post.html?file=projects.md">Projects <i class="post-link-date">August 13, 2026</i></a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="posts-section">
|
|
<h2>Posts</h2>
|
|
<ul id="tags-list"></ul>
|
|
<ul class="custom-list" id="posts-list"></ul>
|
|
</div>
|
|
|
|
<script>
|
|
let allPosts = [];
|
|
let activeTag = null;
|
|
|
|
async function loadPosts() {
|
|
const list = document.getElementById('posts-list');
|
|
try {
|
|
const res = await fetch('posts/list.php');
|
|
allPosts = await res.json();
|
|
renderTags();
|
|
renderPosts();
|
|
} catch (err) {
|
|
list.innerHTML = '<li>Couldn\u2019t load posts.</li>';
|
|
}
|
|
}
|
|
|
|
function renderTags() {
|
|
const tagsList = document.getElementById('tags-list');
|
|
const tags = [...new Set(allPosts.flatMap(p => p.tags || []))].sort();
|
|
|
|
tagsList.innerHTML = '';
|
|
if (!tags.length) return;
|
|
|
|
const makeTagButton = (label, tagValue) => {
|
|
const li = document.createElement('li');
|
|
const btn = document.createElement('button');
|
|
btn.textContent = label;
|
|
btn.className = 'tag-btn' + (activeTag === tagValue ? ' active' : '');
|
|
btn.onclick = () => {
|
|
activeTag = tagValue;
|
|
renderTags();
|
|
renderPosts();
|
|
};
|
|
li.appendChild(btn);
|
|
tagsList.appendChild(li);
|
|
};
|
|
|
|
makeTagButton('all', null);
|
|
tags.forEach(tag => makeTagButton(tag, tag));
|
|
}
|
|
|
|
function renderPosts() {
|
|
const list = document.getElementById('posts-list');
|
|
const posts = activeTag
|
|
? allPosts.filter(p => (p.tags || []).includes(activeTag))
|
|
: allPosts;
|
|
|
|
list.innerHTML = '';
|
|
|
|
if (!posts.length) {
|
|
list.innerHTML = '<li>No posts' + (activeTag ? ' tagged \u201c' + activeTag + '\u201d' : '') + '.</li>';
|
|
return;
|
|
}
|
|
|
|
posts.forEach(post => {
|
|
const li = document.createElement('li');
|
|
const a = document.createElement('a');
|
|
const i = document.createElement('i');
|
|
a.textContent = post.title;
|
|
i.textContent = post.date;
|
|
a.href = post.type === 'html'
|
|
? 'posts/' + post.file
|
|
: 'post.html?file=' + encodeURIComponent(post.file);
|
|
li.appendChild(a);
|
|
a.appendChild(i);
|
|
i.classList.add("post-link-date");
|
|
list.appendChild(li);
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', loadPosts);
|
|
</script>
|
|
</body>
|
|
</html> |