atmoz/content.html

## content.html
<h1>My first post</h1>

<p>So this is how it looks</p>

<p>My second paragraph</p>

## make.sh
content=$(<content.html)
template=$(<template.html)

# Rewrite the template so that we can source it proper.
eof_key=$'\x02'
template="cat <<EOF$eof_key
$template
EOF$eof_key"

source /dev/stdin <<< "$template"

## template.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>%TITLE%</title>
    </head>
    <body>
        <header>
            <h1>blog.atmoz.net</h1>

            <nav>
                <ul id="menu">
                    <li><a href="2013-03-09-my-first-post.md">My first post</a></li>
                </ul>
            </nav>
            <div id="toggleNav"></div>
        </header>

        <article id="content" style="display: none;">

            %CONTENT%

        </article>

        <footer>
        </footer>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="src/marked/lib/marked.js"></script>
        <script src="src/static-web/static-web.js"></script>
        <script>
            $(document).ready(function() {
                staticWeb({
                    linkSelector: 'a[href$=".md"]',
                    contentHandler: function(data, url) {
                        // Convert markdown to HTML
                        return marked(data);
                    },
                    beforePageLoad: function($content, url) {
                        $content.fadeOut(200);
                    },
                    afterPageLoad: function($content, url) {
                        $content.fadeIn(200);
                    }
                });
            });
        </script>
    </body>
</html>
	<h1>My first post</h1>

	<p>So this is how it looks</p>

	<p>My second paragraph</p>
	content=$(<content.html)
	template=$(<template.html)

	# Rewrite the template so that we can source it proper.
	eof_key=$'\x02'
	template="cat <<EOF$eof_key
	$template
	EOF$eof_key"

	source /dev/stdin <<< "$template"
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>%TITLE%</title>
	</head>
	<body>
	<header>
	<h1>blog.atmoz.net</h1>

	<nav>
	<ul id="menu">
	<li><a href="2013-03-09-my-first-post.md">My first post</a></li>
	</ul>
	</nav>
	<div id="toggleNav"></div>
	</header>

	<article id="content" style="display: none;">

	%CONTENT%

	</article>

	<footer>
	</footer>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="src/marked/lib/marked.js"></script>
	<script src="src/static-web/static-web.js"></script>
	<script>
	$(document).ready(function() {
	staticWeb({
	linkSelector: 'a[href$=".md"]',
	contentHandler: function(data, url) {
	// Convert markdown to HTML
	return marked(data);
	},
	beforePageLoad: function($content, url) {
	$content.fadeOut(200);
	},
	afterPageLoad: function($content, url) {
	$content.fadeIn(200);
	}
	});
	});
	</script>
	</body>
	</html>