Oat Blog - Technical Documentation

• Page Link

• Oat UI: A semantic, zero-dependency UI library

• Mermaid: Generation of diagrams and flowcharts from text in a similar manner to Markdown

• Draw.io: Interactive diagramming for creating flowcharts, process diagrams, org charts, UML, ER and network diagrams

Features

• Dark/Light Theme Toggle: Persistent theme preference with smooth transitions
• Monochrome Dark Theme: Black/white/grey palette for sophisticated engineering aesthetic
• Engineering Typography: JetBrains Mono headings + Work Sans body text
• Responsive Design: Optimized for desktop and mobile
• Semantic HTML: Clean, accessible markup using oat.ink
• SVG Icons: Professional theme toggle icons
• Diagram Support:
  • Mermaid.js: Code-based diagrams (Flowcharts, Sequence, ERD) with dark mode optimization
  • Draw.io: Interactive visual diagrams embedded via XML with dark mode support
• Zero Dependencies: Pure HTML, CSS, and vanilla JavaScript (libraries are vendored locally)

Color Palette

Light Theme

• Primary: #2c3e50 (Dark Blue) - Headers, links
• Secondary: #34495e (Blue/Grey) - Navigation, subheadings
• Accent: #e67e22 (Orange) - Hover states, highlights
• Background: #fdfdfd (Off-white) - Page background
• Text: #333333 (Dark Grey) - Body text

Dark Theme (Monochrome)

• Primary: #ffffff (White) - Headers, links
• Secondary: #d4d4d4 (Light Grey) - Navigation, subheadings
• Accent: #fb923c (Coral Orange) - Hover states, highlights
• Background: #0a0a0a (Deep Black) - Page background
• Text: #e5e5e5 (Off-white) - Body text
• Meta: #a3a3a3 (Medium Grey) - Dates, metadata
• Border: #262626 (Dark Grey) - Borders, separators

Typography

Headings: JetBrains Mono (Monospaced)

• Purpose: Technical, engineering-focused aesthetic
• Inspiration: Nothing community's "NType Mono"
• Character: Code-like, rigid, professional
• Weights: 400, 500, 600, 700
• Usage: All headings (h1-h6)

Body Text: Work Sans (Sans-serif)

• Purpose: Distinctive, readable body text
• Character: Modern, friendly, open
• Weights: 400, 500, 600, 700
• Usage: Paragraphs, navigation, metadata

Font Pairing Philosophy

The combination of monospaced headings and geometric sans-serif body creates an authentic engineering blog aesthetic:

• Monospaced = Technical, code-like, engineering notebook
• Work Sans = Modern, readable, professional
• Together = Distinctive engineering aesthetic without being decorative

Design Decisions

Monochrome Dark Theme

• Why: Sophisticated, timeless, professional
• Benefit: High contrast for readability
• Aesthetic: Engineering-focused, no-nonsense
• Inspiration: Technical documentation, developer tools

Engineering Typography

• Why: Inspired by Nothing community design
• Benefit: Distinctive character, technical feel
• Aesthetic: Engineering notebook, code documentation
• No Decorative Fonts: Clean, professional, not fancy

SVG Icons

• Why: Replaced emoji theme toggle
• Benefit: Professional, scalable, consistent
• Icons: Moon (light mode) and Sun (dark mode)
• Styling: Stroke-based, minimal, adaptive colors

Wider Layout

• Max Width: 960px (increased from 800px)
• Why: Better use of modern screen space
• Benefit: More breathing room for content

Project Structure

oat-blog/
├── index.html              # Homepage with blog post list
├── post.html               # Single post template
├── about.html              # About page
├── projects.html           # Projects page
├── posts/                  # Blog post content
│   ├── posts.js            # Post index/metadata
│   └── *.md                # Markdown post files
├── assets/
│   ├── css/
│   │   ├── oat.css         # Oat UI library styles (minified)
│   │   └── style.css       # Custom styles and theme
│   └── js/
│       ├── oat.js          # Oat UI library scripts (minified)
│       ├── blog.js         # Blog logic, markdown rendering, diagrams
│       ├── marked.min.js   # Markdown parser (locally vendored)
│       ├── mermaid.min.js  # Mermaid diagram renderer (locally vendored)
│       ├── viewer.min.js   # Draw.io diagram viewer (locally vendored)
│       └── theme-toggle.js # Dark/light theme toggle
└── README.md               # This file

Writing Posts

Standard Markdown

Write posts in standard Markdown format. Use frontmatter-like syntax is handled via posts.js metadata but standard headers work for title.

Diagrams

Mermaid.js

Use mermaid code blocks for flowcharts, sequence diagrams, etc.

\`\`\`mermaid
graph TD;
A-->B;
\`\`\`

Add a caption by placing a line starting with Figure: immediately after the block.

Draw.io

Use drawio code blocks containing the exported XML from diagrams.net.

\`\`\`drawio
<mxGraphModel>...</mxGraphModel>
\`\`\`

Note: oat.css and oat.js are minified library files from oat.ink. They are kept in minified form for optimal performance. For readable source code, visit the oat.ink repository.

Technical Implementation

Theme Toggle

• Storage: localStorage for persistence
• Attribute: data-theme="dark" on <html> element
• Transition: Smooth 0.3s ease transitions
• Icons: SVG moon/sun with hover effects

CSS Architecture

• Variables: CSS custom properties for theming
• Structure: Root variables + dark theme overrides
• Responsive: Mobile-first with 640px breakpoint
• Layout: Flexbox for sticky footer

Key CSS Features

/* Font imports */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap");

/* Monospaced headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Body text */
body {
  font-family: "Work Sans", sans-serif;
  max-width: 960px;
  font-size: 17px;
}

/* Dark theme */
[data-theme="dark"] {
  --color-primary: #ffffff;
  --color-bg: #0a0a0a;
  --color-text: #e5e5e5;
}

How to Run

1. Clone or download the repository
2. Open index.html in a web browser
3. No build step required - pure HTML/CSS/JS

For development:

# Simple HTTP server (Python)
python -m http.server 8000

# Or use any static file server
npx serve

Customization

Change Colors

Edit CSS variables in assets/css/style.css:

:root {
  --color-primary: #your-color;
  --color-accent: #your-color;
}

[data-theme="dark"] {
  --color-primary: #your-color;
  --color-accent: #your-color;
}

Change Fonts

Update font imports and variables in assets/css/style.css:

@import url("https://fonts.googleapis.com/css2?family=YourFont");

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "YourFont", monospace;
}

Add Blog Posts

1. Copy an <article> block in index.html
2. Update title, date, and description
3. Create corresponding post page or link to existing

About Oat UI

This blog uses oat.ink, a semantic, zero-dependency UI library that:

• Relies on standard HTML tags
• Provides beautiful default styles
• Requires minimal custom CSS
• Is lightweight and fast
• Focuses on content over complexity

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• CSS custom properties support required
• LocalStorage for theme persistence

Performance

• No build step: Instant development
• Minimal CSS: ~6KB custom styles
• Web fonts: Google Fonts with display=swap
• No JavaScript frameworks: Pure vanilla JS
• Fast loading: Optimized assets

Accessibility

• Semantic HTML structure
• ARIA labels on interactive elements
• High contrast color schemes
• Keyboard navigation support
• Responsive font sizes

Design Philosophy

Minimalism

• Focus on content, not decoration
• Clean typography hierarchy
• Generous whitespace
• Simple, functional design

Engineering Aesthetic

• Monospaced headings for technical feel
• Monochrome color scheme
• Professional, no-nonsense approach
• Inspired by developer tools and documentation

Readability

• High contrast text
• Comfortable font sizes (17px base)
• Optimal line length (960px max)
• Clear visual hierarchy

Credits

• Oat UI: oat.ink
• Fonts:
  • JetBrains Mono by JetBrains
  • Work Sans by Wei Huang
• Inspiration: Nothing community design

License

This project is open source and available for personal and commercial use.

---

Built with simplicity in mind. Powered by oat.ink.