wilderjds
/
ox-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support inlining SVGs

Browse Source 
Introduce a new HTML attribute:

    #+attr_html: :inlined t

Fixes https://github.com/kaushalmodi/ox-hugo/issues/253.
master
Kaushal Modi 7 years ago
parent 57f9d4368f
commit e57f417664
5 changed files with 231 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      doc/ox-hugo-manual.org
  2. 209
      ox-hugo.el
  3. 28
      test/site/content-org/all-posts.org
  4. 19
      test/site/content-org/svg-with-hyperlinks.svg
  5. 51
      test/site/content/posts/inlined-svg.md

20
doc/ox-hugo-manual.org
Unescape View File

@ -2786,6 +2786,26 @@ The /section path/ derived at this level is ~"main/sub1/p2/"~.
:END:
The /section path/ derived at this level is ~"main/sub2/"~.
#+end_src
*** Inlined SVGs
:PROPERTIES:
:EXPORT_FILE_NAME: inlined-svgs
:END:
Inlined SVGs are supported by a new HTML attribute introduced by
~ox-hugo~: *inlined*.
Simply add ~#+attr_html: :inlined t~ above the SVG file link.
Here's an example of inlining an SVG:
#+begin_src org
,#+attr_html: :inlined t
[[file:../test/site/content-org/svg-with-hyperlinks.svg]]
#+end_src
.. which results in:
#+attr_html: :inlined t
[[file:../test/site/content-org/svg-with-hyperlinks.svg]]
*** COMMENT Hugo Bundle
:PROPERTIES:
:EXPORT_FILE_NAME: hugo-bundle

209
ox-hugo.el
Unescape View File

@ -2017,10 +2017,8 @@ and rewrite link paths to make blogging more seamless."
(org-blackfriday--get-reference destination)
(org-export-get-reference destination info)))))))))
((org-export-inline-image-p link org-html-inline-image-rules)
;; (message "[ox-hugo-link DBG] Inline image: %s" raw-path)
;; (message "[org-hugo-link DBG] processing an image: %s" desc)
(let* ((path (org-hugo--attachment-rewrite-maybe raw-path info))
(parent (org-export-get-parent link))
(let* ((parent (org-export-get-parent link))
(parent-type (org-element-type parent))
;; If this is a hyper-linked image, it's parent type will
;; be a link too. Get the parent of *that* link in that
@ -2030,98 +2028,121 @@ and rewrite link paths to make blogging more seamless."
(useful-parent (if grand-parent
grand-parent
parent))
(inline-image (not (org-html-standalone-image-p useful-parent info)))
(source (if link-is-url
(concat type ":" path)
path))
(attr (org-export-read-attribute :attr_html useful-parent))
(num-attr (/ (length attr) 2)) ;(:alt foo) -> num-attr = 1
(alt-text (plist-get attr :alt))
(caption (or
;;Caption set using #+caption takes higher precedence
(org-string-nw-p
(org-export-data ;Look for caption set using #+caption
(org-export-get-caption (org-export-get-parent-element link))
info))
(plist-get attr :caption)))
(caption (when (org-string-nw-p caption)
(format "%s%s%s%s"
;; Tue Feb 13 11:32:45 EST 2018 - kmodi
;; Add the span tag once
;; https://github.com/gohugoio/hugo/issues/4406
;; gets resolved.
"" ;"<span class=\\\"figure-number\\\">"
(format (org-html--translate
(concat
(cdr (assoc 'figure org-blackfriday--org-element-string))
" %d:")
info)
(org-export-get-ordinal
useful-parent info
nil #'org-html--has-caption-p))
" " ;" </span>"
;; Escape the double-quotes, if any,
;; present in the caption.
(replace-regexp-in-string "\"" "\\\\\"" caption)))))
;; (message "[ox-hugo-link DBG] inline image? %s\npath: %s"
;; inline-image path)
;; (message "[org-hugo-link DBG] attr: %s num of attr: %d"
;; attr (length attr))
;; (message "[org-hugo-link DBG] parent-type: %s" parent-type)
;; (message "[org-hugo-link DBG] useful-parent-type: %s"
;; (org-element-type useful-parent))
(cond
(;; Use the Markdown image syntax if the image is inline and
;; there are no HTML attributes for the image, or just one
;; attribute, the `alt-text'.
(and inline-image
(or (= 0 num-attr)
(and alt-text
(= 1 num-attr))))
(let ((alt-text (if alt-text
alt-text
"")))
(format "![%s](%s)" alt-text source)))
(;; Else if the image is inline (with non-alt-text
;; attributes), use HTML <img> tag syntax.
inline-image
;; The "target" and "rel" attributes would be meant for <a>
;; tags. So do not pass them to the <img> tag.
(plist-put attr :target nil)
(plist-put attr :rel nil)
(org-html--format-image source attr info))
(t ;Else use the Hugo `figure' shortcode.
;; Hugo `figure' shortcode named parameters.
;; https://gohugo.io/content-management/shortcodes/#figure
(let ((figure-params `((src . ,source)
(alt . ,alt-text)
(caption . ,caption)
(link . ,(plist-get attr :link))
(title . ,(plist-get attr :title))
(class . ,(plist-get attr :class))
(attr . ,(plist-get attr :attr))
(attrlink . ,(plist-get attr :attrlink))
(width . ,(plist-get attr :width))
(height . ,(plist-get attr :height))
;; While the `target' and `rel'
;; attributes are not supported by
;; the inbuilt Hugo `figure'
;; shortcode, they can be used as
;; intended if a user has a custom
;; `figure' shortcode with the
;; support added for those.
(target . ,(plist-get attr :target))
(rel . ,(plist-get attr :rel))))
(figure-param-str ""))
(dolist (param figure-params)
(let ((name (car param))
(val (cdr param)))
(when val
(setq figure-param-str (concat figure-param-str
(format "%s=\"%s\" "
name val))))))
;; (message "[org-hugo-link DBG] figure params: %s" figure-param-str)
(format "{{< figure %s >}}" (org-trim figure-param-str)))))))
(extension (downcase (file-name-extension raw-path)))
(inlined-svg (and (stringp extension)
(string= "svg" extension)
(plist-get attr :inlined))))
;; (message "[ox-hugo-link DBG] Inline image: %s, extension: %s" raw-path extension)
;; (message "[ox-hugo-link DBG] inlined svg? %S" inlined-svg)
(if inlined-svg
(let* ((svg-contents (with-temp-buffer
(insert-file-contents raw-path)
(fill-region (point-min) (point-max)) ;Make huge one-liner SVGs sane
(buffer-substring-no-properties (point-min) (point-max))))
(svg-contents-sanitized (replace-regexp-in-string
;; Remove the HTML comments.
"<!--\\(.\\|\n\\)*?-->" ""
(replace-regexp-in-string
;; Remove the xml document tag as that cannot be inlined in-between
;; a Markdown (or even an HTML) file.
"<\\?xml version=\"1\\.0\" encoding=\"UTF-8\" standalone=\"no\"\\?>" ""
svg-contents))))
;; (message "[ox-hugo-link DBG] svg contents: %s" svg-contents)
;; (message "[ox-hugo-link DBG] svg contents sanitized: %s" svg-contents-sanitized)
svg-contents-sanitized)
(let* ((path (org-hugo--attachment-rewrite-maybe raw-path info))
(inline-image (not (org-html-standalone-image-p useful-parent info)))
(source (if link-is-url
(concat type ":" path)
path))
(num-attr (/ (length attr) 2)) ;(:alt foo) -> num-attr = 1
(alt-text (plist-get attr :alt))
(caption (or
;;Caption set using #+caption takes higher precedence
(org-string-nw-p
(org-export-data ;Look for caption set using #+caption
(org-export-get-caption (org-export-get-parent-element link))
info))
(plist-get attr :caption)))
(caption (when (org-string-nw-p caption)
(format "%s%s%s%s"
;; Tue Feb 13 11:32:45 EST 2018 - kmodi
;; Add the span tag once
;; https://github.com/gohugoio/hugo/issues/4406
;; gets resolved.
"" ;"<span class=\\\"figure-number\\\">"
(format (org-html--translate
(concat
(cdr (assoc 'figure org-blackfriday--org-element-string))
" %d:")
info)
(org-export-get-ordinal
useful-parent info
nil #'org-html--has-caption-p))
" " ;" </span>"
;; Escape the double-quotes, if any,
;; present in the caption.
(replace-regexp-in-string "\"" "\\\\\"" caption)))))
;; (message "[ox-hugo-link DBG] path: %s" path)
;; (message "[ox-hugo-link DBG] inline image? %s" inline-image)
;; (message "[org-hugo-link DBG] attr: %s num of attr: %d"
;; attr (length attr))
;; (message "[org-hugo-link DBG] parent-type: %s" parent-type)
;; (message "[org-hugo-link DBG] useful-parent-type: %s"
;; (org-element-type useful-parent))
(cond
(;; Use the Markdown image syntax if the image is inline and
;; there are no HTML attributes for the image, or just one
;; attribute, the `alt-text'.
(and inline-image
(or (= 0 num-attr)
(and alt-text
(= 1 num-attr))))
(let ((alt-text (if alt-text
alt-text
"")))
(format "![%s](%s)" alt-text source)))
(;; Else if the image is inline (with non-alt-text
;; attributes), use HTML <img> tag syntax.
inline-image
;; The "target" and "rel" attributes would be meant for <a>
;; tags. So do not pass them to the <img> tag.
(plist-put attr :target nil)
(plist-put attr :rel nil)
(org-html--format-image source attr info))
(t ;Else use the Hugo `figure' shortcode.
;; Hugo `figure' shortcode named parameters.
;; https://gohugo.io/content-management/shortcodes/#figure
(let ((figure-params `((src . ,source)
(alt . ,alt-text)
(caption . ,caption)
(link . ,(plist-get attr :link))
(title . ,(plist-get attr :title))
(class . ,(plist-get attr :class))
(attr . ,(plist-get attr :attr))
(attrlink . ,(plist-get attr :attrlink))
(width . ,(plist-get attr :width))
(height . ,(plist-get attr :height))
;; While the `target' and `rel'
;; attributes are not supported by
;; the inbuilt Hugo `figure'
;; shortcode, they can be used as
;; intended if a user has a custom
;; `figure' shortcode with the
;; support added for those.
(target . ,(plist-get attr :target))
(rel . ,(plist-get attr :rel))))
(figure-param-str ""))
(dolist (param figure-params)
(let ((name (car param))
(val (cdr param)))
(when val
(setq figure-param-str (concat figure-param-str
(format "%s=\"%s\" "
name val))))))
(message "[org-hugo-link DBG] figure params: %s" figure-param-str)
(format "{{< figure %s >}}" (org-trim figure-param-str)))))))))
((string= type "coderef")
(let ((ref (org-element-property :path link)))
(format (org-export-get-coderef-format ref desc)

28
test/site/content-org/all-posts.org
Unescape View File

@ -3,7 +3,7 @@
#+seq_todo: TODO DRAFT DONE
#+seq_todo: TEST__TODO | TEST__DONE
#+property: header-args :eval no
#+property: header-args :eval never-export
#+startup: indent
@ -44,7 +44,7 @@ Export this *first* post only by bringing point here and doing =M-x org-hugo-exp
This post has no date.
Export this *second* post only by bringing point here and doing =M-x org-hugo-export-wim-to-md=.
* Image :image:
* Image / Figure :image:
** Image links
:PROPERTIES:
:EXPORT_FILE_NAME: image-links
@ -344,6 +344,30 @@ So using =#+html: <style>.foo img ... </style>= and =#+attr_html: :class
Similarly, =:link=, =:attr=, =:attrlink= parameters in =#+attr_html=
are also supported to set the corresponding parameter in the Hugo
=figure= shortcode.
** Inlined SVG :svg:inline:
:PROPERTIES:
:EXPORT_FILE_NAME: inlined-svg
:END:
#+begin_description
Test inlined SVGs with hyperlinks.
#+end_description
{{{oxhugoissue(253)}}}
- [[http://plantuml.com/svg][Example of generating SVG with hyperlinks using PlantUML]]
- [[https://alligator.io/svg/hyperlinks-svg/][SVGs with hyperlinks need to be inlined]]
Introduce a new ~:inlined t~ HTML attribute.
#+begin_src plantuml :file svg-with-hyperlinks.svg :exports results
skinparam svgLinkTarget _parent
start
:[[https://ox-hugo.scripter.co/ ox-hugo homepage]];
stop
#+end_src
#+attr_html: :inlined t
#+RESULTS:
[[file:svg-with-hyperlinks.svg]]
* Setting heading anchors
:PROPERTIES:
:EXPORT_FILE_NAME: setting-heading-anchors

19
test/site/content-org/svg-with-hyperlinks.svg
Unescape View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="134px" preserveAspectRatio="none" style="width:162px;height:134px;" version="1.1" viewBox="0 0 162 134" width="162px" zoomAndPan="magnify"><defs><filter height="300%" id="fuuvga0hq4qb7" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><ellipse cx="80.5" cy="20" fill="#000000" filter="url(#fuuvga0hq4qb7)" rx="10" ry="10" style="stroke: none; stroke-width: 1.0;"/><rect fill="#FEFECE" filter="url(#fuuvga0hq4qb7)" height="33.9688" rx="12.5" ry="12.5" style="stroke: #A80036; stroke-width: 1.5;" width="141" x="10" y="50"/><a target="_parent" xlink:actuate="onRequest" xlink:href="https://ox-hugo.scripter.co/" xlink:show="new" xlink:title="https://ox-hugo.scripter.co/" xlink:type="simple"><text fill="#0000FF" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" text-decoration="underline" textLength="121" x="20" y="71.1387">ox-hugo homepage</text><line style="stroke: #0000FF; stroke-width: 1.0;" x1="20" x2="141" y1="73.1387" y2="73.1387"/></a><ellipse cx="80.5" cy="113.9688" fill="none" filter="url(#fuuvga0hq4qb7)" rx="10" ry="10" style="stroke: #000000; stroke-width: 1.0;"/><ellipse cx="81" cy="114.4688" fill="#000000" filter="url(#fuuvga0hq4qb7)" rx="6" ry="6" style="stroke: none; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="80.5" x2="80.5" y1="30" y2="50"/><polygon fill="#A80036" points="76.5,40,80.5,50,84.5,40,80.5,44" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="80.5" x2="80.5" y1="83.9688" y2="103.9688"/><polygon fill="#A80036" points="76.5,93.9688,80.5,103.9688,84.5,93.9688,80.5,97.9688" style="stroke: #A80036; stroke-width: 1.0;"/><!--
@startuml
skinparam svgLinkTarget _parent
start
:[[https://ox-hugo.scripter.co/ ox-hugo homepage]];
stop
@enduml
PlantUML version 1.2018.14(Fri Dec 21 11:33:16 EST 2018)
(GPL source distribution)
Java Runtime: OpenJDK Runtime Environment
JVM: OpenJDK 64-Bit Server VM
Java Version: 1.8.0_91-b14
Operating System: Linux
OS Version: 2.6.32-642.6.2.el6.x86_64
Default Encoding: UTF-8
Language: en
Country: US
--></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

51
test/site/content/posts/inlined-svg.md
Unescape View File

@ -0,0 +1,51 @@
+++
title = "Inlined SVG"
description = "Test inlined SVGs with hyperlinks."
tags = ["image", "svg", "inline"]
draft = false
+++
`ox-hugo` Issue #[253](https://github.com/kaushalmodi/ox-hugo/issues/253)
- [Example of generating SVG with hyperlinks using PlantUML](http://plantuml.com/svg)
- [SVGs with hyperlinks need to be inlined](https://alligator.io/svg/hyperlinks-svg/)
Introduce a new `:inlined t` HTML attribute.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
contentScriptType="application/ecmascript" contentStyleType="text/css"
height="134px" preserveAspectRatio="none"
style="width:162px;height:134px;" version="1.1" viewBox="0 0 162 134"
width="162px" zoomAndPan="magnify"><defs><filter height="300%"
id="fuuvga0hq4qb7" width="300%" x="-1" y="-1"><feGaussianBlur
result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut"
result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2"
result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3"
mode="normal"/></filter></defs><g><ellipse cx="80.5" cy="20"
fill="#000000" filter="url(#fuuvga0hq4qb7)" rx="10" ry="10"
style="stroke: none; stroke-width: 1.0;"/><rect fill="#FEFECE"
filter="url(#fuuvga0hq4qb7)" height="33.9688" rx="12.5" ry="12.5"
style="stroke: #A80036; stroke-width: 1.5;" width="141" x="10"
y="50"/><a target="_parent" xlink:actuate="onRequest"
xlink:href="https://ox-hugo.scripter.co/" xlink:show="new"
xlink:title="https://ox-hugo.scripter.co/" xlink:type="simple"><text
fill="#0000FF" font-family="sans-serif" font-size="12"
lengthAdjust="spacingAndGlyphs" text-decoration="underline"
textLength="121" x="20" y="71.1387">ox-hugo homepage</text><line
style="stroke: #0000FF; stroke-width: 1.0;" x1="20" x2="141"
y1="73.1387" y2="73.1387"/></a><ellipse cx="80.5" cy="113.9688"
fill="none" filter="url(#fuuvga0hq4qb7)" rx="10" ry="10"
style="stroke: #000000; stroke-width: 1.0;"/><ellipse cx="81"
cy="114.4688" fill="#000000" filter="url(#fuuvga0hq4qb7)" rx="6"
ry="6" style="stroke: none; stroke-width: 1.0;"/><line style="stroke:
#A80036; stroke-width: 1.5;" x1="80.5" x2="80.5" y1="30"
y2="50"/><polygon fill="#A80036"
points="76.5,40,80.5,50,84.5,40,80.5,44" style="stroke: #A80036;
stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.5;"
x1="80.5" x2="80.5" y1="83.9688" y2="103.9688"/><polygon
fill="#A80036"
points="76.5,93.9688,80.5,103.9688,84.5,93.9688,80.5,97.9688"
style="stroke: #A80036; stroke-width: 1.0;"/></g></svg>
Write Preview
Loading…
Cancel
Save