Code Monkey home page Code Monkey logo

Comments (6)

mojavelinux avatar mojavelinux commented on July 19, 2024

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

from asciidoctor-extensions-lab.

mitm001 avatar mitm001 commented on July 19, 2024

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. 😃

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?

from asciidoctor-extensions-lab.

ggrossetie avatar ggrossetie commented on July 19, 2024

For instance, I would expect to just be able to use the macro inline like here at github, 😃 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:

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:

if stylesoutdir != extdir && doc.safe < SafeMode::SECURE && (doc.attr? 'copycss')

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? 🤔

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

If that works for you, then 👍

from asciidoctor-extensions-lab.

mitm001 avatar mitm001 commented on July 19, 2024

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.

from asciidoctor-extensions-lab.

ggrossetie avatar ggrossetie commented on July 19, 2024

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:

  • generate <i> elements with the corresponding classes
  • add a link to the twemoji-awesome.css stylesheet

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.

from asciidoctor-extensions-lab.

mitm001 avatar mitm001 commented on July 19, 2024

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.

from asciidoctor-extensions-lab.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.