From 5f2e6c5dd4c99bde5041d16aa7125c3eb2f9721c Mon Sep 17 00:00:00 2001 From: Prad Nukala Date: Mon, 30 Sep 2024 21:16:13 -0400 Subject: [PATCH] feat: implement hero section using Pkl --- cmd/motrd/proxy.go | 1 - pkg/nebula/assets/config.pkl | 30 ++++++- pkg/nebula/components/sections/hero.templ | 29 ++----- pkg/nebula/components/sections/hero_templ.go | 86 +++++++++++++------- pkg/nebula/models/Footer.pkl.go | 12 +++ pkg/nebula/models/Image.pkl.go | 4 +- pkg/nebula/models/Models.pkl.go | 17 +--- pkg/nebula/models/common.go | 35 ++++++++ pkg/nebula/models/init.pkl.go | 7 +- pkg/nebula/models/marketing.go | 1 - pkg/nebula/nebula.go | 14 ++-- pkg/nebula/pages/home.templ | 17 ++-- pkg/nebula/pages/home_templ.go | 17 ++-- pkl/uiux.pkl | 26 ++++-- 14 files changed, 189 insertions(+), 107 deletions(-) create mode 100644 pkg/nebula/models/Footer.pkl.go delete mode 100644 pkg/nebula/models/marketing.go diff --git a/cmd/motrd/proxy.go b/cmd/motrd/proxy.go index d3490c5ee..e9b4cba1d 100644 --- a/cmd/motrd/proxy.go +++ b/cmd/motrd/proxy.go @@ -26,7 +26,6 @@ func NewProxyCmd() *cobra.Command { } e.GET("/", pages.Home) - e.GET("/config", nebula.GetConfig) e.GET("/allocate", pages.Profile) if err := e.Start(":1323"); err != http.ErrServerClosed { diff --git a/pkg/nebula/assets/config.pkl b/pkg/nebula/assets/config.pkl index dc25bae59..3d0a285ad 100644 --- a/pkg/nebula/assets/config.pkl +++ b/pkg/nebula/assets/config.pkl @@ -1,2 +1,30 @@ -import "https://pkl.sh/uiux.pkl"; +amends "https://pkl.sh/uiux.pkl"; +hero = new Hero { + titleFirst = "Simplified"; + titleEmphasis = "self-custody"; + titleSecond = "for everyone"; + subtitle = "Sonr is a modern re-imagination of online user identity, empowering users to take ownership of their digital footprint and unlocking a new era of self-sovereignty."; + primaryButton = new Button { + text = "Get Started"; + href = "/register"; + }; + secondaryButton = new Button { + text = "Learn More"; + href = "/about"; + }; + image = new Image { + src = "https://cdn.sonr.id/img/hero-clipped.svg"; + width = "560"; + height = "560; + }; +}; + +stats = new Stats { + firstValue = "476K"; + firstLabel = "Assets packed with power beyond your imagination."; + secondValue = "1.44K"; + secondLabel = "Assets packed with power beyond your imagination."; + thirdValue = "1.5M+"; + thirdLabel = "Assets packed with power beyond your imagination."; +}; diff --git a/pkg/nebula/components/sections/hero.templ b/pkg/nebula/components/sections/hero.templ index dd9139c6f..96318b195 100644 --- a/pkg/nebula/components/sections/hero.templ +++ b/pkg/nebula/components/sections/hero.templ @@ -1,19 +1,8 @@ package sections -type Hero struct { - TitleFirst string - TitleEmphasis string - TitleSecond string - Subtitle string +import "github.com/onsonr/sonr/pkg/nebula/models" - PrimaryButtonText string - PrimaryButtonLink string - - SecondaryButtonText string - SecondaryButtonLink string -} - -templ SectionHero(hero Hero) { +templ SectionHero(hero *models.Hero) {
@@ -36,29 +25,29 @@ templ SectionHero(hero Hero) {

- { hero.PrimaryButtonText } + { hero.PrimaryButton.Text }
- { hero.SecondaryButtonText } + { hero.SecondaryButton.Text }
- @heroImage() + @heroImage(hero) @stats()
} -templ heroImage() { +templ heroImage(hero *models.Hero) {
Hero
diff --git a/pkg/nebula/components/sections/hero_templ.go b/pkg/nebula/components/sections/hero_templ.go index bc7188d63..86ef37c5d 100644 --- a/pkg/nebula/components/sections/hero_templ.go +++ b/pkg/nebula/components/sections/hero_templ.go @@ -8,20 +8,9 @@ package sections import "github.com/a-h/templ" import templruntime "github.com/a-h/templ/runtime" -type Hero struct { - TitleFirst string - TitleEmphasis string - TitleSecond string - Subtitle string +import "github.com/onsonr/sonr/pkg/nebula/models" - PrimaryButtonText string - PrimaryButtonLink string - - SecondaryButtonText string - SecondaryButtonLink string -} - -func SectionHero(hero Hero) templ.Component { +func SectionHero(hero *models.Hero) templ.Component { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { @@ -49,7 +38,7 @@ func SectionHero(hero Hero) templ.Component { var templ_7745c5c3_Var2 string templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(hero.TitleFirst) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 25, Col: 24} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 14, Col: 24} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2)) if templ_7745c5c3_Err != nil { @@ -62,7 +51,7 @@ func SectionHero(hero Hero) templ.Component { var templ_7745c5c3_Var3 string templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(hero.TitleEmphasis) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 27, Col: 28} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 16, Col: 28} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3)) if templ_7745c5c3_Err != nil { @@ -75,7 +64,7 @@ func SectionHero(hero Hero) templ.Component { var templ_7745c5c3_Var4 string templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(hero.TitleSecond) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 32, Col: 25} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 21, Col: 25} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) if templ_7745c5c3_Err != nil { @@ -88,7 +77,7 @@ func SectionHero(hero Hero) templ.Component { var templ_7745c5c3_Var5 string templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Subtitle) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 35, Col: 22} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 24, Col: 22} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) if templ_7745c5c3_Err != nil { @@ -98,7 +87,7 @@ func SectionHero(hero Hero) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - var templ_7745c5c3_Var6 templ.SafeURL = templ.SafeURL(hero.PrimaryButtonLink) + var templ_7745c5c3_Var6 templ.SafeURL = templ.SafeURL(hero.PrimaryButton.Href) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var6))) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err @@ -108,9 +97,9 @@ func SectionHero(hero Hero) templ.Component { return templ_7745c5c3_Err } var templ_7745c5c3_Var7 string - templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hero.PrimaryButtonText) + templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hero.PrimaryButton.Text) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 39, Col: 152} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 28, Col: 154} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) if templ_7745c5c3_Err != nil { @@ -120,7 +109,7 @@ func SectionHero(hero Hero) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - var templ_7745c5c3_Var8 templ.SafeURL = templ.SafeURL(hero.SecondaryButtonLink) + var templ_7745c5c3_Var8 templ.SafeURL = templ.SafeURL(hero.SecondaryButton.Href) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var8))) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err @@ -130,9 +119,9 @@ func SectionHero(hero Hero) templ.Component { return templ_7745c5c3_Err } var templ_7745c5c3_Var9 string - templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hero.SecondaryButtonText) + templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hero.SecondaryButton.Text) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 42, Col: 155} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 31, Col: 157} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9)) if templ_7745c5c3_Err != nil { @@ -142,7 +131,7 @@ func SectionHero(hero Hero) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = heroImage().Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = heroImage(hero).Render(ctx, templ_7745c5c3_Buffer) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -158,7 +147,7 @@ func SectionHero(hero Hero) templ.Component { }) } -func heroImage() templ.Component { +func heroImage(hero *models.Hero) templ.Component { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { @@ -179,7 +168,46 @@ func heroImage() templ.Component { templ_7745c5c3_Var10 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
\"Hero\"
") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
\"Hero\"
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -203,9 +231,9 @@ func stats() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var11 := templ.GetChildren(ctx) - if templ_7745c5c3_Var11 == nil { - templ_7745c5c3_Var11 = templ.NopComponent + templ_7745c5c3_Var14 := templ.GetChildren(ctx) + if templ_7745c5c3_Var14 == nil { + templ_7745c5c3_Var14 = templ.NopComponent } ctx = templ.ClearChildren(ctx) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("

0K

Assets packed with power beyond your imagination.

0K

Assets packed with power beyond your imagination.

0M+

Assets packed with power beyond your imagination.

") diff --git a/pkg/nebula/models/Footer.pkl.go b/pkg/nebula/models/Footer.pkl.go new file mode 100644 index 000000000..aa9aba0aa --- /dev/null +++ b/pkg/nebula/models/Footer.pkl.go @@ -0,0 +1,12 @@ +// Code generated from Pkl module `models`. DO NOT EDIT. +package models + +type Footer struct { + Logo *Image `pkl:"logo"` + + SocialLinks []*SocialLink `pkl:"socialLinks"` + + CompanyLinks []*Link `pkl:"companyLinks"` + + ResourcesLinks []*Link `pkl:"resourcesLinks"` +} diff --git a/pkg/nebula/models/Image.pkl.go b/pkg/nebula/models/Image.pkl.go index e694c93a5..9bacfa74f 100644 --- a/pkg/nebula/models/Image.pkl.go +++ b/pkg/nebula/models/Image.pkl.go @@ -4,7 +4,7 @@ package models type Image struct { Src string `pkl:"src"` - Width int `pkl:"width"` + Width string `pkl:"width"` - Height int `pkl:"height"` + Height string `pkl:"height"` } diff --git a/pkg/nebula/models/Models.pkl.go b/pkg/nebula/models/Models.pkl.go index c896a12be..03d42f033 100644 --- a/pkg/nebula/models/Models.pkl.go +++ b/pkg/nebula/models/Models.pkl.go @@ -8,6 +8,7 @@ import ( ) type Models struct { + Hero *Hero `pkl:"hero"` } // LoadFromPath loads the pkl module at the given path and evaluates it into a Models @@ -26,22 +27,6 @@ func LoadFromPath(ctx context.Context, path string) (ret *Models, err error) { return ret, err } -// LoadFromURL loads the pkl module at the given URL and evaluates it into a Models -func LoadFromURL(ctx context.Context, url string) (ret *Models, err error) { - evaluator, err := pkl.NewEvaluator(ctx, pkl.PreconfiguredOptions) - if err != nil { - return nil, err - } - defer func() { - cerr := evaluator.Close() - if err == nil { - err = cerr - } - }() - ret, err = Load(ctx, evaluator, pkl.UriSource(url)) - return ret, err -} - // Load loads the pkl module at the given source and evaluates it with the given evaluator into a Models func Load(ctx context.Context, evaluator pkl.Evaluator, source *pkl.ModuleSource) (*Models, error) { var ret Models diff --git a/pkg/nebula/models/common.go b/pkg/nebula/models/common.go index 2640e7f93..a0d1042d6 100644 --- a/pkg/nebula/models/common.go +++ b/pkg/nebula/models/common.go @@ -1 +1,36 @@ package models + +import ( + "context" + "errors" + + "github.com/apple/pkl-go/pkl" +) + +var models *Models + +func LoadFromString(ctx context.Context, s string) (err error) { + evaluator, err := pkl.NewEvaluator(ctx, pkl.PreconfiguredOptions) + if err != nil { + return err + } + defer func() { + cerr := evaluator.Close() + if err == nil { + err = cerr + } + }() + ret, err := Load(ctx, evaluator, pkl.TextSource(s)) + if err != nil { + return err + } + models = ret + return nil +} + +func GetModels() (*Models, error) { + if models == nil { + return nil, errors.New("models not initialized") + } + return models, nil +} diff --git a/pkg/nebula/models/init.pkl.go b/pkg/nebula/models/init.pkl.go index 97233e92d..9d4349aac 100644 --- a/pkg/nebula/models/init.pkl.go +++ b/pkg/nebula/models/init.pkl.go @@ -5,10 +5,11 @@ import "github.com/apple/pkl-go/pkl" func init() { pkl.RegisterMapping("models", Models{}) + pkl.RegisterMapping("models#Hero", Hero{}) + pkl.RegisterMapping("models#Button", Button{}) pkl.RegisterMapping("models#Image", Image{}) + pkl.RegisterMapping("models#Stat", Stat{}) pkl.RegisterMapping("models#Link", Link{}) pkl.RegisterMapping("models#SocialLink", SocialLink{}) - pkl.RegisterMapping("models#Button", Button{}) - pkl.RegisterMapping("models#Stat", Stat{}) - pkl.RegisterMapping("models#Hero", Hero{}) + pkl.RegisterMapping("models#Footer", Footer{}) } diff --git a/pkg/nebula/models/marketing.go b/pkg/nebula/models/marketing.go deleted file mode 100644 index 2640e7f93..000000000 --- a/pkg/nebula/models/marketing.go +++ /dev/null @@ -1 +0,0 @@ -package models diff --git a/pkg/nebula/nebula.go b/pkg/nebula/nebula.go index 055980c95..518eac2db 100644 --- a/pkg/nebula/nebula.go +++ b/pkg/nebula/nebula.go @@ -1,18 +1,21 @@ package nebula import ( + "context" "embed" "io/fs" "net/http" "github.com/labstack/echo/v4" + + "github.com/onsonr/sonr/pkg/nebula/models" ) //go:embed assets var embeddedFiles embed.FS //go:embed assets/config.pkl -var config []byte +var config string func getHTTPFS() (http.FileSystem, error) { fsys, err := fs.Sub(embeddedFiles, "assets") @@ -24,6 +27,10 @@ func getHTTPFS() (http.FileSystem, error) { // UseAssets is a middleware that serves static files from the embedded assets func UseAssets(e *echo.Echo) error { + err := models.LoadFromString(context.Background(), config) + if err != nil { + return err + } fsys, err := getHTTPFS() if err != nil { return err @@ -33,8 +40,3 @@ func UseAssets(e *echo.Echo) error { e.GET("/assets/*", echo.WrapHandler(http.StripPrefix("/assets/", assets))) return nil } - -// GetConfig is a middleware that serves the config file -func GetConfig(e echo.Context) error { - return e.Blob(http.StatusOK, "application/octet-stream", config) -} diff --git a/pkg/nebula/pages/home.templ b/pkg/nebula/pages/home.templ index f5817f642..48af4afe6 100644 --- a/pkg/nebula/pages/home.templ +++ b/pkg/nebula/pages/home.templ @@ -4,23 +4,18 @@ import ( "github.com/labstack/echo/v4" "github.com/onsonr/sonr/pkg/nebula/components/blocks" "github.com/onsonr/sonr/pkg/nebula/components/sections" + "github.com/onsonr/sonr/pkg/nebula/models" ) func Home(c echo.Context) error { - hero := sections.Hero{ - TitleFirst: "Simplified", - TitleEmphasis: "self-custody", - TitleSecond: "for everyone", - Subtitle: "Sonr is a modern re-imagination of online user identity, empowering users to take ownership of their digital footprint and unlocking a new era of self-sovereignty.", - PrimaryButtonText: "Get Started", - PrimaryButtonLink: "/register", - SecondaryButtonText: "Learn More", - SecondaryButtonLink: "/about", + mdls, err := models.GetModels() + if err != nil { + return err } - return echoResponse(c, homeView(hero)) + return echoResponse(c, homeView(mdls.Hero)) } -templ homeView(hero sections.Hero) { +templ homeView(hero *models.Hero) { @blocks.LayoutNoBody("Sonr.ID", true) { @sections.HeaderMarketingNav() @sections.SectionHero(hero) diff --git a/pkg/nebula/pages/home_templ.go b/pkg/nebula/pages/home_templ.go index 7cc378b56..410c9e28a 100644 --- a/pkg/nebula/pages/home_templ.go +++ b/pkg/nebula/pages/home_templ.go @@ -12,23 +12,18 @@ import ( "github.com/labstack/echo/v4" "github.com/onsonr/sonr/pkg/nebula/components/blocks" "github.com/onsonr/sonr/pkg/nebula/components/sections" + "github.com/onsonr/sonr/pkg/nebula/models" ) func Home(c echo.Context) error { - hero := sections.Hero{ - TitleFirst: "Simplified", - TitleEmphasis: "self-custody", - TitleSecond: "for everyone", - Subtitle: "Sonr is a modern re-imagination of online user identity, empowering users to take ownership of their digital footprint and unlocking a new era of self-sovereignty.", - PrimaryButtonText: "Get Started", - PrimaryButtonLink: "/register", - SecondaryButtonText: "Learn More", - SecondaryButtonLink: "/about", + mdls, err := models.GetModels() + if err != nil { + return err } - return echoResponse(c, homeView(hero)) + return echoResponse(c, homeView(mdls.Hero)) } -func homeView(hero sections.Hero) templ.Component { +func homeView(hero *models.Hero) templ.Component { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { diff --git a/pkl/uiux.pkl b/pkl/uiux.pkl index 81d0fa619..b84fcdfa8 100644 --- a/pkl/uiux.pkl +++ b/pkl/uiux.pkl @@ -6,8 +6,8 @@ import "package://pkg.pkl-lang.org/pkl-go/pkl.golang@0.5.0#/go.pkl" class Image { src: String - width: Int - height: Int + width: String + height: String } class Link { @@ -25,9 +25,13 @@ class Button { href: String } -class Stat { - value: String - label: String +class Stats { + firstValue: String + firstLabel: String + secondValue: String + secondLabel: String + thirdValue: String + thirdLabel: String } class Hero { @@ -38,7 +42,17 @@ class Hero { primaryButton: Button secondaryButton: Button image: Image - stats: List } +class Footer { + logo: Image + mediumLink: SocialLink + twitterLink: SocialLink + discordLink: SocialLink + githubLink: SocialLink + companyLinks: List + resourcesLinks: List +} +hero : Hero +stats : Stats