scadmin/seans-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added blog drafts and ui for posting them.

Browse Source
This commit is contained in:
scadmin
2025-12-14 22:18:10 +00:00
parent 5357cfae0e
commit 7e5e17bde1
6 changed files with 147 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/pages/blog/index.astro
View File

@@ -1,113 +1,59 @@
---
import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';
import BaseHead from '../../components/BaseHead.astro';
import Footer from '../../components/Footer.astro';
import FormattedDate from '../../components/FormattedDate.astro';
import Header from '../../components/Header.astro';
import { SITE_DESCRIPTION, SITE_TITLE } from '../../consts';
const posts = (await getCollection('blog')).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
import { getCollection } from 'astro:content';
const posts = (await getCollection('blog'))
.filter((p) => !(p.data as { draft?: boolean }).draft)
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
main {
width: 960px;
}
ul {
display: flex;
flex-wrap: wrap;
gap: 2rem;
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
width: calc(50% - 1rem);
}
ul li * {
text-decoration: none;
transition: 0.2s ease;
}
ul li:first-child {
width: 100%;
margin-bottom: 1rem;
text-align: center;
}
ul li:first-child img {
width: 100%;
}
ul li:first-child .title {
font-size: 2.369rem;
}
ul li img {
margin-bottom: 0.5rem;
border-radius: 12px;
}
ul li a {
display: block;
}
.title {
margin: 0;
color: rgb(var(--black));
line-height: 1;
}
.date {
margin: 0;
color: rgb(var(--gray));
}
ul li a:hover h4,
ul li a:hover .date {
color: rgb(var(--accent));
}
ul a:hover img {
box-shadow: var(--box-shadow);
}
@media (max-width: 720px) {
ul {
gap: 0.5em;
}
ul li {
width: 100%;
text-align: center;
}
ul li:first-child {
margin-bottom: 0;
}
ul li:first-child .title {
font-size: 1.563em;
}
}
</style>
<BaseHead title={`${SITE_TITLE} | Blog`} description={SITE_DESCRIPTION} />
</head>
<body>
<Header />
<main>
<section>
<h1>Sean's Cloud!</h1>
<h3>Infrastructure • Cloud • Systems Thinking • Leadership</h3>
<p>
seans.cloud is an evolving space focused on building, testing, and refining modern IT and cloud practices with an eye toward what’s next. It serves as a foundation for future projects in cloud architecture, automation, security, and operational excellence—along with the leadership thinking that supports sustainable systems.
</p>
<p>
As this site grows, it will become a place to share practical insights, real-world experiments, and lessons learned from working with infrastructure at scale. Future content may include technical guides, architecture patterns, tooling evaluations, and perspectives on how technology, process, and people intersect to create resilient organizations.
</p>
<p>On this site you’ll find:</p>
<ul>
<li>Technical experiments and lab notes</li>
<li>Cloud and infrastructure architecture thinking</li>
<li>Reflections on reliability, security, and process</li>
<li>Lessons learned from real-world systems</li>
</ul>
<hr />
<h2>Latest Posts</h2>
{posts.length === 0 ? (
<p>No posts yet. Check back soon.</p>
) : (
<ul>
{
posts.map((post) => (
<li>
<a href={`/blog/${post.id}/`}>
{post.data.heroImage && (
<Image width={720} height={360} src={post.data.heroImage} alt="" />
)}
<h4 class="title">{post.data.title}</h4>
<p class="date">
<FormattedDate date={post.data.pubDate} />
</p>
</a>
</li>
))
}
{posts.map((post) => (
<li>
<a href={`/blog/${post.id}`}>{post.data.title}</a>
<small> — {post.data.pubDate.toLocaleDateString()}</small>
{post.data.description ? <p>{post.data.description}</p> : null}
</li>
))}
</ul>
</section>
)}
</main>
<Footer />
</body>