Dev Tokiory

/dev/tokiory

Personal blog and portfolio website built with SvelteKit and MDX

---

🚀 Features

• ⚙️ Modern Tech Stack: Built with SvelteKit, TypeScript, and UnoCSS
• 📝 MDX Support: Write articles in Markdown with embedded Svelte components
• 🎨 Syntax Highlighting: Code blocks with Shiki highlighter and custom transformers
• 🔍 SEO Optimized: Automatic sitemap generation and meta tags
• 📱 Responsive Design: Mobile-first design with UnoCSS
• ⚡ Fast Performance: Optimized builds and Vercel deployment
• 🛡️ Type Safety: Full TypeScript support throughout the codebase

🛠️ Tech Stack

• Framework: SvelteKit
• Styling: UnoCSS with custom presets
• Content: MDsveX for MDX support
• Syntax Highlighting: Shiki
• Icons: Iconify
• Fonts: Variable fonts from Fontsource
• Deployment: Vercel
• Package Manager: Bun

📁 Project Structure

_dev_tokiory/
├── content/
│   └── articles/           # Blog articles in MDX format
│       ├── drafts/         # Draft articles
│       └── *.mdx           # Published articles
├── src/
│   ├── lib/
│   │   ├── components/     # Reusable Svelte components
│   │   └── modules/        # Feature modules
│   ├── routes/
│   │   ├── (standard)/     # Main site routes
│   │   ├── (cv)/           # CV/Resume routes
│   │   └── api/            # API endpoints
│   └── styles/             # Global styles
├── static/                 # Static assets
└── docs/                   # Documentation and assets

🚦 Getting Started

Prerequisites

• Bun (recommended) or Node.js 18+
• Git

Installation

1. Clone the repository:

   git clone https://github.com/tokiory/dev-tokiory.git
   cd dev-tokiory
   

2. Install dependencies:

   bun install
   

3. Start the development server:

   bun run dev
   

4. Open your browser and navigate to http://localhost:5173

Available Scripts

• bun run dev - Start development server
• bun run build - Build for production
• bun run preview - Preview production build locally
• bun run check - Run type checking and linting

📝 Writing Articles

Articles are written in MDX format and stored in the content/articles/ directory. Each article should include frontmatter with metadata:

---
title: Your Article Title
description: Brief description of the article
date: 2024-01-15
tags:
  - tag1
  - tag2
---

Your article content here with support for:
- Markdown syntax
- Embedded Svelte components
- Code blocks with syntax highlighting

Code Highlighting

The project uses Shiki for syntax highlighting with custom transformers:

• Focus notation: // [!code focus]
• Diff notation: // [!code ++] and // [!code --]
• Highlight notation: // [!code highlight]

🎨 Styling

The project uses UnoCSS with:

• Custom presets for icons and styling
• CSS variables for theming
• Responsive design utilities
• Variable fonts (Manrope, Martian Mono, Podkova, Iosevka)

🔧 Configuration

Key configuration files:

• svelte.config.js - SvelteKit and MDsveX configuration
• uno.config.ts - UnoCSS configuration
• vite.config.ts - Vite build configuration
• tsconfig.json - TypeScript configuration

📦 Deployment

The site is automatically deployed to Vercel on push to the main branch. The deployment configuration is handled by the Vercel adapter in svelte.config.js.

Manual Deployment

To deploy manually:

1. Build the project:

   bun run build
   

2. Deploy to Vercel:

   vercel --prod
   

🤝 Contributing

While this is a personal blog, suggestions and bug reports are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

This project is open source and available under the MIT License.

🔗 Links

• Website: https://tokiory.vercel.app
• GitHub: https://github.com/tokiory

---

Built with ❤️ by tokiory