mirror of
https://git.sr.ht/~cadence/bibliogram
synced 2024-11-22 08:07:30 +00:00
Create top bar
This commit is contained in:
Cadence Ember
parent
d83a5de095
commit
5a86372516
@ -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
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -40,10 +40,8 @@ module.exports = [
|
||||
prepared.token = crypto.randomBytes(16).toString("hex")
|
||||
} while (checkPrepared.get(prepared.token))
|
||||
prepared.created = Date.now()
|
||||
db.prepare(
|
||||
"INSERT INTO UserSettings (token, created, language, show_comments, link_hashtags, spa, theme, caption_side, display_alt)"
|
||||
+" VALUES (@token, @created, @language, @show_comments, @link_hashtags, @spa, @theme, @caption_side, @display_alt)"
|
||||
).run(prepared)
|
||||
const fields = constants.user_settings.map(s => s.name)
|
||||
db.prepare(`INSERT INTO UserSettings (token, created, ${fields.join(", ")}) VALUES (@token, @created, ${fields.map(f => "@"+f).join(", ")})`).run(prepared)
|
||||
const expires = new Date(Date.now() + 4000*24*60*60*1000).toUTCString()
|
||||
return {
|
||||
statusCode: 303,
|
||||
|
||||
@ -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
|
||||
|
||||
1
src/site/html/static/img/logo-circle-min.svg
Normal file
1
src/site/html/static/img/logo-circle-min.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
1
src/site/html/static/img/settings.svg
Normal file
1
src/site/html/static/img/settings.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@ -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)"}
|
||||
|
||||
@ -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
|
||||
//-
|
||||
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.
|
||||
if user.data.full_name
|
||||
h1.full-name= user.data.full_name
|
||||
h2.username= `@${user.data.username}`
|
||||
else
|
||||
h1.full-name= `@${user.data.username}`
|
||||
p.structured-text.bio
|
||||
- const bio = user.getStructuredBio()
|
||||
if bio
|
||||
+display_structured(bio)
|
||||
if user.data.external_url
|
||||
p.website
|
||||
a(href=user.data.external_url)= user.data.external_url
|
||||
if user.posts != undefined
|
||||
div.profile-counter #[span(data-numberformat=user.posts).count #{numberFormat(user.posts)}] posts
|
||||
if followerCountsAvailable
|
||||
if user.following != undefined
|
||||
div.profile-counter #[span(data-numberformat=user.following).count #{numberFormat(user.following)}] following
|
||||
if user.followedBy != undefined
|
||||
div.profile-counter #[span(data-numberformat=user.followedBy).count #{numberFormat(user.followedBy)}] followed by
|
||||
else
|
||||
div.profile-counter.not-available Followers not available.
|
||||
div.links
|
||||
if constants.feeds.enabled && constants.feeds.display_links
|
||||
+feed_link("RSS", "rss", user.data.username, "application/rss+xml", constants.feeds.display_validation_links)
|
||||
+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
|
||||
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.
|
||||
if user.data.full_name
|
||||
h1.full-name= user.data.full_name
|
||||
h2.username= `@${user.data.username}`
|
||||
else
|
||||
h1.full-name= `@${user.data.username}`
|
||||
p.structured-text.bio
|
||||
- const bio = user.getStructuredBio()
|
||||
if bio
|
||||
+display_structured(bio)
|
||||
if user.data.external_url
|
||||
p.website
|
||||
a(href=user.data.external_url)= user.data.external_url
|
||||
if user.posts != undefined
|
||||
div.profile-counter #[span(data-numberformat=user.posts).count #{numberFormat(user.posts)}] posts
|
||||
if followerCountsAvailable
|
||||
if user.following != undefined
|
||||
div.profile-counter #[span(data-numberformat=user.following).count #{numberFormat(user.following)}] following
|
||||
if user.followedBy != undefined
|
||||
div.profile-counter #[span(data-numberformat=user.followedBy).count #{numberFormat(user.followedBy)}] followed by
|
||||
else
|
||||
div.profile-counter.not-available Followers not available.
|
||||
.links
|
||||
if constants.feeds.enabled && constants.feeds.display_links
|
||||
+feed_link("RSS", "rss", user.data.username, "application/rss+xml", constants.feeds.display_validation_links)
|
||||
+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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user