Layouts

---
import Layout from '@/layouts/Layout.astro';
---

<Layout
  title="About | My Portfolio"
  description="Learn more about my journey and experience"
  type="website"
>
  <div class="container-fluid py-20">
    <h1>About Me</h1>
    <p>Your content here...</p>
  </div>
</Layout>

<html>
  <head>
    <!-- SEO Meta Tags -->
    <meta name="description" content={description} />
    
    <!-- Open Graph Tags -->
    <meta property="og:title" content={openGraphTitle} />
    
    <!-- Structured Data -->
    <script type="application/ld+json">
      <!-- JSON-LD for rich search results -->
    </script>
    
    <!-- Theme Initialization -->
    <script is:inline>
      <!-- Prevents flash of unstyled content -->
    </script>
  </head>
  
  <body>
    <BackgroundArt />
    <Navbar />
    <main class="min-h-screen">
      <slot />
    </main>
    <Footer />
    <StickySocials />
  </body>
</html>

---
import BlogLayout from '@/layouts/BlogLayout.astro';
import { getEntry } from 'astro:content';

const { slug } = Astro.params;
const post = await getEntry('blog', slug);
const { Content } = await post.render();
---

<BlogLayout
  title={post.data.title}
  description={post.data.description}
  author={post.data.author}
  dateCreated={post.data.dateCreated}
  tags={post.data.tags}
  coverImage={post.data.cover_image}
  readingTime={post.data.readingTime}
  relatedBlogs={relatedPosts}
>
  <Content />
</BlogLayout>

<Navbar />

<!-- Add a banner -->
<div class="bg-primary text-primary-foreground p-4 text-center">
  <p>🎉 New blog post available! <a href="/blog/latest">Read now</a></p>
</div>

<main>
  <slot />
</main>

<head>
  <!-- Existing head content -->
  
  <!-- Plausible Analytics -->
  <script defer data-domain="yourdomain.com" 
    src="https://plausible.io/js/script.js">
  </script>
</head>

<div class:list={[
  'prose prose-lg',
  'prose-headings:font-bold prose-headings:text-foreground',
  'prose-p:text-muted-foreground',
  'prose-a:text-secondary prose-a:no-underline hover:prose-a:underline',
  'prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5',
  'max-w-none'
]}>
  <slot />
</div>

{
  '@context': 'https://schema.org',
  '@graph': [
    {
      '@type': 'WebSite',
      url: siteUrl,
      name: siteName,
      description: defaultDescription,
    },
    {
      '@type': 'Person',
      name: 'Lewis Kori',
      jobTitle: siteConfig.tagline,
      // ... more fields
    }
  ]
}