titpetric / pendulum

A simple markdown editor for static files (Hugo, Nexo, Jekyll, MkDocs, ...)
Do What The F*ck You Want To Public License
162 stars 23 forks source link

Please add shortcode support for (hugo, hexo, leanpub, etc...) #3

Open onedrawingperday opened 6 years ago

onedrawingperday commented 6 years ago

Following the discussion at #2

Don't know if this is possible, but it would be great to provide Hugo shortcode support alongside the existing Hexo support.

The Pendulum shortcode for Hexo is {% asset_img url "caption" %}. To make this work with Hugo the shortcode needs to be like so {{% asset_img "url" "caption" %}}.

Adding the double quotes to the shortcode URL is essential to make Pendulum an out-of-the-box editor for Hugo. The double curly brackets are not that essential.

Also here is the actual Hugo shortcode that I authored for use in tandem with Pendulum.

This shortcode will render an img that is in the same directory as the respective content file of a Hugo project. I am getting the content directory path with a bit of RegEx and as a bonus I have included the imageConfig function to get the dimensions of the image.

Contents of asset_img.html


<!-- image -->
<figure>
{{ $base := $.Page.Permalink | replaceRE "([^/]*)/$" "" }}
{{ $link := $.Page.RelPermalink | replaceRE "([^/]*)/$" "" }}
{{ $file := .Get 0 }}
{{ $.Scratch.Add "src" $link }}  
{{ $.Scratch.Add "src" $file }} 
{{ $src:= $.Scratch.Get "src"}}  
{{ $config := imageConfig (printf "/content/%s" $src) }}
        <img src="{{ $base }}{{ .Get 0 }}" alt="{{ with $.Page.Params.title}}{{.}}{{end}}" height="{{$config.Height}}" width="{{$config.Width}}" />
            <noscript>
    <img src="{{ $base }}{{ .Get 0 }}" alt="{{ with $.Page.Params.title}}{{.}}{{end}}"/>
  </noscript>
</figure>
<!-- image -->

If you choose to support the Hugo shortcode, feel free to include the above to the Release Notes to help other users.

Again thank you very much for Pendulum.

titpetric commented 6 years ago

Hey,

it would be nice to get some example syntax for various Hugo or Hexo shortcodes, which pendulum could support. It should support the asset_img with a single bracket, but that's not that hard to change, the biggest difficulty mostly lies in the fact that there's more shortcodes and it's time consuming to list and implement them, but I would love to increase support in a more systematic way.

Could you prepare a table which could be used for implementing this? I'm thinking something along the lines of the following columns:

As you can see, the biggest issue here is scope. Implementing individual shortcode renderers however is trivial, when one has a reasonable idea where to start. I'd put the above into the readme so it's clear what shortcodes are supported.

onedrawingperday commented 6 years ago

There is no longer a need for Hugo shortcode support from Pendulum.

Hugo now supports markdown images relative to content files with Page Bundles.

titpetric commented 6 years ago

I've re-titled the issue as it might still be interesting for somebody to implement their own markdown-flavor or otherwise markup. I am locking it for conversation, because my previous comment clarifies what needs to be done if somebody is looking to add some markup into pendulum. Thanks for understanding ;)