natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

chore: fix client lint errors (#8934) 

* Fix client lint

* Hide no-v-html

* Ignore banned type

* Update page-editor.vue
This commit is contained in:
Kainoa Kanter 2022-07-04 19:21:59 -07:00 committed by GitHub
parent ce9d29828d
commit 1eb504a640
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 78 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/src/components/autocomplete.vue
View File

@ -20,6 +20,7 @@
<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span> <span v-if="emoji.isCustomEmoji" class="emoji"><img :src="defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
<span v-else-if="!defaultStore.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span> <span v-else-if="!defaultStore.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
<span v-else class="emoji">{{ emoji.emoji }}</span> <span v-else class="emoji">{{ emoji.emoji }}</span>
<!-- eslint-disable-next-line vue/no-v-html -->
<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span> <span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span> <span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
</li> </li>

1
packages/client/src/components/code-core.vue
View File

@ -1,3 +1,4 @@
<!-- eslint-disable vue/no-v-html -->
<template> <template>
<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code> <code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre> <pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>

2
packages/client/src/components/formula-core.vue
View File

@ -1,4 +1,4 @@
<!-- eslint-disable vue/no-v-html -->
<template> <template>
<div v-if="block" v-html="compiledFormula"></div> <div v-if="block" v-html="compiledFormula"></div>
<span v-else v-html="compiledFormula"></span> <span v-else v-html="compiledFormula"></span>

2
packages/client/src/pages/admin/emojis.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<MkStickyContainer> <MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs" v-model:tab="tab"/></template> <template #header><XHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900"> <MkSpacer :content-max="900">
<div class="ogwlenmc"> <div class="ogwlenmc">
<div v-if="tab === 'local'" class="local"> <div v-if="tab === 'local'" class="local">

2
packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
View File

@ -32,7 +32,7 @@ const props = withDefaults(defineProps<{
let values: string = $ref(props.value.values.join('\n')); let values: string = $ref(props.value.values.join('\n'));
watch(values, () => { watch(values, () => {
props.value.values = values.split('\n') props.value.values = values.split('\n');
}, { }, {
deep: true deep: true
}); });

17
packages/client/src/pages/page-editor/page-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" v-model:tab="tab"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :content-max="700">
<div class="jqqmcavi"> <div class="jqqmcavi">
<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton> <MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
@ -82,7 +82,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineComponent, defineAsyncComponent, computed, provide, watch } from 'vue'; import { defineAsyncComponent, computed, provide, watch } from 'vue';
import 'prismjs'; import 'prismjs';
import { highlight, languages } from 'prismjs/components/prism-core'; import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike'; import 'prismjs/components/prism-clike';
@ -93,7 +93,6 @@ import { v4 as uuid } from 'uuid';
import XVariable from './page-editor.script-block.vue'; import XVariable from './page-editor.script-block.vue';
import XBlocks from './page-editor.blocks.vue'; import XBlocks from './page-editor.blocks.vue';
import MkTextarea from '@/components/form/textarea.vue'; import MkTextarea from '@/components/form/textarea.vue';
import MkContainer from '@/components/ui/container.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkSelect from '@/components/form/select.vue'; import MkSelect from '@/components/form/select.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
@ -168,15 +167,15 @@ function save() {
const options = getSaveOptions(); const options = getSaveOptions();
const onError = err => { const onError = err => {
if (err.id == '3d81ceae-475f-4600-b2a8-2bc116157532') { if (err.id === '3d81ceae-475f-4600-b2a8-2bc116157532') {
if (err.info.param == 'name') { if (err.info.param === 'name') {
os.alert({ os.alert({
type: 'error', type: 'error',
title: i18n.ts._pages.invalidNameTitle, title: i18n.ts._pages.invalidNameTitle,
text: i18n.ts._pages.invalidNameText, text: i18n.ts._pages.invalidNameText,
}); });
} }
} else if (err.code == 'NAME_ALREADY_EXISTS') { } else if (err.code === 'NAME_ALREADY_EXISTS') {
os.alert({ os.alert({
type: 'error', type: 'error',
text: i18n.ts._pages.nameAlreadyExists, text: i18n.ts._pages.nameAlreadyExists,
@ -310,7 +309,7 @@ function getPageBlockList() {
function getScriptBlockList(type: string = null) { function getScriptBlockList(type: string = null) {
const list = []; const list = [];
const blocks = blockDefs.filter(block => type === null || block.out === null || block.out === type || typeof block.out === 'number'); const blocks = blockDefs.filter(block => type == null || block.out == null || block.out === type || typeof block.out === 'number');
for (const block of blocks) { for (const block of blocks) {
const category = list.find(x => x.category === block.category); const category = list.find(x => x.category === block.category);
@ -345,8 +344,8 @@ function getScriptBlockList(type: string = null) {
return list; return list;
} }
function setEyeCatchingImage(e) { function setEyeCatchingImage(img) {
selectFile(e.currentTarget ?? e.target, null).then(file => { selectFile(img.currentTarget ?? img.target, null).then(file => {
eyeCatchingImageId = file.id; eyeCatchingImageId = file.id;
}); });
} }

4
packages/client/src/pages/user-info.vue
View File

@ -313,10 +313,10 @@ async function applyDriveCapacityOverride() {
try { try {
await os.apiWithDialog('admin/drive-capacity-override', { userId: user.id, overrideMb: driveCapOrMb }); await os.apiWithDialog('admin/drive-capacity-override', { userId: user.id, overrideMb: driveCapOrMb });
await refreshUser(); await refreshUser();
} catch (e) { } catch (err) {
os.alert({ os.alert({
type: 'error', type: 'error',
text: e.toString(), text: err.toString(),
}); });
} }
} }

1
packages/client/src/pages/welcome.entrance.a.vue
View File

@ -23,6 +23,7 @@
<span class="text">{{ instanceName }}</span> <span class="text">{{ instanceName }}</span>
</h1> </h1>
<div class="about"> <div class="about">
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div> <div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
</div> </div>
<div class="action"> <div class="action">

1
packages/client/src/pages/welcome.entrance.b.vue
View File

@ -9,6 +9,7 @@
<img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> <img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
</h1> </h1>
<div class="about"> <div class="about">
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div> <div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div> </div>
<div class="action"> <div class="action">

1
packages/client/src/pages/welcome.entrance.c.vue
View File

@ -21,6 +21,7 @@
<img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> <img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
</h1> </h1>
<div class="about"> <div class="about">
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div> <div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div> </div>
<div class="action"> <div class="action">

14
packages/client/src/scripts/hpml/index.ts
View File

@ -14,13 +14,13 @@ export type Fn = {
export type Type = 'string' | 'number' | 'boolean' | 'stringArray' | null; export type Type = 'string' | 'number' | 'boolean' | 'stringArray' | null;
export const literalDefs: Record<string, { out: any; category: string; icon: any; }> = { export const literalDefs: Record<string, { out: any; category: string; icon: any; }> = {
text: { out: 'string', category: 'value', icon: 'fas fa-quote-right', }, text: { out: 'string', category: 'value', icon: 'fas fa-quote-right', },
multiLineText: { out: 'string', category: 'value', icon: 'fas fa-align-left', }, multiLineText: { out: 'string', category: 'value', icon: 'fas fa-align-left', },
textList: { out: 'stringArray', category: 'value', icon: 'fas fa-list', }, textList: { out: 'stringArray', category: 'value', icon: 'fas fa-list', },
number: { out: 'number', category: 'value', icon: 'fas fa-sort-numeric-up', }, number: { out: 'number', category: 'value', icon: 'fas fa-sort-numeric-up', },
ref: { out: null, category: 'value', icon: 'fas fa-magic', }, ref: { out: null, category: 'value', icon: 'fas fa-magic', },
aiScriptVar: { out: null, category: 'value', icon: 'fas fa-magic', }, aiScriptVar: { out: null, category: 'value', icon: 'fas fa-magic', },
fn: { out: 'function', category: 'value', icon: 'fas fa-square-root-alt', }, fn: { out: 'function', category: 'value', icon: 'fas fa-square-root-alt', },
}; };
export const blockDefs = [ export const blockDefs = [

80
packages/client/src/scripts/hpml/lib.ts
View File

@ -125,54 +125,56 @@ export function initAiLib(hpml: Hpml) {
} }
}); });
*/ */
}) }),
}; };
} }
export const funcDefs: Record<string, { in: any[]; out: any; category: string; icon: any; }> = { export const funcDefs: Record<string, { in: any[]; out: any; category: string; icon: any; }> = {
if: { in: ['boolean', 0, 0], out: 0, category: 'flow', icon: 'fas fa-share-alt', }, if: { in: ['boolean', 0, 0], out: 0, category: 'flow', icon: 'fas fa-share-alt' },
for: { in: ['number', 'function'], out: null, category: 'flow', icon: 'fas fa-recycle', }, for: { in: ['number', 'function'], out: null, category: 'flow', icon: 'fas fa-recycle' },
not: { in: ['boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag', }, not: { in: ['boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
or: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag', }, or: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
and: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag', }, and: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
add: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-plus', }, add: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-plus' },
subtract: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-minus', }, subtract: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-minus' },
multiply: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-times', }, multiply: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-times' },
divide: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide', }, divide: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
mod: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide', }, mod: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
round: { in: ['number'], out: 'number', category: 'operation', icon: 'fas fa-calculator', }, round: { in: ['number'], out: 'number', category: 'operation', icon: 'fas fa-calculator' },
eq: { in: [0, 0], out: 'boolean', category: 'comparison', icon: 'fas fa-equals', }, eq: { in: [0, 0], out: 'boolean', category: 'comparison', icon: 'fas fa-equals' },
notEq: { in: [0, 0], out: 'boolean', category: 'comparison', icon: 'fas fa-not-equal', }, notEq: { in: [0, 0], out: 'boolean', category: 'comparison', icon: 'fas fa-not-equal' },
gt: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-greater-than', }, gt: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-greater-than' },
lt: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-less-than', }, lt: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-less-than' },
gtEq: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-greater-than-equal', }, gtEq: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-greater-than-equal' },
ltEq: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-less-than-equal', }, ltEq: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-less-than-equal' },
strLen: { in: ['string'], out: 'number', category: 'text', icon: 'fas fa-quote-right', }, strLen: { in: ['string'], out: 'number', category: 'text', icon: 'fas fa-quote-right' },
strPick: { in: ['string', 'number'], out: 'string', category: 'text', icon: 'fas fa-quote-right', }, strPick: { in: ['string', 'number'], out: 'string', category: 'text', icon: 'fas fa-quote-right' },
strReplace: { in: ['string', 'string', 'string'], out: 'string', category: 'text', icon: 'fas fa-quote-right', }, strReplace: { in: ['string', 'string', 'string'], out: 'string', category: 'text', icon: 'fas fa-quote-right' },
strReverse: { in: ['string'], out: 'string', category: 'text', icon: 'fas fa-quote-right', }, strReverse: { in: ['string'], out: 'string', category: 'text', icon: 'fas fa-quote-right' },
join: { in: ['stringArray', 'string'], out: 'string', category: 'text', icon: 'fas fa-quote-right', }, join: { in: ['stringArray', 'string'], out: 'string', category: 'text', icon: 'fas fa-quote-right' },
stringToNumber: { in: ['string'], out: 'number', category: 'convert', icon: 'fas fa-exchange-alt', }, stringToNumber: { in: ['string'], out: 'number', category: 'convert', icon: 'fas fa-exchange-alt' },
numberToString: { in: ['number'], out: 'string', category: 'convert', icon: 'fas fa-exchange-alt', }, numberToString: { in: ['number'], out: 'string', category: 'convert', icon: 'fas fa-exchange-alt' },
splitStrByLine: { in: ['string'], out: 'stringArray', category: 'convert', icon: 'fas fa-exchange-alt', }, splitStrByLine: { in: ['string'], out: 'stringArray', category: 'convert', icon: 'fas fa-exchange-alt' },
pick: { in: [null, 'number'], out: null, category: 'list', icon: 'fas fa-indent', }, pick: { in: [null, 'number'], out: null, category: 'list', icon: 'fas fa-indent' },
listLen: { in: [null], out: 'number', category: 'list', icon: 'fas fa-indent', }, listLen: { in: [null], out: 'number', category: 'list', icon: 'fas fa-indent' },
rannum: { in: ['number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice', }, rannum: { in: ['number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice' },
dailyRannum: { in: ['number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice', }, dailyRannum: { in: ['number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice' },
seedRannum: { in: [null, 'number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice', }, seedRannum: { in: [null, 'number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice' },
random: { in: ['number'], out: 'boolean', category: 'random', icon: 'fas fa-dice', }, random: { in: ['number'], out: 'boolean', category: 'random', icon: 'fas fa-dice' },
dailyRandom: { in: ['number'], out: 'boolean', category: 'random', icon: 'fas fa-dice', }, dailyRandom: { in: ['number'], out: 'boolean', category: 'random', icon: 'fas fa-dice' },
seedRandom: { in: [null, 'number'], out: 'boolean', category: 'random', icon: 'fas fa-dice', }, seedRandom: { in: [null, 'number'], out: 'boolean', category: 'random', icon: 'fas fa-dice' },
randomPick: { in: [0], out: 0, category: 'random', icon: 'fas fa-dice', }, randomPick: { in: [0], out: 0, category: 'random', icon: 'fas fa-dice' },
dailyRandomPick: { in: [0], out: 0, category: 'random', icon: 'fas fa-dice', }, dailyRandomPick: { in: [0], out: 0, category: 'random', icon: 'fas fa-dice' },
seedRandomPick: { in: [null, 0], out: 0, category: 'random', icon: 'fas fa-dice', }, seedRandomPick: { in: [null, 0], out: 0, category: 'random', icon: 'fas fa-dice' },
DRPWPM: { in: ['stringArray'], out: 'string', category: 'random', icon: 'fas fa-dice', }, // dailyRandomPickWithProbabilityMapping DRPWPM: { in: ['stringArray'], out: 'string', category: 'random', icon: 'fas fa-dice' }, // dailyRandomPickWithProbabilityMapping
}; };
export function initHpmlLib(expr: Expr, scope: HpmlScope, randomSeed: string, visitor?: any) { export function initHpmlLib(expr: Expr, scope: HpmlScope, randomSeed: string, visitor?: any) {
const date = new Date(); const date = new Date();
const day = `${visitor ? visitor.id : ''} ${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; const day = `${visitor ? visitor.id : ''} ${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
// SHOULD be fine to ignore since it's intended + function shape isn't defined
// eslint-disable-next-line @typescript-eslint/ban-types
const funcs: Record<string, Function> = { const funcs: Record<string, Function> = {
not: (a: boolean) => !a, not: (a: boolean) => !a,
or: (a: boolean, b: boolean) => a || b, or: (a: boolean, b: boolean) => a || b,
@ -188,7 +190,7 @@ export function initHpmlLib(expr: Expr, scope: HpmlScope, randomSeed: string, vi
const result: any[] = []; const result: any[] = [];
for (let i = 0; i < times; i++) { for (let i = 0; i < times; i++) {
result.push(fn.exec({ result.push(fn.exec({
[fn.slots[0]]: i + 1 [fn.slots[0]]: i + 1,
})); }));
} }
return result; return result;

12
packages/client/src/ui/visitor/a.vue
View File

@ -4,6 +4,7 @@
<div> <div>
<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1> <h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
<div v-if="meta" class="about"> <div v-if="meta" class="about">
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="desc" v-html="meta.description || $ts.introMisskey"></div> <div class="desc" v-html="meta.description || $ts.introMisskey"></div>
</div> </div>
<div class="action"> <div class="action">
@ -101,13 +102,18 @@ export default defineComponent({
}, },
methods: { methods: {
setParallax(el) { // @ThatOneCalculator: Are these methods even used?
//new simpleParallax(el); // I can't find references to them anywhere else in the code...
},
// setParallax(el) {
// new simpleParallax(el);
// },
changePage(page) { changePage(page) {
if (page == null) return; if (page == null) return;
// eslint-disable-next-line no-undef
if (page[symbols.PAGE_INFO]) { if (page[symbols.PAGE_INFO]) {
// eslint-disable-next-line no-undef
this.pageInfo = page[symbols.PAGE_INFO]; this.pageInfo = page[symbols.PAGE_INFO];
} }
}, },

5
packages/client/src/ui/visitor/kanban.vue
View File

@ -1,10 +1,11 @@
<!-- eslint-disable vue/no-v-html -->
<template> <template>
<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $instance.backgroundImageUrl })` }"> <div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $instance.backgroundImageUrl })` }">
<div class="back" :class="{ transparent }"></div> <div class="back" :class="{ transparent }"></div>
<div class="contents"> <div class="contents">
<div class="wrapper"> <div class="wrapper">
<h1 v-if="meta" :class="{ full }"> <h1 v-if="meta" :class="{ full }">
<MkA to="/" class="link"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></MkA> <MkA to="/" class="link"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl" alt="logo"><span v-else class="text">{{ instanceName }}</span></MkA>
</h1> </h1>
<template v-if="full"> <template v-if="full">
<div v-if="meta" class="about"> <div v-if="meta" class="about">
@ -21,7 +22,7 @@
<div class="title">{{ announcement.title }}</div> <div class="title">{{ announcement.title }}</div>
<div class="content"> <div class="content">
<Mfm :text="announcement.text"/> <Mfm :text="announcement.text"/>
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/> <img v-if="announcement.imageUrl" :src="announcement.imageUrl" alt="announcement image"/>
</div> </div>
</section> </section>
</MkPagination> </MkPagination>