sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2025-01-20 14:08:05 +09:00
parent 078b7d6cc5
commit b126735393
3 changed files with 75 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend-shared/js/const.ts
View File

@@ -118,7 +118,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', 'glitch', 'rotate', 'ruby', 'unixtime'];
export const MFM_PARAMS: Record<typeof MFM_TAGS[number], string[]> = {
tada: ['speed=', 'delay='],
jelly: ['speed=', 'delay='],

67
packages/frontend/src/components/MkGlitchFx.vue Normal file
View File

@@ -0,0 +1,67 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<span :class="$style.root">
<span :class="$style.content">
<slot></slot>
</span>
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="MkGlitchFx_svg">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" result="g"/>
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" result="b"/>
<feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feOffset dx="8" dy="0"/>
<feComposite in="g" in2="" operator="lighter"/>
<feComposite in="b" in2="" operator="lighter" result="rgb-layers"/>
<feTurbulence type="fractalNoise" baseFrequency="0 0.02" numOctaves="3" :seed="seed"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0,1"/>
</feComponentTransfer>
<feComposite in2="rgb-layers" operator="xor"/>
<feOffset dx="8" dy="0"/>
<feComposite in2="rgb-layers" operator="over" result="temp1"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="1"/>
</feComponentTransfer>
<feColorMatrix
in="temp1"
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 100 100 100 0 0 "
></feColorMatrix>
</filter>
</svg>
</span>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
import { useInterval } from '@@/js/use-interval.js';
const seed = ref('0');
useInterval(() => {
seed.value = Math.floor(Math.random() * 1000).toString();
}, 70, {
immediate: true,
afterMounted: true,
});
</script>
<style lang="scss" module>
.root {
position: relative;
//clip-path: inset(15px);
}
.content {
display: block;
filter: url(#MkGlitchFx_svg);
}
</style>

7
packages/frontend/src/components/global/MkMfm.ts
View File

@@ -17,6 +17,7 @@ import MkCode from '@/components/MkCode.vue';
import MkCodeInline from '@/components/MkCodeInline.vue';
import MkGoogle from '@/components/MkGoogle.vue';
import MkSparkle from '@/components/MkSparkle.vue';
import MkGlitchFx from '@/components/MkGlitchFx.vue';
import MkA, { MkABehavior } from '@/components/global/MkA.vue';
import { defaultStore } from '@/store.js';
@@ -233,6 +234,12 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
}
return h(MkSparkle, {}, genEl(token.children, scale));
}
case 'glitch': {
if (!useAnim) {
return genEl(token.children, scale);
}
return h(MkGlitchFx, {}, genEl(token.children, scale));
}
case 'rotate': {
const degrees = safeParseFloat(token.props.args.deg) ?? 90;
style = `transform: rotate(${degrees}deg); transform-origin: center center;`;