Piano Sonata Symphony Ensemble

As mentioned previously, I am building this site on the Piano Sonata Symphony Ensemble designed by Rodrigo Galindez and adapted for Symphony by Fazal Khan.

I also mentioned that there were some items that I felt were missing. Here’s what I have done so far to add some missing features.

Symphony Ensembles - Piano Sonata downloads page

Change Log

11 December 2009

  • Create a custom 403 Forbidden layout
  • Create a custom 404 Page Not Found layout
  • Add Drafts page for logged in users to view unpublished articles
  • Modify get-article utility to link to Drafts if the article has not yet been published
  • Display Edit link for articles if logged in
  • Remove filter from Tags data source, since I want all tags to be listed
  • Add filter to the Archive: Listing data source to display only published articles
  • CSS to format code blocks and current navigation items
Custom 403 Forbidden Page

The XSL stylesheet for the forbidden page looks like this:

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

    <xsl:import href="../utilities/master.xsl"/>
    <xsl:import href="../utilities/get-article.xsl"/>
    <xsl:import href="../utilities/get-notes.xsl"/>
    <xsl:import href="../utilities/get-comments.xsl"/>

    <xsl:template match="data">
        <div id="content" class="col span-9">
            <h2>403 Error</h2>
            <h3 class="script">Forbidden</h3>
            <p>Have you been poking around where you shouldn't be?  
            Head back to <a href="{$root}/">home</a>  
            or <a href="{$root}/about/">contact</a> me.</p>
        </div>
    </xsl:template>

</xsl:stylesheet>
Custom 404 Not Found Page

The XSL stylesheet for the 404 error page looks like this:

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

    <xsl:import href="../utilities/master.xsl"/>
    <xsl:import href="../utilities/get-article.xsl"/>
    <xsl:import href="../utilities/get-notes.xsl"/>
    <xsl:import href="../utilities/get-comments.xsl"/>

    <xsl:template match="data">
        <div id="content" class="col span-9">
            <h2>404 Error</h2>
            <h3 class="script">Page Not Found</h3>
            <p>Head back to <a href="{$root}/">home</a> 
            or <a href="{$root}/about/">contact</a> me.</p>
        </div>
    </xsl:template>

</xsl:stylesheet>
Drafts Page

The Drafts page template is not much different from the template for the Home page. The main difference is in the select attribute of the xsl:apply-templates instruction, where the data source is drafts, rather than homepage-articles.

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

    <xsl:import href="../utilities/master.xsl"/>
    <xsl:import href="../utilities/get-article.xsl"/>
    <xsl:import href="../utilities/get-notes.xsl"/>
    <xsl:import href="../utilities/get-comments.xsl"/>

    <xsl:template match="data">
        <div id="content" class="col span-9">
            <h2>Drafts</h2>
            <h3 class="script">These articles are yet to be published</h3>
            <p>Head back to <a href="{$root}/">home</a> 
            or <a href="{$root}/about/">contact</a> me.</p>
            <xsl:apply-templates select="drafts/entry" mode="article"/>
        </div>
        <div id="sidebar" class="col last span-3">
            <xsl:call-template name="category"/>
            <xsl:call-template name="tag"/>
            <xsl:call-template name="external-links"/>
        </div>
    </xsl:template>

</xsl:stylesheet>
Drafts Articles

Articles that have not yet been published should not be linked to the Articles page. Clicking on the titles of these articles will result in 404 Page Not Found error. To solve this issue, I created a parameter, under the import instructions, to determine where the links should point to based on the value of the $current-page parameter. Basically, this is saying, “If the current page is Drafts, set the $publish-page parameter to drafts.”

              <xsl:import href="typography.xsl"/>
<xsl:import href="get-images.xsl"/>

<xsl:param name="publish-page">
    <xsl:choose>
        <xsl:when test="$current-page = 'drafts'">drafts</xsl:when>
        <xsl:otherwise>articles</xsl:otherwise>
    </xsl:choose>
</xsl:param>

Then the title of the post can have a link that is dynamically generated with a link to the appropriate page (notice the $publish-page parameter added as an attribute value template:

              <h3>
    <a href="{$root}/{$publish-page}/{title/@handle}">
        <xsl:value-of select="title"/>
    </a>
</h3>
Edit Link

For logged-in users, an Edit link can be added to link directly to the Symphony admin, thanks to the clean URLs used by all admin pages. The following conditional instruction in the get-article utility inserts the id to display the edit page for an entry in the Articles section.

              <xsl:if test="/data/events/login-info/@logged-in = 'true'">
    <li><a href="{$root}/symphony/publish/articles/edit/{@id}/">Edit</a></li>
</xsl:if>
CSS

I also added some rules to the master.css file. I added a rule for anchors with a class of “current” to display selected navigation items in the same blue as the hover state for anchors. For now, this is only showing up on demo pages in the experiments directory that I have created as HTML pages outside of Symphony, which are still referring to the same CSS as the Symphony templates.

              a:hover,
a.current {
    color: #0F83DB;
}

Plus, I added some formatting to display code blocks as green type against a dark background (with rounded corners for Firefox, Safari, and any browsers that support CSS3 properties):

              pre {
    white-space: normal;
    margin-bottom: 1em;
}

pre code {
    display: block;
    white-space: pre;
    padding: 1em;
    background: #333;
    color: #0f0;
    font-size: 1.3em;
    overflow-x: auto;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}