Overview
The Layout.astro component is the base layout for the RobTop Games website. It provides the foundational HTML structure, SEO meta tags, Bootstrap CSS framework, custom styling, and integrates the Header, Footer, and Alert components.
Props Interface
The base layout accepts the following props:
The page title that appears in the browser tab and search results
The page description for SEO and social media sharing
Optional Open Graph image URL for social media previews
Optional canonical URL for SEO to prevent duplicate content issues
Source Code
---
interface Props {
title: string;
description: string;
image?: string;
canonicalURL?: string;
}
const { title, description, image, canonicalURL } = Astro.props;
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import Alert from "../components/Alert.astro";
import SEO from "../components/SEO.astro";
---
<!doctype html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<title>{title}</title>
<SEO title={title} description={description} image={image} canonicalURL={canonicalURL} />
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ABeeZee&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="/assets/css/Pusab.css" />
<link rel="stylesheet" href="/assets/css/bss-overrides.css" />
<link rel="stylesheet" href="/assets/css/Overlay-Video-Player.css" />
<link rel="stylesheet" href="/assets/css/Responsive-Youtube-Embed.css" />
<link
rel="shortcut icon"
href="https://www.robtopgames.com/favicon-32x32.png"
type="image/x-icon"
/>
</head>
<body
style="background: linear-gradient(#0281C6, #00385C);background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;"
>
<Header />
<main>
<slot />
</main>
<Footer />
<Alert />
<script is:inline src="/assets/bootstrap/js/bootstrap.min.js"></script>
<script is:inline src="/assets/js/Overlay-Video-Player-script.js"></script>
</body>
</html>
Key Features
HTML Structure
The layout provides a complete HTML document structure with:
- Head section: Meta tags, title, SEO component, and stylesheet links
- Body section: Header, main content slot, Footer, and Alert components
- Scripts: Bootstrap JavaScript and video player functionality
SEO Integration
The layout integrates the SEO component which handles:
- Open Graph meta tags for social media
- Twitter Card meta tags
- Canonical URLs for duplicate content management
- Meta descriptions and titles
Bootstrap & Styling
The layout includes:
- Bootstrap 5: Core CSS framework from
/assets/bootstrap/css/bootstrap.min.css
- Google Fonts: ABeeZee and Abel font families
- Bootstrap Icons: Icon library (v1.13.1)
- Custom CSS: Pusab theme, overrides, video player, and responsive YouTube embed styles
- Gradient Background: Blue gradient (
#0281C6 to #00385C) with fixed attachment
Component Integration
- Header: Site-wide navigation at the top
- Footer: Site-wide footer at the bottom
- Alert: Global alert/notification component
- Slot: Main content area where page content is injected
Usage Examples
Basic Usage
With All Props
With SEO Image
---
import Layout from "../layouts/Layout.astro";
import Socials from "../components/Socials.astro";
import Video from "../components/Video.astro";
import Apps from "../components/Apps.astro";
---
<Layout title="RobTop Games" description="">
<Socials />
<Video />
<Apps />
</Layout>
---
import Layout from "../layouts/Layout.astro";
import Text from "../components/Text.astro";
---
<Layout
title="YouTube - RobTop Games"
description="RobTop Games video monetization policy and guidelines for content creators."
>
<Text title="RobTop Games: Monetization" />
</Layout>
---
import Layout from "../layouts/Layout.astro";
---
<Layout
title="Game Updates"
description="Latest updates and news from RobTop Games"
image="https://www.robtopgames.com/assets/img/og-image.png"
canonicalURL="https://www.robtopgames.com/updates"
>
<div class="container">
<h1>Latest Updates</h1>
<!-- Page content -->
</div>
</Layout>
