design: improve print stylesheet

builder/article.go

@@ -8,6 +8,7 @@ import (
 	"time"
 
 	"github.com/macrat/blanktar/builder/fs"
+	"github.com/macrat/blanktar/builder/qr"
 	"github.com/macrat/blanktar/builder/thumbnail"
 	"gopkg.in/yaml.v3"
 )
@@ -155,14 +156,20 @@ func (c *ArticleConverter) Convert(dst fs.Writable, src Source, conf Config) (Ar
 		return nil, err
 	}
 
-	asset, err := c.convertImage(dst, src, externalPath, article)
+	preview, err := c.convertImage(dst, src, externalPath, article)
+	if err != nil {
+		return nil, err
+	}
+
+	qrcode, err := c.convertQR(dst, src, externalPath, article)
 	if err != nil {
 		return nil, err
 	}
 
 	return ArtifactList{
 		article,
-		asset,
+		preview,
+		qrcode,
 	}, nil
 }
 
@@ -211,6 +218,10 @@ func (c *ArticleConverter) convertHTML(dst fs.Writable, src Source, externalPath
 }
 
 func (c *ArticleConverter) convertImage(dst fs.Writable, src Source, externalPath string, article Article) (Asset, error) {
+	if externalPath == "" {
+		externalPath = "index"
+	}
+
 	outputPath := path.Join("images", externalPath+".png")
 
 	asset := Asset{
@@ -231,3 +242,29 @@ func (c *ArticleConverter) convertImage(dst fs.Writable, src Source, externalPat
 	err = c.thumbnail.Generate(w, article.Title, article.Tags)
 	return asset, err
 }
+
+func (c *ArticleConverter) convertQR(dst fs.Writable, src Source, externalPath string, article Article) (Asset, error) {
+	if externalPath == "" {
+		externalPath = "index"
+	}
+
+	outputPath := path.Join("images", externalPath+".qr.png")
+
+	asset := Asset{
+		name:   outputPath,
+		source: src,
+	}
+
+	if _, err := fs.Stat(dst, outputPath); err == nil {
+		return asset, nil
+	}
+
+	w, err := CreateOutput(dst, outputPath, "image/png")
+	if err != nil {
+		return Asset{}, err
+	}
+	defer w.Close()
+
+	err = qr.Generate(w, 512, article.URL)
+	return asset, err
+}

builder/converter.go

@@ -37,15 +37,15 @@ func (c CopyConverter) Convert(dst fs.Writable, src Source, conf Config) (Artifa
 	return Copy(dst, src, "")
 }
 
-type MinifyConverter struct{
+type MinifyConverter struct {
 	Extension string
-	MIMEType string
+	MIMEType  string
 }
 
 func NewMinifyConverter(extension, mimeType string) MinifyConverter {
 	return MinifyConverter{
 		Extension: extension,
-		MIMEType: mimeType,
+		MIMEType:  mimeType,
 	}
 }
 

builder/go.mod

@@ -8,6 +8,7 @@ require (
 	github.com/dsoprea/go-jpeg-image-structure/v2 v2.0.0-20221012074422-4f3f7e934102
 	github.com/fsnotify/fsnotify v1.7.0
 	github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0
+	github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e
 	github.com/tdewolff/minify/v2 v2.20.10
 	github.com/yuin/goldmark v1.6.0
 	github.com/yuin/goldmark-highlighting/v2 v2.0.0-20230729083705-37449abec8cc

builder/go.sum

@@ -65,6 +65,8 @@ github.com/golang/geo v0.0.0-20230421003525-6adc56603217/go.mod h1:8wI0hitZ3a1Ix
 github.com/jessevdk/go-flags v1.4.0/go.mod h1:4FA24M0QyGHXBuZZK/XkWh8h0e1EYbRYJSGM75WSRxI=
 github.com/jessevdk/go-flags v1.5.0/go.mod h1:Fw0T6WPc1dYxT4mKEZRfG5kJhaTDP9pj1c2EWnYs/m4=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e h1:MRM5ITcdelLK2j1vwZ3Je0FKVCfqOLp5zO6trqMLYs0=
+github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e/go.mod h1:XV66xRDqSt+GTGFMVlhk3ULuV0y9ZmzeVGR4mloJI3M=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/tdewolff/minify/v2 v2.12.8 h1:Q2BqOTmlMjoutkuD/OPCnJUpIqrzT3nRPkw+q+KpXS0=

builder/qr/qr.go

@@ -0,0 +1,15 @@
+package qr
+
+import (
+	"io"
+
+	"github.com/skip2/go-qrcode"
+)
+
+func Generate(w io.Writer, size int, url string) error {
+	qr, err := qrcode.New(url, qrcode.Medium)
+	if err != nil {
+		return err
+	}
+	return qr.Write(size, w)
+}

pages/blog/2024/01/blanktar-renewal.md

@@ -180,10 +180,12 @@ Next.jsをやめて完全に静的なサイトにした結果、以下のよう
 </div>
 </div>
 <style>
-.two-columns-20240106 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 1em
+@media screen {
+  .two-columns-20240106 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1em
+  }
 }
 @media (max-width: calc(800px)) {
   .two-columns-20240106 {

pages/print.css

@@ -22,12 +22,17 @@ header {
 h1 {
     font-size: 200%;
     text-align: center;
-    margin: 0 0 .5em;
+    margin: 0 1.5cm;
+    min-height: 1.7cm;
 }
 h2 {
     margin: 1em 0 0.5em;
 }
 
+.tags a {
+    color: inherit;
+}
+
 article {
     column-width: 40em;
 }
@@ -38,6 +43,24 @@ article {
     position: absolute;
     top: 0;
     right: 0;
+    text-align: right;
+    display: grid;
+    grid-template-columns: auto auto;
+}
+.metadata time {
+    grid-area: 1 / 2;
+    margin: 0 .5em 0 1em;
+}
+.metadata .tags {
+    grid-area: 1 / 1;
+    margin: 0;
+}
+.metadata .pageqr {
+    grid-area: 2 / 2;
+    display: block;
+    width: 1.5cm;
+    height: 1.5cm;
+    margin-left: auto;
 }
 article table th {
     background-color: inherit;
@@ -58,6 +81,66 @@ pre {
     display: none;
 }
 
+.blog-articles {
+    column-width: 25em;
+}
+.blog-articles > li {
+    display: block;
+    margin: 8px 0;
+    padding: 2mm 0;
+    page-break-inside: avoid;
+}
+.blog-articles .pageqr {
+    display: block;
+    float: left;
+    width: 1.5cm;
+    height: 1.5cm;
+}
+.blog-articles h2 {
+    font-size: 150%;
+}
+.blog-articles > li > a {
+    margin-left: 1.5cm;
+}
+
+.pager > li {
+    display: none;
+}
+.pager > li.current-page {
+    display: inline;
+    background-color: transparent;
+}
+.pager > li.current-page::before {
+    content: "page ";
+}
+
+.articles-of-year > li {
+    page-break-inside: avoid;
+}
+.articles-of-month {
+    column-width: 20em;
+    list-style: none;
+    padding: 0;
+}
+.articles-of-month > li {
+    page-break-inside: avoid;
+    padding-left: 1cm;
+    margin: 0 0 5mm;
+    position: relative;
+}
+.articles-of-month .pageqr {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 1cm;
+    height: 1cm;
+}
+.articles-of-month time {
+    display: block;
+    font-weight: bold;
+}
+
 footer {
     opacity: 1;
     font-size: 6pt;

templates/base.html

@@ -71,6 +71,9 @@
 nav li > a {
     padding: 0 8px;
 }
+.pageqr {
+    display: none;
+}
 
 main {
     padding: 0 8px;

templates/blog/index.html

@@ -126,6 +126,7 @@ <h1>blog</h1>
     <ol class="blog-articles">
         {{range .Posts}}
             <li>
+                <img src="/images{{.Path}}.qr.png" alt="QRコード" class="pageqr" loading="lazy">
                 <time datetime="{{.Published.Format "2006-01-02T15:04:05Z07:00"}}">{{.Published.Format "2006-01-02"}}</time>
                 <ol class="tags">
                     {{range .Tags}}

templates/blog/month.html

@@ -34,6 +34,7 @@ <h1>{{.Year}}年{{.Month}}月の記事</h1>
     <ol class="articles-of-month">
         {{range .Posts}}
             <li><a href="{{.Path}}">
+                <img src="/images{{.Path}}.qr.png" alt="QRコード" class="pageqr" loading="lazy">
                 <time>{{.Published.Format "2006-01-02"}}</time>
                 {{.Title}}
             </a></li>

templates/blog/post.html

@@ -259,6 +259,7 @@ <h1>{{.Title}}</h1>
                     <li><a href="/blog/tags/{{. | escapetag}}">{{.}}</a></li>
                 {{end}}
             </ul>
+            <img src="/images{{.Path}}.qr.png" alt="このページのQRコード" class="pageqr" loading="lazy">
         </div>
         {{.Content}}
         <aside class="share">

templates/blog/year.html

@@ -44,6 +44,7 @@ <h2>{{$idx | add 1}}月</h2>
                     <ol class="articles-of-month">
                     {{range $posts}}
                         <li><a href="{{.Path}}">
+                            <img src="/images{{.Path}}.qr.png" alt="QRコード" class="pageqr" loading="lazy">
                             <time>{{.Published.Format "2006-01-02"}}</time>
                             {{.Title}}
                         </a></li>

templates/default.html

@@ -56,6 +56,7 @@
             {{end}}
         </ol>
         <h1>{{.Title}}</h1>
+        <img src="/images{{.Path}}.qr.png" alt="このページのQRコード" class="pageqr" loading="lazy">
         {{.Content}}
     </article>
 {{end}}