diff --git a/README.md b/README.md index 85f1539..7a331f3 100644 --- a/README.md +++ b/README.md @@ -27,15 +27,13 @@ Features: This is currently very early stage software. Some things left to implement (contributions welcome!): -- [ ] Streaming (currently media is downloaded in full in rimgu before it's returned) +- [x] Streaming (currently media is downloaded in full in rimgu before it's returned) - [ ] Localization/internationalization -- [ ] Pretty CSS styling (responsive?) -- [ ] Automatically fetch / rotate / renew client ID +- [x] Pretty CSS styling (responsive?) - [ ] Support for other popular image sites than only imgur - [ ] Filtering and exploration on user/tags pages - [ ] Responsive scaling of videos on user/tags pages -- [ ] Prometheus metrics -- [ ] Logo +- [x] Logo - [ ] SOCKS5 proxy support Things that are *currently* considered out of scope: diff --git a/api/album.go b/api/album.go index 6ef9948..780d861 100644 --- a/api/album.go +++ b/api/album.go @@ -26,12 +26,19 @@ func FetchAlbum(albumID string) (types.Album, error) { data := gjson.Parse(string(body)) - media := make([]string, 0) + media := make([]types.Media, 0) data.Get("media").ForEach( func(key gjson.Result, value gjson.Result) bool { url := value.Get("url").String() url = strings.ReplaceAll(url, "https://i.imgur.com", "/media") - media = append(media, url) + + media = append(media, types.Media{ + Id: value.Get("id").String(), + Name: value.Get("name").String(), + Title: value.Get("metadata.title").String(), + Description: value.Get("metadata.description").String(), + Url: url, + }) return true }, @@ -46,8 +53,6 @@ func FetchAlbum(albumID string) (types.Album, error) { Id: data.Get("id").String(), Title: data.Get("title").String(), Views: data.Get("view_count").Int(), - Upvotes: data.Get("upvote_count").Int(), - Downvotes: data.Get("downvote_count").Int(), CreatedAt: createdAt.Format("January 2, 2006 3:04 PM"), Media: media, }, nil diff --git a/main.go b/main.go index ea911e2..c253ac1 100644 --- a/main.go +++ b/main.go @@ -43,7 +43,7 @@ func main() { Root: http.FS(static.GetFiles()), })) - app.Get("/media/:baseName.:extension", pages.HandleMedia) + app.Get("/:baseName.:extension", pages.HandleMedia) app.Get("/a/:albumID", pages.HandleAlbum) app.Get("/t/:tagID", pages.HandleAlbum) /*app.Get("/user/:userID", pages.HandleUser) diff --git a/pages/album.go b/pages/album.go index ddf901f..aec0be0 100644 --- a/pages/album.go +++ b/pages/album.go @@ -16,5 +16,6 @@ func HandleAlbum(c *fiber.Ctx) error { return c.Render("gallery", fiber.Map{ "album": album, + "isAlbum": true, }) } diff --git a/static/css/album.css b/static/css/album.css index e69de29..80c56b7 100644 --- a/static/css/album.css +++ b/static/css/album.css @@ -0,0 +1,17 @@ +h1 { + margin: 0; +} + +img { + max-width: 100%; +} + +.imageMeta__wrapper, +.imageMeta { + display: flex; + gap: 12px; +} + +.imageMeta__wrapper { + gap: 2rem; +} \ No newline at end of file diff --git a/static/css/base.css b/static/css/base.css index 6b4e203..bc7a47f 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -1,11 +1,39 @@ +a { + text-decoration: none; +} + body { + background-color: black; + color: white; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; } -main { - margin: 0 18vw; +nav { + display: flex; + align-items: center; } -img { - max-width: 100%; +.logo { + filter: invert(1) hue-rotate(180deg); +} + +main { + margin: 0 24vw; +} + +footer { + display: flex; + justify-content: center; + flex-direction: row; + gap: 10px; +} + +@media only screen and (max-width: 812px) { + main { + margin: 0; + } + footer { + flex-direction: column; + text-align: center; + } } \ No newline at end of file diff --git a/static/fonts/Material-Icons-Outlined.css b/static/fonts/Material-Icons-Outlined.css new file mode 100644 index 0000000..f616471 --- /dev/null +++ b/static/fonts/Material-Icons-Outlined.css @@ -0,0 +1,22 @@ +/* fallback */ +@font-face { + font-family: 'Material Icons Outlined'; + font-style: normal; + font-weight: 400; + src: url(Material-Icons-Outlined.woff2) format('woff2'); +} + +.material-icons-outlined { + font-family: 'Material Icons Outlined'; + font-weight: normal; + font-style: normal; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -moz-font-feature-settings: 'liga'; + -moz-osx-font-smoothing: grayscale; +} diff --git a/static/fonts/Material-Icons-Outlined.woff2 b/static/fonts/Material-Icons-Outlined.woff2 new file mode 100644 index 0000000..f720d32 Binary files /dev/null and b/static/fonts/Material-Icons-Outlined.woff2 differ diff --git a/types/Album.go b/types/Album.go index b6c112c..8a476c4 100644 --- a/types/Album.go +++ b/types/Album.go @@ -8,5 +8,5 @@ type Album struct { Downvotes int64 CreatedAt string UpdatedAt string - Media []string + Media []Media } diff --git a/types/Media.go b/types/Media.go new file mode 100644 index 0000000..dc7cef8 --- /dev/null +++ b/types/Media.go @@ -0,0 +1,9 @@ +package types + +type Media struct { + Id string + Name string + Title string + Description string + Url string +} diff --git a/types/User.go b/types/User.go new file mode 100644 index 0000000..57d3624 --- /dev/null +++ b/types/User.go @@ -0,0 +1,8 @@ +package types + +type User struct { + Id string + Username string + Avatar string + CreatedAt string +} diff --git a/views/gallery.hbs b/views/gallery.hbs index 813fc86..a68132b 100644 --- a/views/gallery.hbs +++ b/views/gallery.hbs @@ -3,17 +3,52 @@ {{> partials/head }} + + + {{> partials/header }}
+

{{album.Title}}

+ +
+
+

visibility {{album.Views}}

+ {{#unless isAlbum}} +

thumb_up {{album.Upvotes}}

+

thumb_down {{album.Downvotes}}

+ {{/unless}} +
+ +
+ {{#each album.Media}} - + {{#if this.Title}} +

{{this.Title}}

+ {{/if}} + {{#if this.Description}} +

{{this.Description}}

+ {{/if}} + {{/each}}
+ + {{> partials/footer }} \ No newline at end of file diff --git a/views/gallery.pug b/views/gallery.pug deleted file mode 100644 index d393032..0000000 --- a/views/gallery.pug +++ /dev/null @@ -1,103 +0,0 @@ -mixin commentbox(comment) - div(class='GalleryComment') - div(class='GalleryComment-wrapper') - div(class='GalleryComment-content') - div(class='GalleryComment-byLine') - div(class='Meta') - div(class='GalleryComment-avatar-bar') - div(class='avatar') - if comment.account.username === '[deleted]' - span(title='[deleted]') - else - a(title='View profile of '+comment.account.username, href='/user/'+comment.account.username) - span(title=comment.account.username, style='background-image: url("' + util.proxyURL(comment.account.avatar) + '");') - a(class='author-name', title='View profile of '+comment.account.username, href='/user/'+comment.account.username) #{comment.account.username} - span(class="date", title=comment.created_at) - span(class="delimiter") • - span #{comment.created_at} via #{comment.platform} - div(class='GalleryComment-body') - span(class='Linkify') - | !{util.linkify(comment.comment)} - div(class='GalleryComment-actions') - div(class='vote-btn upvote actions-btn' title='Upvotes') - div(class='Vote Vote-up') - svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg') - title Upvotes - | - .points + #{comment.upvote_count} - div(class='vote-btn down actions-btn' title='Downvotes') - div(class='Vote Vote-down') - svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg') - title Downvotes - | - .points - #{comment.downvote_count} - .points = #{comment.point_count} - div(class='GalleryComment-replies') - each reply in comment.comments - +commentbox(reply) - -mixin media(m) - div(class='Gallery-Content--mediaContainer') - if m.type === 'video' - .PostVideo - .PostVideo-video-wrapper - video(controls) - source(type=m.mime_type src=util.proxyURL(m.url)) - else - div(class='Gallery-Content--media') - div(class='imageContainer') - img(src=util.proxyURL(m.url) title=m.name+' ['+m.metadata.created_at+']') - div(class='Gallery-Content--descr') - div(class='Gallery-Content--title') - span #{m.metadata.title || m.name} - span(class='delimiter') • - span #{m.created_at} - if m.updated_at - span(class='delimiter') • - span #{m.updated_at} - if m.metadata.description - span(class='Linkify') #{m.metadata.description} - -html - head - include includes/head.pug - body - include includes/header.pug - .App - .Gallery-MainContainer - .Gallery-contentWrapper - div(class='Gallery-Content') - div(class='Gallery-Header') - div(class='Gallery-Title') - span #{title} - div(class='Gallery-Byline') - if account_id > 0 - a(class='author-link' title='View profile of '+account.username, href='/user/'+account.username) - span(class='UserAvatar Avatar', title=account.username, style='background-image: url("' + util.proxyURL(account.avatar_url) + '");') - div(class='Info-Wrapper') - if account_id > 0 - div(class='Info') - a(class='author-name' title='View profile of '+account.username, href='/user/'+account.username) #{account.username} - div(class='Meta') - span #{view_count} Views - span(class='delimiter') • - span(title=created_at) #{created_at} - div(class='Gallery-ContentWrapper') - each m in media - +media(m) - if tags - div(class='Gallery-Content--tags') - each tag in tags - a(class='TagPill' - style='background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) repeat scroll 0% 0%, rgba(0, 0, 0, 0) url("/' + tag.background_id + '_d.jpg?maxwidth=200&fidelity=grand") repeat scroll 0% 0%;' - href='/t/'+tag.tag) #{tag.tag} - if comments != null - div(class='CommentsList') - div(class='CommentsList-headline') - div(class='CommentsList-headline--counter') - span #{comments.length} Comments - div - div(class='CommentsList-comments') - div(class='CommentsList-comments--container') - each comment in comments - +commentbox(comment) diff --git a/views/partials/footer.hbs b/views/partials/footer.hbs new file mode 100644 index 0000000..f6f4dff --- /dev/null +++ b/views/partials/footer.hbs @@ -0,0 +1,10 @@ +


+ + \ No newline at end of file diff --git a/views/partials/header.hbs b/views/partials/header.hbs index a723fdc..1876117 100644 --- a/views/partials/header.hbs +++ b/views/partials/header.hbs @@ -1,3 +1,4 @@ \ No newline at end of file