Create post viewer

src/site/api/routes.js

@@ -1,30 +1,41 @@
 const constants = require("../../lib/constants")
-const {fetchUser} = require("../../lib/collectors")
+const {fetchUser, fetchShortcode} = require("../../lib/collectors")
 const {render} = require("pinski/plugins")
 
 module.exports = [
-	{route: `/u/(${constants.external.username_regex})`, methods: ["GET"], code: async ({url, fill}) => {
-		const params = url.searchParams
-		const user = await fetchUser(fill[0])
-		const page = +params.get("page")
-		if (typeof page === "number" && !isNaN(page) && page >= 1) {
-			await user.timeline.fetchUpToPage(page - 1)
+	{
+		route: `/u/(${constants.external.username_regex})`, methods: ["GET"], code: async ({url, fill}) => {
+			const params = url.searchParams
+			const user = await fetchUser(fill[0])
+			const page = +params.get("page")
+			if (typeof page === "number" && !isNaN(page) && page >= 1) {
+				await user.timeline.fetchUpToPage(page - 1)
+			}
+			return render(200, "pug/user.pug", {url, user})
 		}
-		return render(200, "pug/user.pug", {url, user})
-	}},
-	{route: `/fragment/user/(${constants.external.username_regex})/(\\d+)`, methods: ["GET"], code: async ({url, fill}) => {
-		const user = await fetchUser(fill[0])
-		const pageNumber = +fill[1]
-		const pageIndex = pageNumber - 1
-		await user.timeline.fetchUpToPage(pageIndex)
-		if (user.timeline.pages[pageIndex]) {
-			return render(200, "pug/fragments/timeline_page.pug", {page: user.timeline.pages[pageIndex], pageIndex, user, url})
-		} else {
-			return {
-				statusCode: 400,
-				contentType: "text/html",
-				content: "That page does not exist"
+	},
+	{
+		route: `/fragment/user/(${constants.external.username_regex})/(\\d+)`, methods: ["GET"], code: async ({url, fill}) => {
+			const user = await fetchUser(fill[0])
+			const pageNumber = +fill[1]
+			const pageIndex = pageNumber - 1
+			await user.timeline.fetchUpToPage(pageIndex)
+			if (user.timeline.pages[pageIndex]) {
+				return render(200, "pug/fragments/timeline_page.pug", {page: user.timeline.pages[pageIndex], pageIndex, user, url})
+			} else {
+				return {
+					statusCode: 400,
+					contentType: "text/html",
+					content: "That page does not exist"
+				}
 			}
 		}
-	}}
+	},
+	{
+		route: `/p/(${constants.external.shortcode_regex})`, methods: ["GET"], code: async ({fill}) => {
+			const post = await fetchShortcode(fill[0])
+			await post.fetchExtendedOwner()
+			return render(200, "pug/post.pug", {post})
+		}
+	}
 ]

src/site/pug/includes/timeline_page.pug

@@ -8,7 +8,8 @@ mixin timeline_page(page, pageIndex)
 				span.number Page #{pageNumber}
 
 		.timeline-inner
-			- const suggestedSize = 300
+			- 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
-				img(src=image.getProxy(thumbnail.src) alt=image.getAlt() width=thumbnail.config_width height=thumbnail.config_height srcset=image.getSrcset() sizes=`${suggestedSize}px`).image
+				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

src/site/pug/post.pug

@@ -0,0 +1,20 @@
+- const numberFormat = new Intl.NumberFormat().format
+
+doctype html
+html
+	head
+		meta(charset="utf-8")
+		meta(name="viewport" content="width=device-width, initial-scale=1")
+		title= `${post.getIntroduction()} | 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()
+			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

src/site/pug/user.pug

@@ -37,6 +37,7 @@ html
 						| followed by
 					div.links
 						a(rel="alternate" type="application/rss+xml" href=`/u/${user.data.username}/rss.xml`) RSS
+						a(rel="noreferrer noopener" href=`https://www.instagram.com/${user.data.username}`) instagram.com
 
 			main#timeline.timeline
 				each page, pageIndex in user.timeline.pages

src/site/repl.js

@@ -0,0 +1,31 @@
+const {instance, pugCache, wss} = require("./passthrough")
+const {requestCache, timelineImageCache} = require("../lib/collectors")
+const util = require("util")
+const repl = require("repl")
+const vm = require("vm")
+
+/**
+ * @param {string} input
+ * @param {vm.Context} context
+ * @param {string} filename
+ * @param {(err: Error|null, result: any) => any} callback
+ */
+async function customEval(input, context, filename, callback) {
+	let depth = 0
+	if (input == "exit\n") return process.exit()
+	if (input.startsWith(":")) {
+		const depthOverwrite = input.split(" ")[0]
+		depth = +depthOverwrite.slice(1)
+		input = input.slice(depthOverwrite.length + 1)
+	}
+	const result = await eval(input)
+	const output = util.inspect(result, false, depth, true)
+	return callback(undefined, output)
+}
+
+function customWriter(output) {
+	return output
+}
+
+console.log("REPL started")
+repl.start({prompt: "b) ", eval: customEval, writer: customWriter}).once("exit", () => process.exit())

src/site/sass/main.sass

@@ -33,9 +33,7 @@ body
 
 .profile-overview
 	text-align: center
-	z-index: 1
 	position: relative
-	contain: paint // </3 css
 	line-height: 1
 
 	@media screen and (max-width: $layout-a-max)
@@ -50,29 +48,43 @@ body
 	.profile-sticky
 		position: sticky
 		top: 0
-		bottom: 0
+		height: 100vh
+		box-sizing: border-box
+		overflow-y: auto
 		padding: 10px
 
-	.pfp
-		margin: 25px 0
+		@media screen and (max-width: $layout-a-max)
+			height: unset
 
-	.full-name
-		margin: 0 0 8px
-		font-size: 30px
+		.pfp
+			margin: 25px 0
 
-	.username
-		margin: 0
-		font-size: 20px
-		font-weight: normal
+		.full-name
+			margin: 0 0 8px
+			font-size: 30px
 
-	.profile-counter
-		line-height: 1.3
+		.username
+			margin: 0
+			font-size: 20px
+			font-weight: normal
 
-		.count
-			font-weight: bold
+		.profile-counter
+			line-height: 1.3
 
-	.links
-		margin-top: 20px
+			.count
+				font-weight: bold
+
+		.links
+			margin-top: 20px
+			display: flex
+			flex-wrap: wrap
+			justify-content: center
+
+			a
+				margin: 5px
+
+		> *:last-child
+			margin-bottom: 10px // because padding-bottom on parent doesn't seem to work.
 
 .timeline
 	--image-size: 260px
@@ -125,17 +137,92 @@ body
 		flex-wrap: wrap
 		margin: 0 auto
 
-		.image
+		@mixin sized()
+			width: $image-size
+			height: $image-size
+
+		.sized-link
 			$margin: 5px
 
-			background-color: rgba(40, 40, 40, 0.25)
 			margin: $margin
-			max-width: $image-size
-			max-height: $image-size
-			width: 100%
-			height: 100%
+			color: #111
+			background-color: rgba(40, 40, 40, 0.25)
+			text-decoration: none
+			@include sized
 
 			&:hover
 				$border-width: 3px
 				margin: $margin - $border-width
 				border: $border-width solid #111
+
+			.sized-image
+				@include sized
+
+.post-page
+	background-color: #6a6b71
+
+	.post-page-divider
+		display: grid
+		grid-template-columns: 360px auto
+		max-width: 1200px
+		margin: 0 auto
+		min-height: 100vh
+
+		.description-section
+			display: grid
+			align-items: start
+			align-content: normal
+			background-color: #eee
+			position: sticky
+			top: 0
+			height: 100vh
+			overflow-y: auto
+			box-sizing: border-box
+
+			.user-header
+				display: flex
+				align-items: center
+				justify-content: center
+				background-color: #b3b3b3
+				padding: 10px
+
+				.pfp
+					$size: 40px
+
+					width: $size
+					height: $size
+					margin-right: 10px
+					background-color: rgba(40, 40, 40, 0.25)
+
+				.name
+					font-size: 20px
+					color: black
+					text-decoration: none
+
+					&:hover
+						text-decoration: underline
+
+			.description
+				margin: 12px
+				white-space: pre-line
+				font-size: 20px
+				line-height: 1.4
+
+		.images-gallery
+			display: flex
+			flex-direction: column
+			align-items: center
+			justify-content: center
+			background-color: #262728
+			padding: 10px
+
+			.sized-image
+				color: #eee
+				background-color: #3b3c3d
+				max-height: 94vh
+				max-width: 100%
+				width: auto
+				height: auto
+
+				&:not(:last-child)
+					margin-bottom: 10px

src/site/server.js

@@ -23,4 +23,7 @@ subdirs("pug", (err, dirs) => {
 	require("pinski/plugins").setInstance(pinski)
 
 	Object.assign(passthrough, pinski.getExports())
+
+	console.log("Server started")
+	require("./repl")
 })