[Bug] Unable to leverage Keywords to create custom links in a reusable macro template about ng-doc HOT 8 CLOSED

Is there a workaround?

No unfortunately, keywords are not available on the nunjucks side, because list of keywords are actually created based on nunjucks and markdown output, so it's just not possible.

from ng-doc.

Is there a workaround?

No unfortunately, keywords are not available on the nunjucks side, because list of keywords are actually created based on nunjucks and markdown output, so it's just not possible.

No problem, I was able to achieve it by leveraging the code tag and having an absolute position of the anchor tag occupying the complete width of the tile :)

from ng-doc.

No, this will not work that way.
To help you better understand what is happening, I'll describe the working principle:

• First, NgDoc renders your markdown file using Nunjucks, thus calling all macros, functions, etc., to obtain the final markdown file.
• Then the markdown file is transformed into HTML.
• After that, post-processing starts, during which all used keywords will be replaced with links. NgDoc checks for keywords in all inline codes and code blocks.

Therefore, you are getting NAN because *CustomAngularComponentPage is not an available variable; it is simply a string value that will be replaced at the post-processing stage.

Solution:

As a solution to the problem, you can change your code as follows:

{% macro createBoxWithLink(title, description, keyword_link) %}
<div class="square">
    <p>{{ title }}</p>
    <p>{{ description }}</p>
    `{{keyword_link}}`
</div>
{% endmacro %}

{{ createBoxWithLink('Ng Doc', 'NgDoc is a library for creating documentation for your Angular projects, it is injected into the build process of a regular Angular application and creates documentation that can be displayed in it.', '*CustomAngularComponentPage') }}

So you just need to provided keywords as a string, and render inside of inline code. This way, the string {{keyword_link}} will be transformed into inline code and replaced with a link at the post-processing stage.

from ng-doc.

No, this will not work that way. To help you better understand what is happening, I'll describe the working principle:

• First, NgDoc renders your markdown file using Nunjucks, thus calling all macros, functions, etc., to obtain the final markdown file.
• Then the markdown file is transformed into HTML.
• After that, post-processing starts, during which all used keywords will be replaced with links. NgDoc checks for keywords in all inline codes and code blocks.

Therefore, you are getting NAN because *CustomAngularComponentPage is not an available variable; it is simply a string value that will be replaced at the post-processing stage.

Solution:

As a solution to the problem, you can change your code as follows:

{% macro createBoxWithLink(title, description, keyword_link) %}
<div class="square">
    <p>{{ title }}</p>
    <p>{{ description }}</p>
    `{{keyword_link}}`
</div>
{% endmacro %}

{{ createBoxWithLink('Ng Doc', 'NgDoc is a library for creating documentation for your Angular projects, it is injected into the build process of a regular Angular application and creates documentation that can be displayed in it.', '*CustomAngularComponentPage') }}

So you just need to provided keywords as a string, and render inside of inline code. This way, the string {{keyword_link}} will be transformed into inline code and replaced with a link at the post-processing stage.

Hi @skoropadas,

Thank you so much for your response. I did give it a try but no luck. Please find the screenshot below. I have also checked in my changes to my GitHub repo.

The above solution only would prove me an independent link. I also want to achieve that my whole tile clickable. Below is the Macro. I have also updated my example and added this macro as well.

{% macro createClicklableBoxTile(title, description, keyword_link) %}
<a href="`{{keyword_link}}`">
    <div class="square">
        <p>{{ title }}</p>
        <p>{{ description }}</p>
    </div>
</a>
{% endmacro %}

from ng-doc.

Ah, I see, it's happening because there is no space between div and the used keyword, it is known behavior of the marked library that is used under the hood, so if you add a space, then it should start working:

{% macro createBoxWithLink(title, description, keyword_link) %}
<div class="square">
    <p>{{ title }}</p>
    <p>{{ description }}</p>
</div>

`{{keyword_link}}`
{% endmacro %}

But then you'll have another problem, markdown syntax is not supported inside HTML nodes, so if you try to put your keyword into the div you'll face the same issue. As a workaround, you can use the code tag, which is the HTML definition of inline code.

{% macro createBoxWithLink(title, description, keyword_link) %}
<div class="square">
    <p>{{ title }}</p>
    <p>{{ description }}</p>
    <code>{{ keyword_link }}</code>
</div>
{% endmacro %}

from ng-doc.

But the thing that you are trying to achieve using createClicklableBoxTile is not supported atm.

from ng-doc.

But the thing that you are trying to achieve using createClicklableBoxTile is not supported atm.

Is there a workaround? Is it possible to access APIs which can provide the link path based on the keywords either in macros or from angular custom components? So I can use the API to set a variable in macros and pass the variable in the macro function. If not, I have to use hardcoded paths for the links and change them wherever used when the category changes for a page :(

Another option would be, so probably instead of using a macro template, I will use an angular component which renders tiles and use the macro demo API to render the component like this on the markdown page.

{{ NgDocActions.demo("ButtonDemoComponent", {container: false}) }}

from ng-doc.

Ah, I see, it's happening because there is no space between div and the used keyword, it is known behavior of the marked library that is used under the hood, so if you add a space, then it should start working:

{% macro createBoxWithLink(title, description, keyword_link) %}
<div class="square">
    <p>{{ title }}</p>
    <p>{{ description }}</p>
</div>

`{{keyword_link}}`
{% endmacro %}

But then you'll have another problem, markdown syntax is not supported inside HTML nodes, so if you try to put your keyword into the div you'll face the same issue. As a workaround, you can use the code tag, which is the HTML definition of inline code.

{% macro createBoxWithLink(title, description, keyword_link) %}
<div class="square">
    <p>{{ title }}</p>
    <p>{{ description }}</p>
    <code>{{ keyword_link }}</code>
</div>
{% endmacro %}

Thank you so much the suggested solution works :)

from ng-doc.