alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

update before work

Browse source
This commit is contained in:
Alexander Navarro 2023-08-20 10:33:52 -04:00
parent 6917b0c1bd
commit bced6944f6
3 changed files with 46 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/Navbar.astro
View file

@ -1,6 +1,6 @@
--- ---
interface Props { interface Props {
links: { href: string, text: string }[]; links: { href: string; text: string }[];
} }
const { links } = Astro.props; const { links } = Astro.props;
@ -8,11 +8,22 @@ const { links } = Astro.props;
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <nav class="navbar navbar-expand-lg bg-body-tertiary">
<ul class="list-unstyle hstack"> <ul class="list-unstyle hstack">
{links.map(link =>( {
<li class="nav-item"> links.map((link) => (
<a class:list={"nav-link", { active: Astro.url.pathname === link.href}} href={link.href}>{link.text}</a> <li class="nav-item">
</li> {/* TODO: active logic doesnt work in prod because is compiled --> */}
))} <a
class:list={[
'nav-link',
{ active: Astro.url.pathname === link.href },
]}
href={link.href}
>
{link.text}
</a>
</li>
))
}
</ul> </ul>
</nav> </nav>

45
src/layouts/Layout.astro
View file

@ -1,43 +1,42 @@
--- ---
export interface Props { export interface Props {
title: string; title: string;
} }
const { title } = Astro.props; const { title } = Astro.props;
import "../assets/style/global.css"; import '../assets/style/global.css';
import Navbar from '../components/Navbar.astro'; import Navbar from '../components/Navbar.astro';
const navbarLinks = [ const navbarLinks = [
{ href: "/", text: "Home" }, { href: '/', text: 'Home' },
{ href: "/blog", text: "Blog" }, { href: '/blog', text: 'Blog' },
{ href: "/portafolio", text: "Portafolio" }, { href: '/portafolio', text: 'Portafolio' },
{ href: "/curriculum", text: "Curriculum" }, { href: '/curriculum', text: 'Curriculum' },
{ href: "/contact", text: "Contact" }, { href: '/contact', text: 'Contact' },
] ];
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="Astro description"> <meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{title}</title> <title>{title}</title>
<!-- Reset and normilize styles --> <!-- Reset and normilize styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
</head>
</head> <body>
<body>
<header> <header>
<Navbar links={navbarLinks}/> <Navbar client:load links={navbarLinks} />
</header> </header>
<main> <main>
<slot /> <slot />
</main> </main>
</body> </body>
</html> </html>
<style> <style>

7
src/pages/blog.astro Normal file
View file

@ -0,0 +1,7 @@
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Blog">
<h1>Blog</h1>
</Layout>