Skip to content

Instantly share code, notes, and snippets.

@morrisonlevi

morrisonlevi/doc.html

Created December 3, 2014 20:35
Show Gist options
  • Save morrisonlevi/0df2155a460d5b415d20 to your computer and use it in GitHub Desktop.
Save morrisonlevi/0df2155a460d5b415d20 to your computer and use it in GitHub Desktop.
Download ZIP
Transform super basic DocBook into HTML 5 via XSLT.
Raw
doc.html
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html>
<head>
<title>Products</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<main>
<h1>Product A</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
tristique elementum bibendum. Praesent at fermentum massa. Proin
luctus orci risus, nec egestas sem euismod a. Nam venenatis, sapien a
convallis scelerisque, lacus eros ullamcorper dolor, dignissim
ultricies dui turpis nec orci. Morbi fermentum at orci sed ultricies.
Donec rutrum quis lectus et rutrum. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
Suspendisse et purus elementum, bibendum justo at, euismod sem.
Maecenas vel purus vitae eros pharetra sodales. Aenean facilisis
auctor felis, id vestibulum est tempus eget. Curabitur scelerisque
cursus <a href="https://www.google.com/webhp#q=augue">augue</a>.
</p>
<section>
<h2>Features</h2>
<p>
Nulla diam mauris, congue vel efficitur sit amet, feugiat et dolor.
Donec lorem augue, mollis eu nisi at, eleifend lacinia velit.
</p>
<ol><li>Wow</li><li>Very xml</li></ol>
<p>
Mauris vitae enim ac arcu tincidunt ultricies. Donec faucibus sapien ut
urna euismod, pharetra vulputate ligula accumsan. Nulla ullamcorper
arcu quis mollis placerat.
</p>
<ul><li>such structure</li><li>amaze</li></ul>
</section>
</main>
</body>
</html>
Raw
doc.xml
<?xml version="1.0"?>
<!DOCTYPE article PUBLIC "-//OASIS//DTD DocBook XML V4.1.2//EN" "http://www.oasis-open.org/docbook/xml/4.1.2/docbookx.dtd">
<article>
<articleinfo>
<title>Products</title>
<mediaobject>
<imageobject>
<imagedata fileref="" format="JPG" />
</imageobject>
</mediaobject>
</articleinfo>
<section role="main">
<title>Product A</title>
<para>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
tristique elementum bibendum. Praesent at fermentum massa. Proin
luctus orci risus, nec egestas sem euismod a. Nam venenatis, sapien a
convallis scelerisque, lacus eros ullamcorper dolor, dignissim
ultricies dui turpis nec orci. Morbi fermentum at orci sed ultricies.
Donec rutrum quis lectus et rutrum. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
Suspendisse et purus elementum, bibendum justo at, euismod sem.
Maecenas vel purus vitae eros pharetra sodales. Aenean facilisis
auctor felis, id vestibulum est tempus eget. Curabitur scelerisque
cursus <ulink url="https://www.google.com/webhp#q=augue">augue</ulink>.
</para>
<section>
<title>Features</title>
<para>
Nulla diam mauris, congue vel efficitur sit amet, feugiat et dolor.
Donec lorem augue, mollis eu nisi at, eleifend lacinia velit.
</para>
<orderedlist>
<listitem><para>Wow</para></listitem>
<listitem><para>Very xml</para></listitem>
</orderedlist>
<para>
Mauris vitae enim ac arcu tincidunt ultricies. Donec faucibus sapien ut
urna euismod, pharetra vulputate ligula accumsan. Nulla ullamcorper
arcu quis mollis placerat.
</para>
<itemizedlist>
<listitem><para>such structure</para></listitem>
<listitem><para>amaze</para></listitem>
</itemizedlist>
</section>
</section>
</article>
Raw
doc.xsl
<?xml version="1.0" ?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" doctype-system="about:legacy-compat" indent="yes" encoding="UTF-8" omit-xml-declaration="yes" />
<xsl:template match="/article">
<html>
<head>
<title><xsl:value-of select="articleinfo/title" /></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<xsl:apply-templates select="section[@role='main']" />
</body>
</html>
</xsl:template>
<xsl:template match="section[@role='main']">
<main>
<xsl:apply-templates />
</main>
</xsl:template>
<xsl:template match="section">
<section>
<xsl:apply-templates/>
</section>
</xsl:template>
<xsl:template match="title">
<xsl:variable name="section_depth" select="count(ancestor::section)" />
<xsl:choose>
<xsl:when test="$section_depth &lt; 6">
<xsl:element name="h{$section_depth}">
<xsl:value-of select="." />
</xsl:element>
</xsl:when>
<xsl:otherwise>
<h6><xsl:value-of select="." /></h6>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template match="para">
<xsl:choose>
<xsl:when test="ancestor::listitem">
<xsl:apply-templates/>
</xsl:when>
<xsl:otherwise>
<p>
<xsl:apply-templates/>
</p>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template match="ulink">
<a>
<xsl:attribute name="href">
<xsl:value-of select="@url" />
</xsl:attribute>
<xsl:apply-templates />
</a>
</xsl:template>
<xsl:template match="orderedlist">
<ol>
<xsl:apply-templates select="listitem" />
</ol>
</xsl:template>
<xsl:template match="itemizedlist">
<ul>
<xsl:apply-templates select="listitem" />
</ul>
</xsl:template>
<xsl:template match="listitem">
<li>
<xsl:apply-templates />
</li>
</xsl:template>
</xsl:stylesheet>
Raw
gistfile1.txt
html {
margin:0;
padding:0;
}
body {
font:normal 1rem/1.5rem Times, serif;
max-width: 960px;
margin:1.5rem auto;
padding:0;
}
main {
margin: 0 auto;
box-sizing: border-box;
}
main h1 {
font-size: 2rem;
line-height:2rem;
}
main h2 {
font-size: 1.5rem;
line-height:2rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment