spec(frontend): kawaii モード

MisskeyIO · May 6, 2024 · a4ba6b8 · a4ba6b8
1 parent ea88f85
commit a4ba6b8
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 6 deletions.
diff --git a/packages/frontend/assets/kawaii/LICENSE b/packages/frontend/assets/kawaii/LICENSE
@@ -0,0 +1,4 @@
+The logo and derivative works contained in this folder are copyrighted by SAWARATSUKI 
+and used by Misskey Project under license from SAWARATSUKI.
+The assets in this folder are exempt from CC BY 4.0 as well as AGPLv3.
+Please note that any use outside of the intended use may violate the copyright.
diff --git a/packages/frontend/assets/kawaii/about-icon.png b/packages/frontend/assets/kawaii/about-icon.png
diff --git a/packages/frontend/assets/kawaii/misskey-io.png b/packages/frontend/assets/kawaii/misskey-io.png
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
@@ -124,8 +124,8 @@ export async function common(createVue: () => App<Element>) {
  miLocalStorage.setItem('v', instance.version);
  });
 
- //#region loginId
  const params = new URLSearchParams(location.search);
+ //#region loginId
  const loginId = params.get('loginId');
 
  if (loginId) {
@@ -142,6 +142,14 @@ export async function common(createVue: () => App<Element>) {
  }
  //#endregion
 
+ //#region kawaii
+ if (params.has('kawaii')) {
+ miLocalStorage.setItem('kawaii', 'true');
+ } else {
+ miLocalStorage.removeItem('kawaii');
+ }
+ //#endregion
+
  // NOTE: この処理は必ずクライアント更新チェック処理より後に来ること(テーマ再構築のため)
  watch(defaultStore.reactiveState.darkMode, (darkMode) => {
  applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));

diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue
@@ -6,7 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div v-if="instance" :class="$style.root">
  <div :class="[$style.main, $style.panel]">
- <img :src="instance.iconUrl || '/favicon.ico'" alt="" :class="$style.mainIcon"/>
+ <img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/misskey-io.png" alt="Logo by @sawaratsuki@misskey.io" :class="$style.mainIconAlt"/>
+ <img v-else :src="instance.iconUrl || '/favicon.ico'" alt="" :class="$style.mainIcon"/>
  <button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
  <div :class="$style.mainFg">
  <h1 :class="$style.mainTitle">
@@ -81,6 +82,7 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
+import { miLocalStorage } from '@/local-storage.js';
 import MkNumber from '@/components/MkNumber.vue';
 import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.vue';
 import { openInstanceMenu } from '@/ui/_common_/common';
@@ -139,6 +141,13 @@ function exploreOtherServers() {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
 }
 
+.mainIconAlt {
+ width: 85%;
+ margin-top: -47px;
+ vertical-align: bottom;
+ filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
+}
+
 .mainMenu {
  position: absolute;
  top: 16px;

diff --git a/packages/frontend/src/local-storage.ts b/packages/frontend/src/local-storage.ts
@@ -38,7 +38,8 @@ type Keys =
  `aiscript:${string}` |
  'lastEmojisFetchedAt' | // DEPRECATED, stored in indexeddb (13.9.0~)
  'emojis' | // DEPRECATED, stored in indexeddb (13.9.0~);
- `channelLastReadedAt:${string}`
+ `channelLastReadedAt:${string}` |
+ 'kawaii'
 
 export const miLocalStorage = {
  getItem: (key: Keys): string | null => window.localStorage.getItem(key),

diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
@@ -11,7 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
  <div class="_gaps_m znqjceqz">
  <div v-panel class="about">
  <div ref="containerEl" class="container" :class="{ playing: easterEggEngine != null }">
- <img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
+ <img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/about-icon.png" alt="" class="iconAlt" draggable="false" @load="iconLoaded" @click="gravity"/>
+ <img v-else src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
+ <Mfm v-if="miLocalStorage.getItem('kawaii')" text="Logo by @sawaratsuki@misskey.io" class="iconCredit"/>
  <div class="misskey">Misskey</div>
  <div class="version">v{{ version }}</div>
  <span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }">
@@ -137,6 +139,7 @@ import { physics } from '@/scripts/physics.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { defaultStore } from '@/store.js';
+import { miLocalStorage } from '@/local-storage.js';
 import * as os from '@/os.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { claimAchievement, claimedAchievements } from '@/scripts/achievements.js';
@@ -443,6 +446,21 @@ definePageMetadata(() => ({
  z-index: 1;
  }
 
+ > .iconAlt {
+ display: block;
+ width: 85%;
+ margin: 0 auto;
+ position: relative;
+ z-index: 1;
+ }
+
+ > .iconCredit {
+ margin: 0 auto;
+ width: max-content;
+ position: relative;
+ z-index: 1;
+ }
+
  > .misskey {
  margin: 0.75em auto 0 auto;
  width: max-content;

diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
@@ -11,7 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
  <div class="_gaps_m">
  <div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
  <div style="overflow: clip;">
- <img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
+ <img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/misskey-io.png" alt="" :class="$style.bannerIconAlt"/>
+ <img v-else :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
+ <Mfm v-if="miLocalStorage.getItem('kawaii')" text="Logo by @sawaratsuki@misskey.io" :class="$style.iconCredit"/>
  <div :class="$style.bannerName">
  <b>{{ instance.name ?? host }}</b>
  </div>
@@ -168,6 +170,7 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { instance } from '@/instance.js';
+import { miLocalStorage } from '@/local-storage.js';
 
 const props = withDefaults(defineProps<{
  initialTab?: string;
@@ -230,6 +233,12 @@ definePageMetadata(() => ({
  border-radius: 8px;
 }
 
+.bannerIconAlt {
+ display: block;
+ margin: 16px auto 0 auto;
+ width: 85%;
+}
+
 .bannerName {
  display: block;
  padding: 16px;
@@ -238,6 +247,13 @@ definePageMetadata(() => ({
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
 }
 
+> .iconCredit {
+ margin: 0 auto;
+ width: max-content;
+ position: relative;
+ z-index: 1;
+}
+
 .rules {
  counter-reset: item;
  list-style: none;

diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
@@ -9,7 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
  <div :class="$style.top">
  <div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
  <button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
- <img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
+ <img v-if="miLocalStorage.getItem('kawaii')" src="/client-assets/kawaii/misskey-io.png" alt="" :class="$style.instanceIconAlt"/>
+ <img v-else :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
  </button>
  </div>
  <div :class="$style.middle">
@@ -68,6 +69,7 @@ import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
+import { miLocalStorage } from '@/local-storage.js';
 
 const iconOnly = ref(false);
 
@@ -173,6 +175,11 @@ function more(ev: MouseEvent) {
  aspect-ratio: 1;
  }
 
+ .instanceIconAlt {
+ display: inline-block;
+ width: 85%;
+ }
+
  .bottom {
  position: sticky;
  bottom: 0;