Add new logos & asset generation script

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "assets/branding"]
+	path = assets/branding
+	url = https://iceshrimp.dev/iceshrimp/branding.git

assets/branding

@@ -0,0 +1 @@
+Subproject commit 1c4e96bcfe61c981a1e8f23142082ac8ce7fc575

assets/generate.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+# Dependencies: imagick/convert, inkscape
+# Be sure to check out the submodule before running this
+crop=branding/prepared/svg-crop
+svg=branding/prepared/svg
+png=branding/prepared/png
+cd "${0%/*}"
+
+# General assets
+convert -background "#3B364C" -resize 1600x "$svg/full-light.svg" "logo.png"
+
+# Client assets
+cp "$crop/wordmark-white.svg" "../packages/client/assets/welcome-logo.svg"
+convert -background "#E7EDFF" -resize 1024x "$svg/full-dark.svg" "../packages/client/assets/about-icon-dark.png"
+convert -background "#3B364C" -resize 1024x "$svg/full-light.svg" "../packages/client/assets/about-icon-light.png"
+
+# Backend assets
+convert -background "#E7EDFF" -resize 1024x "$svg/full-dark.svg" "../packages/backend/assets/api-doc.png"
+convert -background "#E7EDFF" -resize 1024x "$svg/wordmark-dark.svg" "../packages/backend/assets/mail-wordmark.png"
+convert -background "#3B364C" -resize x750 -gravity center -extent 1024x1024 "$crop/logo-light.svg" "../packages/backend/assets/apple-touch-icon.png"
+convert -background "#3B364C" -resize x192 -gravity center -extent 192x192   "$svg/logo-light.svg"   "../packages/backend/assets/icons/192.png"
+convert -background "#3B364C" -resize x512 -gravity center -extent 512x512   "$svg/logo-light.svg"   "../packages/backend/assets/icons/512.png"
+convert -background "#3B364C" -resize x480 -gravity center -extent 512x512   "$svg/logo-light.svg"   "../packages/backend/assets/icons/maskable.png"
+convert -background none      -resize x512 -gravity center -extent 512x512   "$crop/logo-black.svg" "../packages/backend/assets/icons/monochrome.png"
+convert \( -background "#3B364C" -resize x750 -gravity center -extent 1024x1024  "$crop/logo-light.svg" \) \( -size 1024x1024 xc:black -fill white -draw "roundRectangle 0,0,1024,1024 128,128" \) -alpha Off -compose CopyOpacity -composite "../packages/backend/assets/splash.png"
+convert \( -background "#3B364C" -resize x200 -gravity center -extent 256x256    "$crop/logo-light.svg" \) \( -size 256x256 xc:black   -fill white -draw "roundRectangle 0,0,256,256 32,32" \)   -alpha Off -compose CopyOpacity -composite "../packages/backend/assets/favicon.png"
+convert \( -background "#3B364C" -resize x200 -gravity center -extent 256x256    "$crop/logo-light.svg" \) \( -size 256x256 xc:black   -fill white -draw "roundRectangle 0,0,256,256 32,32" \)   -alpha Off -compose CopyOpacity -composite "../packages/backend/assets/favicon.ico"

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

@@ -71,7 +71,7 @@ html
 			br
 			| Please turn on your JavaScript
 		div#splash
-			img#splashIcon(src= splashIcon || `/static-assets/splash.svg?${ timestamp }`)
+			img#splashIcon(src= splashIcon || `/static-assets/splash.png?${ timestamp }`)
 			span#splashText
 				block randomMOTD
 					= randomMOTD

packages/backend/src/services/send-email.ts

@@ -13,7 +13,7 @@ export async function sendEmail(
 ) {
 	const meta = await fetchMeta(true);
 
-	const iconUrl = `${config.url}/static-assets/mi-white.png`;
+	const iconUrl = `${config.url}/static-assets/mail-wordmark.png`;
 	const emailSettingUrl = `${config.url}/settings/email`;
 
 	const enableAuth = meta.smtpUser != null && meta.smtpUser !== "";

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

@@ -14,13 +14,23 @@
 						:class="{ playing: easterEggEngine != null }"
 					>
 						<img
-							src="/client-assets/about-icon.png"
+							src="/client-assets/about-icon-dark.png"
+							v-if="!darkMode"
 							alt=""
 							class="icon"
 							draggable="false"
 							@load="iconLoaded"
 							@click="gravity"
 						/>
+						<img
+								src="/client-assets/about-icon-light.png"
+								v-if="darkMode"
+								alt=""
+								class="icon"
+								draggable="false"
+								@load="iconLoaded"
+								@click="gravity"
+						/>
 						<div class="misskey">Iceshrimp</div>
 						<div class="version">v{{ version }}</div>
 						<span
@@ -77,7 +87,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount } from "vue";
+import { computed, nextTick, onBeforeUnmount } from "vue";
 import { version } from "@/config";
 import FormLink from "@/components/form/link.vue";
 import FormSection from "@/components/form/section.vue";
@@ -135,6 +145,8 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
+const darkMode = computed(defaultStore.makeGetterSetter("darkMode"));
+
 definePageMetadata({
 	title: i18n.ts.aboutIceshrimp,
 	icon: null,
@@ -166,9 +178,9 @@ definePageMetadata({
 
 		> .icon {
 			display: block;
-			width: 100px;
+			width: 250px;
 			margin: 0 auto;
-			border-radius: 3px;
+			border-radius: 5px;
 		}
 
 		> .misskey {

packages/client/src/pages/welcome.entrance.a.vue

@@ -5,7 +5,7 @@
 			<XTimeline class="tl" />
 			<div class="shape1"></div>
 			<div class="shape2"></div>
-			<img src="/client-assets/misskey.svg" class="misskey" />
+			<img src="/client-assets/welcome-logo.svg" class="misskey" />
 			<div class="emojis">
 				<MkEmoji :normal="true" :no-style="true" emoji="⭐" />
 				<MkEmoji :normal="true" :no-style="true" emoji="❤️" />

packages/client/src/pages/welcome.entrance.b.vue

@@ -62,7 +62,7 @@
 					</I18n>
 				</div>
 			</div>
-			<img src="/client-assets/misskey.svg" class="misskey" />
+			<img src="/client-assets/welcome-logo.svg" class="misskey" />
 		</div>
 	</div>
 </template>

packages/client/src/pages/welcome.entrance.c.vue

@@ -11,7 +11,7 @@
 				<MkEmoji :normal="true" :no-style="true" emoji="🍮" />
 			</div>
 			<div class="main">
-				<img src="/client-assets/misskey.svg" class="misskey" />
+				<img src="/client-assets/welcome-logo.svg" class="misskey" />
 				<div class="form _panel">
 					<div class="bg">
 						<div class="fade"></div>