woem.men/forkey
4
2
Fork 3
Code Issues 34 Pull requests 16 Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into feature/warn-when-missing-alt-text
Some checks failed
Dockle / dockle (pull_request) Has been cancelled
Details
Lint / pnpm_install (pull_request) Has been cancelled
Details
Lint / lint (backend) (pull_request) Has been cancelled
Details
Lint / lint (frontend) (pull_request) Has been cancelled
Details
Lint / lint (misskey-js) (pull_request) Has been cancelled
Details
Lint / lint (sw) (pull_request) Has been cancelled
Details
Lint / typecheck (backend) (pull_request) Has been cancelled
Details
Lint / typecheck (misskey-js) (pull_request) Has been cancelled
Details
Test (frontend) / vitest (22.x) (pull_request) Has been cancelled
Details
Test (production install and build) / production (22.x) (pull_request) Has been cancelled
Details
Pull Request Labeler / triage (pull_request_target) Has been cancelled
Details

Browse source
This commit is contained in:
ashten 2025-01-09 20:26:25 +00:00
commit d2b03ad7f2
3 changed files with 44 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
View file

@ -227,6 +227,22 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
}
return h(MkSparkle, {}, genEl(token.children, scale));
}
case 'fade': {
// Dont run with reduced motion on
if (!defaultStore.state.animation) {
style = '';
break;
}
const direction = token.props.args.out
? 'alternate-reverse'
: 'alternate';
const speed = validTime(token.props.args.speed) ?? '1.5s';
const delay = validTime(token.props.args.delay) ?? '0s';
const loop = safeParseFloat(token.props.args.loop) ?? 'infinite';
style = `animation: mfm-fade ${speed} ${delay} linear ${loop}; animation-direction: ${direction};`;
break;
}
case 'rotate': {
const degrees = safeParseFloat(token.props.args.deg) ?? 90;
style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
@ -239,6 +255,22 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
style = `transform: translateX(${x}em) translateY(${y}em);`;
break;
}
case 'crop': {
const top = Number.parseFloat(
(token.props.args.top ?? '0').toString(),
);
const right = Number.parseFloat(
(token.props.args.right ?? '0').toString(),
);
const bottom = Number.parseFloat(
(token.props.args.bottom ?? '0').toString(),
);
const left = Number.parseFloat(
(token.props.args.left ?? '0').toString(),
);
style = `clip-path: inset(${top}% ${right}% ${bottom}% ${left}%);`;
break;
}
case 'scale': {
if (!defaultStore.state.advancedMfm) {
style = '';

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

@ -122,7 +122,7 @@ export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error
export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg';
export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg';
export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'border', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime'];
export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'border', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime', 'crop', 'fade'];
export const MFM_PARAMS: Record<typeof MFM_TAGS[number], string[]> = {
tada: ['speed=', 'delay='],
jelly: ['speed=', 'delay='],
@ -146,4 +146,6 @@ export const MFM_PARAMS: Record<typeof MFM_TAGS[number], string[]> = {
rotate: ['deg='],
ruby: [],
unixtime: [],
fade: ['speed=', 'delay=', 'loop=', 'out'],
crop: ['top=', 'bottom=', 'left=', 'right='],
};

9
packages/frontend/src/style.scss
View file

@ -672,3 +672,12 @@ html[data-color-mode=dark] ._woodenFrame {
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
}
@keyframes mfm-fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}