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

6
packages/core/src/_utils.scss
View file

@ -313,6 +313,12 @@
border-radius: var(--prj-border-radius);
}
@each $index, $variable, $value in $spacings {
.msp-border-#{$index} {
border: #{$index}px var(--msp-border-style) var(--msp-border-color);
}
}
.msp-text-none {
text-transform: none;
}

6
packages/website/.gitignore vendored
View file

@ -1,7 +1,7 @@
# Manually linked deps managed by bun
sass/@**
# Compiled assets managed by bun
static/css/**/*
static/js/**/*
# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore

66
packages/website/_scripts/build.ts Normal file
View file

@ -0,0 +1,66 @@
import type { BuildConfig, BunPlugin, PluginBuilder } from "bun";
import type { FileImporter } from "sass";
const outdir = "./static";
const nodeModuleImporter: FileImporter<"async"> = {
findFileUrl(url) {
if (url.startsWith("@")) {
return new URL(import.meta.resolve(url));
}
return null;
},
};
const sassPlugin: BunPlugin = {
name: "Sass Loader",
async setup(build: PluginBuilder) {
const sass = await import("sass");
build.onLoad({ filter: /\.scss$/ }, async ({ path }) => {
// read and compile it with the sass compiler
const result = await sass.compileAsync(path, {
importers: [nodeModuleImporter],
});
return {
loader: "css",
contents: result.css,
};
});
},
};
const assets: BuildConfig[] = [
{
entrypoints: ["./sass/style.scss"],
outdir: `${outdir}/css`,
naming: "[name].css",
plugins: [sassPlugin],
minify: true,
// On by default in Bun v1.2+
html: true,
experimentalCss: true,
},
{
entrypoints: ["./js/index.ts"],
outdir: `${outdir}/js`,
target: "browser",
splitting: true,
minify: true,
},
];
await Promise.all(
assets.map(async (item) => {
const result = await Bun.build(item);
if (!result.success) {
throw new AggregateError(result.logs, "Build failed");
}
}),
);
console.log(`${Bun.color("#a6da95", "ansi")}Assets succesfully build!\x1b[0m`);

4
packages/website/config.toml
View file

@ -3,8 +3,8 @@ base_url = "https://mini-strap.alecodes.page"
output_dir = "dist"
# Whether to automatically compile all Sass files in the sass directory
compile_sass = true
# Managed by bun
compile_sass = false
# Whether to build a search index to be used later on by a JavaScript library
build_search_index = true

1
packages/website/js/index.ts Normal file
View file

@ -0,0 +1 @@
console.log("hello world!");

7
packages/website/package.json
View file

@ -6,13 +6,14 @@
"dev": "zola serve --port 3000 --fast"
},
"dependencies": {
"@mini-strap/core": "workspace:*"
"@mini-strap/core": "workspace:*",
"@mini-strap/components": "workspace:*"
},
"devDependencies": {
"@types/bun": "latest"
"@types/bun": "latest",
"sass": "^1.83.0"
},
"peerDependencies": {
"typescript": "^5.0.0"
}
}

2
packages/website/sass/style.scss
View file

@ -1,4 +1,4 @@
@import "@mini-strap/core/style.scss";
@use "@mini-strap/core";
html {
// background-color: red;

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>