base

app/templates/app/base.html

@@ -31,12 +31,18 @@
             {% with water_css="https://cdn.jsdelivr.net/npm/water.css@2/out/" %}
                 <link rel="stylesheet" href="{{ water_css }}{% if theme %}{{ theme }}{% else %}dark{% endif %}{% if not debug %}.min{% endif %}.css">
             {% endwith %}
-            {% with href="snowebsvg/dist/css/core-"|add:settings.VERSION|add:".css" %}
+            {% with href="snowebsvg/dist/css/themes-"|add:settings.VERSION|add:".css" %}
+                <link rel="stylesheet" href="{% static href %}">
+            {% endwith %}
+            {% with href="snowebsvg/dist/css/sizer-"|add:settings.VERSION|add:".css" %}
                 <link rel="stylesheet" href="{% static href %}">
             {% endwith %}
             {% with href="snowebsvg/dist/css/essential-"|add:settings.VERSION|add:".css" %}
                 <link rel="stylesheet" href="{% static href %}">
             {% endwith %}
+            {% with href="snowebsvg/dist/css/effect-"|add:settings.VERSION|add:".css" %}
+                <link rel="stylesheet" href="{% static href %}">
+            {% endwith %}
             <style>
                 :root {
                 {% if theme == 'light' %}

app/templates/app/common/svg_set.html

@@ -2,10 +2,7 @@
 
 <div style="display: flex; flex-wrap: wrap">
     {% for svg in svg_set %}
-        <a style="text-decoration: none; text-align: center; width: 100px; padding: 10px"
-           href="{% url 'app:svg' svg.group.collection.key svg.group.key svg.key %}" class="svg-trigger">
-            {% svg_inline svg theme %}
-            <p><code>{{ svg.key_composer }}</code></p>
-        </a>
+        {% svg_preview svg theme 'x3' %}
+        {% comment %}<p><code>{{ svg.key_composer }}</code></p>{% endcomment %}
     {% endfor %}
 </div>

app/templates/app/experimental.html

@@ -0,0 +1,47 @@
+{% extends 'app/base.html' %}
+{% load svg static %}
+
+{% block css %}
+    {{ block.super }}
+    {% with href="snowebsvg/dist/css/experimental-"|add:settings.VERSION|add:".css" %}
+        <link rel="stylesheet" href="{% static href %}">
+    {% endwith %}
+{% endblock %}
+
+{% block body %}
+    {% with theme=request.session.theme svg_key='essential-angle_down-basic' %}
+        <h1>Experimental</h1>
+
+        <div class="svg-trigger" style="display: flex; align-items: center;">
+            <span>{% lorem 5 w random %}</span>
+            {% svg_inline svg_key theme 'x2' %}
+        </div>
+
+        <div class="svg-trigger" style="display: flex; align-items: center;">
+            {% svg_inline svg_key theme 'x2' %}
+            <span>{% lorem 5 w random %}</span>
+        </div>
+
+
+
+        <div style="display: flex; flex-wrap: wrap">
+            <article class="svg-effect-builder" style="position: relative; flex: 1; margin: 20px">
+                {% svg_inline svg_key theme %}
+                <h2>{% lorem 5 w random %}</h2>
+                <p>{% lorem 20 w random %}</p>
+            </article>
+            <article class="svg-effect-builder" style="position: relative; flex: 1; margin: 20px">
+                {% svg_inline svg_key theme %}
+                <h2>{% lorem 10 w random %}</h2>
+                <p>{% lorem 50 w random %}</p>
+            </article>
+            <article class="svg-effect-builder" style="position: relative; flex: 1; margin: 20px">
+                {% svg_inline svg_key theme %}
+                <h2>{% lorem 20 w random %}</h2>
+                <p>{% lorem 100 w random %}</p>
+            </article>
+        </div>
+
+
+    {% endwith %}
+{% endblock %}

app/templates/app/svg_list.html

@@ -11,9 +11,7 @@
     {% with theme=request.session.theme %}
         {% for svg in object_list %}
             <h1>SVG <code>{{ svg.key_composer }}</code></h1>
-            <a href="#" class="svg-trigger">
-                {% svg_inline svg theme 'x5' %}
-            </a>
+            {% svg_preview svg theme 'x5' %}
             <h2>Attributes</h2>
             <ul>
                 <li>
@@ -46,10 +44,10 @@ <h3>CSS</h3>
             <textarea id="code-styles-{{ svg.key_composer }}">{% collection_styles svg.group.collection theme %}</textarea>
             <button type="button" onclick="document.getElementById('code-styles-{{ svg.key_composer }}').select();document.execCommand('copy');">Copy</button>
             <h3>HTML</h3>
-            <textarea id="code-html-{{ svg.key_composer }}"><a href="#" class="svg-trigger">&#13;&#10;&#13;&#10;{% svg_inline svg theme %}&#13;&#10;&#13;&#10;</a></textarea>
+            <textarea id="code-html-{{ svg.key_composer }}">{% svg_preview svg theme 'x3' %}</textarea>
             <button type="button" onclick="document.getElementById('code-html-{{ svg.key_composer }}').select();document.execCommand('copy');">Copy</button>
             <h3>Django</h3>
-            <textarea id="code-django-{{ svg.key_composer }}" style="height: 110px">{% svg_django svg theme %}</textarea>
+            <textarea id="code-django-{{ svg.key_composer }}" style="height: 110px">{% svg_django svg theme 'x3' %}</textarea>
             <button type="button" onclick="document.getElementById('code-django-{{ svg.key_composer }}').select();document.execCommand('copy');">Copy</button>
         {% endfor %}
     {% endwith %}

app/urls.py

@@ -1,5 +1,7 @@
 from django.contrib.sitemaps.views import sitemap
 from django.urls import path
+from django.conf import settings
+from django.views.generic import TemplateView
 
 from app.views import CollectionList, GroupSvgList, SvgList, SvgSearch
 from app.sitemaps import StaticSitemap, CollectionSitemap, GroupSvgSitemap, SvgSitemap
@@ -22,3 +24,8 @@
     path('sitemap.xml', sitemap, {'sitemaps': sitemaps},
          name='django.contrib.sitemaps.views.sitemap')
 ]
+
+if settings.DEBUG:
+    urlpatterns += [
+        path('test/', TemplateView.as_view(template_name='app/experimental.html'), name='experimental'),
+    ]

docs/getting-started/html.rst

@@ -25,8 +25,10 @@ Choose at `svg.snoweb.fr <https://svg.snoweb.fr>`_.
 
         ...
 
-        <!--Snoweb SVG Core CSS-->
-        <link rel="stylesheet" href="https://static.snoweb.fr/snowebsvg/dist/css/core-<version>.css">
+        <!--Themes : manage dark and light mode-->
+        <link rel="stylesheet" href="https://static.snoweb.fr/snowebsvg/dist/css/themes-<version>.css">
+        <!--Sizer : add default size to SVGs-->
+        <link rel="stylesheet" href="https://static.snoweb.fr/snowebsvg/dist/css/themes-<version>.css">
 
         <!--Add your Snoweb SVG collections CSS like this-->
         <link rel="stylesheet" href="https://static.snoweb.fr/snowebsvg/dist/css/<collection_key>-<version>.css">

snowebsvg/models.py

@@ -4,6 +4,7 @@
 from django.template.loader import get_template
 from django.utils.functional import cached_property
 from django.template.loaders.app_directories import Loader
+from django.template.exceptions import TemplateDoesNotExist
 
 from snowebsvg import settings
 
@@ -157,15 +158,26 @@ def key_decomposer(self, key_composer):
     def render_django(self, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
         """
         Method for rendering Django template code
+
+        :param theme: Theme, defaults to :ref:`SVG_DEFAULT_THEME <references_settings>`
+        :param size: Size, defaults :ref:`SVG_DEFAULT_SIZE <references_settings>`
         """
-        svg_template = get_template("snowebsvg/collections/%s/django.html" % self.group.collection.key)
-        return svg_template.render({
+        context = {
             'self': self,
             'theme': theme,
             'size': size,
             'start': '{%',
             'end': '%}'
-        })
+        }
+        try:
+            svg_template = get_template("snowebsvg/collections/%s/%s/_django.html" % (
+                self.group.collection.key,
+                self.group.key,
+            ))
+            return svg_template.render(context)
+        except TemplateDoesNotExist:
+            svg_template = get_template("snowebsvg/common/django.html")
+            return svg_template.render(context)
 
     def render_html(self, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
         """
@@ -174,13 +186,37 @@ def render_html(self, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAUL
         :param theme: Theme, defaults to :ref:`SVG_DEFAULT_THEME <references_settings>`
         :param size: Size, defaults :ref:`SVG_DEFAULT_SIZE <references_settings>`
         """
-        svg_template = get_template("snowebsvg/collections/%s/%s/%s" % (
+        svg_template = get_template("snowebsvg/collections/%s/%s/%s.html" % (
             self.group.collection.key,
             self.group.key,
-            self.key + '.html'
+            self.key
         ))
         return svg_template.render({
             'self': self,
             'theme': theme,
             'size': size
         })
+
+    def render_preview(self, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
+        """
+        Method for rendering a preview of Svg to HTML
+        If _preview.html exist, then render the preview html file
+        If _preview does not exist, then fall back on render_html()
+
+        :param theme: Theme, defaults to :ref:`SVG_DEFAULT_THEME <references_settings>`
+        :param size: Size, defaults :ref:`SVG_DEFAULT_SIZE <references_settings>`
+        """
+        context = {
+            'self': self,
+            'theme': theme,
+            'size': size
+        }
+        try:
+            svg_template = get_template("snowebsvg/collections/%s/%s/_preview.html" % (
+                self.group.collection.key,
+                self.group.key,
+            ))
+            return svg_template.render(context)
+        except TemplateDoesNotExist:
+            svg_template = get_template("snowebsvg/common/preview.html")
+            return svg_template.render(context)

snowebsvg/templates/snowebsvg/collections/effect/article/_django.html

@@ -0,0 +1,3 @@
+{{ start }} load svg {{ end }}
+
+{% block content %}WIP{% endblock %}

snowebsvg/templates/snowebsvg/collections/effect/article/_preview.html

@@ -0,0 +1,7 @@
+<a style="text-decoration: none" href="{% url 'app:svg' self.group.collection.key self.group.key self.key %}">
+    <div style="display: flex; flex-wrap: wrap">
+        {% include 'snowebsvg/collections/effect/article/_preview_article.html' %}
+        {% include 'snowebsvg/collections/effect/article/_preview_article.html' %}
+        {% include 'snowebsvg/collections/effect/article/_preview_article.html' %}
+    </div>
+</a>

snowebsvg/templates/snowebsvg/collections/effect/article/_preview_article.html

@@ -0,0 +1,11 @@
+{% load svg %}
+
+<div class="svg-trigger" style="flex: 1">
+    <article class="svg-effect-builder" style="position: relative; margin: 20px">
+        {% svg_inline self theme %}
+        <div style="padding: 10px">
+            <h2>{% lorem 5 w random %}</h2>
+            <p>{% lorem 10 w random %}</p>
+        </div>
+    </article>
+</div>

snowebsvg/templates/snowebsvg/collections/effect/article/basic.html

@@ -0,0 +1,13 @@
+{% extends 'snowebsvg/common/builders/effect.html' %}
+
+{% block builder_base %}
+    <g opacity="0.1">
+        <polygon class="svg-fill-primary" points="0,0 50,100 100,0"></polygon>
+    </g>
+{% endblock %}
+
+{% block builder_hover %}
+    <g opacity="0.1">
+        <rect class="svg-fill-primary" x="0" y="0" width="100" height="100"></rect>
+    </g>
+{% endblock %}

snowebsvg/templates/snowebsvg/collections/effect/styles.html

@@ -0,0 +1,6 @@
+{% extends 'snowebsvg/common/styles.html' %}
+
+{% block css %}<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}themes-{{ settings.VERSION }}.css">
+<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}sizer-{{ settings.VERSION }}.css">
+<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}essential-{{ settings.VERSION }}.css">
+<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}{{ self.key }}-{{ settings.VERSION }}.css">{% endblock %}

snowebsvg/templates/snowebsvg/collections/essential/styles.html

@@ -1,4 +1,5 @@
 {% extends 'snowebsvg/common/styles.html' %}
 
-{% block css %}<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}core-{{ settings.VERSION }}.css">
+{% block css %}<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}themes-{{ settings.VERSION }}.css">
+<link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}sizer-{{ settings.VERSION }}.css">
 <link rel="stylesheet" href="{{ settings.BASE_URL_CSS }}{{ self.key }}-{{ settings.VERSION }}.css">{% endblock %}

snowebsvg/templates/snowebsvg/common/builders/effect.html

@@ -0,0 +1,3 @@
+{% extends 'snowebsvg/common/builders/basic.html' %}
+
+{% block svg_aspect_ratio %}none{% endblock %}

snowebsvg/templates/snowebsvg/common/django.html

@@ -1,3 +1,5 @@
 {{ start }} load svg {{ end }}
 
-{% block content %}{% endblock %}
+{% block content %}<a href="#" class="svg-trigger">
+    {{ start }} svg_inline '{{ self.key_composer }}' '{{ theme }}' '{{ size }}' {{ end }}
+</a>{% endblock %}

snowebsvg/templates/snowebsvg/common/preview.html

@@ -0,0 +1,4 @@
+{% load svg %}
+<a href="{% url 'app:svg' self.group.collection.key self.group.key self.key %}" class="svg-trigger">
+    {% svg_inline self theme size %}
+</a>

snowebsvg/templates/snowebsvg/common/svg.html

@@ -1,6 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg"
-     class="{% block svg_class %}svg-snoweb {% if size %}{{ size }}{% else %}x3{% endif %} svg-theme-{% if theme %}{{ theme }}{% else %}dark{% endif %}{% endblock %}"
-     x="{% block svg_x %}0px{% endblock %}"
-     y="{% block svg_y %}0px{% endblock %}"
+     class="{% block svg_class %}svg-snoweb {% if size %}{{ size }}{% endif %} svg-theme-{% if theme %}{{ theme }}{% endif %}{% endblock %}"
+     x="{% block svg_x %}0{% endblock %}"
+     y="{% block svg_y %}0{% endblock %}"
      viewBox="{% block svg_viewbox %}0 0 100 100{% endblock %}"
+     preserveAspectRatio="{% block svg_aspect_ratio %}xMidYMid meet{% endblock %}"
 >{% block svg_content %}{% endblock %}</svg>

snowebsvg/templatetags/svg.py

@@ -7,7 +7,7 @@
 
 
 @register.simple_tag
-def svg_inline(svg_target, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
+def svg_inline(svg_target, theme=None, size=None):
     if isinstance(svg_target, Svg):
         return svg_target.render_html(theme, size)
     else:
@@ -17,7 +17,7 @@ def svg_inline(svg_target, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_D
 
 
 @register.simple_tag
-def svg_django(svg_target, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
+def svg_django(svg_target, theme=None, size=None):
     if isinstance(svg_target, Svg):
         return svg_target.render_django(theme, size)
     else:
@@ -27,7 +27,17 @@ def svg_django(svg_target, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_D
 
 
 @register.simple_tag
-def collection_styles(collection, theme=settings.SVG_DEFAULT_THEME, size=settings.SVG_DEFAULT_SIZE):
+def svg_preview(svg_target, theme=None, size=None):
+    if isinstance(svg_target, Svg):
+        return svg_target.render_preview(theme, size)
+    else:
+        svg = Svg()
+        svg_composed = svg.key_decomposer(svg_target)
+        return svg_composed.render_preview(theme, size)
+
+
+@register.simple_tag
+def collection_styles(collection, theme=None, size=None):
     return collection.render_styles(theme, size)
 
 # class SvgLayoutNode(template.Node):

snowebsvg/tests/__init__.py

@@ -3,7 +3,7 @@
 from django.core import management
 
 from snowebsvg.models import Svg, Collection
-from snowebsvg.templatetags.svg import svg_inline, svg_django, collection_styles
+from snowebsvg.templatetags.svg import svg_inline, svg_django, collection_styles, svg_preview
 
 logger = logging.getLogger('snowebsvg')
 
@@ -31,6 +31,15 @@ def test_templatetags_svg_django(self):
             logger.debug("svg_django key_composer=`%s`" % str(svg.key_composer))
             svg_django(svg.key_composer)
 
+    def test_templatetags_svg_preview(self):
+        self.test_svg_build()
+        for svg in Svg.objects.all():
+            logger.debug("svg_preview svg=`%s`" % str(svg))
+            svg_preview(svg)
+        for svg in Svg.objects.all():
+            logger.debug("svg_preview key_composer=`%s`" % str(svg.key_composer))
+            svg_preview(svg.key_composer)
+
     def test_templatetags_collection_styles(self):
         self.test_svg_build()
         for collection in Collection.objects.all():

static/snowebsvg/src/scss/effect.scss

@@ -0,0 +1,10 @@
+.svg-effect-builder {
+  position: relative;
+
+  svg:first-of-type {
+    z-index: -1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}