feat(layout): add Basic and Header components for site layout

2026-02-25 17:57:06 -06:00
parent ad3eb66144
commit 80f46db951
2 changed files with 137 additions and 0 deletions
--- a/src/components/layout/Basic.astro
+++ b/src/components/layout/Basic.astro
@@ -0,0 +1,63 @@
+---
+import Footer from '@/components/layout/parts/Footer.astro'
+import Header from '@/components/layout/parts/Header.astro'
+import '@/styles/global.css'
+import '@fontsource-variable/roboto'
+import '@fontsource/orbitron/900.css'
+import '@fortawesome/fontawesome-free/css/brands.min.css'
+import '@fortawesome/fontawesome-free/css/fontawesome.min.css'
+import '@fortawesome/fontawesome-free/css/solid.min.css'
+import { css } from '@styled-system/css'
+
+export interface Props {
+  title?: string
+  description?: string
+  imageUrl?: string
+}
+
+const bodyClass = css({
+  display: 'flex',
+  flexDirection: 'column',
+  height: 'calc(100vh)'
+})
+
+const mainClass = css({
+  flexGrow: 1
+})
+
+const { title, description, imageUrl } = Astro.props
+const permalink = new URL(Astro.url.pathname, Astro.site).href
+const seoTitle =
+  title === undefined ? 'Juggernaut Plays' : `${title} | Juggernaut Plays`
+const seoDescription =
+  description === undefined
+    ? 'Oops, parece que no hay descripción.'
+    : description
+const seoImage =
+  imageUrl === undefined ? 'https://srjuggernaut.dev/DefaultOG.png' : imageUrl
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width">
+    <!-- SEO -->
+
+    <title>{seoTitle}</title>
+    <meta name="description" content={seoDescription}>
+
+    <!-- Open Graph -->
+
+    <meta property="og:title" content={seoTitle}>
+    <meta property="og:description" content={seoDescription}>
+    <meta property="og:url" content={permalink}>
+    <meta property="og:image" content={seoImage}>
+  </head>
+  <body class={bodyClass}>
+    <Header />
+    <main class={mainClass}><slot /></main>
+    <Footer />
+  </body>
+</html>
--- a/src/components/layout/parts/Header.astro
+++ b/src/components/layout/parts/Header.astro
@@ -0,0 +1,74 @@
+---
+import { css } from '@styled-system/css'
+import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
+import { srOnlyClass } from '@/styles/srOnly'
+
+const headerClass = css({
+  backgroundColor: 'neutral.2',
+  color: 'neutral.12'
+})
+
+const headerContainerClass = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  margin: '0 auto',
+  padding: 'md',
+  width: {
+    base: '100%',
+    sm: 'breakpoint-sm',
+    md: 'breakpoint-md',
+    lg: 'breakpoint-lg',
+    xl: 'breakpoint-xl',
+    '2xl': 'breakpoint-2xl'
+  }
+})
+
+const headerLogoClass = css({
+  fill: 'neutral.12',
+  width: '32px',
+  height: 'auto'
+})
+
+const headerMenuClass = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'md'
+})
+
+const headerMenuLinkClass = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'sm',
+  paddingInline: 'md',
+  paddingBlock: 'sm',
+  borderRadius: 'sm',
+  textDecoration: 'none',
+  _hover: {
+    backgroundColor: 'primary.3'
+  }
+})
+---
+
+<header class={headerClass}>
+  <div class={headerContainerClass}>
+    <div>
+      <a href="/">
+        <SrJuggernautLogo className={headerLogoClass} />
+        <span class={srOnlyClass}>Ir al inicio</span>
+      </a>
+    </div>
+    <nav>
+      <menu class={headerMenuClass}>
+        <li>
+          <a
+            class={headerMenuLinkClass}
+            href="https://blog.juggernautplays.com"
+          >
+            Blog
+          </a>
+        </li>
+      </menu>
+    </nav>
+  </div>
+</header>