Thanks to visit codestin.com
Credit goes to github.com

Skip to content

My Personal portfolio and blog website built with React / TanStack Start.

plckr/plckr.dev

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

plckr.dev

My Personal portfolio and blog website built with React / TanStack Start.

Visit plckr.dev to see it in action.

Website screenshot

Tech Stack

Project Structure

Most relevant parts of the project.

src/
├── components/         # Reusable React components
│   ├── ui/             # ui components
├── lib/
├── routes/             # File-based routing (TanStack Router)
└── styles.css

posts/                  # Blog posts (MDX files)
├── <order-number>.<slug>/
│   └── post.md         # Blog post content

Running the project

Prerequisites

  • Node.js 22
  • pnpm package manager

Installation

Clone the repo and install dependencies with the command below

pnpm install

Development

pnpm dev          # Start development server (port 3000)
pnpm velite:watch # Watch for content changes

Visit http://localhost:3000 to see the site.

Building

pnpm build        # Build for production
pnpm serve        # Preview production build

Content Management

Creating Blog Posts

Blog posts are stored in the posts/ directory as MDX files with frontmatter:

---
title: Your Post Title
excerpt: Brief description of your post
date: 2024-01-01
thumbnail: ./images/thumbnail.jpg
---

# Your content here

You can use **Markdown** syntax and even include pre defined React components!

Content Structure

Posts are automatically processed by Velite and made available throughout the application. The system supports:

  • Table of contents generation
  • Reading time calculation
  • Metadata extraction
  • MDX component support

Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Advanced Configuration

Environment Variables

VITE_PUBLIC_POSTHOG_KEY=your_posthog_key_here
VITE_PUBLIC_POSTHOG_HOST=your_posthog_host_here
VITE_SUPABASE_URL=your_supabase_url_here
VITE_SUPABASE_KEY=your_supabase_key_here

Built with ❤️ using TanStack Start and deployed on Cloudflare Workers.

About

My Personal portfolio and blog website built with React / TanStack Start.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •