Skip to content

Latest commit

 

History

History
130 lines (103 loc) · 8.16 KB

CONTRIBUTING.md

File metadata and controls

130 lines (103 loc) · 8.16 KB

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.

├── app/                       # Next.js app directory (v13)
├── components/                # React components
├── content/                   # All .mdx files with content
├── data/                      # Global available data
├── env/                       # Env variables handling (validation)
├── hooks/                     # Shared React hooks
├── lib/                       # Lib files
├── providers/                 # React context global state
├── 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
├── .eslintignore              # Files ignored by ESLint
├── .eslintrc.js               # ESLint configuration file
├── .gitignore                 # Files ignored by git
├── .prettierignore            # Files ignored by Prettier
├── .prettierrc                # Code convention enforced by Prettier
├── build.sh                   # Deployment script
├── next.config.mjs             # Next.js config
├── package.json               # Dependencies and additional information
├── README.md
├── tsconfig.json              # Typescript configuration
└── pnpm-lock.yaml             # Pnpm lockfile

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/
│   ├── Component.tsx
│   └── component.module.scss
import styles from "./component.module.scss";
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 13 The React Framework for Production
React Library for building user interfaces
MDX Markdown for the component era
Algolia Implementing powerful search
Github Actions Automations for workflow improvements
Framer Motion Motion library for React
Context API React structure that enables to share data with multiple components
React Hook Form Forms with easy-to-use validation
Vercel KV Durable Redis database
SCSS CSS with superpowers
CSS Modules Styles convention in React
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