Improve announcement

* お知らせにMFMを使えるように
* お知らせに画像を添付できるように

CHANGELOG.md

@@ -37,6 +37,10 @@ mongodb:
 
 unreleased
 -------------------
+### Improvements
+* お知らせにMFMを使えるように
+* お知らせに画像を添付できるように
+
 ### Fixes
 * 投稿のタグ検索APIで大文字小文字が区別されていたのを修正
 * 公開範囲がホームの投稿がグローバルTLに流れる問題を修正

src/client/app/admin/views/announcements.vue

@@ -9,6 +9,9 @@
 			<ui-textarea v-model="announcement.text">
 				<span>{{ $t('text') }}</span>
 			</ui-textarea>
+			<ui-input v-model="announcement.image">
+				<span>{{ $t('image-url') }}</span>
+			</ui-input>
 			<ui-horizon-group class="fit-bottom">
 				<ui-button @click="save()"><fa :icon="['far', 'save']"/> {{ $t('save') }}</ui-button>
 				<ui-button @click="remove(i)"><fa :icon="['far', 'trash-alt']"/> {{ $t('remove') }}</ui-button>
@@ -43,7 +46,8 @@ export default Vue.extend({
 		add() {
 			this.announcements.unshift({
 				title: '',
-				text: ''
+				text: '',
+				image: null
 			});
 		},
 

src/client/app/common/views/widgets/broadcast.vue

@@ -18,7 +18,8 @@
 			<p class="fetching" v-if="fetching">{{ $t('fetching') }}<mk-ellipsis/></p>
 			<h1 v-if="!fetching">{{ announcements.length == 0 ? $t('no-broadcasts') : announcements[i].title }}</h1>
 			<p v-if="!fetching">
-				<span v-if="announcements.length != 0" v-html="announcements[i].text"></span>
+				<mfm v-if="announcements.length != 0" :text="announcements[i].text"/>
+				<img v-if="announcements.length != 0 && announcements[i].image" :src="announcements[i].image" alt="" style="display: block; max-height: 130px; max-width: 100%;"/>
 				<template v-if="announcements.length == 0">{{ $t('have-a-nice-day') }}</template>
 			</p>
 			<a v-if="announcements.length > 1" @click="next">{{ $t('next') }} &gt;&gt;</a>

src/client/app/desktop/views/pages/welcome.vue

@@ -44,7 +44,8 @@
 				<div v-if="announcements && announcements.length > 0">
 					<div v-for="announcement in announcements">
 						<h1 v-html="announcement.title"></h1>
-						<div v-html="announcement.text"></div>
+						<mfm :text="announcement.text"/>
+						<img v-if="announcement.image" :src="announcement.image" alt="" style="display: block; max-height: 130px; max-width: 100%;"/>
 					</div>
 				</div>
 			</div>

src/client/app/mobile/views/components/ui.nav.vue

@@ -43,7 +43,8 @@
 				<div class="announcements" v-if="announcements && announcements.length > 0">
 					<article v-for="announcement in announcements">
 						<span v-html="announcement.title" class="title"></span>
-						<div v-html="announcement.text"></div>
+						<mfm :text="announcement.text"/>
+						<img v-if="announcement.image" :src="announcement.image" alt="" style="display: block; max-height: 120px; max-width: 100%;"/>
 					</article>
 				</div>
 				<a :href="aboutUrl"><p class="about">{{ $t('about') }}</p></a>

src/client/app/mobile/views/pages/welcome.vue

@@ -29,7 +29,8 @@
 		<div class="announcements" v-if="announcements && announcements.length > 0">
 			<article v-for="announcement in announcements">
 				<span class="title" v-html="announcement.title"></span>
-				<div v-html="announcement.text"></div>
+				<mfm :text="announcement.text"/>
+				<img v-if="announcement.image" :src="announcement.image" alt="" style="display: block; max-height: 120px; max-width: 100%;"/>
 			</article>
 		</div>
 		<article class="about-misskey">