Skip to main content
The RobTop Games Web project is built with Astro and uses a collection of reusable components to create a consistent user experience across the site.

​
Component Architecture

All components are located in src/components/ and are written as Astro components (.astro files). These components leverage:
  • Astro’s component syntax for templating and props
  • Bootstrap 5 for responsive layouts and styling
  • Bootstrap Icons for iconography
  • Scoped styles for component-specific CSS

​
Available Components

Header

Site navigation with responsive menu and logo

Footer

Site footer with contact info and social links

Video

YouTube video embed with custom thumbnail

Apps

App store download links for Geometry Dash

Socials

Social media links with animated icons

Alert

Fixed position notification banner

Text

Content card with title and body text

SEO

Meta tags for search engines and social media

​
Import and Usage Pattern

All components follow a consistent import pattern:
src/pages/index.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import Alert from "../components/Alert.astro";
Components are then used as self-closing or regular tags: 
<Header />
<main>
  <!-- Page content -->
</main>
<Footer />
<Alert />

​
Component Composition

The site uses a main Layout.astro component that includes the core structural components:
src/layouts/Layout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import Alert from "../components/Alert.astro";
import SEO from "../components/SEO.astro";

<html>
  <head>
    <SEO title={title} description={description} />
  </head>
  <body>
    <Header />
    <main>
      <slot />
    </main>
    <Footer />
    <Alert />
  </body>
</html>

​
Styling Conventions

Components use:
  • Bootstrap utility classes for layout and spacing
  • Scoped <style> blocks for component-specific styling
  • CSS transitions for hover effects and animations
  • Responsive design with Bootstrap’s breakpoint system

​
Next Steps

Explore Components

Dive into individual component documentation

Layout Structure

Learn about page layouts

Build docs developers (and LLMs) love

Get started for freeTalk to us