Website

The source code for my internet magazine, where I share my thoughts and experiences.

Project Structure

/
├── public/
│   ├── assets/
│   │   └── logo.svg
│   │   └── logo.png
│   └── favicon.svg
│   └── astropaper-og.jpg
│   └── robots.txt
│   └── toggle-theme.js
├── src/
│   ├── assets/
│   │   └── socialIcons.ts
│   ├── components/
│   ├── data/
│   │   |  blog/
│   │   |    └── some-blog-posts.md
│   │   └── config.ts
│   ├── layouts/
│   └── pages/
│   └── styles/
│   └── utils/
│   └── config.ts
│   └── types.ts
└── package.json

All blog posts are stored in src/data/blog directory.

Tech Stack

Main Framework - Astro
Type Checking - TypeScript
Component Framework - ReactJS
Styling - TailwindCSS
UI/UX - Figma Design File
Fuzzy Search - FuseJS
Icons - Boxicons | Tablers
Code Formatting - Prettier
Illustration in About Page - https://freesvgillustration.com
Linting - ESLint

Running Locally

You can start using this project locally by running the following command in your desired directory:

Then start the project by running the following commands:

# install dependencies
pnpm run install

# start running the project
pnpm run dev

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm run dev	Starts local dev server at localhost:4321
pnpm run build	Build your production site to ./dist/
pnpm run preview	Preview your build locally, before deploying
pnpm run format:check	Check code format with Prettier
pnpm run format	Format codes with Prettier
pnpm run sync	Generates TypeScript types for all Astro modules. Learn more.
pnpm run lint	Lint with ESLint

Acknowledgements

This website is based on @satnaing's excellent Astro theme called AstroPaper. Thank you!

License

Licensed under the MIT License, Copyright © 2024