https://github.com/bent10/posthtml-bootstrap
A PostHTML plugin that allows you to use Bootstrap components directly in your HTML code.
https://github.com/bent10/posthtml-bootstrap
bootstrap posthtml posthtml-component template ui x-tag
Last synced: about 2 months ago
JSON representation
A PostHTML plugin that allows you to use Bootstrap components directly in your HTML code.
- Host: GitHub
- URL: https://github.com/bent10/posthtml-bootstrap
- Owner: bent10
- License: mit
- Created: 2024-04-05T21:41:18.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-19T16:15:54.000Z (about 2 months ago)
- Last Synced: 2026-01-19T22:43:39.492Z (about 2 months ago)
- Topics: bootstrap, posthtml, posthtml-component, template, ui, x-tag
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/posthtml-bootstrap
- Size: 226 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: license
Awesome Lists containing this project
README
# posthtml-bootstrap
A [PostHTML](https://github.com/posthtml/posthtml/) plugin that allows you to use [Bootstrap](https://getbootstrap.com/) components directly in your HTML code.
## Install
To get started, install the package using npm or yarn:
```bash
npm install -D posthtml-bootstrap
# Or
yarn add -D posthtml-bootstrap
```
## Usage
```js
import posthtml from 'posthtml'
import posthtmlComponent from 'posthtml-component'
import { defineBootstrapUIConfig } from 'posthtml-bootstrap'
// Use default configuration
const config = defineBootstrapUIConfig()
// Create a PostHTML processor with the plugin
const processor = posthtml([posthtmlComponent(config)])
// Your HTML with Bootstrap components
const htmlString = `
Click me!
`
processor
.process(htmlString, {
recognizeSelfClosing: true
})
.then(result => {
console.log(result.html) // Processed HTML with Bootstrap components
})
```
A wide range of Bootstrap components are available for use with this plugin. You can find the complete list of components in the [`ui`](https://github.com/bent10/posthtml-bootstrap/tree/main/public/ui) directory.
> **Note:** Detailed documentation for each component is currently under development 😉
## Configuration Options
To configure Bootstrap UI, use the following JavaScript snippet:
```js
import { defineBootstrapUIConfig } from 'posthtml-bootstrap'
const config = defineBootstrapUIConfig({
// Options go here
})
```
Please refer to the [`posthtml-component`](https://posthtml.github.io/posthtml-components/docs.html#options) documentation to review the available options.
### Opinionated options:
The following options are opinionated and cannot be changed:
- **root**: (string) String value as the root path for component lookup. Always `process.cwd()`.
- **tagPrefix**: (string) The prefix used for component tags in your HTML. Always `ui:`.
- **yield**: (string) The tag name used for the main content area within a component. Always ``.
- **attribute**: (string) The attribute used to specify the component path within a tag. Always `@src`.
## Extended Components
`posthtml-bootstrap` allows you to seamlessly integrate your own custom components alongside the built-in Bootstrap components. This is achieved by referencing the folder path containing your custom components in the `folders` property of the configuration.
1. **Create your custom components:**
Start by creating your custom components as HTML files within a dedicated folder. For example, let's create a `components` folder and add a simple `foo.html` component:
```html
This is a custom foo component.
```
2. **Configure the plugin:**
In your JavaScript file, modify the configuration to include the path to your custom components folder:
```js
import { defineBootstrapUIConfig } from 'posthtml-bootstrap'
const config = defineBootstrapUIConfig({
folders: ['views/components'] // Add your custom components folder
})
```
3. **Use your custom components:**
Now you can use your custom component in your HTML just like any other Bootstrap component:
```html
```
## Custom Utilities
The `utilities` option allows you to provide custom functions that can be accessed within the `` block of a component.
```js
const config = defineBootstrapUIConfig({
utilities: {
formatPrice(price) {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(+price)
}
}
})
```
Then, use your custom utility function within a component's props script:
```html
<!-- views/components/foo.html -->
<script props>
const { price } = props
module.exports = {
formattedPrice: formatPrice(price)
}
The price is: {{formattedPrice}}
```
Finally, use the `ui:foo` component like so:
```html
```
This will render the formatted price using your custom `formatPrice` function:
```html
The price is: $1,000.00
```
## Contributing
We 💛 issues.
When committing, please conform to [the semantic-release commit standards](https://www.conventionalcommits.org/). Please install `commitizen` and the adapter globally, if you have not already.
```bash
npm i -g commitizen cz-conventional-changelog
```
Now you can use `git cz` or just `cz` instead of `git commit` when committing. You can also use `git-cz`, which is an alias for `cz`.
```bash
git add . && git cz
```
## License
A project by [Stilearning](https://stilearning.com) © 2024.