Skip to content

Commit

Permalink
Support exporting shortcodes with positional arguments
Browse files Browse the repository at this point in the history
Add new attribute #+ATTR_SHORTCODE: to specify positional arguments
for the shortcode following ":args".

Example:

    #+attr_shortcode: :args warning
    #+begin_alert
    This is a warning!
    #+end_alert

  Above exports as (given HUGO_PAIRED_SHORTCODES is set as "%alert"):

    {{% alert warning %}}
    This is a warning!
    {{% /alert %}}

For re-usability of Org document with ox-html, below will also result
in the exact same ox-hugo export:

    #+attr_html: :class warning
    #+begin_alert
    This is a warning!
    #+end_alert

   Simply: #+attr_shortcode -> #+attr_html
           :args            -> :class

#119
  • Loading branch information
kaushalmodi committed Feb 1, 2018
1 parent 6bf1610 commit 74cb3c2
Show file tree
Hide file tree
Showing 7 changed files with 357 additions and 107 deletions.
25 changes: 22 additions & 3 deletions ox-hugo.el
Original file line number Diff line number Diff line change
Expand Up @@ -2116,7 +2116,24 @@ INFO is a plist holding export options."
:test (lambda (item list-elem)
(string-match-p (format "%%?%s" item)
list-elem)))
(let* ((matched-sc-str (car
(let* (;; Positional arguments
(pos-args (or (let* ((attr-sc (org-export-read-attribute :attr_shortcode special-block))
(args (plist-get attr-sc :args)))
(org-string-nw-p args))
;; To allow Org document reuse for
;; different exporters (including HTML),
;; treat arguments to `:class' HTML
;; attribute as positional arguments for
;; the shortcode.
(let* ((attr-html (org-export-read-attribute :attr_html special-block))
(class (plist-get attr-html :class)))
(org-string-nw-p class))))
(named-args nil) ;TBD - https://github.com/kaushalmodi/ox-hugo/issues/119
(sc-args (or pos-args named-args))
(sc-args (if sc-args
(concat " " sc-args " ")
" "))
(matched-sc-str (car
(cl-member block-type paired-shortcodes
:test (lambda (item list-item)
(string-match-p (format "%%?%s" item)
Expand All @@ -2127,10 +2144,12 @@ INFO is a plist holding export options."
(sc-close-char (if (string-prefix-p "%" matched-sc-str)
"%"
">"))
(sc-begin (format "{{%s %s %s}}"
sc-open-char block-type sc-close-char))
(sc-begin (format "{{%s %s%s%s}}"
sc-open-char block-type sc-args sc-close-char))
(sc-end (format "{{%s /%s %s}}"
sc-open-char block-type sc-close-char)))
;; (message "[ox-hugo-spl-blk DBG] pos-args: %s" pos-args)
;; (message "[ox-hugo-spl-blk DBG] named-args: %s" named-args)
(format "%s\n%s\n%s"
sc-begin contents sc-end)))
(t
Expand Down
249 changes: 171 additions & 78 deletions test/site/content-org/all-posts.org
Original file line number Diff line number Diff line change
Expand Up @@ -3061,6 +3061,114 @@ This is /some text/ wrapped in a =div= block with class =something=.
| v | w | x |
#+END_bar
* Shortcodes :shortcode:
** Alert CSS :noexport:
*** Common CSS
:PROPERTIES:
:CUSTOM_ID: alert-common-css
:END:
#+BEGIN_EXPORT html
<style>
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
div.alert {
border-radius: 10px;
margin-bottom: 1rem;
}

div.alert p {
position: relative;
display: block;
font-size: 1rem;
margin-left: 2rem;
margin-top: 0;
margin-bottom: 0;
}

div.alert a {
color: rgba(255,255,255,0.9);
text-decoration: none;
border-bottom: solid 1px #e4e4e4;
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

div.alert a:hover {
border-bottom-color: transparent;
color: rgba(255,255,255,0.5) !important;
}

.alert-note {
color: #fff;
background-color: #03A9F4; /* Material LightBlue500 */
border-color: #bce8f1;
}

.alert-warning {
color: #fff;
background-color: #f44336; /* Material Red500 */
border-color: #ebccd1;
}
</style>
#+END_EXPORT
*** Original icon prefixing code
:PROPERTIES:
:CUSTOM_ID: alert-original-icon-prefixing-css
:END:
#+BEGIN_EXPORT html
<style>
div.alert p:first-child::before {
position: absolute;
top: -0.5rem;
left: -2rem;
font-family: 'FontAwesome';
font-size: 1.5rem;
color: #fff;
/* content: '\f05a'; */
content: '🛈';
width: 1.5rem;
text-align: center;
}

div.alert-warning p:first-child:before {
/* content: '\f071'; */
content: '⚠';
}
</style>
#+END_EXPORT
*** Modified icon prefixing code
:PROPERTIES:
:CUSTOM_ID: alert-modified-icon-prefixing-css
:END:
#+BEGIN_EXPORT html
<style>
/* Because of the empty div hack, the first paragraph will be the
second child in the div. So use "p:nth-child(2)" instead of the
original "p:first-child". */
div.alert p:nth-child(2)::before {
position: absolute;
top: -0.5rem;
left: -2rem;
font-family: 'FontAwesome';
font-size: 1.5rem;
color: #fff;
/* content: '\f05a'; */
content: '🛈';
width: 1.5rem;
text-align: center;
}

/* Because of the empty div hack, the first paragraph will be the
second child in the div. So use "p:nth-child(2)" instead of the
original "p:first-child". */
div.alert-warning p:nth-child(2):before {
/* content: '\f071'; */
content: '⚠';
}
</style>
#+END_EXPORT
** Alert Shortcode Lookalike :alert:special_block:attr___html:
:PROPERTIES:
:EXPORT_FILE_NAME: alert-short-code-lookalike
Expand Down Expand Up @@ -3116,79 +3224,8 @@ div.alert-warning p:nth-child(2):before {
}
#+END_SRC

:alert_css:
#+BEGIN_EXPORT html
<style>
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
div.alert {
border-radius: 10px;
margin-bottom: 1rem;
}

div.alert p {
position: relative;
display: block;
font-size: 1rem;
margin-left: 2rem;
margin-top: 0;
margin-bottom: 0;
}

/* Because of the empty div hack, the first paragraph will be the
second child in the div. So use "p:nth-child(2)" instead of the
original "p:first-child". */
div.alert p:nth-child(2)::before {
position: absolute;
top: -0.5rem;
left: -2rem;
font-family: 'FontAwesome';
font-size: 1.5rem;
color: #fff;
/* content: '\f05a'; */
content: '🛈';
width: 1.5rem;
text-align: center;
}

/* Because of the empty div hack, the first paragraph will be the
second child in the div. So use "p:nth-child(2)" instead of the
original "p:first-child". */
div.alert-warning p:nth-child(2):before {
/* content: '\f071'; */
content: '⚠';
}

div.alert a {
color: rgba(255,255,255,0.9);
text-decoration: none;
border-bottom: solid 1px #e4e4e4;
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

div.alert a:hover {
border-bottom-color: transparent;
color: rgba(255,255,255,0.5) !important;
}

.alert-note {
color: #fff;
background-color: #03A9F4; /* Material LightBlue500 */
border-color: #bce8f1;
}

.alert-warning {
color: #fff;
background-color: #f44336; /* Material Red500 */
border-color: #ebccd1;
}
</style>
#+END_EXPORT
:end:
#+INCLUDE: "./all-posts.org::#alert-common-css" :only-contents t
#+INCLUDE: "./all-posts.org::#alert-modified-icon-prefixing-css" :only-contents t
*** Alert using Special Block
#+ATTR_HTML: :class alert-note
#+begin_alert
Expand All @@ -3211,13 +3248,14 @@ Here's a tip or note.

#+ATTR_HTML: :class alert alert-warning
Here's a warning!
** Paired shortcodes using special blocks :paired:special_block:
** Paired Shortcodes using special blocks :paired:special_block:
*** Paired Shortcodes using special blocks (No Arguments) :no_arguments:
:PROPERTIES:
:EXPORT_FILE_NAME: paired-shortcodes-special-blocks
:EXPORT_FILE_NAME: paired-shortcodes-special-blocks-no-arguments
:EXPORT_HUGO_PAIRED_SHORTCODES: %mdshortcode myshortcode
:END:
Test case for feature requested in {{{oxhugoissue(119)}}}.
*** Paired markdown shortcode
**** Paired markdown shortcode
#+begin_mdshortcode
Content *with* /emphasis/ characters is rendered.

Expand All @@ -3229,7 +3267,7 @@ This will export as:
#+BEGIN_SRC md
{{% mdshortcode %}} Content rendered as Markdown {{% /mdshortcode %}}
#+END_SRC
*** Paired non-markdown (default) shortcode
**** Paired non-markdown (default) shortcode
#+begin_myshortcode
Content is rendered <b>like HTML</b>. The Markdown /emphasis/
characters are !! NOT !! rendered.
Expand All @@ -3245,14 +3283,69 @@ This will export as:
#+BEGIN_SRC md
{{< myshortcode >}} Content NOT rendered as Markdown {{< /myshortcode >}}
#+END_SRC
*** Not a recognized paired shortcode
**** Not a recognized paired shortcode
#+begin_foo
Content *with* Markdown /emphasis/ characters is rendered fine in the
default Special Blocks.
#+end_foo

This will export as [[/posts/special-blocks][Special Blocks]] --- either wrapped with =<div>=
tags or HTML5-recognized tags.
*** Paired shortcodes using special blocks (Positional Arguments) :positional:arguments:
:PROPERTIES:
:EXPORT_FILE_NAME: paired-shortcodes-special-blocks-positional-arguments
:EXPORT_HUGO_PAIRED_SHORTCODES: %alert myshortcode-pos
:END:
Test case for feature requested in {{{oxhugoissue(119)}}}.
**** Paired markdown shortcode
***** Arguments specified using =#+ATTR_HTML=
The =alert= shortcode takes 1 positional argument.

#+INCLUDE: "./all-posts.org::#alert-common-css" :only-contents t
#+INCLUDE: "./all-posts.org::#alert-original-icon-prefixing-css" :only-contents t

#+attr_html: :class note
#+begin_alert
Content *with* /emphasis/ characters is rendered.

The HTML <b>markup</b> will also get rendered.
#+end_alert

-----

Below is the about same as above, except that:
- =#+attr_shortcode= with =:args= is used instead of =#+attr_html=
with =:class= (*This change has no functional difference*).
- =warning= argument is used instead of =note=.

#+attr_shortcode: :args warning
#+begin_alert
Content *with* /emphasis/ characters is rendered.

The HTML <b>markup</b> will also get rendered.
#+end_alert
**** Paired non-markdown (default) shortcode
***** Arguments specified using =#+ATTR_HTML=
The =myshortcode-pos= takes 2 positional arguments. In the below
example, the double-quoted ="foo bar"= will be the /first/ argument,
and ="zoo"= will be the /second/.

#+attr_html: :class "foo bar" zoo
#+begin_myshortcode-pos
Content is rendered <b>like HTML</b>. The Markdown /emphasis/
characters are !! NOT !! rendered.
#+end_myshortcode-pos

-----

Below is the same as above, but with using =#+attr_shortcode= instead
of =#+attr_html=.

#+attr_shortcode: :args "foo bar" zoo
#+begin_myshortcode-pos
Content is rendered <b>like HTML</b>. The Markdown /emphasis/
characters are !! NOT !! rendered.
#+end_myshortcode-pos
* Paragraphs :paragraph:
** Paragraphs with ATTR_HTML :attr___html:attr___css:
:PROPERTIES:
Expand Down
50 changes: 26 additions & 24 deletions test/site/content/posts/alert-short-code-lookalike.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,30 +84,6 @@ div.alert-warning p:nth-child(2):before {
margin-bottom: 0;
}

/* Because of the empty div hack, the first paragraph will be the
second child in the div. So use "p:nth-child(2)" instead of the
original "p:first-child". */
div.alert p:nth-child(2)::before {
position: absolute;
top: -0.5rem;
left: -2rem;
font-family: 'FontAwesome';
font-size: 1.5rem;
color: #fff;
/* content: '\f05a'; */
content: '🛈';
width: 1.5rem;
text-align: center;
}

/* Because of the empty div hack, the first paragraph will be the
second child in the div. So use "p:nth-child(2)" instead of the
original "p:first-child". */
div.alert-warning p:nth-child(2):before {
/* content: '\f071'; */
content: '';
}

div.alert a {
color: rgba(255,255,255,0.9);
text-decoration: none;
Expand All @@ -133,6 +109,32 @@ div.alert-warning p:nth-child(2):before {
}
</style>

<style>
/* Because of the empty div hack, the first paragraph will be the
second child in the div. So use "p:nth-child(2)" instead of the
original "p:first-child". */
div.alert p:nth-child(2)::before {
position: absolute;
top: -0.5rem;
left: -2rem;
font-family: 'FontAwesome';
font-size: 1.5rem;
color: #fff;
/* content: '\f05a'; */
content: '🛈';
width: 1.5rem;
text-align: center;
}

/* Because of the empty div hack, the first paragraph will be the
second child in the div. So use "p:nth-child(2)" instead of the
original "p:first-child". */
div.alert-warning p:nth-child(2):before {
/* content: '\f071'; */
content: '';
}
</style>


## Alert using Special Block {#alert-using-special-block}

Expand Down
Loading

0 comments on commit 74cb3c2

Please sign in to comment.