enhance(client): add ads page

CHANGELOG.md

@@ -20,9 +20,10 @@ You should also include the user name that made the change.
 - ロールの並び順を設定可能に
 - カスタム絵文字にライセンス情報を付与できるように
 - 指定した文字列を含む投稿の公開範囲をホームにできるように
-- enhance(client): 設定から自分のロールを確認できるように
-- enhance(client): DM作成時にメンションも含むように
-- enhance(client): フォロー申請のボタンのデザインを改善
+- 設定から自分のロールを確認できるように
+- 広告一覧ページを追加
+- DM作成時にメンションも含むように
+- フォロー申請のボタンのデザインを改善
 - enhance(backend): OpenAPIエンドポイントを復旧
 - WebP/AVIF/JPEGのweb公開用画像は、サーバーサイドではJPEGではなくWebPに変換するように
 - アニメーション画像のサムネイルを生成するように

packages/frontend/src/pages/ads.vue

+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+
+	<MkSpacer :content-max="500">
+		<div class="_gaps">
+			<MkAd v-for="ad in instance.ads" :key="ad.id" :specify="ad"/>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import * as os from '@/os';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+
+definePageMetadata({
+	title: i18n.ts.ads,
+	icon: 'ti ti-ad',
+});
+</script>
+

packages/frontend/src/router.ts

@@ -197,6 +197,9 @@ export const routes = [{
 }, {
 	path: '/about-misskey',
 	component: page(() => import('./pages/about-misskey.vue')),
+}, {
+	path: '/ads',
+	component: page(() => import('./pages/ads.vue')),
 }, {
 	path: '/theme-editor',
 	component: page(() => import('./pages/theme-editor.vue')),

packages/frontend/src/ui/_common_/common.ts

@@ -29,6 +29,11 @@ export function openInstanceMenu(ev: MouseEvent) {
 		icon: 'ti ti-chart-line',
 		to: '/about#charts',
 	}, null, {
+		type: 'link',
+		text: i18n.ts.ads,
+		icon: 'ti ti-ad',
+		to: '/ads',
+	}, {
 		type: 'parent',
 		text: i18n.ts.tools,
 		icon: 'ti ti-tool',