TableTopLearning

TableTopLearning is a static educational website for structured online courses and tutor-supported learning. It helps learners and parents browse subjects, understand the learning process, compare support plans and find contact information.

Live website: https://tabletoplearning.co.uk/

Project status

The current repository contains a working public-facing Astro website. It is a static marketing and course-discovery experience, not a complete learning platform.

Implemented:

• Responsive homepage and navigation
• Five example short modules and five learning pathways
• Eight subject landing pages
• Statically generated course detail pages
• Independent Learning, Tutor Guidance and Focused Support comparisons
• Interactive FAQ disclosures
• About, contact, privacy and safeguarding pages
• GitHub Pages continuous deployment

Not implemented:

• Registration or authentication
• Learner dashboards and saved progress
• Course delivery or lesson content
• Enrolment, checkout or payments
• Tutor messaging or scheduling
• Database, API, CMS or admin panel
• Form-processing or email backend

The learner login page is currently an informational placeholder. The contact form prepares a mailto: message in the visitor's email application, and policy actions use direct email links.

Technology stack

Area	Technology
Framework	Astro 5
Rendering	Static site generation
Language	Astro templates, TypeScript and browser JavaScript
Styling	Plain global CSS
Package manager	npm
CI runtime	Node.js 22
Hosting	GitHub Pages
Automation	GitHub Actions

Astro is the only runtime dependency. TypeScript and @astrojs/check are development dependencies.

Application architecture

The active application is under src/:

src/
├── components/
│ ├── ModuleCard.astro Reusable module example
│ ├── PathwayCard.astro Reusable learning pathway
│ └── archive/homepage/ Previous homepage snapshot and archive notes
├── data/
│ └── learning.ts Shared module and pathway records
├── layouts/
│ └── Layout.astro Shared HTML document, header, navigation and footer
├── pages/
│ ├── index.astro Homepage
│ ├── modules.astro Short-module directory
│ ├── learning-pathways.astro Structured pathway directory
│ ├── support.astro Tutor support, pricing and FAQs
│ ├── courses.astro Featured-course overview
│ ├── courses/[slug].astro Generated course detail pages
│ └── subjects/*/ Subject landing pages
└── styles/
└── global.css Design tokens, components and responsive styles

Layout.astro imports the global stylesheet and supplies the common metadata, navigation, footer and mobile-menu behaviour. Small browser scripts handle the mobile menu, support-page FAQs and contact-email preparation. There is no client-side framework or server-side runtime.

The older root-level index.html, pages/, css/, scripts/ and images/ paths are legacy files. They are not imported by Astro and are not included in the deployed Pages artifact. Changes to the live website should normally be made under src/.

Public routes

General routes:

• /
• /about/
• /contact/
• /courses/
• /login/
• /modules/
• /learning-pathways/
• /support/
• /privacy/
• /safeguarding/

Subject routes:

• Mathematics
• Computing & AI group
• Computer Science
• AI & Machine Learning
• English
• Biology
• Physics
• Chemistry
• Religion & Languages

Course pages are generated by src/pages/courses/[slug].astro. Course information is stored in its courseData record, while getStaticPaths() declares which slugs Astro builds. Both must be updated together when adding a course.

Content storage

There is no CMS or central data service. Content is currently stored directly in Astro files:

• Homepage overview and subject directory: src/pages/index.astro
• Shared module and pathway records: src/data/learning.ts
• Detailed learning and support content: src/pages/modules.astro, src/pages/learning-pathways.astro and src/pages/support.astro
• Module and pathway card markup: src/components/ModuleCard.astro and src/components/PathwayCard.astro
• Subject course lists: each src/pages/subjects/*/index.astro
• Course detail data: src/pages/courses/[slug].astro
• Shared navigation and metadata: src/layouts/Layout.astro
• Brand and design rules: docs/branding.md

Subject and course information is duplicated in several templates. When changing a course, check the learning data, subject page, courseData, getStaticPaths() and all links to that course.

Local development

Requirements:

• Node.js 22 recommended
• npm 9.6.5 or newer

Install the locked dependencies and start Astro:

npm ci
npm run dev

Astro prints the local development URL in the terminal.

Available commands:

Command	Purpose
npm run dev	Start the development server
npm start	Alias for the development server
npx astro check	Run Astro and TypeScript diagnostics
npm run build	Generate the production site in dist/
npm run preview	Preview a production build locally

Before publishing a public-facing change, run:

npx astro check
npm run build

Custom domain paths

This repository is deployed at the root of the custom domain tabletoplearning.co.uk.

astro.config.mjs contains:

exportdefaultdefineConfig({site: 'https://tabletoplearning.co.uk',});

Internal cross-page links use Astro's configured base URL. Existing pages normalize it like this:

constbase=`${import.meta.env.BASE_URL.replace(/\/$/,'')}/`;

Example:

<ahref={`${base}about`}>About</a>

Root-relative paths such as /about, /courses or /images/logo.png resolve from the custom domain root.

Deployment

.github/workflows/deploy.yml deploys the website when code is pushed to main. It can also be started manually from GitHub Actions.

The workflow:

1. Checks out the repository.
2. Uses Node.js 22.
3. Runs npm ci.
4. Runs npm run build.
5. Uploads dist/ as a GitHub Pages artifact.
6. Deploys with actions/deploy-pages.

The repository's Pages source must remain configured for GitHub Actions.

Branding and accessibility

Public-facing work must follow docs/branding.md. Important requirements include:

• Use the name TableTopLearning exactly.
• Prefer learner over student.
• Reuse the existing CSS tokens and components.
• Preserve keyboard controls, visible focus states and semantic elements.
• Preserve the responsive menu and reduced-motion behaviour.
• Keep the experience concise and readable on mobile.

Documentation for developers and AI tools

• Technical AI document: architecture, routes, data flow, integrations, standards and development rules.
• Human-friendly web app guide: purpose, audiences, features, interactions and benefits.
• Brand guidelines: cross-channel visual, voice, writing and accessibility standards.
• Repository instructions: mandatory rules for coding agents.

When giving this repository to an AI assistant, provide AGENTS.md, docs/technical-reference.md and docs/branding.md first. Tell the assistant to treat src/ as the active app, preserve root-domain deployment and not assume that authentication, payments, a backend, a database or a CMS already exist.

Contribution checklist

Before submitting changes:

• Confirm the change belongs in the active Astro app.
• Follow the brand guide for any public content or styling.
• Keep internal links compatible with deployment at the custom domain root.
• Reuse existing layouts, classes and design tokens.
• Update duplicated course data consistently.
• Preserve responsive and keyboard behaviour.
• Run npx astro check.
• Run npm run build.