CONTRIBUTING.md

Contribution Guidelines

zagrodzki.me is an open source project, and contributions of any kind are welcome and appreciated. Open issues, bugs, and enhancements are all listed on the issues tab and labeled accordingly. Feel free to open bug tickets and make feature requests. Easy bugs and features will be tagged with the good first issue label.

Issues

If you encounter a bug, please file a bug report.

If you have a feature to request, please open a feature request.

If you would like to work on an issue or feature, there is no need to request permission.

Pull Requests

In order to create a pull request for zagrodzki.me, follow the GitHub instructions for Creating a pull request from a fork. Please link your pull request to an existing issue.

Content

If you spot a typo or an error, please boldly let me know.

You can also write your own article!

Just put it in /content folder and make a PR. It would be good for you to contact me beforehand to discuss the details, but it's not necessary. I can guarantee you that your efforts will be appreciated! Let's make a strong community 💪

File Structure

Description of the project files and directories.

├── .github                    # Github workflows and templates
├── .husky                     # Husky git hooks
├── .vscode                    # VSCode settings
├── app/                       # Next.js app directory (v13)
├── components/                # React components
├── content/                   # All .mdx files with content
├── data/                      # Global available data
├── hooks/                     # Shared React hooks
├── lib/                       # Lib files
├── providers/                 # React context global state and other providers
├── public/                    # All images, icons, fonts
├── scripts/                   # Scripts executed during deployment (algolia, redirects, feed)
├── styles/                    # All shared styles
├── types/                     # TypeScript types
├── utils/                     # All utilities
├── .env-sample                # Examples of env variables
├── .gitignore                 # Files ignored by git
├── .npmrc                     # NPM configuration
├── .prettierignore            # Files ignored by Prettier
├── build.sh                   # Deployment script
├── eslint.config.mjs          # ESLint configuration file
├── next.config.ts             # Next.js config
├── package.json               # Dependencies and additional information
├── pnpm-lock.yaml             # Pnpm lockfile
├── prettier.config.mjs        # Code convention enforced by Prettier
├── README.md
└── tsconfig.json              # Typescript configuration

Styleguide

Coding conventions are enforced by ESLint and Prettier.

• Semicolons
• Double quotes
• const preferred over let
• Conventional Commits
• Two space indentation
• React: functional style with Hooks (no classes)
• Trailing commas in arrays and objects
• Non-default exports are preferred for components
• Module imports are ordered and separated: built-in -> external -> internal -> css/assets/other
• TypeScript: strict mode, with strict ESLint rules

Example component structure

├── component/
│   ├── api/
│   ├── hooks/
│   ├── utils/
│   └── component.tsx

import { memo } from "react";

interface ComponentProps {
  readonly title: string;
}

export const Component = memo<ComponentProps>(({ title }) => {
  return <h1>{title}</h1>;
});

Component.displayName = "Component";

Tech stack

Tech	Description
TypeScript	Static type-checking programming language
Next.js	The React framework for production
React	Library for building user interfaces
MDX	Markdown for the component era
Algolia	Implementing powerful search
Tailwind CSS	Utility-first CSS framework
Radix UI	Accessible and composable headless UI components
Github Actions	Automations for workflow improvements
Motion	Motion library for making animations
React Hook Form	Forms with easy-to-use validation
Vercel KV	Durable Redis database
SCSS	CSS with superpowers
Zod	TypeScript-first schema validation with static type inference
Husky	Git hooks
ESLint	TypeScript linting
Prettier	Code formatter

Scripts

Script	Description
algolia	Updates Algolia indexes with posts and projects
build	Builds the whole project
build:next	Builds Next.js app
dev	Runs Next.js local development server
feed	Generates RSS feed for the blog
format	Formats the whole project (using Prettier)
lint	Runs ESLint against project files
prepare	Prepares Husky hooks
redirect	Generates redirects to the newest post (in next.config.mjs)
start	Starts Next.js server
tsc	Runs TypeScript transpilation against project files

Star History 🌟