feat: migrate frontend framework from mdbook to vocs

.gitignore

@@ -1,6 +1,5 @@
-book
-target
-output
+node_modules
+.env
 
 # Editors tmp files.
 *~

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing
 
-When contributing to this repository, please first discuss the change you wish to make via issue or in the telegram channel before making a change. 
+When contributing to this repository, please first discuss the change you wish to make via issue or in the telegram channel before making a change.
 
 Join the telegram channel: https://t.me/StarknetByExample
 
@@ -11,14 +11,12 @@ Please note we have a code of conduct, please follow it in all your interactions
 - [Contributing](#contributing)
   - [Table of Contents](#table-of-contents)
   - [Setup](#setup)
-  - [MdBook](#mdbook)
+  - [Working with Markdown Files](#working-with-markdown-files)
   - [Adding a new chapter](#adding-a-new-chapter)
   - [Adding a new Cairo program](#adding-a-new-cairo-program)
     - [Verification script](#verification-script)
     - [Tests](#tests)
-    - [Use of anchor](#use-of-anchor)
-  - [Translations](#translations)
-    - [Initiate a new translation for your language](#initiate-a-new-translation-for-your-language)
+    - [Use of region](#use-of-region)
   - [Code of Conduct](#code-of-conduct)
     - [Our Pledge](#our-pledge)
     - [Our Standards](#our-standards)
@@ -31,28 +29,42 @@ Please note we have a code of conduct, please follow it in all your interactions
 
 1. Clone this repository.
 
-2. Rust related packages:
+2. Install the required dependencies using pnpm:
+
+```
+pnpm i
+```
+
+3. Rust related packages:
+
    - Install toolchain providing `cargo` using [rustup](https://rustup.rs/).
    - Install [mdBook](https://rust-lang.github.io/mdBook/guide/installation.html) and the required extension with `cargo install mdbook  mdbook-i18n-helpers mdbook-last-changed `.
 
-3. Install `scarb` using [asdf](https://asdf-vm.com/) with `asdf install`. Alternatively, you can install `scarb` manually by following the instructions [here](https://docs.swmansion.com/scarb/).
+4. Install `scarb` using [asdf](https://asdf-vm.com/) with `asdf install`. Alternatively, you can install `scarb` manually by following the instructions [here](https://docs.swmansion.com/scarb/).
 
-## MdBook
+5. Start the development server:
 
-All the Markdown files **MUST** be edited in english. To work locally in english:
+```
+pnpm dev
+```
 
-- Start a local server with `mdbook serve` and visit [localhost:3000](http://localhost:3000) to view the book.
-  You can use the `--open` flag to open the browser automatically: `mdbook serve --open`.
+## Working with Markdown Files
 
-- Make changes to the book and refresh the browser to see the changes.
+All Markdown files (\*.md) MUST be edited in English. Follow these steps to work locally with Markdown files:
 
-- Open a PR with your changes.
+- Make changes to the desired .md files in your preferred text editor.
+- Save the changes, and your browser window should automatically refresh to reflect the updates.
+- Once you've finished making your changes, build the application to ensure everything works as expected:
+  ```
+  pnpm build
+  ```
+- If everything looks good, commit your changes and open a pull request with your modifications.
 
 ## Adding a new chapter
 
-To add a new chapter, create a new markdown file in the `src` directory. All the Markdown files **MUST** be edited in english. In order to add them to the book, you need to add a link to it in the `src/SUMMARY.md` file.
+- To add a new chapter, create a new markdown file in the `pages` directory. All the Markdown files **MUST** be edited in english. In order to add them to the book, you need to add in the `vocs.config.ts` file.
 
-Do not write directly Cairo program inside the markdown files. Instead, use code blocks that import the Cairo programs from the `listing` directory. These programs are bundled into scarb projects, which makes it easier to test and build all programs. See the next section for more details.
+- Do not write directly Cairo program inside the markdown files. Instead, use code blocks that import the Cairo programs from the `listings` directory. These programs are bundled into scarb projects, which makes it easier to test and build all programs. See the next section for more details.
 
 ## Adding a new Cairo program
 
@@ -61,7 +73,7 @@ You can find a template of a blank scarb project in the `listings/template` dire
 (You can also use `scarb init` to create a new scarb project, but be sure to remove the generated git repository)
 
 Here's the required `Scarb.toml` configuration:
-  
+
 ```toml
 [package]
 name = "pkg_name"
@@ -89,6 +101,7 @@ casm = true
 ```
 
 You also NEED to do the following:
+
 - Remove the generated git repository, `rm -rf .git` (this is important!)
 - Double check that the `pkg_name` is the same as the name of the directory
 
@@ -129,55 +142,49 @@ mod tests;
 
 > About Starknet Foundry: It is currently not possible to use Starknet Foundry but we are working on it.
 
-### Use of anchor
+### Use of region
 
 You can add delimiting comments to select part of the code in the book.
+
 ```cairo
 file.cairo:
 
 a
-// ANCHOR: anchor_name
+// [!region region_name]
 b
-// ANCHOR_END: anchor_name
+// [!endregion region_name]
 c
 ```
 
 Then, in the markdown file, you can use the following syntax to include only the code between the delimiting comments:
 
-```markdown
-  ```rust
-  {{#include ../../listings/path/to/listing/src/contract.cairo:anchor_name}}
-  \```
-```
+````markdown
+    ```rust
+    // [!include ~/listings/src/contract.cairo:region_name]
+    ```
+````
 
 This will result in the following code being included in the book:
 
 ```cairo
 b
 ```
 
-## Translations
-
-To work with translations, those are the steps to update the translated content:
-
-- Run a local server for the language you want to edit: `./translations.sh zh-cn` for instance. If no language is provided, the script will only extract translations from english.
-
-- Open the translation file you are interested in `po/zh-cn.po` for instance. You can also use editors like [poedit](https://poedit.net/) to help you on this task.
-
-- When you are done, you should only have changes into the `po/xx.po` file. Commit them and open a PR.
-  The PR must stars with `i18n` to let the maintainers know that the PR is only changing translation.
-
-The translation work is inspired from [Comprehensive Rust repository](https://github.com/google/comprehensive-rust/blob/main/TRANSLATIONS.md).
+To render code in tabs format you can use `:::code-group`. Example you can render contract and tests in separate tabs like this:
 
-You can test to build the book with all translations using the `build.sh` script and serve locally the `book` directory.
+````
+    :::code-group
 
-### Initiate a new translation for your language
+    ```rust [contract]
+    // [!include ~/listings/src/contract.cairo:contract]
+    ```
 
-If you wish to initiate a new translation for your language without running a local server, consider the following tips:
+    ```rust [tests]
+    // [!include ~/listings/src/contract.cairo:tests]
+    ```
 
-- Execute the command `./translations.sh new xx` (replace `xx` with your language code). This method can generate the `xx.po` file of your language for you.
-- To update your `xx.po` file, execute the command `./translations.sh xx` (replace `xx` with your language code), as mentioned in the previous chapter.
-- If the `xx.po` file already exists (which means you are not initiating a new translation), you should not run this command.
+    :::
+````
 
 ## Code of Conduct
 
@@ -195,21 +202,21 @@ orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
-advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ### Our Responsibilities

README.md

@@ -10,18 +10,15 @@ Please refer to the Contribution Guidelines page:
 - [Contributing](CONTRIBUTING.md#contributing)
   - [Table of Contents](CONTRIBUTING.md#table-of-contents)
   - [Setup](CONTRIBUTING.md#setup)
-  - [MdBook](CONTRIBUTING.md#mdbook)
+  - [Working with Markdown Files](CONTRIBUTING.md#working-with-markdown-files)
   - [Adding a new chapter](CONTRIBUTING.md#adding-a-new-chapter)
   - [Adding a new Cairo program](CONTRIBUTING.md#adding-a-new-cairo-program)
-    - [Verification script](CONTRIBUTING.md#verification-script)
     - [Tests](CONTRIBUTING.md#tests)
-    - [Use of anchor](CONTRIBUTING.md#use-of-anchor)
-  - [Translations](CONTRIBUTING.md#translations)
-    - [Initiate a new translation for your language](CONTRIBUTING.md#initiate-a-new-translation-for-your-language)
+    - [Use of region](CONTRIBUTING.md#use-of-region)
   - [Code of Conduct](CONTRIBUTING.md#code-of-conduct)
     - [Our Pledge](CONTRIBUTING.md#our-pledge)
     - [Our Standards](CONTRIBUTING.md#our-standards)
     - [Our Responsibilities](CONTRIBUTING.md#our-responsibilities)
     - [Scope](CONTRIBUTING.md#scope)
     - [Enforcement](CONTRIBUTING.md#enforcement)
-    - [Attribution](CONTRIBUTING.md#attribution)
+    - [Attribution](CONTRIBUTING.md#attribution)