mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 05:08:18 +00:00
59 lines
2.7 KiB
Markdown
59 lines
2.7 KiB
Markdown
---
|
|
templateEngineOverride: njk
|
|
layout: layouts/page.njk
|
|
title: CLI
|
|
description: Use the Basecoat CLI and template macros.
|
|
icon: square-terminal
|
|
toc:
|
|
- label: Use the CLI
|
|
id: cli
|
|
- label: Use Nunjucks or Jinja macros
|
|
id: macros
|
|
---
|
|
|
|
{% from "macros/code_block.njk" import code_block %}
|
|
{% from "tabs.njk" import tabs %}
|
|
|
|
<h2 id="cli"><a href="#cli">Use the CLI</a></h2>
|
|
|
|
<div class="prose">
|
|
<p>If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for complex components (e.g. <a href="/components/dialog">Dialog</a>). It will copy the JS and <code>.html.jinja</code> or <code>.njk</code> macros into your code.</p>
|
|
<p>For example, to add the Dialog component, run one of the following commands:</p>
|
|
</div>
|
|
|
|
{% set code_npm_exec %}npx basecoat-cli add dialog{% endset %}
|
|
{% set code_pnpm_exec %}pnpm dlx basecoat-cli add dialog{% endset %}
|
|
{% set code_bun_exec %}bunx basecoat-cli add dialog{% endset %}
|
|
{% set code_yarn_exec %}yarn dlx basecoat-cli add dialog{% endset %}
|
|
{% set exec_tabsets = [
|
|
{ tab: "npm", panel: code_block(code_npm_exec, class="") },
|
|
{ tab: "pnpm", panel: code_block(code_pnpm_exec, class="") },
|
|
{ tab: "bun", panel: code_block(code_bun_exec, class="") },
|
|
{ tab: "yarn", panel: code_block(code_yarn_exec, class="") }
|
|
] %}
|
|
{{ tabs(id="cli-execution", tabsets=exec_tabsets, label="Execute CLI commands to add components:") }}
|
|
|
|
<div class="prose my-6">
|
|
<p>You will be asked to confirm the template engine and destination directory for the JavaScript and macros.</p>
|
|
</div>
|
|
|
|
<h2 id="macros"><a href="#macros">Use Nunjucks or Jinja macros</a></h2>
|
|
|
|
<div class="prose">
|
|
<p>For more complex components, you can use <a href="https://mozilla.github.io/nunjucks/" target="_blank">Nunjucks</a> or <a href="https://jinja.palletsprojects.com" target="_blank">Jinja</a> macros to help generate the HTML and JavaScript code.</p>
|
|
<p>To install them, either <a href="https://github.com/hunvreus/basecoat/tree/main/src" target="_blank">copy them directly from the GitHub repository</a> or use <a href="#cli">the CLI</a>.</p>
|
|
<p>For example, here's how you could use the <code>select()</code> macro to generate the HTML and JavaScript code for a <a href="/components/select">Select</a> component:</p>
|
|
</div>
|
|
|
|
{% set code %}{% raw %}{% call select() %}
|
|
<div role="group" aria-labelledby="fruit-options-label">
|
|
<span id="fruit-options-label" role="heading">Fruits</span>
|
|
<div role="option" data-value="apple">Apple</div>
|
|
<div role="option" data-value="banana">Banana</div>
|
|
<div role="option" data-value="blueberry">Blueberry</div>
|
|
<div role="option" data-value="pineapple">Grapes</div>
|
|
<div role="option" data-value="pineapple">Pineapple</div>
|
|
</div>
|
|
{% endcall %}{% endraw %}{% endset %}
|
|
{{ code_block(code, "jinja") }}
|