Add Native Blog and Info Update

2026-07-19 22:01:57 -04:00
parent 6cfce40e54
commit f315981cbc
55 changed files with 1969 additions and 247 deletions
@@ -6,26 +6,31 @@ An Arch Linux terminal-themed portfolio website with Hyprland-style TUI componen

 - Hyprland-style TUI - Terminal interface inspired by Textual Python TUI
 - Interactive command line - Type commands directly into the terminal to navigate and run actions
- Theme Support - Arch Linux and Catppuccin (Mocha/Latte) themes
+- Theme Support - Arch, Catppuccin, Wintry, Rose, and Cerberus themes, each with dark/light variants
 - Dark/Light Mode - Toggle between dark and light modes
 - Keyboard Navigation - Navigate with arrow keys or vim-style j/k
+- Native Blog - Markdown posts with tags, authors, syntax highlighting, search, pagination, and an RSS feed
 - 3D Model Viewer - Interactive Three.js viewer for .glb models
 - QR Links Page - Generate a scannable QR code for any of your links
 - Configurable Speed - Per-page typing animation speed
 - Responsive - Works on desktop and mobile
- Rich Text Formatting - Colors, backgrounds, and text decorations
+- Rich Text Formatting - Colors, backgrounds, text decorations, and sizeable inline icons

 ## Pages

 - Home (`/`) - Neofetch-style intro with navigation
 - About (`/about`) - Background and details
 - Portfolio (`/portfolio`) - Profile, experience, skills, and contact info
- Projects (`/projects`) - Open source, packages, and hackathon projects
+- Projects (`/projects`) - Hub linking out to the three project categories below
+  - Open Source (`/projects/opensource`) - Projects built and maintained in the open
+  - Packages (`/projects/packages`) - Published packages and CLI tools
+  - Hackathons (`/projects/hackathons`) - Hackathon projects, awards, and stats
+- Blog (`/blog`) - Native markdown blog with tags, search, pagination, and an RSS feed at `/blog/rss.xml`
 - Models (`/models`) - 3D model gallery with interactive viewer
 - Components (`/components`) - Showcase of all TUI components
 - Links (`/links`) - All links with on-demand QR codes

-The navbar exposes Home, About, Portfolio, Projects, and Blog. The Models, Components, and Links pages are reachable directly by URL or with the terminal `cd` command (for example, `cd links`).
+The navbar exposes Home, About, Projects, and Blog. Portfolio, Models, Components, and Links are reachable directly by URL or with the terminal `cd` command (for example, `cd links`).

 ## Terminal Commands

@@ -38,18 +43,19 @@ Use the Up/Down arrows to cycle through command history.
 | `help` | `h`, `?` | List all available commands |
 | `clear` | `cls` | Clear the terminal |
 | `whoami` | | Show a short bio |
-| `neofetch` | `banner` | Display system info |
+| `neofetch` | `banner` | Display system info with profile picture |
 | `skills` | | List skills by category |
 | `contact` | `socials` | Show social links as buttons |
-| `email` | | Open a mail draft |
-| `cd <page>` | `goto`, `open` | Navigate to a page |
-| `ls` | | List the pages you can visit |
+| `email` | | Show contact email |
+| `cd <page>` | `goto`, `open` | Navigate to a page, including subpages (e.g. `cd projects/opensource`) |
+| `ls` | `dir` | List the pages you can visit as a tree, with project subpages nested under `projects/` |
 | `theme [name]` | | List or set the color theme |
 | `mode [dark\|light]` | | Toggle or set dark/light mode |
 | `echo <text>` | | Print text back |
-| `date` | | Show the current date and time |
+| `cowsay <text>` | | Make a cow say something |
+| `date` | | Show the current date and time (Eastern) |

-Command definitions live in `src/lib/components/tui/terminal-commands.ts`. Add a new entry to the `commands` list to extend the command set.
+Command definitions live in `src/lib/components/tui/terminal-commands.ts`. Add a new entry to the `commands` list to extend the command set. Pages and their subpages are declared once in the `pageTree` structure in that file, which both `ls` (tree rendering) and `cd` (nested path resolution) read from.

 ## Configuration

@@ -65,7 +71,8 @@ src/lib/config/
 ├── theme.ts       # Colors, animations, effects, loading screen
 ├── content.ts     # Projects, 3D models, experience, hackathon cards
 ├── terminal.ts    # Terminal settings, TUI styling, speed presets, shortcuts
-└── navigation.ts  # Navigation links, site metadata, page meta
+├── navigation.ts  # Navigation links, site metadata, page meta
+└── blog.ts        # Blog name and tagline shown on /blog
 ```

 ### Import Examples
@@ -92,6 +99,7 @@ import { navigation, site, pageMeta } from '$lib/config/navigation';
 | `content.ts` | `openSourceProjects`, `packageProjects`, `models`, `experience`, `cards`, `sortedCards` + types |
 | `terminal.ts` | `terminalSettings`, `tuiStyle`, `tuiText`, `pageSpeedSettings`, `pageAutoscrollSettings`, `speedPresets`, `modelViewer`, `particles`, `keyboardShortcuts` |
 | `navigation.ts` | `navigation`, `site`, `pageMeta` |
+| `blog.ts` | `blogName`, `blogTagline` |

 ### Example: Key config snippets

@@ -168,6 +176,42 @@ export const links: LinkItem[] = [

 QR codes are generated with the `svelte-qrcode` package, loaded on the client.

+## Blog
+
+The `/blog` page is a native markdown blog — no external blogging platform required.
+
+### Writing a Post
+
+Add a markdown file to the `blogs/` directory at the project root:
+
+```markdown
+---
+title: My Post Title
+author: Your Name
+date: 2026-01-01
+tags: meta, notes
+excerpt: A one line summary shown on the blog list and in the RSS feed.
+---
+
+Post content goes here, written in markdown.
+```
+
+Posts are picked up automatically via `import.meta.glob` in `src/lib/blog/posts.ts` — no manual registration needed. `author` and `date` are optional; `author` falls back to `user.displayname`.
+
+### Rendering
+
+`src/lib/blog/markdown.ts` is a small hand-written markdown-to-HTML renderer (headings, bold/italic, links, images, lists, blockquotes, and fenced code blocks) — no external markdown dependency. Fenced code blocks with a language tag (` ```js `, ` ```python `, etc.) get lightweight syntax highlighting via `src/lib/blog/highlight.ts`, and every code block gets a copy-to-clipboard button.
+
+Dates are parsed and formatted in Eastern time via `src/lib/blog/date.ts`, anchored at noon UTC to avoid off-by-one day shifts from timezone conversion.
+
+### Features
+
+- Tags with click-to-filter on the blog list
+- Full-text search across title, excerpt, and tags
+- Pagination (5 posts per page)
+- Previous/next post navigation on each post page
+- RSS feed at `/blog/rss.xml` (`src/routes/blog/rss.xml/+server.ts`)
+
 ## Speed Presets

 | Preset | Effect |
@@ -233,6 +277,13 @@ Add `bg-` prefix to any color:
 '(&overline)Overlined text(&)'
 ```

+### Inline Icons
+
+```typescript
+'(&icon, mdi:github) GitHub'          // Inline icon, default size
+'(&icon, mdi:trophy, 32) Winner'      // Inline icon with a custom size in pixels
+```
+
 ### Combining Styles

 Combine multiple styles with commas:
@@ -289,6 +340,7 @@ All line types support these optional properties:
  // OR
  action: () => doSomething(),  // Custom action
  border: false,                // Disable default border (default: true)
+  flex: true,                   // Grow to fill available space in a row group (default: false)
 }
 ```

@@ -468,39 +520,6 @@ Add `id` to any line to create an anchor that can be linked to:

 Then link to it with `/portfolio#skills` - the page will scroll to that section after typing completes.

-### Component Structure
-
-```
-src/lib/components/
-├── TerminalTUI.svelte      # Main terminal container
-└── tui/
-    ├── types.ts              # TypeScript types (TerminalLine, TerminalAPI, etc.)
-    ├── utils.ts              # Parsing & styling utilities
-    ├── terminal-api.ts       # Terminal API factory for reactive control
-    ├── terminal-typing.ts    # Typing animation engine
-    ├── terminal-keyboard.ts  # Keyboard navigation handler
-    ├── terminal-commands.ts  # Interactive command definitions
-    ├── TuiHeader.svelte      # Top status bar
-    ├── TuiBody.svelte        # Scrollable content area + command input
-    ├── TuiFooter.svelte      # Bottom status bar
-    ├── TuiLine.svelte        # Unified line renderer for all types
-    ├── TuiGroup.svelte       # Container for grouped elements
-    ├── TuiButton.svelte      # Full-width button
-    ├── TuiLink.svelte        # Inline clickable link
-    ├── TuiCard.svelte        # Card with header/body/footer
-    ├── TuiCardGrid.svelte    # Grid layout for cards
-    ├── TuiProgress.svelte    # Animated progress bar
-    ├── TuiAccordion.svelte   # Collapsible sections
-    ├── TuiTable.svelte       # Data table with headers
-    ├── TuiTooltip.svelte     # Hover tooltip
-    ├── TuiInput.svelte       # Text input field
-    ├── TuiTextarea.svelte    # Multi-line text input
-    ├── TuiCheckbox.svelte    # Checkbox input
-    ├── TuiRadio.svelte       # Radio button group
-    ├── TuiSelect.svelte      # Dropdown select
-    └── TuiToggle.svelte      # Toggle switch
-```
-
 ## Terminal API

 The `TerminalTUI` component exposes a reactive API for programmatic control via the `terminal` bindable prop.
@@ -682,7 +701,7 @@ When the command input is focused, these keys type normally instead of triggerin

 ## Theme System

-Themes are defined as JSON files in `src/lib/assets/themes/`. Each theme contains colors for both dark and light modes.
+Themes are defined as JSON files in `src/lib/assets/themes/`. Each theme contains colors for both dark and light modes. Shipped themes: Arch, Catppuccin, Wintry, Rose, and Cerberus (`src/lib/stores/theme.ts`).

 ### Theme File Structure