A modern, searchable FAQ system for Puter with dark/light theme support and responsive design.
- Comprehensive FAQ Collection: Organized answers to common Puter platform questions
- Searchable Interface: Quickly find answers with the built-in search functionality
- Dark/Light Theme: Toggle between themes based on your preference
- Responsive Design: Works seamlessly on desktop and mobile devices
- Syntax Highlighting: Code examples with proper highlighting for better readability
- Interactive Examples: Try-it-yourself code samples for hands-on learning
- Resizable Layout: Adjustable sidebar width for optimal reading experience
Clone the repository:
git clone https://github.com/puter-apps/faq.gitand open the /src/index.html file in your browser.
The FAQ Center uses a simple but effective architecture:
- HTML Structure: The main
index.htmlfile contains the application shell with sidebar and content area - Dynamic Content Loading: FAQ answers are stored as separate HTML files in the
/src/answers/directory - Client-side Search: JavaScript-powered search functionality filters questions in real-time
- Theme Management: Automatically detects system preference and allows manual theme toggling
- Responsive Design: CSS variables and media queries ensure proper display on all devices
To add a new FAQ:
- Create a new HTML file in the
/src/answers/directory with the next sequential number - Include the question as an HTML comment at the top of the file:
<!-- q: Your Question Here? --> - Structure your answer using the provided CSS classes for consistent styling
- For code examples, use the Prism.js syntax highlighting with the provided CSS classes
This application uses:
- Vanilla JavaScript for dynamic content loading and interactivity
- CSS variables for theming and consistent styling
- Font Awesome icons for UI elements
- Prism.js for code syntax highlighting
- Responsive design principles for all device sizes
MIT