First commit of the ousia based website architecture

author: Andreas Stöckel <astoecke@techfak.uni-bielefeld.de> 2015-03-06 23:54:49 +0100
committer: Andreas Stöckel <astoecke@techfak.uni-bielefeld.de> 2015-03-06 23:54:49 +0100
commit: ca1a6aa7df6703c10d1cd97afedd9c6838ba425b (patch)
tree: ca8a7fbd6fd4d43268a095ead32f7b4fecd38b72
parent: e2f172624be2c0cc96461bdd9418e23e798a93b2 (diff)
11 files changed, 723 insertions, 10 deletions
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..8e21c8e
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,41 @@
+# Makefile for compiling the Ousía Homepage
+#
+# (c) Andreas Stöckel, 2015
+#
+# This work is licensed under a Creative Commons Attribution-ShareAlike 4.0
+# International License. <http://creativecommons.org/licenses/by-sa/4.0/>
+
+SOURCE_OSML=$(wildcard *.osml)
+TARGET_XML=$(SOURCE_OSML:.osml=.xml)
+TARGET_HTML=$(SOURCE_OSML:.osml=.html)
+
+.PHONY: all
+all: style/style.css $(TARGET_XML) $(TARGET_HTML)
+
+# Build the stylesheet using lessc
+# On Fedora you can install lessc using the following commands (as root):
+#     yum install nodejs npm
+#     npm install -g less
+style/style.css: style/*.less
+	lessc style/style.less style/style.css #--clean-css="--s1"
+
+# Compile all osml files to xml
+%.xml: %.osml
+	ousia -F xml -o $@ $<
+
+# Compile the xml files to html
+%.html: %.xml xsl/*.xsl
+	xsltproc xsl/webpage.xsl $< > $@
+
+# Clean script
+.PHONY: clean webclean
+clean:
+	rm -f style/*.css
+	rm -f $(TARGET_HTML)
+	rm -f $(TARGET_XML)
+
+webclean:
+	rm -f style/*.less
+	rm -f $(TARGET_XML)
+	rm -f $(SOURCE_OSML)
+	rm -rf ontology
diff --git a/index.html b/index.html
deleted file mode 100644
index 6385850..0000000
--- a/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8"/>
-		<title>Ousía Framework</title>
-	</head>
-	<body>
-	</body>
-</html>
-
diff --git a/index.osml b/index.osml
new file mode 100644
index 0000000..2fe66c4
--- /dev/null
+++ b/index.osml
@@ -0,0 +1,42 @@
+%{
+	Ousía Homepage
+
+	(c) Andreas Stöckel, Benjamin Paaßen 2015
+
+	This work is licensed under a Creative Commons Attribution-ShareAlike 4.0
+	International License. <http://creativecommons.org/licenses/by-sa/4.0/>
+}%
+
+\import[ontology]{ontology/webpage}
+
+\begin{webpage}{Ousía Framework - About}
+
+\begin{masthead}
+	\title{Ousía}
+	\subtitle{Extensible Semantic Markup Framework}
+
+	\begin{pitch}
+		\paragraph
+		\ipa{ˈuːziə}{Ousía} represents documents in purely semantic markup with
+		user definable structure.
+
+		\paragraph
+		Documents are parsed into an universal intermediate representation,
+		ready to be converted any format using XSLT
+		\footnote{Sticking to XML and XSLT is not our plan. We intend to provide
+				  a scriptable output pipeline. But we're not quiet there yet.}.
+	\end{pitch}
+
+	\begin{nav}
+		\button#btn_download{Get the source}
+		\button#btn_faq{FAQ}
+		\button#btn_docu{Tutorial}
+	\end{nav}
+\end{masthead}
+
+\begin{section}
+	\title{Overview}
+\end{section}
+
+\end{webpage}
+
diff --git a/ontology/webpage.osml b/ontology/webpage.osml
new file mode 100644
index 0000000..d92d652
--- /dev/null
+++ b/ontology/webpage.osml
@@ -0,0 +1,71 @@
+%{
+	Ousía Homepage
+
+	(c) Andreas Stöckel, Benjamin Paaßen 2015
+
+	This work is licensed under a Creative Commons Attribution-ShareAlike 4.0
+	International License. <http://creativecommons.org/licenses/by-sa/4.0/>
+}%
+
+\begin{ontology#webpage}
+
+% Main structure
+\struct#webpage[root=true]
+	\field#title[subtree=true,optional=true]
+		\childRef[ref=primitive]
+	\field
+		\childRef[ref=section]
+
+% Primitve text
+\struct#primitive
+\struct#text[isa=primitive,transparent=true]
+	\primitive[type=string]
+
+% Section
+\struct#section
+	\field#title[subtree=true,optional=false]
+		\childRef[ref=primitive]
+	\field#subtitle[subtree=true,optional=true]
+		\childRef[ref=primitive]
+	\field
+		\childRef[ref=paragraph]
+		\childRef[ref=subsection]
+
+% Paragraph
+\struct#paragraph[transparent=true]
+	\field
+		\childRef[ref=primitive]
+
+% Subsection
+\struct#subsection
+	\field
+		\childRef[ref=paragraph]
+
+% Masthead, Pitch
+\struct#masthead[isa=section]
+\struct#pitch[isa=subsection]
+
+% IPA
+\struct#ipa[isa=primitive]
+	\field#pronunciation[subtree=true,optional=false]
+		\childRef[ref=text]
+	\field
+		\childRef[ref=primitive]
+
+% Footnote
+\struct#footnote[isa=primitive]
+	\field
+		\childRef[ref=primitive]
+
+% Nav and buttons
+\struct#nav[isa=subsection]
+	\field
+		\childRef[ref=button]
+\struct#button
+	\attributes
+		\attribute#href[type=string,default=#]
+	\field
+		\childRef[ref=primitive]
+
+\end{ontology}
+
diff --git a/script/ousia.js b/script/ousia.js
new file mode 100644
index 0000000..0ef203a
--- /dev/null
+++ b/script/ousia.js
@@ -0,0 +1,22 @@
+// @license magnet:?xt=urn:btih:5305d91886084f776adcf57509a648432709a7c7&dn=x11.txt
+/*
+ * Ousía Website JS
+ *
+ * (c) Andreas Stöckel, 2015
+ *
+ * This work is licensed under the X11 (MIT) license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+(function () {
+	"use strict";
+	var header = document.querySelector("header");
+	window.addEventListener("scroll", function () {
+		if (window.pageYOffset > 40) {
+			header.className = "scrolled";
+		} else {
+			header.className = "";
+		}
+	});
+})();
+// @license-end
+
diff --git a/style/constants.less b/style/constants.less
new file mode 100644
index 0000000..d777aed
--- /dev/null
+++ b/style/constants.less
@@ -0,0 +1,15 @@
+/*
+ * Ousía Website CSS
+ *
+ * (c) Andreas Stöckel, 2015
+ *
+ * This work is licensed under a Creative Commons Attribution-ShareAlike 4.0
+ * International License. <http://creativecommons.org/licenses/by-sa/4.0/>
+ */
+
+@color-bg: #fcfcfc;
+@color-text: #333;
+@color-main: #dc143c; /* "crimson" */
+@color-footer: #333;
+@color-light: #999;
+
diff --git a/style/footer.less b/style/footer.less
new file mode 100644
index 0000000..1a86b18
--- /dev/null
+++ b/style/footer.less
@@ -0,0 +1,41 @@
+/*
+ * Ousía Website CSS
+ *
+ * (c) Andreas Stöckel, 2015
+ *
+ * This work is licensed under a Creative Commons Attribution-ShareAlike 4.0
+ * International License. <http://creativecommons.org/licenses/by-sa/4.0/>
+ */
+
+footer {
+	overflow: hidden;
+	font-size: 10pt;
+	color: white;
+	padding: 0;
+	background-color: @color-footer;
+	padding: 1em 0;
+	line-height: 1.75;
+
+	a, a:link {
+		color: white;
+	}
+
+	a:visited {
+		color: #CCC;
+	}
+
+	nav ul h3 {
+		color: @color-main;
+		text-transform: uppercase;
+		font-weight: bold;
+	}
+}
+
+@media (min-width: 50rem) {
+	footer nav ul > li {
+		vertical-align: top;
+		display: inline-block;
+		width: 8rem;
+		margin: 0;
+	}
+}
diff --git a/style/reset.less b/style/reset.less
new file mode 100644
index 0000000..9ed8bb9
--- /dev/null
+++ b/style/reset.less
@@ -0,0 +1,55 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+
+body {
+	line-height: 1;
+}
+
+ol, ul {
+	list-style: none;
+}
+
+blockquote, q {
+	quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
diff --git a/style/style.less b/style/style.less
new file mode 100644
index 0000000..5b5d2de
--- /dev/null
+++ b/style/style.less
@@ -0,0 +1,185 @@
+/*!
+ * Ousía Website CSS
+ *
+ * (c) Andreas Stöckel, 2015
+ *
+ * This work is licensed under a Creative Commons Attribution-ShareAlike 4.0
+ * International License. <http://creativecommons.org/licenses/by-sa/4.0/>
+ */
+
+@import "constants.less";
+@import "reset.less";
+@import "typography.less";
+@import "footer.less";
+
+span.ipa {
+	color: gray;
+}
+
+ol.footnotes {
+	color: @color-light;
+	font-size: 10pt;
+}
+
+
+/**
+ * Source code
+ */
+pre {
+	text-align: left;
+	padding: 1em;
+}
+
+pre, code {
+	font-family: "Source Code Pro";
+	background-color: #f3f3f3;
+	font-size: 11pt;
+}
+
+pre em {
+	font-style: normal;
+	font-weight: bold;
+	color: #204a87;
+}
+
+pre var {
+	color: #4e9a06;
+}
+
+pre mark {
+	background-color: #ad7fa8;
+	color: white;
+	text-shadow: none;
+}
+
+/**
+ * Header navigation
+ */
+header nav ul, header nav ul li {
+	display: inline-block;
+}
+
+header nav a {
+	padding: 0.5em 1em;
+}
+
+header nav a:hover {
+	color: white;
+	background-color: crimson;
+	text-decoration: none;
+}
+
+header h1 {
+	font-weight: normal;
+	font-size: 12pt;
+	text-transform: uppercase;
+	color: gray;
+	margin: 0;
+}
+
+/**
+ * Main text
+ */
+
+main section#masthead ul#downloads li a {
+}
+
+main section {
+	text-align: justify;
+	-moz-hyphens: auto;
+	hyphens: auto;
+}
+
+.footnoteRef {
+	position: relative;
+	font-size: 85%;
+	top: -0.25em;
+	color: crimson;
+}
+
+.footnote {
+	font-size: 85%;
+	color: gray;
+}
+
+ol.footnotes {
+	clear: both;
+}
+
+/**
+ * Masthead
+ */
+section.masthead {
+
+	h1 {
+		font-size: 30pt;
+	}
+
+	h2 {
+		font-size: 20pt;
+	}
+
+	.pitch {
+		font-size: 14pt;
+		-moz-hyphens: none;
+		hyphens: none;
+		text-align: left;
+	}
+}
+
+.nav a.button:first-child {
+	background-color: @color-main;
+	font-weight: bold;
+	color: white;
+	width: 14em;
+}
+
+main a.button {
+	text-align: center;
+	display: inline-block;
+	width: 4em;
+	padding: 0.5em 2em;
+	margin: 1em;
+	border-radius: 2px;
+	border: 1px solid @color-main;
+}
+
+main a.button:hover {
+	background-color: @color-main;
+	color: white;
+}
+
+
+/*
+ * For screen
+ */
+
+@media (min-width: 50rem) {
+
+/**
+ * Responsive columns
+ */
+main {
+	section {
+		clear: both;
+	}
+
+	.subsection {
+		display: block;
+		float: left;
+		width: 48.75%;
+		margin: 0.5em 0 0.5em 2.5%;
+	}
+
+	.first {
+		margin-left: 0;
+	}
+
+	.masthead .subsection.nav {
+		text-align: center;
+	}
+}
+
+}
+
+
diff --git a/style/typography.less b/style/typography.less
new file mode 100644
index 0000000..336cd9b
--- /dev/null
+++ b/style/typography.less
@@ -0,0 +1,78 @@
+
+@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700);
+html {
+	font-family: 'Noto Sans', 'DejaVu Sans', sans-serif;
+	font-size: 12pt;
+	color: @color-text;
+	background-color: @color-footer;
+}
+
+p {
+	line-height: 1.75;
+	margin-bottom: 0.5rem;
+}
+
+h1, h2, h3 {
+	font-weight: normal;
+	margin-bottom: 1em;
+}
+
+h1 {
+	color: @color-main;
+}
+
+a, a:link, a:visited, a:hover, a:active {
+	color: crimson;
+	text-decoration: none;
+	transition: all 0.25s ease-in;
+}
+
+a:hover {
+	color: #900000;
+	text-decoration: underline;
+}
+
+main a:visited, footer a:visited {
+	color: #a40000;
+}
+
+section {
+	max-width: 975px;
+	max-width: 60rem;
+	margin: 0 auto;
+	padding: 1rem 3rem;
+	vertical-align: top;
+}
+
+header, main {
+	background-color: @color-bg;
+}
+
+/**
+ * Footnotes
+ */
+
+sup {
+	position: relative;
+	font-size: 80%;
+	top: -0.5em;
+}
+
+/**
+ * Main text
+ */
+
+main {
+
+	h1, h2, h3, h4, h5, h6 {
+		margin-top: 0.25em;
+		margin-bottom: 0.25em;
+	}
+
+	h1 {
+		font-size: 200%;
+	}
+
+}
+
+
diff --git a/xsl/webpage.xsl b/xsl/webpage.xsl
new file mode 100644
index 0000000..c6310e2
--- /dev/null
+++ b/xsl/webpage.xsl
@@ -0,0 +1,173 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<xsl:stylesheet
+		version="1.0"
+		xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+		xmlns:webpage="webpage"
+		exclude-result-prefixes="webpage">
+	<xsl:output method="html" encoding="utf-8" indent="yes" />
+	<xsl:strip-space elements="*"/>
+	<xsl:preserve-space elements="webpage:text"/>
+
+	<xsl:template match="/">
+		<xsl:apply-templates select="/document/webpage:webpage"/>
+	</xsl:template>
+
+	<xsl:template match="/document/webpage:webpage">
+			<xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;</xsl:text>
+			<html>
+				<head>
+					<meta charset="utf-8"/>
+					<link rel="stylesheet" type="text/css" href="style/style.css"/>
+					<title><xsl:apply-templates select="title/webpage:text"/></title>
+				</head>
+				<body lang="en">
+					<header>
+						<section>
+							<h1>Ousía Framework</h1>
+							<nav>
+								<ul>
+									<li><a href="#">About</a></li>
+									<li><a href="#">Documentation</a></li>
+									<li><a href="#">Download</a></li>
+								</ul>
+							</nav>
+						</section>
+					</header>
+					<main>
+						<xsl:apply-templates select="webpage:*"/>
+					</main>
+					<footer>
+						<section>
+						<nav>
+							<ul>
+								<li><h3>Learn</h3>
+									<ul>
+										<li><a href="index.html">About</a></li>
+										<!--<li><a href="#">Tutorial</a></li>
+										<li><a href="#">FAQ</a></li>
+										<li><a href="#">Examples</a></li>-->
+									</ul>
+								</li>
+								<li><h3>Get Ousía</h3>
+									<ul>
+										<li><a href="download.html">Download</a></li>
+										<!--<li><a href="#">Repository</a></li>-->
+									</ul>
+								</li>
+								<!--<li><h3>Develop</h3>
+									<ul>
+										<li><a href="#">Documentation</a></li>
+										<li><a href="#">Browse source</a></li>
+										<li><a href="#">Bug tracker</a></li>
+									</ul>
+								</li>-->
+								<li><h3>Legal</h3>
+									<ul>
+										<li><a href="impressum.html">Impressum</a></li>
+										<li><a href="license.html">License</a></li>
+									</ul>
+								</li>
+							</ul>
+						</nav>
+						</section>
+						<section id="copyright">
+						<p>Ousía – Extensible Semantic Markup Framework (c) 2015 Andreas Stöckel, Benjamin Paaßen</p>
+						<p>Unless noted otherwise the content of this website (including, but not limited to text, images, markup and stylesheets) is licensed under the <a href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>. The uncompiled source code of the website is available at TODO.
+						</p>
+						<p>
+						This website was made using <a href="http://git-scm.com/">git</a>, <a href="http://lesscss.org/">Less</a>, <a href="http://ousia-framework.org/">Ousía</a> and <a href="http://xmlsoft.org/libxslt/">xsltproc</a>.
+						</p>
+						</section>
+					</footer>
+					<script type="text/javascript" src="script/ousia.js"/>
+				</body>
+			</html>
+	</xsl:template>
+
+	<!-- Transform masthead and section into a section -->
+	<xsl:template match="webpage:masthead|webpage:section">
+		<section>
+			<xsl:if test="self::webpage:masthead">
+				<xsl:attribute name="class">masthead</xsl:attribute>
+			</xsl:if>
+			<xsl:apply-templates select="title"/>
+			<xsl:apply-templates select="subtitle"/>
+			<xsl:apply-templates select="webpage:*"/>
+
+			<!-- Gather all footnotes -->
+			<xsl:if test="descendant::webpage:footnote">
+				<ol class="footnotes">
+					<xsl:apply-templates select="descendant::webpage:footnote" mode="footnote"/>
+				</ol>
+			</xsl:if>
+		</section>
+	</xsl:template>
+
+	<!-- Subsections -->
+	<xsl:template match="webpage:pitch|webpage:nav|webpage:subsection">
+		<div>
+			<xsl:variable name="seqNo"><xsl:number level="any" count="webpage:pitch|webpage:nav|webpage:subsection" format="1"/></xsl:variable>
+			<xsl:variable name="class">subsection<xsl:if test="self::webpage:pitch"> pitch</xsl:if><xsl:if test="self::webpage:nav"> nav</xsl:if> <xsl:if test="$seqNo = 1"> first</xsl:if></xsl:variable>
+			<xsl:attribute name="class">
+				<xsl:value-of select="$class"/>
+			</xsl:attribute>
+			<xsl:apply-templates select="webpage:*"/>
+		</div>
+	</xsl:template>
+
+	<!-- Titles and subtitles -->
+	<xsl:template match="title">
+		<xsl:if test="webpage:text">
+			<h1><xsl:apply-templates select="webpage:text"/></h1>
+		</xsl:if>
+	</xsl:template>
+	<xsl:template match="subtitle">
+		<xsl:if test="webpage:text">
+			<h2><xsl:apply-templates select="webpage:text"/></h2>
+		</xsl:if>
+	</xsl:template>
+
+	<!-- Paragraphs -->
+	<xsl:template match="webpage:paragraph">
+		<p>
+			<xsl:apply-templates select="child::*"/>
+		</p>
+	</xsl:template>
+
+	<!-- Buttons -->
+	<xsl:template match="webpage:button">
+		<a class="button">
+			<xsl:copy-of select="@*" />
+			<xsl:apply-templates select="webpage:text"/>
+		</a>
+	</xsl:template>
+
+	<!-- IPA -->
+	<xsl:template match="webpage:ipa">
+		<xsl:value-of select="webpage:text"/>
+		<span class="ipa"> [<xsl:value-of select="pronunciation"/>] </span>
+	</xsl:template>
+
+	<!-- Footnotes -->
+	<!-- Adapted from: http://www.microhowto.info/howto/create_a_list_of_numbered_footnotes_using_xslt.html -->
+	<xsl:template match="webpage:footnote">
+		<a>
+			<xsl:attribute name="name">footnoteref<xsl:number level="any" count="webpage:footnote" format="1"/></xsl:attribute>
+			<xsl:attribute name="href">#footnote<xsl:number level="any" count="webpage:footnote" format="1"/></xsl:attribute>
+			<sup><xsl:number level="any" count="webpage:footnote" format="[1]"/></sup>
+		</a>
+	</xsl:template>
+	<xsl:template match="webpage:footnote" mode="footnote">
+		<li>
+			<a>
+				<xsl:attribute name="name">footnote<xsl:number level="any" count="webpage:footnote" format="1"/></xsl:attribute>
+				<xsl:attribute name="href">#footnoteref<xsl:number level="any" count="webpage:footnote" format="1"/></xsl:attribute>
+				<xsl:number level="any" count="webpage:footnote" format="[1]"/>
+			</a>
+			<xsl:text> </xsl:text>
+			<xsl:apply-templates select="webpage:*"/>
+		</li>
+	</xsl:template>
+</xsl:stylesheet>
+
author	Andreas Stöckel <astoecke@techfak.uni-bielefeld.de>	2015-03-06 23:54:49 +0100
committer	Andreas Stöckel <astoecke@techfak.uni-bielefeld.de>	2015-03-06 23:54:49 +0100
commit	ca1a6aa7df6703c10d1cd97afedd9c6838ba425b (patch)
tree	ca8a7fbd6fd4d43268a095ead32f7b4fecd38b72
parent	e2f172624be2c0cc96461bdd9418e23e798a93b2 (diff)