一部のMFM構文をopt-inに
あとMFMチートシートはMisskey Hubに移動
This commit is contained in:
syuilo
parent
6b6b767199
commit
b0616b52ea
8 changed files with 31 additions and 462 deletions
|
|
@ -14,6 +14,7 @@ You should also include the user name that made the change.
|
|||
### Improvements
|
||||
- コンディショナルロールもバッジとして表示可能に
|
||||
- enhance(client): 一度見たノートのRenoteは省略して表示するように
|
||||
- 一部のMFM構文をopt-inに
|
||||
|
||||
### Bugfixes
|
||||
-
|
||||
|
|
|
|||
|
|
@ -467,7 +467,8 @@ youHaveNoGroups: "グループがありません"
|
|||
joinOrCreateGroup: "既存のグループに招待してもらうか、新しくグループを作成してください。"
|
||||
noHistory: "履歴はありません"
|
||||
signinHistory: "ログイン履歴"
|
||||
disableAnimatedMfm: "動きのあるMFMを無効にする"
|
||||
enableAdvancedMfm: "高度なMFMを有効にする"
|
||||
enableAnimatedMfm: "動きのあるMFMを有効にする"
|
||||
doing: "やっています"
|
||||
category: "カテゴリ"
|
||||
tags: "タグ"
|
||||
|
|
@ -1347,73 +1348,6 @@ _nsfw:
|
|||
ignore: "閲覧注意のメディアを隠さない"
|
||||
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:
|
||||
none: "表示しない"
|
||||
remote: "リモートユーザーに表示"
|
||||
|
|
|
|||
|
|
@ -65,6 +65,8 @@ export default defineComponent({
|
|||
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)[] => {
|
||||
switch (token.type) {
|
||||
case 'text': {
|
||||
|
|
@ -103,22 +105,22 @@ export default defineComponent({
|
|||
switch (token.props.name) {
|
||||
case 'tada': {
|
||||
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;
|
||||
}
|
||||
case 'jelly': {
|
||||
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;
|
||||
}
|
||||
case 'twitch': {
|
||||
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;
|
||||
}
|
||||
case 'shake': {
|
||||
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;
|
||||
}
|
||||
case 'spin': {
|
||||
|
|
@ -131,17 +133,17 @@ export default defineComponent({
|
|||
token.props.args.y ? 'mfm-spinY' :
|
||||
'mfm-spin';
|
||||
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;
|
||||
}
|
||||
case 'jump': {
|
||||
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;
|
||||
}
|
||||
case 'bounce': {
|
||||
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;
|
||||
}
|
||||
case 'flip': {
|
||||
|
|
@ -154,17 +156,17 @@ export default defineComponent({
|
|||
}
|
||||
case 'x2': {
|
||||
return h('span', {
|
||||
class: 'mfm-x2',
|
||||
class: defaultStore.state.advancedMfm ? 'mfm-x2' : '',
|
||||
}, genEl(token.children));
|
||||
}
|
||||
case 'x3': {
|
||||
return h('span', {
|
||||
class: 'mfm-x3',
|
||||
class: defaultStore.state.advancedMfm ? 'mfm-x3' : '',
|
||||
}, genEl(token.children));
|
||||
}
|
||||
case 'x4': {
|
||||
return h('span', {
|
||||
class: 'mfm-x4',
|
||||
class: defaultStore.state.advancedMfm ? 'mfm-x4' : '',
|
||||
}, genEl(token.children));
|
||||
}
|
||||
case 'font': {
|
||||
|
|
@ -186,11 +188,11 @@ export default defineComponent({
|
|||
}
|
||||
case 'rainbow': {
|
||||
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;
|
||||
}
|
||||
case 'sparkle': {
|
||||
if (!defaultStore.state.animatedMfm) {
|
||||
if (!useAnim) {
|
||||
return genEl(token.children);
|
||||
}
|
||||
return h(MkSparkle, {}, genEl(token.children));
|
||||
|
|
@ -201,12 +203,17 @@ export default defineComponent({
|
|||
break;
|
||||
}
|
||||
case 'position': {
|
||||
if (!defaultStore.state.advancedMfm) break;
|
||||
const x = parseFloat(token.props.args.x ?? '0');
|
||||
const y = parseFloat(token.props.args.y ?? '0');
|
||||
style = `transform: translateX(${x}em) translateY(${y}em);`;
|
||||
break;
|
||||
}
|
||||
case 'scale': {
|
||||
if (!defaultStore.state.advancedMfm) {
|
||||
style = '';
|
||||
break;
|
||||
}
|
||||
const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);
|
||||
const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);
|
||||
style = `transform: scale(${x}, ${y});`;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -45,7 +45,8 @@
|
|||
|
||||
<div class="_gaps_m">
|
||||
<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="useBlurEffect">{{ i18n.ts.useBlurEffect }}</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 useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
|
||||
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 disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
|
||||
const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
|
|||
'nsfw',
|
||||
'animation',
|
||||
'animatedMfm',
|
||||
'advancedMfm',
|
||||
'loadRawImages',
|
||||
'imageNewTab',
|
||||
'disableShowingAnimatedImages',
|
||||
|
|
|
|||
|
|
@ -224,9 +224,6 @@ export const routes = [{
|
|||
path: '/api-console',
|
||||
component: page(() => import('./pages/api-console.vue')),
|
||||
loginRequired: true,
|
||||
}, {
|
||||
path: '/mfm-cheat-sheet',
|
||||
component: page(() => import('./pages/mfm-cheat-sheet.vue')),
|
||||
}, {
|
||||
path: '/scratchpad',
|
||||
component: page(() => import('./pages/scratchpad.vue')),
|
||||
|
|
|
|||
|
|
@ -158,6 +158,10 @@ export const defaultStore = markRaw(new Storage('base', {
|
|||
where: 'device',
|
||||
default: false,
|
||||
},
|
||||
advancedMfm: {
|
||||
where: 'device',
|
||||
default: false,
|
||||
},
|
||||
loadRawImages: {
|
||||
where: 'device',
|
||||
default: false,
|
||||
|
|
|
|||
Loading…
Reference in a new issue