diff --git a/.github/config/en-custom.txt b/.github/config/en-custom.txt index 886d6d52a..20e9dc993 100644 --- a/.github/config/en-custom.txt +++ b/.github/config/en-custom.txt @@ -984,6 +984,15 @@ OSI ghcr png src +todoapp +todolist +mockup +diataxis +appdiagram +tmp +jpg +buildingblocks +svg ClusterIP NodePort replicaset @@ -994,4 +1003,4 @@ dfc fh qd vf -zht \ No newline at end of file +zht diff --git a/docs/content/_index.md b/docs/content/_index.md index 38558bd1a..9c0f44944 100644 --- a/docs/content/_index.md +++ b/docs/content/_index.md @@ -10,7 +10,7 @@ no_list: true Welcome to the Radius documentation! Here you'll find everything you need to know about Radius, from getting started to advanced topics. {{% alert color="primary" %}} -Radius logo

+{{< image src="radius-logo.svg" alt="Radius logo" width="400px" >}}

Radius is a cloud native application platform. It enables developers and IT operators to collaborate on delivering and managing cloud-native applications. With Radius, teams can easily understand their applications and how applications are running environments including dev, cloud, edge, and on-prem. Plus, teams can ensure their application infrastructure meets cost, operations, and security requirements. Open-source and multi-cloud, Radius is the cloud-native application platform for delivering and managing applications anywhere. [**Learn more**](https://radapp.io/) diff --git a/docs/content/community/contributing/contributing-docs/index.md b/docs/content/community/contributing/contributing-docs/index.md index 9dbb7db91..15d481cd7 100644 --- a/docs/content/community/contributing/contributing-docs/index.md +++ b/docs/content/community/contributing/contributing-docs/index.md @@ -11,7 +11,7 @@ The Radius docs are built on [Hugo](https://gohugo.io) with the [Docsy](https:// Radius uses the [Diátaxis framework](https://diataxis.fr/) for its documentation: -Diagram showing the diataxis framework +{{< image src="diataxis.png" alt="Diagram showing the diataxis framework" width=800px >}} Follow the guidance on this page to learn how to get started, how to contribute, and how to use the Diátaxis framework to create new docs. @@ -356,7 +356,7 @@ Begin by placing images under `/daprdocs/static/images` with the naming conventi Then link to the image using: ```md -Description of image +{{}} ``` >Don't forget to set the alt attribute to keep the docs readable for our visually impaired users. @@ -366,7 +366,7 @@ Then link to the image using: This HTML will display the `radius-overview.png` image on the `overview.md` page: ```md -Overview diagram of Dapr and its building blocks +{{}} ``` ### Alerts diff --git a/docs/content/concepts/application-graph/index.md b/docs/content/concepts/application-graph/index.md index de2db4288..c2d0b2b0d 100644 --- a/docs/content/concepts/application-graph/index.md +++ b/docs/content/concepts/application-graph/index.md @@ -11,19 +11,19 @@ toc_hide: true Radius offers an [application resource]({{< ref "guides/author-apps/application" >}}) which teams can use to define and deploy their entire application, including all of the compute, relationships, and infrastructure that make up the application. Since the graph of relationships between deployed resources is much more descriptive than a basic list of resources, the Radius Application graph can automate complex deployment tasks and enable rich visualization experiences. -A diagram showing an application and all it's resources +{{< image src="application.png" alt="A diagram showing an application and all it's resources" width=400px >}} ## Graphs are better than lists Within an application deployed with Radius, developers can express both the resources (_containers, databases, message queues, etc._), as well as all the relationships between them. This forms the Radius Application graph. This graph is powerful because it allows Radius to understand the relationships between resources, simplifying the [deployment]({{< ref "/guides/deploy-apps" >}}) and [configuration]({{< ref "application" >}}) of your application. Plus, it allows you to visualize your application in a way that is more intuitive than a list of resources. -A diagram showing the move from a set of infrastructure lists to a graph of resources +{{< image src="list-to-graph.png" alt="A diagram showing the move from a set of infrastructure lists to a graph of resources" width=600px >}} ## Self-documenting applications The Radius Application graph also allows your application to be self-documenting, where developers and operators can query and reason about the same application definition. Instead of multiple views of logs, infrastructure, and code, Radius provides a single source of truth for your application. -A mockup of a dashboard UI showing an application, its resources, and its connections +{{< image src="dashboard.png" alt="A mockup of a dashboard UI showing an application, its resources, and its connections" width=700px >}} > **Note:** A Radius dashboard is still on the roadmap, but in the meantime you can use the [Radius API]({{< ref api-concept >}}) to build your own visual experiences today. diff --git a/docs/content/concepts/architecture-concept/index.md b/docs/content/concepts/architecture-concept/index.md index 8ca6be452..0f28f3bf7 100644 --- a/docs/content/concepts/architecture-concept/index.md +++ b/docs/content/concepts/architecture-concept/index.md @@ -134,7 +134,7 @@ When listing applications using the `rad` CLI: 3. UCP proxies the HTTP request to the `Applications.Core` resource provider. 4. The `Applications.Core` resource provider handles the request and responds with the list of applications. -Diagram of the API flow described above +{{< image src="flow-list-apps.png" alt="Diagram of the API flow described above" width="1000px" >}} {{% /codetab %}} @@ -148,7 +148,7 @@ When using Bicep to author and deploy Radius Applications: a. The `Bicep.Deployments` resource provider makes a request to UCP to Create/Update the resource. b. UCP routes the request to the appropriate resource provider to be handled. -Diagram of the API flow described above +{{< image src="flow-deploy.png" alt="Diagram of the API flow described above" width="1000px" >}} {{% /codetab %}} @@ -161,7 +161,7 @@ When using the `tf` CLI to deploy a Radius Application using Terraform: c. In the case of a Radius resource the Terraform provider makes a request the Radius API to Create/Update a resource. d. UCP routes the request to the appropriate resource provider to be handled. -Diagram of the API flow described above +{{< image src="flow-terraform.png" alt="Diagram of the API flow described above" width="1000px" >}} {{% /codetab %}} diff --git a/docs/content/concepts/environments-concept/index.md b/docs/content/concepts/environments-concept/index.md index 751d57910..e94a70f6d 100644 --- a/docs/content/concepts/environments-concept/index.md +++ b/docs/content/concepts/environments-concept/index.md @@ -14,7 +14,7 @@ Radius Environments are a prepared landing zone for applications. They contain a Environments provide a grouping structure for applications and the resources they share. For example, an org might choose to setup separate Radius Environments for staging and production. When appropriate, multiple applications can be deployed into the same environment. -Diagram of multiple Radius Environments deployed to Azure. One environment contains 1 app, the other environment contains multiple apps. +{{< image src="env-with-apps-example.png" alt="Diagram of multiple Radius Environments deployed to Azure. One environment contains 1 app, the other environment contains multiple apps." width="350px" >}} ## Concerns that environments manage diff --git a/docs/content/concepts/overview/index.md b/docs/content/concepts/overview/index.md index 9c0c62a7c..61b0f7068 100644 --- a/docs/content/concepts/overview/index.md +++ b/docs/content/concepts/overview/index.md @@ -13,7 +13,7 @@ App teams today struggle to model and deploy their applications. Complex archite Apps today are modeled and deployed with Dockerfiles, Kubernetes CRDs, Helm charts, and infrastructure-as-code templates, with scripts to glue it all together. Plus, the range of infrastructure types (cloud, on-premises, serverless) can double or triple the work as teams figure out how to move apps between platforms. -Diagram showing all of the technologies needed to model an application today +{{< image alt="Diagram showing all of the technologies needed to model an application today" src="cloud-apps-today.png" width="600px" >}} Once deployed, teams don't have a way to view and manage apps holistically. Instead, they're drowning in lists of disjointed resources. @@ -25,7 +25,7 @@ What's missing is a way to collapse the entire concept of an application into a At the heart of Radius is a new **application resource**, with an accompanying set of resources and abstractions to describe your app's requirements and capabilities. -Diagram showing modeling an app with Radius +{{< image alt="Diagram showing modeling an app with Radius" src="cloud-apps-radius.png" width="600px" >}} These new resources form the [**Radius app model**]({{< ref application-graph>}}), which allow you to: @@ -36,13 +36,13 @@ These new resources form the [**Radius app model**]({{< ref application-graph>}} The result is no longer just a flat list of resources - it's a fully codified abstraction of how the services and infrastructure relate to each other: -Diagram showing Radius Application in the Azure portal
+{{< image alt="Diagram showing Radius Application in the Azure portal" src="ui-mockup-basic.png" width="700px" >}}
### Drastically reduce infra ops time [App environments]({{< ref environments-concept >}}) are landing zones for applications. They are the place where you can deploy, manage, and scale your apps. -Diagram showing Radius Environments +{{< image alt="Diagram showing Radius Environments" src="environments.png" width="600px" >}} Environments allow you to: @@ -74,7 +74,7 @@ Radius uses the [Bicep language]({{< ref bicep >}}) as its file-format and struc Radius aims to support all hosting platform types - from hyperscale cloud, to self-hosted Kubernetes on the edge, to IoT and edge devices. -Diagram showing Radius platforms +{{< image alt="Diagram showing Radius platforms" src="platforms.png" width="800px" >}} ### Application portability diff --git a/docs/content/getting-started/index.md b/docs/content/getting-started/index.md index ec69e2dd4..7af15a7ea 100644 --- a/docs/content/getting-started/index.md +++ b/docs/content/getting-started/index.md @@ -91,7 +91,7 @@ This command: In your browser you should see the demo app: -Screenshot of the demo container +{{< image src="demo-screenshot.png" alt="Screenshot of the demo container" width=600px >}}

Congrats! You're running your first Radius app. When you're ready to move on to the next step, use CTRL+ C to exit the command. @@ -131,12 +131,12 @@ rad run app.bicep You should see the Radius Connections section with new environment variables added. The `demo` container now has connection information for Redis (`CONNECTION_REDIS_HOST`, `CONNECTION_REDIS_PORT`, etc.): -Screenshot of the demo container +{{< image src="demo-with-redis-screenshot.png" alt="Screenshot of the demo container" width=800px >}}

Navigate to the Todo List tab and test out the application. Using the Todo page will update the saved state in Redis: -Screenshot of the todolist +{{< image src="./images/demo-with-todolist.png" alt="Screenshot of the todolist" width=700px >}}

Press CTRL+ C when you are finished with the website. diff --git a/docs/content/guides/author-apps/application/overview/index.md b/docs/content/guides/author-apps/application/overview/index.md index a7923c4cb..26d5edd71 100644 --- a/docs/content/guides/author-apps/application/overview/index.md +++ b/docs/content/guides/author-apps/application/overview/index.md @@ -8,7 +8,7 @@ categories: "Overview" tags: ["applications"] --- -Diagram of an application +{{< image src="application.png" alt="Diagram of an application" width=350px >}} A Radius Application is the primary resource that brings all your "stuff" together. This can include services, dependencies, and relationships. Radius apps give you a single description and view into your entire application, and allow you to deploy and manage it easily. @@ -16,7 +16,7 @@ A Radius Application is the primary resource that brings all your "stuff" togeth Radius Applications are designed to be cloud and platform agnostic. This means that you can define your application once, and deploy it to any cloud or platform that Radius supports. This allows you to easily move your application between clouds, or even between cloud and on-premises environments. Developers can define their requirements and dependencies (_Redis, SQL, Dapr, etc._) and operators can define the [environments]({{< ref "guides/deploy-apps/environments/overview" >}}) and [Recipes]({{< ref "guides/recipes/overview" >}}) that bind those requirements to the appropriate cloud resources. -Diagram of portable resources binding to different clouds +{{< image src="portable-resources.png" alt="Diagram of portable resources binding to different clouds" width=600px >}} Learn more about portable resources in the [portable resources docs]({{< ref "guides/author-apps/portable-resources/overview" >}}) and [Dapr docs]({{< ref "guides/author-apps/dapr/overview" >}}) @@ -36,7 +36,7 @@ The [Kubernetes Metadata extension]({{< ref "guides/operations/kubernetes/kubern Radius Applications are more than just client-side configuration and automation, they also provide a server-side graph of your application. This graph can be queried and used to understand your application, and can be used to power other Radius features and custom tooling. Refer to the [API concept docs]({{< ref "api-concept" >}}) and [Postman How-To guide]({{< ref "guides/operations/control-plane/howto-postman" >}}) for more information on how to query the application graph. -Diagram of the application graph +{{< image src="app-graph.png" alt="Diagram of the application graph" width=500px >}} ## Resource schema diff --git a/docs/content/guides/author-apps/aws/howto-aws-resources/index.md b/docs/content/guides/author-apps/aws/howto-aws-resources/index.md index 78e1f0c00..5aa3b5e4d 100644 --- a/docs/content/guides/author-apps/aws/howto-aws-resources/index.md +++ b/docs/content/guides/author-apps/aws/howto-aws-resources/index.md @@ -13,7 +13,7 @@ This how-to guide will show you: - How to model an AWS S3 resource in Bicep - How to use a sample application to interact with AWS S3 bucket - Screenshot of the sample application to interact with s3 bucket + {{< image src="s3appdiagram.png" alt="Screenshot of the sample application to interact with s3 bucket " width=400 >}} ## Prerequisites @@ -92,7 +92,7 @@ This creates a container that will be deployed to your Kubernetes cluster. This 1. Visit [localhost:5234](http://localhost:5234/swagger/index.html) in your browser. This is a swagger doc for the sample application. You can use this to interact with the AWS S3 Bucket you created. For example, you can try to upload a file to the bucket via the `/upload` endpoint. - Screenshot of the sample application to interact with s3 bucket + {{< image src="s3app.png" alt="Screenshot of the sample application to interact with s3 bucket " width=900 >}} ## Step 6: Cleanup diff --git a/docs/content/guides/author-apps/containers/howto-connect-dependencies/index.md b/docs/content/guides/author-apps/containers/howto-connect-dependencies/index.md index 50346fce5..9cdf24527 100644 --- a/docs/content/guides/author-apps/containers/howto-connect-dependencies/index.md +++ b/docs/content/guides/author-apps/containers/howto-connect-dependencies/index.md @@ -43,7 +43,7 @@ Connections from a container to a resource result in environment variables for c ``` 1. Visit [localhost:3000](http://localhost:3000) in your browser. You should see the following page, now showing injected environment variables: - Screenshot of the demo app with all environment variables + {{< image src="./demo-with-redis-screenshot.png" alt="Screenshot of the demo app with all environment variables" width=1000px >}} ## Step 5: View the Application Connections diff --git a/docs/content/guides/author-apps/containers/howto-volumes/index.md b/docs/content/guides/author-apps/containers/howto-volumes/index.md index 530c325b7..0be989c3f 100644 --- a/docs/content/guides/author-apps/containers/howto-volumes/index.md +++ b/docs/content/guides/author-apps/containers/howto-volumes/index.md @@ -41,7 +41,7 @@ The `samples/volumes` container will display the status and contents of the `/tm ``` 1. Visit [localhost:5000](http://localhost:5000) in your browser. You should see a message warning that the directory `/tmpdir` does not exist: - Screeshot of container showing that the tmp directory does not exist + {{< image src="screenshot-error.jpg" width=500px alt="Screenshot of container showing that the tmp directory does not exist" >}} ## Step 3: Add an ephemeral volume @@ -65,10 +65,10 @@ Within the `container.volume` property, add a new volume named `temp` and config 1. Visit [localhost:5000](http://localhost:5000) in your browser. You should see the contents of `/tmpdir`, showing an empty directory. - Screeshot of container showing that the tmp directory has no items + {{< image src="screenshot-empty.jpg" width=500px alt="Screenshot of container showing that the tmp directory has no items" >}} 1. Press the `Create file` button to generate a new file in the directory, such as `test.txt`: - Screeshot of container showing files being created + {{< image src="screenshot.jpg" width=400px alt="Screenshot of container showing files being created" >}} 1. Done! You've now learned how to mount an ephemeral volume ## Cleanup diff --git a/docs/content/guides/author-apps/containers/overview/index.md b/docs/content/guides/author-apps/containers/overview/index.md index 35665aad8..f925f849c 100644 --- a/docs/content/guides/author-apps/containers/overview/index.md +++ b/docs/content/guides/author-apps/containers/overview/index.md @@ -10,7 +10,7 @@ tags: ["containers"] A Radius container enables you to run a container workload as part of your application across different platforms and runtimes. Your container can be a frontend UI, a backend API, a database, or any other container you need to run as part of your app. Plus, with Radius Connections, you can easily connect your container to other resources in your application, such as databases, message queues, and more and automatically configure your container with identity, secrets, and other configuration. -Container graphic +{{< image src="containers-splash.png" alt="Container graphic" width=300px >}} > Adding a container and want to jump to the reference docs? Check out the [container resource schema]({{< ref "container-schema" >}}). diff --git a/docs/content/guides/author-apps/dapr/overview/index.md b/docs/content/guides/author-apps/dapr/overview/index.md index d81a23dfb..bdfad1fe4 100644 --- a/docs/content/guides/author-apps/dapr/overview/index.md +++ b/docs/content/guides/author-apps/dapr/overview/index.md @@ -20,7 +20,7 @@ Follow the [Dapr installation instructions](https://docs.dapr.io/operations/host A [Dapr sidecar](https://docs.dapr.io/concepts/dapr-services/sidecar/) allows your services to interact with Dapr building blocks. It is required if your service leverages Dapr. -Diagram of the Dapr sidecar
+{{< image src="dapr-sidecar.png" style="width:600px" alt="Diagram of the Dapr sidecar" >}}
You can easily add the Dapr sidecar to your [Containers]({{< ref "guides/author-apps/containers" >}}) using a Dapr sidecar extension: @@ -38,7 +38,7 @@ Your container can now interact with the sidecar using the Dapr [building block Dapr resources make it easy to model and configure [Dapr building block APIs](https://docs.dapr.io/developing-applications/building-blocks/). Simply specify the building block and the backing resource, and Radius will apply the accompanying Dapr component configuration. -Diagram of all the Dapr building blocks
+{{< image src="dapr-buildingblocks.png" style="width:1000px" alt="Diagram of all the Dapr building blocks" >}}
Model your building blocks as resources: diff --git a/docs/content/guides/author-apps/networking/howto-gateways/index.md b/docs/content/guides/author-apps/networking/howto-gateways/index.md index db73e9700..82d2448cd 100644 --- a/docs/content/guides/author-apps/networking/howto-gateways/index.md +++ b/docs/content/guides/author-apps/networking/howto-gateways/index.md @@ -60,7 +60,7 @@ Building app.bicep... Visit the endpoint to interact with the demo Radius container: -Screenshot of te demo application +{{< image src="demo-screenshot.png" alt="Screenshot of the demo application" width="500px" >}} ## Done diff --git a/docs/content/guides/author-apps/networking/howto-service-networking/index.md b/docs/content/guides/author-apps/networking/howto-service-networking/index.md index 40cd4d766..ca2b9cf25 100644 --- a/docs/content/guides/author-apps/networking/howto-service-networking/index.md +++ b/docs/content/guides/author-apps/networking/howto-service-networking/index.md @@ -10,7 +10,7 @@ categories: "How-To" This guide will show you how two services can communicate with each other. In this example, we will have a frontend container service that communicates with a backend container service. -Diagram of the frontend talking to the backend over HTTP port 80 +{{< image src="overview.png" alt="Diagram of the frontend talking to the backend over HTTP port 80" width="400px" >}} ## Prerequisites @@ -64,7 +64,7 @@ Starting log stream... Visit [http://localhost:3000](http://localhost:3000) in your browser. You should see a connection to the backend container, along with the environment variables that have automatically been set on the frontend container: -Screenshot of the demo container showing the backend connections +{{< image src="backend-connection.png" alt="Screenshot of the demo container showing the backend connections" width="600px" >}} ## Done diff --git a/docs/content/guides/author-apps/networking/howto-tls/index.md b/docs/content/guides/author-apps/networking/howto-tls/index.md index fa3aefc87..fd8718a4c 100644 --- a/docs/content/guides/author-apps/networking/howto-tls/index.md +++ b/docs/content/guides/author-apps/networking/howto-tls/index.md @@ -102,7 +102,7 @@ Building app.bicep... Once the deployment is complete you should see a public endpoint displayed at the end. Navigating to this public endpoint should show you your application that is accessed via HTTPS, assuming that you have a valid TLS certificate: -View TLS certificate +{{< image src="https-app.png" alt="View TLS certificate" width="400px" >}} ## Done diff --git a/docs/content/guides/author-apps/networking/overview/index.md b/docs/content/guides/author-apps/networking/overview/index.md index acb4395f4..afa687476 100644 --- a/docs/content/guides/author-apps/networking/overview/index.md +++ b/docs/content/guides/author-apps/networking/overview/index.md @@ -12,7 +12,7 @@ Radius networking resources allow you to model: - Communication between services - Communication between a user and a service -Diagram of a gateway with traffic going to a frontend container, which in turn sends traffic to the basket and catalog containers +{{< image src="networking.png" alt="Diagram of a gateway with traffic going to a frontend container, which in turn sends traffic to the basket and catalog containers" width="400px" >}} ## Service to service communication @@ -26,7 +26,7 @@ Network connections are defined as strings containing: For example, a frontend container may need to connect to a basket container. The frontend container would define a connection to the basket container, with the scheme `http`, the target `basket`, and the port `3000`. The connection would look like this: `http://basket:3000`. -Diagram showing the components of a network connection +{{< image src="network-connection.png" alt="Diagram showing the components of a network connection" width="400px" >}} For more information on how to do service to service networking, visit the [service networking how-to guide]({{< ref howto-service-networking >}}): diff --git a/docs/content/guides/author-apps/portable-resources/overview/index.md b/docs/content/guides/author-apps/portable-resources/overview/index.md index 6a722773d..c1deb6413 100644 --- a/docs/content/guides/author-apps/portable-resources/overview/index.md +++ b/docs/content/guides/author-apps/portable-resources/overview/index.md @@ -12,7 +12,7 @@ tags: ["portability"] Portable resources provide **abstraction** and **portability** to Radius Applications. This allows development teams to depend on high level resource types and APIs, and let infra teams swap out the underlying resource and configuration. -Diagram of portable resources connecting to Azure CosmosDB, AWS MongoDB, and a MongoDB Docker container +{{< image src="portable-resources.png" alt="Diagram of portable resources connecting to Azure CosmosDB, AWS MongoDB, and a MongoDB Docker container" width=700px >}} ## Available resources diff --git a/docs/content/guides/deploy-apps/environments/overview/index.md b/docs/content/guides/deploy-apps/environments/overview/index.md index 11b4f90ec..02f056e5e 100644 --- a/docs/content/guides/deploy-apps/environments/overview/index.md +++ b/docs/content/guides/deploy-apps/environments/overview/index.md @@ -20,7 +20,7 @@ Radius Environments can be configured with a container runtime, where Radius [co A Kubernetes namespace is specified on the environment to tell Radius where to render application resources at deploy time. -Diagram showing a Radius Environment mapping to a Kubernetes cluster and namespace +{{< image src=environments.png alt="Diagram showing a Radius Environment mapping to a Kubernetes cluster and namespace" width=800px >}} ### Cloud Provider diff --git a/docs/content/guides/operations/control-plane/howto-postman/index.md b/docs/content/guides/operations/control-plane/howto-postman/index.md index aced3f377..1597b4b5b 100644 --- a/docs/content/guides/operations/control-plane/howto-postman/index.md +++ b/docs/content/guides/operations/control-plane/howto-postman/index.md @@ -103,11 +103,11 @@ Next, you'll need to get the control plane API endpoint and use Postman to inter /apis/api.ucp.dev/v1alpha3/planes/radius/local/resourcegroups?api-version=2023-10-01-preview ``` - Screenshot of Postman with filled out URL + {{< image src="postman-url.png" width=900px alt="Screenshot of Postman with filled out URL" >}} 1. Open the `Authorization` tab and select `Bearer Token` from the `Type` dropdown. Paste the token you generated in step 2 into the `Token` field: - Screenshot of Postman with filled out auth token + {{< image src="postman-auth.png" width=900px alt="Screenshot of Postman with filled out auth token" >}} 1. Click the `Send` button to send the request. You will now see your resource groups: diff --git a/docs/content/guides/operations/control-plane/metrics/grafana/index.md b/docs/content/guides/operations/control-plane/metrics/grafana/index.md index 9b45528fb..61ced907d 100644 --- a/docs/content/guides/operations/control-plane/metrics/grafana/index.md +++ b/docs/content/guides/operations/control-plane/metrics/grafana/index.md @@ -18,17 +18,17 @@ There are two example dashboards that you can import into Grafana to quickly get The [radius-overview-dashboard.json](https://raw.githubusercontent.com/radius-project/radius/main/grafana/radius-overview-dashboard.json) template shows Radius and Deployment Engine statuses, including runtime, and server-side health: -1st screenshot of the Radius Overview Dashboard
+{{< image src="radius-overview-1.png" alt="1st screenshot of the Radius Overview Dashboard" width=1200 >}}
-2nd screenshot of the Radius Overview Dashboard
+{{< image src="radius-overview-2.png" alt="2nd screenshot of the Radius Overview Dashboard" width=1200 >}}
### Resource provider overview The [radius-resource-provider-dashboard.json](https://raw.githubusercontent.com/radius-project/radius/main/grafana/radius-resource-provider-dashboard.json) template shows Radius Resource Provider status, including runtime, server-side, and operations health: -1st screenshot of the Radius Resource Provider Dashboard
+{{< image src="radius-resource-provider-1.png" alt="1st screenshot of the Radius Resource Provider Dashboard" width=1200 >}}
-2nd screenshot of the Radius Resource Provider Dashboard
+{{< image src="radius-resource-provider-2.png" alt="2nd screenshot of the Radius Resource Provider Dashboard" width=1200 >}}
## Setup on Kubernetes diff --git a/docs/content/guides/operations/control-plane/traces/jaeger/index.md b/docs/content/guides/operations/control-plane/traces/jaeger/index.md index 895d982f1..68329e2c3 100644 --- a/docs/content/guides/operations/control-plane/traces/jaeger/index.md +++ b/docs/content/guides/operations/control-plane/traces/jaeger/index.md @@ -60,7 +60,7 @@ The following steps show you how to configure the Radius control plane to send d 2. In your browser, go to [http://localhost:16686](http://localhost:16686) to see the Jaeger UI: - + {{< image src="jaeger_ui.png" alt="" style="width:100%" >}} ## References diff --git a/docs/content/guides/operations/control-plane/traces/zipkin/index.md b/docs/content/guides/operations/control-plane/traces/zipkin/index.md index df99eba3c..498b2543b 100644 --- a/docs/content/guides/operations/control-plane/traces/zipkin/index.md +++ b/docs/content/guides/operations/control-plane/traces/zipkin/index.md @@ -54,7 +54,7 @@ The following steps show you how to configure the [Radius control plane]({{< ref 2. In your browser, go to [http://localhost:9411](http://localhost:9411) to see the Zipkin UI and run a query: - + {{< image src="zipkin_ui.png" alt="" style="width:100%" >}} 3. Done! You can now use the Zipkin UI to view tracing data for your Radius control plane. diff --git a/docs/content/guides/operations/groups/overview/index.md b/docs/content/guides/operations/groups/overview/index.md index b7d182fee..65735be2f 100644 --- a/docs/content/guides/operations/groups/overview/index.md +++ b/docs/content/guides/operations/groups/overview/index.md @@ -8,7 +8,7 @@ weight: 100 Resource groups are collections of resources that you can manage as a single unit. You can use resource groups to organize your resources when deploying Radius Applications. -Diagram showing Radius resources inside of a Radius resource group +{{< image src="group-diagram.png" alt="Diagram showing Radius resources inside of a Radius resource group" width=600px >}} {{% alert title="Radius vs. Azure Resource Groups" color="primary" %}} Note that resource groups in Radius are not the same as [Azure resource groups](https://learn.microsoft.com/azure/azure-resource-manager/management/manage-resource-groups-portal). Azure resource groups are used to organize Azure resources, while Radius resource groups are used to organize Radius resources, such as applications, environments, portable resources, and routes. When you deploy a template that contains both, Radius resources route to the Radius resource group defined in your workspace, and Azure resources route to the Azure resource group defined in your [cloud provider]({{< ref providers >}}). diff --git a/docs/content/guides/operations/kubernetes/overview/index.md b/docs/content/guides/operations/kubernetes/overview/index.md index 9174dcd95..91c584b3d 100644 --- a/docs/content/guides/operations/kubernetes/overview/index.md +++ b/docs/content/guides/operations/kubernetes/overview/index.md @@ -10,7 +10,7 @@ tags: ["Kubernetes"] Radius offers a Kubernetes-based platform for hosting the [Radius control plane]({{< ref "/guides/operations/control-plane" >}}) and [Radius Environments]({{< ref "/guides/deploy-apps/environments/overview" >}}). -Diagram showing Radius resources being mapped to Kubernetes objects +{{< image src="kubernetes-mapping.png" alt="Diagram showing Radius resources being mapped to Kubernetes objects" width=600px >}} ## Supported Kubernetes versions diff --git a/docs/content/guides/operations/providers/overview/index.md b/docs/content/guides/operations/providers/overview/index.md index 5bd4cb25c..db27875e2 100644 --- a/docs/content/guides/operations/providers/overview/index.md +++ b/docs/content/guides/operations/providers/overview/index.md @@ -10,7 +10,7 @@ tags: ["AWS","Azure"] Radius cloud providers allow you to deploy and connect to cloud resources across various cloud platforms. For example, you can use the Radius Azure provider to run your application's services in your Kubernetes cluster, while deploying Azure resources to a specified Azure subscription and resource group. -Diagram of cloud resources getting forwarded to cloud platforms upon deployment +{{< image src="providers-overview.png" alt="Diagram of cloud resources getting forwarded to cloud platforms upon deployment" width="800px" >}} ## Supported cloud providers diff --git a/docs/content/guides/operations/workspaces/overview/index.md b/docs/content/guides/operations/workspaces/overview/index.md index 83e1cc75f..5400e10a3 100644 --- a/docs/content/guides/operations/workspaces/overview/index.md +++ b/docs/content/guides/operations/workspaces/overview/index.md @@ -9,7 +9,7 @@ categories: "Overview" Workspaces allow you to manage multiple Radius platforms and environments using a local configuration file. You can easily define and switch between workspaces to deploy and manage applications across separate environments. -Diagram showing a Radius configuration file mapping workspaces to Kubernetes clusters +{{< image src=workspaces.png alt="Diagram showing a Radius configuration file mapping workspaces to Kubernetes clusters" width=800px >}} ## CLI commands diff --git a/docs/content/guides/recipes/overview/index.md b/docs/content/guides/recipes/overview/index.md index b6928ae51..14f7e1b02 100644 --- a/docs/content/guides/recipes/overview/index.md +++ b/docs/content/guides/recipes/overview/index.md @@ -10,7 +10,7 @@ tags: ["recipes"] Recipes enable a **separation of concerns** between infrastructure operators and developers by **automating infrastructure deployment**. Developers select the resource they want in their app (_Mongo Database, Redis Cache, Dapr State Store, etc._), and infrastructure operators codify in their environment how these resources should be deployed and configured (_lightweight containers, Azure resources, AWS resources, etc._). When a developer deploys their application and its resources, Recipes automatically deploy the backing infrastructure and bind it to the developer's resources. -Diagram showing developers adding Redis to their app and operators adding a Recipe that Redis should deploy an Azure Cache for Redis +{{< image src="recipes.png" alt="Diagram showing developers adding Redis to their app and operators adding a Recipe that Redis should deploy an Azure Cache for Redis" width=700px >}} ## Capabilities diff --git a/docs/content/guides/tooling/vscode/overview/index.md b/docs/content/guides/tooling/vscode/overview/index.md index 503601b29..d30af41b8 100644 --- a/docs/content/guides/tooling/vscode/overview/index.md +++ b/docs/content/guides/tooling/vscode/overview/index.md @@ -14,7 +14,7 @@ When using Visual Studio Code with Radius there are a set of extensions you can The Radius Bicep extension provides formatting, intellisense, and validation for Bicep templates. -Screenshot of the Radius Bicep extension showing available Radius resource types +{{< image src="vscode-bicep.png" alt="Screenshot of the Radius Bicep extension showing available Radius resource types" width=600px >}}

{{< button text="Radius Bicep guide" page="howto-vscode-bicep" >}} diff --git a/docs/content/installation/index.md b/docs/content/installation/index.md index 0b7caeac7..c5a23fa3f 100644 --- a/docs/content/installation/index.md +++ b/docs/content/installation/index.md @@ -8,7 +8,7 @@ weight: 25 Radius consists of a set of tools and services that together form the Radius platform. -Diagram showing rad CLI and VSCode extension on local machine plus the Radius control plane on a Kubernetes cluster +{{< image src="radius.png" alt="Diagram showing rad CLI and VSCode extension on local machine plus the Radius control plane on a Kubernetes cluster" width="600px" >}} ## Step 1: Install the rad CLI diff --git a/docs/content/tutorials/eshop/_index.md b/docs/content/tutorials/eshop/_index.md index a6c3073d0..8d62f42d1 100644 --- a/docs/content/tutorials/eshop/_index.md +++ b/docs/content/tutorials/eshop/_index.md @@ -18,7 +18,7 @@ The [eShop on Containers](https://github.com/dotnet-architecture/eShopOnContaine ### Architecture -Architecture diagram of eShop on containers
+{{< image src="architecture.png" alt="Architecture diagram of eShop on containers" width=900 >}}
eShop on Containers uses a microservice oriented architecture implementation with multiple autonomous microservices (each one owning its own data/db) and implementing different approaches within each microservice (simple CRUD vs. DDD/CQRS patterns). The application uses HTTP as the communication protocol between the client apps and the microservices and supports asynchronous communication for data updates propagation across multiple services based on Integration Events and an Event Bus. diff --git a/docs/content/tutorials/new-app/index.md b/docs/content/tutorials/new-app/index.md index 3b32e858f..3885d0ccd 100644 --- a/docs/content/tutorials/new-app/index.md +++ b/docs/content/tutorials/new-app/index.md @@ -17,7 +17,7 @@ This tutorial will teach you the basics of creating a new Radius Application. Yo By the end of the tutorial, you will have created and deployed a new Radius Application. -Diagram of the application resources and their connections +{{< image src="diagram.png" alt="Diagram of the application resources and their connections" width=600px >}} ## Prerequisites @@ -191,7 +191,7 @@ demo-bb9df8798-b68rc demo [port-forward] connected from localhost:3000 -> ::3000 Open [http://localhost:3000](http://localhost:3000) to view the Radius demo container: -Screenshot of the Radius demo container +{{< image src="demo-landing.png" alt="Screenshot of the Radius demo container" width=500px >}} When you're done press `CTRL + c` to terminate the port-forward and log stream. @@ -260,7 +260,7 @@ In addition to containers, you can add dependencies like Redis caches, Dapr Stat 1. Open [localhost:3000](http://localhost:3000) to interact with the frontend container. You should see the container's connections and metadata, this time with a connection to the Mongo database and new environment variables set: - Screenshot of the Radius demo container + {{< image src="demo-landing-connection.png" alt="Screenshot of the Radius demo container" width=500px >}} 1. Press CTRL+C to terminate the port-forward and log stream. @@ -331,7 +331,7 @@ In addition to dependencies, you can add more containers to make your applicatio 1. Open [localhost:3000](http://localhost:3000) to interact with the frontend container. You should see the container's connections and metadata, this time with a connection to the backend container and new environment variables set: - Screenshot of the demo container with a connection to the backend container + {{< image src="demo-landing-backend.png" alt="Screenshot of the demo container with a connection to the backend container" width=600px >}} Note the environment variables that are set with connection information for the backend container. diff --git a/docs/content/tutorials/new-app/snippets/1-app.bicep b/docs/content/tutorials/new-app/snippets/1-app.bicep index 83a7af2b4..9e98f38fe 100644 --- a/docs/content/tutorials/new-app/snippets/1-app.bicep +++ b/docs/content/tutorials/new-app/snippets/1-app.bicep @@ -9,7 +9,7 @@ resource demo 'Applications.Core/containers@2023-10-01-preview' = { properties: { application: application container: { - image: 'radius.azurecr.io/tutorial/webapp:edge' + image: 'radius.azurecr.io/tutorial/demo:edge' ports: { web: { containerPort: 3000 diff --git a/docs/content/tutorials/tutorial-dapr/index.md b/docs/content/tutorials/tutorial-dapr/index.md index 75c7222c5..de6f08801 100644 --- a/docs/content/tutorials/tutorial-dapr/index.md +++ b/docs/content/tutorials/tutorial-dapr/index.md @@ -98,7 +98,7 @@ Add a `frontend` [container]({{< ref "guides/author-apps/containers" >}}) which In your browser, navigate to the endpoint (e.g. [http://localhost:8080](http://localhost:8080)) to view and interact with your application: - Screenshot of frontend application + {{< image src="frontend.png" alt="Screenshot of frontend application" width=500 >}} ## Cleanup diff --git a/docs/content/tutorials/tutorial-recipe/index.md b/docs/content/tutorials/tutorial-recipe/index.md index 56352853b..c4c3b202a 100644 --- a/docs/content/tutorials/tutorial-recipe/index.md +++ b/docs/content/tutorials/tutorial-recipe/index.md @@ -24,7 +24,7 @@ This tutorial will teach you the following about Recipes This application is a simple to-do list which stores and visualizes to-do items. It consists of a frontend [container]({{< ref "guides/author-apps/containers" >}}) and a backend [Redis Cache]({{< ref redis >}}). -Screenshot of the todoapp with Kubernetes, Azure and AWS Redis Cache options +{{< image src="recipe-tutorial-diagram.png" alt="Screenshot of the todoapp with Kubernetes, Azure and AWS Redis Cache options" style="width:500px" >}} {{< alert title="💡 Portable resources" color="info" >}} Developers don't need to specify what cloud resources they're using in their application. Instead, they choose the portable Redis API which can be provided by any cloud provider (or a Docker container). When deployed, a Recipe will select what infrastructure to deploy and run. @@ -140,7 +140,7 @@ Note that no Recipe name is specified with 'db', so it will be using the default You can now see both the environment variables of your container under Radius Connections as well as interact with the `Todo App` and add/remove items in it as wanted: - screenshot of the todo application + {{< image src="todoapp.png" width="700px" alt="screenshot of the todo application" >}} ## Step 4: Use Azure/AWS recipes in your application @@ -217,7 +217,7 @@ This step requires an Azure subscription or an AWS account to deploy cloud resou You can now see environment variables of your container under Radius Connections updated with the details of the Azure Cache for Redis and the Todo app now uses the Azure cache for Redis as the data store - screenshot of the todo application + {{< image src="todoapp.png" width="700px" alt="screenshot of the todo application" >}} {{% /codetab %}} @@ -284,7 +284,7 @@ This step requires an Azure subscription or an AWS account to deploy cloud resou You can now see environment variables of your container under Radius Connections updated with the details of the Amazon Memory Db for Redis and the Todo app now uses the Amazon Memory Db for Redis as the data store - screenshot of the todo application + {{< image src="todoapp.png" width="700px" alt="screenshot of the todo application" >}} {{% /codetab %}}