123 lines
4.6 KiB
HTML
123 lines
4.6 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">Isaac's CS2163 Blog</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 style="display: none">Welcome</h1>
|
|
})
|
|
@;{ 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><em>Isaac Shoebottom 2022 ©</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>
|