CIS Youth Hymnal

This site is meant to be a successor to the reliable but (in my opinion) outdated CIS Youth Hymnal mobile app. It is also accessible through https://youthhymns.church.org.sg (accelerated through Cloudflare CDN utilizing Brotli, HTTP/3, QUIC)

Features

• 🔍 Search hymns by number, title or lyrics
• 📱 Responsive layout for both Mobile and Desktop
• 📖 "Flip" through hymns with previous/next buttons
• ⬇️ Can be installed and/or viewed offline because it's a PWA!
• ⏭️ Navigate directly to respective medleys from each hymn's page (Coming Soon!)
• 🌙 Option of Light/Dark mode (Coming Soon!)

Tools/Dependencies

• Hugo for Static Site Generation
• Grunt for search indexing
• Material Icons for icons
• jQuery for simpler DOM manipulation

Resources used

Learning Hugo: https://hugo-mini-course.netlify.app/

Search indexing: https://gist.github.com/sebz/efddfc8fdcb6b480f567

Stale-While-Revalidate Caching: https://jcs.wtf/service-worker-stale-while-revalidate/