Add homepage

src/site/api/api.js

@@ -69,7 +69,8 @@ module.exports = [
 						features: [
 							"PAGE_PROFILE",
 							"PAGE_POST",
-							"API_STATS"
+							"API_STATS",
+							"PAGE_HOME"
 						]
 					}
 				}

src/site/api/routes.js

@@ -1,8 +1,25 @@
 const constants = require("../../lib/constants")
 const {fetchUser, getOrFetchShortcode} = require("../../lib/collectors")
-const {render} = require("pinski/plugins")
+const {render, redirect} = require("pinski/plugins")
 
 module.exports = [
+	{
+		route: `/u`, methods: ["GET"], code: async ({url}) => {
+			if (url.searchParams.has("u")) {
+				let username = url.searchParams.get("u")
+				username = username.replace(/^(https?:\/\/)?([a-z]+\.)?instagram\.com\//, "")
+				username = username.replace(/^\@+/, "")
+				username = username.replace(/\/+$/, "")
+				return redirect(`/u/${username}`, 301)
+			} else {
+				return render(400, "pug/friendlyerror.pug", {
+					statusCode: 400,
+					title: "Bad request",
+					message: "Expected a username."
+				})
+			}
+		}
+	},
 	{
 		route: `/u/(${constants.external.username_regex})`, methods: ["GET"], code: ({url, fill}) => {
 			const params = url.searchParams
@@ -53,6 +70,21 @@ module.exports = [
 			})
 		}
 	},
+	{
+		route: "/p", methods: ["GET"], code: async ({url}) => {
+			if (url.searchParams.has("p")) {
+				let post = url.searchParams.get("p")
+				post = post.replace(/^(https?:\/\/)?([a-z]+\.)?instagram\.com\/p\//, "")
+				return redirect(`/p/${post}`, 301)
+			} else {
+				return render(400, "pug/friendlyerror.pug", {
+					statusCode: 400,
+					title: "Bad request",
+					message: "Expected a username."
+				})
+			}
+		}
+	},
 	{
 		route: `/p/(${constants.external.shortcode_regex})`, methods: ["GET"], code: ({fill}) => {
 			return getOrFetchShortcode(fill[0]).then(async post => {

src/site/pug/home.pug

@@ -0,0 +1,44 @@
+doctype html
+html
+	head
+		meta(charset="utf-8")
+		meta(name="viewport" content="width=device-width, initial-scale=1")
+		title Bibliogram
+		link(rel="stylesheet" type="text/css" href="/static/css/main.css")
+	body.homepage
+		header
+			h1.banner
+				img.banner-image(src="/static/img/banner-min.svg")
+		.go-sections-container
+			.go-sections
+				section
+					h2.title Go to profile
+					form(method="get" action="/u").pair-entry
+						input(type="text" name="u" placeholder="Username or URL" autofocus).text
+						input(type="submit" value="Go").button
+				section
+					h2.title Go to post
+					form(method="get" action="/p").pair-entry
+						input(type="text" name="p" placeholder="Shortcode or URL").text
+						input(type="submit" value="Go").button
+		.about-container
+			section.about
+				h2 About Bibliogram
+				p.
+					Bibliogram takes data from Instagram's public profile views and produces a friendlier page
+					that loads faster, proxies images, provides copyable and saveable image sources, eliminates ads,
+					generates RSS feeds, and doesn't urge you to sign up.
+				p.
+					Bibliogram does #[em not] allow you to anonymously post, like, comment, follow, or view private profiles.
+					It does not preserve deleted posts.
+				ul.link-list
+					-
+						const links = [
+							["https://github.com/cloudrac3r/bibliogram", "GitHub repository"],
+							["https://riot.im/app/#/room/#bibliogram:matrix.org", "Discussion room on Matrix"],
+							["https://github.com/cloudrac3r/bibliogram/wiki/Home", "Other Bibliogram instances"],
+							["https://github.com/cloudrac3r/bibliogram/projects/1?fullscreen=true", "Project board"],
+							["https://cadence.moe/about/contact", "Contact the developer"]
+						]
+					each entry in links
+						li: a(href!=entry[0] target="_blank" rel="noopener noreferrer")= entry[1]

src/site/sass/main.sass

@@ -1,5 +1,7 @@
 $layout-a-max: 820px
 $layout-b-min: 821px
+$layout-home-a-max: 520px
+$layout-home-b-min: 521px
 
 body
 	margin: 0
@@ -27,7 +29,10 @@ body
 	line-height: 1
 	text-decoration: none
 
-	&:hover
+	&.disabled
+		cursor: default
+
+	&:hover:not(.disabled), &:active, &.clicked
 		color: hsl(106.4, 100%, 12.9%)
 		background: hsl(102.1, 77.2%, 67.3%)
 		border-color: hsl(104, 51.4%, 43.5%)
@@ -280,3 +285,104 @@ body
 	.back
 		color: #4a93d2
 		font-size: 25px
+
+.homepage
+	$link-color: #ffb8b8
+
+	display: flex
+	flex-direction: column
+	min-height: 100vh
+	background-color: #bd4444
+	color: #fff
+
+	h1
+		font-size: 48px
+		margin: 0px
+
+	h2
+		font-size: 32px
+		margin: 0px
+
+	a, a:visited
+		color: $link-color
+
+	.banner
+		padding: 0px 5px
+		height: 60vh
+		display: flex
+		justify-content: center
+		align-items: center
+
+		.banner-image
+			max-width: 100%
+
+		@media screen and (max-width: $layout-home-a-max)
+			height: 30vh
+
+	.go-sections-container
+		padding: 0px 10px 50px
+
+		.go-sections
+			max-width: 900px
+			margin: 0px auto
+			display: grid
+			grid-gap: 10px
+			grid-template-columns: repeat(2, 1fr)
+			justify-items: center
+
+			@media screen and (max-width: $layout-home-a-max)
+				grid-template-columns: 1fr
+
+			.title
+				text-align: center
+				margin-bottom: 20px
+
+			.pair-entry
+				display: flex
+
+				.text, .button
+					appearance: none
+					-moz-appearance: none
+					display: flex
+					padding: 9px 8px 7px
+					line-height: 1
+					box-sizing: content-box
+					font-size: 20px
+					height: 20px
+					border: 1px solid #333
+
+				.text
+					border-radius: 6px 0px 0px 6px
+					border-right: none
+					max-width: 230px
+					width: 30vw
+
+					@media screen and (max-width: 520px)
+						width: 80vw
+
+				.button
+					border-radius: 0px 6px 6px 0px
+					padding-left: 12px
+					padding-right: 12px
+					cursor: pointer
+					background-color: #ffbebe
+					color: #111
+
+					&:hover
+						background-color: #ff7c7c
+
+	.about-container
+		background-color: #6a2222
+		color: #eee
+		padding: 50px 20px
+		flex: 1
+		min-height: 60vh
+
+		.about
+			max-width: 700px
+			margin: 0px auto
+			line-height: 1.4
+			font-size: 20px
+
+			.link-list
+				color: $link-color

src/site/server.js

@@ -14,6 +14,7 @@ subdirs("pug", (err, dirs) => {
 	//pinski.addRoute("/", "pug/index.pug", "pug")
 	pinski.addRoute("/static/css/main.css", "sass/main.sass", "sass")
 	pinski.addPugDir("pug", dirs)
+	pinski.addRoute("/", "pug/home.pug", "pug")
 	pinski.addAPIDir("html/static/js/templates/api")
 	pinski.addSassDir("sass")
 	pinski.addAPIDir("api")