nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Man whatever

This commit is contained in:
Ben Visness 2024-06-23 08:40:50 -05:00
parent a0bd55f3d2
commit 81cb17b6eb
6 changed files with 133 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/style.css
View File

@ -7162,17 +7162,17 @@ code {
--dim-color: #333;
--dimmer-color: #999;
--dimmest-color: #bbb;
--theme-color: #666;
--theme-color-dim: #aaa;
--theme-color-dimmer: #bbb;
--theme-color-dimmest: #ccc;
--theme-color: #b1b1b1;
--theme-color-dim: #c0c0c0;
--theme-color-dimmer: #dddddd;
--theme-color-dimmest: #f0f0f0;
--theme-color-dark: #666;
--theme-color-light: #666;
--main-background-color: #f8f8f8;
--main-background-color-transparent: rgba(#f8f8f8, 0);
--card-background: #494949;
--card-background-hover: #333;
--card-background-transparent: #242424D8;
--card-background: #ebebeb;
--card-background-hover: #f1f1f1;
--card-background-transparent: #ebebeb00;
--bg-1: #f8f8f8;
--bg-2: #e8e8e8;
--bg-3: #d8d8d8;
@ -7213,7 +7213,7 @@ code {
--main-background-color-transparent: rgba(#202020, 0);
--card-background: #494949;
--card-background-hover: #333;
--card-background-transparent: #242424D8;
--card-background-transparent: #24242400;
--bg-1: #1f1f1f;
--bg-2: #2f2f2f;
--bg-3: #494949;

16
src/rawdata/scss/vars.css
View File

@ -19,10 +19,10 @@ $breakpoint-large: screen and (min-width: 60em)
--dimmest-color: #bbb;
/* Default theme colors in case the project.css is busted */
--theme-color: #666;
--theme-color-dim: #aaa;
--theme-color-dimmer: #bbb;
--theme-color-dimmest: #ccc;
--theme-color: #b1b1b1;
--theme-color-dim: #c0c0c0;
--theme-color-dimmer: #dddddd;
--theme-color-dimmest: #f0f0f0;
--theme-color-dark: #666;
--theme-color-light: #666;
@ -30,9 +30,9 @@ $breakpoint-large: screen and (min-width: 60em)
--main-background-color: #f8f8f8;
--main-background-color-transparent: rgba(#f8f8f8, 0);
--card-background: #494949;
--card-background-hover: #333;
--card-background-transparent: #242424D8;
--card-background: #ebebeb;
--card-background-hover: #f1f1f1;
--card-background-transparent: #ebebeb00;
--bg-1: #f8f8f8;
--bg-2: #e8e8e8;
@ -89,7 +89,7 @@ $breakpoint-large: screen and (min-width: 60em)
/* --card-background: #282828; */
--card-background: #494949;
--card-background-hover: #333;
--card-background-transparent: #242424D8;
--card-background-transparent: #24242400;
--bg-1: #1f1f1f;
--bg-2: #2f2f2f;

8
src/templates/src/include/timeline_item.html
View File

@ -3,7 +3,7 @@
<div class="flex items-center">
{{ if .OwnerAvatarUrl }}
<a class="flex flex-shrink-0" href="{{ .OwnerUrl }}">
<img class="avatar avatar-user {{ if not .SmallInfo }}big{{ end }} {{ if .SmallInfo }}mr2{{ else }}mr3{{ end }}" src="{{ .OwnerAvatarUrl }}" />
<img class="avatar avatar-user {{ if .SmallInfo }}avatar-small mr2{{ else }}mr3{{ end }}" src="{{ .OwnerAvatarUrl }}" />
</a>
{{ end }}
@ -37,7 +37,7 @@
{{/* content */}}
{{ range .EmbedMedia }}
<div class="timeline-content-box mt3 {{ if eq .Type mediaembed }}embed{{ end }} br2 overflow-hidden flex {{ if not (eq .Type mediaunknown) }}timeline-item-bg justify-center{{ end }}">
<div class="timeline-content-box mt3 {{ if eq .Type mediaembed }}embed{{ end }} overflow-hidden flex {{ if not (eq .Type mediaunknown) }}timeline-item-bg justify-center{{ end }}">
{{ if eq .Type mediaimage }}
<img src="{{ .AssetUrl }}">
{{ else if eq .Type mediavideo }}
@ -51,7 +51,7 @@
{{ else if eq .Type mediaembed }}
{{ .EmbedHTML }}
{{ else }}
<div class="project-card br2 pv1 ph2">
<div class="project-card pv1 ph2">
<a href="{{ .AssetUrl }}" target="_blank">{{ .Filename }} ({{ filesize .FileSize }})</a>
</div>
{{ end }}
@ -75,7 +75,7 @@
{{ with .Projects }}
<div class="mt3 flex g2 projects">
{{ range $i, $proj := . }}
<a data-projid="{{ $proj.ID }}" href="{{ $proj.Url }}" class="snippet-project flex flex-row items-center bg-theme-dimmer ph2 pv1 br2">
<a data-projid="{{ $proj.ID }}" href="{{ $proj.Url }}" class="snippet-project flex flex-row items-center bg-theme-dimmer ph2 pv1">
<img src="{{ $proj.Logo }}" class="db mr1 br1 h1-5" />
<div>{{ $proj.Name }}</div>
</a>

8
src/templates/src/style_test.html
View File

@ -210,5 +210,11 @@ int main() {
</div>
</div>
<div class="h5"></div>
<h1 class="mt3 mb2">Timeline items</h1>
<div class="hmn-form pa3 ba b--theme-dim flex flex-column g3">
{{ range .TestTimelineItems }}
{{ template "timeline_item.html" . }}
{{ end }}
</div>
</body>

3
src/templates/types.go
View File

@ -337,8 +337,7 @@ type TimelineItem struct {
Description template.HTML
RawDescription string
PreviewMedia TimelineItemMedia
EmbedMedia []TimelineItemMedia
EmbedMedia []TimelineItemMedia
SmallInfo bool
AllowTitleWrap bool

106
src/website/debug.go
View File

@ -1,7 +1,111 @@
package website
import (
"time"
"git.handmade.network/hmn/hmn/src/templates"
)
func StyleTest(c *RequestContext) ResponseData {
type tmpl struct {
TestTimelineItems []templates.TimelineItem
}
var res ResponseData
res.MustWriteTemplate("style_test.html", nil, c.Perf)
res.MustWriteTemplate("style_test.html", tmpl{
TestTimelineItems: []templates.TimelineItem{
// Forum post
{
OwnerName: "Cool User",
OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"),
Date: time.Now().Add(-5 * time.Second),
Breadcrumbs: []templates.Breadcrumb{
{Name: "Project"},
{Name: "Forums"},
{Name: "Subforum"},
},
TypeTitle: "New forum post",
Title: "How can I a website?",
},
// Blog post
// Snippet
{
SmallInfo: true,
OwnerName: "Cool User",
OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"),
Date: time.Date(2022, 3, 20, 13, 32, 54, 0, time.UTC),
Url: "test",
DiscordMessageUrl: "test",
EmbedMedia: []templates.TimelineItemMedia{
{
Type: templates.TimelineItemMediaTypeImage,
AssetUrl: "https://assets.media.handmade.network/32ff3e7e-1d9c-4740-a062-1f8bec2e44cf/unknown.png",
},
},
},
// Snippet with embed
{
SmallInfo: true,
OwnerName: "Cool User",
OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"),
Date: time.Date(2021, 4, 3, 1, 44, 54, 0, time.UTC),
Url: "test",
DiscordMessageUrl: "test",
EmbedMedia: []templates.TimelineItemMedia{
youtubeMediaItem("FN9hZcTB16g"),
},
Projects: []templates.Project{
{Name: "Cool Project", Logo: templates.UserAvatarDefaultUrl("light")},
},
},
// Snippet with two images & multiple projects
{
SmallInfo: true,
OwnerName: "Cool User",
OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"),
Date: time.Now().Add(-2 * 24 * time.Hour),
Url: "test",
DiscordMessageUrl: "test",
EmbedMedia: []templates.TimelineItemMedia{
{
Type: templates.TimelineItemMediaTypeImage,
AssetUrl: "https://assets.media.handmade.network/979d8850-f6b6-44b4-984e-93be82eb492b/PBR_WIP_20240620_01.png",
},
{
Type: templates.TimelineItemMediaTypeImage,
AssetUrl: "https://assets.media.handmade.network/4cd4335d-c977-464b-994c-bda5a9b44b09/PBR_WIP_20240619_01.png",
},
},
Projects: []templates.Project{
{Name: "Cool Project", Logo: templates.UserAvatarDefaultUrl("light")},
{Name: "Uncool Project"},
},
},
// Snippet with a video and an image
{
SmallInfo: true,
OwnerName: "Cool User",
OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"),
Date: time.Now().Add(-2 * time.Hour),
Url: "test",
DiscordMessageUrl: "test",
EmbedMedia: []templates.TimelineItemMedia{
{
Type: templates.TimelineItemMediaTypeImage,
AssetUrl: "https://assets.media.handmade.network/979d8850-f6b6-44b4-984e-93be82eb492b/PBR_WIP_20240620_01.png",
},
{
Type: templates.TimelineItemMediaTypeImage,
AssetUrl: "https://assets.media.handmade.network/4cd4335d-c977-464b-994c-bda5a9b44b09/PBR_WIP_20240619_01.png",
},
},
Projects: []templates.Project{
{Name: "Cool Project", Logo: templates.UserAvatarDefaultUrl("light")},
{Name: "Uncool Project"},
},
},
// Snippet with every type of embed at once
},
}, c.Perf)
return res
}