Main page & Ecosystem→Tools refurbishment (#110)

* feat: Showcasing the counter contract on the main page
* Updated links for JetBrains plugin
* Updated links for VS Code extension
* Refined corresponding pages

pages/ecosystem/index.mdx

@@ -15,9 +15,9 @@ Here are it's main contents:
 <Cards>
   <Cards.Card
     arrow
-    title="Go to the Tools"
+    title="Go to tools overview"
     href="/ecosystem/tools/overview"
   />
 </Cards>
 
-</Steps>
+</Steps>

pages/ecosystem/tools/_meta.js

@@ -2,5 +2,5 @@ export default {
   overview: 'Overview',
   typescript: 'Typescript',
   vscode: 'VS Code Extension',
-  jetbrains: 'Jetbrains IDEs Plugin'
+  jetbrains: 'JetBrains IDEs Plugin'
 }

pages/ecosystem/tools/jetbrains.mdx

@@ -1,14 +1,14 @@
 # TON Development Plugin for JetBrains IDEs
 
-TON Development Plugin supports Tact syntax highlight for Jetbrains IDEs.
+Supports highlighting Tact's syntax in JetBrains IDEs versioned **2023.** and later. Note, that besides support for Tact, it also includes a rich support of FunC and Fift languages of TON Blockchain, as well as TL-B schemas.
 
-Please, use **2.\*** version of the plugin. You should use **2023.\*** version of Jetbrains product to be able use it.
+Plugin on the JetBrains Marketplace: [TON Development Plugin](https://plugins.jetbrains.com/plugin/23382-ton)
 
-## Installing the TON Development Plugin
+## Installation manual
 
 1. Open your JetBrains IDE (IntelliJ IDEA, PyCharm, WebStorm, etc.)
 2. Navigate to the **Plugin Marketplace** by selecting `File > Settings/Preferences > Plugins`
-3. In the Plugin Marketplace's search bar, type "TON Development". You will see a dropdown with the extension provided by `ton-blockchain`.
+3. In the Plugin Marketplace's search bar, type "TON Development". You will see a dropdown with the extension provided by `TON Foundation`.
 4. Click the **Install** button next to the plugin name. Wait for the installation to complete.
 5. Once the plugin is installed, you will be prompted to restart your JetBrains IDE. Click the **Restart** button to apply changes.
 6. After restarting, the TON Development plugin should now be successfully installed in your JetBrains IDE.
@@ -19,6 +19,5 @@ If you encounter issues during the installation process, please consult the [plu
 
 ## References and Resources
 
-- [TON Development on GitHub](https://github.com/ton-blockchain/intellij-ton)
-- [TON Development Plugin on JetBrains Marketplace](https://plugins.jetbrains.com/plugin/18541-ton)
-
+- [Plugin on GitHub](https://github.com/ton-blockchain/intellij-ton)
+- [Plugin on the JetBrains Marketplace](https://plugins.jetbrains.com/plugin/23382-ton)

pages/ecosystem/tools/overview.mdx

@@ -1,4 +1,4 @@
-# Overview
+# Tools Overview
 
 import { Cards } from 'nextra/components'
 
@@ -17,7 +17,7 @@ This sub-section contains a list of official and community-made tools made speci
   />
   <Cards.Card
     arrow
-    title="Jetbrains IDEs Plugin"
+    title="JetBrains IDEs Plugin"
     href="/ecosystem/tools/jetbrains"
   />
 </Cards>

pages/ecosystem/tools/vscode.mdx

@@ -1,22 +1,34 @@
 # VS Code Extension
 
-## Installing the TACT Language VS Code Extension
+Provides extensive support for Tact language in the Visual Studio Code:
 
-1. Open Visual Studio Code.
+* Syntax highlighting
+* Error highlighting
+* Snippets
+* Information on hover
+* Code completion for all variables, functions, global parameters and unique types of Tact
+* Code completion for all contracts / libraries in the current file and all referenced imports
+* Formatting
+
+Extension on the VS Code Marketplace: [Tact Language Support for TON blockchain](https://marketplace.visualstudio.com/items?itemName=KonVik.tact-lang-vscode)
+
+## Installation manual
+
+1. Open Visual Studio Code (shortly referred to as VS Code).
 2. Navigate to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window. It looks like a square within a square.
-3. In the Extensions view input box, type "TACT Language". You should see a dropdown with the extension "TACT Language" provided by KonVik. Probably, you would see the same extension provided by TON Community but this one is deprecated and we should use KonVik’s instead
+3. In the Extensions view input box, type "Tact Language". You should see a dropdown with the extension "Tact Language" provided by KonVik. Probably, you would see the similar extension provided by TON Community, but that one is deprecated and **we should use KonVik's one instead**.
 4. Click on the install button next to the extension name. Wait until the installation is complete.
 5. Once the extension is installed, you might need to reload VS Code. If necessary, there will be a Reload button next to the extension. Click on this button if it appears.
-6. The TACT Language extension should now be installed on your VS Code.
+6. The Tact Language extension should now be installed on your VS Code.
 
-## Enabling Format on Save for the TACT Language Extension
+## Enabling `Format on Save` [#format-on-save]
 
-This guide will provide instructions on how to enable the Format on Save feature for the TACT Language extension in VS Code using the Command Palette and editing the JSON settings file.
+This guide will provide instructions on how to enable the Format on Save feature for the Tact Language extension in VS Code using the Command Palette and editing the JSON settings file.
 
 1. Type `Preferences: Open Settings (JSON)` in the command palette. This will open your `settings.json` file.
 2. Editing JSON Settings
 
-   - You'll see a JSON object. We're going to add some properties to this object to enable format on save for the TACT Language extension.
+   - You'll see a JSON object. We're going to add some properties to this object to enable format on save for the Tact Language extension.
    - Add the following lines inside the JSON object:
 
      ```json
@@ -28,14 +40,15 @@ This guide will provide instructions on how to enable the Format on Save feature
      }
      ```
 
-   - This will enable format on save (`"editor.formatOnSave": true`) and set the default formatter for TACT files (`"[tact]": {"editor.defaultFormatter": "KonVik.tact-lang-vscode"}`) to the TACT Language extension.
+   - This will enable format on save (`"editor.formatOnSave": true`) and set the default formatter for Tact files (`"[tact]": {"editor.defaultFormatter": "KonVik.tact-lang-vscode"}`) to the Tact Language extension.
 
 3. Saving and Closing Settings
    - Save your `settings.json` file after adding these lines (You can press `Ctrl+S` to save).
    - Close the `settings.json` tab or press `Ctrl+W`.
 
-Your TACT Language VS Code extension should now automatically format your files when you save them. If you don't see these changes take effect immediately, you might need to reload VS Code.
+Your Tact Language VS Code extension should now automatically format your files when you save them. If you don't see these changes take effect immediately, you might need to reload VS Code.
 
 ## References and Resources
 
-- [TACT Language VS Code Extension](https://marketplace.visualstudio.com/items?itemName=KonVik.tact-lang-vscode)
+- [Extension on GitHub](https://github.com/tact-lang/tact-vscode)
+- [Extension on the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=KonVik.tact-lang-vscode)

pages/index.mdx

@@ -10,11 +10,13 @@ Tact is a new programming language for TON Blockchain that is focused on efficie
 
 <Steps>
 
-### Ensure that Node.js LTS is installed and available
+### Ensure that Node.js LTS is installed and available [#start-1]
 
 To check it, run `node --version{:shell}` — it should show you the version 18.0.0 or later.
 
-### Run the following command to create a new project with the simple counter contract
+### Run the following command [#start-2]
+
+It will create a new project with the simple counter contract:
 
 <Tabs items={['npm', 'yarn', 'pnpm']}>
   <Tabs.Tab>
@@ -24,7 +26,7 @@ To check it, run `node --version{:shell}` — it should show you the version 18.
   </Tabs.Tab>
   <Tabs.Tab>
     ```shell
-    yarn create ton -- simple-counter --type tact-counter --contractName SimpleCounter
+    yarn create ton simple-counter --type tact-counter --contractName SimpleCounter
     ```
   </Tabs.Tab>
   <Tabs.Tab>
@@ -34,23 +36,54 @@ To check it, run `node --version{:shell}` — it should show you the version 18.
   </Tabs.Tab>
 </Tabs>
 
-### That's it! Your first contract project is written and compiled already!
+### That's it! [#start-3]
+
+Your first contract project is written and compiled already! Go check it out by moving into the relevant directory — `cd simple-counter/contracts{:shell}`.
+
+Here's how it would look like:
+
+```tact
+import "@stdlib/deploy";
+
+message Add {
+    queryId: Int as uint64;
+    amount: Int as uint32;
+}
+
+contract SimpleCounter with Deployable {
+    id: Int as uint32;
+    counter: Int as uint32;
+
+    init(id: Int) {
+        self.id = id;
+        self.counter = 0;
+    }
+
+    receive(msg: Add) {
+        self.counter += msg.amount;
+    }
 
-Go check it out by moving into the relevant directory — `cd simple-counter/contracts{:shell}`.
+    get fun counter(): Int {
+        return self.counter;
+    }
 
-To re-compile, use commands in the scripts section of `package.json` in the root of this newly created project.
+    get fun id(): Int {
+        return self.id;
+    }
+}
+```
 
-To deploy, refer to the documentation of [Blueprint](https://github.com/ton-org/blueprint) — this is a tool we've used to create and compile your first simple counter contract in Tact. In fact, Blueprint can do much more than that: including tests, customizations and more.
+To re-compile or deploy, refer to the commands in the scripts section of `package.json` in the root of this newly created projec and to the documentation of [Blueprint](https://github.com/ton-org/blueprint) — this is a tool we've used to create and compile your first simple counter contract in Tact. In fact, Blueprint can do much more than that: including tests, customizations and more.
 
 </Steps>
 
 ## Where to go next? [#next]
 
 <Steps>
 
-### Have some blockchain knowledge already?
+### Have some blockchain knowledge already? [#next-1]
 
-Check the following cheatsheets to quickly get started!
+See the [Tact Cookbook](/book/cookbook), or check the following cheatsheets to quickly get started!
 
 <Cards>
   <Cards.Card
@@ -65,7 +98,7 @@ Check the following cheatsheets to quickly get started!
   />
 </Cards>
 
-### Want to know more?
+### Want to know more? [#next-2]
 
 For further guidance on compilation, testing and deployment see the [Getting started](/book/guides/getting-started) guide.
 
@@ -94,17 +127,19 @@ Alternatively, take a look at the following broader sections:
   />
 </Cards>
 
-### Feeling a bit uncomfortable?
+### Feeling a bit uncomfortable? [#next-3]
 
 If you ever get stuck, don't hesitate to reach out to Tact's flourishing community:
 
 <Cards>
   <Cards.Card
+    arrow
     icon="✈️ "
     title="Telegram Group"
     href="https://t.me/tactlang"
   />
   <Cards.Card
+    arrow
     icon="🐦 "
     title="X/Twitter"
     href="https://twitter.com/tact_language"