render service markdown from page context

docs/gatsby-config.js

@@ -48,6 +48,13 @@ module.exports = {
         path: `${__dirname}/../jacdac-spec/dist/services.json`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `serviceSources`,
+        path: `${__dirname}/../jacdac-spec/dist/services-sources.json`,
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

docs/gatsby-node.js

@@ -9,16 +9,22 @@ const { IgnorePlugin } = require('webpack')
 async function createServicePages(graphql, actions, reporter) {
   const { createPage, createRedirect } = actions
   const result = await graphql(`
-{
-  allServicesJson {
-    nodes {
-      name
-      shortName
-      shortId
-      classIdentifier
+  {
+    allServicesJson {
+      nodes {
+        name
+        shortName
+        shortId
+        classIdentifier
+      }
+    }
+    allServicesSourcesJson {
+      nodes {
+        source
+        classIdentifier
+      }
     }
   }
-}
 `)
 
   if (result.errors) {
@@ -34,16 +40,21 @@ async function createServicePages(graphql, actions, reporter) {
   // Instagram post. Since the scraped Instagram data
   // already includes an ID field, we just use that for
   // each page's path.
-  result.data.allServicesJson.nodes.forEach(node => {
-    const p = `/services/${node.shortId}/`;
+  result.data.allServicesJson.nodes.map((node) => {
+    const { classIdentifier, shortId } = node;
+    const p = `/services/${shortId}/`;
     const pplay = `${p}playground/`
     const ptest = `${p}test/`
-    const r = `/services/0x${node.classIdentifier.toString(16)}`
+    const r = `/services/0x${classIdentifier.toString(16)}`
+
+    const source = result.data.allServicesSourcesJson.nodes.find(node => node.classIdentifier === classIdentifier).source
+
     createPage({
       path: p,
       component: slash(serviceTemplate),
       context: {
-        node
+        classIdentifier,
+        source,
       },
     })
     createPage({

docs/src/components/ServiceMarkdown.tsx

@@ -3,16 +3,20 @@ import Markdown from "./ui/Markdown";
 import ServiceSpecificationStatusAlert from "./ServiceSpecificationStatusAlert"
 import { Button, Link } from "gatsby-theme-material-ui";
 import DeviceSpecificationList from "./DeviceSpecificationList";
+import { serviceSpecificationFromClassIdentifier } from "../../../src/jdom/spec";
 
 export default function ServiceMarkdown(props: {
-    service: jdspec.ServiceSpec
+    classIdentifier: number,
+    source: string
 }) {
-    const { service: node } = props;
-    const { shortId, classIdentifier } = node;
+    const { classIdentifier, source } = props;
+    const service = serviceSpecificationFromClassIdentifier(classIdentifier)
+    const { shortId } = service;
+
 
     return <>
-        <ServiceSpecificationStatusAlert specification={node} />
-        <Markdown source={node.source} />
+        <ServiceSpecificationStatusAlert specification={service} />
+        <Markdown source={source} />
 
         <div>
             <Button variant="contained" to={`/services/${shortId}/playground/`}>Playground</Button>

docs/src/templates/service.mdx

@@ -1,5 +1,3 @@
-import { Link } from 'gatsby-theme-material-ui';
-import { serviceSpecificationFromClassIdentifier } from "../../../src/jdom/spec"
 import ServiceMarkdown from "../components/ServiceMarkdown"
 
-<ServiceMarkdown service={serviceSpecificationFromClassIdentifier(props.pageContext.node.classIdentifier)} />
+<ServiceMarkdown {...props.pageContext} />

jacdac-spec

@@ -1 +1 @@
-Subproject commit e6c1cc174ba1283ef14ebf0ff99d4609654763de
+Subproject commit cae9ac6b39cdaa2396ef25339da1a4b43f4e7d41