docs: update readme and claude.md for bun migration
- rewrite readme in casual markdown style - fix bun run deploy command (deploy is reserved)
This commit is contained in:
parent
4f16c9738d
commit
4445584353
@ -10,7 +10,7 @@ core:
|
|||||||
- bun dev - run dev server
|
- bun dev - run dev server
|
||||||
- bun build - build the project
|
- bun build - build the project
|
||||||
- bun preview - build and preview with wrangler
|
- bun preview - build and preview with wrangler
|
||||||
- bun deploy - build and deploy to cloudflare pages (then run `wrangler pages deploy --branch=main` for production)
|
- bun run deploy - build and deploy to cloudflare pages (then run `wrangler pages deploy --branch=main` for production)
|
||||||
|
|
||||||
utilities:
|
utilities:
|
||||||
- bun commit - interactive git commit with AI-generated messages
|
- bun commit - interactive git commit with AI-generated messages
|
||||||
|
|||||||
242
README.md
242
README.md
@ -1,222 +1,78 @@
|
|||||||
# nicholai-work-2026
|
nicholai.work
|
||||||
|
===
|
||||||
|
|
||||||
Personal portfolio and blog site built with Astro.
|
personal portfolio and blog built with astro. live at https://nicholai.work
|
||||||
|
|
||||||
🌐 [Live Site](https://nicholai.work)
|
tech stack
|
||||||
|
---
|
||||||
|
|
||||||
## I used these:
|
- astro - static site framework
|
||||||
|
- react - interactive components
|
||||||
|
- tailwind css - styling
|
||||||
|
- mdx - markdown with jsx
|
||||||
|
- cloudflare pages - hosting
|
||||||
|
- typescript - type safety
|
||||||
|
|
||||||
- **Astro** - Static site framework
|
commands
|
||||||
- **React** - Interactive components
|
---
|
||||||
- **Tailwind CSS** - Styling
|
|
||||||
- **MDX** - Markdown with JSX support
|
|
||||||
- **Cloudflare Pages** - Hosting & deployment
|
|
||||||
- **TypeScript** - Type safety
|
|
||||||
|
|
||||||
## some commands
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
pnpm install
|
bun install # install deps
|
||||||
|
bun dev # dev server at localhost:4321
|
||||||
pnpm dev
|
bun build # production build
|
||||||
|
bun preview # preview with wrangler
|
||||||
pnpm build
|
bun run deploy # build and deploy to cloudflare
|
||||||
|
|
||||||
pnpm preview
|
|
||||||
|
|
||||||
pnpm run deploy
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Image Optimization
|
image conversion
|
||||||
|
---
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Convert all images in src/assets/
|
bun run convert:avif:all # convert all images in src/assets/
|
||||||
pnpm run convert:avif:all
|
bun run convert:avif:jpeg # just jpegs
|
||||||
|
bun run convert:avif:png # just pngs
|
||||||
pnpm run convert:avif:jpeg
|
|
||||||
|
|
||||||
pnpm run convert:avif:png
|
|
||||||
|
|
||||||
# Custom quality (0-100, default: 65)
|
|
||||||
node src/utils/convert-to-avif.js --jpeg --quality 80
|
|
||||||
```
|
|
||||||
## Blog
|
|
||||||
|
|
||||||
Blog posts are created as MDX files in the `src/content/blog/` directory. The file name becomes the URL slug (e.g., `my-post.mdx` → `/blog/my-post/`).
|
|
||||||
|
|
||||||
### Step 1: Create the MDX File
|
|
||||||
|
|
||||||
Create a new `.mdx` file in `src/content/blog/`:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
src/content/blog/my-new-post.mdx
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Step 2: Add Frontmatter
|
blog posts
|
||||||
|
---
|
||||||
|
|
||||||
Every blog post requires frontmatter at the top of the file. Here's the complete schema:
|
create mdx files in `src/content/blog/`. filename becomes the url slug.
|
||||||
|
|
||||||
|
frontmatter:
|
||||||
|
|
||||||
```mdx
|
```mdx
|
||||||
---
|
---
|
||||||
title: 'Your Post Title'
|
title: 'Post Title'
|
||||||
description: 'A brief description that appears in listings and meta tags'
|
description: 'brief description for listings and seo'
|
||||||
pubDate: 'Jan 15 2025'
|
pubDate: 'Jan 15 2025'
|
||||||
heroImage: '../../assets/your-image.jpg'
|
heroImage: '../../assets/image.jpg' # optional
|
||||||
featured: true
|
featured: true # optional, shows in hero
|
||||||
category: 'Case Study'
|
category: 'Case Study' # optional, for filtering
|
||||||
tags: ['VFX', 'Houdini', 'Nuke']
|
tags: ['VFX', 'Houdini'] # optional, for related posts
|
||||||
---
|
---
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Required Fields
|
images go in `src/assets/` (processed by astro) or `public/media/` (static, use absolute paths like `/media/video.mp4`).
|
||||||
|
|
||||||
- **`title`** (string) - The post title
|
project structure
|
||||||
- **`description`** (string) - Brief description for listings and SEO
|
|
||||||
- **`pubDate`** (string) - Publication date in any format (e.g., `'Jan 15 2025'`, `'2025-01-15'`)
|
|
||||||
|
|
||||||
#### Optional Fields
|
|
||||||
|
|
||||||
- **`heroImage`** (image path) - Hero image for the post. Use relative path from the MDX file:
|
|
||||||
- Images in `src/assets/`: `'../../assets/image.jpg'`
|
|
||||||
- Images in `public/media/`: Use absolute path in content: `/media/image.jpg`
|
|
||||||
- **`featured`** (boolean, default: `false`) - Set to `true` to feature on blog index page
|
|
||||||
- **`category`** (string) - Category for filtering (e.g., `'Case Study'`, `'Tutorial'`, `'Thoughts'`)
|
|
||||||
- **`tags`** (array of strings) - Tags for categorization and related posts
|
|
||||||
- **`updatedDate`** (string) - Optional update date
|
|
||||||
|
|
||||||
### Step 3: Write Your Content
|
|
||||||
|
|
||||||
Write your content using Markdown or MDX syntax. You can use:
|
|
||||||
|
|
||||||
- Standard Markdown (headings, lists, links, etc.)
|
|
||||||
- JSX components and HTML
|
|
||||||
- Custom styling with Tailwind classes
|
|
||||||
|
|
||||||
#### Example: Adding Videos
|
|
||||||
|
|
||||||
```mdx
|
|
||||||
<div class="video-container my-10">
|
|
||||||
<video controls class="w-full border border-white/10">
|
|
||||||
<source src="/media/my-video.mp4" type="video/mp4" />
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<p class="text-slate-500 text-sm mt-3 font-mono">/// VIDEO CAPTION</p>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Example: Image Grids
|
|
||||||
|
|
||||||
```mdx
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-10">
|
|
||||||
<div class="video-container">
|
|
||||||
<video controls class="w-full border border-white/10">
|
|
||||||
<source src="/media/video-1.mp4" type="video/mp4" />
|
|
||||||
</video>
|
|
||||||
<p class="text-slate-500 text-sm mt-3 font-mono">/// CAPTION 1</p>
|
|
||||||
</div>
|
|
||||||
<div class="video-container">
|
|
||||||
<video controls class="w-full border border-white/10">
|
|
||||||
<source src="/media/video-2.mp4" type="video/mp4" />
|
|
||||||
</video>
|
|
||||||
<p class="text-slate-500 text-sm mt-3 font-mono">/// CAPTION 2</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 4: Adding Images
|
|
||||||
|
|
||||||
#### Option 1: Images in `src/assets/`
|
|
||||||
|
|
||||||
For images processed by Astro (optimization, etc.):
|
|
||||||
|
|
||||||
1. Place image in `src/assets/`
|
|
||||||
2. Reference in frontmatter: `heroImage: '../../assets/my-image.jpg'`
|
|
||||||
3. Use in content with Astro's Image component (import required)
|
|
||||||
|
|
||||||
#### Option 2: Images in `public/media/`
|
|
||||||
|
|
||||||
For static assets (videos, large images):
|
|
||||||
|
|
||||||
1. Place file in `public/media/`
|
|
||||||
2. Reference with absolute path: `/media/my-video.mp4`
|
|
||||||
3. No import needed, works directly in HTML/MDX
|
|
||||||
|
|
||||||
### Step 5: File Naming
|
|
||||||
|
|
||||||
- Use kebab-case: `my-awesome-post.mdx`
|
|
||||||
- The filename (without extension) becomes the URL slug
|
|
||||||
- Example: `gstar-raw-olympics.mdx` → `/blog/gstar-raw-olympics/`
|
|
||||||
|
|
||||||
### Complete Example
|
|
||||||
|
|
||||||
Here's a complete example blog post:
|
|
||||||
|
|
||||||
```mdx
|
|
||||||
---
|
|
||||||
title: 'My Awesome Project'
|
|
||||||
description: 'A deep dive into the technical pipeline behind this amazing project.'
|
|
||||||
pubDate: 'Jan 15 2025'
|
|
||||||
heroImage: '../../assets/project-hero.jpg'
|
|
||||||
featured: true
|
|
||||||
category: 'Case Study'
|
|
||||||
tags: ['VFX', 'Houdini', 'Pipeline']
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Introduction
|
|
||||||
|
|
||||||
This is the introduction to my project.
|
|
||||||
|
|
||||||
## The Challenge
|
|
||||||
|
|
||||||
Here's what we were trying to solve.
|
|
||||||
|
|
||||||
<div class="video-container my-10">
|
|
||||||
<video controls class="w-full border border-white/10">
|
|
||||||
<source src="/media/project-video.mp4" type="video/mp4" />
|
|
||||||
</video>
|
|
||||||
<p class="text-slate-500 text-sm mt-3 font-mono">/// PROJECT VIDEO</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Technical Approach
|
|
||||||
|
|
||||||
### Key Features
|
|
||||||
|
|
||||||
- Feature one
|
|
||||||
- Feature two
|
|
||||||
- Feature three
|
|
||||||
|
|
||||||
## Results
|
|
||||||
|
|
||||||
The project was a success!
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Blog Features
|
|
||||||
|
|
||||||
- **Automatic sorting** - Posts are sorted by `pubDate` (newest first)
|
|
||||||
- **Featured posts** - First post with `featured: true` appears in hero section
|
|
||||||
- **Related posts** - Automatically finds related posts by category or shared tags
|
|
||||||
- **Category filtering** - Users can filter posts by category on the blog index
|
|
||||||
- **Previous/Next navigation** - Automatic navigation between posts
|
|
||||||
- **RSS feed** - Available at `/rss.xml`
|
|
||||||
|
|
||||||
## Project Structure
|
|
||||||
|
|
||||||
```text
|
|
||||||
src/
|
src/
|
||||||
├── assets/ # Images processed by Astro
|
├── assets/ # images processed by astro
|
||||||
├── components/ # Reusable components
|
├── components/ # reusable components
|
||||||
├── content/
|
├── content/
|
||||||
│ ├── blog/ # Blog posts (MDX files)
|
│ ├── blog/ # blog posts (mdx)
|
||||||
│ ├── pages/ # Page content
|
│ ├── pages/ # page content
|
||||||
│ └── sections/ # Homepage sections
|
│ └── sections/ # homepage sections
|
||||||
├── layouts/ # Page layouts
|
├── layouts/ # page layouts
|
||||||
├── pages/ # Routes
|
├── pages/ # routes
|
||||||
├── styles/ # Global styles
|
├── styles/ # global styles
|
||||||
└── utils/ # Utility scripts (AVIF converter, etc.)
|
└── utils/ # utility scripts
|
||||||
```
|
```
|
||||||
|
|
||||||
## Deployment
|
deployment
|
||||||
|
---
|
||||||
|
|
||||||
The site is deployed to Cloudflare Pages. The `pnpm run deploy` command builds the site and deploys it using Wrangler.
|
deployed to cloudflare pages. `bun run deploy` builds and deploys via wrangler.
|
||||||
|
for production: `wrangler pages deploy --branch=main`
|
||||||
Deployment happens automatically on push to the main branch (if configured in Cloudflare Pages dashboard).
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user