Add configuration-based visibility control for sections and elements #22
Conversation
- Add config.yml for toggling visibility of sections and UI elements - Implement config utility for dynamic visibility handling - Add visibility controls for work experience, talks, writing, and social links - Add visibility controls for avatar, theme switch, footer, and header - Wrap components with config checks throughout the app - Install js-yaml for YAML parsing - Supports live updates without server restart (auto-refresh on save) Resolves coderdiaz#15
|
@coderdiaz Pls review the PR. |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a configuration system that allows users to control the visibility of sections and UI elements on the site through a YAML config file. The implementation adds a new getSiteConfig() function that reads from config.yml and falls back to defaults if the file is not found.
Key changes:
- Added YAML-based configuration system to toggle visibility of sections (about, work experience, talks, writing, social links) and UI elements (avatar, theme switch, header, footer)
- Wrapped all configurable sections and elements in conditional rendering blocks based on config values
- Added
js-yamldependency and its TypeScript types for YAML parsing
Reviewed Changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/lib/config.ts | New module that exports getSiteConfig() function with YAML parsing and default fallback |
| src/pages/index.astro | Wraps sections (about, social links, work experience, talks) and avatar in conditional rendering |
| src/layouts/BaseLayout.astro | Conditionally renders theme switch based on config |
| src/components/partials/Header.astro | Wraps header and "Writing" nav item in conditional rendering |
| src/components/partials/Footer.astro | Conditionally renders footer based on config |
| package.json | Adds js-yaml and @types/js-yaml dependencies |
| config.yml | New configuration file with all sections and elements enabled by default |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
@coderdiaz resolved |
coderdiaz
left a comment
coderdiaz
left a comment
There was a problem hiding this comment.
@shrvansudhakara Could you explain me about the issue in build production about the config file?
| function isValidConfig(config: any): boolean { | ||
| if ( | ||
| !config || | ||
| typeof config !== 'object' || | ||
| !config.sections || | ||
| typeof config.sections !== 'object' || | ||
| !config.elements || | ||
| typeof config.elements !== 'object' | ||
| ) { | ||
| return false; | ||
| } | ||
| // Optionally, check for required keys | ||
| const sectionKeys = [ | ||
| 'about', | ||
| 'workExperience', | ||
| 'talks', | ||
| 'writing', | ||
| 'socialLinks', | ||
| ]; | ||
| const elementKeys = [ | ||
| 'avatar', | ||
| 'themeSwitch', | ||
| 'header', | ||
| 'footer', | ||
| ]; | ||
| for (const key of sectionKeys) { | ||
| if (typeof config.sections[key] !== 'boolean') { | ||
| return false; | ||
| } | ||
| } | ||
| for (const key of elementKeys) { | ||
| if (typeof config.elements[key] !== 'boolean') { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| } |
There was a problem hiding this comment.
@shrvansudhakara What do you think about for use Zed or Yup for schema validation instead of this approach proposed by Copilot?
There was a problem hiding this comment.
@coderdiaz, There is no production issue, the config works correctly:
- Dev mode: Reads config.yml on each request, changes reflect immediately
- Build: Reads config once per component, generates static HTML
- Production: Static files only, no config reading at runtime
Copilot flagged it as a "performance concern," but it's a non-issue:
- File reads are ~1-2ms (negligible in builds)
- Caching would break dev hot-reload
- Each build is a fresh process anyway
The implementation is correct as-is for Astro SSG. Just addressing the Copilot reviews for completeness.
There was a problem hiding this comment.
@coderdiaz, Using Zod/Yup would be much cleaner and more maintainable, however it would be an add-on on dependency list. I'd prefer Zod, as I worked with it previously.
2 participants
🗒️ Description
This PR adds support for controlling the visibility of sections and UI elements through a centralized configuration file. Users can now easily show/hide different parts of their portfolio without modifying code.
Fixes #15
📝 Changes
New Files
config.yml- Central configuration file for visibility flagssrc/lib/config.ts- Configuration utility with TypeScript types and YAML parserModified Files
src/pages/index.astro- Added config checks for sections (Work Experience, Talks, Contact, Avatar)src/components/partials/Header.astro- Added config check for Writing navigation linksrc/components/partials/Footer.astro- Added config check for footer visibilitysrc/layouts/BaseLayout.astro- Added config check for theme switcherpackage.json- Addedjs-yamldependency for YAML parsingbun.lockb- Updated lock file🚀 Features
config.ymlfor toggling visibility🔧 Implementation Details
Configuration structure:
Usage pattern:
✅ Testing
trueworkExperience: falsetalks: falsewriting: falsesocialLinks: falseavatar: falsethemeSwitch: falsefooter: falseheader: falseconfig.ymlis missing📖 Usage
To hide any section or element, simply edit
config.yml:🔗 Related
Notes: