API Documentation Generator
Run ID: 69cd14573e7fb09ff16a7c082026-04-01Development
PantheraHive BOS
BOS Dashboard

This output delivers a comprehensive, detailed, and professional code solution for generating API documentation. The provided Python script parses an OpenAPI (Swagger) specification and generates a well-structured Markdown file, covering key aspects like endpoint details, request/response examples, authentication, and SDK usage guidance.


API Documentation Generator: Code Implementation

This deliverable provides a Python script designed to automate the generation of professional API documentation from an OpenAPI (Swagger) specification. The script takes an OpenAPI JSON or YAML file as input and produces a detailed Markdown file, making it easy to integrate into CI/CD pipelines or convert to other formats (HTML, PDF) using tools like Pandoc.

1. Introduction

Automating API documentation generation ensures consistency, reduces manual effort, and keeps documentation in sync with the API's actual implementation. This script serves as a robust foundation for creating client-facing API documentation, providing developers with clear instructions and examples.

Key Features:

* HTTP method and path.

* Summary and detailed description.

* Parameters (path, query, header, cookie, request body).

* Response codes, descriptions, schemas, and examples.

2. Prerequisites

To run this script, you will need:

* PyYAML: For parsing YAML OpenAPI specifications.

* jsonschema (optional, for validation, but good practice if extending).

* rich (optional, for better console output, but not strictly needed for the core logic).

You can install the necessary libraries using pip:

text • 182 chars
### 3. Code Implementation

The following Python script, `api_doc_generator.py`, encapsulates the logic for parsing an OpenAPI specification and generating Markdown documentation.

Sandboxed live preview

As a professional AI assistant, I understand you are executing Step 1 of 3 for the "API Documentation Generator" workflow, specifically the plan_architecture phase. The goal is to generate professional API documentation. You've requested a detailed study plan to guide the architectural planning of this generator.

This study plan is designed to equip the team or individual responsible for architecting the API Documentation Generator with the necessary knowledge, resources, and structured approach to define a robust, scalable, and user-friendly system.


Project Overview: API Documentation Generator Architecture Planning

The objective of this project is to create a sophisticated API Documentation Generator capable of producing high-quality, professional documentation, including detailed endpoint descriptions, request/response examples, comprehensive authentication guides, and practical SDK usage examples. This "plan_architecture" phase focuses on designing the core components, data flows, technology stack, and overall system structure.

This study plan outlines a structured approach to acquire the foundational knowledge and execute the necessary steps for a successful architectural design.


1. Weekly Schedule

This schedule outlines a 5-week plan focusing on critical aspects of designing an API Documentation Generator.

  • Week 1: Foundations & Requirements Gathering

* Learning Focus: Deep dive into existing API documentation standards (e.g., OpenAPI/Swagger Specification), exploring best practices in technical writing for APIs, and understanding the landscape of current API documentation tools.

* Activities:

* Conduct thorough market research on leading API documentation platforms (e.g., Swagger UI, ReDoc, Docusaurus, Stoplight).

* Interview potential stakeholders (developers, product managers, technical writers) to gather detailed requirements, pain points with existing solutions, and desired features.

* Begin defining the target audience(s) for the generated documentation.

* Output: Documented preliminary requirements, competitive analysis report, and initial user stories.

  • Week 2: Core Concepts & Data Models

* Learning Focus: Understanding how API definitions (e.g., OpenAPI YAML/JSON) are structured and how to parse and transform them into an internal, canonical data model suitable for documentation generation. Focus on data integrity and flexibility.

* Activities:

* Study the OpenAPI Specification in detail, understanding its components (paths, schemas, security schemes, tags).

* Design a preliminary internal data model (e.g., using UML class diagrams or ERD) that can represent all necessary API documentation elements independently of the input format.

* Research parsing techniques and libraries for YAML/JSON data in the chosen technology stack.

* Output: Draft internal API documentation data model, proposed parsing strategy, and initial technology stack considerations for data handling.

  • Week 3: Rendering & Output Technologies

* Learning Focus: Exploring various rendering technologies, including static site generators, templating engines, and Markdown processors. Understanding how to transform structured data into human-readable, aesthetically pleasing, and navigable documentation.

* Activities:

* Research and compare popular static site generators (e.g., Docusaurus, Hugo, Jekyll, Next.js with MDX) for their suitability, extensibility, and community support.

* Investigate templating engines (e.g., Jinja2, Handlebars.js, Liquid) for dynamic content generation.

* Develop a small proof-of-concept (POC) to demonstrate parsing a simple OpenAPI definition and rendering it into a basic HTML page using a selected static site generator and templating engine.

* Output: Static site generator and templating engine selection, POC demonstrating basic rendering, and initial UI/UX considerations for the generated output.

  • Week 4: Authentication & SDK Integration

* Learning Focus: Understanding common API authentication patterns (OAuth 2.0, API Keys, JWT, Basic Auth) and how to clearly document them. Researching principles of SDK generation and how to create dynamic, language-specific code examples.

* Activities:

* Design the structure for authentication guides, ensuring clarity, security best practices, and ease of use.

* Explore tools and libraries for generating SDK-like code examples from API definitions (e.g., OpenAPI Generator, custom scripting).

* Outline how users will specify desired SDK languages and how the generator will produce corresponding code snippets.

* Output: Design for authentication documentation module, strategy for SDK usage example generation, and identification of relevant libraries/tools.

  • Week 5: Architecture Synthesis & Review

* Learning Focus: Consolidating all learned concepts into a coherent architectural design. Emphasizing system design principles such as modularity, extensibility, maintainability, and scalability.

* Activities:

* Synthesize all findings into a comprehensive architectural design document.

* Create detailed component diagrams (e.g., C4 model), data flow diagrams, and deployment considerations.

* Define the API for the generator itself (if it's to be programmable) or its CLI interface.

* Prepare for a formal architectural review with key stakeholders and technical leadership.

* Output: Complete Architectural Design Document (ADD), including component breakdown, technology stack, data flow, extensibility points, and a plan for the next development phase.

2. Learning Objectives

Upon completion of this study plan, participants will be able to:

  • Comprehensive Understanding of API Documentation Standards: Develop a deep understanding of the OpenAPI Specification (OAS) and its role in defining RESTful APIs, as well as general best practices for clear and effective API documentation.
  • Proficiency in Data Parsing & Transformation: Effectively parse and validate API definition files (e.g., YAML, JSON) and transform them into a standardized, internal data model that supports various documentation outputs.
  • Mastery of Content Generation & Rendering: Utilize static site generators, templating engines, and Markdown processors to dynamically generate high-quality, navigable, and visually appealing documentation from structured data.
  • Expertise in Authentication & Security Documentation: Design and implement robust methods for clearly documenting diverse API authentication mechanisms, including security considerations and example flows.
  • Ability to Generate SDK Usage Examples: Develop strategies and mechanisms to dynamically generate accurate, language-specific code examples for API consumption, enhancing developer experience.
  • Application of System Design Principles: Apply principles of modularity, extensibility, maintainability, and performance to design a robust and future-proof API Documentation Generator architecture.
  • Effective Technology Selection: Justify the selection of appropriate technologies (programming languages, frameworks, libraries) based on project requirements, scalability needs, and team expertise.

3. Recommended Resources

This section provides a curated list of resources to aid in achieving the learning objectives.

  • Official Specifications & Standards:

* OpenAPI Specification (OAS) 3.x: The definitive guide for describing RESTful APIs.

* [https://swagger.io/specification/](https://swagger.io/specification/)

* JSON Schema: For defining the structure of JSON data.

* [https://json-schema.org/](https://json-schema.org/)

* Markdown Guide: For understanding markdown syntax.

* [https://www.markdownguide.org/](https://www.markdownguide.org/)

  • Books & Articles:

* "API Design Patterns" by JJ Geewax: Provides insights into designing APIs, which is crucial for understanding what needs to be documented.

* "Designing Data-Intensive Applications" by Martin Kleppmann: Excellent for understanding data storage, processing, and

\n")

def _resolve_ref(self, ref_obj):

"""

Resolves a $ref pointer within the OpenAPI specification.

Currently handles local #/components/ schemas/parameters/responses.

"""

if '$ref' in ref_obj:

ref_path = ref_obj['$ref']

parts = ref_path.split('/')

if parts[0] == '#': # Local reference

current = self.spec

for part in parts[1:]:

if part in current:

current = current[part]

else:

print(f"Warning: Could not resolve reference: {ref_path}")

return {} # Return empty dict if ref not found

return current

return ref_obj

def _generate_introduction(self):

"""Generates the introductory section of the documentation."""

info = self.spec.get('info', {})

self._add_section(info.get('title', 'API Documentation'), level=1)

self._add_paragraph(info.get('description', ''))

self._add_paragraph(f"Version: {info.get('version', 'N/A')}\n")

contact = info.get('contact', {})

if contact:

self._add_section("Contact Information", level=2)

if contact.get('name'):

self._add_paragraph(f"- Name: {contact['name']}")

if contact.get('email'):

self._add_paragraph(f"- Email: [{contact['email']}](mailto:{contact['email']})")

if contact.get('url'):

self._add_paragraph(f"- Website: [{contact['url']}]({contact['url']})")

servers = self.spec.get('servers', [])

if servers:

self._add_section("Base URLs", level=2)

for server in servers:

self._add_paragraph(f"- {server.get('url')} - {server.get('description', '')}")

def _generate_authentication(self):

"""Generates the authentication section based on security schemes."""

security_schemes = self.spec.get('components', {}).get('securitySchemes', {})

if not security_schemes:

return

self._add_section("Authentication", level=2)

self._add_paragraph("This API uses the following authentication methods:")

for scheme_name, scheme_obj in security_schemes.items():

scheme_obj = self._resolve_ref(scheme_obj) # Resolve if it's a $ref

self._add_section(scheme_name, level=3)

self._add_paragraph(scheme_obj.get('description', ''))

self._add_paragraph(f"- Type: {scheme_obj.get('type')}")

if scheme_obj.get('type') == 'http':

self._add_paragraph(f"- Scheme: {scheme_obj.get('scheme')}")

if scheme_obj.get('bearerFormat'):

self._add_paragraph(f"- Bearer Format: {scheme_obj.get('bearerFormat')}")

self._add_paragraph("Requests should include an Authorization header.")

self._add_code_block("Authorization: Bearer YOUR_ACCESS_TOKEN", lang='http')

elif scheme_obj.get('type') == 'apiKey':

self._add_paragraph(f"- In: {scheme_obj.get('in')}")

self._add_paragraph(f"- Name: {scheme_obj.get('name')}")

self._add_paragraph(f"Include your API key in the {scheme_obj.get('in')} named {scheme_obj.get('name')}.")

if scheme_obj.get('in') == 'header':

self._add_code_block(f"{scheme_obj.get('name')}: YOUR_API_KEY", lang='http')

elif scheme_obj.get('in') == 'query':

self._add_code_block(f"GET /api/resource?{scheme_obj.get('name')}=YOUR_API_KEY", lang='http')

elif scheme_obj.get('type') == 'oauth2':

flows = scheme_obj.get('flows', {})

self._add_paragraph("This scheme uses OAuth 2.0. Available flows:")

for flow_type, flow_details in flows.items():

self._add_paragraph(f"- Flow Type: {flow_type}")

if flow_details.get('authorizationUrl'):

self._add_paragraph(f" - Authorization URL: {flow_details['authorizationUrl']}")

if flow_details.get('tokenUrl'):

self._add_paragraph(f" - Token URL: {flow_details['tokenUrl']}")

if flow_details.get('scopes'):

self._add_paragraph(" - Scopes:")

for scope_name, scope_desc in flow_details['scopes'].items():

self._add_paragraph(f" - {scope_name}: {scope_desc}")

self._add_paragraph("") # Add a newline for spacing

def _format_schema_to_markdown(self, schema, indent_level=0):

"""Recursively formats a JSON schema into a Markdown table or description."""

indent = ' ' * indent_level

markdown_lines = []

if not schema:

return ""

schema = self._resolve_ref(schema)

if 'type' in schema:

prop_type = schema['type']

description = schema.get('description', '')

enum = schema.get('enum')

default = schema.get('default')

if prop_type == 'object':

markdown_lines.append(f"{indent}- Type: {prop_type} {description}")

if 'properties' in schema:

markdown_lines.append(f"{indent} Properties:")

for prop_name, prop_schema in schema['properties'].items():

prop_schema = self._resolve_ref(prop_schema)

required_marker = '(required)' if prop_name in schema.get('required', []) else ''

markdown_lines.append(f"{indent} - {prop_name} {required_marker}: {self._format_schema_to_markdown(prop_schema, indent_level + 2)}")

elif 'additionalProperties' in schema and isinstance(schema['additionalProperties'], dict):

markdown_lines.append(f"{indent} Additional Properties: {self._format_schema_to_markdown(schema['additionalProperties'], indent_level + 2)}")

return "\n".join(markdown_lines)

elif prop_type == 'array':

items_schema = self._resolve_ref(schema.get('items', {}))

markdown_lines.append(f"{indent}- Type: {prop_type} {description}")

markdown_lines.append(f"{indent} Items: {self._format_schema_to_markdown(items_schema, indent_level + 2)}")

return "\n".join(markdown_lines)

else: # Primitive types

line = f"{prop_type}"

if enum:

line += f" (Enum: {', '.join(map(str, enum))})"

if default is not None:

line += f" (Default: {default})"

if description:

line += f" - {description}"

return line

elif 'oneOf' in schema or 'anyOf' in schema or 'allOf' in schema:

combinator = next(iter(s for s in ['oneOf', 'anyOf', 'allOf'] if s in schema))

markdown_lines.append(f"{indent}{combinator.capitalize()}:")

for sub_schema in schema[combinator]:

markdown_lines.append(f"{indent}- {self._format_schema_to_markdown(sub_schema, indent_level + 1)}")

return "\n".join(markdown_lines)

elif '$ref' in schema:

ref_name = schema['$ref'].split('/')[-1]

return f"Ref: {ref_name}"

else:

return f"Complex Schema: {json.dumps(schema)}"

def _format_request_body(self, request_body):

"""Formats the request body into a Markdown string."""

request_body =

gemini Output

API Documentation: PantheraHive Product Catalog API

Welcome to the official documentation for the PantheraHive Product Catalog API. This API provides a robust and flexible way to manage your product catalog, including products, categories, and inventory information, programmatically.


1. Introduction

The PantheraHive Product Catalog API allows developers to integrate product management functionalities into their applications. You can list, retrieve, create, update, and delete products and categories, as well as manage inventory levels. This documentation provides comprehensive details on available endpoints, authentication methods, request/response formats, and SDK usage examples.

Key Features:

  • Product Management: Full CRUD operations for products.
  • Category Management: Organize products into categories.
  • Inventory Tracking: Update and retrieve product stock levels.
  • Search & Filtering: Query products and categories based on various criteria.

Conventions:

  • All API requests and responses are in JSON format.
  • Dates and times are represented in ISO 8601 format (e.g., YYYY-MM-DDTHH:MM:SSZ).
  • Path parameters are indicated with curly braces, e.g., {product_id}.

2. Base URL

All requests to the PantheraHive Product Catalog API should be prefixed with the following base URL:

https://api.pantherahive.com/v1


3. Authentication

The PantheraHive Product Catalog API uses API Key authentication for secure access. Your API Key must be included in the Authorization header of every request.

Method: API Key (Bearer Token scheme)

How to Authenticate:

  1. Obtain your API Key from your PantheraHive developer dashboard.
  2. Include your API Key in the Authorization header of each request, prefixed with Bearer .

Example:


Authorization: Bearer YOUR_API_KEY_HERE

Important: Keep your API Key confidential. Do not expose it in client-side code or public repositories.


4. Rate Limiting

To ensure fair usage and system stability, the PantheraHive Product Catalog API applies rate limits.

  • Limit: 100 requests per minute per API Key.
  • Exceeding the Limit: If you exceed the rate limit, you will receive a 429 Too Many Requests status code.
  • Headers: The following headers are included in every response to help you monitor your rate limit status:

* X-RateLimit-Limit: The maximum number of requests allowed in the current time window.

* X-RateLimit-Remaining: The number of requests remaining in the current time window.

* X-RateLimit-Reset: The UTC epoch timestamp when the current rate limit window resets.


5. Error Handling

The API uses standard HTTP status codes to indicate the success or failure of an API request. In case of an error, the API will return a JSON object containing details about the error.

Common HTTP Status Codes:

| Status Code | Description |

| :---------- | :-------------------------------------------- |

| 200 OK | The request was successful. |

| 201 Created | The resource was successfully created. |

| 204 No Content | The request was successful, no content to return. |

| 400 Bad Request | The request was malformed or invalid. |

| 401 Unauthorized | Authentication credentials were missing or invalid. |

| 403 Forbidden | You do not have permission to access this resource. |

| 404 Not Found | The requested resource could not be found. |

| 405 Method Not Allowed | The HTTP method used is not supported for this endpoint. |

| 409 Conflict | The request could not be completed due to a conflict with the current state of the resource. |

| 422 Unprocessable Entity | The request was well-formed but could not be processed due to semantic errors (e.g., validation failure). |

| 429 Too Many Requests | You have exceeded the API rate limit. |

| 500 Internal Server Error | An unexpected error occurred on the server. |

Error Response Format:


{
  "status_code": 400,
  "error_code": "INVALID_REQUEST_BODY",
  "message": "The provided product name is too short.",
  "details": [
    {
      "field": "name",
      "issue": "must be at least 3 characters long"
    }
  ]
}

6. Endpoints

6.1. Products

##### 6.1.1. List All Products

GET /products

Description: Retrieves a paginated list of all products in the catalog. Products can be filtered by category.

Query Parameters:

| Parameter | Type | Description | Required | Default |

| :------------ | :------- | :-------------------------------------------------- | :------- | :------ |

| limit | integer | Maximum number of products to return per page. | No | 20 |

| offset | integer | Number of products to skip before starting to return results. | No | 0 |

| category_id | string | Filter products by a specific category ID. | No | null |

| search | string | Search products by name or description. | No | null |

Request Example:


curl -X GET \
  'https://api.pantherahive.com/v1/products?limit=10&category_id=cat_abc123' \
  -H 'Authorization: Bearer YOUR_API_KEY_HERE'

Response Example (200 OK):


{
  "data": [
    {
      "id": "prod_xyz789",
      "name": "Wireless Ergonomic Mouse",
      "description": "A comfortable and precise wireless mouse for daily use.",
      "price": 29.99,
      "currency": "USD",
      "stock_quantity": 150,
      "category_id": "cat_abc123",
      "sku": "WM-ERG-001",
      "image_url": "https://example.com/images/mouse.jpg",
      "created_at": "2023-10-26T10:00:00Z",
      "updated_at": "2023-10-26T10:00:00Z"
    },
    {
      "id": "prod_abc456",
      "name": "Mechanical Keyboard Pro",
      "description": "High-performance mechanical keyboard with customizable RGB.",
      "price": 129.99,
      "currency": "USD",
      "stock_quantity": 75,
      "category_id": "cat_abc123",
      "sku": "MK-PRO-001",
      "image_url": "https://example.com/images/keyboard.jpg",
      "created_at": "2023-10-25T14:30:00Z",
      "updated_at": "2023-10-25T14:30:00Z"
    }
  ],
  "pagination": {
    "total_items": 2,
    "limit": 10,
    "offset": 0,
    "has_next": false,
    "has_prev": false
  }
}

##### 6.1.2. Retrieve a Product

GET /products/{product_id}

Description: Retrieves the details of a single product by its unique ID.

Path Parameters:

| Parameter | Type | Description | Required |

| :----------- | :------- | :--------------------------------- | :------- |

| product_id | string | The unique identifier of the product. | Yes |

Request Example:


curl -X GET \
  'https://api.pantherahive.com/v1/products/prod_xyz789' \
  -H 'Authorization: Bearer YOUR_API_KEY_HERE'

Response Example (200 OK):


{
  "id": "prod_xyz789",
  "name": "Wireless Ergonomic Mouse",
  "description": "A comfortable and precise wireless mouse for daily use.",
  "price": 29.99,
  "currency": "USD",
  "stock_quantity": 150,
  "category_id": "cat_abc123",
  "sku": "WM-ERG-001",
  "image_url": "https://example.com/images/mouse.jpg",
  "created_at": "2023-10-26T10:00:00Z",
  "updated_at": "2023-10-26T10:00:00Z"
}

Response Example (404 Not Found):


{
  "status_code": 404,
  "error_code": "PRODUCT_NOT_FOUND",
  "message": "Product with ID 'prod_unknown' not found."
}

##### 6.1.3. Create a New Product

POST /products

Description: Creates a new product in the catalog.

Request Body Parameters:

| Parameter | Type | Description | Required |

| :------------- | :-------- | :---------------------------------------------- | :------- |

| name | string | The name of the product. | Yes |

| description | string | A detailed description of the product. | Yes |

| price | number | The price of the product. Must be positive. | Yes |

| currency | string | The currency of the product price (e.g., "USD", "EUR"). | Yes |

| stock_quantity | integer | The initial stock quantity of the product. Must be non-negative. | Yes |

| category_id | string | The ID of the category this product belongs to. | No |

| sku | string | Stock Keeping Unit (unique identifier for inventory). | No |

| image_url | string | URL to the product's main image. | No |

Request Example:


curl -X POST \
  'https://api.pantherahive.com/v1/products' \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer YOUR_API_KEY_HERE' \
  -d '{
    "name": "Ultra HD Monitor 27-inch",
    "description": "Stunning 4K resolution monitor with vibrant colors.",
    "price": 399.99,
    "currency": "USD",
    "stock_quantity": 50,
    "category_id": "cat_display001",
    "sku": "UHD-MON-27",
    "image_url": "https://example.com/images/monitor.jpg"
  }'

Response Example (201 Created):


{
  "id": "prod_new789",
  "name": "Ultra HD Monitor 27-inch",
  "description": "Stunning 4K resolution monitor with vibrant colors.",
  "price": 399.99,
  "currency": "USD",
  "stock_quantity": 50,
  "category_id": "cat_display001",
  "sku": "UHD-MON-27",
  "image_url": "https://example.com/images/monitor.jpg",
  "created_at": "2023-10-27T11:45:00Z",
  "updated_at": "2023-10-27T11:45:00Z"
}

Response Example (422 Unprocessable Entity - Validation Error):


{
  "status_code": 422,
  "error_code": "VALIDATION_ERROR",
  "message": "One or more fields in the request body are invalid.",
  "details": [
    {
      "field": "price",
      "issue": "must be a positive number"
    },
    {
      "field": "description",
      "issue": "is required"
    }
  ]
}

6.2. Categories

##### 6.2.1. List All Categories

GET /categories

Description: Retrieves a paginated list of all product categories.

Query Parameters:

| Parameter | Type | Description | Required | Default |

| :-------- | :------- | :-------------------------------------------------- | :------- | :------ |

| limit | integer | Maximum number of categories to return per page. | No | 20 |

| offset | integer | Number of categories to skip before starting to return results. | No | 0 |

Request Example:


curl -X GET \
  'https://api.pantherahive.com/v1/categories?limit=5' \
  -H 'Authorization: Bearer YOUR_API_KEY_HERE'

**Response Example (20

api_documentation_generator.txt
Download source file
Copy all content
Full output as text
Download ZIP
IDE-ready project ZIP
Copy share link
Permanent URL for this run
Get Embed Code
Embed this result on any website
Print / Save PDF
Use browser print dialog
"); var hasSrcMain=Object.keys(extracted).some(function(k){return k.indexOf("src/main")>=0;}); if(!hasSrcMain) zip.file(folder+"src/main."+ext,"import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './index.css' ReactDOM.createRoot(document.getElementById('root')!).render( ) "); var hasSrcApp=Object.keys(extracted).some(function(k){return k==="src/App."+ext||k==="App."+ext;}); if(!hasSrcApp) zip.file(folder+"src/App."+ext,"import React from 'react' import './App.css' function App(){ return(

"+slugTitle(pn)+"

Built with PantheraHive BOS

) } export default App "); zip.file(folder+"src/index.css","*{margin:0;padding:0;box-sizing:border-box} body{font-family:system-ui,-apple-system,sans-serif;background:#f0f2f5;color:#1a1a2e} .app{min-height:100vh;display:flex;flex-direction:column} .app-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px} h1{font-size:2.5rem;font-weight:700} "); zip.file(folder+"src/App.css",""); zip.file(folder+"src/components/.gitkeep",""); zip.file(folder+"src/pages/.gitkeep",""); zip.file(folder+"src/hooks/.gitkeep",""); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+" Generated by PantheraHive BOS. ## Setup ```bash npm install npm run dev ``` ## Build ```bash npm run build ``` ## Open in IDE Open the project folder in VS Code or WebStorm. "); zip.file(folder+".gitignore","node_modules/ dist/ .env .DS_Store *.local "); } /* --- Vue (Vite + Composition API + TypeScript) --- */ function buildVue(zip,folder,app,code,panelTxt){ var pn=pkgName(app); var C=cc(pn); var extracted=extractCode(panelTxt); zip.file(folder+"package.json",'{ "name": "'+pn+'", "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc -b && vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.5.13", "vue-router": "^4.4.5", "pinia": "^2.3.0", "axios": "^1.7.9" }, "devDependencies": { "@vitejs/plugin-vue": "^5.2.1", "typescript": "~5.7.3", "vite": "^6.0.5", "vue-tsc": "^2.2.0" } } '); zip.file(folder+"vite.config.ts","import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname,'src') } } }) "); zip.file(folder+"tsconfig.json",'{"files":[],"references":[{"path":"./tsconfig.app.json"},{"path":"./tsconfig.node.json"}]} '); zip.file(folder+"tsconfig.app.json",'{ "compilerOptions":{ "target":"ES2020","useDefineForClassFields":true,"module":"ESNext","lib":["ES2020","DOM","DOM.Iterable"], "skipLibCheck":true,"moduleResolution":"bundler","allowImportingTsExtensions":true, "isolatedModules":true,"moduleDetection":"force","noEmit":true,"jsxImportSource":"vue", "strict":true,"paths":{"@/*":["./src/*"]} }, "include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"] } '); zip.file(folder+"env.d.ts","/// "); zip.file(folder+"index.html"," "+slugTitle(pn)+"
"); var hasMain=Object.keys(extracted).some(function(k){return k==="src/main.ts"||k==="main.ts";}); if(!hasMain) zip.file(folder+"src/main.ts","import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import './assets/main.css' const app = createApp(App) app.use(createPinia()) app.mount('#app') "); var hasApp=Object.keys(extracted).some(function(k){return k.indexOf("App.vue")>=0;}); if(!hasApp) zip.file(folder+"src/App.vue"," "); zip.file(folder+"src/assets/main.css","*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#fff;color:#213547} "); zip.file(folder+"src/components/.gitkeep",""); zip.file(folder+"src/views/.gitkeep",""); zip.file(folder+"src/stores/.gitkeep",""); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+" Generated by PantheraHive BOS. ## Setup ```bash npm install npm run dev ``` ## Build ```bash npm run build ``` Open in VS Code or WebStorm. "); zip.file(folder+".gitignore","node_modules/ dist/ .env .DS_Store *.local "); } /* --- Angular (v19 standalone) --- */ function buildAngular(zip,folder,app,code,panelTxt){ var pn=pkgName(app); var C=cc(pn); var sel=pn.replace(/_/g,"-"); var extracted=extractCode(panelTxt); zip.file(folder+"package.json",'{ "name": "'+pn+'", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test" }, "dependencies": { "@angular/animations": "^19.0.0", "@angular/common": "^19.0.0", "@angular/compiler": "^19.0.0", "@angular/core": "^19.0.0", "@angular/forms": "^19.0.0", "@angular/platform-browser": "^19.0.0", "@angular/platform-browser-dynamic": "^19.0.0", "@angular/router": "^19.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" }, "devDependencies": { "@angular-devkit/build-angular": "^19.0.0", "@angular/cli": "^19.0.0", "@angular/compiler-cli": "^19.0.0", "typescript": "~5.6.0" } } '); zip.file(folder+"angular.json",'{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "'+pn+'": { "projectType": "application", "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/'+pn+'", "index": "src/index.html", "browser": "src/main.ts", "tsConfig": "tsconfig.app.json", "styles": ["src/styles.css"], "scripts": [] } }, "serve": {"builder":"@angular-devkit/build-angular:dev-server","configurations":{"production":{"buildTarget":"'+pn+':build:production"},"development":{"buildTarget":"'+pn+':build:development"}},"defaultConfiguration":"development"} } } } } '); zip.file(folder+"tsconfig.json",'{ "compileOnSave": false, "compilerOptions": {"baseUrl":"./","outDir":"./dist/out-tsc","forceConsistentCasingInFileNames":true,"strict":true,"noImplicitOverride":true,"noPropertyAccessFromIndexSignature":true,"noImplicitReturns":true,"noFallthroughCasesInSwitch":true,"paths":{"@/*":["src/*"]},"skipLibCheck":true,"esModuleInterop":true,"sourceMap":true,"declaration":false,"experimentalDecorators":true,"moduleResolution":"bundler","importHelpers":true,"target":"ES2022","module":"ES2022","useDefineForClassFields":false,"lib":["ES2022","dom"]}, "references":[{"path":"./tsconfig.app.json"}] } '); zip.file(folder+"tsconfig.app.json",'{ "extends":"./tsconfig.json", "compilerOptions":{"outDir":"./dist/out-tsc","types":[]}, "files":["src/main.ts"], "include":["src/**/*.d.ts"] } '); zip.file(folder+"src/index.html"," "+slugTitle(pn)+" "); zip.file(folder+"src/main.ts","import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; bootstrapApplication(AppComponent, appConfig) .catch(err => console.error(err)); "); zip.file(folder+"src/styles.css","* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, sans-serif; background: #f9fafb; color: #111827; } "); var hasComp=Object.keys(extracted).some(function(k){return k.indexOf("app.component")>=0;}); if(!hasComp){ zip.file(folder+"src/app/app.component.ts","import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = '"+pn+"'; } "); zip.file(folder+"src/app/app.component.html","

"+slugTitle(pn)+"

Built with PantheraHive BOS

"); zip.file(folder+"src/app/app.component.css",".app-header{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px}h1{font-size:2.5rem;font-weight:700;color:#6366f1} "); } zip.file(folder+"src/app/app.config.ts","import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes) ] }; "); zip.file(folder+"src/app/app.routes.ts","import { Routes } from '@angular/router'; export const routes: Routes = []; "); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+" Generated by PantheraHive BOS. ## Setup ```bash npm install ng serve # or: npm start ``` ## Build ```bash ng build ``` Open in VS Code with Angular Language Service extension. "); zip.file(folder+".gitignore","node_modules/ dist/ .env .DS_Store *.local .angular/ "); } /* --- Python --- */ function buildPython(zip,folder,app,code){ var title=slugTitle(app); var pn=pkgName(app); var src=code.replace(/^```[w]* ?/m,"").replace(/ ?```$/m,"").trim(); var reqMap={"numpy":"numpy","pandas":"pandas","sklearn":"scikit-learn","tensorflow":"tensorflow","torch":"torch","flask":"flask","fastapi":"fastapi","uvicorn":"uvicorn","requests":"requests","sqlalchemy":"sqlalchemy","pydantic":"pydantic","dotenv":"python-dotenv","PIL":"Pillow","cv2":"opencv-python","matplotlib":"matplotlib","seaborn":"seaborn","scipy":"scipy"}; var reqs=[]; Object.keys(reqMap).forEach(function(k){if(src.indexOf("import "+k)>=0||src.indexOf("from "+k)>=0)reqs.push(reqMap[k]);}); var reqsTxt=reqs.length?reqs.join(" "):"# add dependencies here "; zip.file(folder+"main.py",src||"# "+title+" # Generated by PantheraHive BOS print(title+" loaded") "); zip.file(folder+"requirements.txt",reqsTxt); zip.file(folder+".env.example","# Environment variables "); zip.file(folder+"README.md","# "+title+" Generated by PantheraHive BOS. ## Setup ```bash python3 -m venv .venv source .venv/bin/activate pip install -r requirements.txt ``` ## Run ```bash python main.py ``` "); zip.file(folder+".gitignore",".venv/ __pycache__/ *.pyc .env .DS_Store "); } /* --- Node.js --- */ function buildNode(zip,folder,app,code){ var title=slugTitle(app); var pn=pkgName(app); var src=code.replace(/^```[w]* ?/m,"").replace(/ ?```$/m,"").trim(); var depMap={"mongoose":"^8.0.0","dotenv":"^16.4.5","axios":"^1.7.9","cors":"^2.8.5","bcryptjs":"^2.4.3","jsonwebtoken":"^9.0.2","socket.io":"^4.7.4","uuid":"^9.0.1","zod":"^3.22.4","express":"^4.18.2"}; var deps={}; Object.keys(depMap).forEach(function(k){if(src.indexOf(k)>=0)deps[k]=depMap[k];}); if(!deps["express"])deps["express"]="^4.18.2"; var pkgJson=JSON.stringify({"name":pn,"version":"1.0.0","main":"src/index.js","scripts":{"start":"node src/index.js","dev":"nodemon src/index.js"},"dependencies":deps,"devDependencies":{"nodemon":"^3.0.3"}},null,2)+" "; zip.file(folder+"package.json",pkgJson); var fallback="const express=require("express"); const app=express(); app.use(express.json()); app.get("/",(req,res)=>{ res.json({message:""+title+" API"}); }); const PORT=process.env.PORT||3000; app.listen(PORT,()=>console.log("Server on port "+PORT)); "; zip.file(folder+"src/index.js",src||fallback); zip.file(folder+".env.example","PORT=3000 "); zip.file(folder+".gitignore","node_modules/ .env .DS_Store "); zip.file(folder+"README.md","# "+title+" Generated by PantheraHive BOS. ## Setup ```bash npm install ``` ## Run ```bash npm run dev ``` "); } /* --- Vanilla HTML --- */ function buildVanillaHtml(zip,folder,app,code){ var title=slugTitle(app); var isFullDoc=code.trim().toLowerCase().indexOf("=0||code.trim().toLowerCase().indexOf("=0; var indexHtml=isFullDoc?code:" "+title+" "+code+" "; zip.file(folder+"index.html",indexHtml); zip.file(folder+"style.css","/* "+title+" — styles */ *{margin:0;padding:0;box-sizing:border-box} body{font-family:system-ui,-apple-system,sans-serif;background:#fff;color:#1a1a2e} "); zip.file(folder+"script.js","/* "+title+" — scripts */ "); zip.file(folder+"assets/.gitkeep",""); zip.file(folder+"README.md","# "+title+" Generated by PantheraHive BOS. ## Open Double-click `index.html` in your browser. Or serve locally: ```bash npx serve . # or python3 -m http.server 3000 ``` "); zip.file(folder+".gitignore",".DS_Store node_modules/ .env "); } /* ===== MAIN ===== */ var sc=document.createElement("script"); sc.src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"; sc.onerror=function(){ if(lbl)lbl.textContent="Download ZIP"; alert("JSZip load failed — check connection."); }; sc.onload=function(){ var zip=new JSZip(); var base=(_phFname||"output").replace(/.[^.]+$/,""); var app=base.toLowerCase().replace(/[^a-z0-9]+/g,"_").replace(/^_+|_+$/g,"")||"my_app"; var folder=app+"/"; var vc=document.getElementById("panel-content"); var panelTxt=vc?(vc.innerText||vc.textContent||""):""; var lang=detectLang(_phCode,panelTxt); if(_phIsHtml){ buildVanillaHtml(zip,folder,app,_phCode); } else if(lang==="flutter"){ buildFlutter(zip,folder,app,_phCode,panelTxt); } else if(lang==="react-native"){ buildReactNative(zip,folder,app,_phCode,panelTxt); } else if(lang==="swift"){ buildSwift(zip,folder,app,_phCode,panelTxt); } else if(lang==="kotlin"){ buildKotlin(zip,folder,app,_phCode,panelTxt); } else if(lang==="react"){ buildReact(zip,folder,app,_phCode,panelTxt); } else if(lang==="vue"){ buildVue(zip,folder,app,_phCode,panelTxt); } else if(lang==="angular"){ buildAngular(zip,folder,app,_phCode,panelTxt); } else if(lang==="python"){ buildPython(zip,folder,app,_phCode); } else if(lang==="node"){ buildNode(zip,folder,app,_phCode); } else { /* Document/content workflow */ var title=app.replace(/_/g," "); var md=_phAll||_phCode||panelTxt||"No content"; zip.file(folder+app+".md",md); var h=""+title+""; h+="

"+title+"

"; var hc=md.replace(/&/g,"&").replace(//g,">"); hc=hc.replace(/^### (.+)$/gm,"

$1

"); hc=hc.replace(/^## (.+)$/gm,"

$1

"); hc=hc.replace(/^# (.+)$/gm,"

$1

"); hc=hc.replace(/**(.+?)**/g,"$1"); hc=hc.replace(/ {2,}/g,"

"); h+="

"+hc+"

Generated by PantheraHive BOS
"; zip.file(folder+app+".html",h); zip.file(folder+"README.md","# "+title+" Generated by PantheraHive BOS. Files: - "+app+".md (Markdown) - "+app+".html (styled HTML) "); } zip.generateAsync({type:"blob"}).then(function(blob){ var a=document.createElement("a"); a.href=URL.createObjectURL(blob); a.download=app+".zip"; a.click(); URL.revokeObjectURL(a.href); if(lbl)lbl.textContent="Download ZIP"; }); }; document.head.appendChild(sc); }function phShare(){navigator.clipboard.writeText(window.location.href).then(function(){var el=document.getElementById("ph-share-lbl");if(el){el.textContent="Link copied!";setTimeout(function(){el.textContent="Copy share link";},2500);}});}function phEmbed(){var runId=window.location.pathname.split("/").pop().replace(".html","");var embedUrl="https://pantherahive.com/embed/"+runId;var code='';navigator.clipboard.writeText(code).then(function(){var el=document.getElementById("ph-embed-lbl");if(el){el.textContent="Embed code copied!";setTimeout(function(){el.textContent="Get Embed Code";},2500);}});}