// Posts metadata + Article page renderer (used by individual article HTMLs). const POSTS_META = [ { id: 'ap-ib-tutoring-vancouver', href: 'articles/ap-ib-tutoring-vancouver.html', tag: 'Parent guide', title: 'How to tell if your child needs Vancouver AP and IB tutoring', date: 'May 2, 2026', dateISO: '2026-05-02', read: '6 min read', summary: 'Six clear signs your high-schooler is ready for advanced exam prep — and what to look for in a tutor before signing up.', cover: 'TranscriptCover', }, { id: 'thirty-minute-routine', href: 'articles/thirty-minute-routine.html', tag: 'Study skills', title: 'The thirty-minute Keats Booklets routine that lifts BC letter grades', date: 'April 25, 2026', dateISO: '2026-04-25', read: '4 min read', summary: 'A simple weekday routine parents can run with their child, using the daily-practice section of any Keats Booklet.', cover: 'BookletsCover', }, { id: 'bc-provincial-roadmap', href: 'articles/bc-provincial-roadmap.html', tag: 'BC curriculum', title: 'A stress-free parent roadmap to the BC Provincial Assessments', date: 'April 18, 2026', dateISO: '2026-04-18', read: '8 min read', summary: 'Grade-by-grade breakdown of what BC students face, when, and how families can prep without panic.', cover: 'RoadmapCover', }, ]; window.POSTS_META = POSTS_META; /* ─── Reusable article page renderer ─── */ // The host article HTML defines window.ARTICLE = { id, body: () => JSX } // Then renders from this file. // Articles live at /blog/articles/foo.html — need ../../ to reach the project root const ArticleNav = () => { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return (
Keats Learning Academy
Keats Learning Academy
← Back to site
); }; const ArticleHeader = ({post}) => (
Back to the blog
{post.tag} {post.read}

{post.title}

{post.summary}

); const ArticleHero = ({cover}) => (
); const ArticleBody = ({children}) => (
{children}
); const RelatedPosts = ({currentId}) => { const others = POSTS_META.filter(p => p.id !== currentId).slice(0, 2); return (
Keep reading
{others.map(p => ( { e.currentTarget.style.transform = 'translateY(-6px)'; e.currentTarget.style.boxShadow = '0 20px 40px -22px rgba(13,21,48,0.25)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }} >
{p.tag}{p.read}

{p.title}

 ))}
); }; const ArticleCTA = () => (

Ready to put this into practice?{' '} We can help.

Book a half-price private 1-on-1 trial with an expert tutor, or a free placement assessment for our Lynn Valley group classes.

Book a trial
); const ArticleApp = () => { const post = POSTS_META.find(p => p.id === window.ARTICLE.id); if (!post) return
Article not found.
; const Body = window.ARTICLE.body; return ( <> ); }; // Article-specific footer with ../../ paths (articles are 2 levels deep) const ArticleFooterCol = ({title, links}) => (
{title}
{links.map(l => { const external = l.href.startsWith('http'); return ( {l.label} ); })}
); const ArticleFooter = () => ( ); window.ArticleApp = ArticleApp;