Merge pull request #8371 from ballerina-platform/master

Sync master into staging

components/bff/code/Code.js

@@ -49,15 +49,15 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='rest-support' className='section'>
+                                <h2 id='simplify-back-end-development-with-native-rest-features' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
                                         height="30"
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'rest-support')}
+                                        onClick={(e) => props.getLink(e.target, 'simplify-back-end-development-with-native-rest-features')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -115,15 +115,15 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='rest-business-apps' className='section'>
+                                <h2 id='streamline-back-end-data-handling' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
                                         height="30"
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'rest-business-apps')}
+                                        onClick={(e) => props.getLink(e.target, 'streamline-back-end-data-handling')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -180,15 +180,15 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='rest-business-apps' className='section'>
+                                <h2 id='validate-payload-constraints-in-web-back-ends' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
                                         height="30"
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'rest-business-apps')}
+                                        onClick={(e) => props.getLink(e.target, 'validate-payload-constraints-in-web-back-ends')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -245,15 +245,15 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='rest-transform' className='section'>
+                                <h2 id='efficiently-expose-complex-data-with-graphql' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
                                         height="30"
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'rest-transform')}
+                                        onClick={(e) => props.getLink(e.target, 'efficiently-expose-complex-data-with-graphql')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -311,15 +311,15 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='powerful-data-mapping' className='section'>
+                                <h2 id='expose-real-time-data-to-front-ends-via-websockets' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
                                         height="30"
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'powerful-data-mapping')}
+                                        onClick={(e) => props.getLink(e.target, 'expose-real-time-data-to-front-ends-via-websockets')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -377,15 +377,15 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='ballerina-is-serverAuth' className='section'>
+                                <h2 id='simplify-user-authentications-and-authorizations' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
                                         height="30"
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'ballerina-is-serverAuth')}
+                                        onClick={(e) => props.getLink(e.target, 'simplify-user-authentications-and-authorizations')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -443,15 +443,15 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='security' className='section'>
+                                <h2 id='comprehensive-security-for-web-back-ends' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
                                         height="30"
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'security')}
+                                        onClick={(e) => props.getLink(e.target, 'comprehensive-security-for-web-back-ends')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -508,15 +508,15 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='custom-rest' className='section'>
+                                <h2 id='securely-interact-with-internal-external-services' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
                                         height="30"
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'custom-rest')}
+                                        onClick={(e) => props.getLink(e.target, 'securely-interact-with-internal-external-services')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -573,15 +573,15 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='apis-are-new-dll' className='section'>
+                                <h2 id='automate-data-access-with-ballerina' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
                                         height="30"
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'apis-are-new-dll')}
+                                        onClick={(e) => props.getLink(e.target, 'automate-data-access-with-ballerina')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
@@ -635,15 +635,15 @@ export default function UseCases(props) {
                     <Container>
                         <Row>
                             <Col xs={12} className={styles.box}>
-                                <h2 id='apis-are-new-dll' className='section'>
+                                <h2 id='develop-flexible-scalable-back-ends' className='section'>
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                         width="30"
                                         height="30"
                                         fill="currentColor"
                                         className="bi bi-link-45deg mdButton pe-2"
                                         viewBox="0 0 16 16"
-                                        onClick={(e) => props.getLink(e.target, 'apis-are-new-dll')}
+                                        onClick={(e) => props.getLink(e.target, 'develop-flexible-scalable-back-ends')}
                                     >
                                         <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                                         <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />

components/bff/code/bff-bbe/client-auth.md

@@ -1,7 +1,7 @@
 ---
 title: 'Securely interact with internal/external services'
 description: Ballerina back-ends can securely call services with the necessary security features such as client-side OAuth2, mutual TLS, and JWT-encapsulated user data.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/microservices'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/securely_consume_services_from_backends'
 ---
 ```
 service /logistics on new http:Listener(9090) {

components/bff/code/bff-bbe/constraint-validation.md

@@ -1,7 +1,7 @@
 ---
 title: 'Validate payload constraints in web back-ends'
 description: Ballerina's inherent JSON capabilities enable the direct mapping of JSON data into Ballerina records, incorporating functionalities such as constraint validations.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/constraint_validation'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/validate_payloads_constraints_in_web_backends'
 ---
 ```
 type Order record {|

components/bff/code/bff-bbe/graphql.md

@@ -1,7 +1,7 @@
 ---
 title: 'Efficiently expose complex data with GraphQL'
 description: With Ballerina's built-in GraphQL functionality, developers can simply expose Ballerina records via GraphQL services, facilitating querying and selectively fetching complex data structures.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/graphql'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/expose_complex_data_with_graphql'
 ---
 ```
 type Order record {|

components/bff/code/bff-bbe/json-support.md

@@ -1,7 +1,7 @@
 ---
 title: 'Streamline back-end data handling'
 description: Ballerina has built-in support for multi-part payloads, constraint validations, transformations, and, enrichments for working with complex payloads.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/payload_support'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/handle-mulipart-form-data'
 ---
 ```
 service /crm on new http:Listener(9090) {

components/bff/code/bff-bbe/persist.md

@@ -1,7 +1,7 @@
 ---
 title: 'Automate data access with Ballerina'
 description: Ballerina's persistence features offer a straightforward way to create a data access layer for any complex application by providing a simplified interface for CRUD operations.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/persists'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/persistently-store-data-using-Ballerina'
 ---
 ```
 Client dbClient = check new ();

components/bff/code/bff-bbe/rest-support.md

@@ -1,7 +1,7 @@
 ---
 title: 'Simplify back-end development with native REST features'
 description: Ballerina provides REST features like path/query parameters, HTTP headers, status codes, and complex JSON structures as first-class citizens within the language itself.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/rest'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/restful-order-service'
 ---
 ```
 service /sales on new http:Listener(9090) {

components/bff/code/bff-bbe/security.md

@@ -1,7 +1,7 @@
 ---
 title: "Comprehensive security for web back-ends"
 description: Ballerina-based back-ends can simplify securing sensitive data during transit, validating server identity, managing CORS, and enforcing message type restrictions via annotations.
-url: 'hhttps://github.com/SasinduDilshara/BFF-Samples/tree/dev/comprehensive_security'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/comprehensive-security-for-web-backends'
 ---
 ```
 @http:ServiceConfig {

components/bff/code/bff-bbe/server-auth.md

@@ -1,7 +1,7 @@
 ---
 title: 'Simplify user authentications and authorizations'
 description: Ballerina apps can be seamlessly integrated with any OAuth2-compatible identity provider using a simple set of annotations. 
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/rest_with_asgardeo'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/connect_with_asgardeo_for_building_secure_services'
 ---
 ```
 @http:ServiceConfig {

components/bff/code/bff-bbe/websockets.md

@@ -1,7 +1,7 @@
 ---
 title: 'Expose real-time data to front-ends via webSockets'
 description: Ballerina allows real-time data to be streamed just by implementing a service. This comes with enterprise-ready security features like TLS, mutual TLS, and OAuth2.
-url: 'https://github.com/SasinduDilshara/BFF-Samples/tree/dev/websocket'
+url: 'https://github.com/ballerina-guides/bff-samples/tree/main/exposing-realtime-data-using-websockets'
 ---
 ```
 service /logistics on new websocket:Listener(9091) {