keith/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2024-11-25 16:25:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

一部のMFM構文をopt-inに

Browse source 
あとMFMチートシートはMisskey Hubに移動
This commit is contained in:
syuilo 2023-02-11 11:31:18 +09:00
parent 6b6b767199
commit b0616b52ea
8 changed files with 31 additions and 462 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -14,6 +14,7 @@ You should also include the user name that made the change.
### Improvements ### Improvements
- コンディショナルロールもバッジとして表示可能に - コンディショナルロールもバッジとして表示可能に
- enhance(client): 一度見たノートのRenoteは省略して表示するように - enhance(client): 一度見たノートのRenoteは省略して表示するように
- 一部のMFM構文をopt-inに
### Bugfixes ### Bugfixes
- -

70
locales/ja-JP.yml
View file

@ -467,7 +467,8 @@ youHaveNoGroups: "グループがありません"
joinOrCreateGroup: "既存のグループに招待してもらうか、新しくグループを作成してください。" joinOrCreateGroup: "既存のグループに招待してもらうか、新しくグループを作成してください。"
noHistory: "履歴はありません" noHistory: "履歴はありません"
signinHistory: "ログイン履歴" signinHistory: "ログイン履歴"
disableAnimatedMfm: "動きのあるMFMを無効にする" enableAdvancedMfm: "高度なMFMを有効にする"
enableAnimatedMfm: "動きのあるMFMを有効にする"
doing: "やっています" doing: "やっています"
category: "カテゴリ" category: "カテゴリ"
tags: "タグ" tags: "タグ"
@ -1347,73 +1348,6 @@ _nsfw:
ignore: "閲覧注意のメディアを隠さない" ignore: "閲覧注意のメディアを隠さない"
force: "常にメディアを隠す" force: "常にメディアを隠す"
_mfm:
cheatSheet: "MFMチートシート"
intro: "MFMは、Misskey内の様々な場所で使用できる専用のマークアップ言語です。ここでは、MFMで使用可能な構文一覧が確認できます。"
dummy: "MisskeyでFediverseの世界が広がります"
mention: "メンション"
mentionDescription: "アットマーク + ユーザー名で、特定のユーザーを示すことができます。"
hashtag: "ハッシュタグ"
hashtagDescription: "ナンバーサイン + タグで、ハッシュタグを示すことができます。"
url: "URL"
urlDescription: "URLを示すことができます。"
link: "リンク"
linkDescription: "文章の特定の範囲を、URLに紐づけることができます。"
bold: "太字"
boldDescription: "文字を太く表示して強調することができます。"
small: "目立たなく"
smallDescription: "内容を小さく・薄く表示させることができます。"
center: "中央寄せ"
centerDescription: "内容を中央寄せで表示させることができます。"
inlineCode: "コード(インライン)"
inlineCodeDescription: "プログラムなどのコードをインラインでシンタックスハイライトします。"
blockCode: "コード(ブロック)"
blockCodeDescription: "複数行のプログラムなどのコードをブロックでシンタックスハイライトします。"
inlineMath: "数式(インライン)"
inlineMathDescription: "数式(KaTeX)をインラインで表示します。"
blockMath: "数式(ブロック)"
blockMathDescription: "複数行の数式(KaTeX)をブロックで表示します。"
quote: "引用"
quoteDescription: "内容が引用であることを示すことができます。"
emoji: "カスタム絵文字"
emojiDescription: "コロンでカスタム絵文字名を囲むと、カスタム絵文字を表示させることができます。"
search: "検索"
searchDescription: "入力済み検索ボックスを表示させることができます。"
flip: "反転"
flipDescription: "内容を上下または左右に反転させます。"
jelly: "アニメーション(びよんびよん)"
jellyDescription: "びよんびよんするアニメーションを与えます。"
tada: "アニメーション(じゃーん)"
tadaDescription: "ジャーン！という感じのアニメーションを与えます。"
jump: "アニメーション(ジャンプ)"
jumpDescription: "飛び跳ねるようなアニメーションを与えます。"
bounce: "アニメーション(バウンド)"
bounceDescription: "ぽよんぽよん弾むようなアニメーションを与えます。"
shake: "アニメーション(ぶるぶる)"
shakeDescription: "ぶるぶる震えるアニメーションを与えます。"
twitch: "アニメーション(ブレ)"
twitchDescription: "激しくブレるアニメーションを与えます。"
spin: "アニメーション(回転)"
spinDescription: "回転するアニメーションを与えます。"
x2: "大きく"
x2Description: "内容を大きく表示します。"
x3: "とても大きく"
x3Description: "内容をとても大きく表示します。"
x4: "究極に大きく"
x4Description: "内容を究極に大きく表示します。"
blur: "ぼかし"
blurDescription: "内容をぼかすことができます。ポインターを上に乗せるとはっきり見えるようになります。"
font: "フォント"
fontDescription: "内容のフォントを指定することができます。"
rainbow: "レインボー"
rainbowDescription: "内容をレインボーにします。"
sparkle: "キラキラ"
sparkleDescription: "キラキラしたパーティクルのエフェクトを追加します。"
rotate: "回転"
rotateDescription: "指定した角度で回転させます。"
plain: "プレーン"
plainDescription: "内側の構文を全て無効にします。"
_instanceTicker: _instanceTicker:
none: "表示しない" none: "表示しない"
remote: "リモートユーザーに表示" remote: "リモートユーザーに表示"

31
packages/frontend/src/components/mfm.ts
View file

@ -65,6 +65,8 @@ export default defineComponent({
return t.match(/^[0-9.]+s$/) ? t : null; return t.match(/^[0-9.]+s$/) ? t : null;
}; };
const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm;
const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | string | (VNode | string)[] => { const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | string | (VNode | string)[] => {
switch (token.type) { switch (token.type) {
case 'text': { case 'text': {
@ -103,22 +105,22 @@ export default defineComponent({
switch (token.props.name) { switch (token.props.name) {
case 'tada': { case 'tada': {
const speed = validTime(token.props.args.speed) ?? '1s'; const speed = validTime(token.props.args.speed) ?? '1s';
style = 'font-size: 150%;' + (defaultStore.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : ''); style = 'font-size: 150%;' + (useAnim ? `animation: tada ${speed} linear infinite both;` : '');
break; break;
} }
case 'jelly': { case 'jelly': {
const speed = validTime(token.props.args.speed) ?? '1s'; const speed = validTime(token.props.args.speed) ?? '1s';
style = (defaultStore.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : ''); style = (useAnim ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
break; break;
} }
case 'twitch': { case 'twitch': {
const speed = validTime(token.props.args.speed) ?? '0.5s'; const speed = validTime(token.props.args.speed) ?? '0.5s';
style = defaultStore.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : ''; style = useAnim ? `animation: mfm-twitch ${speed} ease infinite;` : '';
break; break;
} }
case 'shake': { case 'shake': {
const speed = validTime(token.props.args.speed) ?? '0.5s'; const speed = validTime(token.props.args.speed) ?? '0.5s';
style = defaultStore.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : ''; style = useAnim ? `animation: mfm-shake ${speed} ease infinite;` : '';
break; break;
} }
case 'spin': { case 'spin': {
@ -131,17 +133,17 @@ export default defineComponent({
token.props.args.y ? 'mfm-spinY' : token.props.args.y ? 'mfm-spinY' :
'mfm-spin'; 'mfm-spin';
const speed = validTime(token.props.args.speed) ?? '1.5s'; const speed = validTime(token.props.args.speed) ?? '1.5s';
style = defaultStore.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : ''; style = useAnim ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
break; break;
} }
case 'jump': { case 'jump': {
const speed = validTime(token.props.args.speed) ?? '0.75s'; const speed = validTime(token.props.args.speed) ?? '0.75s';
style = defaultStore.state.animatedMfm ? `animation: mfm-jump ${speed} linear infinite;` : ''; style = useAnim ? `animation: mfm-jump ${speed} linear infinite;` : '';
break; break;
} }
case 'bounce': { case 'bounce': {
const speed = validTime(token.props.args.speed) ?? '0.75s'; const speed = validTime(token.props.args.speed) ?? '0.75s';
style = defaultStore.state.animatedMfm ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : ''; style = useAnim ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
break; break;
} }
case 'flip': { case 'flip': {
@ -154,17 +156,17 @@ export default defineComponent({
} }
case 'x2': { case 'x2': {
return h('span', { return h('span', {
class: 'mfm-x2', class: defaultStore.state.advancedMfm ? 'mfm-x2' : '',
}, genEl(token.children)); }, genEl(token.children));
} }
case 'x3': { case 'x3': {
return h('span', { return h('span', {
class: 'mfm-x3', class: defaultStore.state.advancedMfm ? 'mfm-x3' : '',
}, genEl(token.children)); }, genEl(token.children));
} }
case 'x4': { case 'x4': {
return h('span', { return h('span', {
class: 'mfm-x4', class: defaultStore.state.advancedMfm ? 'mfm-x4' : '',
}, genEl(token.children)); }, genEl(token.children));
} }
case 'font': { case 'font': {
@ -186,11 +188,11 @@ export default defineComponent({
} }
case 'rainbow': { case 'rainbow': {
const speed = validTime(token.props.args.speed) ?? '1s'; const speed = validTime(token.props.args.speed) ?? '1s';
style = defaultStore.state.animatedMfm ? `animation: mfm-rainbow ${speed} linear infinite;` : ''; style = useAnim ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
break; break;
} }
case 'sparkle': { case 'sparkle': {
if (!defaultStore.state.animatedMfm) { if (!useAnim) {
return genEl(token.children); return genEl(token.children);
} }
return h(MkSparkle, {}, genEl(token.children)); return h(MkSparkle, {}, genEl(token.children));
@ -201,12 +203,17 @@ export default defineComponent({
break; break;
} }
case 'position': { case 'position': {
if (!defaultStore.state.advancedMfm) break;
const x = parseFloat(token.props.args.x ?? '0'); const x = parseFloat(token.props.args.x ?? '0');
const y = parseFloat(token.props.args.y ?? '0'); const y = parseFloat(token.props.args.y ?? '0');
style = `transform: translateX(${x}em) translateY(${y}em);`; style = `transform: translateX(${x}em) translateY(${y}em);`;
break; break;
} }
case 'scale': { case 'scale': {
if (!defaultStore.state.advancedMfm) {
style = '';
break;
}
const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5); const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);
const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5); const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);
style = `transform: scale(${x}, ${y});`; style = `transform: scale(${x}, ${y});`;

377
packages/frontend/src/pages/mfm-cheat-sheet.vue
View file

@ -1,377 +0,0 @@
<template>
<MkStickyContainer>
<template #header><MkPageHeader/></template>
<MkSpacer :content-max="800">
<div class="mwysmxbg">
<div>{{ i18n.ts._mfm.intro }}</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.mention }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.mentionDescription }}</p>
<div class="preview">
<Mfm :text="preview_mention"/>
<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.hashtag }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
<div class="preview">
<Mfm :text="preview_hashtag"/>
<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.url }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.urlDescription }}</p>
<div class="preview">
<Mfm :text="preview_url"/>
<MkTextarea v-model="preview_url"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.link }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.linkDescription }}</p>
<div class="preview">
<Mfm :text="preview_link"/>
<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.emoji }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.emojiDescription }}</p>
<div class="preview">
<Mfm :text="preview_emoji"/>
<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.bold }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.boldDescription }}</p>
<div class="preview">
<Mfm :text="preview_bold"/>
<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.small }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.smallDescription }}</p>
<div class="preview">
<Mfm :text="preview_small"/>
<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.quote }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.quoteDescription }}</p>
<div class="preview">
<Mfm :text="preview_quote"/>
<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.center }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.centerDescription }}</p>
<div class="preview">
<Mfm :text="preview_center"/>
<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
<div class="preview">
<Mfm :text="preview_inlineCode"/>
<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.blockCode }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
<div class="preview">
<Mfm :text="preview_blockCode"/>
<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<!-- deprecated
<div class="section">
<div class="title">{{ i18n.ts._mfm.search }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.searchDescription }}</p>
<div class="preview">
<Mfm :text="preview_search"/>
<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
-->
<div class="section">
<div class="title">{{ i18n.ts._mfm.flip }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.flipDescription }}</p>
<div class="preview">
<Mfm :text="preview_flip"/>
<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.font }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.fontDescription }}</p>
<div class="preview">
<Mfm :text="preview_font"/>
<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.x2 }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.x2Description }}</p>
<div class="preview">
<Mfm :text="preview_x2"/>
<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.x3 }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.x3Description }}</p>
<div class="preview">
<Mfm :text="preview_x3"/>
<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.x4 }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.x4Description }}</p>
<div class="preview">
<Mfm :text="preview_x4"/>
<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.blur }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.blurDescription }}</p>
<div class="preview">
<Mfm :text="preview_blur"/>
<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.jelly }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.jellyDescription }}</p>
<div class="preview">
<Mfm :text="preview_jelly"/>
<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.tada }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.tadaDescription }}</p>
<div class="preview">
<Mfm :text="preview_tada"/>
<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.jump }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.jumpDescription }}</p>
<div class="preview">
<Mfm :text="preview_jump"/>
<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.bounce }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.bounceDescription }}</p>
<div class="preview">
<Mfm :text="preview_bounce"/>
<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.spin }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.spinDescription }}</p>
<div class="preview">
<Mfm :text="preview_spin"/>
<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.shake }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.shakeDescription }}</p>
<div class="preview">
<Mfm :text="preview_shake"/>
<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.twitch }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.twitchDescription }}</p>
<div class="preview">
<Mfm :text="preview_twitch"/>
<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.rainbow }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
<div class="preview">
<Mfm :text="preview_rainbow"/>
<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.sparkle }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
<div class="preview">
<Mfm :text="preview_sparkle"/>
<MkTextarea v-model="preview_sparkle"><span>MFM</span></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.rotate }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.rotateDescription }}</p>
<div class="preview">
<Mfm :text="preview_rotate"/>
<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
</div>
</div>
</div>
<div class="section">
<div class="title">{{ i18n.ts._mfm.plain }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.plainDescription }}</p>
<div class="preview">
<Mfm :text="preview_plain"/>
<MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea>
</div>
</div>
</div>
</div>
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { defineComponent } from 'vue';
import MkTextarea from '@/components/MkTextarea.vue';
import { definePageMetadata } from '@/scripts/page-metadata';
import { i18n } from '@/i18n';
import { instance } from '@/instance';
import { customEmojis } from '@/custom-emojis';
let preview_mention = $ref('@example');
let preview_hashtag = $ref('#test');
let preview_url = $ref('https://example.com');
let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://example.com)`);
let preview_emoji = $ref(customEmojis.value.length ? `:${customEmojis.value[0].name}:` : ':emojiname:');
let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);
let preview_inlineCode = $ref('`<: "Hello, world!"`');
let preview_blockCode = $ref('```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```');
let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
let preview_search = $ref(`${i18n.ts._mfm.dummy} 検索`);
let preview_jelly = $ref('$[jelly 🍮] $[jelly.speed=5s 🍮]');
let preview_tada = $ref('$[tada 🍮] $[tada.speed=5s 🍮]');
let preview_jump = $ref('$[jump 🍮] $[jump.speed=5s 🍮]');
let preview_bounce = $ref('$[bounce 🍮] $[bounce.speed=5s 🍮]');
let preview_shake = $ref('$[shake 🍮] $[shake.speed=5s 🍮]');
let preview_twitch = $ref('$[twitch 🍮] $[twitch.speed=5s 🍮]');
let preview_spin = $ref('$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=5s 🍮]');
let preview_flip = $ref(`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`);
let preview_font = $ref(`$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]\n$[font.cursive ${i18n.ts._mfm.dummy}]\n$[font.fantasy ${i18n.ts._mfm.dummy}]`);
let preview_x2 = $ref('$[x2 🍮]');
let preview_x3 = $ref('$[x3 🍮]');
let preview_x4 = $ref('$[x4 🍮]');
let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
let preview_rainbow = $ref('$[rainbow 🍮] $[rainbow.speed=5s 🍮]');
let preview_sparkle = $ref('$[sparkle 🍮]');
let preview_rotate = $ref('$[rotate 🍮]');
let preview_plain = $ref('<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>');
definePageMetadata({
title: i18n.ts._mfm.cheatSheet,
icon: 'ti ti-question-circle',
});
</script>
<style lang="scss" scoped>
.mwysmxbg {
background: var(--bg);
> .section {
> .title {
position: sticky;
z-index: 1;
top: var(--stickyTop, 0px);
padding: 16px;
font-weight: bold;
-webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--blur, blur(10px));
background-color: var(--X16);
}
> .content {
> p {
margin: 0;
padding: 16px;
}
> .preview {
border-top: solid 0.5px var(--divider);
padding: 16px;
}
}
}
}
</style>

6
packages/frontend/src/pages/settings/general.vue
View file

@ -45,7 +45,8 @@
<div class="_gaps_m"> <div class="_gaps_m">
<div class="_gaps_s"> <div class="_gaps_s">
<MkSwitch v-model="disableAnimatedMfm">{{ i18n.ts.disableAnimatedMfm }}</MkSwitch> <MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
<MkSwitch v-model="reduceAnimation">{{ i18n.ts.reduceUiAnimation }}</MkSwitch> <MkSwitch v-model="reduceAnimation">{{ i18n.ts.reduceUiAnimation }}</MkSwitch>
<MkSwitch v-model="useBlurEffect">{{ i18n.ts.useBlurEffect }}</MkSwitch> <MkSwitch v-model="useBlurEffect">{{ i18n.ts.useBlurEffect }}</MkSwitch>
<MkSwitch v-model="useBlurEffectForModal">{{ i18n.ts.useBlurEffectForModal }}</MkSwitch> <MkSwitch v-model="useBlurEffectForModal">{{ i18n.ts.useBlurEffectForModal }}</MkSwitch>
@ -142,7 +143,8 @@ const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v =>
const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal')); const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect')); const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline')); const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
const disableAnimatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v)); const animatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm'));
const advancedMfm = computed(defaultStore.makeGetterSetter('advancedMfm'));
const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle')); const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer')); const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages')); const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));

1
packages/frontend/src/pages/settings/preferences-backups.vue
View file

@ -62,6 +62,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
'nsfw', 'nsfw',
'animation', 'animation',
'animatedMfm', 'animatedMfm',
'advancedMfm',
'loadRawImages', 'loadRawImages',
'imageNewTab', 'imageNewTab',
'disableShowingAnimatedImages', 'disableShowingAnimatedImages',

3
packages/frontend/src/router.ts
View file

@ -224,9 +224,6 @@ export const routes = [{
path: '/api-console', path: '/api-console',
component: page(() => import('./pages/api-console.vue')), component: page(() => import('./pages/api-console.vue')),
loginRequired: true, loginRequired: true,
}, {
path: '/mfm-cheat-sheet',
component: page(() => import('./pages/mfm-cheat-sheet.vue')),
}, { }, {
path: '/scratchpad', path: '/scratchpad',
component: page(() => import('./pages/scratchpad.vue')), component: page(() => import('./pages/scratchpad.vue')),

4
packages/frontend/src/store.ts
View file

@ -158,6 +158,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: false, default: false,
}, },
advancedMfm: {
where: 'device',
default: false,
},
loadRawImages: { loadRawImages: {
where: 'device', where: 'device',
default: false, default: false,