add:auto-generated OG images

Author: Vanshika-Rana

apps/docs/content/quickstart.mdx …/quickstart/quickstart-going-further.mdxapps/docs/content/quickstart.mdx renamed to apps/docs/content/quickstart/quickstart-going-further.mdx apps/docs/content/quickstart.mdx renamed to apps/docs/content/quickstart/quickstart-going-further.mdx

@@ -1,118 +1,17 @@
 ---
-title: Quickstart
-description: Deploy a live app with a managed database and a public URL. Takes about 5 minutes.
-sidebar_label: Quickstart
-sidebar_position: 1
+title: Make it yours
+description: Swap the recipe for your own code, deploy the feedback app, and connect GitHub for auto-deploy.
+sidebar_label: Make it yours
+sidebar_class_name: hidden
+slug: /quickstart/quickstart-going-further
+unlisted: true
+custom_edit_url: null
 ---
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import Video from '@site/src/components/Video';
-import Image from '/src/components/Image';
 
-In the next 5 minutes, we'll go from zero to a live app: a managed database, a public URL, and auto-deploy on every git push, all set up for you.
-
-Here's what we're building together: a page with a button that says **"I followed the Zerops quickstart"**. Every developer who finishes this guide and clicks it gets added to the wall. It's a real app, Express backend, PostgreSQL database, static frontend, running entirely on **Zerops**.
-
-Curious what you'll end up with? Here it is, live: [app-25be-3000.prg1.zerops.app](https://app-25be-3000.prg1.zerops.app/)
-
-<Video
-  src="/vids/quickstart-app.webm"
-  type="video/webm"
-/>
-
-:::tip Before we start
-Sign up at [app.zerops.io](https://app.zerops.io). You get $15 in promo credits on signup, no credit card needed. Verify your account with a $10 payment and get an additional $50, bringing your total to $65 in credits. A simple app with a database costs roughly $3-5/month, so credits go a long way.
-:::
-
----
-
-## 1. Deploy the recipe
-
-Go to [app.zerops.io/recipes](https://app.zerops.io/recipes). No account needed, the recipes page works even when you're not logged in.
-
-For this guide, find and click **Node.js**. You'll see **Node.js Hello World**, a Node.js app with Express connected to a PostgreSQL database.
-
-Hit **Deploy nodejs-hello-world-small-prod**. If you're not signed in yet, Zerops creates your account and kicks off the deploy in the same step.
-
-<figure style={{ textAlign: 'center', margin: '1rem 0' }}>
-  <Image
-    lightImage="/img/screenshots/recipe-predeploy-breakdown.png"
-    alt="Recipe pre-deploy breakdown showing services, resource sizes and exact price"
-    style={{ width: '50%', maxWidth: '480px', height: 'auto' }}
-  />
-</figure>
-
-:::info What's a recipe?
-A recipe is a working app with infrastructure already configured: managed database, environment variables, `zerops.yaml`, everything connected. It's a correct starting point, not a finished product.
-:::
-
----
-
-## 2. Watch it build
-
-After hitting Deploy, you'll land on the dashboard. On the right side you'll see a pipeline already running.
-
-It goes through these steps in real time:
-
-1. Initializing build container
-2. Running build commands from `zerops.yaml`
-3. Creating app version and upgrading service
-4. Done
-
-![Pipeline running on the dashboard](/img/screenshots/pipeline-running-dashboard.png)
-
-:::tip Good to know
-The build container is **temporary and free**. Zerops spins it up, runs your build, saves the output, and deletes it. You're only billed for the running app.
-:::
-
-Once the pipeline finishes, your app is live.
-
----
-
-## 3. See what got created
-
-Click into your new project. You'll see:
-
-- **app**: your Node.js service, already running
-- **db**: a managed PostgreSQL database, already running
-- **Project core**: load balancer, firewall, logger, all managed by Zerops
-
-All of these are already talking to each other on a private network. Nothing to configure.
-![Project dashboard showing the app and db services running side by side](/img/screenshots/project-services-overview.png)
-
----
-
-## 4. Open your live app
-
-The Zerops subdomain is already enabled when you deploy from a recipe. Click into your **app** service and open the URL.
-
-The default recipe app will be there.
-
-When you're ready for production, point a custom domain at your app. Zerops handles the SSL certificate automatically.
-
----
-
-## You're live 🎉
-
-Here's what's running:
-
-- A real app on production infrastructure
-- A managed PostgreSQL database with no setup, no connection strings, no SDK
-- All services on a private network, secure by default
-- Full Linux containers you can SSH into and install anything on
-
-None of the infrastructure needed manual configuration.
-
-:::note Stuck?
-Jump into the [Zerops Discord](https://docs.zerops.io/discord). The community is active and the team is there.
-:::
-
----
-
-## Going further: make it yours
-
-The guided part ends here. Everything below is for when you're ready to swap this recipe for your own code, the feedback app we showed you at the top, or whatever you're building.
+The guided part ends here. Everything below is for when you're ready to swap this recipe for your own code, the feedback app we showed you in the quickstart, or whatever you're building.
 
 ### Deploy the feedback app
 
@@ -403,8 +302,6 @@ export default app;
         avatarsEl.appendChild(av);
 
         if (animate) {
-          // Force a reflow so the browser registers the initial (hidden) state
-          // before we add the class that triggers the transition.
           void av.offsetWidth;
           requestAnimationFrame(() => {
             av.classList.add('visible');
@@ -508,9 +405,7 @@ You can also trigger deploys manually with the Zerops CLI: `zcli push`.
 
 ### Add yourself to the list
 
-Followed this tutorial and deployed your app?
-
-Open our live app URL and click **"I followed the Zerops quickstart"**. You'll show up alongside everyone else who's made it through.
+Deployed the feedback app? Open your live app URL and click **"I followed the Zerops quickstart"**. You'll show up alongside everyone else who's made it through.
 
 Check out everyone who's already made it: [app-25be-3000.prg1.zerops.app](https://app-25be-3000.prg1.zerops.app/)
 
@@ -558,3 +453,7 @@ Install zcli first (see [CLI reference](/references/cli)), then run `zcli vpn up
 - **[Autoscaling](/features/scaling)**: set min and max CPU and RAM, Zerops scales within that range automatically
 - **[Add more services](/features/infrastructure)**: queues, search engines, object storage, just add them to your project
 - **[Try ZCP](/zcp/quickstart)**: Zerops' AI agent that can deploy, debug, and operate your project
+
+:::note Stuck?
+Jump into the [Zerops Discord](https://docs.zerops.io/discord). The community is active and the team is there.
+:::

apps/docs/content/quickstart/quickstart.mdx

@@ -0,0 +1,114 @@
+---
+title: Quickstart
+description: Deploy a live app with a managed database and a public URL. Takes about 5 minutes.
+sidebar_label: Quickstart
+sidebar_position: 1
+custom_edit_url: null
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import Video from '@site/src/components/Video';
+import Image from '/src/components/Image';
+
+In the next 5 minutes, we'll go from zero to a live app: a managed database, a public URL, and auto-deploy on every git push, all set up for you.
+
+Here's what we're building together: a page with a button that says **"I followed the Zerops quickstart"**. Every developer who finishes this guide and clicks it gets added to the wall. It's a real app, Express backend, PostgreSQL database, static frontend, running entirely on **Zerops**.
+
+Curious what you'll end up with? Here it is, live: [app-25be-3000.prg1.zerops.app](https://app-25be-3000.prg1.zerops.app/)
+
+<Video
+  src="/vids/quickstart-app.webm"
+  type="video/webm"
+/>
+
+:::tip Before we start
+Sign up at [app.zerops.io](https://app.zerops.io). You get $15 in promo credits on signup, no credit card needed. Verify your account with a $10 payment and get an additional $50, bringing your total to $65 in credits. A simple app with a database costs roughly $3-5/month, so credits go a long way.
+:::
+
+---
+
+## 1. Deploy the recipe
+
+Go to [app.zerops.io/recipes](https://app.zerops.io/recipes). No account needed, the recipes page works even when you're not logged in.
+
+For this guide, find and click **Node.js**. You'll see **Node.js Hello World**, a Node.js app with Express connected to a PostgreSQL database.
+
+Hit **Deploy nodejs-hello-world-small-prod**. If you're not signed in yet, Zerops creates your account and kicks off the deploy in the same step.
+
+<figure style={{ textAlign: 'center', margin: '1rem 0' }}>
+  <Image
+    lightImage="/img/screenshots/recipe-predeploy-breakdown.png"
+    alt="Recipe pre-deploy breakdown showing services, resource sizes and exact price"
+    style={{ width: '50%', maxWidth: '480px', height: 'auto' }}
+  />
+</figure>
+
+:::info What's a recipe?
+A recipe is a working app with infrastructure already configured: managed database, environment variables, `zerops.yaml`, everything connected. It's a correct starting point, not a finished product.
+:::
+
+---
+
+## 2. Watch it build
+
+After hitting Deploy, you'll land on the dashboard. On the right side you'll see a pipeline already running.
+
+It goes through these steps in real time:
+
+1. Initializing build container
+2. Running build commands from `zerops.yaml`
+3. Creating app version and upgrading service
+4. Done
+
+![Pipeline running on the dashboard](/img/screenshots/pipeline-running-dashboard.png)
+
+:::tip Good to know
+The build container is **temporary and free**. Zerops spins it up, runs your build, saves the output, and deletes it. You're only billed for the running app.
+:::
+
+Once the pipeline finishes, your app is live.
+
+---
+
+## 3. See what got created
+
+Click into your new project. You'll see:
+
+- **app**: your Node.js service, already running
+- **db**: a managed PostgreSQL database, already running
+- **Project core**: load balancer, firewall, logger, all managed by Zerops
+
+All of these are already talking to each other on a private network. Nothing to configure.
+![Project dashboard showing the app and db services running side by side](/img/screenshots/project-services-overview.png)
+
+---
+
+## 4. Open your live app
+
+The Zerops subdomain is already enabled when you deploy from a recipe. Click into your **app** service and open the URL.
+
+The default recipe app will be there.
+
+When you're ready for production, point a custom domain at your app. Zerops handles the SSL certificate automatically.
+
+---
+
+## You're live 🎉
+
+Here's what's running:
+
+- A real app on production infrastructure
+- A managed PostgreSQL database with no setup, no connection strings, no SDK
+- All services on a private network, secure by default
+- Full Linux containers you can SSH into and install anything on
+
+None of the infrastructure needed manual configuration.
+
+:::note Stuck?
+Jump into the [Zerops Discord](https://docs.zerops.io/discord). The community is active and the team is there.
+:::
+
+---
+
+Ready to swap the recipe for your own code or deploy the feedback app we showed you at the top? [Make it yours →](/quickstart/quickstart-going-further)

apps/docs/docusaurus.config.js

@@ -31,6 +31,7 @@ const config = {
   ],
   plugins: [
     './src/plugins/markdown-source',
+    './src/plugins/og-images',
     require.resolve("docusaurus-plugin-image-zoom"),
     async function tailwindPlugin() {
       return {

apps/docs/package.json

@@ -17,6 +17,7 @@
     "lint": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
     "lint:content": "eslint --no-eslintrc -c .content.eslintrc.js content --fix",
     "diagram2code:generate": "docusaurus diagram2code:generate",
+    "generate:og": "tsx scripts/generate-og.ts",
     "test": "node --test src/plugins/markdown-source/__tests__/*.test.js"
   },
   "dependencies": {
@@ -40,13 +41,13 @@
     "eslint": "^8.49.0",
     "eslint-config-docs": "*",
     "file-loader": "^6.2.0",
+    "jspdf": "^2.5.2",
     "lodash": "^4.17.21",
     "mdast-util-mdx": "^3.0.0",
     "meilisearch-docsearch": "^0.6.0",
     "postcss": "^8.4.21",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.2.0",
-    "jspdf": "^2.5.2",
     "react-dom": "^18.2.0",
     "react-tooltip": "5.7.4",
     "react-transition-group": "^4.4.5",
@@ -73,13 +74,15 @@
     "@docusaurus/module-type-aliases": "3.4.0",
     "@docusaurus/tsconfig": "3.4.0",
     "@docusaurus/types": "3.4.0",
+    "@resvg/resvg-js": "^2.6.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-transition-group": "^4.4.6",
+    "satori": "^0.12.2",
     "swc-loader": "^0.2.3",
     "typescript": "~5.2.2"
   },
   "engines": {
     "node": ">=18.0"
   }
-}
+}