dot013/guz.one
1
0
Fork 0
Code Issues Pull Requests Activity

feat: blog section on homepage

Browse Source
This commit is contained in:
Gustavo "Guz" L. de Mello
2024-06-17 16:29:54 -03:00
parent 31174ea9a9
commit 92e83cd888
3 changed files with 126 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
components/blog.templ Normal file
View File

@@ -0,0 +1,48 @@
package components
import "strings"
type Blog struct {
Title string
Summary string
Link templ.SafeURL
}
templ BlogSummary(entry Blog) {
<article
aria-labelledby={ "blog-entry-" + strings.ReplaceAll(entry.Title, " ", "-") }
>
<h3
id={ "blog-entry-" + strings.ReplaceAll(entry.Title, " ", "-") }
class="font-cal text-xl"
>
{ entry.Title }
</h3>
<div class="relative w-fit h-fit">
<p class="line-clamp-3 text-justify text-light-gray">
{ entry.Summary }
</p>
<div
aria-hidden="true"
class="h-0 w-0 pointer-events-none bg-transparent!"
>
<div
class={ "absolute left-0 top-0 h-100% w-100% " +
"bg-transparent bg-gradient-to-t from-black/50" }
></div>
</div>
</div>
<div>
<a
class={ "transition-1s transition-color text-gray hover:text-light-gray no-underline " +
"hover:underline transform-gpu hover:-translate-y-0.2 transition-transform" }
href={ entry.Link }
>
Read all
<span
class="w-3 h-3 bg-gray hover:bg-light-gray i-solar:arrow-right-up-line-duotone inline-block"
></span>
</a>
</div>
</article>
}

39
config/routes.go
View File

@@ -64,6 +64,45 @@ var mockProjects = []components.Project{
},
}
var mockBlog = []components.Blog{
{
Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
Link: templ.URL("/001"),
},
{
Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
Link: templ.URL("/001"),
},
{
Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
Link: templ.URL("/001"),
},
{
Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
Link: templ.URL("/001"),
},
{
Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
Link: templ.URL("/001"),
},
{
Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
Link: templ.URL("/001"),
},
}
var images = []string{
"/images/image-1.png",
"/images/image-2.png",

39
pages/homepage.templ
View File

@@ -7,6 +7,7 @@ import (
type HomepageProps struct {
Projects []components.Project
Blogs []components.Blog
Images []string
}
@@ -147,6 +148,44 @@ templ Homepage(props HomepageProps) {
</div>
</div>
</section>
<section
aria-labelledby="blog-header"
id="blog"
class="w-screen min-h-screen flex justify-center items-center"
>
<div class="w-90% xl:w-50% max-h-60% snap-start">
<hgroup class="flex justify-between my-5">
<h2 id="blog-header" class="font-cal text-5xl m-0">Blog.</h2>
<p class="m-0">
<a
href="/blog"
class="decoration-none text-light-gray flex items-center"
>
See more
<span
class="w-5 h-5 bg-light-gray i-solar:arrow-right-up-line-duotone inline-block"
></span>
</a>
</p>
</hgroup>
<div
class={ "w-100% max-h-65vh md:max-h-70vh overflow-hidden " +
"md:grid grid-cols-2 gap-4" }
>
for i, blog := range props.Blogs {
if i < 2 {
<div class="">
@components.BlogSummary(blog)
</div>
} else if i < 4 {
<div class="hidden md:block">
@components.BlogSummary(blog)
</div>
}
}
</div>
</div>
</section>
</div>
<footer>
<div