Add SPA post overlay

src/site/pug/fragments/post.pug

@@ -0,0 +1,5 @@
+//- Needs post
+
+include ../includes/post.pug
+
++post(post)

src/site/pug/includes/post.pug

@@ -0,0 +1,17 @@
+include ./display_structured
+
+mixin post(post)
+	.post-page-divider
+		section.description-section
+			header.user-header
+				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.structured-text.description
+					+display_structured(post.getStructuredCaption())
+		section.images-gallery
+			for entry in post.children
+				if entry.isVideo()
+					video(src=entry.getVideoUrlP() controls preload="auto" width=entry.data.dimensions.width height=entry.data.dimensions.height).sized-video
+				else
+					img(src=entry.getDisplayUrlP() alt=entry.getAlt() width=entry.data.dimensions.width height=entry.data.dimensions.height).sized-image

src/site/pug/includes/timeline_page.pug

@@ -11,5 +11,5 @@ mixin timeline_page(page, pageIndex)
 			- const suggestedSize = 260 //- from css :(
 			each image in page
 				- 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
+				a(href=`/p/${image.data.shortcode}` data-shortcode=image.data.shortcode).sized-link
 					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

@@ -1,6 +1,4 @@
-include includes/display_structured
-
-- const numberFormat = new Intl.NumberFormat().format
+include includes/post
 
 doctype html
 html
@@ -12,18 +10,7 @@ html
 				=`Post from @${post.getBasicOwner().username}`
 			=` | Bibliogram`
 		include includes/head
+		script(type="module" src="/static/js/post_overlay.js")
 	body.post-page
-		main.post-page-divider
-			section.description-section
-				header.user-header
-					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.structured-text.description
-						+display_structured(post.getStructuredCaption())
-			section.images-gallery
-				for entry in post.children
-					if entry.isVideo()
-						video(src=entry.getVideoUrlP() controls preload="auto" width=entry.data.dimensions.width height=entry.data.dimensions.height).sized-video
-					else
-						img(src=entry.getDisplayUrlP() alt=entry.getAlt() width=entry.data.dimensions.width height=entry.data.dimensions.height).sized-image
+		main
+			+post(post)

src/site/pug/user.pug

@@ -16,6 +16,7 @@ html
 			title= `@${user.data.username} | Bibliogram`
 		include includes/head
 		script(src="/static/js/pagination.js" type="module")
+		script(src="/static/js/post_overlay.js" type="module")
 	body
 		.main-divider
 			header.profile-overview
@@ -46,7 +47,7 @@ html
 						if constants.settings.rss_enabled
 							+feed_link("RSS", "rss", user.data.username, "application/rss+xml", display_feed_validation_buttons)
 							+feed_link("Atom", "atom", user.data.username, "application/atom+xml", display_feed_validation_buttons)
-						a(rel="noreferrer noopener" href=`https://www.instagram.com/${user.data.username}`) instagram.com
+						a(rel="noreferrer noopener" href=`https://www.instagram.com/${user.data.username}` target="_blank") instagram.com
 
 			- const hasPosts = !user.data.is_private && user.timeline.pages.length && user.timeline.pages[0].length
 			main(class=hasPosts ? "" : "no-posts")#timeline.timeline