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

feat(components): add the accordion component

Browse source
This commit is contained in:
Alexander Navarro 2024-12-26 16:44:32 -03:00
parent 7af58fe829
commit e0ed5a5ddd
10 changed files with 159 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/website/_scripts/build.ts
View file

@ -9,6 +9,11 @@ import { HTMLComponents } from "@mini-strap/components";
const { values } = parseArgs({
args: Bun.argv,
options: {
production: {
type: "boolean",
short: "p",
default: false,
},
filter: {
type: "string",
short: "f",
@ -64,7 +69,7 @@ if (["all", "sass"].includes(filter)) {
outdir: `${outdir}/css`,
naming: "[name].css",
plugins: [sassPlugin],
minify: true,
minify: values.production,
// On by default in Bun v1.2+
html: true,
@ -77,8 +82,8 @@ if (["all", "js", "ts"].includes(filter)) {
entrypoints: ["./js/index.ts"],
outdir: `${outdir}/js`,
target: "browser",
splitting: true,
minify: true,
splitting: values.production,
minify: values.production,
});
}

25
packages/website/content/components/accordion.md
View file

@ -4,3 +4,28 @@ section = ["Components"]
+++
# accordion.md
Example:
```html
<ul class="msp-list-unstyle msp-accordion">
<li>
<a href="/">Overview</a>
</li>
{% for item in get_taxonomy(kind="section") | get(key="items") %}
<li class="msp-accordion-item">
<a class="msp-accordion-header" href="#">{{ item.name | title }}</a>
<div class="msp-accordion-collapse">
<ul class="msp-list-unstyle msp-accordion-content">
{% for page in item.pages %}
<li class="">
<a href="{{ page.permalink }}">{{ page.title | default(value=page.slug) | title }}</a>
</li>
{% endfor %}
</ul>
</div>
</li>
{% endfor %}
</ul>
```

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

@ -1 +1,2 @@
import "@mini-strap/components/accordion/index.ts";
console.log("hello world!");

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

@ -1,4 +1,6 @@
@use "@mini-strap/core";
@use "@mini-strap/components/navbar/navbar.scss";
@use "@mini-strap/components/accordion/accordion.scss";
html {
// background-color: red;

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

@ -8,8 +8,9 @@
<title>alecodes.page</title>
<ViewTransitions />
<script src="/js/index.js"></script>
{% block scripts %}<script src="/js/index.js"></script>{% endblock %}
<link rel="stylesheet" href="/css/style.css" />
</head>
<body transition:animate="fade">

22
packages/website/templates/partials/header.html
View file

@ -1,18 +1,20 @@
<ul>
<ul class="msp-list-unstyle msp-accordion">
<li>
<a href="/">Overview</a>
</li>
{% for item in get_taxonomy(kind="section") | get(key="items") %}
<li>
<a href="{{ get_url(path="@/" ~ item.slug ~ "/_index.md") }}">{{ item.name | title }}</a>
<ul class="msp-d-none">
{% for page in item.pages %}
<li>
<a href="{{ page.permalink }}">{{ page.title | default(value=page.slug) | title }}</a>
</li>
{% endfor %}
</ul>
<li class="msp-accordion-item">
<a class="msp-accordion-header" href="{{ get_url(path="@/" ~ item.slug ~ "/_index.md") }}">{{ item.name | title }}</a>
<div class="msp-accordion-collapse">
<ul class="msp-list-unstyle msp-accordion-content">
{% for page in item.pages %}
<li class="">
<a href="{{ page.permalink }}">{{ page.title | default(value=page.slug) | title }}</a>
</li>
{% endfor %}
</ul>
</div>
</li>
{% endfor %}
</ul>