CS2613/journal/_src/page-template.html
2022-09-07 09:14:07 -03:00

130 lines
5.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
@;{ The at-exp reader for a template treats this as a comment.
Also, notice the use template variables like @title,
@description etc. }
<meta charset="utf-8">
<title>@|title|</title>
<meta name="description" content="@|description|">
<meta name="author" content="@|author|">
<meta name="keywords" content="@|keywords|">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="@|uri-prefix|/favicon.ico">
<link rel="canonical" href="@|full-uri|">
@(when rel-next @list{<link rel="next" href="@|rel-next|">})
@(when rel-prev @list{<link rel="prev" href="@|rel-prev|">})
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="@|uri-prefix|/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="@|uri-prefix|/css/pygments.css">
<link rel="stylesheet" type="text/css" href="@|uri-prefix|/css/scribble.css">
<link rel="stylesheet" type="text/css" href="@|uri-prefix|/css/custom.css">
<!-- Feeds -->
<link rel="alternate" type="application/atom+xml"
href="@|atom-feed-uri|" title="Atom Feed">
<link rel="alternate" type="application/rss+xml"
href="@|rss-feed-uri|" title="RSS Feed">
<!-- JS -->
@google-universal-analytics["UA-xxxxx"]
</head>
<body>
<!-- A standard Twitter Bootstrap nav bar -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a href="@|uri-prefix|/index.html" class="navbar-brand">My Blog Brand</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbar_collapse" aria-controls="navbar_collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar_collapse">
<ul class="navbar-nav mr-auto">
@;{ We can define Racket functions to "DRY". Here's one to
emit HMTL for a nav item, adding class="active" iff
this page's @|uri-path| is the same as the nav link. }
@(define (ni uri label [a-attribs ""])
@list{
<li@(when (string-ci=? uri uri-path) " class=\"active\"")>
<a class="nav-link" href="@|uri|"@|a-attribs|>@|label|</a>
</li> })
@;{ Here we craft the dropdown links from a list of pairs.
The pairs are in the format '((name . url) ...) }
@(define (craft-tag-links listof-pairs)
@(map (lambda (pair)
@list{<a class="dropdown-item" href="@(cdr pair)">@(car pair)</a>})
listof-pairs))
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
Tags <b class="caret"></b>
</a>
<div class="dropdown-menu">
@craft-tag-links[(all-tag-pairs)]
</div>
</li>
@ni[(string-append uri-prefix "/About.html") "About"]
<li class="nav-item">
<a class="nav-link" href="@|atom-feed-uri|">Atom</a>
</li>
<li class="nav-item">
<a class="nav-link" href="@|rss-feed-uri|">RSS</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
@;{ Remember that Twitter Bootstrap has a 12 cell model. The
col-md-N classes should add up to 12. For instance 3
"col-md-4" divs, or 2 "col-md-6" divs. }
<!-- Main column -->
<div id="content" class="col-md-12">
@;{ To put something only on the home page, check for
@uri-path being "/index.html" }
@(when (string-ci=? uri-path
(string-append uri-prefix
"/index.html"))
@list{
<h1>Welcome</h1>
<p>Here is some text that only goes on the home page,
because <code>@"@"uri-path</code> is
<code>/index.html</code>.</p> })
@;{ Index pages for posts have @tag that's not #f }
@(when tag
@list{<h1>Posts tagged <em>@|tag|</em></h1>})
@;{ The main page contents are in @contents }
@|contents|
</div>
</div>
<footer>
<hr />
<p>@twitter-follow-button["racketlang" "Follow RacketLang"]</p>
<p>Site generated
by <a href="https://github.com/greghendershott/frog">Frog</a>,
the <strong>fr</strong>ozen bl<strong>og</strong> tool.</p>
<p>Using <a href="http://twitter.github.com/bootstrap/index.html">Bootstrap</a>.</p>
<p><em>Your legal notice here</em>.</p>
</footer>
</div>
<!-- </body> JS -->
<script type="text/javascript" src="@|uri-prefix|/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="@|uri-prefix|/js/bootstrap.bundle.min.js"></script>
</body>
</html>