fix: replace build-time OG generation with docs-og microservice

Author: Vanshika-Rana

apps/docs/content/quickstart/quickstart-going-further.mdx

@@ -1,17 +1,18 @@
 ---
-title: Make it yours
+title: Deploy Your First App
 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
+sidebar_label: Deploy Your First App
+slug: /quickstart/deploy-your-first-app
+
 custom_edit_url: null
 ---
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-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.
+You've got a live app running on Zerops. Now let's make it actually yours.
+
+This page walks you through deploying the feedback app we showed you at the top of the quickstart - a Node.js app with a PostgreSQL database, auto-deploy on every git push, and a wall of everyone who's made it through. If you'd rather skip straight to your own code, there's a note at the bottom for that.
 
 ### Deploy the feedback app
 
@@ -443,7 +444,7 @@ Variable names are derived from your database service hostname. If your db servi
 </Tabs>
 
 :::tip Debug locally with VPN
-Install zcli first (see [CLI reference](/references/cli)), then run `zcli vpn up [your-project-id]` and your laptop joins the project's private network. You can connect to `db:5432` directly from your local machine using TablePlus, psql, or any database client. Disable SSL when connecting over VPN, security is handled by the tunnel itself. If `db` doesn't resolve, try `db.zerops` instead.
+Install zcli first (see [CLI reference](/references/cli)), then run `zcli vpn up [your-project-id]` and your machine joins the project's private network. You can connect to `db:5432` directly from your local machine using TablePlus, psql, or any database client. You can disable SSL when connecting over VPN - the tunnel itself handles security either way. If `db` doesn't resolve, try `db.zerops` instead.
 :::
 
 ### What's next

apps/docs/content/quickstart/quickstart.mdx

@@ -99,9 +99,9 @@ When you're ready for production, point a custom domain at your app. Zerops hand
 Here's what's running:
 
 - A real app on production infrastructure
-- A managed PostgreSQL database with no setup, no connection strings, no SDK
+- A managed PostgreSQL database, ready to use
 - All services on a private network, secure by default
-- Full Linux containers you can SSH into and install anything on
+- Full Linux containers for your app — SSH in anytime, install anything
 
 None of the infrastructure needed manual configuration.
 
@@ -111,4 +111,6 @@ Jump into the [Zerops Discord](https://docs.zerops.io/discord). The community is
 
 ---
 
-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)
+Your app is live and the infrastructure is running.
+
+**Next up:** Swap the recipe for the feedback app we showed you, connect GitHub for auto-deploy, and add yourself to the wall. [Deploy your first app →](/quickstart/deploy-your-first-app)

apps/docs/docusaurus.config.js

@@ -31,7 +31,6 @@ 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,7 +17,6 @@
     "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": {
@@ -74,11 +73,9 @@
     "@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"
   },

apps/docs/scripts/generate-og.ts

@@ -27,13 +27,23 @@ module.exports = {
       className: 'homepage-sidebar-item',
     },
     {
-      type: 'doc',
-      id: 'quickstart/quickstart',
+      type: 'category',
       label: 'Quickstart',
+      link: {
+        type: 'doc',
+        id: 'quickstart/quickstart',
+      },
       customProps: {
         sidebar_icon: 'rocket-launch',
       },
       className: 'homepage-sidebar-item',
+      items: [
+        {
+          type: 'doc',
+          id: 'quickstart/quickstart-going-further',
+          label: 'Deploy Your First App',
+        },
+      ],
     },
     {
       type: 'html',

apps/docs/sidebars.js

@@ -0,0 +1,67 @@
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const {
+  sourceToRelativePath,
+  normalizePermalinkKey,
+  permalinkToDestRelative,
+  buildPermalinkToSourceMap,
+} = require('../index');
+
+test('sourceToRelativePath strips @site/content/ prefix', () => {
+  assert.equal(
+    sourceToRelativePath('@site/content/quickstart/quickstart-going-further.mdx'),
+    'quickstart/quickstart-going-further.mdx',
+  );
+});
+
+test('normalizePermalinkKey handles custom slug .md URLs', () => {
+  assert.equal(
+    normalizePermalinkKey('/quickstart/deploy-your-first-app.md'),
+    '/quickstart/deploy-your-first-app',
+  );
+  assert.equal(normalizePermalinkKey('/.md'), '/');
+  assert.equal(normalizePermalinkKey('/guides/backup/'), '/guides/backup');
+});
+
+test('permalinkToDestRelative maps homepage and nested paths', () => {
+  assert.equal(permalinkToDestRelative('/'), '.md');
+  assert.equal(
+    permalinkToDestRelative('/quickstart/deploy-your-first-app'),
+    'quickstart/deploy-your-first-app.md',
+  );
+});
+
+test('buildPermalinkToSourceMap uses doc permalink, not file path', () => {
+  const map = buildPermalinkToSourceMap(
+    {
+      'docusaurus-plugin-content-docs': {
+        default: {
+          loadedVersions: [
+            {
+              docs: [
+                {
+                  permalink: '/quickstart/deploy-your-first-app',
+                  source:
+                    '@site/content/quickstart/quickstart-going-further.mdx',
+                },
+                {
+                  permalink: '/quickstart/quickstart',
+                  source: '@site/content/quickstart/quickstart.mdx',
+                },
+              ],
+            },
+          ],
+        },
+      },
+    },
+    '/',
+  );
+
+  assert.equal(
+    map['/quickstart/deploy-your-first-app'],
+    'quickstart/quickstart-going-further.mdx',
+  );
+  assert.equal(map['/quickstart/quickstart'], 'quickstart/quickstart.mdx');
+});