Add featured profiles

src/lib/constants.js

@@ -164,6 +164,9 @@ let constants = {
 		enable_updater_page: false
 	},
 
+	featured_profiles: [
+	],
+
 	use_assistant: {
 		enabled: false,
 		// Read the docs.

src/site/pug/home.pug

@@ -29,7 +29,7 @@ html
 				p.
 					Bibliogram is a website that takes data from Instagram's public profile views and puts it into
 					a friendlier page that loads faster, gives downloadable images, eliminates ads,
-					generates RSS feeds, and doesn't urge you to sign up. #[a(href="/u/instagram").example-link See an example.]
+					generates RSS feeds, and doesn't urge you to sign up. #[a(href=(constants.featured_profiles.length ? "#featured-profiles" : "/u/instagram")).example-link See an example.]
 				p.
 					Bibliogram does #[em not] allow you to anonymously post, like, comment, follow, or view private profiles.
 					It does not preserve deleted posts.
@@ -59,3 +59,20 @@ html
 						]
 					each entry in links
 						li: a(href!=entry[0] target="_blank" rel="noopener noreferrer")= entry[1]
+
+				if constants.featured_profiles.length
+					.featured-profiles#featured-profiles
+						h2.featured-profiles-header Featured profiles
+
+						table.featured-profile-table
+							tbody
+								each profile in constants.featured_profiles
+									tr
+										td.username: a(href=`/u/${profile.username}`) @#{profile.username}
+										td= profile.description
+
+						details
+							summary What's this?
+							.details-content
+								p The owner of this website personally thinks that these profiles are interesting.
+								p These are not endorsements from the Bibliogram project.

src/site/sass/includes/_main.sass

@@ -11,6 +11,9 @@ $theme: () !default
 body, input, button, textarea
 	font-family: "Bariol", sans-serif
 
+summary
+	text-decoration: underline
+
 body
 	margin: 0
 	padding: 0
@@ -549,6 +552,43 @@ body
 			.link-list
 				color: map-get($theme, "link-power")
 
+	.featured-profiles
+		margin-bottom: 20px
+		line-height: 1.4
+
+		&:target
+			background-color: map-get($theme, "background-power-highlight")
+			margin: -6px -16px 14px
+			padding: 5px 15px
+			border-radius: 10px
+			border: map-get($theme, "edge-power-border")
+
+			.featured-profiles-header::before
+				content: "» "
+
+		summary
+			color: map-get($theme, "link-power")
+			padding-left: 2px
+
+		.featured-profile-table
+			line-height: 1.4
+			margin: 1em 0px 1px 1em
+
+			@media screen and (max-width: $layout-c-max)
+				line-height: 1.15
+				margin: 1em 0px 1px 15px
+				text-indent: -15px
+
+				tr
+					display: block
+					margin-bottom: 10px
+
+				td
+					display: inline
+
+		.username
+			padding-right: 6px
+
 .structured-text
 	a, a:visited
 		color: map-get($theme, "link-primary")
@@ -712,3 +752,19 @@ body
 
 		.home-link
 			font-size: 21px
+
+.details-content
+	border: map-get($theme, "edge-power-border")
+	margin-top: 5px
+	padding: 15px 20px
+	border-radius: 5px
+	line-height: 1.4
+
+	p
+		margin: 0.6em 0
+
+	> p:first-child
+		margin-top: 0
+
+	> p:last-child
+		margin-bottom: 0

src/site/sass/themes/_blue.scss

@@ -12,5 +12,6 @@ $theme: map-merge(classic.$theme, (
 	"background-power-pale": #7cc4ff,
 	"background-banner-success": #173d6f,
 	"link-power": #91cbfd,
+	"edge-power-border": 1px solid #91cbfd,
 	"edge-power-divider": 1px solid #3b496a
 ));

src/site/sass/themes/_classic.scss

@@ -49,6 +49,7 @@ $theme: (
 	"edge-thumbnail-hover": solid #111,
 	"edge-go-control": 1px solid #333,
 	"edge-power-divider": 1px solid #714141,
+	"edge-power-border": 1px solid #ffb9b7,
 	"edge-alert": 2px solid #aaa,
 	"shadow-down": 0px -2px 4px 4px rgba(0, 0, 0, 0.4),
 	"shadow-right": -2px 0px 4px 4px rgba(0, 0, 0, 0.4),

src/site/sass/themes/_pussthecat.org-v2.scss

@@ -42,6 +42,7 @@ $theme: map-merge(classic.$theme, (
 	"edge-context-divider": 2px solid #000,
 	"edge-thumbnail-hover": solid #ffffff,
 	"edge-go-control": 1px solid #000,
+	"edge-power-border": 1px solid #666,
 	"edge-power-divider": 1px solid #343a40,
 	"shadow-down": none,
 	"shadow-right": none,

src/site/sass/themes/_pussthecat.org.scss

@@ -42,6 +42,7 @@ $theme: map-merge(classic.$theme, (
 	"edge-context-divider": 2px solid #ffffff,
 	"edge-thumbnail-hover": solid #ffffff,
 	"edge-go-control": 1px solid #000,
+	"edge-power-border": 1px solid #666,
 	"edge-power-divider": 1px solid #343a40,
 	"shadow-down": none,
 	"shadow-right": none,