Uhhhhh
Some checks failed
continuous-integration/drone/push Build is failing

Signed-off-by: Sam Therapy <sam@samtherapy.net>
This commit is contained in:
Sam Therapy 2022-05-11 20:35:34 +02:00
parent e7ef7e4d7d
commit 61463ff239
Signed by: sam
GPG key ID: 4D8B07C18F31ACBD
50 changed files with 2782 additions and 5613 deletions

View file

@ -3,19 +3,19 @@ type: docker
name: default
steps:
- name: dependencies
image: node
commands:
- yarn
- name: dependencies
image: node
commands:
- yarn
- name: lint
image: node
commands:
- yarn lint
depends: [dependencies]
- name: lint
image: node
commands:
- yarn lint:ci
depends: [dependencies]
- name: test
image: node
commands:
- yarn test
depends: [lint]
- name: test
image: node
commands:
- yarn test
depends: [lint]

View file

@ -1 +1,2 @@
src/public/infinite-scroll.js
src/public/lib/infinite-scroll.pkgd.min.js
.yarn/

View file

@ -1,30 +1,19 @@
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
"env": {
"browser": true,
"es2021": true,
"node": true
},
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["prettier"],
"rules": {
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "always"],
"prettier/prettier": ["error", { "singleQuote": false }]
},
"extends": ["eslint:recommended", "plugin:prettier/recommended"]
}

4
.gitignore vendored
View file

@ -127,4 +127,6 @@ dist
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
.pnp.*
.dccache

2
.prettierignore Normal file
View file

@ -0,0 +1,2 @@
src/public/lib/infinite-scroll.pkgd.min.js
.yarn/

View file

@ -9,7 +9,7 @@ https://www.fedifeed.com
## User guide
The homepage has a tool for generating iframe code for you, with a sensible `sandbox` attribute. The feeds fit comfortably in a 400px wide area.
The homepage has a tool for generating iframe code for you, with a sensible `sandbox` attribute. The feeds fit comfortably in a 400px wide area.
## API
@ -19,28 +19,29 @@ The homepage has a tool for generating iframe code for you, with a sensible `san
> example: `/api/v1/feed?userurl=https%3A%2F%2Foctodon.social%2Fusers%2Ffenwick67&scale=90&theme=masto-light`
Returns a html page which displays a feed for a user URL. Note that URLs must be URI encoded (i.e. `encodeURIComponent('https://octodon.social/users/fenwick67')` ).
Returns a html page which displays a feed for a user URL. Note that URLs must be URI encoded (i.e. `encodeURIComponent('https://octodon.social/users/fenwick67')` ).
Querystring options:
| option | required | description |
| ------ | -------- | ----------- |
| `userurl` | **\*** | Mastodon/Pleroma/Misskey account URL (usually `https://${instance}/users/${username}` for MastoAPI or `https://${instance}/@${username}` for Misskey) |
| `instance` | **\*\***| Mastodon/Pleroma/Misskey instance URL (usually `https://${instance}`) |
| `user` | **\*\*** | Mastodon/Pleroma/Misskey user ID (usually `${username}`) |
| `feedurl` | no | a URL to a page of an ActivityPub post collection. Only used for pages beyond the first. |
| `theme` | no | either `masto-dark`, `masto-light` or `masto-auto`, to select the UI theme (default is `masto-dark`). `auto` will appear masto-light unless the user sets up masto-dark mode on their device. |
| `boosts` | no | whether to show boosts or not |
| `replies` | no | whether to show replies or not |
| `size` | no | the scale of the UI in percent. |
| option | required | description |
| ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `userurl` | **\*** | Mastodon/Pleroma/Misskey account URL (usually `https://${instance}/users/${username}` for MastoAPI or `https://${instance}/@${username}` for Misskey) |
| `instance` | **\*\*** | Mastodon/Pleroma/Misskey instance URL (usually `https://${instance}`) |
| `user` | **\*\*** | Mastodon/Pleroma/Misskey user ID (usually `${username}`) |
| `feedurl` | no | a URL to a page of an ActivityPub post collection. Only used for pages beyond the first. |
| `theme` | no | either `masto-dark`, `masto-light` or `masto-auto`, to select the UI theme (default is `masto-dark`). `auto` will appear masto-light unless the user sets up masto-dark mode on their device. |
| `boosts` | no | whether to show boosts or not |
| `replies` | no | whether to show replies or not |
| `size` | no | the scale of the UI in percent. |
\* `userurl` is required if `instance` and `user` are not specified.\*\*\* \
\*\* `instance` **and** `user` are required if `userurl` is not specified.\*\*\*
\*\*\* **`userurl` and `instance`/`user` are mutually exclusive.**
## Server Installation
This is a straightforward node project with zero databases or anything, you should just be able to run `yarn install` and then `yarn start` to get up and running. Set your `PORT` environment variable to change the port it listens on.
This is a straightforward node project with zero databases or anything, you should just be able to run `yarn install` and then `yarn start` to get up and running. Set your `PORT` environment variable to change the port it listens on.
## Improve me

160
index.js Normal file
View file

@ -0,0 +1,160 @@
import Express from "express";
// v2 api
import convertv2 from "./lib/convert.js";
import serveStatic from "serve-static";
import cors from "cors";
import errorPage from "./lib/errorPage.js";
import morgan from "morgan";
import { detector } from "megalodon";
import helmet from "helmet";
const app = Express();
app.use(
helmet({
contentSecurityPolicy: false,
crossOriginEmbedderPolicy: false,
crossOriginResourcePolicy: false,
})
);
const logger = morgan(":method :url :status via :referrer - :response-time ms");
app.use(
serveStatic("public", {
maxAge: "1d",
})
);
function doCache(res, durationSecs) {
res.set({
"Cache-Control": "max-age=" + durationSecs,
});
}
// this just redirects to the
app.options("/api/feed", cors());
app.get("/api/feed", cors(), logger, function (req, res) {
// get feed url
const feedUrl = req.query.url;
if (!feedUrl) {
res
.status(400)
.send(errorPage(400, "You need to specify a feed URL", null));
return;
}
const userUrl = feedUrl.replace(/\.atom.*/i, "");
const redirectUrl = "/api/v1/feed?";
const qs = ["userurl=" + encodeURIComponent(userUrl), "api=v1"];
["size", "theme", "boosts", "replies"].forEach((key) => {
if (typeof req.query[key] != "undefined") {
qs.push(key + "=" + encodeURIComponent(req.query[key]));
}
});
res.redirect(redirectUrl + qs.join("&"));
});
app.options("/api/v1/feed", cors());
app.get("/api/v1/feed", cors(), logger, async function (req, res) {
// get feed url
// userUrl
let type = req.query.instance_type;
let userUrl = req.query.userurl;
if (userUrl === "" || userUrl === undefined) {
const user = req.query.user;
const instance = req.query.instance;
if (type === "" || type === undefined) {
type = await detector(instance).catch(() => "");
}
if (type === "mastodon" || type === "pleroma")
userUrl = instance + "/users/" + user;
else if (type === "misskey") userUrl = instance + "/@" + user;
else {
res
.status(400)
.send(errorPage(400, "You need to specify a user URL", null));
return;
}
}
const feedUrl = req.query.feedurl;
const opts = {};
if (req.query.size) {
opts.size = req.query.size;
}
if (req.query.theme) {
opts.theme = req.query.theme;
if (opts.theme === "auto-auto") {
switch (type) {
case "mastodon":
opts.theme = "masto-auto";
break;
case "pleroma":
opts.theme = "pleroma";
break;
case "misskey":
opts.theme = "misskey-auto";
break;
default:
break;
}
} else if (opts.theme === "auto-light") {
switch (type) {
case "mastodon":
opts.theme = "masto-light";
break;
case "misskey":
opts.theme = "misskey-light";
break;
case "pleroma":
opts.theme = "pleroma-light";
break;
default:
break;
}
} else if (opts.theme === "auto-dark") {
switch (type) {
case "mastodon":
opts.theme = "masto-dark";
break;
case "misskey":
opts.theme = "misskey-dark";
break;
case "pleroma":
opts.theme = "pleroma-dark";
break;
default:
break;
}
}
}
if (req.query.header) opts.header = req.query.header.toLowerCase() === "true";
if (req.query.boosts) opts.boosts = req.query.boosts.toLowerCase() === "true";
if (req.query.replies)
opts.replies = req.query.replies.toLowerCase() === "true";
opts.instance_type = type;
opts.userUrl = userUrl;
opts.feedUrl = feedUrl;
opts.mastofeedUrl = req.url;
convertv2(opts)
.then((data) => {
doCache(res, 60 * 60);
res.status(200).send(data);
})
.catch((er) => {
res
.status(500)
.send(errorPage(500, null, { theme: opts.theme, size: opts.size }));
// TODO log the error
console.error(er, er.stack);
});
});
app.listen(process.env.PORT || 8000, "127.0.0.1", function () {
console.log("Server started, listening on " + (process.env.PORT || 8000));
});

View file

@ -12,238 +12,258 @@ const hour = 3600000;
// note: rejects on HTTP 4xx or 5xx
async function apGet(url) {
return new Promise(function(resolve,reject){
return new Promise(function (resolve, reject) {
// fail early
if (!url) {
reject(new Error("URL is invalid"));
}
// fail early
if (!url){
reject(new Error("URL is invalid"));
}
got( {
url:url,
cache:map,
headers: {
"accept": "application/activity+json"
}
})
.then(response=>JSON.parse(response.body))
.then(resolve)
.catch(reject);
});
got({
url: url,
cache: map,
headers: {
accept: "application/activity+json",
},
})
.then((response) => JSON.parse(response.body))
.then(resolve)
.catch(reject);
});
}
// like Promise.all except returns null on error instead of failing all the promises
async function promiseSome(proms){
function noRejectWrap(prom){
return new Promise(function(resolve){
prom // it's already been called
.then(resolve)
.catch( ()=>{
// console.warn(e);// for debugging
resolve(null);
});
async function promiseSome(proms) {
function noRejectWrap(prom) {
return new Promise(function (resolve) {
prom // it's already been called
.then(resolve)
.catch(() => {
// console.warn(e);// for debugging
resolve(null);
});
}
return await Promise.all(proms.map(noRejectWrap));
});
}
return await Promise.all(proms.map(noRejectWrap));
}
export default async function (opts) {
// let opts = opts;
// let opts = opts;
let feedUrl = opts.feedUrl;
let userUrl = opts.userUrl;
let isIndex = false;
let feedUrl = opts.feedUrl;
let userUrl = opts.userUrl;
let isIndex = false;
if (!userUrl) {
throw new Error("need user URL");
if (!userUrl) {
throw new Error("need user URL");
}
let user, feed;
// get user and feed in parallel if I have both URLs.
// can cache feed aggressively since it is a specific start and end.
if (userUrl && feedUrl) {
[user, feed] = await Promise.all([apGet(userUrl), apGet(feedUrl)]);
} else {
// get user, then outbox, then feed
user = await apGet(userUrl);
isIndex = true;
let outbox = await apGet(user.outbox);
// outbox.first can be a string for a URL, or an object with stuffs in it
if (typeof outbox.first == "object") {
feed = outbox.first;
} else {
feed = await apGet(outbox.first);
}
}
let user, feed;
// get user and feed in parallel if I have both URLs.
// can cache feed aggressively since it is a specific start and end.
if (userUrl && feedUrl){
[user, feed] = await Promise.all([ apGet(userUrl), apGet(feedUrl) ]);
}else{
// get user, then outbox, then feed
user = await apGet(userUrl,24 * hour);
isIndex = true;
let outbox = await apGet(user.outbox, 1 * hour);
// outbox.first can be a string for a URL, or an object with stuffs in it
if (typeof outbox.first == "object"){
feed = outbox.first;
} else {
feed = await apGet(outbox.first, hour/6);// 10 mins. Because the base feed URL can get new toots quickly.
}
}
let templateData = {
opts: opts,// from the request
meta: metaForUser(user),
items: await itemsForFeed(opts,user,feed),
nextPageLink: getNextPage(opts,user,feed),
isIndex: isIndex
};
return template(templateData);
let templateData = {
opts: opts, // from the request
meta: metaForUser(user),
items: await itemsForFeed(opts, user, feed),
nextPageLink: getNextPage(opts, user, feed),
isIndex: isIndex,
};
return template(templateData);
}
function metaForUser(user) {
return {
avatar: user.icon && user.icon.url?user.icon.url:null,
headerImage:user.image && user.image.url?user.image.url:null,
title: user.name||user.preferredUsername||null,
description: user.summary||null,
link:user.url||"#"
};
return {
avatar: user.icon && user.icon.url ? user.icon.url : null,
headerImage: user.image && user.image.url ? user.image.url : null,
title: user.name || user.preferredUsername || null,
description: user.summary || null,
link: user.url || "#",
};
}
async function itemsForFeed(opts,user,feed) {
async function itemsForFeed(opts, user, feed) {
let items = feed.orderedItems;
let items = feed.orderedItems;
if (opts.boosts){
// yes, I have to fetch all the fucking boosts for this whole feed apparently >:/
let boostData = [];
let boostUrls = feed.orderedItems.filter(i=>i.type=="Announce").map(i=>i.object);
// console.log(boostUrls);
boostData = await promiseSome(boostUrls.map(apGet));
if (opts.boosts) {
// yes, I have to fetch all the fucking boosts for this whole feed apparently >:/
let boostData = [];
let boostUrls = feed.orderedItems
.filter((i) => i.type == "Announce")
.map((i) => i.object);
// console.log(boostUrls);
boostData = await promiseSome(boostUrls.map(apGet));
// now get user data for each of those
let userData = await promiseSome(boostData.map(d=>d?d.attributedTo||"":null).map(apGet));
// now get user data for each of those
let userData = await promiseSome(
boostData.map((d) => (d ? d.attributedTo || "" : null)).map(apGet)
);
// put a ._userdata key on the item object if this is a boost
for (let i = 0; i < boostData.length; i ++){
if (userData[i] && boostData[i]){
boostData[i]._userdata = userData[i];
}
}
// some URLs may have failed but IDGAF
// console.log(boostData[0]);
boostData.forEach((boostToot)=>{
if (!boostToot){// failed request
return;
}
// inject in-place into items
let index = -1;
for (var i = 0; i < items.length; i ++){
if (items[i].object == boostToot.id){
index = i;
break;
}
}
if (index == -1){
console.warn("warning: couldn't match boost to item: ",boostToot);
return;
}
boostToot.object = boostToot;// this lets the later stage parser access object without errors :)
items[i] = boostToot;
});
// put a ._userdata key on the item object if this is a boost
for (let i = 0; i < boostData.length; i++) {
if (userData[i] && boostData[i]) {
boostData[i]._userdata = userData[i];
}
}
// some URLs may have failed but IDGAF
return items.filter((item)=>{
return typeof item.object == "object";// handle weird cases
}).map((item)=>{
// console.log(boostData[0]);
let enclosures = (item.object.attachment||[]).filter((a)=>{
return a.type == "Document";
}).map((a)=>{
return {
name:a.name,
type:a.mediaType,
url:a.url
};
boostData.forEach((boostToot) => {
if (!boostToot) {
// failed request
return;
}
// inject in-place into items
let index = -1;
for (var i = 0; i < items.length; i++) {
if (items[i].object == boostToot.id) {
index = i;
break;
}
}
if (index == -1) {
console.warn(`warning: couldn't match boost to item: ${boostToot}`);
return;
}
boostToot.object = boostToot; // this lets the later stage parser access object without errors :)
items[i] = boostToot;
});
}
return items
.filter((item) => {
return typeof item.object == "object"; // handle weird cases
})
.map((item) => {
let enclosures = (item.object.attachment || [])
.filter((a) => {
return a.type == "Document";
})
.map((a) => {
return {
name: a.name,
type: a.mediaType,
url: a.url,
};
});
let op = item._userdata?item._userdata:user;
let op = item._userdata ? item._userdata : user;
return {
isBoost:!!item._userdata,
title:item._userdata?user.preferredUsername+" shared a status by "+op.preferredUsername:"",
isReply:!!(item.object && item.object.inReplyTo),
hasCw:item.object.sensitive||false,
cw:item.object.summary,
content: item.object&&item.object.content?item.object.content:"",//TODO sanitize then render without entity escapes
atomHref:item.published?item.published.replace(/\W+/g,""):Math.random().toString().replace(".",""),// used for IDs
enclosures:enclosures,
stringDate:item.published?getTimeDisplay(Date.parse(item.published)):"",
permalink:item.object.id?item.object.id:"#",
author:{
uri:op.url,// link to author page
avatar:op.icon&&op.icon.url?op.icon.url:"",
displayName:op.name || op.preferredUsername,
fullName:op.preferredUsername+"@"+(new URL(op.url).hostname),
}
};
return {
isBoost: !!item._userdata,
title: item._userdata
? user.preferredUsername +
" shared a status by " +
op.preferredUsername
: "",
isReply: !!(item.object && item.object.inReplyTo),
hasCw: item.object.sensitive || false,
cw: item.object.summary,
content: item.object && item.object.content ? item.object.content : "", //TODO sanitize then render without entity escapes
atomHref: item.published
? item.published.replace(/\W+/g, "")
: Math.random().toString().replace("./g", ""), // used for IDs
enclosures: enclosures,
stringDate: item.published
? getTimeDisplay(Date.parse(item.published))
: "",
permalink: item.object.id ? item.object.id : "#",
author: {
uri: op.url, // link to author page
avatar: op.icon && op.icon.url ? op.icon.url : "",
displayName: op.name || op.preferredUsername,
fullName: op.preferredUsername + "@" + new URL(op.url).hostname,
},
};
});
}
function getNextPage(opts,user,feed){
//based on feed.next
if (!feed.next){return null;}
// take feed.next, uriencode it, then take user url, then take options.mastofeedUrl
//let base = opts.mastofeedUrl.slice(0,opts.mastofeedUrl.indexOf("?"));
function getNextPage(opts, user, feed) {
//based on feed.next
if (!feed.next) {
return null;
}
// take feed.next, uriencode it, then take user url, then take options.mastofeedUrl
//let base = opts.mastofeedUrl.slice(0,opts.mastofeedUrl.indexOf("?"));
let ret = "/api/v1/feed?userurl=" + encodeURIComponent(opts.userUrl) + "&feedurl=" +encodeURIComponent(feed.next) + "&instance_type=" + opts.instance_type;
// add other params to the end
(["theme","header","size","boosts","replies"]).forEach((k)=>{
if (typeof opts[k] != "undefined"){
ret+=`&${k}=${ opts[k].toString() }`;
}
});
return ret;
let ret =
"/api/v1/feed?userurl=" +
encodeURIComponent(opts.userUrl) +
"&feedurl=" +
encodeURIComponent(feed.next) +
"&instance_type=" +
opts.instance_type;
// add other params to the end
["theme", "header", "size", "boosts", "replies"].forEach((k) => {
if (typeof opts[k] != "undefined") {
ret += `&${k}=${opts[k].toString()}`;
}
});
return ret;
}
// utilities below
function getTimeDisplay(d) {
// let d = d;
if (typeof d !== "object") {
d = new Date(d);
}
// convert to number
let dt = d.getTime();
let now = Date.now();
// let d = d;
if (typeof d !== "object") {
d = new Date(d);
}
// convert to number
let dt = d.getTime();
let now = Date.now();
let delta = now - dt;
// over 6 days ago
if (delta > 1000 * 60 * 60 * 24 * 6) {
return isoDateToEnglish(d.toISOString());
} else {
return format(dt);
}
let delta = now - dt;
// over 6 days ago
if (delta > 1000 * 60 * 60 * 24 * 6) {
return isoDateToEnglish(d.toISOString());
} else {
return format(dt);
}
}
function isoDateToEnglish(d) {
let dt = d.split(/[t-]/gi);
let months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
let dt = d.split(/[t-]/ig);
let months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
return months[Number(dt[1]) - 1] + " " + dt[2] + ", " + dt[0];
return months[Number(dt[1]) - 1] + " " + dt[2] + ", " + dt[0];
}

View file

@ -2,35 +2,34 @@ import { compile } from "ejs";
import { readFileSync } from "fs";
let template = compile(readFileSync("./lib/template.ejs", "utf8"));
export default function(code,message,displayOptions){
export default function (code, message, displayOptions) {
let msg;
// const displayOptions = displayOptions || {};
let msg;
// const displayOptions = displayOptions || {};
if (code == 500 && !message) {
msg =
"<p>Sorry, we are having trouble fetching posts for this user. Please try again later.</p><br><p>If the issue persists, <a href=`https://git.froth.zone/Sam/fedifeed/issues`>please open an issue on Gitea</a>, or message sam@froth.zone</p>";
} else {
msg = message || "";
}
if (code == 500 && !message){
msg = "<p>Sorry, we are having trouble fetching posts for this user. Please try again later.</p><br><p>If the issue persists, <a href=\"https://git.froth.zone/Sam/fedifeed/issues\">please open an issue on Gitea</a>, or message sam@froth.zone</p>";
}else{
msg = message||"";
}
let options = {
opts: {
header: true,
theme: displayOptions?.theme || null,
size: displayOptions?.size || null,
},
meta: {
title: code.toString(),
description: msg,
link: "#",
// avatar:'',
// headerImage:''
},
items: [],
nextPageLink: null,
isIndex: true,
};
let options = {
opts:{
header:true,
theme:displayOptions.theme||null,
size:displayOptions.size||null
},
meta:{
title:code.toString(),
description:msg,
link:"#"
// avatar:'',
// headerImage:''
},
items:[],
nextPageLink:null,
isIndex:true
};
return template(options);
}
return template(options);
}

View file

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
@ -6,7 +7,7 @@
<% if (opts.theme && opts.theme.toLowerCase() == 'masto-light'){ %>
<link rel="stylesheet" href="/css/masto-light.css"></link>
<% } else if (opts.theme && opts.theme.toLowerCase() == 'auto'){ %>
<% } else if (opts.theme && opts.theme.toLowerCase() == 'masto-auto'){ %>
<link rel="stylesheet" href="/css/masto-auto.css"></link>
<% } else if (opts.theme && opts.theme.toLowerCase() == 'misskey-dark'){ %>
<link rel="stylesheet" href="/css/misskey-dark.css"></link>
@ -113,7 +114,7 @@
<% } %>
<% if ( isIndex ){ %>
<script src="/infinite-scroll.js"></script>
<script src="/lib/infinite-scroll.pkgd.min.js"></script>
<script type="text/javascript">
let lastPageLoaded = null;

View file

@ -1,26 +1,31 @@
{
"dependencies": {
"cors": "^2.8.5",
"ejs": "^3.1.6",
"express": "^4.17.2",
"feedparser": "^2.2.10",
"got": "^12.0.1",
"megalodon": "^4.0.0",
"morgan": "^1.10.0",
"serve-static": "^1.14.2",
"timeago.js": "^4.0.2"
},
"main": "index.js",
"type": "module",
"license": "MIT",
"scripts": {
"start": "yarn build-styles && node src/index.js",
"build-styles": "node src/build-styles.js",
"lint": "eslint --ext .js src lib",
"test": "echo \"Error: no test specified\" && exit 0"
},
"devDependencies": {
"eslint": "8.15.0",
"node-sass": "7.0.1"
}
}
{
"dependencies": {
"cors": "2.8.5",
"ejs": "3.1.7",
"express": "4.18.1",
"feedparser": "2.2.10",
"got": "12.0.4",
"helmet": "5.0.2",
"megalodon": "4.0.1",
"morgan": "1.10.0",
"serve-static": "1.15.0",
"timeago.js": "4.0.2"
},
"main": "index.js",
"type": "module",
"license": "MIT",
"scripts": {
"start": "yarn node index.js",
"lint": "eslint --fix . && prettier --write .",
"lint:ci": "eslint . && prettier . --check",
"test": "echo \"Error: no test specified\" && exit 0"
},
"devDependencies": {
"eslint": "8.15.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-prettier": "4.0.0",
"prettier": "2.6.2",
"sass": "1.51.0"
},
"packageManager": "yarn@3.2.0"
}

View file

@ -1,132 +1,162 @@
html,
body {
background-color: #ffffff;
font-family: 'Roboto', roboto, Arial, sans-serif;
font-family: "Roboto", roboto, Arial, sans-serif;
color: #282c37;
font-weight: lighter;
overflow-x: hidden;
font-size: 100%;
word-break: break-word; }
word-break: break-word;
}
* {
margin: 0;
padding: 0; }
padding: 0;
}
a,
a * {
color: #2b90d9; }
color: #2b90d9;
}
.meta {
background-color: #ecf0f4; }
background-color: #ecf0f4;
}
.header {
display: flex;
background-size: cover;
min-height: 8rem;
color: #282c37; }
.header .header-left, .header .header-right {
margin: 0; }
.header .header-left {
min-width: 8rem;
position: relative;
text-align: center;
background: rgba(255, 255, 255, 0.3); }
.header .header-left .avatar {
width: 6rem;
height: 6rem;
position: relative;
top: calc(50% - 3rem); }
.header .header-right {
flex-grow: 1;
font-size: 0.9rem;
padding: 0.9rem;
background: rgba(255, 255, 255, 0.85); }
.header .header-title {
font-size: 1.3rem; }
color: #282c37;
}
.header .header-left,
.header .header-right {
margin: 0;
}
.header .header-left {
min-width: 8rem;
position: relative;
text-align: center;
background: rgba(255, 255, 255, 0.3);
}
.header .header-left .avatar {
width: 6rem;
height: 6rem;
position: relative;
top: calc(50% - 3rem);
}
.header .header-right {
flex-grow: 1;
font-size: 0.9rem;
padding: 0.9rem;
background: rgba(255, 255, 255, 0.85);
}
.header .header-title {
font-size: 1.3rem;
}
.item {
padding: 1rem;
border-top: solid 1px #8494ab; }
border-top: solid 1px #8494ab;
}
.item-content,
.cw,
.title {
font-size: 1.1rem;
font-weight: lighter; }
font-weight: lighter;
}
.item-content *, .cw {
.item-content *,
.cw {
margin: 1rem 0;
line-height: 1.4rem; }
line-height: 1.4rem;
}
.item-title,
.date,
.author-fullname {
color: #90a1ba;
font-size: 0.9rem; }
font-size: 0.9rem;
}
.date {
margin: 1rem 0 0 0;
text-decoration: none;
display: block; }
display: block;
}
.date:hover {
text-decoration: underline; }
text-decoration: underline;
}
.item-title {
margin-bottom: 0.7rem; }
margin-bottom: 0.7rem;
}
.author {
display: flex;
margin-bottom: 1rem; }
margin-bottom: 1rem;
}
.author-info {
margin: 0 1rem;
display: flex;
flex-direction: column;
justify-content: space-around; }
.author-info .author-displayname {
font-size: 1.2rem;
color: #282c37;
text-decoration: none;
display: block;
font-weight: bolder; }
justify-content: space-around;
}
.author-info .author-displayname {
font-size: 1.2rem;
color: #282c37;
text-decoration: none;
display: block;
font-weight: bolder;
}
.avatar {
width: 3rem;
height: 3rem;
border: none;
border-radius: 10%; }
.avatar.circular {
border-radius: 100%; }
border-radius: 10%;
}
.avatar.circular {
border-radius: 100%;
}
.enclosures {
padding: 0.5em 0;
display: flex;
flex-wrap: wrap;
flex-direction: row;
overflow: hidden; }
overflow: hidden;
}
.enclosure {
display: flex;
flex: 1 1 auto;
width: 50%;
border: none;
max-height: 12rem; }
max-height: 12rem;
}
a.enclosure {
cursor: zoom-in; }
cursor: zoom-in;
}
.enclosure > * {
flex: 1 1 auto;
width: 100%;
height: 100%;
object-fit: cover; }
object-fit: cover;
}
.meta .title {
font-weight: bold; }
font-weight: bold;
}
.hidden {
display: none; }
display: none;
}
.button {
padding: 0.5rem 1rem;
@ -140,145 +170,182 @@ a.enclosure {
font-weight: 400;
cursor: pointer;
text-transform: uppercase;
user-select: none; }
user-select: none;
}
label.button {
padding: 0.25rem 0.5rem;
margin: 0.4rem;
background: #8494ab;
color: #ffffff;
font-size: 0.8rem; }
font-size: 0.8rem;
}
input[type=checkbox] {
input[type="checkbox"] {
position: absolute;
left: -9999px; }
left: -9999px;
}
input[type=checkbox]:checked ~ label::after {
content: " Less"; }
input[type="checkbox"]:checked ~ label::after {
content: " Less";
}
input[type=checkbox]:not(:checked) ~ label::after {
content: " More"; }
input[type="checkbox"]:not(:checked) ~ label::after {
content: " More";
}
input[type=checkbox]:not(:checked) ~ div {
display: none; }
input[type="checkbox"]:not(:checked) ~ div {
display: none;
}
.item-content,
.description,
.title,
html,
body {
font-weight: normal; }
font-weight: normal;
}
@media (prefers-color-scheme: masto-dark) {
html,
body {
background-color: #282c37;
font-family: 'Roboto', roboto, Arial, sans-serif;
font-family: "Roboto", roboto, Arial, sans-serif;
color: #ffffff;
font-weight: lighter;
overflow-x: hidden;
font-size: 100%;
word-break: break-word; }
word-break: break-word;
}
* {
margin: 0;
padding: 0; }
padding: 0;
}
a,
a * {
color: #2b90d9; }
color: #2b90d9;
}
.meta {
background-color: #39404d; }
background-color: #39404d;
}
.header {
display: flex;
background-size: cover;
min-height: 8rem;
color: #ffffff; }
.header .header-left, .header .header-right {
margin: 0; }
.header .header-left {
min-width: 8rem;
position: relative;
text-align: center;
background: rgba(40, 44, 55, 0.3); }
.header .header-left .avatar {
width: 6rem;
height: 6rem;
position: relative;
top: calc(50% - 3rem); }
.header .header-right {
flex-grow: 1;
font-size: 0.9rem;
padding: 0.9rem;
background: rgba(40, 44, 55, 0.85); }
.header .header-title {
font-size: 1.3rem; }
color: #ffffff;
}
.header .header-left,
.header .header-right {
margin: 0;
}
.header .header-left {
min-width: 8rem;
position: relative;
text-align: center;
background: rgba(40, 44, 55, 0.3);
}
.header .header-left .avatar {
width: 6rem;
height: 6rem;
position: relative;
top: calc(50% - 3rem);
}
.header .header-right {
flex-grow: 1;
font-size: 0.9rem;
padding: 0.9rem;
background: rgba(40, 44, 55, 0.85);
}
.header .header-title {
font-size: 1.3rem;
}
.item {
padding: 1rem;
border-top: solid 1px #626d80; }
border-top: solid 1px #626d80;
}
.item-content,
.cw,
.title {
font-size: 1.1rem;
font-weight: lighter; }
.item-content *, .cw {
font-weight: lighter;
}
.item-content *,
.cw {
margin: 1rem 0;
line-height: 1.4rem; }
line-height: 1.4rem;
}
.item-title,
.date,
.author-fullname {
color: #9baec8;
font-size: 0.9rem; }
font-size: 0.9rem;
}
.date {
margin: 1rem 0 0 0;
text-decoration: none;
display: block; }
display: block;
}
.date:hover {
text-decoration: underline; }
text-decoration: underline;
}
.item-title {
margin-bottom: 0.7rem; }
margin-bottom: 0.7rem;
}
.author {
display: flex;
margin-bottom: 1rem; }
margin-bottom: 1rem;
}
.author-info {
margin: 0 1rem;
display: flex;
flex-direction: column;
justify-content: space-around; }
.author-info .author-displayname {
font-size: 1.2rem;
color: #ffffff;
text-decoration: none;
display: block;
font-weight: bolder; }
justify-content: space-around;
}
.author-info .author-displayname {
font-size: 1.2rem;
color: #ffffff;
text-decoration: none;
display: block;
font-weight: bolder;
}
.avatar {
width: 3rem;
height: 3rem;
border: none;
border-radius: 10%; }
.avatar.circular {
border-radius: 100%; }
border-radius: 10%;
}
.avatar.circular {
border-radius: 100%;
}
.enclosures {
padding: 0.5em 0;
display: flex;
flex-wrap: wrap;
flex-direction: row;
overflow: hidden; }
overflow: hidden;
}
.enclosure {
display: flex;
flex: 1 1 auto;
width: 50%;
border: none;
max-height: 12rem; }
max-height: 12rem;
}
a.enclosure {
cursor: zoom-in; }
cursor: zoom-in;
}
.enclosure > * {
flex: 1 1 auto;
width: 100%;
height: 100%;
object-fit: cover; }
object-fit: cover;
}
.meta .title {
font-weight: bold; }
font-weight: bold;
}
.hidden {
display: none; }
display: none;
}
.button {
padding: 0.5rem 1rem;
border: none;
@ -291,19 +358,26 @@ body {
font-weight: 400;
cursor: pointer;
text-transform: uppercase;
user-select: none; }
user-select: none;
}
label.button {
padding: 0.25rem 0.5rem;
margin: 0.4rem;
background: #626d80;
color: #282c37;
font-size: 0.8rem; }
input[type=checkbox] {
font-size: 0.8rem;
}
input[type="checkbox"] {
position: absolute;
left: -9999px; }
input[type=checkbox]:checked ~ label::after {
content: " Less"; }
input[type=checkbox]:not(:checked) ~ label::after {
content: " More"; }
input[type=checkbox]:not(:checked) ~ div {
display: none; } }
left: -9999px;
}
input[type="checkbox"]:checked ~ label::after {
content: " Less";
}
input[type="checkbox"]:not(:checked) ~ label::after {
content: " More";
}
input[type="checkbox"]:not(:checked) ~ div {
display: none;
}
}

199
public/css/masto-dark.css Normal file
View file

@ -0,0 +1,199 @@
html,
body {
background-color: #282c37;
font-family: "Roboto", roboto, Arial, sans-serif;
color: #ffffff;
font-weight: lighter;
overflow-x: hidden;
font-size: 100%;
word-break: break-word;
}
* {
margin: 0;
padding: 0;
}
a,
a * {
color: #2b90d9;
}
.meta {
background-color: #39404d;
}
.header {
display: flex;
background-size: cover;
min-height: 8rem;
color: #ffffff;
}
.header .header-left,
.header .header-right {
margin: 0;
}
.header .header-left {
min-width: 8rem;
position: relative;
text-align: center;
background: rgba(40, 44, 55, 0.3);
}
.header .header-left .avatar {
width: 6rem;
height: 6rem;
position: relative;
top: calc(50% - 3rem);
}
.header .header-right {
flex-grow: 1;
font-size: 0.9rem;
padding: 0.9rem;
background: rgba(40, 44, 55, 0.85);
}
.header .header-title {
font-size: 1.3rem; </