Skip to content

Commit 9816097

Browse files
ClaudeMaxUserClaudeMaxUser
committed
docs: improve website documentation, add playground templates and update readme links
1 parent 1a704f2 commit 9816097

4 files changed

Lines changed: 147 additions & 84 deletions

File tree

‎README.md‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1-
# Broo-code
1+
# Bro-code
22

3-
Bro code is a toy programming language written in TypeScript.
3+
[![Deploy to GitHub Pages](https://github.com/ClaudeMaxUser/bro-code/actions/workflows/deploy.yml/badge.svg)](https://github.com/ClaudeMaxUser/bro-code/actions/workflows/deploy.yml)
4+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5+
[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
46

5-
This repository is private. The public way to use Bro code is the web playground.
7+
Bro-code is a toy programming language written in TypeScript with its own custom tokenizer, recursive-descent parser, AST, and tree-walking interpreter.
68

7-
- Website:
8-
- Direct playground section:
9+
- **Website / Docs**: [brocode.js.org](https://brocode.js.org/)
10+
- **Interactive Web Playground**: [brocode.js.org/#playground](https://brocode.js.org/#playground)
911

1012
## Why this README exists
1113

1214
This README is designed to be publicly visible while the source repository remains private.
13-
It documents the language, architecture, and technical approach without exposing internal-only details.
15+
It documents the language, grammar, architecture, and technical approach.
1416

1517
## Quick start (language)
1618

@@ -236,8 +238,9 @@ flowchart LR
236238

237239
## Public links
238240

239-
- Playground and docs: https://broo-code.netlify.app/
240-
- Playground section: https://broo-code.netlify.app//#playground
241+
- **Website & Documentation**: [https://brocode.js.org/](https://brocode.js.org/)
242+
- **Interactive Playground**: [https://brocode.js.org/#playground](https://brocode.js.org/#playground)
243+
- **GitHub Repository**: [https://github.com/ClaudeMaxUser/bro-code](https://github.com/ClaudeMaxUser/bro-code)
241244

242245
## License
243246

‎apps/docs/components/Code/index.tsx‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { sendEvents } from "../../helpers";
77
import CodeEditor from "./CodeEditor";
88
import Terminal from "./Terminal";
99

10-
1110
const initialCode = `
1211
hi bro
1312
say bro "Hello World";
@@ -76,6 +75,21 @@ bye bro
7675
say bro a;
7776
}
7877
bye bro
78+
`,
79+
},
80+
{
81+
label: "Scope & Shadowing",
82+
code: `hi bro
83+
bro this is count = 100;
84+
say bro "global count:", count;
85+
86+
{
87+
bro this is count = 42;
88+
say bro "block-scoped count:", count;
89+
}
90+
91+
say bro "original count:", count;
92+
bye bro
7993
`,
8094
},
8195
];
@@ -84,7 +98,7 @@ const Code = (props: Props) => {
8498
const {} = props;
8599
const [code, setCode] = useState(initialCode);
86100
const [output, setOutput] = useState<{ value: string; isError: boolean }[]>(
87-
[]
101+
[],
88102
);
89103
const [isSuccess, setIsSuccess] = useState<boolean | null>(null);
90104

@@ -111,7 +125,7 @@ const Code = (props: Props) => {
111125
}
112126
}
113127

114-
sendEvents("CodeExecuted", {success: isExecusionSuccess});
128+
sendEvents("CodeExecuted", { success: isExecusionSuccess });
115129

116130
setIsSuccess(isExecusionSuccess);
117131
setOutput(outputList);
@@ -138,7 +152,8 @@ const Code = (props: Props) => {
138152
<div>
139153
<h2 className="section-title">Playground</h2>
140154
<p className="section-subtitle mt-2">
141-
Run Bro-code snippets instantly and inspect output in the embedded terminal.
155+
Run Bro-code snippets instantly and inspect output in the embedded
156+
terminal.
142157
</p>
143158
</div>
144159
<div className="flex gap-2 flex-wrap">
@@ -163,10 +178,7 @@ const Code = (props: Props) => {
163178
Run
164179
</button>
165180

166-
<button
167-
onClick={clearCode}
168-
className="playground-action-secondary"
169-
>
181+
<button onClick={clearCode} className="playground-action-secondary">
170182
Clear
171183
</button>
172184
</div>

‎apps/docs/components/Documentation/index.tsx‎

Lines changed: 112 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,179 @@
11
import Snippet from "./Snippet";
22

3-
43
/* This example requires Tailwind CSS v2.0+ */
54
const features = [
65
{
76
name: "General",
87
description: (
98
<>
109
<code className="language-cpp">hi bro</code> is the entrypoint for the
11-
program and all program must end with{" "}
12-
<code className="language-cpp">bye bro</code>. Anything outside of it
13-
will be ignored.
10+
program and all programs must end with{" "}
11+
<code className="language-cpp">bye bro</code>. Anything outside of these
12+
boundaries will be ignored.
1413
</>
1514
),
1615
code: `This will be ignored
1716
1817
hi bro
1918
// Write code here
19+
say bro "Hello from Bro-code!";
2020
bye bro
2121
22-
This too
22+
This will be ignored too
2323
`,
2424
},
2525
{
2626
name: "Variables",
2727
description: (
2828
<>
2929
Variables can be declared using{" "}
30-
<code className="language-cpp">bro this is</code>.
30+
<code className="language-cpp">bro this is</code>. Re-assignments and
31+
compound assignments are fully supported.
3132
</>
3233
),
3334
code: `hi bro
34-
bro this is a = 10;
35-
bro this is b = "two";
36-
bro this is c = 15;
37-
a = a + 1;
38-
b = 21;
39-
c *= 2;
35+
bro this is a = 10;
36+
bro this is b = "two";
37+
bro this is c = 15;
38+
a = a + 1;
39+
b = 21;
40+
c *= 2;
4041
bye bro
4142
`,
4243
},
4344
{
44-
name: "Types",
45+
name: "Types & Literals",
4546
description: (
4647
<>
47-
Numbers and strings are like other languages. Null values can be denoted
48-
using <code className="language-cpp">nope</code>.{" "}
49-
<code className="language-cpp">yep</code> and{" "}
50-
<code className="language-cpp">nah</code> are the boolean values.
48+
Supported primitive types include Numbers (integers & floats), Strings,
49+
Null (<code className="language-cpp">nope</code>), and Booleans (
50+
<code className="language-cpp">yep</code> for true,{" "}
51+
<code className="language-cpp">nah</code> for false).
5152
</>
5253
),
5354
code: `hi bro
54-
bro this is a = 10;
55-
bro this is b = 10 + (15*20);
56-
bro this is c = "two";
57-
bro this is d = 'ok';
58-
bro this is e = nope;
59-
bro this is f = yep;
60-
bro this is g = nah;
55+
bro this is a = 10;
56+
bro this is b = 10 + (15 * 20);
57+
bro this is c = "two";
58+
bro this is d = 'ok';
59+
bro this is e = nope;
60+
bro this is f = yep;
61+
bro this is g = nah;
6162
bye bro
6263
`,
6364
},
6465
{
65-
name: "Built-ins",
66+
name: "Operators",
6667
description: (
6768
<>
68-
Use <code className="language-cpp">say bro</code> to print anything to
69-
console.
69+
Supports arithmetic (<code className="language-cpp">+ - * / %</code>),
70+
equality (<code className="language-cpp">== !=</code>), relational (
71+
<code className="language-cpp">&gt; &lt; &gt;= &lt;=</code>), logical (
72+
<code className="language-cpp">&amp;&amp; ||</code>), and compound
73+
assignments (<code className="language-cpp">+= -= *= /= %=</code>).
7074
</>
7175
),
7276
code: `hi bro
73-
say bro "Hello World";
74-
bro this is a = 10;
75-
{
76-
bro this is b = 20;
77-
say bro a + b;
78-
}
79-
say bro 5, 'ok', nope , yep , nah;
77+
bro this is x = 10;
78+
bro this is y = 3;
79+
80+
say bro "Sum:", x + y;
81+
say bro "Modulo:", x % y;
82+
say bro "Check:", x > y && y != 0;
83+
84+
x += 5;
85+
say bro "Updated x:", x;
86+
bye bro
87+
`,
88+
},
89+
{
90+
name: "Built-in I/O",
91+
description: (
92+
<>
93+
Use <code className="language-cpp">say bro</code> to print expressions
94+
and comma-separated values to the console.
95+
</>
96+
),
97+
code: `hi bro
98+
say bro "Hello World";
99+
bro this is a = 10;
100+
{
101+
bro this is b = 20;
102+
say bro "a + b =", a + b;
103+
}
104+
say bro 5, 'ok', nope, yep, nah;
80105
bye bro
81106
`,
82107
},
83108
{
84109
name: "Conditionals",
85110
description: (
86111
<>
87-
Bro-code supports if-else-if ladder construct , <code className="language-cpp">if bro</code> block will execute if condition is <code className="language-cpp">yep</code>, otherwise one of the subsequently added <code className="language-cpp">else if bro</code> blocks will execute if their respective condition is <code className="language-cpp">yep</code>, and the <code className="language-cpp">else bro</code> block will eventually execute if all of the above conditions are <code className="language-cpp">nah</code>.
112+
Bro-code supports <code className="language-cpp">if bro</code>,{" "}
113+
<code className="language-cpp">else if bro</code>, and{" "}
114+
<code className="language-cpp">else bro</code> branches evaluating
115+
boolean conditions.
88116
</>
89117
),
90118
code: `hi bro
91-
bro this is a = 10;
92-
if bro (a < 20) {
93-
say bro "a is less than 20";
94-
} else if bro ( a < 25 ) {
95-
say bro "a is less than 25";
96-
} else bro {
97-
say bro "a is greater than or equal to 25";
98-
}
119+
bro this is a = 10;
120+
if bro (a < 20) {
121+
say bro "a is less than 20";
122+
} else if bro (a < 25) {
123+
say bro "a is less than 25";
124+
} else bro {
125+
say bro "a is greater than or equal to 25";
126+
}
99127
bye bro
100-
`
128+
`,
101129
},
102130
{
103131
name: "Loops",
104132
description: (
105133
<>
106-
Statements inside <code className="language-cpp">while bro</code> blocks are executed as long as a specified condition evaluates to <code className="language-cpp">yep</code>. If the condition becomes <code className="language-cpp">nah</code>, statement within the loop stops executing and control passes to the statement following the loop.
107-
Use <code className="language-cpp">stop bro</code> to break the loop and <code className="language-cpp">next bro</code> to continue within loop.
134+
Use <code className="language-cpp">while bro</code> to loop while a
135+
condition is <code className="language-cpp">yep</code>. Use{" "}
136+
<code className="language-cpp">stop bro</code> to break out or{" "}
137+
<code className="language-cpp">next bro</code> to jump to the next
138+
iteration.
108139
</>
109140
),
110141
code: `hi bro
111-
bro this is a = 0;
112-
while bro (a < 10) {
113-
a += 1;
114-
if bro (a == 5) {
115-
say bro "inside say bro ", a;
116-
next bro;
117-
}
118-
if bro (a == 6) {
119-
stop bro;
120-
}
121-
say bro a;
142+
bro this is a = 0;
143+
while bro (a < 10) {
144+
a += 1;
145+
if bro (a == 5) {
146+
say bro "inside loop:", a;
147+
next bro;
148+
}
149+
if bro (a == 6) {
150+
stop bro;
122151
}
123-
say bro "done";
152+
say bro a;
153+
}
154+
say bro "done";
124155
bye bro
125-
`
156+
`,
157+
},
158+
{
159+
name: "Blocks & Scope",
160+
description: (
161+
<>
162+
Blocks created with <code className="language-cpp">&#123; &#125;</code>{" "}
163+
establish local lexical scopes. Variables declared within inner blocks
164+
shadow outer variables.
165+
</>
166+
),
167+
code: `hi bro
168+
bro this is msg = "outer";
169+
{
170+
bro this is msg = "inner";
171+
say bro "Inside block:", msg;
126172
}
127-
173+
say bro "Outside block:", msg;
174+
bye bro
175+
`,
176+
},
128177
];
129178

130179
export default function Documentation() {
@@ -134,7 +183,9 @@ export default function Documentation() {
134183
<div>
135184
<h2 className="section-title">Examples & Docs</h2>
136185
<p className="section-subtitle mt-3 max-w-2xl">
137-
Bro-code is a dynamically typed toy language powered by a parser and interpreter written in Typescript. Use these examples as a quick map of the language.
186+
Bro-code is a dynamically typed toy language powered by a parser and
187+
interpreter written in Typescript. Use these examples as a quick map
188+
of the language.
138189
</p>
139190

140191
<div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2">

‎apps/docs/components/Header/index.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import BroCodeLogo from "./broLangLogo";
22

3-
43
export default function Header() {
54
return (
65
<header className="relative overflow-hidden header flex justify-center items-center">
@@ -16,26 +15,24 @@ export default function Header() {
1615
<BroCodeLogo />
1716
</div>
1817
<p className="hero-subtitle text-base sm:text-lg md:text-xl mx-auto">
19-
A playful programming language written in Typescript with its own parser, interpreter, and CLI.
18+
A playful programming language written in Typescript with its
19+
own parser, interpreter, and CLI.
2020
</p>
2121
{/* <div className="install-command mt-6 mx-auto">
2222
<span className="install-command-prefix">Install</span>
2323
<code className="language-js">npm i -g brocode</code>
2424
</div> */}
2525
<div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
2626
<div className="rounded-xl shadow-lg shadow-black/30">
27-
<a
28-
href="#playground"
29-
className="hero-cta-primary"
30-
>
27+
<a href="#playground" className="hero-cta-primary">
3128
Open Playground
3229
</a>
3330
</div>
3431
<div className="rounded-xl shadow-lg shadow-black/20">
3532
<a
3633
target="_blank"
3734
rel="noopener noreferrer"
38-
href="https://github.com/ClaudeMaxUser/broo-code"
35+
href="https://github.com/ClaudeMaxUser/bro-code"
3936
className="hero-cta-secondary"
4037
>
4138
View Source

0 commit comments

Comments
 (0)