Add CanvasCreator embeds for canvas documentation

src/components/CanvasCreator.astro

@@ -1,4 +1,6 @@
 ---
+import initCanvasCreator from '../scripts/init-canvascreator.js?url';
+
 interface Props {
   canvasId: string;
 }
@@ -7,7 +9,9 @@ const { canvasId } = Astro.props as Props;
 ---
 
 <div id={canvasId}></div>
-<script define:vars={{ canvasId }} type="module" client:load>
-  import canvascreator from 'canvascreator';
-  canvascreator.initialize({ canvasId });
-</script>
+<script
+  type="module"
+  src={initCanvasCreator}
+  data-canvas-id={canvasId}
+  client:load
+></script>

src/content/docs/resources/api-business-model-canvas.mdx

@@ -0,0 +1,46 @@
+---
+title: API Business Model Canvas
+slug: resources/api-business-model-canvas
+sidebar:
+  order: 3
+icon: dashboard-outline
+category: canvas
+canvasId: apiBusinessModelCanvas
+image: /assets/resource/Canvas_apiBusinessModelCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Strategically assess API business viability by mapping value propositions, consumer segments, and key resources.
+
+## Outcomes
+
+- Clear business strategy for APIs
+
+## How it works
+
+![API Business Model Canvas](../../../assets/resource/Canvas_apiBusinessModelCanvas.svg)
+
+[SVG](../../../assets/resource/Canvas_apiBusinessModelCanvas.svg) | [PNG](../../../assets/resource/Canvas_apiBusinessModelCanvas.png) | [JSON](../../../assets/resource/Canvas_apiBusinessModelCanvas.json)
+
+### Steps
+
+1. Summarize the API's value proposition
+2. Define consumer segments
+3. Identify developer relations strategies
+4. Map distribution channels
+5. document key resources and activities
+6. Identify key partners and stakeholders
+7. Highlight benefits and costs
+
+<Aside type="tip">
+
+- Start with a single API to ensure clarity
+- Use metrics like cost vs. benefit to prioritize opportunities
+- Validate outputs with key stakeholders
+</Aside>
+
+
+
+<CanvasCreator canvasId="apiBusinessModelCanvas" />

src/content/docs/resources/api-value-proposition-canvas.mdx

@@ -0,0 +1,43 @@
+---
+title: API Value Proposition Canvas
+slug: resources/api-value-proposition-canvas
+sidebar:
+  order: 2
+icon: dashboard-outline
+category: canvas
+canvasId: apiValuePropositionCanvas
+image: /assets/resource/Canvas_apiValuePropositionCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Align API features with user needs by mapping tasks, pains, and gains to API products.
+
+## Outcomes
+
+- Focused feature development
+
+## How it works
+
+![API Value Proposition Canvas](../../../assets/resource/Canvas_apiValuePropositionCanvas.svg)
+
+[SVG](../../../assets/resource/Canvas_apiValuePropositionCanvas.svg) | [PNG](../../../assets/resource/Canvas_apiValuePropositionCanvas.png) | [JSON](../../../assets/resource/Canvas_apiValuePropositionCanvas.json)
+
+### Steps
+
+1. List user journey tasks
+2. Identify features delivering expected gains
+3. Define features addressing challenges
+4. Map features to API products
+
+<Aside type="tip">
+
+- Use input from the Customer Journey Canvas
+- Highlight features that relieve pains or enhance gains
+- Validate features with API consumers to ensure alignment
+</Aside>
+
+
+
+<CanvasCreator canvasId="apiValuePropositionCanvas" />

src/content/docs/resources/business-impact-canvas.mdx

@@ -0,0 +1,45 @@
+---
+title: Business Impact Canvas
+slug: resources/business-impact-canvas
+sidebar:
+  order: 4
+icon: dashboard-outline
+category: canvas
+canvasId: businessImpactCanvas
+image: /assets/resource/Canvas_businessImpactCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Design a scalable and secure API platform architecture that meets business and technical requirements.
+
+## Outcomes
+
+- Scalable API infrastructure
+
+## How it works
+
+![Business Impact Canvas](../../../assets/resource/Canvas_businessImpactCanvas.svg)
+
+[SVG](../../../assets/resource/Canvas_businessImpactCanvas.svg) | [PNG](../../../assets/resource/Canvas_businessImpactCanvas.png) | [JSON](../../../assets/resource/Canvas_businessImpactCanvas.json)
+
+### Steps
+
+1. Availability Risks: Identify risks and impacts.
+2. Ways to Mitigate Availability Risks: Define mitigation measures.
+3. Security Risks: Document security-related risks.
+4. Ways to Mitigate Security Risks: Propose strategies to mitigate security risks.
+5. Data Risks: Identify risks to data accuracy or availability.
+6. Ways to Mitigate Data Risks: Plan strategies to address data risks.
+
+<Aside type="tip">
+
+- Involve architects and developers in the design process
+- Use past incidents to identify potential risks
+- Prioritize critical APIs with the highest business impact
+</Aside>
+
+
+
+<CanvasCreator canvasId="businessImpactCanvas" />

src/content/docs/resources/capacity-canvas.mdx

@@ -0,0 +1,44 @@
+---
+title: Capacity Canvas
+slug: resources/capacity-canvas
+sidebar:
+  order: 7
+icon: dashboard-outline
+category: canvas
+canvasId: capacityCanvas
+image: /assets/resource/Canvas_capacityCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Plan API capacity to meet current and future business demands, ensuring scalability and performance.
+
+## Outcomes
+
+- Aligned API capacity with business volumes
+
+## How it works
+
+![Capacity Canvas](../../../assets/resource/Canvas_capacityCanvas.svg)
+
+[SVG](../../../assets/resource/Canvas_capacityCanvas.svg) | [PNG](../../../assets/resource/Canvas_capacityCanvas.png) | [JSON](../../../assets/resource/Canvas_capacityCanvas.json)
+
+### Steps
+
+1. Document current business volumes
+2. Forecast future consumption trends
+3. Plan for peak load and availability requirements
+4. Define caching and rate-limiting strategies
+5. Propose scaling strategies
+
+<Aside type="tip">
+
+- Use analytics to forecast growth trends
+- Define peak usage scenarios
+- Include scalability testing in the planning phase
+</Aside>
+
+
+
+<CanvasCreator canvasId="capacityCanvas" />

src/content/docs/resources/customer-journey-canvas.mdx

@@ -0,0 +1,46 @@
+---
+title: Customer Journey Canvas
+slug: resources/customer-journey-canvas
+sidebar:
+  order: 1
+icon: dashboard-outline
+category: canvas
+canvasId: customerJourneyCanvas
+image: /assets/resource/Canvas_customerJourneyCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Map customer journeys to identify needs and pain points, enhancing API design and user experience.
+
+## Outcomes
+
+- Improved customer understanding
+
+## How it works
+
+![Customer Journey Canvas](../../../assets/resource/Canvas_customerJourneyCanvas.svg)
+
+[SVG](../../../assets/resource/Canvas_customerJourneyCanvas.svg) | [PNG](../../../assets/resource/Canvas_customerJourneyCanvas.png) | [JSON](../../../assets/resource/Canvas_customerJourneyCanvas.json)
+
+### Steps
+
+1. Define customer persona
+2. Identify triggers for the journey
+3. Describe the journey's end
+4. Map journey steps with inputs/outputs
+5. Identify customer pains
+6. Summarize customer gains
+7. Define necessary inputs and resulting outputs
+8. Define API interactions for each step
+
+<Aside type="tip">
+
+- Iterate with team input to refine steps
+- Use outputs from this canvas to inform other canvases like the API Value Proposition Canvas
+</Aside>
+
+
+
+<CanvasCreator canvasId="customerJourneyCanvas" />

src/content/docs/resources/domain-canvas.mdx

@@ -0,0 +1,39 @@
+---
+title: Domain Canvas
+slug: resources/domain-canvas
+sidebar:
+  order: 152
+icon: dashboard-outline
+category: canvas
+canvasId: domainCanvas
+image: /assets/resource/Canvas_domainCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+A modeling tool to define and communicate the key entities and relationships in your domain, ensuring semantic consistency across APIs.
+
+## Outcomes
+
+- Better understanding of domain canvas principles
+
+## How it works
+
+![Domain Canvas](../../../assets/resource/Canvas_domainCanvas.svg)
+
+[SVG](../../../assets/resource/Canvas_domainCanvas.svg) | [PNG](../../../assets/resource/Canvas_domainCanvas.png) | [JSON](../../../assets/resource/Canvas_domainCanvas.json)
+
+### Steps
+
+1. Define core entities, their attributes, and relationships to create a shared conceptual understanding across APIs.
+
+<Aside type="tip">
+
+- Customize the Domain Canvas for your domain
+- Use it collaboratively across business and tech roles
+</Aside>
+
+
+
+<CanvasCreator canvasId="domainCanvas" />

src/content/docs/resources/event-canvas.mdx

@@ -0,0 +1,43 @@
+---
+title: Event Canvas
+slug: resources/event-canvas
+sidebar:
+  order: 12
+icon: dashboard-outline
+category: canvas
+canvasId: eventCanvas
+image: /assets/resource/Canvas_eventCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Design event-driven APIs by defining events, triggers, and processing logic.
+
+## Outcomes
+
+- Defined event-driven architecture
+
+## How it works
+
+![Event Canvas](../../../assets/resource/Canvas_eventCanvas.svg)
+
+[SVG](../../../assets/resource/Canvas_eventCanvas.svg) | [PNG](../../../assets/resource/Canvas_eventCanvas.png) | [JSON](../../../assets/resource/Canvas_eventCanvas.json)
+
+### Steps
+
+1. Identify key events in the system
+2. Define triggers for each event
+3. Describe backend processing logic for events
+4. Specify resulting outputs or acknowledgments
+
+<Aside type="tip">
+
+- Use event schemas to standardize event formats
+- document event flows and dependencies
+- Validate event processing with test cases
+</Aside>
+
+
+
+<CanvasCreator canvasId="eventCanvas" />

src/content/docs/resources/graphql-canvas.mdx

@@ -0,0 +1,47 @@
+---
+title: GraphQL Canvas
+slug: resources/graphql-canvas
+sidebar:
+  order: 11
+icon: dashboard-outline
+category: canvas
+canvasId: graphqlCanvas
+image: /assets/resource/Canvas_graphqlCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Design GraphQL APIs by defining types, queries, mutations, and subscriptions.
+
+## Outcomes
+
+- Structured GraphQL API design
+
+## How it works
+
+![GraphQL Canvas](../../../assets/resource/Canvas_graphqlCanvas.svg)
+
+[SVG](../../../assets/resource/Canvas_graphqlCanvas.svg) | [PNG](../../../assets/resource/Canvas_graphqlCanvas.png) | [JSON](../../../assets/resource/Canvas_graphqlCanvas.json)
+
+### Steps
+
+1. What problems are API consumers trying to solve? What data do they need?
+2. Define GraphQL types and their attributes: What are the core types exposed (e.g., User, Order, Product)?
+3. Map relationships between types: How do types relate to each other in nested queries?
+4. Specify queries for data retrieval
+5. Define mutations for data modification: What operations will modify data (e.g., create, update, delete)?
+6. Outline subscriptions for real-time updates
+7. Define authentication and authorization: Who can access which fields or types?
+8. Consider if there are any pagination, filtering, or rate-limiting constraints
+
+<Aside type="tip">
+
+- Use introspection to validate type definitions
+- document example queries and mutations
+- Ensure type names are descriptive and consistent
+</Aside>
+
+
+
+<CanvasCreator canvasId="graphqlCanvas" />