updates figure and logo to make use of | path correctly so it works (#365)

* updates figure and logo to make use of | path correctly so it works

* Sneak in a fix for broken close on P tag

components/vf-box/vf-box.njk

@@ -12,5 +12,5 @@ class="vf-box
 
 ">
   <h3 class="vf-box__heading">{{- heading -}}</h3>
-  <p class="vf-box__text">{{- text -}}/p>
+  <p class="vf-box__text">{{- text -}}</p>
 </div>

components/vf-figure/vf-figure.njk

@@ -3,6 +3,6 @@
 {% if id %} id="{{-id-}}"{% endif %}
 class="vf-figure
 {%- if override_class %} | {{override_class}}{% endif -%}">
-  <img class="vf-figure__image" src="{{imageUrl}}" alt="{{alttext}}">
+  <img class="vf-figure__image" src="{{imageUrl | path}}" alt="{{alttext}}">
   <figcaption class="vf-figure__caption">{{- html | safe if html else text -}}</figcaption>
 </figure>

components/vf-logo/vf-logo.config.yml

@@ -5,3 +5,4 @@ context:
   component-type: element
   href: http://www.embl.de
   sreen_reader_text: Visual Framework 2.0
+  image: '/assets/vf-logo/assets/logo.png'

components/vf-logo/vf-logo.njk

@@ -3,6 +3,6 @@
 {% if id %} id="{{-id-}}"{% endif %}
 class="vf-logo
 {%- if override_class %} | {{override_class}}{% endif -%}">
-  <img src="{{ '/assets/vf-logo/assets/logo.png' | path }}" alt="{{ _config.project.title }}">
+  <img src="{{ image | path }}" alt="{{ _config.project.title }}">
   <span class="vf-sr-only">{{sreen_reader_text}}</span>
 </a>