From ac535a5f0d9e804e00d4e5a9d7f21042c23c9d96 Mon Sep 17 00:00:00 2001
From: Kopper <kopper@w.on-t.work>
Date: Tue, 16 Jul 2024 11:41:53 +0300
Subject: [PATCH] Update MFM cheatsheet

---
 locales/en-US.yml                             |  9 +++
 packages/client/src/pages/mfm-cheat-sheet.vue | 64 +++++++++++++++++++
 2 files changed, 73 insertions(+)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index bdfb1c6b4..046be6788 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1341,6 +1341,15 @@ _mfm:
   plain: "Plain"
   plainDescription: "Deactivates the effects of all MFM contained within this MFM
     effect."
+  border: "Border"
+  borderDescription: "Adds a border around content."
+  ruby: "Ruby"
+  rubyDescription: "Render a small annotation above text, Usually used for showing pronounciations of East Asian characters."
+  unixtime: "Unix Time"
+  unixtimeDescription: "Convert a number of seconds since 1st of January, 1970 to a readable date."
+  followmouse: "Follow Mouse"
+  followmouseDescription: "Make content follow the mouse cursor."
+  followmouseToggle: "Toggle preview"
 _instanceTicker:
   none: "Never show"
   remote: "Show for remote users"
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
index e870ecbdf..1f0d57853 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -437,6 +437,55 @@
 						</div>
 					</div>
 				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.border }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.borderDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_border" />
+							<MkTextarea v-model="preview_border"
+								><span>MFM</span></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.ruby }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.rubyDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_ruby" />
+							<MkTextarea v-model="preview_ruby"
+								><span>MFM</span></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.unixtime }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.unixtimeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_unixtime" />
+							<MkTextarea v-model="preview_unixtime"
+								><span>MFM</span></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.followmouse }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.followmouseDescription }}</p>
+						<div class="preview">
+							<MkButton @click="show_followmouse_preview = !show_followmouse_preview">{{ i18n.ts._mfm.followmouseToggle }}</MkButton>
+							<Mfm v-if="show_followmouse_preview" :text="preview_followmouse" />
+							<MkTextarea v-model="preview_followmouse"
+								><span>MFM</span></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
 			</div>
 		</MkSpacer>
 	</MkStickyContainer>
@@ -448,6 +497,7 @@ import MkTextarea from "@/components/form/textarea.vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
+import MkButton from "@/components/MkButton.vue";
 
 defineProps<{
 	popup?: boolean;
@@ -529,6 +579,20 @@ let preview_plain = $ref(
 let preview_fade = $ref(
 	"$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[fade.delay=3s 🍮]",
 );
+let preview_border = $ref(
+	`$[border ${i18n.ts._mfm.dummy}]\n$[border.width=4 ${i18n.ts._mfm.dummy}]\n$[border.radius=8 ${i18n.ts._mfm.dummy}]\n$[border.style=dashed ${i18n.ts._mfm.dummy}]\n$[border.color=0f0 ${i18n.ts._mfm.dummy}]`
+);
+let preview_unixtime = $ref(
+	"$[unixtime 1689886800]",
+);
+let preview_ruby = $ref(
+	"$[ruby にゃ nya]",
+);
+
+let show_followmouse_preview = $ref(false);
+let preview_followmouse = $ref(
+	"$[followmouse 🍮]\n$[followmouse.speed=1s 🍮slow]\n$[followmouse.rotateByVelocity 🍮rotating]\n$[followmouse.x=10 🍮x]\n$[followmouse.y=10 🍮y]",
+);
 
 definePageMetadata({
 	title: i18n.ts._mfm.cheatSheet,