2020-01-22 00:22:19 +00:00
|
|
|
"use strict";
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-01-22 00:22:19 +00:00
|
|
|
const debug = require("debug")("oasis");
|
|
|
|
const ssbMarkdown = require("ssb-markdown");
|
|
|
|
const highlightJs = require("highlight.js");
|
2020-01-08 20:56:49 +00:00
|
|
|
|
|
|
|
const {
|
|
|
|
a,
|
|
|
|
article,
|
2020-02-01 21:20:22 +00:00
|
|
|
body,
|
2020-01-08 20:56:49 +00:00
|
|
|
button,
|
2020-01-31 22:39:18 +00:00
|
|
|
details,
|
2020-01-08 20:56:49 +00:00
|
|
|
div,
|
2020-02-04 21:27:41 +00:00
|
|
|
em,
|
2020-01-08 20:56:49 +00:00
|
|
|
footer,
|
|
|
|
form,
|
|
|
|
h1,
|
|
|
|
h2,
|
|
|
|
h3,
|
2020-02-01 21:20:22 +00:00
|
|
|
head,
|
2020-01-08 20:56:49 +00:00
|
|
|
header,
|
2020-02-01 21:20:22 +00:00
|
|
|
html,
|
2020-01-08 20:56:49 +00:00
|
|
|
img,
|
|
|
|
input,
|
|
|
|
label,
|
|
|
|
li,
|
2020-02-01 21:20:22 +00:00
|
|
|
link,
|
|
|
|
main,
|
|
|
|
meta,
|
|
|
|
nav,
|
2020-01-08 20:56:49 +00:00
|
|
|
option,
|
|
|
|
p,
|
|
|
|
pre,
|
|
|
|
progress,
|
|
|
|
section,
|
|
|
|
select,
|
|
|
|
span,
|
|
|
|
strong,
|
2020-01-31 22:39:18 +00:00
|
|
|
summary,
|
2020-01-08 20:56:49 +00:00
|
|
|
textarea,
|
2020-02-01 21:20:22 +00:00
|
|
|
title,
|
2020-01-08 20:56:49 +00:00
|
|
|
ul
|
2020-01-22 00:22:19 +00:00
|
|
|
} = require("hyperaxe");
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-02-01 22:08:37 +00:00
|
|
|
const lodash = require("lodash");
|
2020-01-31 22:39:18 +00:00
|
|
|
const markdown = require("./markdown");
|
|
|
|
|
2020-02-01 22:08:37 +00:00
|
|
|
const i18nBase = require("./i18n");
|
2020-02-02 17:31:43 +00:00
|
|
|
let i18n = null;
|
|
|
|
let selectedLanguage = null;
|
2020-02-01 22:08:37 +00:00
|
|
|
|
|
|
|
exports.setLanguage = language => {
|
2020-02-02 17:31:43 +00:00
|
|
|
selectedLanguage = language;
|
2020-02-01 22:08:37 +00:00
|
|
|
i18n = Object.assign({}, i18nBase.en, i18nBase[language]);
|
|
|
|
};
|
|
|
|
|
2020-02-01 21:20:22 +00:00
|
|
|
const markdownUrl = "https://commonmark.org/help/";
|
|
|
|
const doctypeString = "<!DOCTYPE html>";
|
|
|
|
|
|
|
|
const toAttributes = obj =>
|
|
|
|
Object.entries(obj)
|
|
|
|
.map(([key, val]) => `${key}=${val}`)
|
|
|
|
.join(", ");
|
|
|
|
|
|
|
|
const template = (...elements) => {
|
|
|
|
const nodes = html(
|
|
|
|
{ lang: "en" },
|
|
|
|
head(
|
|
|
|
title("Oasis"),
|
|
|
|
link({ rel: "stylesheet", href: "/theme.css" }),
|
|
|
|
link({ rel: "stylesheet", href: "/assets/style.css" }),
|
|
|
|
link({ rel: "stylesheet", href: "/assets/highlight.css" }),
|
|
|
|
link({ rel: "icon", type: "image/svg+xml", href: "/assets/favicon.svg" }),
|
|
|
|
meta({ charset: "utf-8" }),
|
|
|
|
meta({
|
|
|
|
name: "description",
|
|
|
|
content: i18n.oasisDescription
|
|
|
|
}),
|
|
|
|
meta({
|
|
|
|
name: "viewport",
|
|
|
|
content: toAttributes({ width: "device-width", "initial-scale": 1 })
|
|
|
|
})
|
|
|
|
),
|
|
|
|
body(
|
|
|
|
nav(
|
|
|
|
ul(
|
2020-02-04 17:57:45 +00:00
|
|
|
li(a({ href: "/public/latest/extended" }, `🗺️ ${i18n.extended}`)),
|
2020-02-01 21:20:22 +00:00
|
|
|
li(a({ href: "/" }, `📣 ${i18n.popular}`)),
|
|
|
|
li(a({ href: "/public/latest" }, `🐇 ${i18n.latest}`)),
|
2020-02-04 17:57:45 +00:00
|
|
|
li(a({ href: "/public/latest/topics" }, `📖 ${i18n.topics}`)),
|
2020-02-01 21:20:22 +00:00
|
|
|
li(a({ href: "/profile" }, `🐱 ${i18n.profile}`)),
|
|
|
|
li(a({ href: "/mentions" }, `💬 ${i18n.mentions}`)),
|
|
|
|
li(a({ href: "/inbox" }, `✉️ ${i18n.private}`)),
|
|
|
|
li(a({ href: "/search" }, `🔍 ${i18n.search}`)),
|
|
|
|
li(a({ href: "/meta" }, `⚙ ${i18n.settings}`))
|
|
|
|
)
|
|
|
|
),
|
|
|
|
main({ id: "content" }, elements)
|
|
|
|
)
|
|
|
|
);
|
2020-01-31 22:39:18 +00:00
|
|
|
|
2020-02-01 21:20:22 +00:00
|
|
|
const result = doctypeString + nodes.outerHTML;
|
|
|
|
|
|
|
|
return result;
|
|
|
|
};
|
2020-01-31 22:39:18 +00:00
|
|
|
const post = ({ msg }) => {
|
|
|
|
const encoded = {
|
|
|
|
key: encodeURIComponent(msg.key),
|
|
|
|
author: encodeURIComponent(msg.value.author),
|
|
|
|
parent: encodeURIComponent(msg.value.content.root)
|
|
|
|
};
|
|
|
|
|
|
|
|
const url = {
|
|
|
|
author: `/author/${encoded.author}`,
|
|
|
|
likeForm: `/like/${encoded.key}`,
|
|
|
|
link: `/thread/${encoded.key}#${encoded.key}`,
|
|
|
|
parent: `/thread/${encoded.parent}#${encoded.parent}`,
|
|
|
|
avatar: msg.value.meta.author.avatar.url,
|
|
|
|
json: `/json/${encoded.key}`,
|
|
|
|
reply: `/reply/${encoded.key}`,
|
|
|
|
comment: `/comment/${encoded.key}`
|
|
|
|
};
|
|
|
|
|
|
|
|
const isPrivate = Boolean(msg.value.meta.private);
|
|
|
|
const isRoot = msg.value.content.root == null;
|
|
|
|
const isThreadTarget = Boolean(
|
|
|
|
lodash.get(msg, "value.meta.thread.target", false)
|
|
|
|
);
|
|
|
|
|
|
|
|
// TODO: I think this is actually true for both replies and comments.
|
|
|
|
const isReply = Boolean(lodash.get(msg, "value.meta.thread.reply", false));
|
|
|
|
|
|
|
|
const { name } = msg.value.meta.author;
|
|
|
|
const timeAgo = msg.value.meta.timestamp.received.since.replace("~", "");
|
|
|
|
|
|
|
|
const depth = lodash.get(msg, "value.meta.thread.depth", 0);
|
|
|
|
|
|
|
|
const markdownContent = markdown(
|
|
|
|
msg.value.content.text,
|
|
|
|
msg.value.content.mentions
|
|
|
|
);
|
|
|
|
|
|
|
|
const hasContentWarning =
|
|
|
|
typeof msg.value.content.contentWarning === "string";
|
|
|
|
|
|
|
|
const likeButton = msg.value.meta.voted
|
|
|
|
? { value: 0, class: "liked" }
|
|
|
|
: { value: 1, class: null };
|
|
|
|
|
|
|
|
const likeCount = msg.value.meta.votes.length;
|
|
|
|
|
|
|
|
const messageClasses = [];
|
|
|
|
|
|
|
|
if (isPrivate) {
|
|
|
|
messageClasses.push("private");
|
|
|
|
}
|
|
|
|
|
|
|
|
if (isThreadTarget) {
|
|
|
|
messageClasses.push("thread-target");
|
|
|
|
}
|
|
|
|
|
|
|
|
if (isReply) {
|
|
|
|
// True for comments too, I think
|
|
|
|
messageClasses.push("reply");
|
|
|
|
}
|
|
|
|
|
|
|
|
const isFork = msg.value.meta.postType === "reply";
|
|
|
|
|
2020-02-01 21:20:22 +00:00
|
|
|
// TODO: Refactor to stop using strings and use constants/symbols.
|
2020-01-31 22:39:18 +00:00
|
|
|
const postOptions = {
|
|
|
|
post: null,
|
2020-02-01 21:20:22 +00:00
|
|
|
comment: i18n.commentDescription({ parentUrl: url.parent }),
|
|
|
|
reply: i18n.replyDescription({ parentUrl: url.parent }),
|
|
|
|
mystery: i18n.mysteryDescription
|
2020-01-31 22:39:18 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const emptyContent = "<p>undefined</p>\n";
|
|
|
|
const articleElement =
|
|
|
|
markdownContent === emptyContent
|
|
|
|
? article(
|
|
|
|
{ class: "content" },
|
|
|
|
pre({
|
|
|
|
innerHTML: highlightJs.highlight(
|
|
|
|
"json",
|
|
|
|
JSON.stringify(msg, null, 2)
|
|
|
|
).value
|
|
|
|
})
|
|
|
|
)
|
|
|
|
: article({ class: "content", innerHTML: markdownContent });
|
|
|
|
|
|
|
|
const articleContent = hasContentWarning
|
|
|
|
? details(summary(msg.value.content.contentWarning), articleElement)
|
|
|
|
: articleElement;
|
|
|
|
|
|
|
|
const fragment = section(
|
|
|
|
{
|
|
|
|
id: msg.key,
|
|
|
|
class: messageClasses.join(" "),
|
|
|
|
style: `margin-left: ${depth}rem;`
|
|
|
|
},
|
|
|
|
header(
|
|
|
|
span(
|
|
|
|
{ class: "author" },
|
|
|
|
a(
|
|
|
|
{ href: url.author },
|
|
|
|
img({ class: "avatar", src: url.avatar, alt: "" }),
|
|
|
|
name
|
|
|
|
),
|
|
|
|
postOptions[msg.value.meta.postType]
|
|
|
|
),
|
|
|
|
span(
|
|
|
|
{ class: "time" },
|
|
|
|
isPrivate ? "🔒" : null,
|
|
|
|
a({ href: url.link }, timeAgo)
|
|
|
|
)
|
|
|
|
),
|
|
|
|
articleContent,
|
|
|
|
|
|
|
|
// HACK: centered-footer
|
|
|
|
//
|
|
|
|
// Here we create an empty div with an anchor tag that can be linked to.
|
|
|
|
// In our CSS we ensure that this gets centered on the screen when we
|
|
|
|
// link to this anchor tag.
|
|
|
|
//
|
|
|
|
// This is used for redirecting users after they like a post, when we
|
|
|
|
// want the like button that they just clicked to remain close-ish to
|
|
|
|
// where it was before they clicked the button.
|
|
|
|
div({ id: `centered-footer-${encoded.key}`, class: "centered-footer" }),
|
|
|
|
|
|
|
|
footer(
|
|
|
|
form(
|
|
|
|
{ action: url.likeForm, method: "post" },
|
|
|
|
button(
|
|
|
|
{
|
|
|
|
name: "voteValue",
|
|
|
|
type: "submit",
|
|
|
|
value: likeButton.value,
|
|
|
|
class: likeButton.class
|
|
|
|
},
|
|
|
|
`❤ ${likeCount}`
|
|
|
|
)
|
|
|
|
),
|
2020-02-01 21:20:22 +00:00
|
|
|
a({ href: url.comment }, i18n.comment),
|
|
|
|
isPrivate || isRoot || isFork ? null : a({ href: url.reply }, i18n.reply),
|
|
|
|
a({ href: url.json }, i18n.json)
|
2020-01-31 22:39:18 +00:00
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
return fragment;
|
|
|
|
};
|
2020-01-08 20:56:49 +00:00
|
|
|
|
|
|
|
exports.authorView = ({
|
|
|
|
avatarUrl,
|
|
|
|
description,
|
|
|
|
feedId,
|
|
|
|
messages,
|
|
|
|
name,
|
|
|
|
relationship
|
|
|
|
}) => {
|
2020-01-22 00:22:19 +00:00
|
|
|
const mention = `[@${name}](${feedId})`;
|
|
|
|
const markdownMention = highlightJs.highlight("markdown", mention).value;
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-02-01 21:20:22 +00:00
|
|
|
const areFollowing =
|
2020-02-01 22:08:37 +00:00
|
|
|
relationship !== null &&
|
|
|
|
relationship.following === true &&
|
|
|
|
relationship.blocking === false;
|
2020-01-11 23:34:43 +00:00
|
|
|
|
2020-02-01 21:20:22 +00:00
|
|
|
const contactFormType = areFollowing ? i18n.unfollow : i18n.follow;
|
2020-01-11 23:34:43 +00:00
|
|
|
|
2020-01-22 00:22:19 +00:00
|
|
|
const contactForm =
|
2020-02-01 21:20:22 +00:00
|
|
|
relationship === null
|
|
|
|
? null // We're on our own profile!
|
|
|
|
: form(
|
2020-01-22 00:22:19 +00:00
|
|
|
{
|
|
|
|
action: `/${contactFormType}/${encodeURIComponent(feedId)}`,
|
|
|
|
method: "post"
|
|
|
|
},
|
|
|
|
button(
|
|
|
|
{
|
|
|
|
type: "submit"
|
|
|
|
},
|
|
|
|
contactFormType
|
|
|
|
)
|
2020-02-01 21:20:22 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
const relationshipText = (() => {
|
|
|
|
if (relationship === null) {
|
|
|
|
return i18n.relationshipYou;
|
|
|
|
} else if (
|
|
|
|
relationship.following === true &&
|
|
|
|
relationship.blocking === false
|
|
|
|
) {
|
|
|
|
return i18n.relationshipFollowing;
|
|
|
|
} else if (
|
|
|
|
relationship.following === false &&
|
|
|
|
relationship.blocking === true
|
|
|
|
) {
|
|
|
|
return i18n.relationshipBlocking;
|
|
|
|
} else if (
|
|
|
|
relationship.following === false &&
|
|
|
|
relationship.blocking === false
|
|
|
|
) {
|
|
|
|
return i18n.relationshipNone;
|
|
|
|
} else if (
|
|
|
|
relationship.following === true &&
|
|
|
|
relationship.blocking === true
|
|
|
|
) {
|
|
|
|
return i18n.relationshipConflict;
|
|
|
|
} else {
|
|
|
|
throw new Error(`Unknown relationship ${JSON.stringify(relationship)}`);
|
|
|
|
}
|
|
|
|
})();
|
2020-01-22 00:22:19 +00:00
|
|
|
|
|
|
|
const prefix = section(
|
|
|
|
{ class: "message" },
|
|
|
|
header(
|
|
|
|
{ class: "profile" },
|
|
|
|
img({ class: "avatar", src: avatarUrl }),
|
|
|
|
h1(name)
|
|
|
|
),
|
2020-01-08 20:56:49 +00:00
|
|
|
pre({
|
2020-01-22 00:22:19 +00:00
|
|
|
class: "md-mention",
|
2020-01-08 20:56:49 +00:00
|
|
|
innerHTML: markdownMention
|
|
|
|
}),
|
2020-01-31 22:39:18 +00:00
|
|
|
description !== "" ? article({ innerHTML: markdown(description) }) : null,
|
2020-01-08 20:56:49 +00:00
|
|
|
footer(
|
2020-02-01 21:20:22 +00:00
|
|
|
a({ href: `/likes/${encodeURIComponent(feedId)}` }, i18n.viewLikes),
|
|
|
|
span(relationshipText),
|
2020-01-11 23:38:33 +00:00
|
|
|
contactForm
|
2020-01-08 20:56:49 +00:00
|
|
|
)
|
2020-01-22 00:22:19 +00:00
|
|
|
);
|
2020-01-08 20:56:49 +00:00
|
|
|
|
|
|
|
return template(
|
|
|
|
prefix,
|
2020-01-22 00:22:19 +00:00
|
|
|
messages.map(msg => post({ msg }))
|
|
|
|
);
|
|
|
|
};
|
2020-01-08 20:56:49 +00:00
|
|
|
|
|
|
|
exports.commentView = async ({ messages, myFeedId, parentMessage }) => {
|
2020-01-22 00:22:19 +00:00
|
|
|
let markdownMention;
|
2020-01-08 20:56:49 +00:00
|
|
|
|
|
|
|
const messageElements = await Promise.all(
|
2020-01-22 00:22:19 +00:00
|
|
|
messages.reverse().map(message => {
|
|
|
|
debug("%O", message);
|
|
|
|
const authorName = message.value.meta.author.name;
|
|
|
|
const authorFeedId = message.value.author;
|
2020-01-08 20:56:49 +00:00
|
|
|
if (authorFeedId !== myFeedId) {
|
|
|
|
if (message.key === parentMessage.key) {
|
2020-01-22 00:22:19 +00:00
|
|
|
const x = `[@${authorName}](${authorFeedId})\n\n`;
|
|
|
|
markdownMention = x;
|
2020-01-08 20:56:49 +00:00
|
|
|
}
|
|
|
|
}
|
2020-01-22 00:22:19 +00:00
|
|
|
return post({ msg: message });
|
2020-01-08 20:56:49 +00:00
|
|
|
})
|
2020-01-22 00:22:19 +00:00
|
|
|
);
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-01-22 00:22:19 +00:00
|
|
|
const action = `/comment/${encodeURIComponent(messages[0].key)}`;
|
|
|
|
const method = "post";
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-01-22 00:22:19 +00:00
|
|
|
const isPrivate = parentMessage.value.meta.private;
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-01-22 00:22:19 +00:00
|
|
|
const publicOrPrivate = isPrivate ? "private" : "public";
|
2020-02-01 21:20:22 +00:00
|
|
|
const maybeReplyText = isPrivate ? [null] : i18n.commentWarning;
|
2020-01-08 20:56:49 +00:00
|
|
|
|
|
|
|
return template(
|
|
|
|
messageElements,
|
2020-01-22 00:22:19 +00:00
|
|
|
p(
|
2020-02-01 21:20:22 +00:00
|
|
|
...i18n.commentLabel({ publicOrPrivate, markdownUrl }),
|
|
|
|
...maybeReplyText
|
2020-01-08 20:56:49 +00:00
|
|
|
),
|
2020-01-22 00:22:19 +00:00
|
|
|
form(
|
|
|
|
{ action, method },
|
|
|
|
textarea(
|
|
|
|
{
|
|
|
|
autofocus: true,
|
|
|
|
required: true,
|
|
|
|
name: "text"
|
|
|
|
},
|
|
|
|
markdownMention
|
|
|
|
),
|
|
|
|
button(
|
|
|
|
{
|
|
|
|
type: "submit"
|
|
|
|
},
|
2020-02-01 21:20:22 +00:00
|
|
|
i18n.comment
|
2020-01-22 00:22:19 +00:00
|
|
|
)
|
|
|
|
)
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
exports.listView = ({ messages }) =>
|
|
|
|
template(messages.map(msg => post({ msg })));
|
2020-01-08 20:56:49 +00:00
|
|
|
|
|
|
|
exports.markdownView = ({ text }) => {
|
2020-01-22 00:22:19 +00:00
|
|
|
const rawHtml = ssbMarkdown.block(text);
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-01-22 00:22:19 +00:00
|
|
|
return template(section({ class: "message" }, { innerHTML: rawHtml }));
|
|
|
|
};
|
2020-01-08 20:56:49 +00:00
|
|
|
|
|
|
|
exports.metaView = ({ status, peers, theme, themeNames }) => {
|
2020-01-22 00:22:19 +00:00
|
|
|
const max = status.sync.since;
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-01-22 00:22:19 +00:00
|
|
|
const progressElements = Object.entries(status.sync.plugins).map(e => {
|
|
|
|
const [key, val] = e;
|
|
|
|
const id = `progress-${key}`;
|
|
|
|
return div(label({ for: id }, key), progress({ id, value: val, max }, val));
|
|
|
|
});
|
|
|
|
|
2020-01-27 00:55:48 +00:00
|
|
|
const startButton = form(
|
|
|
|
{ action: "/meta/conn/start", method: "post" },
|
2020-02-01 21:20:22 +00:00
|
|
|
button({ type: "submit" }, i18n.startNetworking)
|
2020-01-27 00:55:48 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
const restartButton = form(
|
|
|
|
{ action: "/meta/conn/restart", method: "post" },
|
2020-02-01 21:20:22 +00:00
|
|
|
button({ type: "submit" }, i18n.restartNetworking)
|
2020-01-27 00:55:48 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
const stopButton = form(
|
|
|
|
{ action: "/meta/conn/stop", method: "post" },
|
2020-02-01 21:20:22 +00:00
|
|
|
button({ type: "submit" }, i18n.stopNetworking)
|
2020-01-27 00:55:48 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
const connButtons = div({ class: "form-button-group" }, [
|
|
|
|
startButton,
|
|
|
|
restartButton,
|
|
|
|
stopButton
|
|
|
|
]);
|
|
|
|
|
2020-01-23 20:46:09 +00:00
|
|
|
const peerList = (peers || []).map(([, data]) => {
|
|
|
|
return li(
|
|
|
|
a(
|
|
|
|
{ href: `/author/${encodeURIComponent(data.key)}` },
|
|
|
|
data.name || data.host || data.key
|
|
|
|
)
|
|
|
|
);
|
|
|
|
});
|
2020-01-22 00:22:19 +00:00
|
|
|
|
|
|
|
const themeElements = themeNames.map(cur => {
|
|
|
|
const isCurrentTheme = cur === theme;
|
2020-01-08 20:56:49 +00:00
|
|
|
if (isCurrentTheme) {
|
2020-01-22 00:22:19 +00:00
|
|
|
return option({ value: cur, selected: true }, cur);
|
2020-01-08 20:56:49 +00:00
|
|
|
} else {
|
2020-01-22 00:22:19 +00:00
|
|
|
return option({ value: cur }, cur);
|
2020-01-08 20:56:49 +00:00
|
|
|
}
|
2020-01-22 00:22:19 +00:00
|
|
|
});
|
2020-01-08 20:56:49 +00:00
|
|
|
|
|
|
|
const base16 = [
|
|
|
|
// '00', removed because this is the background
|
2020-01-22 00:22:19 +00:00
|
|
|
"01",
|
|
|
|
"02",
|
|
|
|
"03",
|
|
|
|
"04",
|
|
|
|
"05",
|
|
|
|
"06",
|
|
|
|
"07",
|
|
|
|
"08",
|
|
|
|
"09",
|
|
|
|
"0A",
|
|
|
|
"0B",
|
|
|
|
"0C",
|
|
|
|
"0D",
|
|
|
|
"0E",
|
|
|
|
"0F"
|
|
|
|
];
|
|
|
|
|
|
|
|
const base16Elements = base16.map(base =>
|
2020-01-08 20:56:49 +00:00
|
|
|
div({
|
|
|
|
style: {
|
2020-01-22 00:22:19 +00:00
|
|
|
"background-color": `var(--base${base})`,
|
|
|
|
width: `${(1 / base16.length) * 100}%`,
|
|
|
|
height: "1em",
|
|
|
|
"margin-top": "1em",
|
|
|
|
display: "inline-block"
|
2020-01-08 20:56:49 +00:00
|
|
|
}
|
|
|
|
})
|
2020-01-22 00:22:19 +00:00
|
|
|
);
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-02-02 17:31:43 +00:00
|
|
|
const languageOption = (shortName, longName) =>
|
|
|
|
shortName === selectedLanguage
|
|
|
|
? option({ value: shortName, selected: true }, longName)
|
|
|
|
: option({ value: shortName }, longName);
|
|
|
|
|
2020-01-08 20:56:49 +00:00
|
|
|
return template(
|
2020-01-22 00:22:19 +00:00
|
|
|
section(
|
|
|
|
{ class: "message" },
|
2020-02-01 21:20:22 +00:00
|
|
|
h1(i18n.settings),
|
|
|
|
p(i18n.settingsIntro({ readmeUrl: "/meta/readme" })),
|
|
|
|
h2(i18n.theme),
|
|
|
|
p(i18n.themeIntro),
|
2020-01-22 00:22:19 +00:00
|
|
|
form(
|
|
|
|
{ action: "/theme.css", method: "post" },
|
|
|
|
select({ name: "theme" }, ...themeElements),
|
2020-02-01 21:20:22 +00:00
|
|
|
button({ type: "submit" }, i18n.setTheme)
|
2020-01-08 20:56:49 +00:00
|
|
|
),
|
|
|
|
base16Elements,
|
2020-02-01 22:08:37 +00:00
|
|
|
h2(i18n.language),
|
|
|
|
p(i18n.languageDescription),
|
|
|
|
form(
|
|
|
|
{ action: "/language", method: "post" },
|
2020-02-02 17:31:43 +00:00
|
|
|
select({ name: "language" }, [
|
|
|
|
languageOption("en", "English"),
|
|
|
|
languageOption("es", "Español")
|
|
|
|
]),
|
2020-02-01 22:08:37 +00:00
|
|
|
button({ type: "submit" }, i18n.setLanguage)
|
|
|
|
),
|
2020-02-01 21:20:22 +00:00
|
|
|
h2(i18n.status),
|
|
|
|
h3(i18n.peerConnections),
|
|
|
|
p(i18n.connectionsIntro),
|
|
|
|
peerList.length > 0 ? ul(peerList) : i18n.noConnections,
|
|
|
|
p(i18n.connectionActionIntro),
|
2020-01-27 00:55:48 +00:00
|
|
|
connButtons,
|
2020-02-01 21:20:22 +00:00
|
|
|
h3(i18n.indexes),
|
2020-01-22 23:19:00 +00:00
|
|
|
progressElements
|
2020-01-08 20:56:49 +00:00
|
|
|
)
|
2020-01-22 00:22:19 +00:00
|
|
|
);
|
|
|
|
};
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-02-04 21:27:41 +00:00
|
|
|
exports.publicView = ({
|
|
|
|
messages,
|
|
|
|
prefix = null,
|
|
|
|
viewTitle = null,
|
|
|
|
viewDescription = null
|
|
|
|
}) => {
|
2020-01-22 00:22:19 +00:00
|
|
|
const publishForm = "/publish/";
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-02-04 21:27:41 +00:00
|
|
|
let viewInfoBox = null;
|
|
|
|
if (viewTitle || viewDescription) {
|
|
|
|
viewInfoBox = section(
|
|
|
|
{ class: "viewInfo" },
|
|
|
|
viewTitle ? h1(viewTitle) : null,
|
|
|
|
viewDescription ? em(viewDescription) : null
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-01-08 20:56:49 +00:00
|
|
|
return template(
|
2020-02-04 21:27:41 +00:00
|
|
|
viewInfoBox,
|
2020-01-08 20:56:49 +00:00
|
|
|
prefix,
|
|
|
|
section(
|
2020-02-01 21:20:22 +00:00
|
|
|
header(strong(i18n.publish)),
|
2020-01-22 00:22:19 +00:00
|
|
|
form(
|
|
|
|
{ action: publishForm, method: "post" },
|
2020-01-08 20:56:49 +00:00
|
|
|
label(
|
2020-01-22 00:22:19 +00:00
|
|
|
{ for: "text" },
|
2020-02-01 21:20:22 +00:00
|
|
|
i18n.newMessageLabel({ markdownUrl, linkTarget: "_blank" })
|
2020-01-08 20:56:49 +00:00
|
|
|
),
|
2020-01-22 00:22:19 +00:00
|
|
|
textarea({ required: true, name: "text" }),
|
2020-02-01 21:20:22 +00:00
|
|
|
button({ type: "submit" }, i18n.submit)
|
2020-01-08 20:56:49 +00:00
|
|
|
)
|
|
|
|
),
|
2020-01-22 00:22:19 +00:00
|
|
|
messages.map(msg => post({ msg }))
|
|
|
|
);
|
|
|
|
};
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-02-04 21:27:41 +00:00
|
|
|
exports.popularView = ({ messages, prefix = null }) => {
|
|
|
|
return this.publicView({
|
|
|
|
messages,
|
|
|
|
prefix,
|
|
|
|
viewTitle: i18n.popular,
|
|
|
|
viewDescription: i18n.popularDescription
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
exports.extendedView = ({ messages, prefix = null }) => {
|
|
|
|
return this.publicView({
|
|
|
|
messages,
|
|
|
|
prefix,
|
|
|
|
viewTitle: i18n.extended,
|
|
|
|
viewDescription: i18n.extendedDescription
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
exports.latestView = ({ messages, prefix = null }) => {
|
|
|
|
return this.publicView({
|
|
|
|
messages,
|
|
|
|
prefix,
|
|
|
|
viewTitle: i18n.latest,
|
|
|
|
viewDescription: i18n.latestDescription
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
exports.topicsView = ({ messages, prefix = null }) => {
|
|
|
|
return this.publicView({
|
|
|
|
messages,
|
|
|
|
prefix,
|
|
|
|
viewTitle: i18n.topics,
|
|
|
|
viewDescription: i18n.topicsDescription
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-01-08 20:56:49 +00:00
|
|
|
exports.replyView = async ({ messages, myFeedId }) => {
|
2020-01-22 00:22:19 +00:00
|
|
|
const replyForm = `/reply/${encodeURIComponent(
|
|
|
|
messages[messages.length - 1].key
|
|
|
|
)}`;
|
2020-01-08 20:56:49 +00:00
|
|
|
|
2020-01-22 00:22:19 +00:00
|
|
|
let markdownMention;
|
2020-01-08 20:56:49 +00:00
|
|
|
|
|
|
|
const messageElements = await Promise.all(
|
2020-01-22 00:22:19 +00:00
|
|
|
messages.reverse().map(message => {
|
|
|
|
debug("%O", message);
|
|
|
|
const authorName = message.value.meta.author.name;
|
|
|
|
const authorFeedId = message.value.author;
|
2020-01-08 20:56:49 +00:00
|
|
|
if (authorFeedId !== myFeedId) {
|
|
|
|
if (message.key === messages[0].key) {
|
2020-01-22 00:22:19 +00:00
|
|
|
const x = `[@${authorName}](${authorFeedId})\n\n`;
|
|
|
|
markdownMention = x;
|
2020-01-08 20:56:49 +00:00
|
|
|
}
|
|
|
|
}
|
2020-01-22 00:22:19 +00:00
|
|
|
return post({ msg: message });
|
2020-01-08 20:56:49 +00:00
|
|
|
})
|
2020-01-22 00:22:19 +00:00
|
|
|
);
|
2020-01-08 20:56:49 +00:00
|
|
|
|
|
|
|
return template(
|
|
|
|
messageElements,
|
2020-02-01 21:20:22 +00:00
|
|
|
p(i18n.replyLabel({ markdownUrl })),
|
2020-01-22 00:22:19 +00:00
|
|
|
form(
|
|
|
|
{ action: replyForm, method: "post" },
|
|
|
|
textarea(
|
|
|
|
{
|
|
|
|
autofocus: true,
|
|
|
|
required: true,
|
|
|
|
name: "text"
|
|
|
|
},
|
|
|
|
markdownMention
|
|
|
|
),
|
|
|
|
button(
|
|
|
|
{
|
|
|
|
type: "submit"
|
|
|
|
},
|
2020-02-01 21:20:22 +00:00
|
|
|
i18n.reply
|
2020-01-22 00:22:19 +00:00
|
|
|
)
|
|
|
|
)
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-02-02 20:20:47 +00:00
|
|
|
exports.searchView = ({ messages, query }) => {
|
|
|
|
const searchInput = input({
|
|
|
|
name: "query",
|
|
|
|
required: false,
|
|
|
|
type: "search",
|
|
|
|
value: query
|
|
|
|
});
|
|
|
|
|
|
|
|
// - Minimum length of 3 because otherwise SSB-Search hangs forever. :)
|
|
|
|
// https://github.com/ssbc/ssb-search/issues/8
|
|
|
|
// - Using `setAttribute()` because HyperScript (the HyperAxe dependency has
|
|
|
|
// a bug where the `minlength` property is being ignored. No idea why.
|
|
|
|
// https://github.com/hyperhype/hyperscript/issues/91
|
|
|
|
searchInput.setAttribute("minlength", 3);
|
|
|
|
|
|
|
|
return template(
|
2020-01-22 00:22:19 +00:00
|
|
|
section(
|
|
|
|
form(
|
|
|
|
{ action: "/search", method: "get" },
|
2020-02-01 21:20:22 +00:00
|
|
|
header(strong(i18n.search)),
|
|
|
|
label({ for: "query" }, i18n.searchLabel),
|
2020-02-02 20:20:47 +00:00
|
|
|
searchInput,
|
2020-01-22 00:22:19 +00:00
|
|
|
button(
|
|
|
|
{
|
|
|
|
type: "submit"
|
|
|
|
},
|
2020-02-01 21:20:22 +00:00
|
|
|
i18n.submit
|
2020-01-22 00:22:19 +00:00
|
|
|
)
|
|
|
|
)
|
2020-01-08 20:56:49 +00:00
|
|
|
),
|
2020-01-22 00:22:19 +00:00
|
|
|
messages.map(msg => post({ msg }))
|
|
|
|
);
|
2020-02-02 20:20:47 +00:00
|
|
|
};
|