SrJuggernaut/juggernautplays_com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
SrJuggernaut
2026-02-25 17:57:06 -06:00
parent ad3eb66144
commit 80f46db951
2 changed files with 137 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/layout/Basic.astro Normal file
View File

@@ -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 descripció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>

74
src/components/layout/parts/Header.astro Normal file
View File

@@ -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>