feat(website): add build script for frontend dependencies
This commit is contained in:
parent
7e8dc4ec5a
commit
698294c74e
10 changed files with 181 additions and 16 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -313,6 +313,12 @@
|
||||||
border-radius: var(--prj-border-radius);
|
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 {
|
.msp-text-none {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
6
packages/website/.gitignore
vendored
6
packages/website/.gitignore
vendored
|
|
@ -1,7 +1,7 @@
|
||||||
|
|
||||||
# Manually linked deps managed by bun
|
# Compiled assets managed by bun
|
||||||
sass/@**
|
static/css/**/*
|
||||||
|
static/js/**/*
|
||||||
|
|
||||||
# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
|
# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
|
||||||
|
|
||||||
|
|
|
||||||
66
packages/website/_scripts/build.ts
Normal file
66
packages/website/_scripts/build.ts
Normal 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`);
|
||||||
|
|
@ -3,8 +3,8 @@ base_url = "https://mini-strap.alecodes.page"
|
||||||
|
|
||||||
output_dir = "dist"
|
output_dir = "dist"
|
||||||
|
|
||||||
# Whether to automatically compile all Sass files in the sass directory
|
# Managed by bun
|
||||||
compile_sass = true
|
compile_sass = false
|
||||||
|
|
||||||
# Whether to build a search index to be used later on by a JavaScript library
|
# Whether to build a search index to be used later on by a JavaScript library
|
||||||
build_search_index = true
|
build_search_index = true
|
||||||
|
|
|
||||||
1
packages/website/js/index.ts
Normal file
1
packages/website/js/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
console.log("hello world!");
|
||||||
|
|
@ -6,13 +6,14 @@
|
||||||
"dev": "zola serve --port 3000 --fast"
|
"dev": "zola serve --port 3000 --fast"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mini-strap/core": "workspace:*"
|
"@mini-strap/core": "workspace:*",
|
||||||
|
"@mini-strap/components": "workspace:*"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/bun": "latest"
|
"@types/bun": "latest",
|
||||||
|
"sass": "^1.83.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"typescript": "^5.0.0"
|
"typescript": "^5.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "@mini-strap/core/style.scss";
|
@use "@mini-strap/core";
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,20 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang={i18next.language}>
|
<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" />
|
<title>alecodes.page</title>
|
||||||
<meta name="generator" content={Astro.generator} />
|
|
||||||
<HeadHrefLangs />
|
|
||||||
<title>{title}</title>
|
|
||||||
<ViewTransitions />
|
<ViewTransitions />
|
||||||
|
|
||||||
<link rel="stylesheet" href="style.css" />
|
<script src="/js/index.js"></script>
|
||||||
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body transition:animate="fade">
|
<body transition:animate="fade">
|
||||||
<header class="position-sticky py-1 py-lg-3">
|
<header class="position-sticky py-1 py-lg-3">
|
||||||
<Navbar />
|
{% include "partials/navbar.html" %}
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
|
|
|
||||||
93
packages/website/templates/partials/navbar.html
Normal file
93
packages/website/templates/partials/navbar.html
Normal 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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue