Use Marked and marked-mfm for MFM rendering (#29)

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/29
Co-authored-by: sfr <sol@solfisher.com>
Co-committed-by: sfr <sol@solfisher.com>
This commit is contained in:
sfr 2022-07-15 09:57:17 +00:00 committed by floatingghost
parent 28d5a55352
commit 931ed3d3c7
9 changed files with 3812 additions and 2817 deletions

View file

@ -1,4 +1,86 @@
@keyframes tada {
.mfm {
display: inline-block;
}
._mfm_tada_ {
font-size: 150%;
animation: mfm-tada 1s linear infinite both;
}
._mfm_jelly_ {
animation: mfm-jelly 1s linear infinite both;
}
._mfm_twitch_ {
animation: mfm-twitch 0.5s ease infinite;
}
._mfm_shake_ {
animation: mfm-shake 0.5s ease infinite;
}
._mfm_spin_ {
animation: mfm-spin 0.5s linear infinite;
}
._mfm_spin_[x] {
animation-name: mfm-spinX;
}
._mfm_spin_[y] {
animation-name: mfm-spinY;
}
._mfm_spin_[left] {
animation-direction: reverse;
}
._mfm_spin_[alternate] {
animation-direction: alternate;
}
._mfm_jump_ {
animation: mfm-jump 0.75 linear infinite;
}
._mfm_bounce_ {
animation: mfm-bounce 0.75 linear infinite;
transform-origin: center bottom;
}
._mfm_flip_[data-h][data-v] {
transform: scale(-1, -1);
}
._mfm_flip_[data-v] {
transform: scaleY(-1);
}
._mfm_flip_:not([data-v]) {
transform: scaleX(-1);
}
._mfm_x2_ {
font-size: 200%;
}
._mfm_x3_ {
font-size: 400%;
}
._mfm_x4_ {
font-size: 600%;
}
/* blur */
._mfm_rainbow_ {
animation: mfm-rainbow 1s linear infinite;
}
._mfm_rotate_ {
transform: rotate(90deg);
transform-origin: center center;
}
/* sparkle */
@keyframes mfm-tada {
from {
transform: scale3d(1, 1, 1);
}
@ -123,7 +205,7 @@
100% { transform: translate(2px, 1px) rotate(2deg); }
}
@keyframes mfm-rubberBand {
@keyframes mfm-jelly {
from { transform: scale3d(1, 1, 1); }
30% { transform: scale3d(1.25, 0.75, 1); }
40% { transform: scale3d(0.75, 1.25, 1); }