[EDU-5516] Update polyfills guide (#1359)

* feat: update terminal steps

* fix: update config step

* fix: small changes

* feat: move page to runtime menu

* feat: update use of polyfills

* refactor: change folder and names

* feat: add redirect

cicd/azion-massive-redirect-en.json

@@ -299,6 +299,10 @@
         "from": "https://www.azion.com/en/documentation/products/edge-application/edge-functions/runtime/overview/",
         "moved": "https://www.azion.com/en/documentation/devtools/runtime/overview/"
     },
+    {
+        "from": "https://www.azion.com/en/documentation/devtools/guides/cli/use-polyfills/",
+        "moved": "https://www.azion.com/en/documentation/devtools/guides/use-polyfills/"
+    },
     {
         "from": "https://www.azion.com/en/documentation/products/edge-application/edge-functions/debugging/",
         "moved": "https://www.azion.com/en/documentation/devtools/debugging/"

cicd/azion-massive-redirect-ptbr.json

@@ -111,6 +111,10 @@
       "from": "https://www.azion.com/pt-br/documentacao/produtos/edge-application/edge-functions/runtime-api/frameworks-suportados/nextjs/",
       "moved": "https://www.azion.com/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/"
   },
+  {
+      "from": "https://www.azion.com/pt-br/documentacao/devtools/guias/cli/use-polyfills/",
+      "moved": "https://www.azion.com/pt-br/documentacao/devtools/guias/use-polyfills/"
+  },
   {
       "from": "https://www.azion.com/pt-br/documentacao/produtos/guias/como-acessar-o-rtm/",
       "moved": "https://www.azion.com/pt-br/documentacao/produtos/guias/como-acessar-o-azion-console/"

src/content/docs/en/pages/guides/cli/cli-vulcan-use-polyfills.mdx → src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/use-polyfills.mdx

@@ -3,9 +3,9 @@ title: How to resolve Node.js APIs through polyfills
 description: Learn how to configure and use Node.js APIs through polyfills.
 meta_tags: 'web frameworks, development, developer experience'
 namespace: documentation_cli_guide_polyfill
-menu_namespace: cliMenuAlpha
+menu_namespace: runtimeMenu
 og_image: ''
-permalink: /documentation/devtools/guides/cli/use-polyfills/
+permalink: /documentation/devtools/guides/use-polyfills/
 ---
 
 Through [Azion CLI](/en/documentation/products/azion-cli/overview/), you can initialize an application based on starter templates or link an existing project. The list of supported web frameworks includes Next.js, React, Vue, Angular, Astro, JavaScript itself, and others. These JavaScript frameworks run at Azion's edge, on top of [Azion Runtime](/en/documentation/runtime/overview/).
@@ -42,30 +42,56 @@ Before getting started, you must have:
 Your application s name:  (glorious-curiosity) polyfills-guide
 ```
 
-3. Choose the JavaScript template: 
+3. Choose the JavaScript preset: 
+
+:::tip
+You can start typing the preset's name to filter the results.
+:::
 
 ```sh 
-Getting templates available? Choose a template for your project: (Use arrow keys)
- >Javascript
-  Angular 
-  Astro 
-  Hexo 
-  Next 
-  React 
-  Vue 
-  Vite 
+? Choose a preset:  [Use arrows to move, type to filter]
+  Angular
+  Astro
+  Docusaurus
+  Eleventy
+  Emscripten
+  Gatsby
+  Hexo
+  Hono
+  Hugo
+> Javascript
+  Jekyll
+  ...
 ```
 
-4. Enter `y` to start a local development server. 
+4. Choose the `Hello World` template:
+
+:::tip
+You can start typing the template's name to filter the results.
+:::
+
+```sh
+? Choose a template:  [Use arrows to move, type to filter]
+  Azion Edge SQL
+  Drizzle + Neon Sample
+  Drizzle + TiDB Sample
+  Drizzle + Turso Sample
+  Edge Function GitHub AutoDeploy
+  Fauna DB Boilerplate
+> Hello World
+  HTMX Boilerplate
+  Simple Javascript Router Node
+  ...
+```
 
-5. Enter `y` to install project dependencies.  
+5. Enter `y` to start a local development server. 
 
-6. Choose a package manager.
+6. Enter `y` to install project dependencies.  
 
 7. Access the port that was returned in the terminal. Example:
 
 ```bash 
-[Azion Bundler] [Server] › ✔  success   Function running on port 0.0.0.0:3000, url: http://localhost:3000
+[Azion Bundler] [Server] › ✔  success   Function running on port 0.0.0.0:3333, url: http://localhost:3333
 ``` 
 
 8. Go back to the terminal and terminate the process.
@@ -76,20 +102,41 @@ Getting templates available? Choose a template for your project: (Use arrow keys
 cd polyfills-guide
 ```
 
-10. Create the `bundler.config.js` file and paste the following properties:
+10. Open the `azion.config.js` file. It'll look like this:
 
-```js title="polyfills-guide/bundler.config.js"
-module.exports = {
-  entry: 'main.js',
-  builder: 'webpack',
-  useNodePolyfills: true,
-};
+```js title="polyfills-guide/azion.config.js"
+import { defineConfig } from 'azion';
+
+export default defineConfig({
+  build: {
+    entry: 'main.js',
+    preset: {
+      name: 'javascript',
+    },
+  },
+});
 ```
 
+This is the file where you can add specific configurations for your project. For example, the `polyfills` property can be set to `true` or `false` to control whether or not to allow the use of polyfills:
+
+```js title="polyfills-guide/azion.config.js"
+import { defineConfig } from 'azion';
+
+export default defineConfig({
+  build: {
+    entry: 'main.js',
+    preset: {
+      name: 'javascript',
+    },
+    polyfills: true, // allows the use of polyfills
+  },
+});
+```
+
+In our example, you can leave the file as it is. Polyfills are allowed by default.
+
 :::note
-- **entry**: represents the primary entry point for your application where the build process begins. Not applicable for Jamstack solutions.
-- **builder**: defines the build tool to use, either `esbuild` or `webpack`.
-- **useNodePolyfills**: specifies whether Node.js polyfills should be applied.
+For more information about configuring your project, check the [azion.config.js file reference](/en/documentation/devtools/cli/configs/azion-config-js/).
 :::
 
 11. After applying these settings, you can import the necessary APIs into your project. This example uses the Node.js Buffer API:
@@ -98,33 +145,32 @@ module.exports = {
 
 ```js title="polyfills-guide/main.js"
 // Import the Buffer class from the 'buffer' module in Node.js
-import { Buffer } from 'node:buffer';
-
-// Define a function named 'myWorker' that takes an event as an argument
-export default function myWorker(event) {
-  // Create a new Buffer instance 'buf1' from the string "x"
-  var buf1 = Buffer.from("x");
-  // Create a new Buffer instance 'buf2' from the string "x"
-  var buf2 = Buffer.from("x");
-  // Compare 'buf1' and 'buf2' using the Buffer.compare method,
-  // which returns a number indicating the equality of the buffers
-  var a = Buffer.compare(buf1, buf2);
-
-  // The result will be 0 since both buffers are equal
-  console.log(a);
-
-  // Now, let's swap the values of 'buf1' and 'buf2'
-  buf1 = Buffer.from("y");
-  buf2 = Buffer.from("x");
-  // Compare 'buf1' and 'buf2' again
-  a = Buffer.compare(buf1, buf2);
-
-  // Here, the result will be 1
-  console.log(a);
-
-  // The function returns a new Response object with the string "Testing buffer polyfills"
-  return new Response("Testing polyfills");
-}
+import { Buffer } from "node:buffer";
+
+const main = async (event) => {
+  // Create a buffer from the string "Hello Edge!" with UTF-8 encoding
+  const helloBuffer = Buffer.from("Hello Edge!", "utf8");
+
+  // Log the buffer content as a hexadecimal string
+  console.log(helloBuffer.toString("hex"));
+  // Expected output: 48656c6c6f204564676521
+
+  // Log the buffer content as a base64 string
+  console.log(helloBuffer.toString("base64"));
+  // Expected output: SGVsbG8gRWRnZSE=
+
+  // Overwrite part of the buffer with the string "World" at the specified offset and length
+  helloBuffer.write("World", 6, 5, "utf8");
+
+  // Log the updated buffer content as a string
+  console.log(helloBuffer.toString());
+  // Expected output: Hello World!
+
+  // Return the buffer content as a response with a 200 status
+  return new Response(helloBuffer.toString(), { status: 200 });
+};
+
+export default main;
 ```
 
 12. Run the project locally by running: