#CSUC14

1. In Pursuit of the Grand Unified
Template
or
Page Level Formats
Jason Aller
UC Davis School of Law
#csuc14, @JasonAller

2. Who am I?
• Cascade Server Admin and Developer
• This is my seventh Users Conference
• I make things like:
– The Cascade Entity Relationship Diagram
– grunt-cascade-deploy on github
– soap-cascade on github

3. A thanks to the folks at Tarleton
As the manager of www.tarleton.edu, Web Services
reserves the right to edit any Tarleton webpage at
any time in order to make corrections and
improvements to items such as misspellings, poor
content structure, accessibility issues, copyright
issues, security issues, and outdated information.
Web Services may not contact the content owner
in advance but will make an effort to communicate
the changes and issues soon after they are made.

4. Overview
I’m going to be using XSLT for my examples,
though I did buy “Velocity: The Basics” by James
Johnson
• Changing Links
• Conditional Restructuring - Bootstrap
• Exposing additional data at the page level

5. Conditional Restructuring
• Bootstrap – but can be used with many other
CSS frameworks
• One design with multiple layouts
• From a single template
• Let the system do all the work automatically
• Because automating the CMS is more effective
than training content contributors

6. The page as XML source

7. XSLT Default Templates
• Traverse Elements
<xsl:template match="*|/">
<xsl:apply-templates/>
</xsl:template>
• Process content and attributes
<xsl:template match="text()|@*">
<xsl:value-of select="."/>
</xsl:template>
• Remove comments and processing instructions
<xsl:template match="processing-instruction()|
comment()"/>

8. Changing Links
• Find with XPath
– <a…
– <a href="http…
– <a href="mailto:…
• Process the element (copy, modify, remove)
• Unless removing, send that element’s content
to be processed – recurse

9. Changing Links
• Add Google Tracking to outgoing links
• Append a non-breaking space and an icon
after the link for links to PDF and PowerPoint
files

10. Link code
<xsl:template match="node()[name() = 'a']">
<!-- begin copying the source node -->
<xsl:copy>
<!-- If we might want to track this with Google: -->
<xsl:if test="starts-with(@href,'http')">
<xsl:choose>
<!-- Check if there is already an onClick event and add ours -->
<xsl:when test="@onClick">
<xsl:attribute name="onClick">
<xsl:value-of select="concat(@onClick,' ')"/>
<xsl:call-template name="pageTracker"/>
</xsl:attribute>
</xsl:when>
<!-- of if there wasn't an onClick event add one -->
<xsl:otherwise>
<xsl:attribute name="onClick">
<xsl:call-template name="pageTracker"/>
</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
</xsl:if>

11. Link code cont.
<!-- process non-onClick attributes and child nodes -->
<xsl:apply-templates select="@*[name() != 'onClick']|node()"/>
<!-- figure out if we need to add docIcons -->
<xsl:choose>
<xsl:when test="child::node()[name() = 'img']">
<!-- Do nothing, because link is wrapped around graphic -->
</xsl:when>
<xsl:when test="substring(@href,string-length(@href)-3,4) = '.pdf'">
<xsl:text>&#160;</xsl:text>
<span class="sprite pdf-n"></span>
</xsl:when>
<xsl:when test="substring(@href,string-length(@href)-3,4) = '.ppt' or
substring(@href,string-length(@href)-4,5) = '.pptx'">
<xsl:text>&#160;</xsl:text>
<span class="sprite ppt-n"></span>
</xsl:when>
<xsl:otherwise/>
</xsl:choose>
</xsl:copy>
</xsl:template>

12. pageTracker
<xsl:template name="pageTracker">
<xsl:text>javascript:pageTracker.</xsl:text>
<xsl:text>_trackPageview('</xsl:text>
<xsl:value-of select="$pagePath"/>
<xsl:text>/outgoing/</xsl:text>
<xsl:value-of select="translate(., $singleQuote, '')"/>
<xsl:text>/</xsl:text>
<xsl:value-of select="substring-after
(@href,'http://')"/>
<xsl:text>');</xsl:text>
</xsl:template>
/current/portal/outgoing/Intranet/intranet.law.ucdavis.edu/index.aspx

13. Conditional Restructuring
• Determine rules
– Decide the logic once, then apply it
• Output alternative wrapper elements
• Process content – recurse
• It’s turtles all the way down

15. navmidbar(2)
2 8 2
navmidbar(3)
2 7 3
navmid
2 10
midbar(2)
10 2
midbar(3)
9 3
mid
12
home
4 5 3
Phone

16. home
4 5 3

17. navmidbar(3)
2 7 3

18. navmid
2 10

19. mid
12

20. midbar(2)
10 2

21. Bootstrap
Bootstrap is based on 12 columns and wants
<div class="col-sm-3">
or
<div class="col-sm-2">
We want to have a single template to maintain that
can allow three columns with the following options:
• Left – either 2 or 0
• Main – either 7, 8, 9, 10, or 12 – fills space
• Right – either 0, 2, or 3

22. One Template
<div id="zeroth">
<div class="row">
<div id="first">
<system-region name="SUBNAV"/>
<system-region name="QUICKLINKS"/>
</div>
<div id="second">
<system-region name="CONTENT-TITLE"/>
<system-region name="DEFAULT-PRE"/>
<system-region name="DEFAULT"/>
<system-region name="DEFAULT-POST"/>
</div>
<div id="third">
<system-region name="SIDEBAR-TOP"/>
<system-region name=“SIDEBAR"/>
<system-region name="SIDEBAR-BOTTOM"/>
</div>
</div>
</div>

23. Pseudocode Tour
• Check for content in each area
• Pick a layout based on this
• For each area apply the rules of that layout
– zeroth
– first
– second
– third

24. Checking for <div> Content
<xsl:variable name="con1"
select="count(
//node()
[name()='div']
[@id='first']
/*[not(
name() = 'img' and
substring(@src,1,10) =
'/css/icons')])"/>

25. Layout Assignment Logic
<xsl:variable name="layout">
<xsl:choose>
<xsl:when test="$pagePath
= '/index'">
<xsl:text>home</xsl:text>
</xsl:when>
<xsl:when test="$con1 = 0 and
not($con2 = 0) and
$con3 = 0">
<xsl:text>mid</xsl:text>
</xsl:when>
home
4 5 3
mid
12

26. Layout cont.
<xsl:when test="not($con1 = 0) and
not($con2 = 0) and $con3 = 0">
<xsl:text>navmid</xsl:text>
</xsl:when>
<xsl:when test="not($con1 = 0) and
not($con2 = 0) and not($con3 = 0)">
<xsl:text>navmidbar</xsl:text>
</xsl:when>
<xsl:when test="$con1 = 0 and
not($con2 = 0) and not($con3 = 0)">
<xsl:text>midbar</xsl:text>
</xsl:when>
navmid
2 10
navmidbar(2)
2 8 2
midbar(2)
10 2

27. Layout cont.
<xsl:otherwise>
<xsl:text>default</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>

28. zeroth
<xsl:template match="node()[name()='div'][@id='zeroth']">
<xsl:choose>
<xsl:when test="$layout = 'home'">
<div class="container" id="content">
<xsl:apply-templates select="node()"/>
</div>
</xsl:when>
<xsl:otherwise>
<div class="container">
<xsl:apply-templates select="node()"/>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

29. first
<xsl:template match="node()
[name()='div'][@id='first']">
<xsl:choose>
<xsl:when test="$layout = 'home'">
<div class="col-md-3 col-md-push-9">
<xsl:apply-templates />
</div>
</xsl:when>
home
4 5 3

30. first cont.
<xsl:when test="$layout = 'navmid'
or $layout = 'navmidbar'">
<div class="col-sm-2">
<xsl:if test="./div[@id = 'subNav'] or ./div[@id =
'relatedLinks'] or ./div[@class = 'left-column-full-
width']">
<xsl:attribute name="class">
<xsl:text>col-sm-2 left-column</xsl:text>
</xsl:attribute>
</xsl:if>
<xsl:apply-templates />
</div>
</xsl:when>
navmidbar(2)
2 8 2

31. first cont.
<xsl:otherwise/>
</xsl:choose>
</xsl:template>
midbar(2)
10 2
midbar(3)
9 3
mid
12

32. second
<xsl:template match="node()
[name()='div'][@id='second']">
<xsl:choose>
<xsl:when test="$layout = 'home'">
<div class="col-md-4 col-md-pull-3">
<xsl:apply-templates select="node()"/>
</div>
</xsl:when>
<xsl:when test="$layout = 'mid'">
<div class="col-sm-12" id="content">
<xsl:apply-templates select="node()"/>
</div>
</xsl:when>
mid
12
home
4 5 3

33. second cont.
<xsl:when test="$layout = 'navmid'">
<div class="col-sm-10" id="content">
<xsl:apply-templates select="node()"/>
</div>
</xsl:when>
<xsl:when test="$layout = 'midbar'">
<div id="content">
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="$sidebar = '3'">
<xsl:text>col-sm-9</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text>col-sm-10</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:apply-templates select="node()"/>
</div>
</xsl:when>
navmid
2 10
midbar(3)
9 3
midbar(2)
10 2

34. second cont.
<xsl:otherwise>
<div id="content">
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="$sidebar = '3'">
<xsl:text>col-sm-7</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text>col-sm-8</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:apply-templates />
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
navmidbar(2)
2 8 2
navmidbar(3)
2 7 3

35. third
<xsl:template match="node()
[name()='div'][@id='third']">
<xsl:choose>
<xsl:when test="$layout = 'home'">
<div class="col-md-5 col-md-pull-3">
<xsl:apply-templates />
</div>
</xsl:when> home
4 5 3

36. third cont.
<xsl:when test="$layout = 'navmidbar' or $layout = 'midbar'">
<div id="right-column">
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="$sidebar = '3'">
<xsl:text>col-sm-3</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text>col-sm-2</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:apply-templates />
</div>
</xsl:when>
midbar(3)
9 3
midbar(2)
10 2

37. third cont.
<xsl:otherwise/>
</xsl:choose>
</xsl:template>

38. Exposing metadata at the page level
• Expose at template level
• Extract values to variables
• Add rule to remove – swallow it with the
format

39. Insert
• <system-region name="CASCADE-METADATA"/>
• Index block self-metadata
• <xsl:template match="/">
<xsl:copy-of select="/"/>
</xsl:template>

40. Extract
Pull the page path out:
• <xsl:variable name="pagePath"
select="//calling-page/system-page/path"/>
Pull page metadata:
• <xsl:variable name="sidebar"
select="//calling-page/system-page/dynamic-metadata[
name = 'sidebar']/value"/>
Swallow the data to prevent publishing it:
• <xsl:template match="node()[name() = 'system-index-
block']"/>

41. Future plans
• RFC3966 tel: URI
• Not <blockquote> from <p> with “”
– I’ll write my own replacement for TinyMCE before
I do that! With Cascade 8 I won’t have to!
• Use [system-view:internal] and [system-view:
external] to highlight violations of the
style guide
• Take a vacation