mirror of
https://github.com/AzzyAz-net/AzzyBlog.git
synced 2026-08-25 19:24:58 +00:00
Initial commit
This commit is contained in:
GitHub
commit
c799a82f9b
30 changed files with 12030 additions and 0 deletions
4
.env.example
Normal file
4
.env.example
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
# Google Search Console verification code
|
||||
# Get this from: Google Search Console > Settings > Ownership verification > HTML tag
|
||||
# Example: PUBLIC_GOOGLE_SITE_VERIFICATION=abc123xyz
|
||||
PUBLIC_GOOGLE_SITE_VERIFICATION=
|
||||
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Build output
|
||||
dist/
|
||||
|
||||
# Astro
|
||||
.astro/
|
||||
|
||||
# Environment
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Editor
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2026 UINUX
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
196
README.md
Normal file
196
README.md
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
# UINUX Blog
|
||||
|
||||
A calm, writing-first blogging system built with Astro.
|
||||
|
||||
## What it is
|
||||
|
||||
UINUX Blog is a static blog system designed for long-form writing. It prioritizes typography, whitespace, and readability over visual complexity. It uses Markdown for content, file-based routing, and ships minimal client-side JavaScript (search only).
|
||||
|
||||
## Quick start (template users)
|
||||
|
||||
If you clicked "Use this template" on GitHub:
|
||||
|
||||
1. Clone your new repository
|
||||
2. Run `npm install`
|
||||
3. Delete the example posts in `src/content/posts/`
|
||||
4. Update `astro.config.mjs` with your own `site` URL
|
||||
5. Update the blog name and tagline in `src/pages/index.astro` and `src/components/Nav.astro`
|
||||
6. Update `src/pages/about.astro` with your own info
|
||||
7. Run `npm run dev` and start writing
|
||||
|
||||
## What it is not
|
||||
|
||||
- Not a theme. There are no color presets, dark mode toggles, or visual variants.
|
||||
- Not a CMS. There is no admin panel, no database, no integrations.
|
||||
- Not a marketing tool. There are no newsletter signups, analytics, or growth hacks.
|
||||
- Not a portfolio. There are no image galleries, project showcases, or landing pages.
|
||||
|
||||
## Who it is for
|
||||
|
||||
Writers who want a quiet place to publish. People who value clarity over features. Anyone who prefers to write in Markdown and deploy a static site.
|
||||
|
||||
## Getting started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js 18 or later
|
||||
|
||||
### Install
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Start writing
|
||||
|
||||
1. Create a new `.md` or `.mdx` file in `src/content/posts/`
|
||||
2. Add frontmatter:
|
||||
|
||||
```md
|
||||
---
|
||||
title: "Your Post Title"
|
||||
description: "A short description of the post."
|
||||
date: 2026-02-07
|
||||
tags: ["topic-a", "topic-b"]
|
||||
---
|
||||
|
||||
Your content here.
|
||||
```
|
||||
|
||||
3. Run the dev server:
|
||||
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
|
||||
4. Open `http://localhost:4321`
|
||||
|
||||
That is it. You are writing.
|
||||
|
||||
### Google Search Console
|
||||
|
||||
To enable Google Search Console verification, create a `.env` file:
|
||||
|
||||
```
|
||||
PUBLIC_GOOGLE_SITE_VERIFICATION=your-verification-code
|
||||
```
|
||||
|
||||
Get the code from Google Search Console > Settings > Ownership verification > HTML tag.
|
||||
|
||||
See `.env.example` for reference.
|
||||
|
||||
### Build for production
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Output is in the `dist/` directory. Deploy it anywhere that serves static files.
|
||||
|
||||
## Structure
|
||||
|
||||
```
|
||||
src/
|
||||
components/
|
||||
Layout.astro Page shell, meta, fonts
|
||||
Nav.astro Site navigation
|
||||
Footer.astro Site footer
|
||||
Heading.astro Typographic heading
|
||||
Article.astro Post wrapper with metadata and tags
|
||||
Prose.astro Markdown content styling
|
||||
content/
|
||||
config.ts Content collection schema
|
||||
posts/ Markdown files go here
|
||||
pages/
|
||||
index.astro Home (paginated post list)
|
||||
page/[page].astro Paginated post listing (page 2+)
|
||||
search.astro Search page (client-side)
|
||||
search-index.json.ts Static search index (built at build time)
|
||||
about.astro About page
|
||||
rss.xml.ts RSS feed
|
||||
tags/index.astro All tags
|
||||
tags/[tag].astro Posts filtered by tag
|
||||
posts/[...slug].astro Individual post pages
|
||||
styles/
|
||||
global.css Design tokens and base styles
|
||||
```
|
||||
|
||||
## Content model
|
||||
|
||||
Posts use these frontmatter fields:
|
||||
|
||||
| Field | Type | Required | Default |
|
||||
|---------------|----------|----------|---------|
|
||||
| `title` | string | yes | — |
|
||||
| `description` | string | yes | — |
|
||||
| `date` | date | yes | — |
|
||||
| `tags` | string[] | no | `[]` |
|
||||
|
||||
## Features
|
||||
|
||||
### Tags
|
||||
|
||||
Posts can have zero or more tags. Tags appear on post pages and the home listing. Browse all tags at `/tags` or filter by tag at `/tags/[tag-name]`.
|
||||
|
||||
### Pagination
|
||||
|
||||
The home page shows 10 posts per page. When there are more than 10 posts, pagination links appear at the bottom. Pages 2+ are at `/page/2`, `/page/3`, etc.
|
||||
|
||||
### Search
|
||||
|
||||
Client-side search powered by a static JSON index built at build time.
|
||||
|
||||
- No external services or APIs
|
||||
- No dependencies
|
||||
- Index includes title, description, tags, and full post body
|
||||
- Debounced input with instant results
|
||||
- Supports `?q=` query parameter for direct linking
|
||||
- Available at `/search`
|
||||
|
||||
## Design decisions
|
||||
|
||||
- **Serif body text** (Newsreader): optimized for sustained reading
|
||||
- **Sans-serif headings** (Inter): clear hierarchy without competing with body text
|
||||
- **640px content width**: prevents eye fatigue on long lines
|
||||
- **Minimal client-side JS**: only used for search; all other pages are static HTML and CSS
|
||||
- **No dark mode**: one mode, one experience, no maintenance surface
|
||||
- **No component library**: six components, no more
|
||||
|
||||
## SEO
|
||||
|
||||
Built-in, zero-dependency SEO on every page:
|
||||
|
||||
- **Canonical URLs** on all pages
|
||||
- **Open Graph meta** (og:title, og:description, og:url, og:type, og:site_name, og:image)
|
||||
- **Twitter Card meta** (summary or summary_large_image)
|
||||
- **JSON-LD structured data**:
|
||||
- `WebSite` on the home page
|
||||
- `BlogPosting` on each post (headline, datePublished, author, publisher, keywords)
|
||||
- `AboutPage` on the about page
|
||||
- **Google Search Console** verification via environment variable
|
||||
- **RSS feed** at `/rss.xml`
|
||||
|
||||
No third-party SEO libraries. No sitemap generator. No tracking.
|
||||
|
||||
## Environment variables
|
||||
|
||||
| Variable | Required | Description |
|
||||
|---|---|---|
|
||||
| `PUBLIC_GOOGLE_SITE_VERIFICATION` | no | Google Search Console verification code |
|
||||
|
||||
## Customization checklist
|
||||
|
||||
When using this as a template, update these files:
|
||||
|
||||
- [ ] `astro.config.mjs` — set your `site` URL
|
||||
- [ ] `src/pages/index.astro` — update blog name and tagline
|
||||
- [ ] `src/components/Nav.astro` — update brand name
|
||||
- [ ] `src/pages/about.astro` — write your own about page
|
||||
- [ ] `src/pages/rss.xml.ts` — update feed title and description
|
||||
- [ ] `src/components/Layout.astro` — update default description and OG site_name
|
||||
- [ ] `src/content/posts/` — delete example posts, add your own
|
||||
- [ ] `.env` — add your Google Search Console code (optional)
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
12
astro.config.mjs
Normal file
12
astro.config.mjs
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { defineConfig } from "astro/config";
|
||||
import mdx from "@astrojs/mdx";
|
||||
|
||||
export default defineConfig({
|
||||
site: "https://uinuxblog.getuinux.com",
|
||||
integrations: [mdx()],
|
||||
markdown: {
|
||||
shikiConfig: {
|
||||
theme: "github-light",
|
||||
},
|
||||
},
|
||||
});
|
||||
6258
package-lock.json
generated
Normal file
6258
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
16
package.json
Normal file
16
package.json
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"name": "uinux-blog",
|
||||
"type": "module",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^5.0.0",
|
||||
"@astrojs/mdx": "^4.0.0",
|
||||
"@astrojs/rss": "^4.0.0"
|
||||
}
|
||||
}
|
||||
3973
pnpm-lock.yaml
generated
Normal file
3973
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
78
src/components/Article.astro
Normal file
78
src/components/Article.astro
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
import Heading from "./Heading.astro";
|
||||
import Prose from "./Prose.astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
date: Date;
|
||||
description: string;
|
||||
tags?: string[];
|
||||
}
|
||||
|
||||
const { title, date, description, tags = [] } = Astro.props;
|
||||
|
||||
const formattedDate = date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
---
|
||||
|
||||
<article class="article">
|
||||
<header class="article-header">
|
||||
<Heading as="h1">{title}</Heading>
|
||||
<p class="article-meta">
|
||||
<time datetime={date.toISOString()}>{formattedDate}</time>
|
||||
</p>
|
||||
{tags.length > 0 && (
|
||||
<div class="article-tags">
|
||||
{tags.map((tag) => (
|
||||
<a href={`/tags/${tag}`} class="tag">{tag}</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
<Prose>
|
||||
<slot />
|
||||
</Prose>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.article {
|
||||
max-width: var(--width-content);
|
||||
}
|
||||
|
||||
.article-header {
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.article-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-tertiary);
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 3px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-text-tertiary);
|
||||
}
|
||||
</style>
|
||||
21
src/components/Footer.astro
Normal file
21
src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
const year = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer class="footer">
|
||||
<p>© {year} UINUX. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: var(--space-2xl);
|
||||
padding: var(--space-lg) 0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.footer p {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
</style>
|
||||
40
src/components/Heading.astro
Normal file
40
src/components/Heading.astro
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
interface Props {
|
||||
as?: "h1" | "h2" | "h3";
|
||||
}
|
||||
|
||||
const { as: Tag = "h1" } = Astro.props;
|
||||
---
|
||||
|
||||
<Tag class:list={["heading", `heading-${Tag}`]}>
|
||||
<slot />
|
||||
</Tag>
|
||||
|
||||
<style>
|
||||
.heading {
|
||||
font-family: var(--font-heading);
|
||||
color: var(--color-text);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.heading-h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.heading-h2 {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 600;
|
||||
margin-top: var(--space-xl);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.heading-h3 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-top: var(--space-lg);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
</style>
|
||||
83
src/components/Layout.astro
Normal file
83
src/components/Layout.astro
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
import Nav from "./Nav.astro";
|
||||
import Footer from "./Footer.astro";
|
||||
import "../styles/global.css";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
ogType?: "website" | "article";
|
||||
ogImage?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description = "A quiet place to read.",
|
||||
ogType = "website",
|
||||
ogImage,
|
||||
} = Astro.props;
|
||||
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
const googleVerification = import.meta.env.PUBLIC_GOOGLE_SITE_VERIFICATION;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
{googleVerification && <meta name="google-site-verification" content={googleVerification} />}
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href={canonicalURL.href} />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content={ogType} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:url" content={canonicalURL.href} />
|
||||
<meta property="og:site_name" content="UINUX Blog" />
|
||||
{ogImage && <meta property="og:image" content={ogImage} />}
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content={ogImage ? "summary_large_image" : "summary"} />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
{ogImage && <meta name="twitter:image" content={ogImage} />}
|
||||
|
||||
<!-- JSON-LD -->
|
||||
<slot name="head" />
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" title="UINUX Blog" href="/rss.xml" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<Nav />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
max-width: var(--width-page);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-lg);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
54
src/components/Nav.astro
Normal file
54
src/components/Nav.astro
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
const currentPath = Astro.url.pathname;
|
||||
---
|
||||
|
||||
<nav class="nav">
|
||||
<a href="/" class="nav-brand">UINUX Blog</a>
|
||||
<div class="nav-links">
|
||||
<a href="/tags" class:list={[{ active: currentPath.startsWith("/tags") }]}>Tags</a>
|
||||
<a href="/search" class:list={[{ active: currentPath === "/search" || currentPath === "/search/" }]}>Search</a>
|
||||
<a href="/about" class:list={[{ active: currentPath === "/about" || currentPath === "/about/" }]}>About</a>
|
||||
<a href="/rss.xml">RSS</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
padding: var(--space-lg) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.nav-brand:hover {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-links a:hover,
|
||||
.nav-links a.active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
</style>
|
||||
104
src/components/Prose.astro
Normal file
104
src/components/Prose.astro
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<div class="prose">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.prose {
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
line-height: 1.75;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.prose :global(p) {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.prose :global(h2) {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.375rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.3;
|
||||
margin-top: 2.5em;
|
||||
margin-bottom: 0.75em;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.prose :global(h3) {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.4;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 0.5em;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.prose :global(a) {
|
||||
color: var(--color-link);
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.prose :global(a:hover) {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
.prose :global(blockquote) {
|
||||
border-left: 2px solid var(--color-border);
|
||||
padding-left: var(--space-lg);
|
||||
margin: 1.5em 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.prose :global(ul),
|
||||
.prose :global(ol) {
|
||||
margin-bottom: 1.5em;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.prose :global(li) {
|
||||
margin-bottom: 0.375em;
|
||||
}
|
||||
|
||||
.prose :global(code) {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
background-color: var(--color-code-bg);
|
||||
padding: 0.125em 0.375em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.prose :global(pre) {
|
||||
background-color: var(--color-code-bg);
|
||||
padding: var(--space-lg);
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
margin: 1.5em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.prose :global(pre code) {
|
||||
background: none;
|
||||
padding: 0;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.prose :global(hr) {
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin: 2.5em 0;
|
||||
}
|
||||
|
||||
.prose :global(img) {
|
||||
border-radius: 4px;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.prose :global(strong) {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
14
src/content.config.ts
Normal file
14
src/content.config.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { defineCollection, z } from "astro:content";
|
||||
import { glob } from "astro/loaders";
|
||||
|
||||
const posts = defineCollection({
|
||||
loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/posts" }),
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
date: z.coerce.date(),
|
||||
tags: z.array(z.string()).default([]),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { posts };
|
||||
36
src/content/posts/on-calm-software.md
Normal file
36
src/content/posts/on-calm-software.md
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
title: "On Calm Software"
|
||||
description: "Most software demands attention. The best software respects it."
|
||||
date: 2026-01-15
|
||||
tags: ["design", "philosophy"]
|
||||
---
|
||||
|
||||
Open most applications and they compete for your attention. Notifications, badges, banners, modals. Every surface is an opportunity to interrupt.
|
||||
|
||||
This is not a design failure. It is a design choice. These products are optimized for engagement, and engagement requires interruption.
|
||||
|
||||
But there is another way to build software.
|
||||
|
||||
## Attention as a resource
|
||||
|
||||
Your attention is finite. Every notification, every animation, every unexpected change in the interface costs something. Most software treats this cost as zero. It is not.
|
||||
|
||||
Calm software acknowledges this. It does its job and gets out of the way. It does not celebrate itself. It does not demand that you notice it.
|
||||
|
||||
## What calm software looks like
|
||||
|
||||
- It loads fast and stays stable
|
||||
- It does not move things around after the page renders
|
||||
- It uses typography and whitespace instead of color and motion
|
||||
- It provides information without demanding a response
|
||||
- It respects the back button
|
||||
|
||||
These are not features. They are qualities. You cannot put them in a changelog, but you feel their absence immediately.
|
||||
|
||||
## Why this matters
|
||||
|
||||
The tools we use shape how we think. Frantic tools produce frantic work. Calm tools create space for focus.
|
||||
|
||||
We build UINUX products with this in mind. Not every product needs to be calm. But the ones that do — the ones used for writing, thinking, and building — should be.
|
||||
|
||||
This blog is one of them.
|
||||
46
src/content/posts/systems-not-themes.md
Normal file
46
src/content/posts/systems-not-themes.md
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
title: "Systems, Not Themes"
|
||||
description: "Why we build design systems instead of selling themes, and what that means for long-term product thinking."
|
||||
date: 2026-02-01
|
||||
tags: ["design", "systems"]
|
||||
---
|
||||
|
||||
There is a difference between a theme and a system.
|
||||
|
||||
A theme is a surface. It gives you colors, fonts, and a layout. You install it, adjust a few settings, and move on. It works until it does not. When your needs change, the theme becomes a constraint.
|
||||
|
||||
A system is a structure. It gives you rules, relationships, and a way of thinking about your product. It grows with you. It does not need to be replaced — it needs to be understood.
|
||||
|
||||
## The problem with themes
|
||||
|
||||
Themes optimize for first impressions. They are built to look good in a preview. They are designed to convert browsers into buyers.
|
||||
|
||||
But the people who use them — the ones who build real products — quickly discover the gap between what was promised and what is possible.
|
||||
|
||||
- Customization hits a wall
|
||||
- Components do not compose well together
|
||||
- Updates break things
|
||||
- The original design intent gets lost
|
||||
|
||||
This is not a failure of any individual theme. It is a failure of the model.
|
||||
|
||||
## What a system provides
|
||||
|
||||
A system does not try to look good in a screenshot. It tries to work well over time.
|
||||
|
||||
It provides:
|
||||
|
||||
- **Consistent spacing** that scales across screen sizes
|
||||
- **Typography rules** that maintain hierarchy without manual adjustment
|
||||
- **Component patterns** that compose predictably
|
||||
- **Constraints** that prevent drift
|
||||
|
||||
The value is not in what it gives you. The value is in what it prevents.
|
||||
|
||||
## Building with restraint
|
||||
|
||||
The hardest part of building a system is saying no. Every feature request feels reasonable in isolation. But systems degrade one reasonable addition at a time.
|
||||
|
||||
Good systems are opinionated. They make decisions so you do not have to. They trade flexibility for coherence.
|
||||
|
||||
This is the approach we take at UINUX. Not because constraints are fashionable, but because they work.
|
||||
47
src/content/posts/writing-as-interface.md
Normal file
47
src/content/posts/writing-as-interface.md
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
---
|
||||
title: "Writing as Interface"
|
||||
description: "The best interface for communicating complex ideas is still plain text."
|
||||
date: 2026-01-02
|
||||
tags: ["writing", "design"]
|
||||
---
|
||||
|
||||
We spend enormous effort designing interfaces. Layouts, components, interactions, animations. All of it in service of communicating something to someone.
|
||||
|
||||
But for complex ideas — the kind that require nuance, context, and careful reasoning — the best interface is still a paragraph.
|
||||
|
||||
## The limits of visual design
|
||||
|
||||
Visual design excels at orientation. It tells you where you are, what you can do, and what matters most. It is essential for applications, dashboards, and tools.
|
||||
|
||||
But it struggles with depth. A card component can hold a title and a summary. It cannot hold an argument. A grid layout can organize information. It cannot develop a thought.
|
||||
|
||||
For that, you need prose.
|
||||
|
||||
## Why Markdown works
|
||||
|
||||
Markdown is not a design tool. It is a writing tool. It gives you:
|
||||
|
||||
- Headings for structure
|
||||
- Paragraphs for ideas
|
||||
- Lists for enumeration
|
||||
- Code blocks for precision
|
||||
- Links for references
|
||||
|
||||
Nothing else. And that is exactly right.
|
||||
|
||||
The constraint of Markdown forces clarity. You cannot hide weak thinking behind a beautiful layout. The words have to do the work.
|
||||
|
||||
## Building for writers
|
||||
|
||||
When we built this blog, we started with the reading experience. Not the homepage, not the navigation, not the visual identity. The paragraph.
|
||||
|
||||
Every decision flows from there:
|
||||
|
||||
- **Font choice**: optimized for long-form reading
|
||||
- **Line length**: constrained to prevent eye fatigue
|
||||
- **Spacing**: generous, to let ideas breathe
|
||||
- **Color**: neutral, to keep focus on the text
|
||||
|
||||
The result is not impressive. It is not meant to be. It is meant to be readable.
|
||||
|
||||
That is enough.
|
||||
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
44
src/pages/about.astro
Normal file
44
src/pages/about.astro
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
import Heading from "../components/Heading.astro";
|
||||
import Prose from "../components/Prose.astro";
|
||||
---
|
||||
|
||||
<Layout title="About — UINUX Blog" description="About UINUX Blog.">
|
||||
<script slot="head" type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "AboutPage",
|
||||
"name": "About UINUX Blog",
|
||||
"description": "About UINUX Blog.",
|
||||
"url": new URL("/about", Astro.site).href,
|
||||
"isPartOf": {
|
||||
"@type": "WebSite",
|
||||
"name": "UINUX Blog",
|
||||
"url": Astro.site?.href,
|
||||
},
|
||||
})} />
|
||||
<section class="about">
|
||||
<Heading as="h1">About</Heading>
|
||||
<Prose>
|
||||
<p>
|
||||
UINUX Blog is a quiet place for writing about systems, design decisions,
|
||||
and the craft of building digital products with restraint.
|
||||
</p>
|
||||
<p>
|
||||
It is part of <a href="https://uinux.co">UINUX</a>, a design practice
|
||||
focused on systems over themes, clarity over complexity, and long-term
|
||||
thinking over trends.
|
||||
</p>
|
||||
<p>
|
||||
This blog exists to share ideas, not to sell. There are no newsletters,
|
||||
no pop-ups, no tracking. Just writing.
|
||||
</p>
|
||||
</Prose>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.about {
|
||||
max-width: var(--width-content);
|
||||
}
|
||||
</style>
|
||||
182
src/pages/index.astro
Normal file
182
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
import Heading from "../components/Heading.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
const allPosts = (await getCollection("posts")).sort(
|
||||
(a, b) => b.data.date.valueOf() - a.data.date.valueOf()
|
||||
);
|
||||
|
||||
const posts = allPosts.slice(0, PAGE_SIZE);
|
||||
const totalPages = Math.ceil(allPosts.length / PAGE_SIZE);
|
||||
---
|
||||
|
||||
<Layout title="UINUX Blog">
|
||||
<script slot="head" type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "UINUX Blog",
|
||||
"description": "Writing about systems, design, and building with restraint.",
|
||||
"url": Astro.site?.href,
|
||||
})} />
|
||||
<section class="home">
|
||||
<header class="home-header">
|
||||
<Heading as="h1">UINUX Blog</Heading>
|
||||
<p class="home-tagline">Writing about systems, design, and building with restraint.</p>
|
||||
</header>
|
||||
<ul class="post-list">
|
||||
{
|
||||
posts.map((post) => {
|
||||
const formattedDate = post.data.date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
return (
|
||||
<li class="post-item">
|
||||
<a href={`/posts/${post.id}`}>
|
||||
<span class="post-title">{post.data.title}</span>
|
||||
<span class="post-description">{post.data.description}</span>
|
||||
<time datetime={post.data.date.toISOString()}>{formattedDate}</time>
|
||||
</a>
|
||||
{post.data.tags.length > 0 && (
|
||||
<div class="post-tags">
|
||||
{post.data.tags.map((tag) => (
|
||||
<a href={`/tags/${tag}`} class="tag">{tag}</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
{totalPages > 1 && (
|
||||
<nav class="pagination" aria-label="Pagination">
|
||||
<span class="pagination-info">Page 1 of {totalPages}</span>
|
||||
<a href="/page/2" class="pagination-link">Older →</a>
|
||||
</nav>
|
||||
)}
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.home {
|
||||
max-width: var(--width-content);
|
||||
}
|
||||
|
||||
.home-header {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.home-tagline {
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.post-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-item {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.post-item:first-child {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.post-item a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
padding-top: var(--space-lg);
|
||||
padding-bottom: var(--space-lg);
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.post-item:has(.post-tags) a {
|
||||
padding-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.post-item a:hover .post-title {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.3;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.post-description {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.post-item time {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xs);
|
||||
padding-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.6875rem;
|
||||
color: var(--color-text-tertiary);
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 0.0625rem 0.375rem;
|
||||
border-radius: 3px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: var(--space-xl);
|
||||
padding-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.pagination-link {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pagination-link:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
</style>
|
||||
179
src/pages/page/[page].astro
Normal file
179
src/pages/page/[page].astro
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
---
|
||||
import Layout from "../../components/Layout.astro";
|
||||
import Heading from "../../components/Heading.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
import type { GetStaticPathsOptions } from "astro";
|
||||
|
||||
export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
|
||||
const posts = (await getCollection("posts")).sort(
|
||||
(a, b) => b.data.date.valueOf() - a.data.date.valueOf()
|
||||
);
|
||||
const pages = paginate(posts, { pageSize: 10 });
|
||||
// Skip page 1 — home page (index.astro) handles it
|
||||
return pages.filter((p) => p.params.page !== undefined);
|
||||
}
|
||||
|
||||
const { page } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title={`Page ${page.currentPage} — UINUX Blog`}>
|
||||
<section class="home">
|
||||
<header class="home-header">
|
||||
<Heading as="h1">UINUX Blog</Heading>
|
||||
<p class="home-tagline">Writing about systems, design, and building with restraint.</p>
|
||||
</header>
|
||||
<ul class="post-list">
|
||||
{page.data.map((post) => {
|
||||
const formattedDate = post.data.date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
return (
|
||||
<li class="post-item">
|
||||
<a href={`/posts/${post.id}`}>
|
||||
<span class="post-title">{post.data.title}</span>
|
||||
<span class="post-description">{post.data.description}</span>
|
||||
<time datetime={post.data.date.toISOString()}>{formattedDate}</time>
|
||||
</a>
|
||||
{post.data.tags.length > 0 && (
|
||||
<div class="post-tags">
|
||||
{post.data.tags.map((tag) => (
|
||||
<a href={`/tags/${tag}`} class="tag">{tag}</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<nav class="pagination" aria-label="Pagination">
|
||||
{page.url.prev && (
|
||||
<a href={page.currentPage === 2 ? "/" : page.url.prev} class="pagination-link">← Newer</a>
|
||||
)}
|
||||
<span class="pagination-info">Page {page.currentPage} of {page.lastPage}</span>
|
||||
{page.url.next && (
|
||||
<a href={page.url.next} class="pagination-link">Older →</a>
|
||||
)}
|
||||
</nav>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.home {
|
||||
max-width: var(--width-content);
|
||||
}
|
||||
|
||||
.home-header {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.home-tagline {
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.post-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-item {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.post-item:first-child {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.post-item a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
padding-top: var(--space-lg);
|
||||
padding-bottom: var(--space-lg);
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.post-item:has(.post-tags) a {
|
||||
padding-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.post-item a:hover .post-title {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.3;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.post-description {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.post-item time {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xs);
|
||||
padding-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.6875rem;
|
||||
color: var(--color-text-tertiary);
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 0.0625rem 0.375rem;
|
||||
border-radius: 3px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: var(--space-xl);
|
||||
padding-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.pagination-link {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pagination-link:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
</style>
|
||||
49
src/pages/posts/[...slug].astro
Normal file
49
src/pages/posts/[...slug].astro
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
import Layout from "../../components/Layout.astro";
|
||||
import Article from "../../components/Article.astro";
|
||||
import { getCollection, render } from "astro:content";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection("posts");
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.id },
|
||||
props: post,
|
||||
}));
|
||||
}
|
||||
|
||||
const post = Astro.props;
|
||||
const { Content } = await render(post);
|
||||
|
||||
const postUrl = new URL(`/posts/${post.id}`, Astro.site).href;
|
||||
|
||||
const jsonLd = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BlogPosting",
|
||||
"headline": post.data.title,
|
||||
"description": post.data.description,
|
||||
"datePublished": post.data.date.toISOString(),
|
||||
"url": postUrl,
|
||||
"keywords": post.data.tags.length > 0 ? post.data.tags.join(", ") : undefined,
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": postUrl,
|
||||
},
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "UINUX",
|
||||
"url": "https://uinux.co",
|
||||
},
|
||||
"publisher": {
|
||||
"@type": "Organization",
|
||||
"name": "UINUX",
|
||||
"url": "https://uinux.co",
|
||||
},
|
||||
};
|
||||
---
|
||||
|
||||
<Layout title={`${post.data.title} — UINUX Blog`} description={post.data.description} ogType="article">
|
||||
<script slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
|
||||
<Article title={post.data.title} date={post.data.date} description={post.data.description} tags={post.data.tags}>
|
||||
<Content />
|
||||
</Article>
|
||||
</Layout>
|
||||
22
src/pages/rss.xml.ts
Normal file
22
src/pages/rss.xml.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import rss from "@astrojs/rss";
|
||||
import { getCollection } from "astro:content";
|
||||
import type { APIContext } from "astro";
|
||||
|
||||
export async function GET(context: APIContext) {
|
||||
const posts = (await getCollection("posts")).sort(
|
||||
(a, b) => b.data.date.valueOf() - a.data.date.valueOf()
|
||||
);
|
||||
|
||||
return rss({
|
||||
title: "UINUX Blog",
|
||||
description: "Writing about systems, design, and building with restraint.",
|
||||
site: context.site!,
|
||||
items: posts.map((post) => ({
|
||||
title: post.data.title,
|
||||
pubDate: post.data.date,
|
||||
description: post.data.description,
|
||||
link: `/posts/${post.id}`,
|
||||
categories: post.data.tags,
|
||||
})),
|
||||
});
|
||||
}
|
||||
26
src/pages/search-index.json.ts
Normal file
26
src/pages/search-index.json.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import type { APIContext } from "astro";
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
export async function GET(context: APIContext) {
|
||||
const posts = (await getCollection("posts")).sort(
|
||||
(a, b) => b.data.date.valueOf() - a.data.date.valueOf()
|
||||
);
|
||||
|
||||
const index = posts.map((post) => ({
|
||||
slug: post.id,
|
||||
title: post.data.title,
|
||||
description: post.data.description,
|
||||
date: post.data.date.toISOString(),
|
||||
tags: post.data.tags,
|
||||
body: (post.body ?? "")
|
||||
.replace(/^---[\s\S]*?\n---\n?/, "")
|
||||
.replace(/[#*`\[\]()>_~|\\]/g, "")
|
||||
.replace(/\n+/g, " ")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim(),
|
||||
}));
|
||||
|
||||
return new Response(JSON.stringify(index), {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
}
|
||||
238
src/pages/search.astro
Normal file
238
src/pages/search.astro
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
import Heading from "../components/Heading.astro";
|
||||
---
|
||||
|
||||
<Layout title="Search — UINUX Blog" description="Search posts on UINUX Blog.">
|
||||
<section class="search-page">
|
||||
<Heading as="h1">Search</Heading>
|
||||
<div class="search-input-wrap">
|
||||
<input
|
||||
type="text"
|
||||
id="search-input"
|
||||
placeholder="Search posts..."
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
<ul id="search-results" class="search-results"></ul>
|
||||
<p id="search-empty" class="search-empty" hidden>No posts found.</p>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
interface SearchEntry {
|
||||
slug: string;
|
||||
title: string;
|
||||
description: string;
|
||||
date: string;
|
||||
tags: string[];
|
||||
body: string;
|
||||
}
|
||||
|
||||
let index: SearchEntry[] = [];
|
||||
let loaded = false;
|
||||
|
||||
const input = document.getElementById("search-input") as HTMLInputElement;
|
||||
const resultsList = document.getElementById("search-results") as HTMLUListElement;
|
||||
const emptyMsg = document.getElementById("search-empty") as HTMLParagraphElement;
|
||||
|
||||
async function loadIndex(): Promise<void> {
|
||||
if (loaded) return;
|
||||
const res = await fetch("/search-index.json");
|
||||
index = await res.json();
|
||||
loaded = true;
|
||||
}
|
||||
|
||||
function search(query: string): SearchEntry[] {
|
||||
const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
|
||||
if (terms.length === 0) return [];
|
||||
|
||||
return index.filter((entry) => {
|
||||
const haystack = `${entry.title} ${entry.description} ${entry.tags.join(" ")} ${entry.body}`.toLowerCase();
|
||||
return terms.every((term) => haystack.includes(term));
|
||||
});
|
||||
}
|
||||
|
||||
function getSnippet(entry: SearchEntry, query: string): string | null {
|
||||
const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
|
||||
const titleDesc = `${entry.title} ${entry.description} ${entry.tags.join(" ")}`.toLowerCase();
|
||||
const allInTitleDesc = terms.every((t) => titleDesc.includes(t));
|
||||
if (allInTitleDesc) return null;
|
||||
|
||||
const bodyLower = entry.body.toLowerCase();
|
||||
for (const term of terms) {
|
||||
const pos = bodyLower.indexOf(term);
|
||||
if (pos === -1) continue;
|
||||
const start = Math.max(0, pos - 40);
|
||||
const end = Math.min(entry.body.length, pos + term.length + 80);
|
||||
const prefix = start > 0 ? "…" : "";
|
||||
const suffix = end < entry.body.length ? "…" : "";
|
||||
return prefix + entry.body.slice(start, end).trim() + suffix;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
function escapeHtml(str: string): string {
|
||||
const div = document.createElement("div");
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function render(results: SearchEntry[], query: string): void {
|
||||
resultsList.innerHTML = "";
|
||||
|
||||
if (query.trim() === "") {
|
||||
emptyMsg.hidden = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (results.length === 0) {
|
||||
emptyMsg.hidden = false;
|
||||
return;
|
||||
}
|
||||
|
||||
emptyMsg.hidden = true;
|
||||
|
||||
for (const entry of results) {
|
||||
const snippet = getSnippet(entry, query);
|
||||
const li = document.createElement("li");
|
||||
li.className = "search-result-item";
|
||||
li.innerHTML = `
|
||||
<a href="/posts/${encodeURIComponent(entry.slug)}">
|
||||
<span class="result-title">${escapeHtml(entry.title)}</span>
|
||||
<span class="result-description">${escapeHtml(entry.description)}</span>
|
||||
${snippet ? `<span class="result-snippet">${escapeHtml(snippet)}</span>` : ""}
|
||||
<time datetime="${escapeHtml(entry.date)}">${formatDate(entry.date)}</time>
|
||||
</a>
|
||||
`;
|
||||
resultsList.appendChild(li);
|
||||
}
|
||||
}
|
||||
|
||||
let debounceTimer: ReturnType<typeof setTimeout>;
|
||||
|
||||
input.addEventListener("input", () => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(async () => {
|
||||
await loadIndex();
|
||||
const query = input.value;
|
||||
const results = search(query);
|
||||
render(results, query);
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// Support ?q= query param
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const initialQuery = params.get("q");
|
||||
if (initialQuery) {
|
||||
input.value = initialQuery;
|
||||
loadIndex().then(() => {
|
||||
const results = search(initialQuery);
|
||||
render(results, initialQuery);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.search-page {
|
||||
max-width: var(--width-content);
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
margin-top: var(--space-lg);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
#search-input {
|
||||
width: 100%;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1rem;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
#search-input:focus {
|
||||
border-color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
#search-input::placeholder {
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.search-results {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.search-result-item:first-child {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.search-result-item a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-lg) 0;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.search-result-item a:hover .result-title {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.3;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.result-description {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.search-result-item time {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.result-snippet {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: 1.5;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.search-empty {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
</style>
|
||||
122
src/pages/tags/[tag].astro
Normal file
122
src/pages/tags/[tag].astro
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
---
|
||||
import Layout from "../../components/Layout.astro";
|
||||
import Heading from "../../components/Heading.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection("posts");
|
||||
const tags = [...new Set(posts.flatMap((p) => p.data.tags))];
|
||||
return tags.map((tag) => ({
|
||||
params: { tag },
|
||||
props: {
|
||||
tag,
|
||||
posts: posts
|
||||
.filter((p) => p.data.tags.includes(tag))
|
||||
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()),
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
const { tag, posts } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title={`Posts tagged "${tag}" — UINUX Blog`} description={`All posts tagged "${tag}".`}>
|
||||
<section class="tag-page">
|
||||
<Heading as="h1">Tagged: {tag}</Heading>
|
||||
<p class="tag-count">{posts.length} post{posts.length !== 1 ? "s" : ""}</p>
|
||||
<ul class="post-list">
|
||||
{posts.map((post) => {
|
||||
const formattedDate = post.data.date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
return (
|
||||
<li class="post-item">
|
||||
<a href={`/posts/${post.id}`}>
|
||||
<span class="post-title">{post.data.title}</span>
|
||||
<span class="post-description">{post.data.description}</span>
|
||||
<time datetime={post.data.date.toISOString()}>{formattedDate}</time>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<a href="/tags" class="back-link" aria-label="Back to all tags">← All tags</a>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.tag-page {
|
||||
max-width: var(--width-content);
|
||||
}
|
||||
|
||||
.tag-count {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-tertiary);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.post-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-item {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.post-item:first-child {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.post-item a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-lg) 0;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.post-item a:hover .post-title {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.3;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.post-description {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.post-item time {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-top: var(--space-xl);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-tertiary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
</style>
|
||||
65
src/pages/tags/index.astro
Normal file
65
src/pages/tags/index.astro
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
---
|
||||
import Layout from "../../components/Layout.astro";
|
||||
import Heading from "../../components/Heading.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
const posts = await getCollection("posts");
|
||||
const tagCounts = new Map<string, number>();
|
||||
for (const post of posts) {
|
||||
for (const tag of post.data.tags) {
|
||||
tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1);
|
||||
}
|
||||
}
|
||||
const tags = [...tagCounts.entries()].sort((a, b) => b[1] - a[1]);
|
||||
---
|
||||
|
||||
<Layout title="Tags — UINUX Blog" description="Browse posts by tag.">
|
||||
<section class="tags-page">
|
||||
<Heading as="h1">Tags</Heading>
|
||||
<ul class="tag-list">
|
||||
{tags.map(([tag, count]) => (
|
||||
<li>
|
||||
<a href={`/tags/${tag}`} class="tag-link">
|
||||
{tag} <span class="tag-count">({count})</span>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.tags-page {
|
||||
max-width: var(--width-content);
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.tag-link {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 3px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.tag-link:hover {
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.tag-count {
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
73
src/styles/global.css
Normal file
73
src/styles/global.css
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
/* ============================================
|
||||
UINUX Blog — Global Styles
|
||||
A calm, typography-first design system.
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
--font-body: "Newsreader", Georgia, "Times New Roman", serif;
|
||||
--font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
|
||||
|
||||
--color-text: #1a1a1a;
|
||||
--color-text-secondary: #555;
|
||||
--color-text-tertiary: #888;
|
||||
--color-bg: #fafaf9;
|
||||
--color-surface: #fff;
|
||||
--color-border: #e5e5e3;
|
||||
--color-link: #1a1a1a;
|
||||
--color-link-hover: #555;
|
||||
--color-code-bg: #f4f4f2;
|
||||
|
||||
--width-content: 640px;
|
||||
--width-page: 720px;
|
||||
|
||||
--space-xs: 0.25rem;
|
||||
--space-sm: 0.5rem;
|
||||
--space-md: 1rem;
|
||||
--space-lg: 2rem;
|
||||
--space-xl: 3rem;
|
||||
--space-2xl: 5rem;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 18px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-link);
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 2px;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #d4d4d0;
|
||||
}
|
||||
3
tsconfig.json
Normal file
3
tsconfig.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict"
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue