Skip to content

Commit e486c61

Browse files
nmergetnmerget
authored
feat: add release selector for getting-started.md (#13)
1 parent 8b5cba8 commit e486c61

File tree

5 files changed

+509
-47
lines changed

5 files changed

+509
-47
lines changed

‎docs/css/release-selector.css‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
.release-selector-container {
2+
background: var(--md-default-bg-color);
3+
border: 1px solid var(--md-default-fg-color--lightest);
4+
border-radius: 8px;
5+
padding: 1.5rem;
6+
margin: 1rem 0;
7+
}
8+
9+
.release-selector-container h3 {
10+
margin-top: 0;
11+
margin-bottom: 1rem;
12+
color: var(--md-default-fg-color);
13+
}
14+
15+
.selector-row {
16+
display: flex;
17+
flex-wrap: wrap;
18+
gap: 1rem;
19+
margin-bottom: 1rem;
20+
}
21+
22+
.selector-group {
23+
flex: 1;
24+
min-width: 200px;
25+
}
26+
27+
.selector-group label {
28+
display: block;
29+
margin-bottom: 0.5rem;
30+
font-weight: 500;
31+
color: var(--md-default-fg-color);
32+
}
33+
34+
.selector-group select {
35+
width: 100%;
36+
padding: 0.5rem;
37+
border: 1px solid var(--md-default-fg-color--lightest);
38+
border-radius: 4px;
39+
background: var(--md-default-bg-color);
40+
color: var(--md-default-fg-color);
41+
font-size: 0.9rem;
42+
}
43+
44+
.selector-group select:focus {
45+
outline: none;
46+
border-color: var(--md-primary-fg-color);
47+
box-shadow: 0 0 0 2px var(--md-primary-fg-color--light);
48+
}
49+
50+
.selector-group input[type="checkbox"] {
51+
margin-right: 0.5rem;
52+
}
53+
54+
#download-results {
55+
margin-top: 1.5rem;
56+
}
57+
58+
.release-group {
59+
margin-bottom: 1.5rem;
60+
border: 1px solid var(--md-default-fg-color--lightest);
61+
border-radius: 6px;
62+
overflow: hidden;
63+
}
64+
65+
.release-group h4 {
66+
margin: 0;
67+
padding: 0.75rem 1rem;
68+
background: var(--md-default-fg-color--lightest);
69+
color: var(--md-default-fg-color);
70+
font-size: 1rem;
71+
display: flex;
72+
align-items: center;
73+
gap: 0.5rem;
74+
}
75+
76+
.prerelease-badge {
77+
background: var(--md-accent-fg-color);
78+
color: white;
79+
padding: 0.2rem 0.5rem;
80+
border-radius: 12px;
81+
font-size: 0.75rem;
82+
font-weight: 500;
83+
}
84+
85+
.release-date {
86+
margin-left: auto;
87+
font-size: 0.85rem;
88+
opacity: 0.7;
89+
}
90+
91+
.download-links {
92+
padding: 1rem;
93+
}
94+
95+
.download-link {
96+
display: flex;
97+
align-items: center;
98+
gap: 0.75rem;
99+
padding: 0.75rem;
100+
margin-bottom: 0.5rem;
101+
background: var(--md-code-bg-color);
102+
border: 1px solid var(--md-default-fg-color--lightest);
103+
border-radius: 4px;
104+
text-decoration: none;
105+
color: var(--md-default-fg-color);
106+
transition: all 0.2s ease;
107+
}
108+
109+
.download-link:hover {
110+
background: var(--md-primary-fg-color--light);
111+
border-color: var(--md-primary-fg-color);
112+
transform: translateY(-1px);
113+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
114+
}
115+
116+
.download-link:last-child {
117+
margin-bottom: 0;
118+
}
119+
120+
.download-icon {
121+
font-size: 1.2rem;
122+
}
123+
124+
.download-details {
125+
margin-left: auto;
126+
font-size: 0.85rem;
127+
opacity: 0.7;
128+
}
129+
130+
.no-results {
131+
text-align: center;
132+
padding: 2rem;
133+
color: var(--md-default-fg-color--light);
134+
font-style: italic;
135+
}
136+
137+
/* Responsive design */
138+
@media (max-width: 768px) {
139+
.selector-row {
140+
flex-direction: column;
141+
}
142+
143+
.selector-group {
144+
min-width: unset;
145+
}
146+
147+
.release-group h4 {
148+
flex-direction: column;
149+
align-items: flex-start;
150+
gap: 0.25rem;
151+
}
152+
153+
.release-date {
154+
margin-left: 0;
155+
}
156+
157+
.download-link {
158+
flex-direction: column;
159+
align-items: flex-start;
160+
gap: 0.5rem;
161+
}
162+
163+
.download-details {
164+
margin-left: 0;
165+
}
166+
}

‎docs/documentation/getting-started.md‎

Lines changed: 45 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,44 @@
1-
1. [Download the `editor`](https://github.com/godotjs/GodotJS/releases) based on your OS and select an JS engine (we recommend `v8` for a start) and unzip it
2-
2. Rename the downloaded file based on your OS:
3-
- Linux: `godot.linuxbsd.editor.x86_64` ➡️ `godot`
4-
- MacOS: no rename required
5-
- Windows: `godot.windows.editor.x86_64.exe` ➡️ `godot.exe`
1+
2+
## Download GodotJS
3+
Choose your platform and preferences to download the latest GodotJS release:
4+
5+
<div id="release-selector"></div>
6+
7+
8+
> **Note:** The `Godot.app` isn't signed for MacOS you need
9+
> to [allow to open it](https://support.apple.com/en-us/102445#:~:text=If%20you%20want%20to%20open%20an%20app%20that%20hasn%E2%80%99t%20been%20notarized%20or%20is%20from%20an%20unidentified%20developer).
10+
11+
12+
### Manual Installation
13+
14+
If you prefer to browse all releases manually, visit the [GitHub Releases page](https://github.com/godotjs/GodotJS/releases).
15+
16+
### Installation Instructions
17+
18+
After downloading:
19+
20+
1. Extract the downloaded zip file
21+
2. Rename the executable based on your OS:
22+
- **Linux**: `godot.linuxbsd.editor.x86_64` → `godot`
23+
- **macOS**: No rename required
24+
- **Windows**: `godot.windows.editor.x86_64.exe` → `godot.exe`
625
3. [Add Godot to your PATH](https://docs.godotengine.org/en/stable/tutorials/editor/command_line_tutorial.html#path)
7-
- Linux: `/usr/local/bin`
8-
- MacOS: `echo ~/your-path/Godot.app/Contents/MacOS|sudo tee /etc/paths.d/godot;bash -l;echo $PATH`
9-
- Windows: `setx /M path "%path%;C:\your-path\windows-editor-v8"`
10-
4. Open a terminal
11-
5. Test if you can use Godot via terminal and run:
12-
13-
```shell
14-
godot --version
15-
```
26+
4. Test the installation by running `godot --version` in your terminal
27+
28+
### JS Engine Comparison
29+
30+
| Engine | Performance | Memory Usage | Platform Support | Recommended For |
31+
|--------------------|-------------|--------------|------------------|--------------------------|
32+
| **V8** | High | Higher | Desktop | Development & Production |
33+
| **QuickJS** | Medium | Lower | All platforms | Mobile & Embedded |
34+
| **JavaScriptCore** | High | Medium | macOS/iOS | Apple platforms |
35+
| **Browser** | High | Lower | Web | Web |
36+
37+
### Target Types
1638

17-
> **Note:** The `Godot.app` isn't signed for MacOS you need to [allow to open it](https://support.apple.com/en-us/102445#:~:text=If%20you%20want%20to%20open%20an%20app%20that%20hasn%E2%80%99t%20been%20notarized%20or%20is%20from%20an%20unidentified%20developer).
39+
- **Editor**: Full Godot editor with GodotJS support
40+
- **Template**: Export templates for building your games
41+
- **Debug**: Debug versions with additional logging and debugging features
1842

1943
## Create a new project
2044

@@ -25,14 +49,16 @@ godot --version
2549
3. Run `cd <your-project>`
2650
4. Run `npm i`
2751
5. Run `npm run dev` - this will enable typescript watch mode and opens the editor
28-
6. Inside the editor [install preset files](#install-preset-files) via `Project > Tools > GodotJS > Install Preset files`
52+
6. Inside the editor [install preset files](#install-preset-files) via
53+
`Project > Tools > GodotJS > Install Preset files`
2954
7. Click `OK` to confirm a list of files will be generated in the project.
3055
8. Attach the `example.ts` script to a node and run the project
3156

3257
### Manually
3358

3459
1. Run `godot -p` and create a new project
35-
2. Inside the editor [install preset files](#install-preset-files) via `Project > Tools > GodotJS > Install Preset files`
60+
2. Inside the editor [install preset files](#install-preset-files) via
61+
`Project > Tools > GodotJS > Install Preset files`
3662
3. Click `OK` to confirm a list of files will be generated in the project.
3763
4. Run `cd <your-project>`
3864
5. Run `npm i`
@@ -69,6 +95,7 @@ npx tsc
6995
npx tsc -w
7096
```
7197

72-
Also, you can simply click the tool button on _GodotJS_ bottom panel in the godot editor. It'll do the same thing for you.
98+
Also, you can simply click the tool button on _GodotJS_ bottom panel in the godot editor. It'll do the same thing for
99+
you.
73100

74101
![TSC Watch](images/tsproj_tsc_watch.png)

‎docs/index.md‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,6 @@ hide:
99
**_-- TypeScript/JavaScript Support for Godot 4.x by leveraging the high-performance capabilities of V8 to bring the delightful development experience of TypeScript into Godot.
1010
--_**
1111

12-
Supports JavaScript engines:
13-
14-
- V8
15-
- QuickJS
16-
- JavaScriptCore
17-
- Directly run scripts on the host browser JS VM when porting to web.
1812

1913
![typescript_intellisence](images/typescript_intellisence.png)
2014

@@ -34,29 +28,6 @@ Read the [getting-started](documentation/getting-started.md).
3428
- [Worker threads](documentation/experimental/worker.md) (limited support) (**experimental**)
3529
- Asynchronously loaded modules (limited support) (_temporarily only available in v8.impl, quickjs.impl_)
3630

37-
## Getting the engine
38-
39-
No installation or setup necessary.
40-
The binaries for download are the complete, usable Godot editor
41-
and engine with JavaScript/TypeScript language support.
42-
43-
### Binary downloads
44-
45-
Download the binaries from the [Releases](https://github.com/godotjs/GodotJS/releases).
46-
47-
### Choose your engine
48-
49-
Before initiating, make sure to select the JavaScript runtime you prefer between `v8`, `QuickJS` and `Web` (See [Supported Platforms](#supported-platforms)):
50-
51-
- `v8` is proven to be one of the most powerful and high-performance JavaScript runtimes.
52-
- `QuickJS` is a remarkable and lightweight option.
53-
- `JavaScriptCore` is the built-in JavaScript engine for WebKit and bundled with macOS/iOS.
54-
- `Web` is only suitable when building for Web. All scripts run on the host browser JS VM rather than an additional interpreter.
55-
56-
### Building from source
57-
58-
In some cases you want or need to build the engine from source.
59-
Read the [Building from Source](documentation/building-from-source/) documentation in this case.
6031

6132
## Examples
6233

0 commit comments

Comments
 (0)