avoid homepage wall-of-text

jordanstephens · jordanstephens · commit 407d84d6ce0b · 2024-11-29T10:37:53.000-08:00
diff --git a/docs/intro.md b/docs/intro.md
diff --git a/docs/intro/_category_.json b/docs/intro/_category_.json
@@ -0,0 +1,5 @@
+{
+  "label": "Overview",
+  "position": 1,
+  "collapsible": true
+}
diff --git a/docs/intro/features.mdx b/docs/intro/features.mdx
@@ -0,0 +1,22 @@
+---
+sidebar_position: 200
+title: Features
+description: Defang Features
+---
+
+# Defang Features
+
+Defang provides a streamlined experience to develop, deploy, observe, and update your cloud applications. Defang includes the following features:
+
+- Support for [various types of applications](/docs/use-cases): Web services and APIs, mobile app backends, ML services, hosting LLMs, etc.
+- Support for your programming [language of choice](/docs/samples): Node.js, Python, Golang, or anything else you can package in a Dockerfile.
+- Built-in AI agent to go [from natural language prompt to an outline project](/docs/concepts/generate.md)
+- Built-in AI agent to help you [debug your cloud applications](/docs/concepts/debug.md)
+- Automated [Dockerfile builds](/docs/concepts/deployments.md)
+- Support for [pre-built Docker containers](/docs/tutorials/deploy-container-using-the-cli.mdx), from public or private image registries
+- Ability to express your project configuration using a [Docker Compose YAML](/docs/concepts/compose.md) file
+- Ability to manage [encrypted configuration values](/docs/concepts/configuration.md)
+- Pre-configured environments with built-in [security](/docs/concepts/security.md), [networking](/docs/concepts/networking.mdx), and [observability](/docs/concepts/observability.md)
+- [One-command deployments](/docs/getting-started/installing.md)
+- Support for [GPUs](/docs/concepts/resources.md)
+- Support for Infra-as-Code via the [Defang Pulumi provider](/docs/concepts/pulumi.md)
diff --git a/docs/intro/intro.mdx b/docs/intro/intro.mdx
@@ -0,0 +1,19 @@
+---
+sidebar_position: 100
+title: Overview
+description: Overview of Defang, a radically simpler way to develop, deploy, and debug production-ready cloud apps.
+---
+
+import IntroGrid from "../../src/components/IntroGrid"
+
+# &nbsp;
+
+<div style={{textAlign: "center"}}>
+    <img src="/img/defang-logo.svg" alt="Defang Logo" style={{width: "200px", marginBottom: "2rem"}} />
+    <h1>Defang Documentation</h1>
+    <p>
+        Defang is a radically simpler way for developers to develop, deploy, and debug their cloud applications. Defang enables you to easily author cloud applications in any language, build and deploy to the cloud with a single command, and iterate quickly with AI-assisted tooling.
+    </p>
+    <h2>Getting Started</h2>
+    <IntroGrid />
+</div>
diff --git a/docs/intro/use-cases.md b/docs/intro/use-cases.md
@@ -1,10 +1,10 @@
 ---
-sidebar_position: 400
+sidebar_position: 300
 title: Use Cases
-description: Use cases for Defang.
+description: Use cases for Defang
 ---
 
-# Use Cases
+# Defang Use Cases
 
 Defang can be used for a wide variety of use cases, generally in line with the [12 Factor architecture](https://12factor.net/). In this section we'll document some examples. At the end of this section we will also cover use cases that are not supported by Defang.
 
@@ -26,18 +26,18 @@ LLMs (Large Language Models) are a type of AI model that can be used for a wide
 
 # Anti-patterns
 
-While Defang is great for a wide variety of use cases, there are some use cases that are not a good fit for Defang. Generally, the use-cases that are Defang anti-patterns are the same as the ones that are [12 Factor](https://12factor.net/) anti-patterns. 
+While Defang is great for a wide variety of use cases, there are some use cases that are not a good fit for Defang. Generally, the use-cases that are Defang anti-patterns are the same as the ones that are [12 Factor](https://12factor.net/) anti-patterns.
 
 ## Stateful Services
 
 Some applications are designed to run in stateful environments. For example, a CMS like WordPress can be coerced to work in a stateless environment, but most of the tooling for it expects to have a long-lived filesystem and a database. Defang is not a good fit for these types of applications, because [containers are ephemeral and can be replaced at any time](https://12factor.net/processes).
 
 ## Data Stores
 
-Defang now offers support for stateful workloads through our [managed storage](./concepts/managed-storage) options, including [Postgres](./concepts/managed-storage/managed-postgres) and [Redis](./concepts/managed-storage/managed-redis) for data stores. However, we do not recommend using unsupported data stores with Defang, as this may lead to permanent data loss. 
+Defang now offers support for stateful workloads through our [managed storage](./concepts/managed-storage) options, including [Postgres](./concepts/managed-storage/managed-postgres) and [Redis](./concepts/managed-storage/managed-redis) for data stores. However, we do not recommend using unsupported data stores with Defang, as this may lead to permanent data loss.
 
-:::info 
-To better serve our users, we will be introducing additional managed storage options, such as [Object Storage](concepts/managed-storage/managed-object-storage), in the near future. 
+:::info
+To better serve our users, we will be introducing additional managed storage options, such as [Object Storage](concepts/managed-storage/managed-object-storage), in the near future.
 :::
 
 Please be aware that if you choose not to use a Defang-supported [managed storage](./concepts/managed-storage) option, there is a risk that any data stored in a container may be lost if the container is replaced.
diff --git a/docs/intro/what-is-defang.mdx b/docs/intro/what-is-defang.mdx
@@ -0,0 +1,17 @@
+---
+sidebar_position: 100
+title: What is Defang?
+description: What is Defang?
+---
+
+# What is Defang?
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/afglsBYieuc?si=iKgUX4ejz7AixxqQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style={{marginBottom: "2rem"}}></iframe>
+
+Defang is a radically simpler way for developers to develop, deploy, and debug their cloud applications. Defang enables you to easily author cloud application in any language, build and deploy to the cloud with a single command, and iterate quickly with AI-assisted tooling.
+
+- The [Defang CLI](/docs/getting-started/installing.md) includes an AI-driven agent that translates natural language prompts to an outline for your project that you can then refine.
+- Defang can automatically build and deploy your project with a single command.
+    - If you’re new to Defang, you can try deploying to the [Defang Playground](/docs/concepts/defang-playground.md), a hosted environment to learn to use Defang with non-production workloads.
+    - Once you’re ready, you can [deploy](/docs/concepts/deployments.md) it to your own cloud account - we call this [Defang BYOC](/docs/concepts/defang-byoc.md). Defang takes care of all the heavy lifting such as configuring networking, security, [observability](/docs/concepts/observability.md) and all the other details that usually slow down the average cloud developer.
+- You can also use Defang to easily [publish updates](/docs/concepts/deployments.md#deploying-updates) to your deployed application with zero downtime.
diff --git a/docs/tutorials/deploy-to-playground.mdx b/docs/tutorials/deploy-to-playground.mdx
@@ -0,0 +1,59 @@
+---
+title: Deploy to Playground
+description: Deploy to the Free Defang Playground
+sidebar_position: 15
+---
+
+# Deploy to the playground
+
+This tutorial will show you how to deploy your project to the Defang Playground.
+
+## Pre-requisites
+* [A Dockerfile in your project](https://docs.docker.com/get-started/docker-concepts/building-images/writing-a-dockerfile/)
+* [A `compose.yaml` file in your project](https://docs.docker.com/compose/gettingstarted/)
+* [A Defang Account](/docs/getting-started/authenticating)
+* [The Defang CLI](/docs/getting-started/installing)
+
+## Step 1 - Navigate to your project directory
+Head to the folder where your project is located.
+```bash
+$ cd path/to/your/project
+```
+
+## Step 2 - Deploy
+
+```
+$ defang up
+```
+
+If you have not used defang before, you'll be prompted to log in.
+
+```
+ ! Please log in to continue.
+Please visit http://127.0.0.1:49154 and log in. (Right click the URL or press ENTER to open browser)
+```
+
+:::info
+To learn more about how authentication works in defang, check out the [authenticating page](/docs/getting-started/authenticating).
+:::
+
+When you do this, you should see something similar to the output below:
+
+```
+ * Uploading build context for app
+ * Deploying service app
+ * Monitor your services' status in the defang portal
+   - https://portal.defang.dev/service/app
+ * Tailing logs for deployment ID o59k89vk3qc8 ; press Ctrl+C to detach:
+ * Press V to toggle verbose mode
+2024-09-19T10:50:53.572443-07:00 cd Update started for stack jordanstephens-prod1
+2024-09-19T10:51:05.536299-07:00 cd Update succeeded in 11.99769745s ; provisioning...
+2024-09-19T10:51:39.419693-07:00 app Server running at http://0.0.0.0:3000/
+ * Service app is in state DEPLOYMENT_COMPLETED and will be available at:
+   - https://jordanstephens-app--3000.prod1.defang.dev
+ * Done.
+```
+
+Now we can go to [https://portal.defang.dev/service/app](https://portal.defang.dev/service/app) to see our service listed in the defang portal.
+
+![screenshot of the defang portal](/img/getting-started-portal.png)
diff --git a/docs/tutorials/deploy-to-your-cloud.mdx b/docs/tutorials/deploy-to-your-cloud.mdx
@@ -1,5 +1,5 @@
 ---
-title: Deploy to your cloud
+title: Deploy to Your Cloud
 description: Defang allows you deploy to your own cloud account.
 sidebar_position: 10
 ---
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@docusaurus/core": "3.0.0",
     "@docusaurus/preset-classic": "3.0.0",
+    "@docusaurus/theme-common": "3.0.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mdx-js/react": "^3.0.0",
diff --git a/src/components/IntroGrid.tsx b/src/components/IntroGrid.tsx
@@ -0,0 +1,37 @@
+
+import DocCardList from "@docusaurus/theme-classic/lib/theme/DocCardList";
+import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+
+const items: PropSidebarItem[] = [
+    {
+      type: "link",
+      href: "/docs/intro/what-is-defang",
+      label: "Learn more about Defang",
+      description: "What is Defang and how does it work?",
+    },
+    {
+      type: "link",
+      href: "/docs/category/cli",
+      label: "CLI Reference",
+      description: "Use the defang CLI to deploy your app",
+    },
+    {
+      type: "link",
+      href: "/docs/tutorials/deploy-to-playground",
+      label: "Try Defang",
+      description: "Deploy to our free playground",
+    },
+    {
+      type: "link",
+      href: "/docs/tutorials/deploy-to-your-cloud",
+      label: "Deploy to your own cloud",
+      description: "When you're ready for production",
+    },
+]
+
+export default function() {
+
+  return (
+    <DocCardList items={items} />
+  );
+}
