How diazo works

How Diazo WorksGetting the mental model right

Steve [email protected]

Plone Conference 2013, Brasília

Thursday, October 3, 13

mailto:[email protected]

mailto:[email protected]

This talk has been rated

T TechnicalPervasive references to HTML and XML.

Disturbing Thematic Elements


XSLThursday, October 3, 13

HTMLXMLCSS


QuickReview


Theme Rules Content


DIAZO

Theme Rules Content


DIAZO

Theme Rules Content

ThemedContent


ContentContentContent

DIAZO

Theme Rules Content

ThemedContent


ContentContentContent

DIAZO

RulesRulesRulesTheme Rules Content

ThemedContent


<html><head> <title>Styled Page</title> <style>...</style> <script>...</script></head><body> ... <div id="newsbox">...</div> ... <div id="eventbox">...</div> ... <div id="rightcolumn">...</div> ... <div id="doormat">...</div> ...</body></html>

Theme — HTML


<html><head> <title>Content Page</title> <style>...</style> <script>...</script></head><body> ...<dl class="portlet portletNews"> <dt class="portletHeader"> ... </dt> <dd class="portletItem odd"> ... </dd> ...</dl> ...</body></html>

Content — HTML


<?xml version="1.0" encoding="UTF-8"?><rules xmlns="http://namespaces.plone.org/diazo" xmlns:css="http://namespaces.plone.org/diazo/css" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<rules css:if-content="#visual-portal-wrapper">

<theme href="index.html" /> ... <replace

css:theme-children="#newsbox"css:content="dl.portletNews" />

... </rules>

</rules>

Rules — XML


http://namespaces.plone.org/diazo

http://namespaces.plone.org/diazo

http://namespaces.plone.org/diazo/css

http://namespaces.plone.org/diazo/css

http://www.w3.org/1999/XSL/Transform

http://www.w3.org/1999/XSL/Transform

How it works:

A Naïve Mental Model


Theme1

Theme Content

DiazoRule #1


Theme1 Content


Theme1 Content

DiazoRule #2

Theme2


Content

Theme3

DiazoRule #3

Theme2


Contentdrops / replaces

Things get messy.


Theme Content

DiazoContent

Rule


CookedContent

Theme Content

DiazoContent

Rule


CookedContentTheme Content

RemainingDiazoRules


CookedContentTheme Content

RemainingDiazoRules

?Thursday, October 3, 13

How it works:

A Better Mental Model


DIAZO

Theme Rules

XSLTemplate

PART

ONE


XSLTemplate

XSLT

Content

OutputPage

PART

TWO


XSLTemplate

XSLT

Content

OutputPage

Transform Engine:plone.app.themingApacheNginxVarnishWSGI ...

PART

TWO


DIAZO

Theme Rules

XSLTemplate

PART

ONE


DIAZO

Theme Rules

XSLTemplate

PART

ONE

More like CSSthan Python


PART

TWO

XSLTemplate

XSLT

Content

OutputPage


PART

TWO

XSLTemplate

XSLT

Content

OutputPage

RecursiveNode Processor


PART

TWO

XSLTemplate

XSLT

Content

OutputPage

RecursiveNode Processor

Processes stuff;Processes whatit processed.


<body> ...

...</body>

<replace css:theme=”#theme1” css:content=”#content1”/>

<div id=”theme1”> Theme1 Stuff</div>

RULE

THEME


<body> ...

...</body>


XSL: pull in #content1

RULE

XSL


<body> ...

...</body>


<div id=”content1”> Content1 Stuff</div>

RULE

OUTPUT


<body> ...

...</body>

<replace css:theme-children=”#theme1” css:content=”#content1”/>

<div id=”theme1”> Theme1 Stuff</div>

RULE

THEME


<body> ...

...</body>


<div id=”theme1”> XSL: pull in #content1 </div>

RULE

XSL


<body> ...

...</body>


<div id=”theme1”> <div id=”content1”>…</div></div>

RULE

OUTPUT


<replace css:theme=”#theme1” css:content=”#content1” css:if-content=”#something”/>

RULE

XSL


XSL:if content has #something


RULE

XSL


XSL:if content has #something XSL: pull in #content1


RULE

XSL


XSL:if content has #something XSL: pull in #content1XSL:else


RULE

XSL


XSL:if content has #something XSL: pull in #content1XSL:else <div id=”theme1”> Theme1 Stuff </div>


RULE

XSL


<before theme=”#theme1” … />

<before theme-children”#theme1” …/>

<after theme-children=”theme1” … />

<after theme=”theme1” … />

RULES

XSL


XSL: pull in #cbefore





RULES

XSL


XSL: pull in #cbefore<div id=”theme1”>





RULES

XSL


XSL: pull in #cbefore<div id=”theme1”> XSL: pull in #cbefore-children





RULES

XSL


XSL: pull in #cbefore<div id=”theme1”> XSL: pull in #cbefore-children Theme 1 Stuff





RULES

XSL


XSL: pull in #cbefore<div id=”theme1”> XSL: pull in #cbefore-children Theme 1 Stuff XSL: pull in #cafter-children





RULES

XSL


XSL: pull in #cbefore<div id=”theme1”> XSL: pull in #cbefore-children Theme 1 Stuff XSL: pull in #cafter-children</div>





RULES

XSL


XSL: pull in #cbefore<div id=”theme1”> XSL: pull in #cbefore-children Theme 1 Stuff XSL: pull in #cafter-children</div>XSL: pull in #cafter





RULES

XSL






XSL: pull in #cbefore<div id=”theme1”> XSL: pull in #cbefore-children Theme 1 Stuff XSL: pull in #cafter-children</div>XSL: pull in #cafter

RULES

XSL



Remember Part 2?



RULE

XSL


XSL: pull in #content1


RULE

XSL


XSL: pull in #content1XSL: process what just got pulled in


RULE

XSL


XSL: pull in #content1XSL: process what just got pulled in “content” drops / replaces


RULE

XSL


<before css:theme=”#theme1” … />

<after css:theme=”#theme1” … />

<drop css:content=”#nastytag” />

XSL: pull in #cbefore<div id=”theme1”> Theme 1 Stuff</div>XSL: pull in #cafter

RULES

XSL






RULES

XSL

— do content drop

— do content drop


Let’s applythat knowledge


Let’s applythat knowledge

Moving Content


THEME

<body> ... <div id=”#newsslot” /> ... <div id=”#rightcol” /> ...</body>

<replace css:theme-children=”#newsslot” css:content=”.portletNews” /> <drop css:content=”.portletNews” /><replace css:theme-children=”#rightcol” css:content-children=”#col3”/>

RULE


THEME

<body> ... <div id=”#newsslot” /> ... <div id=”#rightcol” /> ...</body>

<replace css:theme-children=”#newsslot” css:content=”.portletNews” /> <drop css:content=”.portletNews” /><replace css:theme-children=”#rightcol” css:content-children=”#col3”/>

RULE

mode=”raw” />


mode = “raw”?


mode = “raw”?

Is there a “cooked”?


XSL

XSL: pull in #col3XSL: do “content” drops and replaces on what was inserted

<replace css:theme-children=”#rightcol” css:content-children=”#col3” />

RULE


XSL

XSL: pull in #col3XSL: do “content” drops and replaces on what was inserted

<replace css:theme-children=”#rightcol” css:content-children=”#col3” />

RULE mode=”raw” />

do routine cleanup, but no content drops /replaces


LessonsLearned


Rule orderdoesn’t matter.



mostlyV



Order rulesfor clarity.

mostlyV


Solve conflictswith specificity.


Solve conflictswith specificity.

Just like CSS.


Where Diazobreaks down:



Manipulating content beyond drop/replace




Manipulating attributes/text





Require XSLT





Require XSLT

And we’re not

doing that today!


ExploringDiazo


parts = ... diazotools

...

[diazotools]recipe = zc.recipe.eggeggs = diazo


$ bin/diazocompiler rules.xml \ -o theme.xsl

$ bin/diazorun -xsl theme.xsl \ content.html

diazocompiler:

diazorun:


How diazo works

Technology

Transcript of How diazo works