asciidoctor / asciidoctor-extensions-lab

A lab for testing and demonstrating Asciidoctor extensions. Please do not use this code in production. If you want to use one of these extensions in your application, create a new project, import the code, and distribute it as a RubyGem. You can then request to make it a top-level project under the Asciidoctor organization.
Other
104 stars 101 forks source link

Add macro for GitHub / BaseCamp emoji library #134

Open mojavelinux opened 11 years ago

mojavelinux commented 11 years ago

Add a macro for inserting GitHub / BaseCamp emoji.

http://www.emoji-cheat-sheet.com/

mojavelinux commented 9 years ago

A prototype of this feature is now implemented in the extensions lab: https://github.com/asciidoctor/asciidoctor-extensions-lab/blob/master/lib/emoji-inline-macro/extension.rb

mitm001 commented 4 years ago

You added the macros for these, give a link to the syntax but that doesn't seem to actually work for me for some reason.

For instance, I would expect to just be able to use the macro inline like here at github, :smiley: i.e. :smiley:

You provide a link to a ruby file that if used forces you to lower your security settings. Even if you download the 332 mb file and install the svg local. From what I read you have to compile each page that has the emoji with permission also?

No option to set a url as safe for the entire site so it could be used for the ruby extension?

We can freely use font awesome with simple inline icon statements without having to do anything special.

Is there some trick to keeping security and using these emoji I am missing?

ggrossetie commented 4 years ago

For instance, I would expect to just be able to use the macro inline like here at github, :smiley: i.e.

You can do that using an inline macro with a match directive (using a regular expression): https://github.com/asciidoctor/asciidoctor/blob/fb3c647c5e306c520f87e90ff0ad3d8d80a0123a/lib/asciidoctor/extensions.rb#L639

For example, take a look at the metions inline macro: https://github.com/asciidoctor/asciidoctor-extensions-lab/blob/b848e53b5a23134348ac40741a3d777fcb22c684/lib/mentions-inline-macro.rb#L10

You provide a link to a ruby file that if used forces you to lower your security settings.

I'm not sure what you mean by "forces you to lower your security settings"? The only reference to security settings is a condition in the docinfo processor to embed the stylesheet twemoji-awesome.css in the HTML page: https://github.com/asciidoctor/asciidoctor-extensions-lab/blob/b848e53b5a23134348ac40741a3d777fcb22c684/lib/emoji-inline-macro/extension.rb#L52

But it's not mandatory if you are not using copycss

Even if you download the 332 mb file and install the svg local.

The extension is using a single css file and a ruby file: https://github.com/asciidoctor/asciidoctor-extensions-lab/tree/master/lib/emoji-inline-macro I'm not sure what you've downloaded...

From what I read you have to compile each page that has the emoji with permission also?

Where did you read that? :thinking:

We can freely use font awesome with simple inline icon statements without having to do anything special.

If that works for you, then :+1:

mitm001 commented 4 years ago

I'm not sure what you've downloaded...

The actual emojis project from the url listed in the ruby file. Just to see if I could access the images for the emoji locally because I couldn't get them to show using the extension as is.

I can see the emojis are properly being inserted into the class of the icon tag in the output html file, but the images do not appear.

Where did you read that?

https://github.com/asciidoctor/asciidoctor.org/blob/master/docs/_includes/uri-include.adoc

For security reasons, this capability is not enabled by default. To allow content to be read from a URI, you must enable the URI read permission by:

  1. running Asciidoctor in SERVER mode or less and

  2. setting the allow-uri-read attribute securely (i.e., from the CLI or API).

I may be wrong but I am thinking this is why my images do not show since the ruby file calls an url for the background-image of the css.

.twa-smiley{background-image:url(https://twemoji.maxcdn.com/svg/1f603.svg)}

Maybe my extension setup is wrong which is very likely. I use the same folder structure as is used here,

https://github.com/asciidoctor/asciidoctor-extensions-lab#extension-files

with the same files you have in the links you provided to the ruby extension

I use gradle with travis CI and a github account for building asciidoctor pages but my gradle file does call the script like so,

    // Add requirement on Ruby extension.
    requires './src/docs/lib/emoji-inline-macro.rb' 

Since the class of the output html file does show the emoji being inserted into the tag I assumed the problem was with my security settings, which are default.

ggrossetie commented 4 years ago

I think the twemoji-awesome.css is not resolved.

I may be wrong but I am thinking this is why my images do not show since the ruby file calls an url for the background-image of the css.

background-image will be resolved by your browser (client-side) not by the Ruby code. The extension does two things:

By default the path should be ./twemoji-awesome.css, so you will probably have to copy the stylesheet file next to the generated HTML page. Or you can use the attribute copycss with a safe safe mode. In this case, the extension will take copy the stylesheet for you into your output directory.

mitm001 commented 4 years ago

By default the path should be ./twemoji-awesome.css, so you will probably have to copy the stylesheet file next to the generated HTML page.

Yeah, which is done. The source of the output html shows the link to the css in the header is correctly pointing to the css file, shows the icon tag class filled in properly, and the css file is in the same folder.

I am calling the emoji like so in the adoc:

emoji:smile[] emoji:smile[2x] emoji:smile[4x]

But the emojis don't show. I am using firefox and the script blockers are not reporting blocking anything.

If I explicitly set the css file in the header of the adoc,

:stylesheet: twemoji-awesome.css

the images do work but it overrides the default asciidoctor.css file.