Art gallery (#91)

* implement art gallery

* update dates

* gallery: update tags

* gofmt

* templates/gallerypost: add hashtags

blog/blog-feature-art-gallery-2019-11-01.markdown

@@ -0,0 +1,21 @@
+---
+title: "Blog Feature: Art Gallery"
+date: 2019-11-01
+tags:
+ - art
+ - announce
+ - 100th-post
+---
+
+# Blog Feature: Art Gallery
+
+I have just implemented support for my portfolio site to also function as an art
+gallery. See all of my posted art [here](/gallery).
+
+I have been trying to get better at art for a while and I feel I'm at the level
+where I feel comfortable putting it on my portfolio. Let's see how far this
+rabbit hole goes.
+
+---
+
+Also this is my 100th post! Yay!

cmd/site/html.go

@@ -98,6 +98,59 @@ func (s *Site) showSeries(w http.ResponseWriter, r *http.Request) {
 	}).ServeHTTP(w, r)
 }
 
+func (s *Site) showGallery(w http.ResponseWriter, r *http.Request) {
+	if r.RequestURI == "/gallery/" {
+		http.Redirect(w, r, "/gallery", http.StatusSeeOther)
+		return
+	}
+
+	cmp := r.URL.Path[1:]
+	var p blog.Post
+	var found bool
+	for _, pst := range s.Gallery {
+		if pst.Link == cmp {
+			p = pst
+			found = true
+		}
+	}
+
+	if !found {
+		w.WriteHeader(http.StatusNotFound)
+		s.renderTemplatePage("error.html", "no such post found: "+r.RequestURI).ServeHTTP(w, r)
+		return
+	}
+
+	var tags string
+	if len(p.Tags) != 0 {
+		for _, t := range p.Tags {
+			tags = tags + " #" + strings.ReplaceAll(t, "-", "")
+		}
+	}
+
+	h := s.renderTemplatePage("gallerypost.html", struct {
+		Title    string
+		Link     string
+		BodyHTML template.HTML
+		Date     string
+		Tags     string
+		Image    string
+	}{
+		Title:    p.Title,
+		Link:     p.Link,
+		BodyHTML: p.BodyHTML,
+		Date:     internal.IOS13Detri(p.Date),
+		Tags:     tags,
+		Image:    p.ImageURL,
+	})
+
+	if h == nil {
+		panic("how did we get here?")
+	}
+
+	h.ServeHTTP(w, r)
+	postView.With(prometheus.Labels{"base": filepath.Base(p.Link)}).Inc()
+}
+
 func (s *Site) showTalk(w http.ResponseWriter, r *http.Request) {
 	if r.RequestURI == "/talks/" {
 		http.Redirect(w, r, "/talks", http.StatusSeeOther)

cmd/site/main.go

@@ -55,10 +55,11 @@ func main() {
 
 // Site is the parent object for https://christine.website's backend.
 type Site struct {
-	Posts  blog.Posts
+	Posts   blog.Posts
-	Talks  blog.Posts
+	Talks   blog.Posts
-	Resume template.HTML
+	Gallery blog.Posts
-	Series []string
+	Resume  template.HTML
+	Series  []string
 
 	rssFeed  *feeds.Feed
 	jsonFeed *jsonfeed.Feed
@@ -82,7 +83,7 @@ func (s *Site) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	middleware.RequestID(s.xffmw.Handler(ex.HTTPLog(s.mux))).ServeHTTP(w, r)
 }
 
-var arbDate = time.Date(2019, time.September, 12, 0, 0, 0, 0, time.UTC)
+var arbDate = time.Date(2019, time.November, 2, 0, 0, 0, 0, time.UTC)
 
 // Build creates a new Site instance or fails.
 func Build() (*Site, error) {
@@ -157,9 +158,16 @@ func Build() (*Site, error) {
 	}
 	s.Talks = talks
 
+	gallery, err := blog.LoadPosts("./gallery", "gallery")
+	if err != nil {
+		return nil, err
+	}
+	s.Gallery = gallery
+
 	var everything blog.Posts
 	everything = append(everything, posts...)
 	everything = append(everything, talks...)
+	everything = append(everything, gallery...)
 
 	sort.Sort(sort.Reverse(everything))
 
@@ -208,6 +216,7 @@ func Build() (*Site, error) {
 	s.mux.Handle("/resume", middleware.Metrics("resume", s.renderTemplatePage("resume.html", s.Resume)))
 	s.mux.Handle("/blog", middleware.Metrics("blog", s.renderTemplatePage("blogindex.html", s.Posts)))
 	s.mux.Handle("/talks", middleware.Metrics("talks", s.renderTemplatePage("talkindex.html", s.Talks)))
+	s.mux.Handle("/gallery", middleware.Metrics("gallery", s.renderTemplatePage("galleryindex.html", s.Gallery)))
 	s.mux.Handle("/contact", middleware.Metrics("contact", s.renderTemplatePage("contact.html", nil)))
 	s.mux.Handle("/blog.rss", middleware.Metrics("blog.rss", http.HandlerFunc(s.createFeed)))
 	s.mux.Handle("/blog.atom", middleware.Metrics("blog.atom", http.HandlerFunc(s.createAtom)))
@@ -216,6 +225,7 @@ func Build() (*Site, error) {
 	s.mux.Handle("/blog/series", http.HandlerFunc(s.listSeries))
 	s.mux.Handle("/blog/series/", http.HandlerFunc(s.showSeries))
 	s.mux.Handle("/talks/", middleware.Metrics("talks", http.HandlerFunc(s.showTalk)))
+	s.mux.Handle("/gallery/", middleware.Metrics("gallery", http.HandlerFunc(s.showGallery)))
 	s.mux.Handle("/css/", http.FileServer(http.Dir(".")))
 	s.mux.Handle("/static/", http.FileServer(http.Dir(".")))
 	s.mux.HandleFunc("/sw.js", func(w http.ResponseWriter, r *http.Request) {

gallery/bliss-2018-03-04.markdown

@@ -0,0 +1,10 @@
+---
+title: Bliss
+date: 2018-03-04
+tags:
+ - raster
+image: /static/art/Bliss.png
+thumb: /static/art/Bliss_tn.jpg
+---
+
+Created with Procreate on iPadOS using an iPad Pro and an Apple Pencil.

gallery/boat-2018-09-24.markdown

@@ -0,0 +1,10 @@
+---
+title: Boat
+date: 2018-09-24
+tags:
+ - raster
+image: /static/art/Boat.png
+thumb: /static/art/Boat_tn.jpg
+---
+
+Created with Procreate on iPadOS using an iPad Pro and an Apple Pencil.

gallery/bokoblin-2018-11-01.markdown

@@ -0,0 +1,11 @@
+---
+title: Bokoblin
+date: 2018-11-01
+tags:
+ - botw
+ - raster
+image: /static/art/Bokoblin.png
+thumb: /static/art/Bokoblin_tn.jpg
+---
+
+Created with Procreate on iPadOS using an iPad Pro and an Apple Pencil.

gallery/lifecycle-2019-05-23.markdown

@@ -0,0 +1,12 @@
+---
+title: Lifecycle
+date: 2019-05-23
+tags:
+ - raster
+image: /static/art/Lifecycle.png
+thumb: /static/art/Lifecycle_tn.jpg
+---
+
+Created with Procreate on iPadOS using an iPad Pro and an Apple Pencil.
+
+This is a tron lightcycle because the team I was on at the time was named Lifecycle.

gallery/link-home-2018-09-01.markdown

@@ -0,0 +1,11 @@
+---
+title: "Link's Home"
+date: 2018-09-01
+tags:
+ - botw
+ - raster
+image: /static/art/LinkHome2.png
+thumb: /static/art/LinkHome2_tn.jpg
+---
+
+Created with Procreate on iPadOS using an iPad Pro and an Apple Pencil.

gallery/link-sunset-2018-10-01.markdown

@@ -0,0 +1,11 @@
+---
+title: "Link's Sunset"
+date: 2018-09-01
+tags:
+ - botw
+ - raster
+image: /static/art/LinkSunset.png
+thumb: /static/art/LinkSunset_tn.jpg
+---
+
+Created with Procreate on iPadOS using an iPad Pro and an Apple Pencil.

gallery/orca-2019-11-01.markdown

@@ -0,0 +1,14 @@
+---
+title: Orca
+date: 2019-11-01
+tags:
+ - furry
+ - orca
+ - vector
+image: /static/art/Orca.png
+thumb: /static/art/Orca_tn.jpg
+---
+
+# Orca
+
+Created with Affinity Designer on iPadOS using an iPad Pro and an Apple Pencil.

internal/blog/blog.go

@@ -23,6 +23,8 @@ type Post struct {
 	Series     string        `json:"series"`
 	Tags       []string      `json:"tags"`
 	SlidesLink string        `json:"slides_link"`
+	ImageURL   string        `json:"image_url"`
+	ThumbURL   string        `json:"thumb_url"`
 	Date       time.Time
 	DateString string `json:"date"`
 }
@@ -65,6 +67,8 @@ func LoadPosts(path string, prepend string) (Posts, error) {
 		Series     string
 		Tags       []string
 		SlidesLink string `yaml:"slides_link"`
+		Image      string
+		Thumb      string
 	}
 	var result Posts
 
@@ -115,6 +119,8 @@ func LoadPosts(path string, prepend string) (Posts, error) {
 			SlidesLink: fm.SlidesLink,
 			Series:     fm.Series,
 			Tags:       fm.Tags,
+			ImageURL:   fm.Image,
+			ThumbURL:   fm.Thumb,
 		}
 		result = append(result, p)
 

internal/blog/blog_test.go

@@ -29,6 +29,24 @@ func TestLoadTalks(t *testing.T) {
 	}
 }
 
+func TestLoadGallery(t *testing.T) {
+	gallery, err := LoadPosts("../../gallery", "gallery")
+	if err != nil {
+		t.Fatal(err)
+	}
+
+	for _, art := range gallery {
+		t.Run(art.Link, art.test)
+		if art.ImageURL == "" {
+			t.Errorf("art %s (%s) doesn't have an image link", art.Title, art.DateString)
+		}
+		if art.ThumbURL == "" {
+			t.Errorf("art %s (%s) doesn't have a thumbnail link", art.Title, art.DateString)
+		}
+
+	}
+}
+
 func (p Post) test(t *testing.T) {
 	if p.Title == "" {
 		t.Error("no post title")

static/js/sw.js

@@ -5,13 +5,13 @@ self.addEventListener('install', function(event) {
   event.waitUntil(preLoad());
 });
 
-const cacheName = "cache-2019-10-15";
+const cacheName = "cache-2019-11-01";
 
 var preLoad = function(){
   console.log('[PWA Builder] Install Event processing');
   return caches.open(cacheName).then(function(cache) {
     console.log('[PWA Builder] Cached index and offline page during Install');
-    return cache.addAll(['/blog/', '/blog', '/', '/contact', '/resume', '/talks']);
+    return cache.addAll(['/blog/', '/blog', '/', '/contact', '/resume', '/talks', '/gallery']);
   });
 };
 

templates/base.html

@@ -59,7 +59,7 @@
         {{ template "scripts" . }}
         <div class="container">
             <header>
-                <p><a href="/">Christine Dodrill</a> - <a href="/blog">Blog</a> - <a href="/contact">Contact</a> - <a href="/resume">Resume</a> - <a href="/talks">Talks</a> | <a target="_blank" rel="noopener noreferrer" href="https://graphviz.christine.website">GraphViz</a> - <a target="_blank" rel="noopener noreferrer" href="https://when-then-zen.christine.website/">When Then Zen</a></p>
+                <p><a href="/">Christine Dodrill</a> - <a href="/blog">Blog</a> - <a href="/contact">Contact</a> - <a href="/gallery">Gallery</a> - <a href="/resume">Resume</a> - <a href="/talks">Talks</a> | <a target="_blank" rel="noopener noreferrer" href="https://graphviz.christine.website">GraphViz</a> - <a target="_blank" rel="noopener noreferrer" href="https://when-then-zen.christine.website/">When Then Zen</a></p>
             </header>
 
             <div class="snowframe">

templates/galleryindex.html

@@ -0,0 +1,25 @@
+{{ define "title" }}
+<title>Gallery - Christine Dodrill</title>
+{{ end }}
+
+{{ define "content" }}
+<h1>Gallery</h1>
+
+<p>Here are links to all of the art I have done in the last few years.</p>
+
+<p>If you have a compatible reader, be sure to check out my <a href="/blog.rss">RSS Feed</a> for automatic updates. Also check out the <a href="/blog.json">JSONFeed</a>.</p>
+
+<p>
+  <div class="grid">
+    {{ range . }}
+      <div class="card cell -4of12 blogpost-card">
+        <header class="card-header">{{ .Title }}</header>
+        <div class="card-content">
+          <center><p>Posted on {{ .DateString }} <br><a href="{{ .Link }}"><img src="{{ .ThumbURL }}" /></a></p></center>
+        </div>
+      </div>
+    {{ end }}
+  </div>
+</p>
+
+{{ end }}

templates/gallerypost.html

@@ -0,0 +1,116 @@
+{{ define "title" }}
+<title>{{ .Title }} - Christine Dodrill</title>
+
+<!-- Twitter -->
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:site" content="@theprincessxena" />
+<meta name="twitter:title" content="{{ .Title }}" />
+<meta name="twitter:description" content="Posted on {{ .Date }}" />
+
+<!-- Facebook -->
+<meta property="og:type" content="website" />
+<meta property="og:title" content="{{ .Title }}" />
+<meta property="og:site_name" content="Talk by Christine Dodrill" />
+
+<!-- Description -->
+<meta name="description" content="{{ .Title }} - Talk by Christine Dodrill" />
+<meta name="author" content="Christine Dodrill">
+
+<link rel="canonical" href="https://christine.website/{{ .Link }}">
+
+<script type="application/ld+json">
+ {
+   "@context": "http://schema.org",
+   "@type": "Painting",
+   "headline": "{{ .Title }}",
+   "image": "https://christine.website{{ .Image }}",
+   "url": "https://christine.website/{{ .Link }}",
+   "datePublished": "{{ .Date }}",
+   "mainEntityOfPage": {
+       "@type": "",
+       "@id": "https://christine.website{{ .Image }}"
+   },
+   "creator": {
+       "@type": "Person",
+       "name": "Christine Dodrill"
+   },
+   "publisher": {
+       "@type": "Person",
+       "name": "Christine Dodrill"
+   }
+ }
+</script>
+{{ end }}
+
+{{ define "content" }}
+
+<h1>{{ .Title }}</h1>
+
+{{ .BodyHTML }}
+
+<center>
+  <img src="{{ .Image }}" />
+</center>
+
+<hr />
+
+<!-- The button that should be clicked. -->
+<button onclick="share_on_mastodon()">Share on Mastodon</button>
+
+<p>This artwork was posted on {{ .Date }}.</p>
+
+{{ if ne .Tags "" }}
+<p>Tags:{{.Tags}}</p>
+{{ end }}
+
+<script>
+
+// The actual function. Set this as an onclick function for your "Share on Mastodon" button
+function share_on_mastodon() {
+        // Prefill the form with the user's previously-specified Mastodon instance, if applicable
+        var default_url = localStorage['mastodon_instance']; 
+
+        // If there is no cached instance/domain, then insert a "https://" with no domain at the start of the prompt. 
+        if (!default_url)
+                default_url = "https://"; 
+
+        var instance = prompt("Enter your instance's address: (ex: https://linuxrocks.online)", default_url);
+        if (instance) { 
+                // Handle URL formats
+                if ( !instance.startsWith("https://") && !instance.startsWith("http://") )
+                        instance = "https://" + instance;  
+
+                // Get the current page's URL
+                var url   = window.location.href;
+        
+                // Get the page title from the og:title meta tag, if it exists.
+                var title = document.querySelectorAll('meta[property="og:title"]')[0].getAttribute("content"); 
+        
+                // Otherwise, use the <title> tag as the title
+                if (!title)    var title = document.getElementsByTagName("title")[0].innerHTML;
+        
+                // Handle slash
+                if ( !instance.endsWith("/") )
+                        instance = instance + "/"; 
+
+                // Cache the instance/domain for future requests
+                localStorage['mastodon_instance'] = instance; 
+
+                // Hashtags 
+                var hashtags = "#art";
+                {{ if ne .Tags "" }}hashtags += " {{ .Tags }}";{{ end }}
+
+                // Tagging users, such as offical accounts or the author of the post 
+                var author   = "@cadey@mst3k.interlinked.me"; 
+
+                // Create the Share URL
+                // https://someinstance.tld/share?text=URL%20encoded%20text
+                mastodon_url = instance + "share?text=" + encodeURIComponent(title + "\n\n" + url + "\n\n" + hashtags + " " + author);
+
+                // Open a new window at the share location   
+                window.open(mastodon_url, '_blank');
+        }
+}
+</script>
+
+{{ end }}