Repos / s4g / 83e0a58ddd
commit 83e0a58ddd96f67166014ed3149f6c60c57dac10
Author: Nhân <hi@imnhan.com>
Date: Tue Jul 11 15:24:48 2023 +0700
refactor includes; custom template example
diff --git a/main.go b/main.go
index cb5f423..a3bdc5b 100644
--- a/main.go
+++ b/main.go
@@ -239,6 +239,7 @@ func WriteHomePage(
template.ParseFS(
fsys,
"_theme/base.tmpl",
+ "_theme/includes.tmpl",
"_theme/home.tmpl",
),
)
@@ -286,7 +287,11 @@ func findArticles(fsys writablefs.FS) (result []Article) {
}
meta := ArticleMetadata{
- Templates: []string{"$_theme/base.tmpl", "$_theme/post.tmpl"},
+ Templates: []string{
+ "$_theme/base.tmpl",
+ "$_theme/includes.tmpl",
+ "$_theme/post.tmpl",
+ },
ShowInFeed: true,
ShowInNav: false,
}
diff --git a/theme/base.css b/theme/base.css
index f1b6d99..05ffb70 100644
--- a/theme/base.css
+++ b/theme/base.css
@@ -7,7 +7,7 @@ html {
p,
ul,
ol {
- line-height: 1.3rem;
+ line-height: 1.35rem;
}
footer {
diff --git a/theme/base.tmpl b/theme/base.tmpl
index a1f0d72..6edbe18 100644
--- a/theme/base.tmpl
+++ b/theme/base.tmpl
@@ -13,13 +13,6 @@
<body>
{{template "body" .}}
-{{- if .Site.ShowFooter}}
-<footer>
-© {{if eq .StartYear .Now.Year}}{{.StartYear}}{{else}}{{.StartYear}}–{{.Now.Year}}{{end}} {{.Site.AuthorName}}<br>
-Made with <a href="https://github.com/nhanb/webmaker2000">WebMaker2000</a>
-</footer>
-{{- end}}
-
</body>
</html>
diff --git a/theme/home.tmpl b/theme/home.tmpl
index 295c1c7..a928083 100644
--- a/theme/home.tmpl
+++ b/theme/home.tmpl
@@ -61,4 +61,6 @@ ul {
/*font-size: 1.1rem;*/
}
</style>
+
+{{template "footer" .}}
{{end}}
diff --git a/theme/includes.tmpl b/theme/includes.tmpl
new file mode 100644
index 0000000..a43ffda
--- /dev/null
+++ b/theme/includes.tmpl
@@ -0,0 +1,30 @@
+{{define "navbar"}}
+<link rel="stylesheet" href="{{.Site.HomePath}}_theme/navbar.css">
+<nav>
+ <a href="{{.Site.HomePath}}">Home</a>
+ {{- range .ArticlesInNav}}
+ <a href="{{$.Site.HomePath}}{{.WebPath}}">{{.Title}}</a>
+ {{- end}}
+
+ {{- if not .Post.PostedAt.IsZero}}
+ <span class="posted-on">
+ Posted on
+ <time datetime="{{.Post.PostedAt.Local.Format "2006-01-02"}}">
+ {{.Post.PostedAt.Local.Format "Monday, 02 Jan 2006"}}
+ </time>
+ </span>
+ {{- end}}
+
+</nav>
+<hr class="nav-hr">
+{{end}}
+
+
+{{define "footer"}}
+{{- if .Site.ShowFooter -}}
+<footer>
+© {{if eq .StartYear .Now.Year}}{{.StartYear}}{{else}}{{.StartYear}}–{{.Now.Year}}{{end}} {{.Site.AuthorName}}<br>
+Made with <a href="https://github.com/nhanb/webmaker2000">WebMaker2000</a>
+</footer>
+{{- end -}}
+{{- end}}
diff --git a/theme/post.css b/theme/navbar.css
similarity index 62%
rename from theme/post.css
rename to theme/navbar.css
index e1b7a1c..3a7107b 100644
--- a/theme/post.css
+++ b/theme/navbar.css
@@ -2,7 +2,11 @@ nav > a {
margin-right: 0.5rem;
}
-.posted-on {
+nav > .posted-on {
float: right;
font-style: italic;
}
+
+.nav-hr {
+ clear: both;
+}
diff --git a/theme/post.tmpl b/theme/post.tmpl
index 88f0eff..6878886 100644
--- a/theme/post.tmpl
+++ b/theme/post.tmpl
@@ -1,30 +1,13 @@
-{{- define "head"}}
- <link rel="stylesheet" href="{{.Site.HomePath}}_theme/post.css">
-{{- end}}
+{{- define "head"}}{{- end}}
{{define "body"}}
-<nav>
- <a href="{{.Site.HomePath}}">Home</a>
- {{- range .ArticlesInNav}}
- <a href="{{$.Site.HomePath}}{{.WebPath}}">{{.Title}}</a>
- {{- end}}
-
- {{- if not .Post.PostedAt.IsZero}}
- <span class="posted-on">
- Posted on
- <time datetime="{{.Post.PostedAt.Local.Format "2006-01-02"}}">
- {{.Post.PostedAt.Local.Format "Monday, 02 Jan 2006"}}
- </time>
- </span>
- {{- end}}
-
-</nav>
-<hr>
+{{- template "navbar" .}}
-<h1 class="post-title">{{.Post.Title}}</h1>
-<content>
+<main>
+<h1>{{.Post.Title}}</h1>
{{.Content}}
-</content>
+</main>
+{{template "footer" .}}
{{- end}}
diff --git a/www/about/index.html b/www/about/index.html
index 823e3b3..0ba1993 100644
--- a/www/about/index.html
+++ b/www/about/index.html
@@ -7,21 +7,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
<link rel="stylesheet" href="/_theme/base.css">
- <link rel="stylesheet" href="/_theme/post.css">
</head>
<body>
+<link rel="stylesheet" href="/_theme/navbar.css">
<nav>
<a href="/">Home</a>
<a href="/about/">About</a>
</nav>
+<hr class="nav-hr">
-<hr>
-<h1 class="post-title">About</h1>
-<content>
+<main>
+<h1>About</h1>
<section id="About-this-site">
<h2>About this site</h2>
<p>It’s a website.</p>
@@ -32,7 +32,8 @@ <h2>No really</h2>
<a href="https://motherfuckingwebsite.com/">mf-ing website</a>.</p>
</section>
-</content>
+</main>
+
<footer>
© 2008–2023 Coolio McCool<br>
Made with <a href="https://github.com/nhanb/webmaker2000">WebMaker2000</a>
diff --git a/www/index.html b/www/index.html
index 727f37c..5d0ee5d 100644
--- a/www/index.html
+++ b/www/index.html
@@ -75,6 +75,7 @@ <h1 class="site-title">CoolZone</h1>
Made with <a href="https://github.com/nhanb/webmaker2000">WebMaker2000</a>
</footer>
+
</body>
</html>
diff --git a/www/mfws.html b/www/mfws.html
index 26d4a8d..cc7abef 100644
--- a/www/mfws.html
+++ b/www/mfws.html
@@ -7,11 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
<link rel="stylesheet" href="/_theme/base.css">
- <link rel="stylesheet" href="/_theme/post.css">
</head>
<body>
+<link rel="stylesheet" href="/_theme/navbar.css">
<nav>
<a href="/">Home</a>
<a href="/about/">About</a>
@@ -23,11 +23,11 @@
</span>
</nav>
+<hr class="nav-hr">
-<hr>
-<h1 class="post-title">This is a motherfucking website.</h1>
-<content>
+<main>
+<h1>This is a motherfucking website.</h1>
<p>And it’s fucking perfect.</p>
<section id="Seriously-what-the-fuck-else-do-you-want">
<h2>Seriously, what the fuck else do you want?</h2>
@@ -119,7 +119,8 @@ <h2>Epilogue</h2>
<p>Lifted from <a href="https://motherfuckingwebsite.com">https://motherfuckingwebsite.com</a>.</p>
</section>
-</content>
+</main>
+
<footer>
© 2008–2023 Coolio McCool<br>
Made with <a href="https://github.com/nhanb/webmaker2000">WebMaker2000</a>
diff --git a/www/scale/index.dj b/www/scale/index.dj
index 2b74faa..4adeb61 100644
--- a/www/scale/index.dj
+++ b/www/scale/index.dj
@@ -1,5 +1,6 @@
Title: I'm Going To Scale My Foot Up Your Ass
PostedAt: 2008-04-24
+Templates: $_theme/base.tmpl, $_theme/includes.tmpl, scale.tmpl
---
@@ -71,11 +72,6 @@ Shut up about scalability, no one is using your app anyway.
``` =html
<style>
-h2 { font-size: 1em; }
-body {
- background: linear-gradient(white, lightgrey);
- font-family: sans-serif;
-}
img[alt="scaleboner"] { float: right; }
</style>
```
diff --git a/www/scale/index.html b/www/scale/index.html
index b9ee5b8..5c8bc7c 100644
--- a/www/scale/index.html
+++ b/www/scale/index.html
@@ -7,11 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="alternate" type="application/atom+xml" title="Atom feed" href="/feed.xml">
<link rel="stylesheet" href="/_theme/base.css">
- <link rel="stylesheet" href="/_theme/post.css">
</head>
<body>
-
+<div class="navbar-container">
+<link rel="stylesheet" href="/_theme/navbar.css">
<nav>
<a href="/">Home</a>
<a href="/about/">About</a>
@@ -23,12 +23,13 @@
</span>
</nav>
+<hr class="nav-hr">
+</div>
-<hr>
-
-<h1 class="post-title">I'm Going To Scale My Foot Up Your Ass</h1>
-<content>
-<p><img alt="scaleboner" src="bill.jpg"></p>
+<div class="main-container">
+ <main>
+ <h1>I'm Going To Scale My Foot Up Your Ass</h1>
+ <p><img alt="scaleboner" src="bill.jpg"></p>
<p><em>by <a href="http://widgetsandshit.com/teddziuba/2008/04/im-going-to-scale-my-foot-up-y.html">Ted Dziuba</a></em></p>
<p>Engineers love to talk about scalability. It makes us feel like the bad ass,
dick-swingin’ motherfuckers that we wish we could be.</p>
@@ -85,20 +86,77 @@ <h2>Choosing Technology Don’t Mean Shit If You Don’t Know How To Use It</h2>
<h2>tl;dr</h2>
<p>Shut up about scalability, no one is using your app anyway.</p>
<style>
-h2 { font-size: 1em; }
-body {
-background: linear-gradient(white, lightgrey);
-font-family: sans-serif;
-}
img[alt="scaleboner"] { float: right; }
</style>
</section>
-</content>
+ </main>
+</div>
+
+<div class="footer-container">
<footer>
© 2008–2023 Coolio McCool<br>
Made with <a href="https://github.com/nhanb/webmaker2000">WebMaker2000</a>
</footer>
+</div>
+
+<style>
+html, body {
+ margin: 0;
+ padding: 0;
+}
+html {
+ max-width: none;
+ font-family: sans-serif;
+}
+nav, main, footer {
+ margin: 0 auto;
+ max-width: 50rem;
+}
+
+.main-container, .navbar-container, .footer-container {
+ margin: 0;
+ padding: 0.5rem 1rem;
+}
+.main-container {
+ padding-top: 0;
+}
+
+.nav-hr {
+ border: none;
+ height:0;
+ margin: 0;
+ padding: 0;
+}
+
+.navbar-container, .footer-container {
+ background: linear-gradient(#ba4d44, #a92015);
+ text-shadow: 1px 1px #252626;
+ color: white;
+}
+nav a, footer a {
+ color: inherit;
+}
+
+.main-container {
+ background: linear-gradient(lightgrey, white);
+ padding-top: 0.1rem;
+}
+
+main {
+ background: linear-gradient(white, #dcdcdc, #dcdcdc);
+ border: 1px solid gray;
+ padding: 0 1rem;
+ background-color: white;
+ margin: 0.5rem auto;
+ box-shadow: 1px 1px 3px #6F6F6F;
+}
+
+
+h2 {
+ font-size: 1em;
+}
+</style>
</body>
diff --git a/www/scale/scale.tmpl b/www/scale/scale.tmpl
new file mode 100644
index 0000000..59ee909
--- /dev/null
+++ b/www/scale/scale.tmpl
@@ -0,0 +1,77 @@
+{{- define "head"}}{{end}}
+
+{{- define "body" -}}
+
+<div class="navbar-container">
+{{- template "navbar" . -}}
+</div>
+
+<div class="main-container">
+ <main>
+ <h1>{{.Post.Title}}</h1>
+ {{.Content}}
+ </main>
+</div>
+
+<div class="footer-container">
+{{template "footer" .}}
+</div>
+
+<style>
+html, body {
+ margin: 0;
+ padding: 0;
+}
+html {
+ max-width: none;
+ font-family: sans-serif;
+}
+nav, main, footer {
+ margin: 0 auto;
+ max-width: 50rem;
+}
+
+.main-container, .navbar-container, .footer-container {
+ margin: 0;
+ padding: 0.5rem 1rem;
+}
+.main-container {
+ padding-top: 0;
+}
+
+.nav-hr {
+ border: none;
+ height:0;
+ margin: 0;
+ padding: 0;
+}
+
+.navbar-container, .footer-container {
+ background: linear-gradient(#ba4d44, #a92015);
+ text-shadow: 1px 1px #252626;
+ color: white;
+}
+nav a, footer a {
+ color: inherit;
+}
+
+.main-container {
+ background: linear-gradient(lightgrey, white);
+ padding-top: 0.1rem;
+}
+
+main {
+ background: linear-gradient(white, #dcdcdc, #dcdcdc);
+ border: 1px solid gray;
+ padding: 0 1rem;
+ background-color: white;
+ margin: 0.5rem auto;
+ box-shadow: 1px 1px 3px #6F6F6F;
+}
+
+
+h2 {
+ font-size: 1em;
+}
+</style>
+{{- end}}