Marc Mintel
2113055a90
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 2m19s
90 lines
2.5 KiB
Markdown
90 lines
2.5 KiB
Markdown
# Technical Problem Solver's Blog
|
|
|
|
A clean, readable blog built with Astro and React. Focus on practical insights and learning notes.
|
|
|
|
## Features
|
|
|
|
- **Clean Architecture**: Modular React components for article elements
|
|
- **TypeScript**: Full type safety throughout
|
|
- **MDX Support**: Write content with JSX components
|
|
- **Fast**: Static site generation with Astro
|
|
- **Readable**: Carefully designed typography and spacing
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── components/ # Modular React components
|
|
│ ├── ArticleHeading.tsx
|
|
│ ├── ArticleParagraph.tsx
|
|
│ ├── ArticleList.tsx
|
|
│ ├── ArticleBlockquote.tsx
|
|
│ ├── BlogPostCard.tsx
|
|
│ └── Container.tsx
|
|
├── data/
|
|
│ └── blogPosts.ts # Blog post metadata
|
|
├── layouts/ # Astro layouts
|
|
│ ├── BaseLayout.astro
|
|
│ └── BlogLayout.astro
|
|
└── pages/ # Routes
|
|
├── index.astro # Home page
|
|
└── blog/ # Blog posts
|
|
├── first-note.astro
|
|
└── debugging-tips.astro
|
|
```
|
|
|
|
## Development
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Start dev server
|
|
npm run dev
|
|
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Preview production build
|
|
npm run preview
|
|
```
|
|
|
|
## Writing Posts
|
|
|
|
1. Add post metadata to `src/data/blogPosts.ts`
|
|
2. Create a new `.astro` file in `src/pages/blog/`
|
|
3. Import and use the modular components
|
|
4. The post will automatically appear on the home page
|
|
|
|
## Components
|
|
|
|
The blog uses modular React components for article elements:
|
|
|
|
- `H1`, `H2`, `H3` - Headings with consistent styling
|
|
- `Paragraph`, `LeadParagraph` - Text with proper spacing
|
|
- `UL`, `OL`, `LI` - Lists with proper indentation
|
|
- `Blockquote`, `CodeBlock`, `InlineCode` - Code and quotes
|
|
|
|
## Design Philosophy
|
|
|
|
- **Readability First**: Clear typography, generous spacing
|
|
- **No Distractions**: Clean layout, focus on content
|
|
- **Practical**: Tools and techniques that work
|
|
- **Calm**: No hype, just facts
|
|
|
|
## 🎥 UI Showcase Toolkit
|
|
A Remotion-based toolkit for creating high-quality, deterministic showcase videos of our React components.
|
|
|
|
- **Source of Truth**: Renders real project components.
|
|
- **Automated**: CLI-driven rendering for LinkedIn-ready videos.
|
|
- **Pixel-Perfect**: 60fps, crisp text, brand-aligned style.
|
|
|
|
### Quick Start
|
|
```bash
|
|
# Preview compositions
|
|
npm run video:preview
|
|
|
|
# Render the showcase video
|
|
npm run video:render
|
|
```
|
|
See `.agent/workflows/video-toolkit.md` for more details. |