Initial album support

2025-12-13 19:55:21 +00:00 · 2022-01-17 15:23:04 -05:00
parent 0c5f9bc6b5
commit 579cbc84c6
26 changed files with 1104 additions and 9098 deletions
--- a/views/embed.go
+++ b/views/embed.go
@@ -0,0 +1,10 @@
+package views
+
+import "embed"
+
+//go:embed *
+var files embed.FS
+
+func GetFiles() embed.FS {
+	return files
+}
--- a/views/gallery.hbs
+++ b/views/gallery.hbs
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  {{> partials/head }}
+</head>
+<body>
+  {{#each album.Media}}
+  <img src="{{this}}" loading="lazy">
+  {{/each}}
+</body>
+</html>
--- a/views/gallery.pug
+++ b/views/gallery.pug
@@ -0,0 +1,103 @@
+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 <span class="platform bold">#{comment.platform}</a>
+        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
+                | <path fill="none" stroke="#B4B9C2" stroke-width="2" fill-rule="evenodd" clip-rule="evenodd" d="M7.197 2.524a1.2 1.2 0 011.606 0c.521.46 1.302 1.182 2.363 2.243a29.617 29.617 0 012.423 2.722c.339.435.025 1.028-.526 1.028h-2.397v4.147c0 .524-.306.982-.823 1.064-.417.066-1.014.122-1.843.122s-1.427-.056-1.843-.122c-.517-.082-.824-.54-.824-1.064V8.517H2.937c-.552 0-.865-.593-.527-1.028.52-.669 1.32-1.62 2.423-2.722a52.996 52.996 0 012.364-2.243z"></path>
+          .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
+                | <path fill="none" stroke="#B4B9C2" stroke-width="2" fill-rule="evenodd" clip-rule="evenodd" d="M8.803 13.476a1.2 1.2 0 01-1.606 0 53.03 53.03 0 01-2.364-2.243 29.613 29.613 0 01-2.422-2.722c-.339-.435-.025-1.028.526-1.028h2.397V3.336c0-.524.306-.982.823-1.064A11.874 11.874 0 018 2.15c.829 0 1.427.056 1.843.122.517.082.824.54.824 1.064v4.147h2.396c.552 0 .865.593.527 1.028-.52.669-1.32 1.62-2.423 2.722a53.038 53.038 0 01-2.364 2.243z"></path>
+          .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)
--- a/views/partials/head.hbs
+++ b/views/partials/head.hbs
@@ -0,0 +1,20 @@
+<title>rimgu</title>
+
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<!--
+<link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon/favicon-16x16.png">
+<link rel="manifest" href="/static/manifest.json">
+<link rel="mask-icon" href="/static/favicon/safari-pinned-tab.svg" color="#5bbad5">
+<link rel="shortcut icon" href="/static/favicon/favicon.ico">
+<meta name="msapplication-TileColor" content="#2b5797">
+<meta name="msapplication-config" content="/static/favicon/browserconfig.xml">
+<meta name="theme-color" content="#ffffff">
+-->
+
+<link rel="stylesheet" href="/css/styles.css"/>
+<link rel="stylesheet" href="/css/custom.css"/>
--- a/views/partials/header.hbs
+++ b/views/partials/header.hbs
@@ -0,0 +1,3 @@
+<nav>
+  <h2>rimgu</h2>
+</nav>
--- a/views/posts.pug
+++ b/views/posts.pug
@@ -0,0 +1,67 @@
+html
+  head
+    include includes/head.pug
+  body
+    include includes/header.pug
+    .App
+      .Profile
+        if tag
+          .App-cover.NewCover.TagsCover(style='background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 20%), url("/' + tag.background_hash + '.jpg");')
+            .Cover-metadata
+              h1.Cover-name= tag.display_name
+              p.description= tag.description
+              .Cover-stats
+                .Cover-item-count #{tag.total_items} posts
+        else if user
+          .App-cover.NewCover.ProfilesCover(style='background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("' + util.proxyURL(user.cover_url) + '");')
+            .ProfileCover-header
+              .ProfileMeta
+                span.UserAvatar.ProfileMeta-avatar(style='background-image: url("' + util.proxyURL(user.avatar_url) + '");' title=user.username)
+                .ProfileMeta-data
+                  .ProfileMeta-user= user.username
+                  .ProfileMeta-stats
+                    | #{user.reputation_count} pts
+                    span.ProfileMeta-divider •
+                    | #{user.reputation_name}
+        .ProfilePosts-posts
+          .ProfilePosts-top
+            each post in posts
+              div.ProfilePost
+                a.Post-item.novote(href="/gallery/"+post.id)
+                  .Post-item-container
+                    .Post-item-media
+                        if post.images && post.images[0].animated
+                          .PostVideo
+                            .PostVideo-video-wrapper
+                              video(playsinline autoplay loop mute)
+                                source(type="video/mp4" src=util.proxyURL(post.images[0].mp4))
+                        else
+                          .imageContainer
+                            img(src=util.proxyURL(post.images ? post.images[0].link : post.link) loading="lazy")
+                    .Post-item-meta
+                    .Post-item-title-wrap
+                      .Post-item-title
+                        span= post.title
+                      .Post-item-info
+                        .Media
+                          div(class='Post-item-stat Post-item-vote' 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
+                                | <path fill="none" stroke="#B4B9C2" stroke-width="2" fill-rule="evenodd" clip-rule="evenodd" d="M7.197 2.524a1.2 1.2 0 011.606 0c.521.46 1.302 1.182 2.363 2.243a29.617 29.617 0 012.423 2.722c.339.435.025 1.028-.526 1.028h-2.397v4.147c0 .524-.306.982-.823 1.064-.417.066-1.014.122-1.843.122s-1.427-.056-1.843-.122c-.517-.082-.824-.54-.824-1.064V8.517H2.937c-.552 0-.865-.593-.527-1.028.52-.669 1.32-1.62 2.423-2.722a52.996 52.996 0 012.364-2.243z"></path>
+                          .points= post.points
+                          div(class='Post-item-stat Post-item-vote' 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
+                                | <path fill="none" stroke="#B4B9C2" stroke-width="2" fill-rule="evenodd" clip-rule="evenodd" d="M8.803 13.476a1.2 1.2 0 01-1.606 0 53.03 53.03 0 01-2.364-2.243 29.613 29.613 0 01-2.422-2.722c-.339-.435-.025-1.028.526-1.028h2.397V3.336c0-.524.306-.982.823-1.064A11.874 11.874 0 018 2.15c.829 0 1.427.056 1.843.122.517.082.824.54.824 1.064v4.147h2.396c.552 0 .865.593.527 1.028-.52.669-1.32 1.62-2.423 2.722a53.038 53.038 0 01-2.364 2.243z"></path>
+                        .Media.Post-item-stat
+                          svg(width="16" height="16" viewBox="0 0 16 16" class="PostCommentsIcon" fill="none" xmlns="http://www.w3.org/2000/svg")
+                            title Comments
+                            | <path fill="currentColor" stroke="#ffffff" stroke-width="0" d="M4.455 12.195l.367 1.105 1.037-.53c.266-.135.637-.412 1.039-.74.39-.319.872-.737 1.422-1.245h2.291a3.306 3.306 0 003.306-3.306V5.306A3.306 3.306 0 0010.611 2H5.306A3.306 3.306 0 002 5.306v2.656c0 1.34.933 2.461 2.185 2.75.008.172.025.335.046.479a6.622 6.622 0 00.168.803c.016.07.035.137.056.2z"></path>
+                          .MediaBody= post.comment_count
+                        .Media.Post-item-stat
+                          svg(width="16" height="16" viewBox="0 0 16 16" class="PostViewsIcon" fill="none" xmlns="http://www.w3.org/2000/svg")
+                            title Post views
+                            | <path d="M8 2.5C4.74998 2.5 2.30142 5.50267 1.27514 6.77517C0.925337 7.20917 0.908553 7.76483 1.2278 8.16583C2.22527 9.41833 4.6991 12.5 8 12.5C11.3686 12.5 13.8396 9.31133 14.796 8.0905C15.0769 7.732 15.0674 7.2535 14.7692 6.8755C13.7938 5.6395 11.3376 2.5 8 2.5ZM7.98224 9.33333C6.90897 9.33333 6.03887 8.51233 6.03887 7.5C6.03887 6.4875 6.90897 5.66667 7.98224 5.66667C9.05551 5.66667 9.92561 6.4875 9.92561 7.5C9.92561 8.51233 9.05551 9.33333 7.98224 9.33333Z" fill="currentColor"></path>
+                          .MediaBody= post.views