Callouts?

Is it possible to have something like callouts or admonitions in wackowiki?


like this: https://squidfunk.github.io/mk[...]tensions/admonition/
or this: https://www.lotar.altervista.o[...]bootswrapper/callout


I have seen that one can make a named box, but would need to at least color the box in red/green/yellow/blue.


thanks!


PS: I am totally new to wackowiki and used mkdocs and dokuwiki before :)

Comments

  1. Re: Callouts

    Info boxes are on the TODO list. The question is where and how it should be realized. Should the content of these boxes parsed dynamically, and do we want have these options also available for the shade and box wrapper to avoid unnecessary wrapper nesting.

    There are undocumented wrappers under formatter/highlight/ like info or question having all the same syntax except a different CSS class. There will be soon a dedicated page for this issue in the wiki.

    For the meantime you can add your own callout wrapper:
    %%(callout type="warning" title="Warning") Different info box wrappers and types are planned.%%

    formatter/highlight/callout.php
    
    <?php

    /*
        % %(callout
            [type= "note | warning | error | important")]
            [style= "no use")])
        content
        % %
    */

    $style_class    'callout';
    $type_class        '';
    $types            = ['default''error''example''fail''important''note''question''quote''success''warning'];

    if (!isset(
    $options['type']))        $options['type']    = 'note';
    if (!isset(
    $options['title']))        $options['title']    = '';
    if (!isset(
    $options['style']))        $options['style']    = false;

    if (
    in_array($options['type'], $types))
    {
        
    // callout type-* in wacko.css
        
    $type_class 'type-' $options['type'];
    }

    $title $options['title'] ?? null;

    echo    
    '<ignore><div class="' $style_class ' ' $type_class '">' "\n" .
            (
    $title
                
    '<p class="callout-title">' Ut::html($title) . '</p>' "\n"
                
    '');
    include 
    Ut::join_path(FORMATTER_DIR'wiki.php');    // parsed with WackoFormatter
    echo    "</div></ignore>\n";


    add the CSS classes to wacko.css of your theme
    /* Callouts: SYNTAX % %(callout type="warning" title="Warning")text% % */
    .callout {
    	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);
    	position: relative;
    	margin: 1.5625em 0;
    	padding: 0 .6rem;
    	border-left: .2rem solid #448aff;
    	border-radius: .1rem;
    	/* font-size: .64rem; */
    	overflow: auto;
    }
    
    .callout-title {
    	margin: 0 -.6rem;
    	padding: .4rem .6rem .4rem 2rem;
    	border-bottom: .05rem solid rgba(68,138,255,.1);
    	background-color: rgba(68,138,255,.1);
    	font-weight: 700;
    }
    
    .callout > .callout-title::before {
    	position: absolute;
    left: .6rem;
    	color: #448aff;
    	font-size: 1rem;
    	content: "✎";
    }
    
    .callout.type-warning {
    	border-left-color: #ff9100;
    }
    
    .callout.type-warning > .callout-title {
    	border-bottom-color: rgba(255,145,0,.1);
    	background-color: rgba(255,145,0,.1);
    }
    
    .callout.type-warning > .callout-title::before {
    	color: #ff9100;
    	content: "⚠";
    }
    
    .callout.type-success {
    	border-left-color: #00c853
    }
    .callout.type-success > .callout-title {
    	border-bottom-color: rgba(0,200,83,.1);
    	background-color: rgba(0,200,83,.1)
    }
    .callout.type-success > .callout-title::before {
    	color: #00c853;
    	content: "✓"
    }
    
    .callout.type-question {
    	border-left-color: #64dd17
    }
    .callout.type-question > .callout-title {
    	border-bottom-color: rgba(100,221,23,.1);
    	background-color: rgba(100,221,23,.1)
    }
    .callout.type-question > .callout-title::before {
    	color: #64dd17;
    	content: "?"
    }
    
    .callout.type-fail {
    	border-left-color: #ff5252
    }
    .callout.type-fail > .callout-title {
    	border-bottom-color: rgba(255,82,82,.1);
    	background-color: rgba(255,82,82,.1)
    }
    .callout.type-fail > .callout-title::before {
    	color: #ff5252;
    	content: "✕"
    }
    
    .callout.type-example {
    	border-left-color: #651fff
    }
    .callout.type-example > .callout-title {
    	border-bottom-color: rgba(101,31,255,.1);
    	background-color: rgba(101,31,255,.1)
    }
    .callout.type-example > .callout-title::before {
    	color: #651fff;
    	content: "💡"
    } 


    The CSS was taken from the example above, modify it for your needs.

    If you modify your theme, don't forget to copy and rename the theme folder, this will protect you from accidentally overwriting your theme with the default version during the next upgrade process.

    Example:

    %%(callout type="note" title="Note")
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
    massa, nec semper lorem quam in massa.
    %%
    • WikiAdmin
    • 31.01.2020 11:47 edited
  2. Kommentar 683

    Thanks a lot! Will tinker around :)

    Can I follow this feature request on the issue tracker (I couldn't find it there)? Or is Mantis actually only for squashing bugs?
  3. Re: feature request

    It will hopefully the next issue I work on, after our migration to Git and Github. I (we) must play around with all possible options to find a intuitive and simple scheme. The code itself is rather less of a challenge, finding suitable layouts and CSS styles is.
    • WikiAdmin
    • 05.02.2020 14:10 edited
  4. Re: Callouts?

    The new info box formatter made it into the 6.0.3 release. Let's wait for some feedback. Additional formatters like tabs or spoilers can be added the same way if needed.
    • WikiAdmin
    • 14.02.2020 09:58 edited