Sample App Tutorial Page Compilation (#6007)

* feat: add the first three pages of the sample app tutorial

* Apply suggestions from code review

Co-authored-by: Pierangelo Di Pilato <pierangelodipilato@gmail.com>

* fix: fix the review comments in pg0 and pg1

* feat: add blog post 2

* feat: adding the images for page 2

* add: add more pages

* add: adding the rest of the pages

* add: modify the nav

* add: finishing polishing

* fix: update the iframe embedded video link

* fix: fix the video embedding dimension and the access

* fix: link minor error fix

* fix: hide the setup script section

* Apply suggestions from code review

Co-authored-by: Christoph Stäbler <cstabler@redhat.com>

* Update docs/bookstore/page-0/page-0-intro.md

Co-authored-by: Christoph Stäbler <cstabler@redhat.com>

* Update docs/bookstore/page-0.5/pg0.5-env-setup.md

Co-authored-by: Christoph Stäbler <cstabler@redhat.com>

* fix: fix christoph's comment

* fix: Remove all the extra new lines

* fix: update kubernetes to Kubernetes

* Apply suggestions from code review

Co-authored-by: Pierangelo Di Pilato <pierangelodipilato@gmail.com>
Co-authored-by: Christoph Stäbler <cstabler@redhat.com>

* fix: fix the wrong indentation in the yaml files

* Update docs/bookstore/page-2/pg2-sentiment-svc.md

Co-authored-by: Christoph Stäbler <cstabler@redhat.com>

* fix: fix review comments

* fix: change the console output to text - pg0.5

* fix: replace the console output pic with plaintextg for pg1

* fix: replace the console output pic with plaintext for pg 2&3

* fix: replace the console output pic with plaintext for pg 4

* fix: replace the console output pic with plaintext for pg 5

* fix: replace the console output pic with plaintext for pg 6

* fix: replace the console output pic with plaintext for pg 7

* fix: fix christoph's comments

* Apply suggestions from code review

Co-authored-by: Christoph Stäbler <cstabler@redhat.com>

* fix: applying christoph's comments fix

* fix: fix christoph's nit comments + open the link in new tab

* fix: make sure all the command have the same root which is /start

* fix: make all the links open in the new tab

* fix: fix small errors

* fix: remove default namespace

* Update docs/bookstore/page-1/pg1-review-svc-1.md

Co-authored-by: Christoph Stäbler <cstabler@redhat.com>

* Apply suggestions from code review

Co-authored-by: Christoph Stäbler <cstabler@redhat.com>

* fix: update the wording to follow the Knative's branding guideline

* fix: update the wording to follow the Knative's branding guideline

* fix: update the naming of the pages

* fix: fixing the wrong link in the tutorial.md page

* Apply the patch from Christoph

Co-authored-by: Christoph Stäbler <cstabler@redhat.com>

* Apply suggestions from code review

Co-authored-by: Christoph Stäbler <cstabler@redhat.com>

* Update docs/bookstore/page-1/send-review-comment-to-broker.md

Co-authored-by: Pierangelo Di Pilato <pierangelodipilato@gmail.com>

---------

Co-authored-by: Pierangelo Di Pilato <pierangelodipilato@gmail.com>
Co-authored-by: Christoph Stäbler <cstabler@redhat.com>

Author: 3 people

code-samples/eventing/bookstore-sample-app/solution/ML-sentiment-analysis/README.md

@@ -20,10 +20,10 @@ The function's output will be only from
 ---
 
 ### Prerequisite 1: Install Knative `func` CLI
-Knative Function enables you to easily create, build, and deploy stateless, event-driven functions as [Knative Services](https://knative.dev/docs/serving/services/#:~:text=Knative%20Services%20are%20used%20to,the%20Service%20to%20be%20configured) by using the func CLI.
+Knative Function enables you to easily create, build, and deploy stateless, event-driven functions as [Knative Services](https://knative.dev/docs/serving/services/#:~:text=Knative%20Services%20are%20used%20to,the%20Service%20to%20be%20configured){:target="_blank"} by using the func CLI.
 
 In order to do so, you need to install the `func` CLI.
-You can follow the [official documentation](https://knative.dev/docs/getting-started/install-func/) to install the `func` CLI.
+You can follow the [official documentation](https://knative.dev/docs/getting-started/install-func/){:target="_blank"} to install the `func` CLI.
 
 Running `func version` in your terminal to verify the installation, and you should see the version of the `func` CLI you installed.
 
@@ -55,7 +55,7 @@ func create -l python sentiment-analysis
 
 This command will create a new directory with the name `sentiment-analysis` and a bunch of files in it. The `func` CLI will generate a basic function template for you to start with.
 
-You can find all the supported languages templates [here](https://knative.dev/docs/functions/).
+You can find all the supported languages templates [here](https://knative.dev/docs/functions/){:target="_blank"}.
 
 The file tree will look like this:
 ```bash
@@ -175,7 +175,7 @@ setup(
 
 ### Step 5: Try to build and run your Knative Function on your local machine
 
-In knative function, there are two ways to build: using the [pack build](https://github.com/knative/func/blob/8f3f718a5a036aa6b6eaa9f70c03aeea740015b9/docs/reference/func_build.md?plain=1#L46) or using the [source-to-image (s2i) build](https://github.com/knative/func/blob/4f48549c8ad4dad34bf750db243d81d503f0090f/docs/reference/func_build.md?plain=1#L43). 
+In knative function, there are two ways to build: using the [pack build](https://github.com/knative/func/blob/8f3f718a5a036aa6b6eaa9f70c03aeea740015b9/docs/reference/func_build.md?plain=1#L46){:target="_blank"} or using the [source-to-image (s2i) build](https://github.com/knative/func/blob/4f48549c8ad4dad34bf750db243d81d503f0090f/docs/reference/func_build.md?plain=1#L43){:target="_blank"}. 
 
 Currently. only the **s2i** build is supported if you need to run setup.py. When building with s2i, the `setup.py` file will be executed automatically after the dependencies have been installed.
 
@@ -255,7 +255,7 @@ Knative function also have an easy way to simulate the CloudEvent, you can use t
 func invoke -f=cloudevent --data='{"input": "I love Knative so much"}' --content-type=application/json --type="new-comment" -v 
 ```
 where the `-f` flag indicates the type of the data, is either `HTTP` or `cloudevent`, and the `--data` flag is the input text.
-You can read more about `func invoke` [here](https://github.com/knative/func/blob/main/docs/reference/func_invoke.md).
+You can read more about `func invoke` [here](https://github.com/knative/func/blob/main/docs/reference/func_invoke.md){:target="_blank"}.
 
 In this case, you will get the full CloudEvent response:
 
@@ -302,7 +302,7 @@ NAMESPACE   NAME                     URL
 default     sentiment-analysis-app   http://sentiment-analysis-app.default.10.99.46.8.sslip.io   sentiment-analysis-app-00002   sentiment-analysis-app-00002   True    
 ```
 
-Please note: if your URL ends with .svc.cluster.local, that means you can only access the function from within the cluster. You probably forget to configure the network or [start the tunnel](https://knative.dev/docs/getting-started/quickstart-install/#__tabbed_3_2) if you are using minikube.
+Please note: if your URL ends with .svc.cluster.local, that means you can only access the function from within the cluster. You probably forget to configure the network or [start the tunnel](https://knative.dev/docs/getting-started/quickstart-install/#__tabbed_3_2){:target="_blank"} if you are using minikube.
 
 ### Step 7: Verify the Deployment
 After deployment, the `func` CLI provides a URL to access your function. You can verify the function's operation by sending a request with a sample review comment.
@@ -340,8 +340,8 @@ Recall note box: you can get the URL to the function by running the following co
 kubectl get kservice -A 
 ```
 ---
-Another option is to use curl to send a CloudEvent to the function.
-Using curl command to send a CloudEvent to the broker:
+Another option is to use curl to send a CloudEvents to the function.
+Using curl command to send a CloudEvents to the Broker:
 ```bash
 [root@curler:/]$ curl -v "http://sentiment-analysis-app.default.10.99.46.8.sslip.io" \
 -X POST \

code-samples/eventing/bookstore-sample-app/solution/create-workspace.md

@@ -4,26 +4,26 @@
 
 To create a Slack workspace, follow these steps:
 
-- Visit [https://slack.com/get-started#/createnew](https://slack.com/get-started#/createnew).
+- Visit [https://slack.com/get-started#/createnew](https://slack.com/get-started#/createnew){:target="_blank"}.
 - Enter your email address and click Continue, or continue with Apple or Google.
 - Check your email for a confirmation code.
 - Enter the code on the Slack website.
 - Click "Create a Workspace" and follow the prompts.
-- For detailed instructions for androids and , refer to [Create a workspace](https://slack.com/help/articles/206845317-Create-a-Slack-workspace).
+- For detailed instructions how to create a workspace via the Desktop App, on Android or iOS, refer to [Create a Slack workspace](https://slack.com/help/articles/206845317-Create-a-Slack-workspace){:target="_blank"}.
 
 ## Adding Channels to Your Workspace
 
 After creating your Slack workspace, you can add channels by following these steps:
 
 - Click the '+' icon next to 'Channels' on the sidebar of your Slack workspace.
 - Choose "Create a channel" and specify the channel name and purpose.
-- For enterprise grid organizations, refer to [Slack's help article](https://slack.com/help/articles/115001399587-Add-a-channel-to-multiple-workspaces-in-your-Enterprise-Grid-organization) for instructions.
+- For enterprise grid organizations, refer to [Slack's help article](https://slack.com/help/articles/115001399587-Add-a-channel-to-multiple-workspaces-in-your-Enterprise-Grid-organization){:target="_blank"} for instructions.
 
 ## Setting Up a Webhook for Notifications
 
 To set up a webhook for sending notifications to your Slack workspace:
 
-- Create a [Slack app](https://api.slack.com/apps/new), following the instructions by signing in, adding name and workspace to put the app in.
+- Create a [Slack app](https://api.slack.com/apps/new){:target="_blank"}, following the instructions by signing in, adding name and workspace to put the app in.
 - After this, you'll be redirected to the setting pages of your new app. Choose **Incoming Webhook** and toggle **Activate Webhook**.
 - Scroll down to click the option **Add New Webhook to Workspace**.
   ![Alt text](./screenshots/select-channel.png)
@@ -33,4 +33,4 @@ To set up a webhook for sending notifications to your Slack workspace:
   ![Alt text](./screenshots/Postman.png)
 - Afterwards, the text channel should have a new message
   ![Alt text](./screenshots/result.png)
-- Go to [Slack's webhook documentation](https://api.slack.com/messaging/webhooks) to learn more about setting up webhooks.
+- Go to [Slack's webhook documentation](https://api.slack.com/messaging/webhooks){:target="_blank"} to learn more about setting up webhooks.

code-samples/eventing/bookstore-sample-app/solution/db-service/README.md

@@ -89,20 +89,20 @@ If the output lists the `BookReviews` table as follows, your database has been c
 ## Question & Discussion
 1. Why did we choose to deploy our PostgreSQL database using a StatefulSet instead of a Knative Service?
 
-We use [StatefulSet](https://kubernetes.io/docs/concepts/workloads/controllers/statefulset/) for databases instead of Knative Service mainly because databases need to remember data (like a notebook that keeps your notes). StatefulSets are good at remembering things because they can save data and have a special name and place where they live. This is very important for databases.
+We use [StatefulSet](https://kubernetes.io/docs/concepts/workloads/controllers/statefulset/){:target="_blank"} for databases instead of Knative Service mainly because databases need to remember data (like a notebook that keeps your notes). StatefulSets are good at remembering things because they can save data and have a special name and place where they live. This is very important for databases.
 
 Knative Services are more like notebooks that you use and then throw away when you're done. They're great for tasks that don't need to keep data for a long time. You can make them go away when you don't need them and come back when you do. But databases need to always remember information, so they can't just disappear and come back.
 
 Also, databases often talk in their own special language, not the usual web language (HTTP) that Knative Services are really good at understanding. Because of this, Knative Services aren't the best choice for databases. That's why we choose StatefulSet for databases in Kubernetes.
 
 ---
-Note box: However, Knative Service supports Volumes and Persistent Volumes, which can be used to store data. You can read more [here](https://knative.dev/docs/serving/services/storage/) about how to use Volumes and Persistent Volumes with Knative Services specially for your use case.
+Note box: However, Knative Service supports Volumes and Persistent Volumes, which can be used to store data. You can read more [here](https://knative.dev/docs/serving/services/storage/){:target="_blank"} about how to use Volumes and Persistent Volumes with Knative Services specially for your use case.
 
 ---
 
 2. When should I use Knative Service, and what would be the best use case for it?
 
-You can read more about the best use cases for Knative Service [here](https://knative.dev/docs/serving/samples/)!
+You can read more about the best use cases for Knative Service [here](https://knative.dev/docs/serving/samples/){:target="_blank"}!
 
 ## Conclusion
 By following this guide, you have successfully deployed a PostgreSQL server on a Kubernetes cluster, set up persistent storage, and initialized your database using a Kubernetes job. Congratulations! Your bookstore now has the database service.

code-samples/eventing/bookstore-sample-app/solution/frontend/README.md

@@ -18,7 +18,7 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000){:target="_blank"} with your browser to see the result.
 
 # Project Structures
 
@@ -33,7 +33,7 @@ This repository contains a Next.js application that utilizes next-themes and Tai
 
 ## Prerequisites
 
-- Docker installed on your machine. You can download and install Docker from [here](https://www.docker.com/get-started).
+- Docker installed on your machine. You can download and install Docker from [here](https://www.docker.com/get-started){:target="_blank"}.
 
 ## Dockerization Steps
 

code-samples/eventing/bookstore-sample-app/solution/node-server/config/100-event-display.yaml

@@ -1,4 +1,3 @@
-
 apiVersion: apps/v1
 kind: Deployment
 metadata:

code-samples/eventing/bookstore-sample-app/solution/node-server/config/300-sinkbinding.yaml

@@ -10,7 +10,7 @@ spec:
     selector:
       matchLabels:
         app: node-server
-  sink: # In this case, the sink is our broker, which is the eventing service that will receive the events
+  sink: # In this case, the sink is our Broker, which is the eventing service that will receive the events
     ref:
       apiVersion: eventing.knative.dev/v1
       kind: Broker

code-samples/eventing/bookstore-sample-app/solution/node-server/index.js

@@ -98,7 +98,7 @@ app.post('/add', async (req, res) => {
         const brokerURI = process.env.K_SINK;
 
         if (receivedEvent.type === 'new-review-comment') {
-            // Forward the event to the broker with the necessary CloudEvent headers
+            // Forward the event to the Broker with the necessary CloudEvent headers
             const response = await fetch(brokerURI, {
                 method: 'POST',
                 headers: {

code-samples/eventing/bookstore-sample-app/solution/sequence/config/100-create-sequence.yaml

@@ -15,7 +15,7 @@ spec:
         apiVersion: serving.knative.dev/v1
         kind: Service
         name: sentiment-analysis-app
-  reply: # This is the last step of the sequence, it will send the event back to the broker as reply
+  reply: # This is the last step of the sequence, it will send the event back to the Broker as reply
     ref:
       kind: Broker
       apiVersion: eventing.knative.dev/v1

code-samples/eventing/bookstore-sample-app/solution/setup.sh

@@ -21,10 +21,10 @@ kubectl apply -f https://github.com/knative/eventing/releases/download/knative-v
 kubectl apply -f https://github.com/knative/eventing/releases/download/knative-v1.14.0/eventing-core.yaml
 echo "Knative Eventing installed successfully."
 
-# Install Knative imc broker
+# Install Knative imc Broker
 kubectl apply -f https://github.com/knative/eventing/releases/download/knative-v1.14.0/in-memory-channel.yaml
 kubectl apply -f https://github.com/knative/eventing/releases/download/knative-v1.14.0/mt-channel-broker.yaml
-echo "Knative in-memory channel and broker installed successfully."
+echo "Knative in-memory Channel and Broker installed successfully."
 
 # Detect whether the user has knative function "func" installed
 if ! command -v func &> /dev/null

code-samples/eventing/bookstore-sample-app/solution/slack-sink/README.md

@@ -11,7 +11,7 @@ When a CloudEvent with the type `new-review-comment` is sent to the Knative Even
 ## Install prerequisites
 
 ### Prerequisite 1: Install Camel CLI
-Install the Camel K CLI (`kamel`) on your local machine. You can find the installation instructions [here](https://camel.apache.org/camel-k/2.2.x/cli/cli.html).
+Install the Camel K CLI (`kamel`) on your local machine. You can find the installation instructions [here](https://camel.apache.org/camel-k/2.2.x/cli/cli.html){:target="_blank"}.
 
 **Troubleshot**: If after installation you run `kamel version` and you get an error message, you may need to add the `kamel` binary to your system's PATH. You can do this by moving the `kamel` binary to a directory that is already in your PATH, or by adding the directory where `kamel` is located to your PATH.
 
@@ -29,7 +29,7 @@ $ kamel install --registry docker.io --organization <your-organization> --regist
 
 Replace the placeholders with your actual Docker registry information.
 
-If you are using other container registries, you may need to read more [here](https://camel.apache.org/camel-k/2.2.x/installation/registry/registry.html) for the installation. 
+If you are using other container registries, you may need to read more [here](https://camel.apache.org/camel-k/2.2.x/installation/registry/registry.html){:target="_blank"} for the installation. 
 
 You will see this message if the installation is successful:
 
@@ -43,19 +43,19 @@ Follow the instruction here on how to create the slack workspace and generate an
 ## Implementation
 ### Step 1: Create the Broker
 
-This broker is created solely for testing purposes and is intended for temporary use during this part of the tutorial only. 
+This Broker is created solely for testing purposes and is intended for temporary use during this part of the tutorial only. 
 
-**Method 1**: Initialize a broker within your Kubernetes cluster using the Knative CLI:
+**Method 1**: Initialize a Broker within your Kubernetes cluster using the Knative CLI:
 
 ```bash
 $ kn broker create book-review-broker
 ```
-You will see this message if the broker is created successfully:
+You will see this message if the Broker is created successfully:
 
 ```
-Broker ‘book-review-broker’ successfully created in namespace ‘default’.
+Broker 'book-review-broker' successfully created in namespace 'default'.
 ```
-**Method 2**: You can create a new YAML file to create the broker:
+**Method 2**: You can create a new YAML file to create the Broker:
 
 *new-knative-broker.yaml*
 ```yaml
@@ -70,7 +70,7 @@ After you saved the file, you can apply the configuration to your Kubernetes clu
 ```bash
 $ kubectl apply -f new-knative-broker.yaml
 ```
-You will see this message if the broker is created successfully:
+You will see this message if the Broker is created successfully:
 
 ```
 broker.eventing.knative.dev/book-review-broker created
@@ -139,9 +139,9 @@ slack-sink-pipe   Ready      1
 
 To trigger notifications, you'll need to simulate an event that matches the criteria set in your Slack sink configuration. For example, submitting a book review could be an event of type `new-review-comment`.
 
-Directly sending CloudEvents to a broker using curl from an external machine (like your local computer) is typically **constrained** due to the networking and security configurations of Kubernetes clusters.
+Directly sending CloudEvents to a Broker using curl from an external machine (like your local computer) is typically **constrained** due to the networking and security configurations of Kubernetes clusters.
 
-Therefore, you need to create a new pod in your Kubernetes cluster to send a CloudEvent to the broker. You can use the following command to create a new pod:
+Therefore, you need to create a new pod in your Kubernetes cluster to send a CloudEvent to the Broker. You can use the following command to create a new pod:
 
 ```bash
 $ kubectl run curler --image=radial/busyboxplus:curl -it --restart=Never
@@ -154,9 +154,9 @@ If you don't see a command prompt, try pressing enter.
 ```
 
 
-Using curl command to send a CloudEvent to the broker:
+Using curl command to send a CloudEvent to the Broker:
 ```bash
-[root@curler:/]$ curl -v "<The URI to your broker>" \
+[root@curler:/]$ curl -v "<The URI to your Broker>" \
 -X POST \
 -H "Ce-Id: review1" \
 -H "Ce-Specversion: 1.0" \
@@ -166,7 +166,7 @@ Using curl command to send a CloudEvent to the broker:
 -d 'Hello from Knative!'
 ```
 
-You can find the URI to your broker by running the following command:
+You can find the URI to your Broker by running the following command:
 
 ```bash
 $ kubectl get broker book-review-broker