alecodes/mini-strap
2
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat(website): add build script for frontend dependencies

Browse source
This commit is contained in:
Alexander Navarro 2024-12-23 19:40:58 -03:00
parent 7e8dc4ec5a
commit 698294c74e
10 changed files with 181 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/website/templates/base.html
View file

@ -1,22 +1,20 @@
<!DOCTYPE html>
<html lang={i18next.language}>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<HeadHrefLangs />
<title>{title}</title>
<title>alecodes.page</title>
<ViewTransitions />
<link rel="stylesheet" href="style.css" />
<script src="/js/index.js"></script>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body transition:animate="fade">
<header class="position-sticky py-1 py-lg-3">
<Navbar />
{% include "partials/navbar.html" %}
</header>
<main>
{% block content %}{% endblock %}

93
packages/website/templates/partials/navbar.html Normal file
View file

@ -0,0 +1,93 @@
<div id="main-navbar" class="pt-1">
<nav class="navbar navbar-desktop msp-d-none msp-d-lg-block msp-container">
<ul class="msp-list-unstyle msp-hstack">
<li class="nav-item">
<a class="nav-link" href={link.href}>{link.text}</a>
</li>
</ul>
</nav>
<div class="msp-text-end msp-d-lg-none">
<OffCanvasBtn />
<OffCanvas>
<nav class="navbar navbar-mobile">
<ul class="list-unstyle text-start">
<li class="nav-item mb-3">
<a class="nav-link" href={link.href}>{link.text}</a>
</li>
</ul>
</nav>
</OffCanvas>
</div>
</div>
<script>
const setActiveLink = () => {
const links =
document.querySelectorAll < HTMLAnchorElement > (`#main-navbar a`);
links.forEach((link) => {
if (link.pathname === '/' && location.pathname === '/') {
link.classList.add('active');
return;
}
if (link.pathname === '/' && location.pathname !== '/') {
link.classList.remove('active');
return;
}
location.pathname.startsWith(link.pathname) ?
link.classList.add('active') :
link.classList.remove('active');
});
};
// Add active class to the current link
document.addEventListener('astro:page-load', setActiveLink, {
once: true
});
document.addEventListener('astro:after-swap', setActiveLink);
</script>
<style lang="scss">
nav {
width: 100%;
}
.navbar-desktop ul {
width: fit-content;
margin-left: auto;
.nav-item {
margin-bottom: 0;
}
}
ul {
padding: 0;
}
li>a {
padding: 0.25rem 0.5rem;
}
a {
--boder-color: transparent;
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;
transition: background-color 200ms, color 200ms;
}
a.active {
border: 1px solid var(--prj-accent-bg);
}
a:hover {
--border-color: var(--prj-accent-bg);
background-color: var(--prj-accent-bg);
color: var(--prj-accent-text);
border: 1px solid var(--border-color);
}
</style>