From aba74e1abc35f1d6cfdb0e5b1a74f45d08dad58c Mon Sep 17 00:00:00 2001 From: 3nprob <3nprob@3nprob> Date: Thu, 7 Oct 2021 02:47:10 +0900 Subject: [PATCH] Multi-album support --- src/fetchers.ts | 30 ++++++++++++--------- src/handlers.ts | 27 +++++++++++++------ static/css/styles.css | 17 ++++++++++++ templates/{album.pug => bare-album.pug} | 2 +- templates/gallery.pug | 35 ++++++++++++++++--------- 5 files changed, 77 insertions(+), 34 deletions(-) rename templates/{album.pug => bare-album.pug} (82%) diff --git a/src/fetchers.ts b/src/fetchers.ts index 89f7276..6ab9e3f 100644 --- a/src/fetchers.ts +++ b/src/fetchers.ts @@ -31,9 +31,26 @@ const agent = { : httpsGlobalAgent }; +export const fetchAlbumURL = async (albumID: string): Promise => { + // https://imgur.com/a/DfEsrAB + const response = await got(`https://imgur.com/a/${albumID}`, { agent }); + const $ = cheerio.load(response.body); + const url = $('head meta[property="og:image"]').attr('content')?.replace(/\/\?.*$/, ''); + if (!url) { + throw new Error('Could not read image url'); + } + return url; +}; + +export const fetchAlbum = async (albumID: string): Promise => { + // https://api.imgur.com/post/v1/albums/zk7mdKH?client_id=${CLIENT_ID}&include=media%2Caccount + const response = await got(`https://api.imgur.com/post/v1/albums/${albumID}?client_id=${CONFIG.imgur_client_id}&include=media%2Caccount`, { agent }); + return JSON.parse(response.body); +} + export const fetchComments = async (galleryID: string): Promise => { // https://api.imgur.com/comment/v1/comments?client_id=${CLIENT_ID}%5Bpost%5D=eq%3Ag1bk7CB&include=account%2Cadconfig&per_page=30&sort=best - const response = await got(`https://api.imgur.com/comment/v1/comments?client_id=${CONFIG.imgur_client_id}&filter%5Bpost%5D=eq%3A${galleryID}&include=account%2Cadconfig&per_page=30&sort=best`); + const response = await got(`https://api.imgur.com/comment/v1/comments?client_id=${CONFIG.imgur_client_id}&filter%5Bpost%5D=eq%3A${galleryID}&include=account%2Cadconfig&per_page=30&sort=best`, { agent }); return JSON.parse(response.body).data; } @@ -53,16 +70,5 @@ export const fetchGallery = async (galleryID: string): Promise => { return postData; }; -export const fetchAlbumURL = async (albumID: string): Promise => { - // https://imgur.com/a/DfEsrAB - const response = await got(`https://imgur.com/a/${albumID}`, { agent }); - const $ = cheerio.load(response.body); - const url = $('head meta[property="og:image"]').attr('content')?.replace(/\/\?.*$/, ''); - if (!url) { - throw new Error('Could not read image url'); - } - return url; -}; - export const fetchMedia = async (filename: string): Promise> => await got(`https://i.imgur.com/${filename}`, { agent }); diff --git a/src/handlers.ts b/src/handlers.ts index e5c565c..a30f97e 100644 --- a/src/handlers.ts +++ b/src/handlers.ts @@ -1,6 +1,6 @@ import Hapi = require('@hapi/hapi'); import '@hapi/vision'; -import { fetchAlbumURL, fetchComments, fetchGallery, fetchMedia } from './fetchers'; +import { fetchAlbum, fetchAlbumURL, fetchComments, fetchGallery, fetchMedia } from './fetchers'; import * as util from './util'; import CONFIG from './config'; @@ -18,12 +18,23 @@ export const handleMedia = async (request: Hapi.Request, h: Hapi.ResponseToolkit export const handleAlbum = async (request: Hapi.Request, h: Hapi.ResponseToolkit) => { // https://imgur.com/a/DfEsrAB - const url = await fetchAlbumURL(request.params.albumID); - return h.view('album', { - url, - title: CONFIG.page_title, - util, - }); + const albumID = request.params.albumID; + if (CONFIG.disable_comments) { + const url = await fetchAlbumURL(albumID); + return h.view('bare-album', { + url, + pageTitle: CONFIG.page_title, + util, + }); + } else { + const album = await fetchAlbum(albumID); + return h.view('gallery', { + ...album, + pageTitle: CONFIG.page_title, + util, + }); + + } }; export const handleUser = (request: Hapi.Request, h: Hapi.ResponseToolkit) => { @@ -45,7 +56,7 @@ export const handleGallery = async (request: Hapi.Request, h: Hapi.ResponseToolk return h.view('gallery', { ...gallery, comments, - title: CONFIG.page_title, + pageTitle: CONFIG.page_title, util, }); }; diff --git a/static/css/styles.css b/static/css/styles.css index 63dd333..c31c726 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -137,3 +137,20 @@ svg:not(:root) { font-size: 12px; line-height: 12px; } + +.Gallery-ContentWrapper .Gallery-Content--media { + max-width: 100%; + margin-bottom: 24px; + background-color: rgba(0,0,0,.1); + min-height: 140px; + display: flex; + justify-content: center; + align-items: center; + position: relative; +} + +.Gallery-ContentWrapper .Gallery-Content--mediaContainer { + display: flex; + flex-direction: column; + justify-content: center; +} diff --git a/templates/album.pug b/templates/bare-album.pug similarity index 82% rename from templates/album.pug rename to templates/bare-album.pug index 2c1109e..369891c 100644 --- a/templates/album.pug +++ b/templates/bare-album.pug @@ -1,6 +1,6 @@ html head - title #{title} + title #{pageTitle} include includes/head.pug body img(src=util.proxyURL(url), alt='' class='album-img') diff --git a/templates/gallery.pug b/templates/gallery.pug index b0dd378..f877aca 100644 --- a/templates/gallery.pug +++ b/templates/gallery.pug @@ -32,9 +32,16 @@ mixin commentbox(comment) div(class='GalleryComment-replies') each reply in comment.comments +commentbox(reply) + +mixin media(m) + div(class='Gallery-Content--mediaContainer') + div(class='Gallery-Content--media') + div(class='imageContainer') + img(src=util.proxyURL(m.url)) + html head - title #{title} + title #{pageTitle} include includes/head.pug body div(class='Gallery-Content') @@ -42,24 +49,26 @@ html div(class='Gallery-Title') span #{title} div(class='Gallery-Byline') - a(class='author-link' title='View profile of '+account.username, href='/user/'+account.username) - span(class='UserAvatar', title=account.username, style='background-image: url("' + util.proxyURL(account.avatar_url) + '");') + if account_id > 0 + a(class='author-link' title='View profile of '+account.username, href='/user/'+account.username) + span(class='UserAvatar', title=account.username, style='background-image: url("' + util.proxyURL(account.avatar_url) + '");') div(class='Info-Wrapper') - div(class='Info') - a(class='author-name' title='View profile of '+account.username, href='/user/'+account.username) #{account.username} + 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') - div(class='Gallery-Content--media') - div(class='imageContainer') - img(src=util.proxyURL(cover.url)) - 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} + 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')