Timeline and projects for learning jam

This commit is contained in:
Asaf Gartner 2024-03-11 20:15:32 +02:00
parent 2eb3288b2a
commit 639ea17a88
6 changed files with 79 additions and 14 deletions

View File

@ -103,6 +103,9 @@ func ProjectToTemplate(
func ProjectAndStuffToTemplate(p *hmndata.ProjectAndStuff, url string, theme string) Project { func ProjectAndStuffToTemplate(p *hmndata.ProjectAndStuff, url string, theme string) Project {
res := ProjectToTemplate(&p.Project, url) res := ProjectToTemplate(&p.Project, url)
res.Logo = ProjectLogoUrl(&p.Project, p.LogoLightAsset, p.LogoDarkAsset, theme) res.Logo = ProjectLogoUrl(&p.Project, p.LogoLightAsset, p.LogoDarkAsset, theme)
for _, o := range p.Owners {
res.Owners = append(res.Owners, UserToTemplate(o, theme))
}
return res return res
} }

View File

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex g3 justify-center"> <div class="flex g3 justify-center link--white">
{{ if and (eq .DaysUntilStart 0) (gt .DaysUntilEnd 0) }} {{ if and (eq .DaysUntilStart 0) (gt .DaysUntilEnd 0) }}
{{ if .SubmittedProjectUrl }} {{ if .SubmittedProjectUrl }}
<a class="btn--jam" href="{{ .SubmittedProjectUrl }}">Share your progress</a> <a class="btn--jam" href="{{ .SubmittedProjectUrl }}">Share your progress</a>
@ -33,26 +33,53 @@
{{ define "content" }} {{ define "content" }}
<div class="mw7 margin-center flex flex-column"> <div class="mw7 margin-center flex flex-column">
<div class="ph3 pv4 bb b--rich-gray">
<h2 class="c--theme-gradient-light">Projects</h2>
<div class="flex flex-row flex-wrap g2">
{{ if .Projects }}
{{ range .Projects }}
<div class="flex-basis-40-ns flex-grow-1 flex-shrink-1 bg--rich-gray pa3 flex flex-column g1">
<div class="f3">
<a href="{{ .Url }}" class="fw6">{{ .Name }}</a>
</div>
<div class="flex-grow-1">{{ .Blurb }}</div>
<div class="f7">
by
{{ $owners := .Owners }}
{{ range $idx, $owner := .Owners }}
<a href="{{ $owner.ProfileUrl }}" class="fw6 link--white">{{ $owner.Name }}</a>{{ if not (lastidx $idx (len $owners)) }},{{ end }}
{{ end }}
</div>
</div>
{{ end }}
{{ if isodd (len .Projects) }}
<div class="flex-basis-40-ns flex-grow-1 flex-shrink-1"></div>
{{ end }}
{{ end }}
</div>
</div>
<div class="ph3 pv4 bb b--rich-gray"> <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 g2"> <div class="flex flex-column g2">
{{ if .TimelineItems }} {{ if .TimelineItems }}
{{ range .TimelineItems }} {{ range .TimelineItems }}
<div class="flex flex-column g2 bg--rich-gray pa3"> <div class="flex flex-column g3 bg--rich-gray pa3">
<div class="flex flex-row g2"> <div class="flex flex-row g3 items-start">
{{ 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 }}">
<img class="w2" src="{{ .OwnerAvatarUrl }}" /> <img class="w2-5" src="{{ .OwnerAvatarUrl }}" />
</a> </a>
{{ end }} {{ end }}
<div class="flex flex-column"> <div class="flex flex-column">
<div class="fw6">{{ .OwnerName }}</div> <div class="">
<div class="f7">{{ timehtml (relativedate .Date) .Date }}</div> <a title="{{ (index .Projects 0).Blurb }}" href="{{ (index .Projects 0).Url }}" class="link--white fw6">{{ (index .Projects 0).Name }}</a>
by
<a href="{{ .OwnerUrl }}" class="link--white fw6">{{ .OwnerName }}</a>
<span class="f7 c--gray nowrap">{{ timehtml (relativedate .Date) .Date }}</span>
</div> </div>
</div>
{{ if .Description }}
<div>{{ trim .Description }}</div> <div>{{ trim .Description }}</div>
{{ end }} </div>
</div>
{{ range .EmbedMedia }} {{ range .EmbedMedia }}
<div class="flex flex-column {{ if eq .Type mediaembed }}wide-screen{{ end }} justify-stretch iframe-fill"> <div class="flex flex-column {{ if eq .Type mediaembed }}wide-screen{{ end }} justify-stretch iframe-fill">
{{ if eq .Type mediaimage }} {{ if eq .Type mediaimage }}
@ -69,7 +96,7 @@
{{ .EmbedHTML }} {{ .EmbedHTML }}
{{ else }} {{ else }}
<div class=""> <div class="">
<a href="{{ .AssetUrl }}" target="_blank">{{ .Filename }} ({{ filesize .FileSize }})</a> <a href="{{ .AssetUrl }}" target="_blank">💾{{ .Filename }} ({{ filesize .FileSize }})</a>
</div> </div>
{{ end }} {{ end }}
</div> </div>
@ -82,7 +109,7 @@
</div> </div>
</div> </div>
<div> <div>
<div class="mv5 h3 fill-current"> <div class="mv5 h3 fill-current link--white">
<a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a> <a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
</div> </div>
</div> </div>

View File

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex g3 justify-center"> <div class="flex g3 justify-center link--white">
{{ if eq .DaysUntilStart 0 }} {{ if eq .DaysUntilStart 0 }}
{{ if gt .DaysUntilEnd 0 }} {{ if gt .DaysUntilEnd 0 }}
{{ if .SubmittedProjectUrl }} {{ if .SubmittedProjectUrl }}

View File

@ -54,6 +54,8 @@
--spacing-6: 8rem; --spacing-6: 8rem;
--spacing-7: 16rem; --spacing-7: 16rem;
--border-radius-2: 0.25rem; --border-radius-2: 0.25rem;
--link-color: #8Bd5FF;
} }
body { body {
@ -65,6 +67,14 @@
font-weight: 700; font-weight: 700;
} }
.w2-5 {
width: 3rem;
}
.link--white {
--link-color: var(--white);
}
.post-content p { .post-content p {
/* stupid override, should be done by .post-content instead of .content */ /* stupid override, should be done by .post-content instead of .content */
margin: 0.6rem 0; margin: 0.6rem 0;
@ -90,6 +100,10 @@
background: var(--gray); background: var(--gray);
} }
.b--charcoal {
border-color: var(--charcoal);
}
.b--rich-gray { .b--rich-gray {
border-color: var(--rich-gray); border-color: var(--rich-gray);
} }
@ -108,6 +122,10 @@
color: transparent; color: transparent;
} }
.c--gray {
color: var(--gray);
}
.btn--jam { .btn--jam {
border: 1px solid var(--white); border: 1px solid var(--white);
border-radius: var(--border-radius-2); border-radius: var(--border-radius-2);
@ -203,7 +221,9 @@
/* not small */ /* not small */
@media screen and (min-width: 35em) { @media screen and (min-width: 35em) {
.flex-basis-40-ns {
flex-basis: 40%;
}
} }
</style> </style>
@ -212,7 +232,7 @@
<body class="bg--charcoal flex flex-column"> <body class="bg--charcoal flex flex-column">
<div class="c-white bg--theme-gradient-dark"> <div class="c-white bg--theme-gradient-dark">
<div class="bg-black-20 flex flex-row items-center"> <div class="bg-black-20 flex flex-row items-center link--white">
<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0"> <a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
Handmade Handmade
</a> </a>

View File

@ -287,6 +287,12 @@ var HMNTemplateFuncs = template.FuncMap{
"trim": func(str template.HTML) template.HTML { "trim": func(str template.HTML) template.HTML {
return template.HTML(strings.TrimSpace(string(str))) return template.HTML(strings.TrimSpace(string(str)))
}, },
"lastidx": func(idx int, l int) bool {
return idx == l-1
},
"isodd": func(num int) bool {
return num%2 == 1
},
// NOTE(asaf): Template specific functions: // NOTE(asaf): Template specific functions:
"projectcarddata": func(project Project, classes string) ProjectCardData { "projectcarddata": func(project Project, classes string) ProjectCardData {

View File

@ -144,6 +144,7 @@ func JamFeed2024_Learning(c *RequestContext) ResponseData {
ProjectSubmissionUrl string ProjectSubmissionUrl string
SubmittedProjectUrl string SubmittedProjectUrl string
Projects []templates.Project
TimelineItems []templates.TimelineItem TimelineItems []templates.TimelineItem
} }
@ -194,6 +195,13 @@ func JamFeed2024_Learning(c *RequestContext) ResponseData {
} }
} }
projects := make([]templates.Project, 0, len(jamProjects))
for _, jp := range jamProjects {
urlContext := hmndata.UrlContextForProject(&jp.Project)
projectUrl := urlContext.BuildHomepage()
projects = append(projects, templates.ProjectAndStuffToTemplate(&jp, projectUrl, c.Theme))
}
tmpl := JamFeedData{ tmpl := JamFeedData{
BaseData: baseData, BaseData: baseData,
UserAvatarUrl: templates.UserAvatarDefaultUrl("dark"), UserAvatarUrl: templates.UserAvatarDefaultUrl("dark"),
@ -202,6 +210,7 @@ func JamFeed2024_Learning(c *RequestContext) ResponseData {
TwitchEmbedUrl: twitchEmbedUrl, TwitchEmbedUrl: twitchEmbedUrl,
ProjectSubmissionUrl: hmnurl.BuildProjectNewJam(), ProjectSubmissionUrl: hmnurl.BuildProjectNewJam(),
SubmittedProjectUrl: "", SubmittedProjectUrl: "",
Projects: projects,
TimelineItems: timelineItems, TimelineItems: timelineItems,
} }