chore: improve getting started page

.tailwind/tailwind.plugin.typography.mjs

@@ -85,6 +85,10 @@ export default plugin(({ addComponents }) => {
       "@apply font-plex-sans text-13 font-normal uppercase leading-[150%] tracking-[0.096rem]":
         {},
     },
+    ".typo-btn-s-normal": {
+      "@apply font-plex-sans text-13 font-normal leading-[150%] tracking-[0.096rem]":
+        {},
+    },
     ".typo-btn-l": {
       "@apply font-plex-sans text-16 font-medium uppercase leading-[150%] tracking-[0.192rem]":
         {},

src/components/DocIntroCard.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+type DocIntroCardProps = {
+  title: string;
+  description?: string;
+  href: string;
+  icon?: string;
+};
+
+const DocIntroCard: React.FC<DocIntroCardProps> = ({
+  title,
+  description,
+  href,
+  icon,
+}) => {
+  return (
+    <a
+      href={href}
+      className="BigDocIntroCard relative flex items-center justify-between rounded-12 bg-gray-dark-3 p-16 !text-gray-dark-11 no-underline ring-gray-dark-8 hover:cursor-pointer hover:bg-gray-dark-4 active:bg-gray-dark-3"
+    >
+      <div className="flex w-full gap-5">
+        <div className={`SmallDocIntroCard mx-5 rounded-12 p-1`} />
+        <div className="w-full">
+          <div className="relative flex w-full items-center justify-between">
+            <div className="typo-btn-action text-white">{title}</div>
+            {icon ? (
+              <div>
+                <img src={icon} alt={description} className="w-20 " />
+              </div>
+            ) : (
+              <div className="arrow absolute right-0">→</div>
+            )}
+          </div>
+          {description && (
+            <div className="typo-btn-s-normal">{description}</div>
+          )}
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export default DocIntroCard;

src/components/FleekFunctions.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { Button } from '@components/Button';
+
+type FleekFunctionProps = {
+  functionUrl: string;
+};
+
+const FleekFunction = ({ functionUrl }: FleekFunctionProps) => {
+  const [data, setData] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handleClick = async () => {
+    setLoading(true);
+
+    try {
+      const response = await fetch(functionUrl);
+      const result = await response.text();
+      setData(result);
+      setError(null);
+    } catch (err) {
+      setError('Error fetching data.');
+      setData(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <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>
+        <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>
+  );
+};
+
+export default FleekFunction;

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

@@ -5,6 +5,8 @@ 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
@@ -15,7 +17,7 @@ Fleek Functions are code snippets that are executed server-side using Fleek Netw
 
 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.
+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
 
@@ -96,7 +98,7 @@ The `--name` flag takes a new unique identifier of your project list. It should
 > 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.
+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 it in accordance to your project conventions.
 
 ## Deploy a Fleek Function
 
@@ -140,11 +142,11 @@ To display all the Fleek Functions you've deployed in your Fleek project, execut
 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.
+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.
+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.
 
@@ -231,6 +233,11 @@ For example, let's say that the Fleek Function URL we got for the demo "my-first
 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
@@ -245,6 +252,11 @@ Afterwards, we could interface with our Fleek Function via the URL:
 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:
@@ -320,7 +332,7 @@ This is an experimental feature, performance will be impacted. We are actively w
 
 ## 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_ 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:
 

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

@@ -5,85 +5,20 @@ date: 2024-05-23
 desc: A description of Fleek Functions, code snippets that are executed server-side using Fleek Network's on-chain cloud infrastructure.
 ---
 
-# Fleek Functions
+import FleekFunction from '@components/FleekFunctions';
 
-:::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
 
 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?
+Run the function below to see Fleek Functions in action 👇
 
-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.
+<FleekFunction
+  client:load
+  functionUrl={'https://rapping-memory-tinkling.functions.on-fleek.app/'}
+/>
 
-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.
+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]" />
 
@@ -169,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
 
@@ -182,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