Draft pages

Created a wrapper function for getCollection which does not return any draft pages when in production. This allows us to incrementally migrate the legacy API reference

.github/workflows/deploy-dev.yml

@@ -26,7 +26,7 @@ jobs:
         with:
           node-version: 18
       - run: yarn install --frozen-lock-file
-      - run: ./build.sh http://centrapay-docs.dev.s3-website-ap-southeast-1.amazonaws.com
+      - run: ./build.sh http://centrapay-docs.dev.s3-website-ap-southeast-1.amazonaws.com development
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v2
         with:

build.sh

@@ -3,6 +3,7 @@
 set -euo pipefail
 
 url="${1:-}"
+mode="${2:-production}"
 
 cd legacy
 
@@ -12,9 +13,9 @@ bundle exec jekyll build
 cd ../
 
 if [[ -n "$url" ]]; then
-  yarn build --site "$url"
+  yarn build --mode "$mode" --site "$url"
 else
-  yarn build
+  yarn build --mode "$mode"
 fi
 
 rsync -a dist/* _site/

src/content/api/introduction.mdx

@@ -0,0 +1,9 @@
+---
+title: Introduction - Draft
+description: Draft Introduction
+nav:
+  path: API/Getting Started
+  order: 1
+---
+
+Setting `draft: true` in the front matter of the guide means this page will not be published in production. This allows us to incrementally migrate the legacy API reference. We will remove this once we migrate the first api reference page.

src/content/config.ts

@@ -5,6 +5,7 @@ const guidesCollection = defineCollection({
     title: z.string(),
     description: z.string(),
     img: z.string().optional(),
+    draft: z.boolean().optional().default(false),
     nav: z.object({
       title: z.string().optional(),
       path: z.string(),
@@ -16,4 +17,5 @@ const guidesCollection = defineCollection({
 export const collections = {
   'guides': guidesCollection,
   'connections': guidesCollection,
+  'api': guidesCollection
 };

src/content/guides/draft.mdx

@@ -0,0 +1,10 @@
+---
+title: Draft
+description: Draft guide that is not published in production
+draft: true
+nav:
+  path: Reference/Centrapay Experiences
+  order: 2
+---
+
+Setting `draft: true` in the front matter of the guide means this page will not be published in production. This allows us to incrementally migrate the legacy API reference.

src/layouts/BaseLayout.astro

@@ -4,7 +4,7 @@ import MessagesBubbleDouble from '../components/icons/MessagesBubbleDouble.vue';
 import Footer from '../components/Footer.vue';
 import '../assets/css/tailwind.css';
 import '@fontsource/inter';
-import { getCollection } from 'astro:content';
+import { getCollection } from '../utils/getCollection';
 import Navigation from '../navigation/Navigation';
 import sideNavConfig from '../navigation/sideNavConfig'
 
@@ -26,6 +26,7 @@ const metaTitle = title ? title + ' - Centrapay Docs' : 'Centrapay Docs';
 const content = await Promise.all([
   ...await getCollection('guides'),
   ...await getCollection('connections'),
+  ...await getCollection('api')
 ])
 const navigation = Navigation.create({ nav: sideNavConfig, content });
 ---

src/navigation/sideNavConfig.js

@@ -18,4 +18,12 @@ export default [
       { title: 'Farmlands' },
     ]
   },
+  import.meta.env.MODE === 'development' && {
+    title: 'API',
+    subTitle: 'For developers',
+    icon: 'Settings',
+    children: [
+      { title: 'Getting Started' },
+    ]
+  },
 ];

src/pages/api/[...slug].astro

@@ -0,0 +1,40 @@
+---
+import { getCollection } from '../../utils/getCollection';
+import Prose from '../../components/Prose.vue';
+import TocNav from '../../components/TocNav.vue';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import customComponents from '../../utils/customComponents';
+
+export async function getStaticPaths() {
+  const api = await getCollection('api');
+  return api.map(entry => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content, headings } = await entry.render();
+const { title, description } = entry.data;
+---
+<BaseLayout title={title} description={description}>
+  <div class="relative mx-auto desktop-gutters flex justify-center">
+    <div class="min-w-0 max-w-2xl flex-auto px-8 pb-16 pt-8 xl:pt-16 lg:max-w-none">
+      <article>
+        <header class="mb-9 space-y-1" >
+          <h1
+            class="font-display text-3xl tracking-tight text-slate-900"
+          >
+            { title }
+          </h1>
+        </header>
+        <Prose client:load>
+          <Content components={customComponents}/>
+        </Prose>
+      </article>
+    </div>
+    <div class="hidden xl:sticky border-none xl:top-[4.5rem] xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:py-16 xl:pr-6 overflow-y-auto">
+      <TocNav client:load headings={headings} />
+    </div>
+  </div>
+</BaseLayout>

src/pages/connections/[...slug].astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection } from '../../utils/getCollection';
 import customComponents from '../../utils/customComponents';
 
 export async function getStaticPaths() {

src/pages/guides/[...slug].astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection } from '../../utils/getCollection';
 import Prose from '../../components/Prose.vue';
 import TocNav from '../../components/TocNav.vue';
 import BaseLayout from '../../layouts/BaseLayout.astro';

src/pages/index.astro

@@ -2,7 +2,7 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 import FeaturedGuideCard from '../components/FeaturedGuideCard.astro';
 import FeaturedContentCard from '../components/FeaturedContentCard.astro';
-import { getCollection } from 'astro:content';
+import { getCollection } from '../utils/getCollection';
 import Prose from '../components/Prose.vue';
 
 export async function getStaticPaths() {

src/utils/getCollection.js

@@ -0,0 +1,7 @@
+import { getCollection as get } from 'astro:content';
+
+export async function getCollection(collection) {
+  return await get(collection, ({ data }) => {
+    return import.meta.env.MODE === 'production' ? data.draft !== true : true;
+  });
+}