Skip to content

Conversation

@ryanaidilp
Copy link
Contributor

Summary

  • Implement comprehensive syntax highlighting using Prism.js for all API documentation sections
  • Add reusable CodeBlock component with copy-to-clipboard functionality
  • Update all endpoint sections with accurate code examples matching the actual Go API

Changes Made

New Components

  • CodeBlock.vue: Reusable syntax highlighting component with copy functionality
  • Supports bash, JSON, JavaScript, TypeScript, Python, Go languages
  • Responsive design with proper mobile formatting
  • Dark theme consistent with existing design

Updated Documentation Sections

  • NationalLatestSection: cURL request and JSON response examples
  • NationalHistoricalSection: basic and paginated requests with array response
  • HealthCheckSection: health check request and response examples
  • RootEndpointSection: API overview request with endpoints listing
  • ProvincesSection: provinces with latest case data structure
  • ProvinceCasesSection: enhanced examples with ODP/PDP tracking
  • ErrorHandlingSection: proper error response JSON structure
  • OverviewSection: quick example with syntax highlighting

API Structure Corrections

  • Fix reproduction rate key from 'mean' to 'value' across all endpoints
  • Update provinces response structure based on swagger.yaml specification
  • Add proper ODP/PDP (Orang Dalam Pengawasan/Pasien Dalam Pengawasan) tracking
  • Ensure all examples match actual Go backend models

Technical Improvements

  • Install Prism.js and required language plugins
  • Add proper TypeScript interfaces for component props
  • Responsive code blocks that work on mobile devices
  • Copy-to-clipboard functionality with visual feedback

Test Plan

  • Verify syntax highlighting displays correctly for all languages
  • Test copy-to-clipboard functionality
  • Verify mobile responsiveness on small screens
  • Check that all code examples match actual API responses
  • Validate reproduction rate structure corrections
  • Confirm ODP/PDP tracking data structure

- Hero section: reduce font sizes, improve spacing, fix code terminal layout
- Documentation: optimize sidebar width, reduce padding for mobile
- Overview section: responsive typography, better code block handling
- Reproduction Rate: mobile-friendly math formulas with overflow handling
- Add responsive breakpoints for xs/sm screens (360px+)
- Improve touch targets and content readability on mobile devices
- Stack grid columns on mobile (grid-cols-1)
- Reduce text sizes further: text-base for headings, text-[10px] for code
- Smaller padding on mobile: p-2 instead of p-3
- Use break-all for long URLs to prevent horizontal overflow
- Adjust icon sizes to be smaller on mobile (w-3 h-3)
- Better spacing between sections with reduced margins
- Add CodeBlock component with copy-to-clipboard functionality
- Install Prism.js with support for bash, JSON, JavaScript, TypeScript, Python, Go
- Update all API endpoint sections with comprehensive code examples:
  - National Latest: cURL request and JSON response examples
  - National Historical: basic and paginated requests with array response
  - Health Check: health endpoint request and response
  - Root Endpoint: API overview request and response
  - Provinces: provinces list with latest case data structure
  - Province Cases: enhanced examples with ODP/PDP tracking
  - Error Handling: error response JSON with proper structure
- Fix reproduction rate structure to use 'value' instead of 'mean'
- Correct provinces response structure based on swagger.yaml specification
- Add proper ODP/PDP (observation/supervision) data tracking
- Ensure all examples match actual API models from Go backend
- Responsive design for mobile devices with proper syntax highlighting
@ryanaidilp ryanaidilp self-assigned this Sep 11, 2025
@ryanaidilp ryanaidilp merged commit fd83b89 into develop Sep 11, 2025
2 checks passed
@ryanaidilp ryanaidilp deleted the feature/add-code-syntax-highlighting branch September 11, 2025 08:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants