|
| 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 | + |
1 | 7 | <div align="center"> |
2 | 8 |
|
3 | | -# The Modern Developer's Syntax Forge |
| 9 | +# SyntaxForge |
4 | 10 |
|
5 | | -**A curated collection of direct, "one-way-go" cheat sheets for essential programming languages and environments.** |
| 11 | +**The Modern Developer's Syntax Reference** |
6 | 12 |
|
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> |
8 | 22 |
|
9 | | -<div align="center"> |
| 23 | +<br /> |
10 | 24 |
|
11 | | -</div> |
| 25 | +**[View the Live Forge](https://shadowdevforge.github.io/SyntaxForge/)** |
12 | 26 |
|
13 | | -<div align="center"> |
| 27 | +</div> |
14 | 28 |
|
15 | | -**[View the live, interactive website](https://shadowdevforge.github.io/SyntaxForge/)** |
| 29 | +<br /> |
16 | 30 |
|
| 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);" /> |
17 | 33 | </div> |
18 | 34 |
|
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 /> |
22 | 36 |
|
23 | 37 | ## 🔥 About The Project |
24 | 38 |
|
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. |
32 | 40 |
|
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`. |
34 | 42 |
|
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. |
41 | 48 |
|
42 | | -## 🛠️ Tech Stack |
| 49 | +--- |
43 | 50 |
|
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 |
48 | 52 |
|
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. |
50 | 58 |
|
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 | +--- |
52 | 60 |
|
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 |
59 | 62 |
|
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). |
61 | 67 |
|
62 | | -Contributions are what make SyntaxForge great! Adding a new cheatsheet is designed to be simple. |
| 68 | +--- |
63 | 69 |
|
64 | | -### 1. Add a Language Card to the Landing Page |
| 70 | +## 🚀 Getting Started |
65 | 71 |
|
66 | | -First, make your new cheatsheet discoverable on the main page. |
| 72 | +To run the forge locally, you just need a static file server. |
67 | 73 |
|
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 |
71 | 78 |
|
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 |
83 | 81 |
|
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. |
85 | 86 |
|
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`. |
87 | 89 |
|
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 | +--- |
89 | 91 |
|
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 `<` and `>` with `>`. |
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 | +``` |
97 | 124 |
|
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 | +``` |
99 | 143 |
|
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 | +--- |
103 | 145 |
|
104 | 146 | ## 📜 License |
105 | 147 |
|
106 | 148 | Distributed under the MIT License. See `LICENSE` for more information. |
107 | 149 |
|
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 | | - |
113 | 150 | --- |
114 | 151 |
|
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.* |
118 | 157 |
|
119 | 158 | </div> |
0 commit comments