You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+17-23Lines changed: 17 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,42 +25,37 @@ Must be one of the following:
25
25
-**refactor**: A code change that neither fixes a bug nor adds a feature
26
26
-**perf**: A code change that improves performance
27
27
-**test**: Adding missing tests or correcting existing tests
28
-
-**chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation
28
+
-**chore**: Changes to the build process or auxiliary tools and libraries
29
+
-**build**: Changes that affect the build system or external dependencies
30
+
-**ci**: Changes to CI configuration files and scripts
31
+
-**revert**: Reverts a previous commit
29
32
-**content**: **(Project Specific)** Adding or updating content such as:
30
33
- Blog posts (`content(blog): add new post about react`)
31
34
- Logs (`content(log): add review for new movie`)
32
35
- Projects (`content(project): add details for new app`)
33
36
- Music/Sounds (`content(audio): add new ambient track`)
34
-
- Assets (`content(assets): update avatar image`)
35
37
36
38
### Scope (Optional)
37
39
38
40
The scope provides additional context to the type. For `content` types, the scope is highly recommended (e.g., `blog`, `log`, `project`).
39
41
40
-
### Subject
42
+
---
41
43
42
-
The subject contains a succinct description of the change:
43
-
- Use the imperative, present tense: "change" not "changed" nor "changes"
44
-
- Don't capitalize the first letter
45
-
- No dot (.) at the end
44
+
## Coding Standards
46
45
47
-
### Body (Optional)
46
+
### Directory Structure
47
+
To keep the codebase organized, we follow a modular pattern:
48
+
-**`src/app/`**: This is where the core logic, domain-specific state, views, and complex functionality live (e.g., `src/app/achievements`, `src/app/os`).
49
+
-**`src/components/`**: Only for generic, reusable UI atoms (buttons, modals, inputs).
48
50
49
-
Just as in the **subject**, use the imperative, present tense. The body should include the motivation for the change and contrast this with previous behavior.
51
+
### Linting & Style
52
+
We enforce strict whitespace rules via ESLint:
53
+
- No multiple empty lines.
54
+
- No padded blocks.
55
+
- No trailing spaces.
56
+
-**Always run `npm run format` and `npm run lint` before committing.**
50
57
51
-
### Footer (Optional)
52
-
53
-
The footer should contain any information about **Breaking Changes** and is also the place to reference GitHub issues that this commit closes.
54
-
55
-
## Example
56
-
57
-
```
58
-
content(log): add corrupted blood incident rant
59
-
60
-
- Added new text file for the post
61
-
- Updated posts.json with metadata
62
-
- Added unique category color for 'rant'
63
-
```
58
+
---
64
59
65
60
## Git Hooks
66
61
@@ -77,4 +72,3 @@ In an emergency (if the hook is broken), you can bypass verification:
77
72
```bash
78
73
git commit --no-verify -m "your message"
79
74
```
80
-
**Note:** Please use this sparingly and only if you are sure your message format is correct.
Imagine you have a giant digital toy box. Inside, you keep the cool things you've built, the stories you've written, and a diary of all the interesting things you've learned. Fezcodex is that toy box. It is a special website that works like a personal museum on the internet. It is not just a boring page; it has moving parts, secret "Easter eggs," and little mini-apps like a sound mixer and a stopwatch.
6
+
Imagine you have a giant digital toy box. Inside, you keep the cool things you've built, the stories you've written, and a diary of all the interesting things you've learned. Fezcodex is that toy box. It is a special website that works like a personal museum on the internet. It is not just a boring page; it has moving parts, secret "Easter eggs," and little mini-apps like a sound mixer and a knowledge graph.
6
7
7
8
---
8
9
9
-
## What can it do?
10
-
- Digital Garden: A place where blog posts and "logs" (mini-diaries about books, movies, or games) grow.
11
-
- Project Archives: A showcase of all the coding experiments and software I've built.
12
-
- Mini-Apps: Built-in tools like an Atmosphere Mixer (for focus sounds), a Typing Tester, and a Stopwatch.
13
-
- Visual Magic: You can change how the whole site looks using the "Visual Matrix" in Settings—make it look like an old computer, a blueprint, or even a comic book.
14
-
- Achievements: Just like a video game, you get little trophies for exploring the site and finding hidden things.
10
+
## Key Features
11
+
-**Digital Garden**: A space where blog posts and "logs" (mini-diaries about books, movies, or games) grow.
12
+
-**Knowledge Graph**: A 3D interactive visualization of how all content on the site is interconnected.
13
+
-**Project Archives**: A showcase of all the coding experiments and software I've built.
14
+
-**Mini-Apps**: Built-in tools like an Atmosphere Mixer, Cloud Music Player, Typing Tester, and a digital Rotary Phone.
15
+
-**Visual Magic**: Change how the whole site looks using the "Visual Matrix"—make it look like an old computer (CRT), a blueprint, or even a comic book.
16
+
-**Achievements**: Just like a video game, you get little trophies for exploring the site and finding hidden things.
15
17
16
18
---
17
19
18
-
## How is it built? (The Lego Bricks)
19
-
- React and Tailwind CSS: These are the main building blocks that make the site work and look professional.
20
-
- Framer Motion: This is the tool that makes everything move smoothly and animate.
21
-
- Markdown and PIML: These are special ways of writing text so the computer knows how to turn them into beautiful pages.
22
-
- Local Storage: The site remembers your settings and trophies right in your own browser, so it does not need a large database.
20
+
## Tech Stack (The Lego Bricks)
21
+
-**Frontend**: React 19, Tailwind CSS, and Framer Motion for smooth animations.
22
+
-**3D & Graphics**: Three.js and react-force-graph-3d for the knowledge graph.
23
+
-**Content**: Markdown and **PIML** (Plain Old Markup Language) for structured content.
24
+
-**Build Tools**: Craco (CRA Configuration Override) for custom build pipelines.
25
+
-**Persistence**: Local Storage for settings, achievements, and persistent state.
23
26
24
27
---
25
28
26
-
## Where is everything?
27
-
- src/components/: The small parts (like buttons and cards) used to build pages.
28
-
- src/pages/: The main areas of the house (Home, Blog, Settings, Apps).
29
-
- public/: This is the pantry where all the actual content (text files for posts, images, and sounds) is stored.
30
-
- scripts/: Helper programs that help build the sitemap and RSS feeds.
-`src/context/`: Global state management (Visual Settings, Toast, Animation).
33
+
-`public/`: The "pantry" where all actual content (PIML files, text, images, sounds) is stored.
34
+
-`scripts/`: Helper programs for generating RSS, sitemaps, and wallpapers.
31
35
32
36
---
33
37
34
-
## For the Grown-ups (Technical Setup)
38
+
## Technical Setup
35
39
36
40
### Prerequisites
37
41
Make sure you have Node.js installed on your computer.
@@ -53,31 +57,30 @@ npm start
53
57
```
54
58
This will open the site at http://localhost:3000.
55
59
56
-
## Routing and SEO
57
-
58
-
This project uses `BrowserRouter` for clean URLs (e.g., `/apps/markdown-table-formatter`) instead of hash-based URLs (`/#/apps/...`).
59
-
60
-
To support this on GitHub Pages (which is a static file host), we use `react-snap` to pre-render all routes into static HTML files during the build process.
60
+
---
61
61
62
-
-**Pre-rendering:**`react-snap` crawls the application and generates a directory structure that matches the routes (e.g., `build/apps/markdown-table-formatter/index.html`). This allows GitHub Pages to serve the correct file for each route directly.
63
-
-**SEO:** This approach ensures that every page has unique, server-side rendered metadata (title, description, open graph tags) for social media previews and search engines.
64
-
-**Fallback:** A `404.html` is generated to handle unknown routes.
62
+
## Routing and SEO
63
+
This project uses `BrowserRouter` for clean URLs. To support this on static hosts like GitHub Pages, we use `react-snap` to pre-render routes into static HTML files during the build process.
65
64
66
65
### Deployment
67
-
68
66
The standard `npm run deploy` command handles the build, pre-rendering, and deployment to GitHub Pages automatically.
69
-
70
67
```bash
71
68
npm run deploy
72
69
```
73
70
71
+
### Content Syncing
72
+
Stories are managed via git subtrees:
73
+
-`npm run pull-stories`: Sync stories from the remote repository.
74
+
-`npm run push-stories`: Push local story changes to the remote repository.
75
+
74
76
---
75
77
76
78
## Rules of the House
77
79
-**Contributing:** Please read our [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on commit messages and content updates.
78
-
- Styling: We use Tailwind. Keep it Brutalist yet polished.
79
-
- Icons: We use @phosphor-icons/react. Always use the ones ending in Icon (for example, CpuIcon).
80
-
- Logic: Keep it simple. Use Context for global settings like Visual Effects and Animations.
80
+
-**Styling**: We use Tailwind. Keep it **Brutalist** yet polished.
81
+
-**Components**: Always use `CustomDropdown`, `BrutalistDialog`, and `CustomSlider` for UI consistency.
82
+
-**Icons**: We use `@phosphor-icons/react`. Always use the ones ending in `Icon` (e.g., `CpuIcon`).
83
+
-**Logic**: Use Context for global settings like Visual Effects and Achievements.
81
84
82
85
---
83
-
Created by Ahmed Samil Bulbul.
86
+
Created by [Ahmed Samil Bulbul](https://fezcode.com).
0 commit comments