lay blocks out with flex and add horizontal rule

Amolith created

Change summary

main.go | 82 ++++++++++++++++++++++++++++++++++++++++------------------
1 file changed, 56 insertions(+), 26 deletions(-)

Detailed changes

main.go 🔗

@@ -3,6 +3,8 @@ package main
 import (
 	"embed"
 	"fmt"
+	"image"
+	"image/color"
 	"os"
 	"strings"
 
@@ -11,6 +13,8 @@ import (
 	"gioui.org/io/system"
 	"gioui.org/layout"
 	"gioui.org/op"
+	"gioui.org/op/clip"
+	"gioui.org/op/paint"
 	"gioui.org/text"
 	"gioui.org/unit"
 	"gioui.org/widget/material"
@@ -24,9 +28,9 @@ var (
 	flagHelp          *bool   = flag.BoolP("help", "h", false, "Show the help message")
 	flagInput         *string = flag.StringP("input", "i", "", "Path to input Markdown")
 	flagOutput        *string = flag.StringP("output", "o", "", "Path to output PNG")
-	flagMetaSize      *int    = flag.IntP("metasize", "m", 12, "Size of font for meta information")
-	flagPostTitleSize *int    = flag.IntP("posttitlesize", "p", 14, "Size of font for post title")
-	flagSiteTitleSize *int    = flag.IntP("sitetitlesize", "s", 10, "Size of font for site title")
+	flagMetaSize      *int    = flag.IntP("metasize", "m", 30, "Size of font for meta information")
+	flagPostTitleSize *int    = flag.IntP("posttitlesize", "p", 50, "Size of font for post title")
+	flagSiteTitleSize *int    = flag.IntP("sitetitlesize", "s", 40, "Size of font for site title")
 )
 
 //go:embed fonts
@@ -67,29 +71,55 @@ Site Title:     %s
 			case system.FrameEvent:
 				gtx := layout.NewContext(&ops, e)
 
-				title := material.LabelStyle{
-					Font:      text.Font{Typeface: "Primary font", Variant: "", Style: text.Regular, Weight: text.Bold},
-					Alignment: text.Middle,
-					Text:      postTitle,
-					TextSize:  unit.Sp(float32(*flagPostTitleSize)),
-				}
-				title.Layout(gtx)
-
-				rTime := material.Body1(th, fmt.Sprint("Reading Time: ", postReadTime))
-				rTime.Alignment = text.Middle
-				rTime.Layout(gtx)
-
-				// pDate := material.Body1(th, fmt.Sprint("Published: ", postDate))
-				// pDate.Alignment = text.Middle
-				// pDate.Layout(gtx)
-
-				// eDate := material.Body1(th, fmt.Sprint("Last Edited: ", dateEdited))
-				// eDate.Alignment = text.Middle
-				// eDate.Layout(gtx)
-
-				// sTitle := material.Body1(th, siteTitle)
-				// sTitle.Alignment = text.Middle
-				// sTitle.Layout(gtx)
+				layout.Flex{Axis: layout.Vertical, Alignment: layout.Middle}.Layout(gtx,
+
+					layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+						return layout.Spacer{Height: unit.Dp(100)}.Layout(gtx)
+					}),
+
+					layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
+						title := material.Label(th, unit.Sp(float32(*flagPostTitleSize)), postTitle)
+						title.Font = text.Font{Typeface: "Primary font", Variant: "", Style: text.Regular, Weight: text.Bold}
+						title.Alignment = text.Middle
+						return title.Layout(gtx)
+					}),
+
+					layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
+						rTime := material.Label(th, unit.Sp(float32(*flagMetaSize)), fmt.Sprint("Reading Time: ", postReadTime, " minutes"))
+						rTime.Font = text.Font{Typeface: "Primary font", Variant: "", Style: text.Regular, Weight: text.Bold}
+						rTime.Alignment = text.Middle
+						return rTime.Layout(gtx)
+					}),
+
+					layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
+						pDate := material.Label(th, unit.Sp(float32(*flagMetaSize)), fmt.Sprint("Published: ", postDate))
+						pDate.Font = text.Font{Typeface: "Primary font", Variant: "", Style: text.Regular, Weight: text.Bold}
+						pDate.Alignment = text.Middle
+						return pDate.Layout(gtx)
+					}),
+
+					layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
+						eDate := material.Label(th, unit.Sp(float32(*flagMetaSize)), fmt.Sprint("Edited: ", dateEdited))
+						eDate.Font = text.Font{Typeface: "Primary font", Variant: "", Style: text.Regular, Weight: text.Bold}
+						eDate.Alignment = text.Middle
+						return eDate.Layout(gtx)
+					}),
+
+					layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
+						size := image.Pt(700, 4)
+						defer clip.Rect{Max: size}.Push(&ops).Pop()
+						paint.ColorOp{Color: color.NRGBA{A: 0xFF}}.Add(&ops)
+						paint.PaintOp{}.Add(&ops)
+						return layout.Dimensions{Size: size}
+					}),
+
+					layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
+						sTitle := material.Body1(th, siteTitle)
+						sTitle.Font = text.Font{Typeface: "Primary font", Variant: "", Style: text.Regular, Weight: text.Bold}
+						sTitle.Alignment = text.Middle
+						return sTitle.Layout(gtx)
+					}),
+				)
 
 				e.Frame(gtx.Ops)
 			}