Asciidoctor + Gravizo

classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Asciidoctor + Gravizo

tleyden
I'm trying to use gravizo in conjunction with Asciidoctor.  

How would I translate this img tag:

<img src='https://g.gravizo.com/svg? digraph G { main -> parse -> execute;
   main -> init;
   main -> cleanup;
   execute -> make_string;
   execute -> printf
   init -> make_string;
   main -> printf;
   execute -> compare;
 }
'/>

into Asciidoctor format?  

(and ideally that's readable while looking at the source)
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

mojavelinux
Administrator
This post was updated on .
I'd recommend using multi-line attributes to store the digraph data.
Something like:

:digraph: digraph G { \
main -> parse -> execute; \
main -> init; \
main -> cleanup; \
execute -> make_string; \
execute -> printf; \
init -> make_string; \
main -> printf; \
execute -> compare; \
}
image::https://g.gravizo.com/svg?{digraph}[]

You can redefine the digraph attribute before each image.

Like bash, the escaped endlines get folded so the value of the attribute
ends up as all one line.

-Dan

On Thu, Jun 22, 2017 at 10:21 AM, tleyden [via Asciidoctor :: Discussion] <
ml+s49171n5685h19@n6.nabble.com> wrote:

> I'm trying to use gravizo <http://gravizo.com> in conjunction with
> Asciidoctor.
>
> How would I translate this img tag:
>
> <img src='https://g.gravizo.com/svg? digraph G { main -> parse ->
> execute;
>    main -> init;
>    main -> cleanup;
>    execute -> make_string;
>    execute -> printf
>    init -> make_string;
>    main -> printf;
>    execute -> compare;
>  }
> '/>
>
> into Asciidoctor format?
>
> (and ideally that's readable while looking at the source)
>
> ------------------------------
> If you reply to this email, your message will be added to the discussion
> below:
> http://discuss.asciidoctor.org/Asciidoctor-Gravizo-tp5685.html
> To start a new topic under Asciidoctor :: Discussion, email
> ml+s49171n1h15@n6.nabble.com
> To unsubscribe from Asciidoctor :: Discussion, click here
> <http://discuss.asciidoctor.org/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=1&code=ZGFuLmouYWxsZW5AZ21haWwuY29tfDF8MTY5MzI5MDU4>
> .
> NAML
> <http://discuss.asciidoctor.org/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

tleyden
I think the formatting got a little screwed up on the forum.  Here's a screenshot of what I'm seeing in my browser:

Screenshot

What's the "box" supposed to be?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

tleyden
Oh wait, nevermind!!  Those are open and closed square brackets!  🙈
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

tleyden
That didn't work for me, when rendered on cli via asciidoctor I got:



However, I made a slight tweak and it worked!

:digraph: digraph G { \
main -> parse -> execute; \
main -> init; \
main -> cleanup; \
execute -> make_string; \
execute -> printf; \
init -> make_string; \
main -> printf; \
execute -> compare; \
}
image::https://g.gravizo.com/svg?{digraph}[]

Thanks so much
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

tleyden
Although for some reason the exact same thing doesn't work with github's asciidoc rendering:

https://gist.github.com/tleyden/1f11ba1c9dd56b80c84e99f35df4c778

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

mojavelinux
Administrator
Yeah, the forum turned the URL into an HTML anchor tag. There shouldn't be any hardcoded HTML. It should just be:

image::BASE_URL?{digraph}[]

-Dan

On Thu, Jun 22, 2017 at 1:08 PM, tleyden [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Although for some reason the exact same thing doesn't work with github's asciidoc rendering:

https://gist.github.com/tleyden/1f11ba1c9dd56b80c84e99f35df4c778




If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Asciidoctor-Gravizo-tp5685p5690.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

mojavelinux
Administrator
In reply to this post by tleyden
You don't need this line:

[%hardbreaks]

-Dan

On Thu, Jun 22, 2017 at 1:56 PM, Dan Allen <[hidden email]> wrote:
Yeah, the forum turned the URL into an HTML anchor tag. There shouldn't be any hardcoded HTML. It should just be:

image::BASE_URL?{digraph}[]

-Dan

On Thu, Jun 22, 2017 at 1:08 PM, tleyden [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Although for some reason the exact same thing doesn't work with github's asciidoc rendering:

https://gist.github.com/tleyden/1f11ba1c9dd56b80c84e99f35df4c778




If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Asciidoctor-Gravizo-tp5685p5690.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

mojavelinux
Administrator
In reply to this post by tleyden
Unfortunately, GitHub bites again. GitHub is literally not requesting the image URL correctly.

You can test what GitHub allows in the HTML using a pass block:

++++
<img src="https://g.gravizo.com/svg?digraph G { main -> parse -> execute; main -> init; main -> cleanup; execute -> make_string; execute -> printf; init -> make_string;  main -> printf;  execute -> compare;  }"/
++++

If that doesn't work, then it's just a problem with GitHub / Gist.

It appears that GitHub requires all spaces to be URL encoded:

++++
<img src="<a href="https://g.gravizo.com/svg?digraph%20G%20{main%20-">https://g.gravizo.com/svg?digraph%20G%20{main%20->%20parse%20->%20execute;%20main%20->%20init;%20main%20->%20cleanup;%20execute%20->%20make_string;%20execute%20->%20printf;%20init%20->%20make_string;%20main%20->%20printf;%20execute%20->%20compare;}"/>
++++

The HTML that GitHub allows is extremely limited.

-Dan

On Thu, Jun 22, 2017 at 1:56 PM, Dan Allen <[hidden email]> wrote:
You don't need this line:

[%hardbreaks]

-Dan

On Thu, Jun 22, 2017 at 1:56 PM, Dan Allen <[hidden email]> wrote:
Yeah, the forum turned the URL into an HTML anchor tag. There shouldn't be any hardcoded HTML. It should just be:

image::BASE_URL?{digraph}[]

-Dan

On Thu, Jun 22, 2017 at 1:08 PM, tleyden [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Although for some reason the exact same thing doesn't work with github's asciidoc rendering:

https://gist.github.com/tleyden/1f11ba1c9dd56b80c84e99f35df4c778




If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Asciidoctor-Gravizo-tp5685p5690.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

mojavelinux
Administrator
In reply to this post by tleyden
The closest I could get was:

:uri-gravizo-svg: https://g.gravizo.com/svg
:digraph: digraph%20G%20{ \
main->parse-execute; \
main->init; \
main->cleanup; \
execute->make_string; \
execute->printf; \
init->make_string; \
main->printf; \
execute->compare; \
}

image::{uri-gravizo-svg}?{digraph}[]

However, Asciidoctor puts replaces each newline in the attribute value with a space, so the digraph value still has spaces in it. At the moment, I can't think of a way to get rid of them. You'd have to write the whole attribute value on one line (in which case, you could just put it in the image macro).

-Dan


--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

mojavelinux
Administrator
In reply to this post by tleyden
This is an interesting case where it would be helpful to have a special substitution group for the pass macro to perform URL encoding. Something like:

:digraph: pass:u[digraph G { \
main->parse-execute; \
main->init; \
main->cleanup; \
execute->make_string; \
execute->printf; \
init->make_string; \
main->printf; \
execute->compare; \
}]

u = url encode

We could also consider "e" for "encode".

-Dan

On Thu, Jun 22, 2017 at 2:11 PM, Dan Allen <[hidden email]> wrote:
The closest I could get was:

:uri-gravizo-svg: https://g.gravizo.com/svg
:digraph: digraph%20G%20{ \
main->parse-execute; \
main->init; \
main->cleanup; \
execute->make_string; \
execute->printf; \
init->make_string; \
main->printf; \
execute->compare; \
}

image::{uri-gravizo-svg}?{digraph}[]

However, Asciidoctor puts replaces each newline in the attribute value with a space, so the digraph value still has spaces in it. At the moment, I can't think of a way to get rid of them. You'd have to write the whole attribute value on one line (in which case, you could just put it in the image macro).

-Dan


--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

mojavelinux
Administrator
In reply to this post by tleyden
Oh, wow. I almost forgot! A new feature in Asciidoctor 1.5.6 is that spaces in an URL are automatically encoded. So my example will work once GitHub adopts Asciidoctor 1.5.6.

-Dan

On Thu, Jun 22, 2017 at 2:14 PM, Dan Allen <[hidden email]> wrote:
This is an interesting case where it would be helpful to have a special substitution group for the pass macro to perform URL encoding. Something like:

:digraph: pass:u[digraph G { \
main->parse-execute; \
main->init; \
main->cleanup; \
execute->make_string; \
execute->printf; \
init->make_string; \
main->printf; \
execute->compare; \
}]

u = url encode

We could also consider "e" for "encode".

-Dan

On Thu, Jun 22, 2017 at 2:11 PM, Dan Allen <[hidden email]> wrote:
The closest I could get was:

:uri-gravizo-svg: https://g.gravizo.com/svg
:digraph: digraph%20G%20{ \
main->parse-execute; \
main->init; \
main->cleanup; \
execute->make_string; \
execute->printf; \
init->make_string; \
main->printf; \
execute->compare; \
}

image::{uri-gravizo-svg}?{digraph}[]

However, Asciidoctor puts replaces each newline in the attribute value with a space, so the digraph value still has spaces in it. At the moment, I can't think of a way to get rid of them. You'd have to write the whole attribute value on one line (in which case, you could just put it in the image macro).

-Dan


--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Asciidoctor + Gravizo

mojavelinux
Administrator
In reply to this post by tleyden
In other words, this will work on Asciidoctor 1.5.6:

:uri-gravizo-svg: https://g.gravizo.com/svg
:digraph: digraph G { \
main -> parse-execute; \
main -> init; \
main -> cleanup; \
execute -> make_string; \
execute -> printf; \
init -> make_string; \
main -> printf; \
execute -> compare; \
}

image::{uri-gravizo-svg}?{digraph}[]

Though I still like the idea of a URL encoding substitution too.

-Dan

On Thu, Jun 22, 2017 at 2:17 PM, Dan Allen <[hidden email]> wrote:
Oh, wow. I almost forgot! A new feature in Asciidoctor 1.5.6 is that spaces in an URL are automatically encoded. So my example will work once GitHub adopts Asciidoctor 1.5.6.

-Dan

On Thu, Jun 22, 2017 at 2:14 PM, Dan Allen <[hidden email]> wrote:
This is an interesting case where it would be helpful to have a special substitution group for the pass macro to perform URL encoding. Something like:

:digraph: pass:u[digraph G { \
main->parse-execute; \
main->init; \
main->cleanup; \
execute->make_string; \
execute->printf; \
init->make_string; \
main->printf; \
execute->compare; \
}]

u = url encode

We could also consider "e" for "encode".

-Dan

On Thu, Jun 22, 2017 at 2:11 PM, Dan Allen <[hidden email]> wrote:
The closest I could get was:

:uri-gravizo-svg: https://g.gravizo.com/svg
:digraph: digraph%20G%20{ \
main->parse-execute; \
main->init; \
main->cleanup; \
execute->make_string; \
execute->printf; \
init->make_string; \
main->printf; \
execute->compare; \
}

image::{uri-gravizo-svg}?{digraph}[]

However, Asciidoctor puts replaces each newline in the attribute value with a space, so the digraph value still has spaces in it. At the moment, I can't think of a way to get rid of them. You'd have to write the whole attribute value on one line (in which case, you could just put it in the image macro).

-Dan


--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux



--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Loading...