snick/tcms
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- new blog cms

Browse Source
This commit is contained in:
Ty Clifford
2026-07-04 19:41:44 -04:00
parent 64cb76a846
commit 782b983bf4
819 changed files with 3103 additions and 88735 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/neon/assets/app.js
+35
View File
@@ -0,0 +1,35 @@
(function () {
var root = document.documentElement;
var storedMode = localStorage.getItem('neon-mode') || 'dark';
var storedAccent = localStorage.getItem('neon-accent') || 'green';
var modeButton = document.querySelector('[data-mode-toggle]');
function applyMode(mode) {
root.dataset.mode = mode;
localStorage.setItem('neon-mode', mode);
if (modeButton) {
modeButton.textContent = mode === 'light' ? 'Dark' : 'Light';
modeButton.setAttribute('aria-label', mode === 'light' ? 'Use dark mode' : 'Use light mode');
}
}
function applyAccent(accent) {
root.dataset.accent = accent;
localStorage.setItem('neon-accent', accent);
}
applyMode(storedMode);
applyAccent(storedAccent);
if (modeButton) {
modeButton.addEventListener('click', function () {
applyMode(root.dataset.mode === 'light' ? 'dark' : 'light');
});
}
document.querySelectorAll('[data-accent]').forEach(function (button) {
button.addEventListener('click', function () {
applyAccent(button.dataset.accent || 'green');
});
});
}());
themes/neon/assets/style.css
+557
View File
@@ -0,0 +1,557 @@
:root {
color-scheme: dark;
--bg: #07080d;
--bg-soft: #10131b;
--surface: #141823;
--surface-strong: #1b2130;
--text: #edf5ff;
--muted: #9aa8b7;
--line: rgba(255, 255, 255, 0.12);
--accent: #42ff8b;
--accent-2: #35c9ff;
--accent-3: #ff4f8f;
--warning: #ff9f43;
--danger: #ff4d5f;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
--radius: 8px;
}
:root[data-accent="green"] { --accent: #42ff8b; --accent-2: #35c9ff; }
:root[data-accent="blue"] { --accent: #35c9ff; --accent-2: #a084ff; }
:root[data-accent="red"] { --accent: #ff4d5f; --accent-2: #ff9f43; }
:root[data-accent="pink"] { --accent: #ff4fbd; --accent-2: #35c9ff; }
:root[data-accent="purple"] { --accent: #a084ff; --accent-2: #42ff8b; }
:root[data-accent="orange"] { --accent: #ff9f43; --accent-2: #ff4d5f; }
:root[data-mode="light"] {
color-scheme: light;
--bg: #f7f9fc;
--bg-soft: #eef3f8;
--surface: #ffffff;
--surface-strong: #e8eef6;
--text: #111827;
--muted: #5f6d7a;
--line: rgba(17, 24, 39, 0.13);
--shadow: 0 20px 60px rgba(58, 75, 95, 0.16);
}
* {
box-sizing: border-box;
}
html {
min-height: 100%;
}
body {
min-height: 100%;
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.65;
color: var(--text);
background:
linear-gradient(90deg, rgba(66, 255, 139, 0.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(53, 201, 255, 0.04) 1px, transparent 1px),
linear-gradient(180deg, var(--bg), var(--bg-soft));
background-size: 54px 54px, 54px 54px, auto;
}
a {
color: inherit;
text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
text-underline-offset: 0.18em;
}
a:hover {
color: var(--accent);
}
button,
input,
textarea {
font: inherit;
}
button,
input,
textarea {
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--text);
background: color-mix(in srgb, var(--surface) 86%, transparent);
}
button {
min-height: 42px;
padding: 0.65rem 0.9rem;
cursor: pointer;
font-weight: 700;
}
button:hover {
border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
input,
textarea {
width: 100%;
padding: 0.72rem 0.82rem;
}
textarea {
resize: vertical;
}
.site-header {
position: sticky;
top: 0;
z-index: 20;
display: grid;
grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 260px) auto;
gap: 1rem;
align-items: center;
padding: 1rem clamp(1rem, 4vw, 3rem);
border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter: blur(18px);
}
.brand {
display: inline-flex;
gap: 0.8rem;
align-items: center;
min-width: 0;
text-decoration: none;
}
.brand__mark {
width: 38px;
height: 38px;
flex: 0 0 auto;
border: 1px solid color-mix(in srgb, var(--accent) 60%, white);
border-radius: 8px;
background:
linear-gradient(135deg, transparent 0 38%, var(--accent) 39% 45%, transparent 46%),
linear-gradient(45deg, var(--accent-2), var(--accent-3));
box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 36%, transparent);
}
.brand strong,
.brand small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brand strong {
font-size: 1rem;
}
.brand small {
color: var(--muted);
font-size: 0.82rem;
}
.main-nav,
.theme-tools,
.social-list,
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
}
.main-nav a,
.social-list a,
.tag-row a {
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.34rem 0.68rem;
color: var(--muted);
text-decoration: none;
background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.main-nav a:hover,
.social-list a:hover,
.tag-row a:hover {
color: var(--text);
border-color: var(--accent);
}
.search-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.45rem;
min-width: 0;
}
.search-form button,
.wide-search button,
.comment-form button {
color: #06100b;
border-color: color-mix(in srgb, var(--accent) 70%, white);
background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.theme-tools {
justify-content: end;
}
.mode-toggle {
min-width: 72px;
}
.swatch {
width: 30px;
height: 30px;
min-height: 30px;
padding: 0;
border-radius: 50%;
}
.swatch--green { background: #42ff8b; }
.swatch--blue { background: #35c9ff; }
.swatch--red { background: #ff4d5f; }
.swatch--pink { background: #ff4fbd; }
.swatch--purple { background: #a084ff; }
.swatch--orange { background: #ff9f43; }
.site-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: clamp(1.5rem, 4vw, 3rem);
width: min(1180px, calc(100% - 2rem));
margin: 2rem auto 0;
}
.content-lane {
min-width: 0;
}
.page-heading,
.article__header,
.error-view {
margin-bottom: 1.4rem;
}
.page-heading p,
.article__header p {
max-width: 760px;
margin: 0 0 0.45rem;
color: var(--muted);
}
h1,
h2,
h3 {
line-height: 1.16;
letter-spacing: 0;
}
h1 {
max-width: 820px;
margin: 0;
font-size: 4rem;
}
h2 {
margin-top: 0;
}
.post-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.post-card,
.comment {
border: 1px solid var(--line);
border-radius: var(--radius);
background:
linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-strong) 88%, transparent));
box-shadow: var(--shadow);
}
.post-card {
display: grid;
align-content: start;
min-height: 260px;
padding: 1.1rem;
}
.post-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
margin-bottom: 0.85rem;
color: var(--muted);
font-size: 0.9rem;
}
.post-card__meta a {
color: var(--accent);
text-decoration: none;
}
.post-card h2 {
margin: 0 0 0.65rem;
font-size: 1.35rem;
}
.post-card p {
margin: 0 0 1rem;
color: var(--muted);
}
.wide-search {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.65rem;
margin: 0 0 1rem;
}
.article,
.comments {
max-width: 820px;
}
.article {
padding-bottom: 2rem;
border-bottom: 1px solid var(--line);
}
.article__header h1 {
font-size: 3.4rem;
}
.markdown {
color: color-mix(in srgb, var(--text) 92%, var(--muted));
}
.markdown > * {
max-width: 760px;
}
.markdown img {
max-width: 100%;
height: auto;
border-radius: var(--radius);
border: 1px solid var(--line);
}
.markdown pre {
overflow: auto;
padding: 1rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #05070a;
}
:root[data-mode="light"] .markdown pre {
background: #edf2f8;
}
.markdown code {
color: var(--accent);
}
.markdown blockquote {
margin-left: 0;
padding-left: 1rem;
border-left: 3px solid var(--accent);
color: var(--muted);
}
.article-tags {
margin-top: 1.4rem;
}
.comments {
margin-top: 2rem;
}
.comment {
margin-bottom: 0.85rem;
padding: 1rem;
}
.comment header {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: space-between;
color: var(--muted);
}
.comment p {
margin-bottom: 0;
}
.comment-form {
display: grid;
gap: 0.85rem;
margin-top: 1rem;
}
.comment-form label {
display: grid;
gap: 0.35rem;
color: var(--muted);
font-weight: 700;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.honey-field {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.notice,
.empty-state {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.85rem 1rem;
background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.notice--success {
border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
}
.notice--error {
border-color: color-mix(in srgb, var(--danger) 70%, var(--line));
}
.pagination {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
align-items: center;
justify-content: center;
margin: 1.5rem 0;
color: var(--muted);
}
.pager {
min-width: 112px;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.6rem 0.9rem;
text-align: center;
text-decoration: none;
background: var(--surface);
}
.side-rail {
display: grid;
align-content: start;
gap: 1.8rem;
min-width: 0;
color: var(--muted);
}
.side-rail section {
border-top: 1px solid var(--line);
padding-top: 1rem;
}
.side-rail h2 {
margin-bottom: 0.7rem;
color: var(--text);
font-size: 1rem;
}
.link-list {
display: grid;
gap: 0.45rem;
margin: 0;
padding: 0;
list-style: none;
}
.link-list li {
display: flex;
gap: 1rem;
justify-content: space-between;
}
.link-list span {
color: var(--accent);
}
.site-footer {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
justify-content: space-between;
width: min(1180px, calc(100% - 2rem));
margin: 3rem auto 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.92rem;
}
@media (max-width: 980px) {
.site-header {
grid-template-columns: 1fr;
align-items: start;
}
.theme-tools {
justify-content: start;
}
.site-shell {
grid-template-columns: 1fr;
}
.post-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 3rem;
}
.article__header h1 {
font-size: 2.8rem;
}
}
@media (max-width: 620px) {
.site-header {
position: static;
}
.main-nav,
.theme-tools {
width: 100%;
}
.search-form,
.wide-search,
.form-grid {
grid-template-columns: 1fr;
}
h1,
.article__header h1 {
font-size: 2.25rem;
}
}
themes/neon/layout.php
+222
View File
@@ -0,0 +1,222 @@
<?php
declare(strict_types=1);
use NeonBlog\ContentRepository;
use NeonBlog\View;
$site = $config->get('site', []);
$social = $config->get('social', []);
$titleText = isset($title) && $title !== $site['title'] ? $title . ' | ' . $site['title'] : $site['title'];
$description = $item['summary'] ?? $site['description'] ?? '';
$postCard = static function (array $entry): void { ?>
<article class="post-card">
<div class="post-card__meta">
<a href="<?= View::url('category/' . ContentRepository::slugify((string) $entry['category'])) ?>"><?= View::e($entry['category']) ?></a>
<span><?= View::date((string) $entry['date']) ?></span>
</div>
<h2><a href="<?= View::itemUrl($entry) ?>"><?= View::e($entry['title']) ?></a></h2>
<p><?= View::e($entry['summary']) ?></p>
<?php if (!empty($entry['tags'])): ?>
<div class="tag-row">
<?php foreach ($entry['tags'] as $tag): ?>
<a href="<?= View::url('tag/' . ContentRepository::slugify((string) $tag)) ?>"><?= View::e($tag) ?></a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</article>
<?php };
$renderPagination = static function (array $pagination, callable $url): void { ?>
<?php if (($pagination['pages'] ?? 1) > 1): ?>
<nav class="pagination" aria-label="Pagination">
<?php if ($pagination['has_previous']): ?>
<a class="pager" href="<?= $url((int) $pagination['previous']) ?>">Previous</a>
<?php endif; ?>
<span>Page <?= (int) $pagination['page'] ?> of <?= (int) $pagination['pages'] ?></span>
<?php if ($pagination['has_next']): ?>
<a class="pager" href="<?= $url((int) $pagination['next']) ?>">Next</a>
<?php endif; ?>
</nav>
<?php endif; ?>
<?php };
?><!doctype html>
<html lang="<?= View::e($site['language'] ?? 'en') ?>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= View::e($titleText) ?></title>
<meta name="description" content="<?= View::e($description) ?>">
<link rel="alternate" type="application/rss+xml" title="<?= View::e($site['title']) ?> feed" href="<?= View::url('feed.xml') ?>">
<link rel="stylesheet" href="<?= View::asset('style.css') ?>">
<script defer src="<?= View::asset('app.js') ?>"></script>
</head>
<body>
<header class="site-header">
<a class="brand" href="<?= View::url('') ?>">
<span class="brand__mark"></span>
<span>
<strong><?= View::e($site['title'] ?? 'Neon Blog') ?></strong>
<small><?= View::e($site['tagline'] ?? '') ?></small>
</span>
</a>
<nav class="main-nav" aria-label="Primary">
<a href="<?= View::url('') ?>">Home</a>
<?php foreach ($navPages as $pageItem): ?>
<a href="<?= View::itemUrl($pageItem) ?>"><?= View::e($pageItem['title']) ?></a>
<?php endforeach; ?>
<a href="<?= View::url('feed.xml') ?>">RSS</a>
</nav>
<form class="search-form" action="<?= View::url('search') ?>" method="get">
<input type="search" name="q" value="<?= View::e($search_query ?? '') ?>" placeholder="Search" aria-label="Search">
<button type="submit" aria-label="Search">Go</button>
</form>
<div class="theme-tools" aria-label="Theme controls">
<button class="mode-toggle" type="button" data-mode-toggle aria-label="Toggle light mode">Light</button>
<?php foreach (['green', 'blue', 'red', 'pink', 'purple', 'orange'] as $accent): ?>
<button class="swatch swatch--<?= $accent ?>" type="button" data-accent="<?= $accent ?>" aria-label="<?= ucfirst($accent) ?> accent"></button>
<?php endforeach; ?>
</div>
</header>
<main class="site-shell">
<section class="content-lane">
<?php if ($flash): ?>
<div class="notice notice--<?= View::e($flash['type']) ?>"><?= View::e($flash['message']) ?></div>
<?php endif; ?>
<?php if ($template === 'listing'): ?>
<header class="page-heading">
<p><?= View::e($site['description'] ?? '') ?></p>
<h1><?= View::e($heading ?? $title ?? '') ?></h1>
</header>
<?php if (($search_query ?? null) !== null): ?>
<form class="wide-search" action="<?= View::url('search') ?>" method="get">
<input type="search" name="q" value="<?= View::e($search_query) ?>" placeholder="Search posts and pages" aria-label="Search posts and pages">
<button type="submit">Search</button>
</form>
<?php endif; ?>
<div class="post-grid">
<?php foreach ($items as $entry): ?>
<?php $postCard($entry); ?>
<?php endforeach; ?>
</div>
<?php if (empty($items)): ?>
<p class="empty-state"><?= View::e($empty_message ?? 'No posts found.') ?></p>
<?php endif; ?>
<?php $renderPagination($pagination, $pagination_url); ?>
<?php elseif ($template === 'single'): ?>
<article class="article">
<header class="article__header">
<?php if ($item['type'] === 'post'): ?>
<div class="post-card__meta">
<a href="<?= View::url('category/' . ContentRepository::slugify((string) $item['category'])) ?>"><?= View::e($item['category']) ?></a>
<span><?= View::date((string) $item['date']) ?></span>
<span><?= View::e($item['author']) ?></span>
</div>
<?php endif; ?>
<h1><?= View::e($item['title']) ?></h1>
<?php if (!empty($item['summary'])): ?>
<p><?= View::e($item['summary']) ?></p>
<?php endif; ?>
</header>
<div class="markdown">
<?= $item['html'] ?>
</div>
<?php if (!empty($item['tags'])): ?>
<footer class="tag-row article-tags">
<?php foreach ($item['tags'] as $tag): ?>
<a href="<?= View::url('tag/' . ContentRepository::slugify((string) $tag)) ?>"><?= View::e($tag) ?></a>
<?php endforeach; ?>
</footer>
<?php endif; ?>
</article>
<?php if ($config->get('comments.enabled', true) && $item['allow_comments']): ?>
<section class="comments" id="comments">
<h2>Comments</h2>
<?php if (empty($approved_comments)): ?>
<p class="empty-state">No comments yet.</p>
<?php endif; ?>
<?php foreach ($approved_comments as $comment): ?>
<article class="comment">
<header>
<strong><?= View::e($comment['author']) ?></strong>
<time datetime="<?= View::e($comment['created_at']) ?>"><?= View::date((string) $comment['created_at'], 'M j, Y g:i a') ?></time>
</header>
<p><?= nl2br(View::e($comment['body'])) ?></p>
</article>
<?php endforeach; ?>
<form class="comment-form" action="<?= View::url('comment/' . $item['slug']) ?>" method="post">
<div class="form-grid">
<label>Name <input name="author" required maxlength="120"></label>
<label>Email <input type="email" name="email" required maxlength="180"></label>
</div>
<label>Website <input type="url" name="site_url" maxlength="220"></label>
<label class="honey-field">Leave this empty <input name="<?= View::e($config->get('comments.honeypot_field', 'website_url')) ?>" tabindex="-1" autocomplete="off"></label>
<label>Comment <textarea name="body" required rows="6" maxlength="5000"></textarea></label>
<?php if ($config->get('comments.captcha', true)): ?>
<input type="hidden" name="captcha_token" value="<?= View::e($captcha['token']) ?>">
<label><?= View::e($captcha['question']) ?> <input name="captcha_answer" required inputmode="numeric"></label>
<?php endif; ?>
<button type="submit">Post Comment</button>
</form>
</section>
<?php endif; ?>
<?php else: ?>
<section class="error-view">
<h1><?= View::e($title ?? 'Error') ?></h1>
<p><?= View::e($message ?? 'Something went wrong.') ?></p>
</section>
<?php endif; ?>
</section>
<aside class="side-rail" aria-label="Blog metadata">
<?php if (is_array($social) && $social !== []): ?>
<section>
<h2>Social</h2>
<div class="social-list">
<?php foreach ($social as $network => $entry): ?>
<a href="<?= View::e($entry['url'] ?? '#') ?>" rel="me noopener" target="_blank"><?= View::e($entry['label'] ?? $network) ?></a>
<?php endforeach; ?>
</div>
</section>
<?php endif; ?>
<section>
<h2>Categories</h2>
<ul class="link-list">
<?php foreach ($facets['categories'] as $category => $count): ?>
<li><a href="<?= View::url('category/' . ContentRepository::slugify((string) $category)) ?>"><?= View::e($category) ?></a><span><?= (int) $count ?></span></li>
<?php endforeach; ?>
</ul>
</section>
<section>
<h2>Tags</h2>
<div class="tag-row">
<?php foreach ($facets['tags'] as $tag => $count): ?>
<a href="<?= View::url('tag/' . ContentRepository::slugify((string) $tag)) ?>"><?= View::e($tag) ?> <?= (int) $count ?></a>
<?php endforeach; ?>
</div>
</section>
<section>
<h2>Archive</h2>
<ul class="link-list">
<?php foreach ($facets['archives'] as $month => $count): ?>
<li><a href="<?= View::url('archive/' . str_replace('-', '/', (string) $month)) ?>"><?= View::month((string) $month) ?></a><span><?= (int) $count ?></span></li>
<?php endforeach; ?>
</ul>
</section>
</aside>
</main>
<footer class="site-footer">
<span><?= View::e($site['title'] ?? 'Neon Blog') ?></span>
<span>Powered by PHP, SQLite, JSON, and Markdown files.</span>
</footer>
</body>
</html>