Download the PHP package lemmon/kirby-callouts without Composer
On this page you can find all versions of the php package lemmon/kirby-callouts. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download lemmon/kirby-callouts
More information about lemmon/kirby-callouts
Files in lemmon/kirby-callouts
Package kirby-callouts
Short Description Kirby plugin that renders GitHub-style callouts
License MIT
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package kirby-callouts
Callouts for Kirby
Bring GitHub-style callouts (a.k.a. admonitions) to Kirby using the familiar [!TYPE] blockquote syntax.
Your editors keep writing Markdown/KirbyText; your site gets polished, theme-ready callouts.
Motivation
- Kirby ships with great KirbyText (Markdown + KirbyTags) support, but callouts usually mean hand-written HTML or block blueprints.
- Documentation platforms such as GitHub, Svelte, and Docusaurus already rely on
[!TYPE]callouts, so let Kirby join the club. - Works out of the box with optional themes and still respects custom callout types your team invents.
Installation
Composer
Git Submodule
Manual
Download the plugin and extract it to /site/plugins/callouts.
Usage
Keep writing Markdown/KirbyText as usual-whether you’re in a textarea field or a markdown block:
Add an inline label to customize the header text without changing the callout type:
Features
- Turn
> [!TYPE]blocks into callout wrappers automatically. - Supports NOTE, TIP, IMPORTANT, WARNING, CAUTION, and any custom type (e.g.
[!CHALLENGE]->callout--challenge). - Supports custom inline labels after
[!TYPE]for header text overrides. - Configurable wrapper (
divorblockquote) and CSS class prefix. - Optional HTML header injection for icon/label markup (on by default).
- Inline SVG icons inherit the callout color and can be overridden per type.
- Default icons are taken from the Lucide icon set.
- Ships with two CSS themes (GitHub + Svelte inspired) that you can drop into your site immediately.
- Built for Kirby’s KirbyText parser-no extra tooling required.
Note: KirbyText mixes Markdown with Kirby-specific tags. This plugin focuses on the Markdown portion while staying compatible with KirbyText’s rendering pipeline.
Configuration
Set options in site/config/config.php if you need to customize behaviour:
classPrefix: changing this updates both wrapper classes ({prefix} {prefix}--{type}) and CSS selectors.renderHeader: toggle the injected<header>that contains the icon span and label (themes expect this to stay on).icons: associative array mapping modifier slugs (e.g.note,tip) to inline SVG strings. UsingcurrentColorkeeps icons in step with the callout accent, but you can hard-code colours if you prefer. Provide adefaultentry for fallback usage.wrapper: switch between<div>(default) and<blockquote>depending on your semantic preference.- Any
[!TYPE]yields classes likecallout callout--typefor styling hooks.
Styling
[!TIP] Bundled styles are optional; callouts expose straightforward class names (
callout,callout--tip,callout__header, etc.), so rolling your own theme is simple. Prefer a starting point? Two drop-in themes ship with the plugin.
| Theme | Path | Notes |
|---|---|---|
| GitHub | assets/callouts-github.css |
GitHub-like indicator with Lucide icons and minimal border. |
| Svelte | assets/callouts-svelte.css |
Compact vertical glyph inspired by Svelte docs. |
Both styles rely on CSS custom properties (accent colour, icon size). Override them in your own stylesheet to match brand guidelines:
Custom callout types inherit the neutral defaults-just define selectors like .callout--spotlight if you need bespoke colors.
The injected markup looks like:
[!NOTE] Rendered markup follows BEM conventions:
calloutis the block,callout--typemodifiers hook variants, andcallout__header/callout__icon/callout__labelelements keep themes predictable.
Use those modifier classes (callout--tip, callout--note, etc.) to tweak accent colours. Icons inherit currentColor, so adjusting --callout-color automatically recolours the frame (GitHub) or glyph (Svelte). Disabling renderHeader removes the <header> block in case you prefer pure CSS badges.
See EXAMPLE.md for a GitHub-renderable example covering every built-in type plus a custom [!SPOTLIGHT] callout.
License
MIT License. See LICENSE for details.
Questions, issues, or ideas? File them in the repository or reach out-this plugin is designed to be extended.
Icons are based on the Lucide icon set (MIT License).
Roadmap
- [x] Add Composer installation.
- [ ] Add label translations support.
- [x] Allow custom inline labels for known types (e.g.
> [!TIP] My Fancy Label Tip). - [ ] Explore Tailwind-friendly styling option.
- [ ] Create custom block type for Blocks Field.
