From 2678450ecf9143f48e5d07c83abe8d8f00e67e1f Mon Sep 17 00:00:00 2001 From: 3nprob <3nprob@3nprob> Date: Fri, 8 Oct 2021 16:38:43 +0900 Subject: [PATCH] Add user profile to user page --- src/fetchers.ts | 11 +++++++- src/handlers.ts | 8 ++++-- src/types/index.d.ts | 13 +++++++++ static/css/styles.css | 60 +++++++++++++++++++++++++++++++++++++++- templates/user-posts.pug | 13 +++++++-- 5 files changed, 98 insertions(+), 7 deletions(-) diff --git a/src/fetchers.ts b/src/fetchers.ts index 8e14d30..4b199fb 100644 --- a/src/fetchers.ts +++ b/src/fetchers.ts @@ -62,11 +62,20 @@ export const fetchComments = async (galleryID: string): Promise => { /* eslint-enable max-len */ } +export const fetchUserInfo = async (userID: string): Promise => { + // https://api.imgur.com/account/v1/accounts/hughjaniss?client_id=${CLIENT_ID} + const response = await got( + `https://api.imgur.com/account/v1/accounts/${userID.toLowerCase()}?client_id=${CONFIG.imgur_client_id}&include=`, + { agent } + ); + return JSON.parse(response.body); +} + export const fetchUserPosts = async (userID: string, sort: Sorting = 'newest'): Promise => { /* eslint-disable max-len */ // https://api.imgur.com/3/account/mombotnumber5/submissions/0/newest?album_previews=1&client_id=${CLIENT_ID} const response = await got( - `https://api.imgur.com/3/gallery/${userID.toLowerCase()}/submissions/0/${sort}?album_previews=1&client_id=${CONFIG.imgur_client_id}`, + `https://api.imgur.com/3/account/${userID.toLowerCase()}/submissions/0/${sort}?album_previews=1&client_id=${CONFIG.imgur_client_id}`, { agent } ); return JSON.parse(response.body).data; diff --git a/src/handlers.ts b/src/handlers.ts index 03b3fb4..3fcdb11 100644 --- a/src/handlers.ts +++ b/src/handlers.ts @@ -1,7 +1,9 @@ import Hapi = require('@hapi/hapi'); import '@hapi/vision'; -import { fetchAlbum, fetchAlbumURL, fetchComments, fetchGallery, fetchMedia, fetchTagPosts, fetchUserPosts } - from './fetchers'; +import +{ + fetchAlbum, fetchAlbumURL, fetchComments, fetchGallery, fetchMedia, fetchTagPosts, fetchUserInfo, fetchUserPosts +} from './fetchers'; import * as util from './util'; import CONFIG from './config'; @@ -42,9 +44,11 @@ export const handleUser = async (request: Hapi.Request, h: Hapi.ResponseToolkit) return 'User page disabled. Rimgu administrator needs to enable API for this to work.'; } const userID = request.params.userID; + const user = await fetchUserInfo(userID); const posts = await fetchUserPosts(userID); return h.view('user-posts', { posts, + user, pageTitle: CONFIG.page_title, util, }); diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 379fead..32c67c3 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -128,3 +128,16 @@ interface TagResult extends PostTag { success: boolean; status: number; } + +interface UserResult { + id: number; + username: string; + bio: string; + reputation_count: number; + reputation_name: string; + avatar_id: string; + avatar_url: string; + cover_id: string; + cover_url: string; + created_at: string; +} diff --git a/static/css/styles.css b/static/css/styles.css index 9824949..2f7c492 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -390,8 +390,66 @@ Post-item-title { max-height: 500px; } +/* USER HEADER */ -/* TAG PAGE */ +.ProfileMeta-stats { + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + margin-top: 8px; + cursor: default; +} + +.ProfileCover-header { + height: 258px; + /* padding: 52px 0 0; */ + padding: 52px 16px 0; + width: 100%; + margin: 0 auto; + min-width: 450px; + z-index: 1; +} + +.ProfileMeta { + display: flex; + justify-content: flex-start; +} + +.ProfileMeta .UserAvatar { + position: relative; + height: 128px; + width: 128px; + overflow: hidden; + flex-grow: 0; + flex-shrink: 0; +} + +.UserAvatar { + border-radius: 50%; + background: grey; + background-image: none; + background-size: cover; +} + +.ProfileMeta-data { + margin: auto 24px; + color: #f2f2f2; + overflow: hidden; +} + +.ProfileMeta-user { + font-size: 44px; + font-family: Proxima Nova ExtraBold,Helvetica Neue,Helvetica,Arial,sans-serif; + text-overflow: ellipsis; + overflow: hidden; +} + +.ProfileMeta-divider { + margin: auto 15px; +} + + +/* TAG HEADER */ .Cover-item-count { text-transform: uppercase; diff --git a/templates/user-posts.pug b/templates/user-posts.pug index d353e51..1e66dbc 100644 --- a/templates/user-posts.pug +++ b/templates/user-posts.pug @@ -11,7 +11,16 @@ html .Cover-stats .Cover-item-count #{tag.total_items} posts else if user - .App-cover.NewCover.ProfileCover + .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 @@ -54,5 +63,3 @@ html title Post views | .MediaBody= post.views - -