From 09b78cb1ab9c3d71088906ca7842387fcf5389f1 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 18 Jul 2022 21:47:32 -0700
Subject: [PATCH] MOTD

---
 packages/backend/src/server/web/index.ts      | 19 ++++++-
 packages/backend/src/server/web/style.css     | 51 ++++++++++++++++++-
 .../backend/src/server/web/views/base.pug     |  7 ++-
 3 files changed, 72 insertions(+), 5 deletions(-)

diff --git a/packages/backend/src/server/web/index.ts b/packages/backend/src/server/web/index.ts
index 0968f3271c..0022bb8d10 100644
--- a/packages/backend/src/server/web/index.ts
+++ b/packages/backend/src/server/web/index.ts
@@ -268,6 +268,22 @@ router.get('/@:user.json', async ctx => {
 	}
 });
 
+// MOTD
+const motd = [
+	'If you\'re on mobile, you can tap install/add to homescreen to get the app!',
+	'You can click the time a note was posted to get a full view of the note.',
+	'Wanna find people to follow? Head over to the Explore tab!',
+	'Want more ways to post? You can make blogs in Pages and galleries in Gallery tab.',
+	'You can add cool stuff to notes like CWs, polls, multiple videos/gifs, and audio!',
+	'Use #hashtags to tag notes and reach more people, especially for #art.',
+	'If your note gets popular, it might show up on the Featured tap for up to 3 days!',
+	'Use the 4 buttons at the top (or the top drop-down on mobile) to switch timelines.',
+	'The Fediverse is made up of more than just Misskey.',
+	'Avatars and banners can be GIFs.',
+  'When writing a note, type $ to see a list of cool text effects (mfm).',
+	'Be gay, do crime.',
+];
+
 //#region SSR (for crawlers)
 // User
 router.get(['/@:user', '/@:user/:sub'], async (ctx, next) => {
@@ -295,8 +311,9 @@ router.get(['/@:user', '/@:user/:sub'], async (ctx, next) => {
 			icon: meta.iconUrl,
 			themeColor: meta.themeColor,
 			privateMode: meta.privateMode,
+			randomMOTD: motd[Math.floor(Math.random() * motd.length)],
 		});
-		ctx.set('Cache-Control', 'public, max-age=15');
+		ctx.set('Cache-Control', 'public, max-age=3');
 	} else {
 		// リモートユーザーなので
 		// モデレータがAPI経由で参照可能にするために404にはしない
diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
index d59f00fe16..cfdaac600d 100644
--- a/packages/backend/src/server/web/style.css
+++ b/packages/backend/src/server/web/style.css
@@ -13,7 +13,7 @@ html {
 	cursor: wait;
 	background-color: var(--bg);
 	opacity: 1;
-	transition: opacity 0.5s ease;
+	transition: opacity 0.2s ease;
 }
 
 #splashIcon {
@@ -26,6 +26,9 @@ html {
 	width: 64px;
 	height: 64px;
 	pointer-events: none;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-name: tada;
 }
 
 #splashSpinner {
@@ -38,7 +41,8 @@ html {
 	display: inline-block;
 	width: 28px;
 	height: 28px;
-	transform: translateY(70px);
+	transform: translateY(110px);
+	display: none !important;
 	color: var(--accent);
 }
 #splashSpinner > .spinner {
@@ -68,3 +72,46 @@ html {
 		transform: rotate(360deg);
 	}
 }
+
+@keyframes tada {
+	0% {
+		transform: scale3d(1, 1, 1);
+	}
+
+	10%,
+	20% {
+		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+	}
+
+	30%,
+	50%,
+	70%,
+	90% {
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+	}
+
+	40%,
+	60%,
+	80% {
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+	}
+
+	100% {
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+#splashText {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: auto;
+	display: inline-block;
+	width: 70%;
+	height: 0;
+	text-align: center;
+	padding-top: 100px;
+	font-family: sans-serif;
+}
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 88b34a3364..3403381f70 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -23,8 +23,8 @@ html
 		meta(charset='utf-8')
 		meta(name='application-name' content='Calckey')
 		meta(name='referrer' content='origin')
-		meta(name='theme-color' content= themeColor || '#86b300')
-		meta(name='theme-color-orig' content= themeColor || '#86b300')
+		meta(name='theme-color' content= themeColor || '#31748f')
+		meta(name='theme-color-orig' content= themeColor || '#31748f')
 		meta(property='twitter:card' content='summary')
 		meta(property='og:site_name' content= instanceName || 'Calckey')
 		meta(name='viewport' content='width=device-width, initial-scale=1')
@@ -76,6 +76,9 @@ html
 			| Please turn on your JavaScript
 		div#splash
 			img#splashIcon(src= icon || '/static-assets/splash.png')
+			span#splashText
+				block randomMOTD
+					= randomMOTD
 			div#splashSpinner
 				<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
 					<g transform="matrix(1,0,0,1,12,12)">