Create top bar

src/lib/constants.js

@@ -104,6 +104,16 @@ let constants = {
 			default: "",
 			boolean: true,
 			replaceEmptyWithDefault: true
+		},{
+			name: "timeline_columns",
+			default: "dynamic",
+			boolean: false,
+			replaceEmptyWithDefault: true
+		},{
+			name: "display_top_nav",
+			default: "",
+			boolean: true,
+			replaceEmptyWithDefault: true
 		}
 	],
 
@@ -200,7 +210,7 @@ let constants = {
 
 	additional_routes: [],
 
-	database_version: 4
+	database_version: 5
 }
 
 // Override values from config and export the result

src/lib/utils/upgradedb.js

@@ -60,7 +60,21 @@ const deltas = new Map([
 			)
 				.run()
 		})()
-	}]
+	}],
+	// version 4 to version 5
+	[5, function() {
+		db.transaction(() => {
+			// the previous version wasn't around for long enough for me to care about the contents
+			db.prepare("DROP TABLE IF EXISTS UserSettings")
+				.run()
+			db.prepare(
+				"CREATE TABLE UserSettings (token TEXT NOT NULL, created INTEGER NOT NULL, language TEXT NOT NULL, show_comments INTEGER NOT NULL, link_hashtags INTEGER NOT NULL"
+				+", spa INTEGER NOT NULL, theme TEXT NOT NULL, caption_side TEXT NOT NULL, display_alt INTEGER NOT NULL, timeline_columns TEXT NOT NULL, display_top_nav INTEGER NOT NULL"
+				+", PRIMARY KEY (token))"
+			)
+				.run()
+		})()
+	}],
 ])
 
 module.exports = async function() {

src/site/api/settings.js

@@ -40,10 +40,8 @@ module.exports = [
 				prepared.token = crypto.randomBytes(16).toString("hex")
 			} while (checkPrepared.get(prepared.token))
 			prepared.created = Date.now()
-			db.prepare(
+			const fields = constants.user_settings.map(s => s.name)
-				"INSERT INTO UserSettings (token,  created,  language,  show_comments,  link_hashtags,  spa,  theme,  caption_side,  display_alt)"
+			db.prepare(`INSERT INTO UserSettings (token, created, ${fields.join(", ")}) VALUES (@token, @created, ${fields.map(f => "@"+f).join(", ")})`).run(prepared)
-				               +" VALUES (@token, @created, @language, @show_comments, @link_hashtags, @spa, @theme, @caption_side, @display_alt)"
-			).run(prepared)
 			const expires = new Date(Date.now() + 4000*24*60*60*1000).toUTCString()
 			return {
 				statusCode: 303,

src/site/api/utils/getsettings.js

@@ -9,7 +9,11 @@ function addDefaults(input = {}) {
 		if (input[setting.name] !== undefined) {
 			result[setting.name] = input[setting.name]
 		} else {
-			result[setting.name] = setting.default
+			if (setting.boolean) {
+				result[setting.name] = +(setting.default !== "")
+			} else {
+				result[setting.name] = setting.default
+			}
 		}
 	}
 	return result

src/site/html/static/img/logo-circle-min.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.805" height="18.805" viewBox="0 0 4.975 4.975"><defs><clipPath clipPathUnits="userSpaceOnUse" id="a"><circle cy="9.402" cx="9.402" fill="#729fcf" stroke-width=".794" paint-order="fill markers stroke" r="9.402"/></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="b"><circle cy="170.856" cx="27.971" fill="#729fcf" stroke-width=".794" paint-order="fill markers stroke" r="2.488"/></clipPath></defs><circle r="2.376" cy="2.488" cx="2.487" fill="#d1d1d1" paint-order="fill markers stroke"/><path d="M2.487 0A2.488 2.488 0 000 2.488a2.488 2.488 0 00.086.65L4.841 1.69A2.488 2.488 0 002.487 0z" fill="#2c2c2c" paint-order="fill markers stroke"/><path d="M9.402 0A9.402 9.402 0 000 9.402a9.402 9.402 0 009.402 9.403 9.402 9.402 0 009.403-9.403A9.402 9.402 0 009.402 0zm0 .791a8.611 8.611 0 018.612 8.611 8.611 8.611 0 01-8.612 8.612A8.611 8.611 0 01.791 9.402 8.611 8.611 0 019.402.791z" transform="scale(.26458)" clip-path="url(#a)" fill="#020000" paint-order="fill markers stroke"/><path clip-path="url(#b)" d="M27.228 170.999s.342-1.585.344-1.587c.003-.003.171-.029.373-.056.201-.027.375-.05.386-.053.016-.003.02 0 .02.012 0 .01-.054.27-.12.578-.065.308-.118.564-.118.57 0 .019.107.012.19-.012a.69.69 0 00.304-.19.891.891 0 00.287-.64.488.488 0 00-.072-.287c-.12-.204-.338-.294-.682-.28-.641.026-1.15.45-1.242 1.035-.032.204-.024.419.02.521.04.095.042.09-.052.083-.262-.02-.406-.114-.464-.304-.024-.08-.022-.29.004-.396.053-.21.147-.369.329-.556.155-.16.32-.28.525-.383.34-.17.672-.25 1.045-.25.176 0 .285.011.412.044.182.046.327.116.45.217a.78.78 0 01.261.463c.052.33-.128.703-.44.91l-.07.049z" transform="matrix(.99999 0 0 .99999 -25.483 -168.366)" fill="#fefefe"/><path transform="matrix(.99999 0 0 .99999 -25.483 -168.366)" d="M28.29 172.866a.555.555 0 01-.355-.14.226.226 0 01-.07-.113.364.364 0 01-.015-.168c0-.065.012-.129.033-.19l.027-.086.062.057c.033.03.069.057.107.08.17.094.383.05.5-.103.151-.199.241-.616.204-.949-.033-.297-.147-.454-.368-.503a.765.765 0 00-.212-.01.598.598 0 00-.152.014 93.63 93.63 0 00-.221 1.017l-.216 1.007h-.382c-.21 0-.382-.002-.382-.005 0-.009.379-1.776.379-1.776l1.689-.511s.028.01.043.012c.134.031.255.1.35.199.25.275.289.732.108 1.3a1.442 1.442 0 01-.498.712.977.977 0 01-.63.155z" clip-path="url(#b)" fill="#010101"/></svg>

src/site/html/static/img/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="341.115" height="344.902" viewBox="0 0 319.795 323.345"><g transform="translate(492.57 -300.738)"><path d="M-375.226 621.555c-1.35-1.927-1.595-6.626-1.595-30.638v-28.361l-9.344-5.896c-5.14-3.243-9.875-5.896-10.524-5.896-.648 0-12.095 6.3-25.437 13.999-13.342 7.7-25.36 13.999-26.706 13.999-3.719 0-1.42 3.592-34.667-54.169-4.989-8.666-9.07-16.537-9.07-17.491 0-2.82 3.428-5.173 27.657-18.99a12846.87 12846.87 0 0023.171-13.231c.068-.048.444-5.449.835-12.001l.71-11.913-21.833-12.526c-12.008-6.889-23.553-13.628-25.656-14.977-6.126-3.929-6.003-6.034 1.05-18.067 3.385-5.775 12.015-20.641 19.178-33.035 7.163-12.395 14.145-23.57 15.516-24.833 3.2-2.952 2.81-3.119 31.421 13.43 12.303 7.117 22.756 12.939 23.228 12.939.471 0 5.27-2.38 10.664-5.291l9.807-5.291v-28.91c0-26.01.18-29.132 1.793-31.12 1.781-2.195 2.04-2.208 41.74-2.17a52883 52883 0 0140.644.047c.382.006 1.42.733 2.305 1.618 1.387 1.387 1.61 5.601 1.61 30.496v28.887l9.92 6.123c5.457 3.368 10.368 5.984 10.913 5.815.545-.17 11.794-6.534 24.997-14.143 18.754-10.808 24.68-13.765 27.09-13.52 2.897.295 4.304 2.417 22.955 34.63 10.928 18.872 19.87 35.356 19.871 36.629 0 1.273-.805 3.001-1.791 3.841-.986.84-12.394 7.638-25.352 15.107l-23.56 13.58v24.372l24.502 14.146c13.475 7.78 24.877 14.739 25.336 15.463.46.724.842 2.193.85 3.264.016 1.914-33.802 61.446-38.606 67.962-1.527 2.07-3.34 3.329-4.798 3.329-1.289 0-13.128-6.223-26.309-13.828-13.18-7.606-24.446-13.829-25.034-13.829-.588 0-5.55 2.368-11.027 5.263l-9.957 5.262v29.406c0 27.187-.142 29.533-1.874 31.1-1.676 1.518-6.13 1.696-42.45 1.696h-40.579l-1.594-2.277z" fill="none"/><path d="M-294.524 365.468v-36.436h-76.175v37.548l-26.826 14.376-31.06-18.072-38.088 65.968 32.024 18.627-.964 30.418-31.354 18.219 38.087 65.967 32.318-18.774 25.863 16.043v35.499h76.175V558.24l26.826-14.375 30.417 18.687 38.088-65.968-31.38-19.243.962-30.418 29.949-18.218-38.088-65.968-30.911 18.775z" fill="#d2d2d2" stroke="#000" stroke-width="11.589" stroke-linecap="round" stroke-linejoin="round"/><ellipse cx="-332.612" cy="462.41" rx="51.344" ry="51.342" fill="#fff" stroke="#000" stroke-width="11.589" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

src/site/pug/settings.pug

@@ -56,6 +56,15 @@ html
 						{value: "classic", text: "Classic"}
 					])
 
+					+checkbox("display_top_nav", "Display top bar", "Always", false)
+
+					+select("timeline_columns", "Timeline columns", true, [
+						{value: "dynamic", text: "Dynamic"},
+						{value: "3", text: "3 columns"},
+						{value: "4", text: "4 columns"},
+						{value: "6", text: "6 columns"}
+					])
+
 					+select("caption_side", "Caption side", true, [
 						{value: "left", text: "Left (Bibliogram)"},
 						{value: "right", text: "Right (Instagram)"}

src/site/pug/user.pug

@@ -31,39 +31,50 @@ html
 		meta(property="og:site_name" content="Bibliogram")
 
 	body
+		nav(class=(settings.display_top_nav ? "always-displayed" : "")).top-nav
+			//- Alt text guidelines from https://axesslab.com/alt-texts/
+			a(href="/").nav-icon-link
+				img(src="/static/img/logo-circle-min.svg" alt="Bibliogram").logo
+			a(href="/settings").nav-icon-link
+				img(src="/static/img/settings.svg" alt="Settings").settings
 		.main-divider
 			header.profile-overview
 				.profile-sticky
-					img(src=user.proxyProfilePicture width=150 height=150 alt=`${user.data.full_name || user.data.username}'s profile picture.`).pfp
+					section
-					//-
+						img(src=user.proxyProfilePicture width=150 height=150 alt=`${user.data.full_name || user.data.username}'s profile picture.`).pfp
-						Instagram only uses the above URL, but an HD version is also available.
+						//-
-						The alt text is pathetic, I know. I don't have much to work with.
+							Instagram only uses the above URL, but an HD version is also available.
-					if user.data.full_name
+							The alt text is pathetic, I know. I don't have much to work with.
-						h1.full-name= user.data.full_name
+						if user.data.full_name
-						h2.username= `@${user.data.username}`
+							h1.full-name= user.data.full_name
-					else
+							h2.username= `@${user.data.username}`
-						h1.full-name= `@${user.data.username}`
+						else
-					p.structured-text.bio
+							h1.full-name= `@${user.data.username}`
-						- const bio = user.getStructuredBio()
+						p.structured-text.bio
-						if bio
+							- const bio = user.getStructuredBio()
-							+display_structured(bio)
+							if bio
-					if user.data.external_url
+								+display_structured(bio)
-						p.website
+						if user.data.external_url
-							a(href=user.data.external_url)= user.data.external_url
+							p.website
-					if user.posts != undefined
+								a(href=user.data.external_url)= user.data.external_url
-						div.profile-counter #[span(data-numberformat=user.posts).count #{numberFormat(user.posts)}] posts
+						if user.posts != undefined
-					if followerCountsAvailable
+							div.profile-counter #[span(data-numberformat=user.posts).count #{numberFormat(user.posts)}] posts
-						if user.following != undefined
+						if followerCountsAvailable
-							div.profile-counter #[span(data-numberformat=user.following).count #{numberFormat(user.following)}] following
+							if user.following != undefined
-						if user.followedBy != undefined
+								div.profile-counter #[span(data-numberformat=user.following).count #{numberFormat(user.following)}] following
-							div.profile-counter #[span(data-numberformat=user.followedBy).count #{numberFormat(user.followedBy)}] followed by
+							if user.followedBy != undefined
-					else
+								div.profile-counter #[span(data-numberformat=user.followedBy).count #{numberFormat(user.followedBy)}] followed by
-						div.profile-counter.not-available Followers not available.
+						else
-					div.links
+							div.profile-counter.not-available Followers not available.
-						if constants.feeds.enabled && constants.feeds.display_links
+						.links
-							+feed_link("RSS", "rss", user.data.username, "application/rss+xml", constants.feeds.display_validation_links)
+							if constants.feeds.enabled && constants.feeds.display_links
-							+feed_link("Atom", "atom", user.data.username, "application/atom+xml", constants.feeds.display_validation_links)
+								+feed_link("RSS", "rss", user.data.username, "application/rss+xml", constants.feeds.display_validation_links)
-						a(rel="noreferrer noopener" href=`https://www.instagram.com/${user.data.username}` target="_blank") instagram.com
+								+feed_link("Atom", "atom", user.data.username, "application/atom+xml", constants.feeds.display_validation_links)
+							a(rel="noreferrer noopener" href=`https://www.instagram.com/${user.data.username}` target="_blank") instagram.com
+					section.bibliogram-meta
+						.links
+							a(href="/") Home
+							a(href="/settings") Settings
 
 			- const hasPosts = !user.data.is_private && user.timeline.pages.length && user.timeline.pages[0].length
 			main(class=hasPosts ? "" : "no-posts")#timeline.timeline

src/site/sass/main.sass

@@ -7,6 +7,7 @@ $layout-home-a-max: 520px
 $layout-home-b-min: 521px
 $main-theme-link-color: #085cae
 $medium-red-bg: #6a2222
+$light-red-bg: #bd4444
 $solar-background: #fff4e8
 
 @font-face
@@ -51,6 +52,35 @@ body
 		background: hsl(102.1, 77.2%, 67.3%)
 		border-color: hsl(104, 51.4%, 43.5%)
 
+.top-nav
+	background-color: $light-red-bg
+	position: relative
+	z-index: 1
+	box-shadow: 0px -2px 4px 4px rgba(0, 0, 0, 0.4)
+	border-bottom: 1px solid #333
+	padding: 6px 12px
+	justify-content: space-between
+	align-items: center
+
+	display: none
+
+	@media screen and (max-width: $layout-a-max)
+		display: flex
+
+	&.always-displayed
+		display: flex
+
+	.logo
+		width: 48px
+		height: 48px
+
+	.settings
+		width: 36px
+		height: 36px
+
+	.nav-icon-link
+		display: flex
+
 .profile-overview
 	text-align: center
 	position: relative
@@ -78,6 +108,9 @@ body
 		@media screen and (max-width: $layout-a-max)
 			height: unset
 
+		a, a:visited
+				color: $main-theme-link-color
+
 		.pfp
 			margin: 25px 0
 
@@ -106,9 +139,6 @@ body
 		.website
 			margin: 20px 0px
 
-			a, a:visited
-				color: $main-theme-link-color
-
 		.links
 			margin: 15px 0px
 			display: flex
@@ -118,11 +148,17 @@ body
 			.validate-feed
 				margin-left: 2px
 
-			a, a:visited
-				color: $main-theme-link-color
-
 			> *
-				margin: 5px
+				margin: 5px 8px
+
+		.bibliogram-meta
+			margin: 20px 10px
+			border-top: 1px solid #333
+
+			@media screen and (max-width: $layout-a-max)
+				display: none
+
+
 
 .timeline
 	--image-size: 260px
@@ -260,6 +296,10 @@ body
 			padding: 10px
 			position: sticky
 			top: 0
+			border-bottom: 1px solid #333
+
+			@media screen and (max-width: $layout-a-max)
+				box-shadow: 0px -2px 4px 4px rgba(0, 0, 0, 0.4)
 
 			.navigate-posts
 				-webkit-appearance: none
@@ -306,6 +346,7 @@ body
 		@media screen and (min-width: $layout-b-min)
 			.relative-box
 				position: relative
+				box-shadow: 0px 6px 4px -4px rgba(0, 0, 0, .4) inset
 
 				.scrolling-box
 					position: absolute
@@ -401,7 +442,7 @@ body
 	display: flex
 	flex-direction: column
 	min-height: 100vh
-	background-color: #bd4444
+	background-color: $light-red-bg
 	color: #fff
 
 	h1