LJ jam feed basics

This commit is contained in:
Asaf Gartner 2024-03-11 18:27:34 +02:00
parent 5aa9dde8a1
commit 2eb3288b2a
4 changed files with 141 additions and 82 deletions

View File

@ -1,32 +1,44 @@
{{ template "jam_2024_learning_base.html" . }} {{ template "jam_2024_learning_base.html" . }}
{{ define "content-top" }} {{ define "content-top" }}
<div class="flex flex-column items-center pa3 g3"> <div class="mw7 margin-center">
<img class="mw5" src="{{ static "visjam2023/logo.svg" }}"> <div class="flex flex-column pv4 tc">
<div class="f1 fw7">The Learning Jam</div> <img class="jam-logo margin-center" src="{{ static "learningjam2024/logo.svg" }}">
<div class="flex flex-row g5 lh-solid"> <div class="margin-center mt3 mt4-ns mb4">
<div class="jam-title mb3">Learning Jam</div>
<div class="flex flex-column flex-row-ns justify-between lh-solid g3 g0-ns">
<div> <div>
<div class="fw7 f3">Learn</div> <div class="fw7 f3 mb1">Learn</div>
<div class="fw3 f4">March 15-17, 2024</div> <div class="fw3 f4">March 15-17, 2024</div>
</div> </div>
<div> <div>
<div class="fw7 f3">Teach</div> <div class="fw7 f3 mb1">Share</div>
<div class="fw3 f4">March 22-24, 2024</div> <div class="fw3 f4">March 22-24, 2024</div>
</div> </div>
</div> </div>
<div class="mt3"> </div>
<a href="{{ .DiscordInviteUrl }}" class="db ph2 pv1 button-simple">Join the Discord</a> <div class="flex g3 justify-center">
{{ if and (eq .DaysUntilStart 0) (gt .DaysUntilEnd 0) }}
{{ if .SubmittedProjectUrl }}
<a class="btn--jam" href="{{ .SubmittedProjectUrl }}">Share your progress</a>
{{ else }}
<a class="btn--jam" href="{{ .ProjectSubmissionUrl }}">Create your project</a>
{{ end }}
{{ end }}
<a href="{{ .DiscordInviteUrl }}" class="btn--jam">Join the Discord</a>
</div> </div>
</div> </div>
</div>
{{ end }} {{ end }}
{{ define "content" }} {{ define "content" }}
<div class="flex flex-column g3 items-center pa3"> <div class="mw7 margin-center flex flex-column">
<div class="w6"> <div class="ph3 pv4 bb b--rich-gray">
<h2 class="c--theme-gradient-light">Recent activity</h2> <h2 class="c--theme-gradient-light">Recent activity</h2>
<div class="flex flex-column g3"> <div class="flex flex-column g2">
{{ if .TimelineItems }} {{ if .TimelineItems }}
{{ range .TimelineItems }} {{ range .TimelineItems }}
<div class="flex flex-column g2 bg--rich-gray pa2"> <div class="flex flex-column g2 bg--rich-gray pa3">
<div class="flex flex-row g2"> <div class="flex flex-row g2">
{{ if .OwnerAvatarUrl }} {{ if .OwnerAvatarUrl }}
<a class="flex flex-shrink-0 br-100 square items-center justify-center overflow-hidden bg--gray" href="{{ .OwnerUrl }}"> <a class="flex flex-shrink-0 br-100 square items-center justify-center overflow-hidden bg--gray" href="{{ .OwnerUrl }}">
@ -69,6 +81,11 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
<div>
<div class="mv5 h3 fill-current">
<a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
</div>
</div>
</div> </div>
{{ end }} {{ end }}

View File

@ -1,35 +1,5 @@
{{ template "jam_2024_learning_base.html" . }} {{ template "jam_2024_learning_base.html" . }}
{{ define "extrahead" }}
<style>
.jam-logo {
max-width: 18rem;
}
.jam-title {
/* align with the width of the logo */
font-size: 2.76rem;
font-weight: 700;
/* align with the text's actual bounding box */
line-height: 1.18;
margin-top: -0.18em;
margin-left: -0.03em;
margin-right: -0.03em;
}
/* not small */
@media screen and (min-width: 35em) {
.jam-logo {
max-width: 24rem;
}
.jam-title {
font-size: 3.7rem;
}
}
</style>
{{ end }}
{{ define "content-top" }} {{ define "content-top" }}
<div class="mw7 margin-center"> <div class="mw7 margin-center">
<div class="flex flex-column pv4 tc"> <div class="flex flex-column pv4 tc">
@ -47,17 +17,19 @@
</div> </div>
</div> </div>
</div> </div>
{{ if lt .DaysUntilStart 0 }}
<div class="flex flex-row g3 mt2">
{{ if .SubmittedProjectUrl }}
<a class="db ph3 pv2 f4 button-simple" href="{{ .SubmittedProjectUrl }}">Share your progress</a>
{{ else }}
<a class="db ph3 pv2 f4 button-simple" href="{{ .ProjectSubmissionUrl }}">Create your project</a>
{{ end }}
<a class="db ph3 pv2 f4 button-simple" href="{{ .JamFeedUrl }}">Recent activity</a>
</div>
{{ end }}
<div class="flex g3 justify-center"> <div class="flex g3 justify-center">
{{ if eq .DaysUntilStart 0 }}
{{ if gt .DaysUntilEnd 0 }}
{{ if .SubmittedProjectUrl }}
<a class="btn--jam" href="{{ .SubmittedProjectUrl }}">Share your progress</a>
{{ else }}
<a class="btn--jam" href="{{ .ProjectSubmissionUrl }}">Create your project</a>
{{ end }}
<a class="btn--jam" href="{{ .JamFeedUrl }}">Recent activity</a>
{{ else }}
<a class="btn--jam" href="{{ .JamFeedUrl }}">See the results</a>
{{ end }}
{{ end }}
<a href="{{ .DiscordInviteUrl }}" class="btn--jam">Join the Discord</a> <a href="{{ .DiscordInviteUrl }}" class="btn--jam">Join the Discord</a>
</div> </div>
</div> </div>

View File

@ -175,6 +175,32 @@
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
} }
.jam-logo {
max-width: 18rem;
}
.jam-title {
/* align with the width of the logo */
font-size: 2.76rem;
font-weight: 700;
/* align with the text's actual bounding box */
line-height: 1.18;
margin-top: -0.18em;
margin-left: -0.03em;
margin-right: -0.03em;
}
/* not small */
@media screen and (min-width: 35em) {
.jam-logo {
max-width: 24rem;
}
.jam-title {
font-size: 3.7rem;
}
}
/* not small */ /* not small */
@media screen and (min-width: 35em) { @media screen and (min-width: 35em) {

View File

@ -104,7 +104,7 @@ func JamIndex2024_Learning(c *RequestContext) ResponseData {
tmpl.UserAvatarUrl = templates.UserAvatarUrl(c.CurrentUser, "dark") tmpl.UserAvatarUrl = templates.UserAvatarUrl(c.CurrentUser, "dark")
projects, err := hmndata.FetchProjects(c, c.Conn, c.CurrentUser, hmndata.ProjectsQuery{ projects, err := hmndata.FetchProjects(c, c.Conn, c.CurrentUser, hmndata.ProjectsQuery{
OwnerIDs: []int{c.CurrentUser.ID}, OwnerIDs: []int{c.CurrentUser.ID},
JamSlugs: []string{hmndata.WRJ2023.Slug}, JamSlugs: []string{hmndata.LJ2024.Slug},
Limit: 1, Limit: 1,
}) })
if err != nil { if err != nil {
@ -121,6 +121,50 @@ func JamIndex2024_Learning(c *RequestContext) ResponseData {
} }
func JamFeed2024_Learning(c *RequestContext) ResponseData { func JamFeed2024_Learning(c *RequestContext) ResponseData {
daysUntilStart := daysUntil(hmndata.LJ2024.StartTime)
daysUntilEnd := daysUntil(hmndata.LJ2024.EndTime)
baseData := getBaseDataAutocrumb(c, hmndata.LJ2024.Name)
baseData.OpenGraphItems = []templates.OpenGraphItem{
{Property: "og:title", Value: "Learning Jam"},
{Property: "og:site_name", Value: "Handmade Network"},
{Property: "og:type", Value: "website"},
{Property: "og:image", Value: hmnurl.BuildPublic("learningjam2024/2024LJOpenGraph.png", true)},
{Property: "og:description", Value: "A two-weekend jam where you dive deep into a topic, then teach it to the rest of the community."},
{Property: "og:url", Value: hmnurl.BuildJamFeed2024_Learning()},
{Name: "twitter:card", Value: "summary_large_image"},
{Name: "twitter:image", Value: hmnurl.BuildPublic("learningjam2024/2024LJTwitterCard.png", true)},
}
type JamFeedData struct {
templates.BaseData
UserAvatarUrl string
DaysUntilStart, DaysUntilEnd int
TwitchEmbedUrl string
ProjectSubmissionUrl string
SubmittedProjectUrl string
TimelineItems []templates.TimelineItem
}
twitchEmbedUrl := ""
twitchStatus, err := db.QueryOne[models.TwitchLatestStatus](c, c.Conn,
`
SELECT $columns
FROM twitch_latest_status
WHERE twitch_login = $1
`,
"handmadenetwork",
)
if err == nil {
if twitchStatus.Live {
hmnUrl, err := url.Parse(config.Config.BaseUrl)
if err == nil {
twitchEmbedUrl = fmt.Sprintf("https://player.twitch.tv/?channel=%s&parent=%s", twitchStatus.TwitchLogin, hmnUrl.Hostname())
}
}
}
jamProjects, err := hmndata.FetchProjects(c, c.Conn, c.CurrentUser, hmndata.ProjectsQuery{ jamProjects, err := hmndata.FetchProjects(c, c.Conn, c.CurrentUser, hmndata.ProjectsQuery{
JamSlugs: []string{hmndata.LJ2024.Slug}, JamSlugs: []string{hmndata.LJ2024.Slug},
}) })
@ -150,35 +194,35 @@ func JamFeed2024_Learning(c *RequestContext) ResponseData {
} }
} }
type JamFeedData struct { tmpl := JamFeedData{
templates.BaseData BaseData: baseData,
DaysUntilStart, DaysUntilEnd int UserAvatarUrl: templates.UserAvatarDefaultUrl("dark"),
DaysUntilStart: daysUntilStart,
TimelineItems []templates.TimelineItem DaysUntilEnd: daysUntilEnd,
TwitchEmbedUrl: twitchEmbedUrl,
ProjectSubmissionUrl: hmnurl.BuildProjectNewJam(),
SubmittedProjectUrl: "",
TimelineItems: timelineItems,
} }
daysUntilStart := daysUntil(hmndata.LJ2024.StartTime) if c.CurrentUser != nil {
daysUntilEnd := daysUntil(hmndata.LJ2024.EndTime) tmpl.UserAvatarUrl = templates.UserAvatarUrl(c.CurrentUser, "dark")
projects, err := hmndata.FetchProjects(c, c.Conn, c.CurrentUser, hmndata.ProjectsQuery{
baseData := getBaseDataAutocrumb(c, hmndata.LJ2024.Name) OwnerIDs: []int{c.CurrentUser.ID},
baseData.OpenGraphItems = []templates.OpenGraphItem{ JamSlugs: []string{hmndata.LJ2024.Slug},
{Property: "og:site_name", Value: "Handmade Network"}, Limit: 1,
{Property: "og:type", Value: "website"}, })
{Property: "og:image", Value: hmnurl.BuildPublic("learningjam2024/opengraph.png", true)}, if err != nil {
{Property: "og:description", Value: "Need desc"}, return c.ErrorResponse(http.StatusInternalServerError, oops.New(err, "failed to fetch jam projects for current user"))
{Property: "og:url", Value: hmnurl.BuildJamFeed2024_Learning()}, }
if len(projects) > 0 {
urlContext := hmndata.UrlContextForProject(&projects[0].Project)
tmpl.SubmittedProjectUrl = urlContext.BuildHomepage()
}
} }
var res ResponseData var res ResponseData
res.MustWriteTemplate("jam_2024_lj_feed.html", JamFeedData{ res.MustWriteTemplate("jam_2024_lj_feed.html", tmpl, c.Perf)
BaseData: baseData,
DaysUntilStart: daysUntilStart,
DaysUntilEnd: daysUntilEnd,
TimelineItems: timelineItems,
// ProjectSubmissionUrl: hmnurl.BuildProjectNewJam(),
// SubmittedProjectUrl: submittedProjectUrl,
// JamProjects: pageProjects,
}, c.Perf)
return res return res
} }