lorenzhohermuth
/
portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Carousel Finished

This commit is contained in:
Lorenz Hohermuth 2024-04-05 11:33:59 +02:00
parent 3fa3755b05
commit 7a9db673fe
8 changed files with 73 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
cmd/main.go
View File

@ -7,9 +7,12 @@ import (
func main() {
app := echo.New()
index := 0
h := handler.Homehandler{}
h := handler.Homehandler{index}
app.GET("/", h.HandleUserShow)
app.POST("/carousel/next", handler.HtmxCarouselHandler{&index, 1}.HandlerCarouselUpdate)
app.POST("/carousel/previous", handler.HtmxCarouselHandler{&index, -1}.HandlerCarouselUpdate)
app.Static("/static", "assets")
app.Start(":3030")

25
internal/handler/handler.go
View File

@ -6,13 +6,30 @@ import (
"github.com/lorenzhohermuth/portfolio/view/page"
)
type Homehandler struct {}
type Homehandler struct {
Index int
}
func(h Homehandler) HandleUserShow(ctx echo.Context) error {
entrys := []component.CarouselEntry{
{"/static/test.jpg", "This is a Tree" , "I like Trees"},
{"/static/flower.jpeg", "This is a Tree" , "I like Trees"},
{"/static/paris.jpg", "This is a Tree" , "I like Trees"},
{"/static/flower.jpeg", "This is a Flower" , "I like Flowers"},
{"/static/paris.jpg", "This is the Eiffel Tower" , "I not like Franc"},
}
return render(ctx, page.ShowHome(entrys))
return render(ctx, page.ShowHome(entrys, h.Index))
}
type HtmxCarouselHandler struct {
Index *int
Direction int
}
func(h HtmxCarouselHandler) HandlerCarouselUpdate(ctx echo.Context) error {
entrys := []component.CarouselEntry{
{"/static/test.jpg", "This is a Tree" , "I like Trees"},
{"/static/flower.jpeg", "This is a Flower" , "I like Flowers"},
{"/static/paris.jpg", "This is the Eiffel Tower" , "I not like Franc"},
}
*h.Index += h.Direction
return render(ctx, component.Carousel(entrys, int(*h.Index)))
}

33
view/component/carousel.templ
View File

@ -6,33 +6,46 @@ type CarouselEntry struct {
Text string
}
func add(a int, b int) int {
return a + b
func getEntry(arr []CarouselEntry, index int) CarouselEntry {
newIndex := index
for newIndex < 0 {
newIndex += len(arr)
}
newIndex = newIndex % len(arr)
return arr[newIndex]
}
templ Carousel(elm []CarouselEntry , index int) {
<div>
<div id="carousel-parent">
<div class="flex items-center gap-x-13">
<div class="relative z-10">
<button class="top-1/2 left-0 border-none bg-transparent p-0 absolute -translate-y-1/2 bg-black ">
<img src={elm[index - 1].ImgPath} class="h-28 w-52 rounded object-cover"/>
<button class="top-1/2 left-0 border-none bg-transparent p-0 absolute -translate-y-1/2 bg-black "
hx-post="/carousel/previous"
hx-trigger="click"
hx-target="#carousel-parent"
>
<img src={getEntry(elm, index - 1).ImgPath} class="h-28 w-52 rounded object-cover"/>
</button>
</div>
<div class="relative text-center z-20">
<img src={elm[index].ImgPath} class="h-36 w-64 rounded object-cover"/>
<img src={getEntry(elm, index).ImgPath} class="h-36 w-64 rounded object-cover"/>
<div class="bg-gradient-to-t from-black/30 absolute bottom-0 left-0 h-36 w-64 rounded"></div>
<p class="absolute text-neutral-300 bottom-0.5 left-5">{elm[index].Title}</p>
<p class="absolute text-neutral-300 bottom-0.5 left-5">{getEntry(elm, index).Title}</p>
</div>
<div class="relative z-0">
<button class="top-1/2 right-0 border-none bg-transparent p-0 absolute -translate-y-1/2 ">
<img src={elm[index + 1].ImgPath} class="h-28 w-52 rounded object-cover"/>
<button class="top-1/2 right-0 border-none bg-transparent p-0 absolute -translate-y-1/2 "
hx-post="/carousel/next"
hx-trigger="click"
hx-target="#carousel-parent"
>
<img src={getEntry(elm, index + 1).ImgPath} class="h-28 w-52 rounded object-cover"/>
</button>
</div>
</div>
<p class="text-center font-thin">{elm[index].Text}</p>
<p class="text-center font-thin">{getEntry(elm, index).Text}</p>
</div>
}

33
view/component/carousel_templ.go
View File

@ -16,8 +16,13 @@ type CarouselEntry struct {
Text string
}
func add(a int, b int) int {
return a + b
func getEntry(arr []CarouselEntry, index int) CarouselEntry {
newIndex := index
for newIndex < 0 {
newIndex += len(arr)
}
newIndex = newIndex % len(arr)
return arr[newIndex]
}
func Carousel(elm []CarouselEntry, index int) templ.Component {
@ -33,14 +38,14 @@ func Carousel(elm []CarouselEntry, index int) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><div class=\"flex items-center gap-x-13\"><div class=\"relative z-10\"><button class=\"top-1/2 left-0 border-none bg-transparent p-0 absolute -translate-y-1/2 bg-black \"><img src=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"carousel-parent\"><div class=\"flex items-center gap-x-13\"><div class=\"relative z-10\"><button class=\"top-1/2 left-0 border-none bg-transparent p-0 absolute -translate-y-1/2 bg-black \" hx-post=\"/carousel/previous\" hx-trigger=\"click\" hx-target=\"#carousel-parent\"><img src=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(elm[index-1].ImgPath)
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(getEntry(elm, index-1).ImgPath)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 19, Col: 37}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 28, Col: 47}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
@ -51,9 +56,9 @@ func Carousel(elm []CarouselEntry, index int) templ.Component {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(elm[index].ImgPath)
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(getEntry(elm, index).ImgPath)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 24, Col: 32}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 33, Col: 42}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -64,22 +69,22 @@ func Carousel(elm []CarouselEntry, index int) templ.Component {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(elm[index].Title)
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(getEntry(elm, index).Title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 26, Col: 76}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 35, Col: 86}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div class=\"relative z-0\"><button class=\"top-1/2 right-0 border-none bg-transparent p-0 absolute -translate-y-1/2 \"><img src=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div class=\"relative z-0\"><button class=\"top-1/2 right-0 border-none bg-transparent p-0 absolute -translate-y-1/2 \" hx-post=\"/carousel/next\" hx-trigger=\"click\" hx-target=\"#carousel-parent\"><img src=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(elm[index+1].ImgPath)
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(getEntry(elm, index+1).ImgPath)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 31, Col: 37}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 44, Col: 47}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -90,9 +95,9 @@ func Carousel(elm []CarouselEntry, index int) templ.Component {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(elm[index].Text)
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(getEntry(elm, index).Text)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 36, Col: 51}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 49, Col: 61}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {

1
view/layout/base.templ
View File

@ -8,6 +8,7 @@ templ Base() {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Portfolio Lorenz Hohermuth</title>
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
</head>
<body class="m-0 p-0 font-mono font-black">

2
view/layout/base_templ.go
View File

@ -23,7 +23,7 @@ func Base() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Portfolio Lorenz Hohermuth</title><script src=\"https://cdn.jsdelivr.net/npm/@unocss/runtime\"></script></head><body class=\"m-0 p-0 font-mono font-black\"><nav class=\"flex w-full\"><div class=\"bg-orange-500 w-35 flex justify-center\"><img src=\"/static/robot.png\" height=\"70\"></div><div class=\"container bg-[#3331ee]\"><ul class=\"flex items-center justify-center h-full gap-x-4 p-0 list-none m-0\"><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#home\">Home</a></li><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#projects\">Projects</a></li><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#contact\">Work</a></li></ul></div></nav><main>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Portfolio Lorenz Hohermuth</title><script src=\"https://cdn.jsdelivr.net/npm/@unocss/runtime\"></script><script src=\"https://unpkg.com/htmx.org@1.9.11\" integrity=\"sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0\" crossorigin=\"anonymous\"></script></head><body class=\"m-0 p-0 font-mono font-black\"><nav class=\"flex w-full\"><div class=\"bg-orange-500 w-35 flex justify-center\"><img src=\"/static/robot.png\" height=\"70\"></div><div class=\"container bg-[#3331ee]\"><ul class=\"flex items-center justify-center h-full gap-x-4 p-0 list-none m-0\"><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#home\">Home</a></li><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#projects\">Projects</a></li><li><a class=\"no-underline text-[#ff5cdb]\" href=\"#contact\">Work</a></li></ul></div></nav><main>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

4
view/page/home.templ
View File

@ -3,14 +3,14 @@ package page
import "github.com/lorenzhohermuth/portfolio/view/layout"
import "github.com/lorenzhohermuth/portfolio/view/component"
templ ShowHome(arr []component.CarouselEntry) {
templ ShowHome(arr []component.CarouselEntry, index int) {
@layout.Base(){
<div class="h-80 bg-[#cdb4f6] flex justify-center items-center">
Intro
</div>
<div class="h-80 bg-[#ff5cdb] flex justify-center items-center">
@component.Carousel(arr, 1)
@component.Carousel(arr, index)
</div>
<div class="h-80 bg-[#1733d2] flex justify-center items-center">

4
view/page/home_templ.go
View File

@ -13,7 +13,7 @@ import "bytes"
import "github.com/lorenzhohermuth/portfolio/view/layout"
import "github.com/lorenzhohermuth/portfolio/view/component"
func ShowHome(arr []component.CarouselEntry) templ.Component {
func ShowHome(arr []component.CarouselEntry, index int) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
@ -36,7 +36,7 @@ func ShowHome(arr []component.CarouselEntry) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = component.Carousel(arr, 1).Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = component.Carousel(arr, index).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}