(add) announcement

README.md

@@ -4,6 +4,10 @@ Misskey website.
 
 Built with [Nuxt](https://nuxt.com/).
 
+## お知らせの文言のいじり方
+
+`app.config.ts` から指定できます。詳しい書き方はTypescriptの型補完に書いてあります
+
 ## Setup
 
 Make sure to install the dependencies:

app.config.ts

@@ -0,0 +1,8 @@
+export default defineAppConfig({
+    notice: {
+        title: {
+            ja: "v2023.9.0 をリリースしました！",
+        },
+        to: "/docs/releases/"
+    },
+});

components/index/hero/Left.vue

@@ -7,6 +7,16 @@
 			<div class="row">platform.🚀</div>
 		</h2>
 		<div class="max-w-lg mx-auto lg:mx-0 text-lg text-center lg:text-start">{{ $t('_landing._hero.description') }}</div>
+		<div v-if="notice" class="notice w-fit mx-auto lg:mx-0 rounded-full p-0.5">
+			<GNuxtLink :to="isLocalPath(notice.to) ? localePath(notice.to) : notice.to" :target="!isLocalPath(notice.to) && '_blank'">
+				<div class="h-10 bg-white hover:bg-slate-50 dark:bg-slate-950 hover:dark:bg-slate-800 rounded-full flex items-center p-0.5">
+					<div class="notice h-9 w-9 rounded-full mr-2 p-2">
+						<MegaphoneIco class="h-5 w-5 text-white -rotate-12" />
+					</div>
+					<div class="font-bold text-sm md:text-base mr-2">{{ notice.title[locale] ?? notice.title.ja }}<ArrowRightIco v-if="isLocalPath(notice.to)" class="ml-0.5" /><ArrowUpRightIco v-else class="ml-0.5" /></div>
+				</div>
+			</GNuxtLink>
+		</div>
 		<div class="w-fit space-x-4 mx-auto lg:mx-0">
 			<GButton button-type="button" color="accent" @click="scrollTo('#getStarted')">{{ $t('_landing._hero.gettingStarted') }}</GButton>
 			<GButton button-type="button" @click="scrollTo('#learnMore')">{{ $t('learnMore') }}</GButton>
@@ -21,8 +31,15 @@
 
 <script setup lang="ts">
 import MkLogo from '@/assets/svg/misskey-logotype.svg';
+import MegaphoneIco from 'bi/megaphone.svg';
+import ArrowRightIco from 'bi/arrow-right.svg';
+import ArrowUpRightIco from 'bi/arrow-up-right.svg';
 import { scrollTo } from '@/assets/js/scroll-to';
+import { isLocalPath } from '~/assets/js/misc';
 
+const { notice } = useAppConfig();
+const { locale, fallbackLocale } = useI18n();
+const localePath = useLocalePath();
 const tagline = ref<HTMLElement>();
 
 onMounted(() => {
@@ -48,4 +65,8 @@ onMounted(() => {
 .dots {
 	@apply absolute pointer-events-none select-none text-accent-600;
 }
+
+.notice {
+	background-image: linear-gradient(90deg, #86b300, #4ab300, #4ab300);
+}
 </style>

types/misc.d.ts

@@ -3,3 +3,42 @@ declare module '*.svg' {
     const src: FunctionalComponent<SVGAttributes>
     export default src
 }
+
+declare module 'nuxt/schema' {
+    interface AppConfig {
+        
+        /** お知らせ */
+        notice?: {
+
+            /** 
+             * お知らせの文言（言語ごとに羅列）
+             * 
+             * ```js
+             * defineAppConfig({
+             *     notice: {
+             *         title: {
+             *             ja: '〇〇をリリースしました！',
+             *             en: 'We\'ve released 〇〇!',
+             *             ...
+             *         },
+             *         ...
+             *     }
+             * });
+             * ```
+             * 
+             **/
+            title: { ja: string; } & Record<string, string>;
+
+            /**
+             * リンク先
+             * （内部パス・外部パスどちらでも指定可能） 
+             * 
+             * 内部リンクの場合は、**先頭の言語ディレクトリ（`/ja/`など）を除いて記入**  
+             * （例: `/ja/docs/releases/` → `/docs/releases/`）
+             **/
+            to: string;
+        }
+    }
+}
+
+export { };