Skip to content

Commit 7426658

Browse files
committed
Update documentation; PNGs instead of SVGs
1 parent ff2b7c8 commit 7426658

File tree

4 files changed

+14
-21
lines changed

4 files changed

+14
-21
lines changed

docs/assets/images/vs_code/error_message.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

docs/assets/images/vs_code/lingo_packages.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

docs/assets/images/vs_code/local_libraries.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

docs/tools/code-extension.mdx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ title: VS Code Extension
33
description: Visual Studio Code Extension for Lingua Franca.
44
---
55

6+
import Image from '@theme/IdealImage';
7+
import lingo_packages from '../assets/images/vs_code/lingo_packages.png';
8+
import local_libraries from '../assets/images/vs_code/local_libraries.png';
9+
import error_message from '../assets/images/vs_code/error_message.png';
10+
611
The Lingua Franca extension for Visual Studio Code (VS Code) provides syntax-directed editing capability, compilation, diagram synthesis and a package explorer for Lingua Franca programs.
712

813
## Usage
@@ -35,6 +40,9 @@ We recommend selecting the root of your Lingua Franca package as your workspace
3540
│ │ │ └── ComputerVision.lf # Ex: reactor performing computer vision tasks (e.g., object detection, face recognition)
3641
└── └── Lingo.toml # Configuration file for Lingo Package Manager
3742
```
43+
If the project structure deviates from the expected format, an error message will appear:
44+
45+
<Image img={error_message} style={{maxWidth: 400}} />
3846

3947
### Rendering diagrams
4048

@@ -49,7 +57,7 @@ To compile the `.lf` source, open the command palette (<kbd>Ctrl</kbd> + <kbd>Sh
4957
You can also build and immediately afterwards run your code by opening the command palette (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>) and then entering `Lingua Franca: Build and Run`.
5058
Running the code can also be done from the VS Code terminal by executing the generated file in `./bin`.
5159

52-
### Packages Explorer
60+
### Package Explorer
5361

5462
The **Lingua Franca Package Explorer** can be accessed by clicking on the **LF icon** in the activity bar on the left side of the screen. Once opened, the **Package Explorer** displays a **Tree View** with the following structure:
5563

@@ -99,7 +107,7 @@ In this structure:
99107

100108
The image below shows a visual representation of the **Installed Packages** section. The **project** icon indicates the LF Project folder (e.g., `AudioClassification`), while the **root-folder** icon represents the downloaded libraries (e.g., the `edgeai` library in the example). The **code file** icon denotes an LF program within a library, and the **bracket** icon represents individual reactors inside the LF program.
101109

102-
![Installed Packages section](../assets/images/vs_code/lingo_packages.svg)
110+
<Image img={lingo_packages} style={{maxWidth: 400}} />
103111

104112
The hierarchy categorizes tree items into the following types:
105113

@@ -141,7 +149,7 @@ The **Local Libraries** section lists LF programs created by the developer, loca
141149

142150
The image below illustrates the **Local Libraries** section. In this depiction, the **"project"** icon represents the LF project folder, while the **"code file"** icon represents the LF program, and the **"bracket"** icon denotes individual reactors within the LF program.
143151

144-
![Local Libraries section](../assets/images/vs_code/local_libraries.svg)
152+
<Image img={local_libraries} style={{maxWidth: 400}} />
145153

146154
The hierarchy categorizes tree items into two types:
147155

@@ -159,7 +167,9 @@ Actions for **Local Libraries** are similar to those in the [**Installed Package
159167
- **Go To File**: Opens the file where the reactor is defined.
160168
- **Open in Split View**: Opens the file in a split editor view (accessible by right-clicking the item).
161169

162-
> **Note**: The **Import Selected Reactor** option is available only if an LF program is open in the editor.
170+
:::note
171+
The **Import Selected Reactor** option is available only if an LF program is open in the editor.
172+
:::
163173

164174
#### Source Files
165175

@@ -177,14 +187,6 @@ The **Source Files** section lists all LF programs in the `{project_name}/src/`
177187

178188
Clicking on any of the files will open the corresponding LF program in the editor, allowing developers to quickly navigate to and edit the source code of their project.
179189

180-
#### Correctness of Project Structure
181-
182-
If the project structure deviates from the expected format, an error message will appear:
183-
184-
![Project structure error](../assets/images/vs_code/error_message.svg)
185-
186-
To avoid errors, follow the [project structure guidelines](#creating-a-new-file).
187-
188190
## Notes
189191

190192
### For Python Users

0 commit comments

Comments
 (0)