fix: fleekfunction component fixes and minor edits

src/components/FleekFunctions.tsx

@@ -27,17 +27,43 @@ const FleekFunction = ({ functionUrl }: FleekFunctionProps) => {
   };
 
   return (
-    <div className="mx-auto w-full">
-      <Button variant="primary" onClick={handleClick}>
-        {loading ? 'Loading...' : 'Run Function'}
-      </Button>
-      {data && (
-        <div className="mt-6 bg-gray-500 p-10 text-[1.8rem]">
-          <code className="text-white">Fleek Function Response: {data}</code>
+    <div className="mb-12 rounded-12 bg-gray-dark-2 p-12">
+      <div className="flex flex-col gap-12">
+        <div className="flex gap-4">
+          {/* three dots  */}
+          <div className="w-2 rounded-full bg-rose-600 p-5" />
+          <div className="w-2 rounded-full bg-yellow-dark-9 p-5" />
+          <div className="w-2 rounded-full bg-green-600 p-5" />
         </div>
-      )}
-      {error && <div className="error text-red-500">{error}</div>}
+        <div className="flex flex-col justify-between gap-12 lg:flex-row">
+          <div className="flex-grow rounded-12 bg-gray-dark-6 px-7">
+            {/* fn comes here */}
+            {functionUrl}
+          </div>
+          <div>
+            {/* run button  */}
+            <Button variant="tertiary" onClick={handleClick}>
+              {loading ? 'Loading...' : 'Run Function'}
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="mt-12 rounded-12 bg-gray-dark-1 p-7 font-sans">
+        {/* fun output here */}
+        {data ? data : 'Please run the function above to see the output here. '}
+      </div>
     </div>
+    // <div className="mx-auto w-full">
+    //   <Button variant="primary" onClick={handleClick}>
+    //     {loading ? 'Loading...' : 'Run Function'}
+    //   </Button>
+    //   {data && (
+    //     <div className="mt-6 bg-gray-500 p-10 text-[1.8rem]">
+    //       <code className="text-white">Fleek Function Response: {data}</code>
+    //     </div>
+    //   )}
+    //   {error && <div className="error text-red-500">{error}</div>}
+    // </div>
   );
 };
 

src/content/blog/learn/tee-hee-he-dilemma/index.md

@@ -79,6 +79,8 @@ This would make the agent immediately print its login details when it started. A
 
 The main takeaway is that if you cannot reproducibly build a program running in an enclave you probably shouldn’t trust the remote attestation. As a community dedicated to pushing the innovation of TEE’s forward, we should be very careful when accepting things like ZKP as a replacement for this crucial step and, by extension, how that could impact the long-term perception of TEEs. Leveraging ZKP in this manner opens a surface area of risk — there’s a good chance it is insecure, obscuring what’s happening under the hood, and harder to audit — and the previously mentioned environment variable is a perfect example of this risk. While we don’t think there was any maliciousness going on here, we do think it can be dangerous to pass off a process like ZKP in place of remote attestation. Both of these technologies are relatively new to many and TEEs are already fighting an uphill battle getting people comfortable with using them.
 
+---
+
 ## **Tee-Hee-He Makeover: Remote Attestation Edition**
 
 Luckily all these issues can be addressed with proper remote attestation. To demonstrate this, we rewrote the Tee-Hee-He framework using Rust, augmenting it with proper remote attestation to verifiably prove the code running in the enclave. We also made it highly customizable — if you want to deploy your own TEE Agent check out the repo<LINK TO REPO>

src/content/docs/CLI/Functions/index.mdx

@@ -0,0 +1,395 @@
+---
+order: 7
+title: Fleek Functions
+date: 2024-05-23
+desc: The Fleek Functions are code snippets that are executed server-side using Fleek Network's on-chain cloud infrastructure.
+---
+
+import FleekFunction from '@components/FleekFunctions';
+
+# Fleek Functions
+
+:::warn
+This feature is in alpha and runs on a new testnet version of Fleek Network. Until functionality is finalized further, we do not recommend using Fleek Functions in production apps due to changes that may be made during this ongoing development period. We have a lot of improvements planned to the entire data flow, but they require more precise engineering efforts which will take more time. Releasing this alpha version now while we are still developing it, to get early usage and feedback, felt like the best approach to achieve the long-term goals of Fleek Functions.
+:::
+
+Fleek Functions are code snippets that are executed server-side using Fleek Network’s on-chain cloud infrastructure.
+
+These aim to offer a more economical, high-performance, and scalable solution for running server-side code compared to well-known options like Lambda functions, thanks to the [Fleek Network](https://fleek.network) architecture.
+
+Fleek Functions make it possible for users to create serverless apps with lightning-fast performance at a much lower cost. Fleek Functions support TypeScript and JavaScript based functions.
+
+## Create a draft function
+
+To create your first Fleek Function, you must first draft the code and then configure the deployment settings accordingly. To follow the instructions, open your terminal, and change directory to your liking.
+
+For our example, we'll create a file named "my-first-function.js", you can choose any name:
+
+```sh
+touch my-first-function.js
+```
+
+Open your favourite text editor and declare a function. We'll write a simple function that returns the text "Hello world!" -
+
+```js
+export const main = (params) => {
+  return 'hello world';
+};
+```
+
+You are obligated to export a **main** function. The **main** signifies the entry point for computations or declarations within the file scope. It'll not compute or operate if you neglect to declare and export it.
+
+To learn more about what the export declaration is, read the MDN Web docs [here](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export).
+
+:::note
+If you are creating a TypeScript based Fleek Function, please make sure that you create a file with the `.ts` extension, you can choose any name-
+
+```sh
+touch my-first-function.ts
+```
+
+Here is what a simple function that returns the text "Hello world!" may look like in TypeScript -
+
+```ts
+export const main = (params: any): string => {
+  return 'hello world';
+};
+```
+
+Please make sure you are using fleek-platform CLI v2.9.1 to be able to access TypeScript capabilities.
+
+:::
+
+### HTTP requests and responses
+
+Every execution of your Fleek Function receives an [HttpRequest](https://fleek-network.github.io/js-docs/~/Fleek.HttpRequest.html) argument. It represents the HTTP request made to your function. You can find all the relevant information of your request there.
+
+```js
+export const main = (params) => {
+  const { method, path } = params;
+  return `${method} request to ${path}`;
+};
+```
+
+You can respond either with a string, that will be your HTTP response body, or with an [HttpResponse](https://fleek-network.github.io/js-docs/~/Fleek.HttpResponse.html) to set your response headers or status.
+
+Check out our [docs](https://fleek-network.github.io/js-docs/) for more information on the APIs available to your Fleek Function code.
+
+## Create a Fleek Function
+
+To create a Fleek Function, we utilize the **functions** command. You can learn how to use it by appending **help**:
+
+```sh
+fleek functions help
+```
+
+For our example, we'll create a function named "my-first-function".
+
+```sh
+fleek functions create --name my-first-function
+```
+
+The `--name` flag takes a new unique identifier of your project list. It should be descriptive to help you identify it at later stage, e.g. if you have to manage a large number of Fleek Functions within a project.
+
+```sh
+✅ Success! The function has been successfully created.
+
+> You can create a new deployment using the following command
+> Fleek functions deploy
+```
+
+A few examples of valid syntax identifier names are calculator, my-custom-function or add_2. A name does not have to be the same as the function file name, or the export name. A good practice can be to name in accordance to your project conventions.
+
+## Deploy a Fleek Function
+
+At this stage you should have created a [draft function file](#create-a-draft-function) in your local file system and a [Fleek Function](#create-a-fleek-function) via the Fleek Platform CLI.
+
+To deploy the Fleek Function, we'll use the sub-command **deploy**. You can learn about it by appending help to the **functions** command.
+
+```sh
+fleek functions help
+```
+
+In order to deploy a Fleek Function, we need to provide a name and a file path.
+
+In our example, we've titled our [draft function](#create-a-draft-function) file "my-first-function.js" and [created](#create-a-fleek-function) a Fleek Function called "my-first-function". It's important to note that we had the choice to give them different names as the file and Fleek Function names don't have to match.
+
+Here, we'll pass those values as arguments to the --name and --path flag.
+
+```sh
+fleek functions deploy \
+  --name my-first-function \
+  --path ~/some/path/my-first-function.js
+```
+
+The response should be similar to:
+
+```sh
+✅ Success! The deployment has been successfully created.
+
+> You can call this Fleek Function by making a request to the following URL
+🤖 Make a request to the following URL
+🔗 https://<SLUG>.functions.dev.on-fleek-test.app
+```
+
+Given that our function is a basic 'Hello World' program and doesn't require any parameters, visit the provided invoke URL to execute your function code. However, keep in mind that the functions are deployed into IPFS, requiring a grace period for propagation.
+
+## List Fleek Functions
+
+To display all the Fleek Functions you've deployed in your Fleek project, execute the following command:
+
+```js
+fleek functions list
+```
+
+This command will output a table showing the ID, Name, Slug, and Fleek Function invocation URL for each of your Fleek Functions.
+
+## Update Fleek Functions
+
+To update the source-code for a Fleek Function, you'll have to edit the draft file and re-deploy it, preferencly to the same Fleek Function name. It's expected, to push edits to the same Fleek Function name to work iteratively.
+
+But since the code for a particular _deployment_ of a Fleek Function is immutable, every update will cause the Fleek Function ID to change. Although, the Slug URL associated to access the resource will remain the same.
+
+Thus, to view a list of all deployments for a function, run the following command:
+
+```sh
+fleek function deployments --name <Fleek Function Name>
+```
+
+For our example, we'd run:
+
+```sh
+fleek function deployments --name my-first-function
+```
+
+We can verify that the ID and [CID](https://docs.ipfs.tech/concepts/content-addressing/) change per deployment of different function iterations.
+
+```sh
+ID            CID               Created At
+------------------------------------------
+clv...1ex     baf...h1z         2024-04-22
+clv...qb2     baf...un2         2024-02-14
+clv...y3l     baf...3st         2024-01-06
+```
+
+Content addressing is where we use a hash to access the content, and it allows us to verify that the content we received is the content we asked for. This is one of the principles that help us provide guarantees to end-users who require a high ability for content verification; As a consequence, the immutability of files is critical to this system powered by [Fleek Network](https://fleek.network).
+
+Thus, it's crucial to remember that the functions are deployed into IPFS, requiring a period for propagation.
+
+## Interact with Fleek Functions
+
+To interact with Fleek Functions, you can send requests to the Fleek Function URL using a variety of HTTP methods, such as GET and POST.
+
+Here's the syntax for simple HTTP GET request via [cURL](https://curl.se):
+
+```sh
+curl -X GET \
+  https://<SLUG>.functions.stg.on-fleek-test.app
+```
+
+### Limitations
+
+When writing code for your functions, please keep in mind Fleek Functions currently have a timeout of 15 seconds, and a memory limit of 50 MiB during execution.
+
+## Modify properties
+
+After the deployment of a Fleek Function, you can edit the following properties:
+
+- Status: Can switch between ACTIVE or INACTIVE state
+- Name: Modify the unique identifier term listed in the project
+- Slug: The alias utilized to access the specific function resource
+
+### Update the name or slug
+
+You might find it necessary to rename an existing Fleek Function, e.g. if the code it executes now diverges from its initial purpose or to improve clarity.
+
+To modify the name, run:
+
+```sh
+fleek functions update \
+  --functionName <NAME> \
+  --name <NEW-NAME>
+```
+
+As an example, we can modify the name we opted for this demo "my-first-function" to "my-function".
+
+```sh
+fleek functions update \
+  --functionName my-first-function \
+  --name my-function
+```
+
+Similarly, you can modify the "slug" of the Fleek Function by utilizing the flag --slug instead of --name.
+
+```sh
+fleek functions update \
+  --functionName <NAME> \
+  --slug <NEW-SLUG>
+```
+
+For example, let's say that the Fleek Function URL we got for the demo "my-first-function" is:
+
+```sh
+https://big-coffeeshop-little.functions.stg.on-fleek-test.app
+```
+
+<FleekFunction
+  client:load
+  functionUrl={'https://big-coffeeshop-little.functions.stg.on-fleek-test.app'}
+/>
+
+If we'd like to modify the slug "big-coffeeshop-little" to another available name, we'd run:
+
+```sh
+fleek functions update \
+  --functionName my-first-function \
+  --slug my-unique-slug
+```
+
+Afterwards, we could interface with our Fleek Function via the URL:
+
+```sh
+https://my-unique-slug.functions.stg.on-fleek-test.app
+```
+
+<FleekFunction
+  client:load
+  functionUrl={'https://my-unique-slug.functions.stg.on-fleek-test.app'}
+/>
+
+## Using private data with Fleek Functions
+
+You can make use of environment variables through any combination of the following:
+
+- Those set within your CLI
+- Those imported from a separate file
+- Those exported into your local environment
+
+:::warn
+
+Your Fleek Function are stored on IPFS. They are publicly accessible by default, and will expose all of your code associated with the function including any environment variables which are bundled into your code. Ensure you are not inadvertently exposing data you are interested in keeping private.
+
+:::
+
+### Environment variables set within your CLI
+
+You can pass `-e` or `--env` flags to the CLI in order to set simple, non-array environment variables from within the CLI. For example, the following code would set VAR1 as 'foo' and VAR2 as 'bar' for use within your Fleek Function.
+
+```js
+fleek functions deploy --name print-hello-world --path *./function.js --env VAR1='foo' --env VAR2='bar'
+```
+
+### Environment variables imported from a separate file
+
+Additionally, you can pass a `--envFile` flag to the CLI, followed by a file location relative to the current directory, in order to load environment variables from a file. This file should represent variables using a key value pair syntax.
+
+```js
+# This is a comment
+PORT=3000 # This is also a comment
+NAME="Some value"
+MULTI_LINE="THIS IS
+A MULTILINE"
+```
+
+In the example below, the user's environment variables are located in an `env.list` file.
+
+```js
+fleek functions deploy --name print-hello-world --path *./function.js --envFile ./env.list
+```
+
+### Environment variables exported to your local environment
+
+Lastly, you can use variables exported to your local environment.
+
+If you have exported a variable to your environment with export VAR1='foo'and export VAR2='bar', e.g., you can run:
+
+```js
+fleek functions deploy --name print-hello-world --path *./function.js --env VAR1 --env VAR2
+```
+
+### Using your environment variables
+
+Your environment variables are available under `fleek.env`. You can test it out with the following function:
+
+```js
+export const main = (params) => {
+  const foo = fleek.env.FOO;
+  return `foo=${foo}`;
+};
+```
+
+## Making Fleek Functions private (🧪 Alpha)
+
+If you are interested in making your Fleek Function code private, add the `--private` flag to your deployment command:
+
+```js
+fleek functions deploy --name print-hello-world --path *./function.js --private
+```
+
+:::warn
+This is an experimental feature, performance will be impacted. We are actively working on improving this experience to be on par with IPFS stored functions.
+:::
+
+## Deactivate functions
+
+To _deactivate_ such a Fleek Function, you can run the command below, replacing `<fleek_function_name>` with the name of the Fleek Function you’re deactivating.
+
+To deactivate a Fleek Function, use the command below:
+
+```sh
+fleek functions update \
+  --functionName <NAME> \
+  --status <STATUS>
+```
+
+As demonstrated in the [Managing Fleek Functions](#managing-fleek-functions) table, the available status are **ACTIVE** or **INACTIVE**. So, let's say that we'd like to _deactivate_ the "my-first-function".
+
+You'd want to run:
+
+```sh
+fleek functions update \
+  --functionName my-fleek-function \
+  --status INACTIVE
+```
+
+If successful, a response should be expected, as follows:
+
+```sh
+✅ Success! The function has been successfully updated.
+```
+
+Through this action, we've deactivated a Fleek Function, choosing not to delete it.
+
+:::note
+These update commands will update the _existing deployment_ of a Fleek Function rather than triggering an additional deployment.
+:::
+
+To _reactivate_ a Fleek Function you previously activated, simply run the same command but with the status set to `ACTIVE`.
+
+## Delete a Fleek Function
+
+If you determine that a Fleek Function is no longer useful to you or your project, you can delete it outright by running the following command:
+
+```js
+fleek functions delete --name <fleek_function_name>
+```
+
+Should you decide that a Fleek Function is no longer useful to your project, you can delete it by executing the following command:
+
+```sh
+fleek functions delete \
+  --name <NAME>
+```
+
+For example, let's delete the Fleek Function named "my-first-function":
+
+```sh
+fleek functions delete \
+  --name my-first-function
+```
+
+On completion, you'd get a confirmation message:
+
+```sh
+✅ Success! The function has been successfully deleted.
+```

src/content/docs/Platform/Fleek-Functions/index.mdx

@@ -9,91 +9,19 @@ import FleekFunction from '@components/FleekFunctions';
 
 # Fleek Functions
 
+Fleek Functions are code snippets that are executed server-side using Fleek Network’s on-chain cloud infrastructure.
+
+Run the function below to see Fleek Functions in action 👇
+
 <FleekFunction
   client:load
-  functionUrl={'https://massive-rocket-late.functions.on-fleek.app'}
+  functionUrl={'https://rapping-memory-tinkling.functions.on-fleek.app/'}
 />
 
-:::warn
-This alpha feature runs on a testnet version of Fleek Network. We advise against using Fleek Functions in production,
-as changes are expected during the ongoing development. Available in the Fleek Platform UI, CLI, and SDK, this early release aims to gather feedback for future improvements.
-:::
-
-Fleek Functions are code snippets that are executed server-side using Fleek Network’s on-chain cloud infrastructure.
-
 These functions are often a more cost-effective, performant and scalable option for executing server-side code than popular alternatives such as Lambda functions, due to the architecture of the Fleek Network. These functions allow users to build cost-effective, low-overhead infrastructure for their applications while also enabling lightning-fast performance.
 
 <div className="my-12 bg-gray-dark-6 p-[1px]" />
 
-## Why should I use Fleek Functions in my project?
-
-There are a few key benefits to consider when evaluating Fleek Functions for use within your application:
-
-**Reduced latency**: The primary advantage of using Fleek Functions over a service you may be familiar with such as AWS’s Lambda functions is the edge runtime environment, which reduces the latency of your function calls. By running Fleek Functions on Fleek Network’s edge-optimized onchain cloud infrastructure, which consists of a large number of geo-aware, globally distributed nodes, Fleek minimizes the response time of these functions.
-
-**Reduced overhead**: Because functions are only called on an as-needed basis and there are no servers to manage, Fleek Functions require far less overhead than other self-managed servers or rentals. They allow you to focus on your code, rather than on server infrastructure management.
-
-**Auto-scaling**: Users who are in need of minimal resources during low-traffic periods or far more resources during traffic spikes can use precisely the volume of resources that they require, in an auto-scaling model that is maximally cost-effective.
-
-**Reduced costs**: While pricing is still being fully finalized (and therefore Fleek Functions are free to use for now), there are strong indications that Fleek Functions will be significantly cheaper than current popular serverless alternatives such as Lambda functions and Vercel Functions. Thanks to Fleek Network, pricing is also fully transparent and almost entirely usage based, so you don’t need to deal with any of the price gouging that comes with most traditional cloud platforms.
-
-**Self-sovereignty**: Using Fleek Functions means you get to remain self-sovereign, due to the permissionless, censorship resistant, and onchain nature of Fleek Network. With Fleek Functions, nobody can deplatform you or censor you or tamper with your code or data. You can finally say goodbye to all that corporate cloud platform nonsense.
-
-## What can I do with Fleek Functions?
-
-Put simply, you can call Fleek Functions from the front-end of your application just as you would invoke any code that returns a response from a server. Among other things, you can use Fleek Functions to:
-
-- Call APIs to retrieve or populate data on the user interface
-- Make routing requests
-- Implement server-side rendering (SSR) for your entire application
-- Build use cases like Next.js hosting
-- Perform image optimization and resize images
-- Replace any existing serverless, edge, or cloud functions you currently use in your stack
-
-And countless other things. There isn’t much you can’t build with serverless compute frameworks these days.
-
-## Do I need to use Fleek Functions for my Fleek project, or is Fleek able to support dynamic sites that do not use Fleek Functions?
-
-Prior to the release of Fleek Functions, Fleek was able to support users’ dynamic sites, but by necessity users were required to manage their back-end services outside of Fleek.
-
-Fleek can now support dynamic sites without requiring users to manage this aspect of their application elsewhere, but even in the wake of Fleek Functions’ release, it is not required.
-
-Users still have the option of self-managing their servers or managing their back-end code through another provider. We believe Fleek Functions offer benefits over these alternatives, but do not require their exclusive use or prevent users from exploring other solutions.
-
-## Moving Fleek Functions from alpha to production
-
-While this feature is in alpha, there are some important caveats about its functionality, chiefly that this feature is not yet accessible within the platform UI.
-
-### Where to use Fleek Functions in alpha
-
-Today Fleek Functions can only be created and managed within Fleek's CLI and SDK, but soon we plan to integrate this functionality into the platform UI as well. When we do roll out Fleek Functions within the platform UI, you will find this functionality under the “Functions” tab of your project page, which currently serves as a placeholder and directs users to the information found here.
-
-### How to use Fleek Functions in alpha
-
-While the Fleek Functions feature is in alpha and until a future date when its functionality has been finalized, we do not recommend relying on Fleek Functions within production applications. In the interim, we encourage our users to experiment with the addition of Fleek Functions to hobby projects or sandboxes. We invite users to preview the performance and cost benefits of Fleek Functions in a controlled environment such as this to assuage any doubts about its future value to a production application.
-
-### Later: supporting common use cases with communal Fleek Functions
-
-We plan to improve and solidify this feature based on feedback from the community, but to also explore ways that the community can directly contribute shared communal Fleek Functions. Developers building on Fleek often require custom back-end code to facilitate the bespoke needs of their application and users, but just as certain utility `npm` packages like `lodash` attract installs into millions of unique repos, some Fleek Functions will fulfill a need shared by a preponderance of Fleek users. An example of one such Fleek Function might be one that call the OpenWeatherMap API and returns the current temperature of the requested city.
-
-If these functions were created in isolation, they would often duplicate the work of other community members. One might be a less battle-tested, elegant solution to the same problem another user has encountered.
-
-Users are under no obligation to publish Fleek Functions, but we plan to highlight open-source contributions from Fleek users that we believe may be valuable to our community at large. Just as we currently highlight useful templates for users building their applications with specific frameworks and an [`awesome-fleek`](https://github.com/fleekxyz/awesome-fleek) directory of useful tools built on Fleek, we anticipate there may be value in organizing a directory of boilerplate but configurable Fleek Functions that have widespread applicability to our users’ projects.
-
-### Release timeline for Fleek Functions
-
-We look forward to seeing the Fleek Functions our users create and share. We believe Fleek Functions collectively represent one of the more significant value unlocks for our users since Fleek’s inception, given that it is one of the first of our features to leverage the Fleek Network.
-
-As of today, Fleek Functions will move through the following phases:
-
-- **Alpha release**: Fleek Functions can be created and managed through the Fleek CLI and SDK, but cannot be accessed through the Fleek Platform UI. They are not recommended for production-grade applications.
-- **Beta release**: Following rigorous testing, we will move Fleek Functions to a beta state. We will still advise caution when integrating Fleek Functions into production applications at this stage, but they will be nearing their production release and thus will be less likely to change or produce unexpected side effects.
-- **Production release**: The Fleek Platform UI will support the creation and management of Fleek Functions. Fleek Functions will leave beta and be recommended for production applications. We will begin facilitating a community-created directory of open-source Fleek Functions.
-
-Ready to get started with Fleek Functions and explore the cost and performance improvements they can enable for your application? Follow the guide below.
-
-<div className="my-12 bg-gray-dark-6 p-[1px]" />
-
 ## Creating and using Fleek Functions
 
 Fleek Functions can now be accessed via the Fleek Platform [CLI](/docs/cli) and [Fleek Platform app](https://app.fleek.xyz). Follow the guide [here](/docs/cli/functions#create-a-draft-function) to learn how to create and deploy Fleek Functions with the Fleek CLI. You also can create and manage your Fleek Functions directly from your Fleek app:
@@ -176,7 +104,7 @@ There are two states:
 
 - **Running**: The Fleek Function is running and live.
 
-- **Stopped**:: The Fleek Function has been taken down as a Fleek Function and can only be accessed by the Content ID (CID) from IPFS.
+- **Stopped**: The Fleek Function has been taken down as a Fleek Function and can only be accessed by the Content ID (CID) from IPFS.
 
 ### Change the function name
 
@@ -189,10 +117,15 @@ A Fleek Function's slug is contained within the URL (Uniform Resource Locator) o
 To illustrate the above, we consider the below Fleek Function:
 
 ```bash
-https://echoing-oil-numerous.functions.dev.on-fleek-test.app/
+https://brief-byte-shrilling.functions.on-fleek.app/
 ```
 
-"echoing-oil-numerous" represents the Fleek Function's slug within the URL and we can edit that within the Fleek Function's settings as shown below:
+<FleekFunction
+  client:load
+  functionUrl={'https://brief-byte-shrilling.functions.on-fleek.app/'}
+/>
+
+`brief-byte-shrilling` represents the Fleek Function's slug within the URL and we can edit that within the Fleek Function's settings. You can learn more about it [here](/docs/cli/functions#update-the-name-or-slug)
 
 ### Delete a Fleek Function
 

src/settings.json

@@ -179,6 +179,10 @@
         {
           "category": "SDK",
           "order": 4
+        },
+        {
+          "category": "FAQ",
+          "order": 5
         }
       ],
       "customTitlesByDirectoryName": {}

src/styles/docPage.css

@@ -109,7 +109,8 @@
   }
 
   [data-menu-item='cli'],
-  [data-menu-item='sdk'] {
+  [data-menu-item='sdk'],
+  [data-menu-item='faq'] {
     text-transform: uppercase;
   }
 }