.png)
Ang Silakbo Website Documentation v1.2
Comprehensive guide for administrators, developers, and content managers
Table of Contents
Documentation Status
1. Introduction
This documentation provides comprehensive information about the "Ang Silakbo" journalism website. It covers the website's structure, functionality, and maintenance procedures for administrators, developers, and content managers.
Note: This documentation is for administrators, developers, and content managers responsible for maintaining the Ang Silakbo website.
2. Website Structure
The website consists of the following main components:
- Frontend: HTML5, CSS3 (Tailwind), JavaScript(Svelte) (using Bootstrap 5)
- Backend: (Some implemented) Node.js/Express and Rust
- Database: (To be implemented) Supabase and Firebase, Cloudinary (for image storage)
- Hosting: (To be configured) AWS, Netlify, or GitHub
2.1 Directory Structure
ang-silakbo/
├── index.html # Main entry point
├── css/
│ └── style.css # Main stylesheet
├── js/
│ └── main.js # Main JavaScript file
├── feature images/ # All website images
├── articles/ # Article pages (future implementation)
└── assets/ # Additional assets (fonts, icons, etc.)
Frontend Development
Implementation of responsive HTML/CSS templates and basic JavaScript functionality.
Backend Integration
Development of server-side functionality and database connections.
CMS Implementation
Integration of content management system for article publishing and user management.
Launch & Optimization
Public launch followed by performance optimization and feature enhancements.
3. Pages Overview
3.1 Articles Page
Purpose: Display published journalism articles
Features
- Article cards with images, titles, and excerpts
- Category filtering system
- Search functionality
- Pagination (to be implemented)
Content Requirements
- Article title (max 100 characters)
- Featured image (1200×800px recommended)
- Excerpt (max 200 characters)
- Category selection (Photostory, Features, Articles, Silak-Salitaan)
3.2 About Page
Purpose: Provide information about the organization
Sections
- Mission statement
- Vision statement
- History
- Team members (future implementation)
3.3 Membership Page
Purpose: Allow users to apply for membership
Form Fields
| Field | Type | Required | Notes |
|---|---|---|---|
| Full Name | Text | Yes | Split into first/last name fields |
| Yes | Primary contact method | ||
| Phone | Tel | No | Optional contact number |
| Membership Type | Dropdown | Yes | Student, Individual, Family, etc. |
4. Technical Specifications
4.1 Frontend Technologies
4.2 Backend Requirements
The following backend features are planned for future implementation:
- User authentication system
- Content Management System (CMS)
- Article submission workflow
- Membership management
Performance Considerations
- Image optimization (recommended: WebP format)
- Lazy loading for images below the fold
- Minified CSS and JavaScript in production
- CDN for static assets (future implementation)
5. Content Management
5.1 Adding New Articles
Currently, articles are hardcoded in the HTML. Future CMS implementation will include:
- Login to the admin dashboard
- Navigate to "Articles" section
- Click "Add New Article"
- Fill in article details (title, content, category, etc.)
- Upload featured image
- Publish or schedule for later
Warning: Until CMS is implemented, all content changes require manual HTML edits.
5.2 Updating Static Content
To update content on pages like About or Membership:
- Open the corresponding HTML file
- Locate the content section (identified by comments)
- Make necessary changes
- Save and upload to server
5.3 Managing Memberships
Current membership form submissions are not yet processed. Future implementation will:
- Store submissions in database
- Send confirmation emails
- Provide admin interface to review applications
Tip: Consider implementing a temporary email notification system until the full database solution is in place.
6. User Guide
6.1 For Readers
Navigating Articles
- Click on "Articles" in the main menu
- Browse through article cards
- Use category filters to find specific content
- Click on any article to read full content
Applying for Membership
- Navigate to "Membership" page
- Fill out all required fields
- Select membership type
- Click "Submit Application"
6.2 For Contributors
Future features will include:
7. Maintenance
7.1 Regular Updates
- Weekly content updates (articles, news)
- Monthly technical review (security, performance)
- Quarterly design reviews
7.2 Backup Procedures
Important: Regular backups are critical to prevent data loss.
Implement the following backup strategy:
- Daily database backups (future implementation)
- Weekly full site backups
- Monthly off-site backups
7.3 Security Practices
- Regular software updates
- HTTPS encryption
- Strong password policies
- Regular security audits
8. Troubleshooting
8.1 Common Issues
| Issue | Possible Cause | Solution |
|---|---|---|
| Page not loading | Server downtime or incorrect URL | Check server status, verify URL |
| Form not submitting | JavaScript error or network issue | Check console for errors, test network |
| Images not appearing | Broken links or missing files | Verify image paths and file existence |
| Slow page loading | Large unoptimized images or scripts | Optimize assets, implement lazy loading |
8.2 Contact for Support
Technical Support
- Email: https://angsilakbo.netlify.app/chat%20request
- Phone: +63 2 8123 4567
- Hours: Monday-Friday, 9AM-5PM
Appendix A: Color Scheme
The website uses the following color palette:
Appendix B: Font Usage
The website uses the following font families:
- Poppins - Used for "ANG SILAKBO" logo text, navigation, buttons, and UI elements
- Playfair Display - Used for headings and titles
- Merriweather - Used for body text and paragraphs
- Source Sans Pro - Used for secondary text, captions, and labels
Resources
Download the following resources for development: