Add initial support for tags

You can filter by clicking on them, but it's not possible to clear the
filter without going back, and you can't filter by multiple tags.

go/blog/blog.go

@@ -4,6 +4,7 @@ import (
	"crypto/md5"
	"crypto/rand"
	"encoding/hex"
	"encoding/json"
	"flag"
	"fmt"
	"html/template"
@@ -19,12 +20,13 @@ import (
)
type Post struct {
	Id      string `yaml:"id"`
	Title   string `yaml:"title"`
	URL     string `yaml:"url"`
	Content string `yaml:"content"`
	Date    string `yaml:"date"`
	Type    string `yaml:"type"`
	Id      string   `yaml:"id"`
	Title   string   `yaml:"title"`
	URL     string   `yaml:"url"`
	Content string   `yaml:"content"`
	Tags    []string `yaml:"tags"`
	Date    string   `yaml:"date"`
	Type    string   `yaml:"type"`
}
var flags struct {
@@ -38,7 +40,7 @@ var dataPath string = "blog.yaml"
var defaultStyle = `
article {
	margin-bottom: 1em;
	margin-bottom: 2em;
}
article header {
@@ -71,6 +73,25 @@ article img {
	max-width: 80vw;
	max-height: 50vh;
}
article .tags {
	list-style-type: none;
	padding: 0;
}
article .tags .tag-link {
	float: left;
	color: black;
	margin-right: 0.5em;
}
article .tags .tag-link:visited {
	color: #555;
}
article.does-not-match {
	display: none;
}
`
func init() {
@@ -176,6 +197,44 @@ func main() {
		}
	}
	fmt.Fprintf(out, `
	<script>
	window.addEventListener("click", function(ev) {
		if (ev.target.classList.contains("tag-link")) {
			if (ev.target.href == "") {
				return;
			}
			var u = new URL(ev.target.href);
			if (!u.hash.startsWith("#tag:")) {
				return;
			}
			var tag = u.hash.substr(5);
			filterTag(tag);
		}
	})
	function filterTag(tag) {
		var articles = document.querySelectorAll("article");
		for (var i = 0; i < articles.length; i++) {
			var article = articles[i];
			var matches = false;
			if (article && 'tags' in article.dataset) {
				var tags = JSON.parse(article.dataset.tags);
				for (var j = 0; j < tags.length; j++) {
					if (tags[j] == tag) {
						matches = true;
						break;
					}
				}
			}
			if (!matches) {
				article.classList.add("does-not-match");
			}
		}
	}
	</script>`)
	fmt.Fprintf(out, "\n</body>\n</html>\n")
	out.Close()
@@ -195,6 +254,10 @@ var funcs = template.FuncMap{
	"safe_url": func(s string) template.URL {
		return template.URL(s)
	},
	"json": func(v interface{}) (string, error) {
		buf, err := json.Marshal(v)
		return string(buf), err
	},
}
var baseTmpl = template.Must(template.New("base").
@@ -208,6 +271,14 @@ var baseTmpl = template.Must(template.New("base").
		<time>{{ .Date }}</time>{{ end }}
	</header>
{{ end }}
{{ define "tags" }}
	<ul class="tags">
	{{- range . }}
		<li><a class="tag-link" href="#tag:{{ safe_url . }}">{{ . }}</a></li>
	{{ end -}}
	</ul>
{{ end }}
`))
var shellTmpl = template.Must(baseTmpl.New("shell").
@@ -270,12 +341,16 @@ var songTmpl = template.Must(baseTmpl.New("song").
var textTmpl = template.Must(baseTmpl.New("text").
	Funcs(funcs).Parse(`
<article id="{{ .Id }}" class="text">
<article id="{{ .Id }}" class="text" {{- if .Tags }} data-tags="{{ json .Tags }}"{{ end }}>
	{{- template "title" . }}
	{{- if .Content }}
	{{ markdown .Content }}
	{{- end -}}
	<footer>
		{{ template "tags" .Tags }}
	</footer>
</article>
`))

go/blog/blog.yaml

@@ -63,3 +63,22 @@
- url: https://www.youtube.com/watch?v=yLuOzNeHw5I
  content: Lights, by Archive.
  type: video
- title: There are tags now!
  content: |
    You can now tag articles.  Any kind of string is allowed, have
    some fun with it...  :)
    Use them as follows:
        - # attributes as usual
          tags: [fancy, tags, "stuff:with-interesting!-characters"]
    Or alternatively:
        - # as usual
          tags:
            - fancy
            - tags
            - "stuff:with-interesting!-characters"
  tags: [tags, feature, announcement, "author:lu"]
  type: text