Merge pull request 'develop' (#9137) from develop into main

Reviewed-on: https://codeberg.org/thatonecalculator/calckey/pulls/9137

CALCKEY.md

@@ -20,7 +20,7 @@
 ## Work in progress
 
 - Better Messaging UI
-- Make your password hasn't been pwned
+- Better API Documentation
 - Remote follow button
 - Admin custom CSS
 - Add back time machine (jump to date)
@@ -86,6 +86,7 @@
 - Replace all `$ts` with i18n
 - AVIF support
 - Page drafts
+- Patron list
 - Obliteration of Ai-chan
 - [Make showing ads optional](https://github.com/misskey-dev/misskey/pull/8996)
 - [Tapping avatar in mobile opens account modal](https://github.com/misskey-dev/misskey/pull/9056)

README.md

@@ -33,9 +33,10 @@
 
 # 🥂 Links
 
+- 💸 Liberapay: <https://liberapay.com/ThatOneCalculator>
+  - Donate publicly to get your name on the Patron list!
 - 🚢 Flagship instance: <https://i.calckey.cloud>
 - 📣 Official account: <https://i.calckey.cloud/@calckey>
-- 💸 Liberapay: <https://liberapay.com/ThatOneCalculator>
 - 💁 Matrix support room: <https://matrix.to/#/#calckey:matrix.fedibird.com>
 - 📜 Instance list: <https://calckey.fediverse.observer/list>
 - 📖 JoinFediverse Wiki: <https://joinfediverse.wiki/What_is_Calckey%3F>
@@ -47,9 +48,7 @@ This guide will work for both **starting from scratch** and **migrating from Mis
 
 ## 📦 Dependencies
 
-- At least 🐢 [NodeJS](https://nodejs.org/en/) v16.15.0 (v18.12.1 recommended)
+- At least 🐢 [NodeJS](https://nodejs.org/en/) v18.12.1 (v19.1.0 recommended)
-
-> ⚠️ NodeJS v19 is not supported as of right now because of [this issue](https://github.com/nodejs/node-gyp/issues/2757).
 
 - 🐘 At least [PostgreSQL](https://www.postgresql.org/) v12
 

gulpfile.js

@@ -24,7 +24,7 @@ gulp.task('copy:client:fonts', () =>
 );
 
 gulp.task('copy:client:phosphor', () =>
-	gulp.src('./node_modules/phosphor-icons/src/css/*').pipe(gulp.dest('./built/_client_dist_/phosphor/'))
+	gulp.src('./node_modules/phosphor-icons/src/fonts/*').pipe(gulp.dest('./built/_client_dist_/phosphor/'))
 );
 
 gulp.task('copy:client:locales', cb => {

locales/en-US.yml

@@ -1001,9 +1001,9 @@ _aboutMisskey:
   allContributors: "All contributors"
   source: "Source code"
   translation: "Translate Misskey"
-  donate: "Donate to Misskey"
+  donate: "Donate to Calckey"
   morePatrons: "We also appreciate the support of many other helpers not listed here. Thank you! 🥰"
-  patrons: "Misskey patrons"
+  patrons: "Calckey patrons"
 _nsfw:
   respect: "Hide NSFW media"
   ignore: "Don't hide NSFW media"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.15",
+	"version": "12.119.0-calc.17",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/backend/package.json

@@ -4,8 +4,8 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"start": "node --experimental-json-modules ./built/index.js",
+		"start": "node ./built/index.js",
-		"start:test": "NODE_ENV=test node --experimental-json-modules ./built/index.js",
+		"start:test": "NODE_ENV=test node ./built/index.js",
 		"migrate": "typeorm migration:run -d ormconfig.js",
 		"build": "tsc -p tsconfig.json || echo done. && tsc-alias -p tsconfig.json",
 		"watch": "node watch.mjs",

packages/backend/src/server/api/endpoints.ts

@@ -275,6 +275,7 @@ import * as ep___pinnedUsers from './endpoints/pinned-users.js';
 import * as ep___customMOTD from './endpoints/custom-motd.js';
 import * as ep___customSplashIcons from './endpoints/custom-splash-icons.js';
 import * as ep___latestVersion from './endpoints/latest-version.js';
+import * as ep___patrons from './endpoints/patrons.js';
 import * as ep___promo_read from './endpoints/promo/read.js';
 import * as ep___requestResetPassword from './endpoints/request-reset-password.js';
 import * as ep___resetDb from './endpoints/reset-db.js';
@@ -599,6 +600,7 @@ const eps = [
 	['custom-motd', ep___customMOTD],
 	['custom-splash-icons', ep___customSplashIcons],
 	['latest-version', ep___latestVersion],
+	['patrons', ep___patrons],
 	['promo/read', ep___promo_read],
 	['request-reset-password', ep___requestResetPassword],
 	['reset-db', ep___resetDb],

packages/backend/src/server/api/endpoints/patrons.ts

@@ -0,0 +1,27 @@
+import define from '../define.js';
+
+export const meta = {
+	tags: ['meta'],
+	description: 'Get list of Calckey patrons from Codeberg',
+
+	requireCredential: false,
+	requireCredentialPrivateMode: false,
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {},
+	required: [],
+} as const;
+
+// eslint-disable-next-line import/no-default-export
+export default define(meta, paramDef, async () => {
+	let patrons;
+	await fetch('https://codeberg.org/thatonecalculator/calckey/raw/branch/develop/patrons.json')
+		.then((response) => response.json())
+		.then((data) => {
+			patrons = data['patrons'];
+		});
+
+	return patrons;
+});

packages/backend/src/server/api/openapi/gen-spec.ts

@@ -9,7 +9,7 @@ export function genOpenapiSpec() {
 
 		info: {
 			version: 'v1',
-			title: 'Misskey API',
+			title: 'Calckey API',
 			'x-logo': { url: '/static-assets/api-doc.png' },
 		},
 

packages/backend/src/server/web/views/base.pug

@@ -38,7 +38,6 @@ html
 		link(rel='prefetch' href=`/static-assets/badges/info.png?${ timestamp }`)
 		link(rel='prefetch' href=`/static-assets/badges/not-found.png?${ timestamp }`)
 		link(rel='prefetch' href=`/static-assets/badges/error.png?${ timestamp }`)
-		link(rel='stylesheet' href='/assets/phosphor/icons.css')
 		link(rel='stylesheet' href=`/static-assets/instance.css?${ timestamp }`)
 		link(rel='modulepreload' href=`/assets/${clientEntry.file}`)
 

packages/client/src/init.ts

@@ -3,6 +3,7 @@
  */
 
 import '@/style.scss';
+import '@/icons.css';
 
 //#region account indexedDB migration
 import { set } from '@/scripts/idb-proxy';

packages/client/src/pages/about-calckey.vue

@@ -24,12 +24,17 @@
 							{{ i18n.ts._aboutMisskey.source }}
 							<template #suffix>Codeberg</template>
 						</FormLink>
+						<FormLink to="https://liberapay.com/ThatOneCalculator" external>
+							<template #icon><i class="ph-money-bold ph-lg"></i></template>
+							{{ i18n.ts._aboutMisskey.donate }}
+							<template #suffix>Donate</template>
+						</FormLink>
 					</div>
 				</FormSection>
 				<FormSection>
 					<template #label>{{ i18n.ts._aboutMisskey.contributors }}</template>
 					<div class="_formLinks">
-						<FormLink to="https://codeberg.org/thatonecalculator" external>ThatOneCalculator (fork developer)</FormLink>
+						<FormLink to="/@thatonecalculator@stop.voring.me"><Mfm :text="'$[sparkle @thatonecalculator@stop.voring.me (Main fork developer)]'"/></FormLink>
 						<FormLink to="https://github.com/syuilo" external>Syuilo (Misskey developer)</FormLink>
 						<FormLink to="https://www.youtube.com/c/Henkiwashere" external>Henki (error images artist)</FormLink>
 					</div>
@@ -37,7 +42,11 @@
 				</FormSection>
 				<FormSection>
 					<template #label><Mfm text="$[jelly ❤]"/> {{ i18n.ts._aboutMisskey.patrons }}</template>
-					<div v-for="patron in patrons" :key="patron">{{ patron }}</div>
+					<MkSparkle>
+						<div v-for="patron in patrons" :key="patron" style="margin-bottom: 0.5rem">
+							<Mfm :text="`${patron}`"/>
+						</div>
+					</MkSparkle>
 					<template #caption>{{ i18n.ts._aboutMisskey.morePatrons }}</template>
 				</FormSection>
 			</div>
@@ -53,92 +62,14 @@ import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkLink from '@/components/MkLink.vue';
+import MkSparkle from '@/components/MkSparkle.vue';
 import { physics } from '@/scripts/physics';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-const patrons = [
+const patrons = await os.api('patrons');
-	'まっちゃとーにゅ',
-	'mametsuko',
-	'noellabo',
-	'AureoleArk',
-	'Gargron',
-	'Nokotaro Takeda',
-	'Suji Yan',
-	'oi_yekssim',
-	'regtan',
-	'Hekovic',
-	'nenohi',
-	'Gitmo Life Services',
-	'naga_rus',
-	'Efertone',
-	'Melilot',
-	'motcha',
-	'nanami kan',
-	'sevvie Rose',
-	'Hayato Ishikawa',
-	'Puniko',
-	'skehmatics',
-	'Quinton Macejkovic',
-	'YUKIMOCHI',
-	'dansup',
-	'mewl hayabusa',
-	'Emilis',
-	'Fristi',
-	'makokunsan',
-	'chidori ninokura',
-	'Peter G.',
-	'見当かなみ',
-	'natalie',
-	'Maronu',
-	'Steffen K9',
-	'takimura',
-	'sikyosyounin',
-	'Nesakko',
-	'YuzuRyo61',
-	'blackskye',
-	'sheeta.s',
-	'osapon',
-	'public_yusuke',
-	'CG',
-	'吴浥',
-	't_w',
-	'Jerry',
-	'nafuchoco',
-	'Takumi Sugita',
-	'GLaTAN',
-	'mkatze',
-	'kabo2468y',
-	'mydarkstar',
-	'Roujo',
-	'DignifiedSilence',
-	'uroco @99',
-	'totokoro',
-	'うし',
-	'kiritan',
-	'weepjp',
-	'Liaizon Wakest',
-	'Duponin',
-	'Blue',
-	'Naoki Hirayama',
-	'wara',
-	'Wataru Manji (manji0)',
-	'みなしま',
-	'kanoy',
-	'xianon',
-	'Denshi',
-	'Osushimaru',
-	'にょんへら',
-	'おのだい',
-	'Leni',
-	'oss',
-	'Weeble',
-	'蝉暮せせせ',
-	'ThatOneCalculator',
-	'pixeldesu',
-];
 
 let easterEggReady = false;
 let easterEggEmojis = $ref([]);

packages/client/src/pages/messaging/messaging-room.message.vue

@@ -90,7 +90,7 @@ function del(): void {
 			min-height: 38px;
 			border-radius: 16px;
 			max-width: 100%;
-			margin-left: 10rem;
+			margin-left: 4%;
 
 			& + * {
 				clear: both;
@@ -215,8 +215,8 @@ function del(): void {
 
 			> .balloon {
 				$color: var(--X4);
-				margin-right: 10rem;
+				margin-right: 4%;
-				margin-left: 0rem !important;
+				margin-left: 0%;
 				background: $color;
 
 				&.noText {

packages/client/src/pages/page.vue

@@ -4,14 +4,25 @@
 	<MkSpacer :content-max="800">
 		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
 			<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
+				<div class="footer">
+					<div><i class="ph-alarm-bold"/> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+					<div v-if="page.createdAt != page.updatedAt"><i class="ph-alarm-bold"></i> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
+				</div>
 				<div class="_block main">
-					<!--
+					<div class="banner">
+						<div class="banner-image">
 							<div class="header">
 								<h1>{{ page.title }}</h1>
 							</div>
-				-->
+							<div class="menu-actions">
-					<div class="banner">
+								<MkA v-tooltip="i18n.ts._pages.viewSource" :to="`/@${username}/pages/${pageName}/view-source`" class="menu _button"><i class="ph-code-bold ph-lg"/></MkA>
-						<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
+								<template v-if="$i && $i.id === page.userId">
+									<MkA v-tooltip="i18n.ts._pages.editPage" class="menu _button" :to="`/pages/edit/${page.id}`"><i class="ph-pencil-bold ph-lg"/></MkA>
+									<button v-if="$i.pinnedPageId === page.id" v-tooltip="i18n.ts.unpin" class="menu _button" @click="pin(false)"><i class="ph-push-pin-slash-bold ph-lg"/></button>
+									<button v-else v-tooltip="i18n.ts.pin" class="menu _button" @click="pin(true)"><i class="ph-push-pin-bold ph-lg"/></button>
+								</template>
+							</div>
+						</div>
 					</div>
 					<div class="content">
 						<XPage :page="page"/>
@@ -34,18 +45,14 @@
 							<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 						</div>
 					</div>
-					<div class="links">
+					<!-- <div class="links">
 						<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ i18n.ts._pages.viewSource }}</MkA>
 						<template v-if="$i && $i.id === page.userId">
 							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</MkA>
 							<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ i18n.ts.unpin }}</button>
 							<button v-else class="link _textButton" @click="pin(true)">{{ i18n.ts.pin }}</button>
 						</template>
-					</div>
+					</div> -->
-				</div>
-				<div class="footer">
-					<div><i class="ph-alarm-bold"></i> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
-					<div v-if="page.createdAt != page.updatedAt"><i class="ph-alarm-bold"></i> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
 				</div>
 				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 				<MkContainer :max-height="300" :foldable="true" class="other">
@@ -81,6 +88,7 @@ const props = defineProps<{
 }>();
 
 let page = $ref(null);
+let bgImg = $ref(null);
 let error = $ref(null);
 const otherPostsPagination = {
 	endpoint: 'users/pages' as const,
@@ -98,11 +106,21 @@ function fetchPage() {
 		username: props.username,
 	}).then(_page => {
 		page = _page;
+		bgImg = getBgImg();
 	}).catch(err => {
 		error = err;
 	});
 }
 
+function getBgImg(): string {
+	if (page.eyeCatchingImage != null) {
+		return `url(${page.eyeCatchingImage.url})`;
+	}
+	else {
+		return 'linear-gradient(to bottom right, #31748f, #9ccfd8)'
+	}
+}
+
 function share() {
 	navigator.share({
 		title: page.title ?? page.name,
@@ -118,7 +136,7 @@ function shareWithNote() {
 }
 
 function like() {
-	os.apiWithDialog('pages/like', {
+	os.api('pages/like', {
 		pageId: page.id,
 	}).then(() => {
 		page.isLiked = true;
@@ -180,23 +198,53 @@ definePageMetadata(computed(() => page ? {
 			margin: 1rem;
 		}
 
+		> .banner {
+			margin: 0rem !important;
+
+			> .banner-image {
+				// TODO: 良い感じのアスペクト比で表示
+				display: block;
+				width: 100%;
+				height: 150px;
+				background-position: center;
+				background-size: cover;
+				background-image: v-bind('bgImg');
+
 				> .header {
 					padding: 16px;
 
 					> h1 {
 						margin: 0;
+						color: white;
+						text-shadow: 0 0 8px #000;
 					}
 				}
 
-		> .banner {
+				> .menu-actions {
-			margin: 0rem !important;
+					-webkit-backdrop-filter: var(--blur, blur(8px));
+					backdrop-filter: var(--blur, blur(8px));
+					background: rgba(0, 0, 0, 0.2);
+					padding: 8px;
+					border-radius: 24px;
+					width: fit-content;
+					position: relative;
+					top: -10px;
+					left: 1rem;
 
-			> img {
+					> .menu {
-				// TODO: 良い感じのアスペクト比で表示
+						vertical-align: bottom;
-				display: block;
+						height: 31px;
-				width: 100%;
+						width: 31px;
-				height: 150px;
+						color: #fff;
-				object-fit: cover;
+						text-shadow: 0 0 8px #000;
+						font-size: 16px;
+					}
+
+					> .koudoku {
+						margin-left: 4px;
+						vertical-align: bottom;
+					}
+				}
 			}
 		}
 
@@ -227,7 +275,7 @@ definePageMetadata(computed(() => page ? {
 
 			> .other {
 				> button {
-					padding: 8px;
+					padding: 2px;
 					margin: 0 8px;
 
 					&:hover {

packages/client/src/style.scss

@@ -98,9 +98,9 @@ a {
 	-webkit-tap-highlight-color: transparent;
 }
 
-i {
+// i {
-	transform: translateY(0.1em);
+// 	transform: translateY(0.1em);
-}
+// }
 
 textarea, input {
 	tap-highlight-color: transparent;

patrons.json

@@ -0,0 +1,9 @@
+{
+	"patrons": [
+		"@atomicpoet@vancity.social",
+		"@shoq@newsroom.social",
+		"@pikadude@erisly.social",
+		"@sage@stop.voring.me",
+		"@sky@therian.club"
+	]
+}