From 7da37a3500894a0d69f2d19a55303a27b0c5ef7e 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 0968f3271..0022bb8d1 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 d59f00fe1..cfdaac600 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 88b34a336..3403381f7 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)">