Support AsciiDoc admonition blocks

reitzig commented 4 years ago

Admonition blocks are a cool feature of AsciiDoc:

(see here)

Unfortunately, notepadium doesn't contain the appropriate CSS:

I checked the (S)CSS of the AsciiDoctor project; integrating what they do (which may be too much?) in a meaningful way into your style is beyond me. :/ Can you please help us AsciiDoc users out and provide styling for admonition blocks?

cntrump commented 4 years ago

try Asciidoctor skins ?

https://github.com/darshandsoni/asciidoctor-skins.git

config.toml

[params.assets]
css = ["css/adoc-github.css"]

reitzig commented 4 years ago

Good reference, thanks!

But doing that messes with Notepadium in many ways.

This is more like it:

grep .admonitionblock ../../themes/asciidoctor-skins/css/asciidoctor.css \
    | sed -e 's/^.*\(\.admonitionblock [^,{]*\)[^{]*{/\1 {/' \
    > admonitions.css

Result:

.admonitionblock td.content>.title {line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
.admonitionblock td.content>.title {text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
.admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
.admonitionblock>table td.icon{text-align:center;width:80px}
.admonitionblock>table td.icon img{max-width:none}
.admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
.admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
.admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
.admonitionblock td.icon [class^="fa icon-"] {font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
.admonitionblock td.icon .icon-note:before {content:"\f05a";color:#19407c}
.admonitionblock td.icon .icon-tip:before {content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
.admonitionblock td.icon .icon-warning:before {content:"\f071";color:#bf6900}
.admonitionblock td.icon .icon-caution:before {content:"\f06d";color:#bf3400}
.admonitionblock td.icon .icon-important:before {content:"\f06a";color:#bf0000}

Unfortunately, the result doesn't even come close. Compare their demo

with what I'm getting:

Some issues:

The border shouldn't be there. Can't tell why they are.
No icons.
- Need to set the icons: font attribute. Okay.
- No Font Awsome. Adding @import doesn't help, but I note that the paging icons also don't appear? IMHO, using web fonts doesn't fit with Notepadium, anyway ("100% Javascript free"). You are using fontbuf.com, right?

reitzig commented 4 years ago

Regarding the icon font: I suspect that it has something to with me looking at the hugo server output in my local browser.

But nevertheless, tangent: Is this necessary? Can we include the font as asset?

Update: https://github.com/cntrump/hugo-notepadium/pull/83

reitzig commented 4 years ago

I stored the font as static/iconfont.ttf and loaded it in iconfont.css by

src: url('../iconfont.ttf') format('truetype');

Resolves, but icons still don't show. :thinking:

Ah! Of course, the admonition icons are simply not included in your minimal font. Makes sense. Paging, though, still confuses me.

Borders fixed, needed to force table borders away.

reitzig commented 4 years ago

FWIW, I use this script put in themes of my Hugo project to create a CSS asset that adds admonition boxes to Notepadium:

#!/usr/bin/env bash

set -eu

skin="asciidoctor"

themes_path="$(realpath "${0}" | xargs dirname)"
css_assets_path="$(realpath "${themes_path}/../assets/css/")"
admonitions_css_path="${css_assets_path}/admonitions.css"

# Copy style from chosen skin
echo "/* From ${skin} by github.com/darshandsoni/asciidoctor-skins */" \
    > "${admonitions_css_path}"
grep .admonitionblock \
      "${themes_path}/asciidoctor-skins/css/${skin}.css" \
    | sed -e 's/^.*\(\.admonitionblock [^,{]*\)[^{]*{/\1 {/' \
    >> "${admonitions_css_path}"

# Integrate into Notepadium
cat >> "${admonitions_css_path}" <<STYLE

/* Use Notepadium's icon font */
.admonitionblock td.icon [class^="fa icon-"] {
    font-family: "iconfont" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override general table styling for admonition boxes */
.admonitionblock td.icon {
    border: none !important;
}
.admonitionblock td.content {
    border-right: none !important;
    border-bottom: none !important;
    border-top: none !important;
}
STYLE

In config.toml:

[params.assets]
css = [
    ... 
    "css/admonitions.css"
]

I consider this a workaround, and I wouldn't want to just add that CSS to the code styles. Maybe you could start off a separate CSS file specific to AsciiDoc which we could add to?

How would you suggest handling additional icons? I guess a separate font may be worth a thought.

reitzig commented 4 years ago

Further workaround: created static/admonition_icons.ttf using fontello.com with this config:

{
  "name": "",
  "css_prefix_text": "icon-",
  "css_use_suffix": false,
  "hinting": true,
  "units_per_em": 1000,
  "ascent": 850,
  "glyphs": [
    {
      "uid": "4b20e1deee87faf4c3fab735fbd4bc1a",
      "css": "lamp",
      "code": 59392,
      "src": "entypo"
    },
    {
      "uid": "e82cedfa1d5f15b00c5a81c9bd731ea2",
      "css": "info-circled",
      "code": 59393,
      "src": "fontawesome"
    },
    {
      "uid": "c76b7947c957c9b78b11741173c8349b",
      "css": "attention",
      "code": 59394,
      "src": "fontawesome"
    },
    {
      "uid": "b035c28eba2b35c6ffe92aee8b0df507",
      "css": "attention-circled",
      "code": 59395,
      "src": "fontawesome"
    },
    {
      "uid": "254077e7c0a9e6d303b32f9c35b96a40",
      "css": "fire",
      "code": 59396,
      "src": "fontawesome"
    }
  ]
}

Changed the script above:

#!/usr/bin/env bash

set -eu

skin="asciidoctor"

themes_path="$(realpath "${0}" | xargs dirname)"
css_assets_path="$(realpath "${themes_path}/../assets/css/")"
admonitions_css_path="${css_assets_path}/admonitions.css"

echo -e "/* Generated by ${0} */\n" \
    > "${admonitions_css_path}"

# Copy style from chosen skin
echo "/* From ${skin} by github.com/darshandsoni/asciidoctor-skins */" \
    >> "${admonitions_css_path}"
grep .admonitionblock \
      "${themes_path}/asciidoctor-skins/css/${skin}.css" \
    | sed -e 's/^.*\(\.admonitionblock [^,{]*\)[^{]*{/\1 {/' \
    >> "${admonitions_css_path}"

# Integrate into Notepadium
cat >> "${admonitions_css_path}" <<STYLE

/* Use custom icon font 
   Note: Generated with fontello.com using Unicode encoding */
@font-face {
    font-family: "admonition_icons";
    src: url('../admonition_icons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.admonitionblock td.icon [class^="fa icon-"] {
    font-family: "admonition_icons" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
}

.admonitionblock td.icon .icon-note:before {content:"\e801" !important} /* info circled */
.admonitionblock td.icon .icon-tip:before {content:"\e800" !important} /* lamp */
.admonitionblock td.icon .icon-warning:before {content:"\e802" !important} /* attention */
.admonitionblock td.icon .icon-caution:before {content:"\e804"!important} /* fire */
.admonitionblock td.icon .icon-important:before {content:"\e803" !important} /* attention circled */

/* Override general table styling for admonition boxes */
.admonitionblock td.icon {
    border: none !important;
}
.admonitionblock td.content {
    border-right: none !important;
    border-bottom: none !important;
    border-top: none !important;
}
STYLE

This is effective:

reitzig commented 3 years ago

FWIW, I have now migrated to using SVGs for these. For reference, here is how that works. Include this in config.toml:

[markup.asciidocext.attributes]
experimental = true
icons = "image"
icontype = "svg"
iconsdir = "assets/icons"

And put the necessary images into static/assets/icons, e.g. from https://github.com/nawroth/doctools/tree/master/src/main/resources/images/icons/admon

cemsbr commented 8 months ago

Still a pain to get these icons working. I could make them work today by adding a slash to iconsdir and I could also remove the experimental setting:

[markup.asciidocExt.attributes]
  icons = 'image'
  icontype = 'svg'
  iconsdir = '/assets/icons'

FWIW, I have now migrated to using SVGs for these. For reference, here is how that works. Include this in config.toml:
[markup.asciidocext.attributes]
experimental = true
icons = "image"
icontype = "svg"
iconsdir = "assets/icons"
And put the necessary images into static/assets/icons, e.g. from nawroth/doctools@master/src/main/resources/images/icons/admon

cntrump / hugo-notepadium

Support AsciiDoc admonition blocks #82