Write full types and fix related bugs

Also fixes #4.

src/site/api/routes.js

@@ -1,5 +1,5 @@
 const constants = require("../../lib/constants")
-const {fetchUser, fetchShortcode} = require("../../lib/collectors")
+const {fetchUser, getOrFetchShortcode} = require("../../lib/collectors")
 const {render} = require("pinski/plugins")
 
 module.exports = [
@@ -33,8 +33,9 @@ module.exports = [
 	},
 	{
 		route: `/p/(${constants.external.shortcode_regex})`, methods: ["GET"], code: async ({fill}) => {
-			const post = await fetchShortcode(fill[0])
-			await post.fetchExtendedOwner()
+			const post = await getOrFetchShortcode(fill[0])
+			await post.fetchChildren()
+			await post.fetchExtendedOwnerP() // parallel await is okay since intermediate fetch result is cached
 			return render(200, "pug/post.pug", {post})
 		}
 	}

src/site/pug/includes/timeline_page.pug

@@ -10,6 +10,6 @@ mixin timeline_page(page, pageIndex)
 		.timeline-inner
 			- const suggestedSize = 260 //- from css :(
 			each image in page
-				- const thumbnail = image.getSuggestedThumbnail(suggestedSize) //- use this as the src in case there are problems with srcset
+				- const thumbnail = image.getSuggestedThumbnailP(suggestedSize) //- use this as the src in case there are problems with srcset
 				a(href=`/p/${image.data.shortcode}`).sized-link
-					img(src=thumbnail.src alt=image.getAlt() width=thumbnail.config_width height=thumbnail.config_height srcset=image.getSrcset() sizes=image.getSizes()).sized-image
+					img(src=thumbnail.src alt=image.getAlt() width=thumbnail.config_width height=thumbnail.config_height srcset=image.getThumbnailSrcsetP() sizes=image.getThumbnailSizes()).sized-image

src/site/pug/post.pug

@@ -5,16 +5,22 @@ html
 	head
 		meta(charset="utf-8")
 		meta(name="viewport" content="width=device-width, initial-scale=1")
-		title= `${post.getIntroduction()} | Bibliogram`
+		title
+			if post.getCaptionIntroduction()
+				=post.getCaptionIntroduction()
+			else
+				=`Post from @${post.getBasicOwner().username}`
+			=` | Bibliogram`
 		link(rel="stylesheet" type="text/css" href="/static/css/main.css")
 		script(src="/static/js/pagination.js" type="module")
 	body.post-page
 		main.post-page-divider
 			section.description-section
 				header.user-header
-					img(src=post.proxyOwnerProfilePicture width=150 height=150 alt="").pfp
-					a.name(href=`/u/${post.extendedOwner.username}`)= `${post.extendedOwner.full_name} (@${post.extendedOwner.username})`
-				p.description= post.getCaption()
+					img(src=post.ownerPfpCacheP width=150 height=150 alt="").pfp
+					a.name(href=`/u/${post.getBasicOwner().username}`)= `${post.data.owner.full_name} (@${post.getBasicOwner().username})`
+				if post.getCaption()
+					p.description= post.getCaption()
 			section.images-gallery
-				for image in post.getChildren()
-					img(src=image.proxyDisplayURL alt=image.getAlt() width=image.data.dimensions.width height=image.data.dimensions.height).sized-image
+				for image in post.children
+					img(src=image.getDisplayUrlP() alt=image.getAlt() width=image.data.dimensions.width height=image.data.dimensions.height).sized-image

src/site/repl.js

@@ -1,5 +1,5 @@
 const {instance, pugCache, wss} = require("./passthrough")
-const {requestCache, timelineImageCache} = require("../lib/collectors")
+const {requestCache, timelineEntryCache} = require("../lib/collectors")
 const util = require("util")
 const repl = require("repl")
 const vm = require("vm")

src/site/sass/main.sass

@@ -95,7 +95,7 @@ body
 		--image-size: 120px
 
 	background-color: $background
-	padding: 15px 15px 12vh
+	padding: 15px 15px 40px
 
 	.page-number
 		color: #444
@@ -168,6 +168,11 @@ body
 		margin: 0 auto
 		min-height: 100vh
 
+		@media screen and (max-width: $layout-a-max)
+			display: flex
+			flex-direction: column
+
+
 		.description-section
 			display: grid
 			align-items: start
@@ -179,6 +184,11 @@ body
 			overflow-y: auto
 			box-sizing: border-box
 
+			@media screen and (max-width: $layout-a-max)
+				position: inherit
+				top: inherit
+				height: inherit
+
 			.user-header
 				display: flex
 				align-items: center
@@ -208,6 +218,9 @@ body
 				font-size: 20px
 				line-height: 1.4
 
+				@media screen and (max-width: $layout-a-max)
+					font-size: 18px
+
 		.images-gallery
 			display: flex
 			flex-direction: column
@@ -216,6 +229,9 @@ body
 			background-color: #262728
 			padding: 10px
 
+			@media screen and (max-width: $layout-a-max)
+				flex: 1
+
 			.sized-image
 				color: #eee
 				background-color: #3b3c3d