Skip to content

Commit f249c8a

Browse files
Complete Revamp v3.0.0
More modular, Eye candy, removed bloat and overall a complete overhall
1 parent c7584ce commit f249c8a

30 files changed

+3773
-3830
lines changed

README.md

Lines changed: 116 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,158 @@
1+
Here is the professional **README.md** for **SyntaxForge**.
2+
3+
I have refined the "Inspiration" text you provided to match the actual technical architecture we built (JSON-driven content, mouse-tracking glow effects, and the specific file structure).
4+
5+
***
6+
17
<div align="center">
28

3-
# The Modern Developer's Syntax Forge
9+
# SyntaxForge
410

5-
**A curated collection of direct, "one-way-go" cheat sheets for essential programming languages and environments.**
11+
**The Modern Developer's Syntax Reference**
612

7-
</div>
13+
<a href="https://shadowdevforge.github.io/SyntaxForge/">
14+
<img src="https://img.shields.io/badge/Status-Live_Forge-a6da95?style=for-the-badge&logo=github" alt="Live Status">
15+
</a>
16+
<a href="#-how-to-extend">
17+
<img src="https://img.shields.io/badge/Contributions-Welcome-8aadf4?style=for-the-badge&logo=git" alt="Contributions">
18+
</a>
19+
<a href="LICENSE">
20+
<img src="https://img.shields.io/badge/License-MIT-ed8796?style=for-the-badge" alt="License">
21+
</a>
822

9-
<div align="center">
23+
<br />
1024

11-
</div>
25+
**[View the Live Forge](https://shadowdevforge.github.io/SyntaxForge/)**
1226

13-
<div align="center">
27+
</div>
1428

15-
**[View the live, interactive website](https://shadowdevforge.github.io/SyntaxForge/)**
29+
<br />
1630

31+
<div align="center">
32+
<img width="100%" alt="SyntaxForge Preview" src="https://github.com/user-attachments/assets/8059a8e9-04f1-4de2-a704-289c6fde09ce" style="border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);" />
1733
</div>
1834

19-
<pre>
20-
<img width="1629" height="992" alt="image" src="https://github.com/user-attachments/assets/132c4e30-9f3e-4e4b-81a3-a36068c67469" />
21-
</pre>
35+
<br />
2236

2337
## 🔥 About The Project
2438

25-
This repository provides fiercely forged syntax guides for the modern developer. Each cheat sheet is designed to be a fast, practical reference, cutting through the noise to give you the core syntax you need to be productive immediately.
26-
27-
Our philosophy is built on a few core principles:
28-
* **Direct & Practical:** Get straight to the syntax you need without unnecessary theory.
29-
* **Aesthetically Pleasing**: A clean, modern UI with beautiful themes that respects developer focus.
30-
* **Modern First:** Emphasize idiomatic syntax and current best practices.
31-
* **Community-Driven:** Built to be a single, comprehensive reference that grows with the community.
39+
**SyntaxForge** is a curated collection of direct, "one-way-go" cheat sheets for essential programming languages. It cuts through the noise of documentation to provide the idiomatic syntax you need to be productive immediately.
3240

33-
## ✨ Features
41+
Our philosophy is built on the **"Novice to Grandmaster"** progression. Instead of a flat list of commands, every guide is structured to take you from `Hello World` to `Advanced System Architecture`.
3442

35-
- **Beautiful Theming**: Gorgeous [Catppuccin](https://github.com/catppuccin/catppuccin) themes for both light (Latte) and dark (Mocha) modes.
36-
- **Dynamic Background**: A subtle, non-distracting "cmatrix" animation adds a touch of hacker-inspired flair.
37-
- **Modern UI**: Cards feature a sleek blur effect for a modern, layered feel.
38-
- **Practical Examples**: Cheatsheets include a "Projects" tab with real-world examples and code explanations.
39-
- **Easy to Extend**: Add a new language by simply adding an object to an array.
40-
- **Lightweight & Fast**: Built with web standards—no heavy frameworks—for maximum performance.
43+
### Core Principles
44+
* **Direct & Practical:** No fluff. Just the code patterns you need.
45+
* **Aesthetic First:** Built on the **Catppuccin Macchiato** palette to reduce eye strain and look beautiful.
46+
* **Systems Focused:** Prioritizing languages like Rust, C, Go, and Zig.
47+
* **Modular Architecture:** Content is separated from logic via JSON, making it trivial to extend.
4148

42-
## 🛠️ Tech Stack
49+
---
4350

44-
- **Vanilla JavaScript**: For lightweight, fast, and dependency-free interactivity.
45-
- **Semantic HTML5**: For accessibility and a strong structural foundation.
46-
- **Modern CSS**: Leveraging Flexbox, Grid, and CSS Variables for responsive and maintainable styling.
47-
- **[highlight.js](https://highlightjs.org/)**: For robust and themeable syntax highlighting.
51+
## ✨ Features
4852

49-
## 🚀 Getting Started
53+
* **🎨 Catppuccin Theming**: Fully styled with the Macchiato palette for a cohesive, high-contrast dark mode experience.
54+
* **💡 Ambient Glow**: Custom mouse-tracking CSS engine that creates dynamic lighting effects on cards based on the language's brand color.
55+
* **🧱 JSON-Driven Content**: Every cheat sheet is generated dynamically from a simple `content.json` file.
56+
* **⚡ Zero-Build**: Built with Vanilla JS and CSS. No Webpack, no React, no `node_modules`. Just raw performance.
57+
* **🌈 Syntax Highlighting**: Integrated `Highlight.js` with custom CSS overrides to match the Catppuccin theme perfectly.
5058

51-
To get a local copy up and running, follow these simple steps. The easiest way is to use the **Live Server** extension in VS Code.
59+
---
5260

53-
Alternatively, you can use Python's built-in server:
54-
```bash
55-
# From the project's root directory
56-
python -m http.server
57-
```
58-
Then, navigate to `http://localhost:8000` in your browser.
61+
## 🛠️ Tech Stack
5962

60-
## 🤝 How to Contribute & Extend the Forge
63+
* **Core**: Semantic HTML5, Modern CSS3 (Grid/Flexbox), Vanilla JavaScript (ES6+).
64+
* **Highlighter**: [Highlight.js](https://highlightjs.org/) (Auto-detects language).
65+
* **Icons**: SVG (Feather Icons style).
66+
* **Font**: Inter (UI) & JetBrains Mono (Code).
6167

62-
Contributions are what make SyntaxForge great! Adding a new cheatsheet is designed to be simple.
68+
---
6369

64-
### 1. Add a Language Card to the Landing Page
70+
## 🚀 Getting Started
6571

66-
First, make your new cheatsheet discoverable on the main page.
72+
To run the forge locally, you just need a static file server.
6773

68-
1. Open `script.js` in the project root.
69-
2. Find the `languages` array.
70-
3. Add a new object to the array with the following structure:
74+
### Using Python (Built-in)
75+
```bash
76+
# Clone the repository
77+
git clone https://github.com/shadowdevforge/SyntaxForge.git ~/shadowforge
7178

72-
```javascript
73-
const languages = [
74-
// ... existing languages
75-
{
76-
name: 'Your Language', // e.g., 'Python'
77-
slug: 'your-language', // e.g., 'python'. This defines the URL path.
78-
description: 'A short, compelling description of the language.',
79-
category: 'Category Name' // Must be one of: 'Systems & Backend', 'Web & Frontend', or 'Scripting & Automation'
80-
},
81-
];
82-
```
79+
# Navigate to directory
80+
cd ~/shadowforge/SyntaxForge
8381

84-
### 2. Create the New Cheatsheet Page
82+
# Start server
83+
python3 -m http.server 8000
84+
```
85+
Open `http://localhost:8000` in your browser.
8586

86-
1. **Create a Directory**: Inside the `/cheatsheets` folder, create a new directory with the same `slug` (e.g., `/cheatsheets/python`).
87+
### Using VS Code
88+
Simply install the **Live Server** extension and click "Go Live" on `index.html`.
8789

88-
2. **Use the Template**: Copy the contents of an existing cheatsheet (e.g., `/cheatsheets/rust/`) into your new directory. This gives you the required `index.html`, `style.css`, and `script.js` files with all functionality built-in.
90+
---
8991

90-
3. **Update the Content**:
91-
* **`index.html`**:
92-
* Change the `<title>` and meta description.
93-
* Update the hero title (`<h1 class="hero-title">`).
94-
* Replace the content inside the `<section>` and `.project-card` elements with your new language's syntax and examples.
95-
* **Important**: When writing code blocks, escape HTML characters. Replace `<` with `&lt;` and `>` with `&gt;`.
96-
* **`style.css` & `script.js`**: You shouldn't need to change these files.
92+
## 🔨 How to Extend the Forge
93+
94+
SyntaxForge is designed to be extended. Adding a new language (e.g., `TypeScript`) takes 3 steps:
95+
96+
### 1. Create the Directory
97+
Create a folder in the root directory with the language name (e.g., `typescript/`).
98+
99+
### 2. Add the Content
100+
Create `typescript/content.json`. Define the color, icon, and sections (Novice, Apprentice, etc.).
101+
102+
```json
103+
{
104+
"meta": {
105+
"language": "TypeScript",
106+
"description": "JavaScript with syntax for types.",
107+
"color": "#b7bdf8",
108+
"icon": "URL_TO_ICON"
109+
},
110+
"sections": [
111+
{
112+
"level": "I. Novice",
113+
"topics": [
114+
{
115+
"title": "Basic Types",
116+
"desc": "Defining strings and numbers.",
117+
"code": "let isDone: boolean = false;\nlet decimal: number = 6;"
118+
}
119+
]
120+
}
121+
]
122+
}
123+
```
97124

98-
### 3. Submitting Your Contribution
125+
### 3. Add the Engine
126+
Copy the standard `index.html` template (from `rust/index.html` or `c/index.html`) into your new folder. No code changes are needed in this file; it automatically loads `content.json`.
127+
128+
### 4. Link it
129+
Open the main `index.html` in the root directory and add the entry to the `guides` array script:
130+
131+
```javascript
132+
const guides = [
133+
// ... existing guides
134+
{
135+
title: "TypeScript",
136+
desc: "JavaScript with syntax for types.",
137+
path: "typescript/index.html",
138+
color: "var(--lavender)",
139+
category: "Web & Frontend"
140+
}
141+
];
142+
```
99143

100-
1. **Fork the repository** and create a new branch (`git checkout -b feature/add-python-cheatsheet`).
101-
2. **Commit your changes** with a clear message (`git commit -m "feat: Add Python cheatsheet and project examples"`).
102-
3. **Push to your branch** and **open a Pull Request**.
144+
---
103145

104146
## 📜 License
105147

106148
Distributed under the MIT License. See `LICENSE` for more information.
107149

108-
## Acknowledgements
109-
110-
- [Catppuccin](https://github.com/catppuccin) for the beautiful color palettes.
111-
- [highlight.js](https://highlightjs.org/) for the powerful syntax highlighting library.
112-
113150
---
114151

115-
<div align-center">
116-
117-
⭐ **Star this repository if you find these guides helpful!**
152+
<div align="center">
153+
154+
**Forged by [ShadowDevForge](https://github.com/shadowdevforge)**
155+
156+
*Code is the hammer, logic is the anvil.*
118157

119158
</div>

cheatsheets/bash/content.json

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
{
2+
"meta": {
3+
"language": "Bash",
4+
"description": "The universal glue of the computing world. Automate, process, and govern the shell.",
5+
"color": "#ed8796",
6+
"icon": "https://upload.wikimedia.org/wikipedia/commons/4/4b/Bash_Logo_Colored.svg"
7+
},
8+
"sections": [
9+
{
10+
"level": "I. Novice (The Shell)",
11+
"topics": [
12+
{
13+
"title": "Hello World & Shebang",
14+
"desc": "The first line defines the interpreter. Execution requires chmod +x.",
15+
"code": "#!/bin/bash\n\necho \"Hello, Forge!\"\n# Run with: ./script.sh"
16+
},
17+
{
18+
"title": "Variables",
19+
"desc": "No spaces around `=`. Access with `$`. Quotes matter.",
20+
"code": "NAME=\"Shadow\"\necho \"Hello $NAME\" # Interpolation\necho 'Hello $NAME' # Literal string"
21+
},
22+
{
23+
"title": "Special Variables",
24+
"desc": "Built-in variables for arguments and status.",
25+
"code": "echo $1 # First argument\necho $# # Number of arguments\necho $? # Last exit code (0 = Success)\necho $$ # Process ID"
26+
}
27+
]
28+
},
29+
{
30+
"level": "II. Apprentice (Flow)",
31+
"topics": [
32+
{
33+
"title": "Redirection & Pipes",
34+
"desc": "Controlling Input/Output streams.",
35+
"code": "ls > list.txt # Overwrite stdout to file\necho \"Data\" >> list.txt # Append\ncat file.txt | grep \"error\" # Pipe output to input"
36+
},
37+
{
38+
"title": "Conditionals (If)",
39+
"desc": "Using `[` (test) or `[[` (extended test). Spaces are critical.",
40+
"code": "if [[ -f \"config.json\" ]]; then\n echo \"File exists\"\nelif [[ $USER == \"root\" ]]; then\n echo \"Danger\"\nelse\n echo \"Safe\"\nfi"
41+
},
42+
{
43+
"title": "Loops",
44+
"desc": "Iterating over lists, files, or ranges.",
45+
"code": "# C-style\nfor ((i=0; i<5; i++)); do echo $i; done\n\n# Range\nfor i in {1..5}; do echo \"Num: $i\"; done\n\n# While\nwhile [[ $count -gt 0 ]]; do ((count--)); done"
46+
}
47+
]
48+
},
49+
{
50+
"level": "III. Journeyman (Logic)",
51+
"topics": [
52+
{
53+
"title": "Functions",
54+
"desc": "Grouping logic. Arguments are handled via $1, $2, etc.",
55+
"code": "greet() {\n local name=$1\n echo \"Welcome, $name\"\n}\n\ngreet \"Forge\""
56+
},
57+
{
58+
"title": "Command Substitution",
59+
"desc": "Saving the output of a command into a variable.",
60+
"code": "DATE=$(date +%F)\nFILES=$(find . -name \"*.rs\")\n\necho \"Today is $DATE\""
61+
},
62+
{
63+
"title": "Case Statement",
64+
"desc": "Cleaner alternative to complex if-else chains.",
65+
"code": "case \"$1\" in\n start) echo \"Starting...\" ;;\n stop) echo \"Stopping...\" ;;\n *) echo \"Usage: $0 {start|stop}\" ;;\nesac"
66+
}
67+
]
68+
},
69+
{
70+
"level": "IV. Expert (Text Processing)",
71+
"topics": [
72+
{
73+
"title": "Grep (Search)",
74+
"desc": "Global Regular Expression Print.",
75+
"code": "grep -r \"TODO\" src/ # Recursive search\ngrep -v \"node_modules\" # Invert match (exclude)\ngrep -E \"^Error|[0-9]\" log.txt # Regex"
76+
},
77+
{
78+
"title": "Sed (Stream Editor)",
79+
"desc": "Find and replace text in streams.",
80+
"code": "# Replace 'foo' with 'bar' (first occurrence)\nsed 's/foo/bar/' file.txt\n\n# Replace ALL occurrences globally (-i for inplace)\nsed -i 's/ERROR/WARNING/g' log.txt"
81+
},
82+
{
83+
"title": "Awk (Pattern Scanning)",
84+
"desc": "Powerful text processing language within Bash.",
85+
"code": "# Print 2nd column of CSV\nawk -F',' '{print $2}' data.csv\n\n# Sum numbers in a column\nls -l | awk '{sum += $5} END {print sum}'"
86+
}
87+
]
88+
},
89+
{
90+
"level": "V. Grandmaster (Systems)",
91+
"topics": [
92+
{
93+
"title": "Strict Mode",
94+
"desc": "The unofficial \"Safety Header\" for robust scripts.",
95+
"code": "set -euo pipefail\n# -e: Exit on error\n# -u: Exit on unset variable\n# -o pipefail: Fail if any command in pipe fails"
96+
},
97+
{
98+
"title": "Parameter Expansion",
99+
"desc": "Advanced string manipulation.",
100+
"code": "file=\"image.png\"\necho ${file%.*} # image (Remove extension)\necho ${file##*.} # png (Get extension)\necho ${name:-Default} # Default value if unset"
101+
},
102+
{
103+
"title": "Traps & Signals",
104+
"desc": "Handling script interruption or cleanup.",
105+
"code": "cleanup() {\n rm -rf /tmp/temp_files\n echo \"Cleaned up.\"\n}\n\n# Run cleanup on EXIT, SIGINT (Ctrl+C), or Error\ntrap cleanup EXIT INT TERM"
106+
}
107+
]
108+
}
109+
]
110+
}

0 commit comments

Comments
 (0)