Merge pull request 'fix panel z-index conflicting with heading popover' (#422 ) from tea/akkoma-fe:fix/panel-z-index into develop

Reviewed-on: AkkomaGang/akkoma-fe#422
Merge pull request 'Fix redirect on logout' (#420 ) from Oneric/akkoma-fe:logout-redirect into develop
2024-10-26 03:42:48 +00:00 · 2024-10-26 03:42:23 +00:00 · 2024-10-26 03:41:15 +00:00 · 2024-10-19 19:19:15 +02:00 · 2024-10-05 10:59:46 +02:00 · 2024-09-28 17:47:28 +02:00
17 changed files with 454 additions and 618 deletions
--- a/.node-version
+++ b/.node-version
@ -1 +0,0 @@
-7.2.1
--- a/README.md
+++ b/README.md
@ -20,6 +20,8 @@ To use Akkoma-FE in Akkoma, use the [frontend](https://docs.akkoma.dev/stable/ad

 ## Build Setup

+Make sure you have [Node.js](https://nodejs.org/) installed. You can check `/.woodpecker.yml` for which node version the Akkoma CI currently uses.
+
 ``` bash
 # install dependencies
 corepack enable
--- a/index.html
+++ b/index.html
@ -6,6 +6,7 @@
    <title>Akkoma</title>
    <link rel="stylesheet" href="/static/font/tiresias.css">
    <link rel="stylesheet" href="/static/font/css/lato.css">
+    <link rel="stylesheet" href="/static/mfm.css">
    <link rel="stylesheet" href="/static/custom.css">
    <link rel="stylesheet" href="/static/theme-holder.css" id="theme-holder">
    <!--server-generated-meta-->
--- a/package.json
+++ b/package.json
@ -41,9 +41,9 @@
    "qrcode": "^1.5.3",
    "querystring-es3": "^0.2.1",
    "url": "^0.11.3",
-    "vue": "^3.2.31",
-    "vue-i18n": "^9.2.2",
-    "vue-router": "^4.3.2",
+    "vue": "^3.4.38",
+    "vue-i18n": "^9.14.0",
+    "vue-router": "^4.4.3",
    "vue-template-compiler": "^2.7.16",
    "vuex": "^4.1.0"
  },
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@ -1,4 +1,4 @@
-const MFM_TAGS = ['bg', 'blur', 'bounce', 'center', 'fg', 'flip', 'font', 'jelly', 'jump', 'position', 'rainbow', 'rotate', 'scale', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
+const MFM_TAGS = ['blur', 'bounce', 'flip', 'font', 'jelly', 'jump', 'rainbow', 'rotate', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
  .map(tag => ({ displayText: tag, detailText: '$[' + tag + ' ]', replacement: '$[' + tag + ' ]', mfm: true }))

 /**
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@ -18,6 +18,7 @@
          <input
            id="code"
            v-model="code"
+            autocomplete="one-time-code"
            class="form-control"
          >
        </div>
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@ -121,19 +121,6 @@ export default {
      }
    }

-    const mfmStyleFromDataAttributes = (attributes) => {
-      // CSS selectors can check if a data-* attribute is true, but can't use other values, so we want to add them to the style attribute
-      // Here we turn e.g. `{'data-mfm-some': '1deg', 'data-mfm-thing': '5s'}` to "--mfm-some: 1deg;--mfm-thing: 5s;"
-      // Note that we only add the value to `style` when they contain only letters, numbers, dot, or minus signs
-      // At the moment of writing, this should be enough for legitimate purposes and reduces the chance of injection by using special characters
-      // There is a special case for the `color` value, who is provided without `#`, but requires this in the `style` attribute
-      return Object.keys(attributes).filter(
-        (key) => key.startsWith('data-mfm-') && attributes[key] !== true && /^[a-zA-Z0-9.\-]*$/.test(attributes[key])
-      ).map(
-        (key) => '--mfm-' + key.substr(9) + (key === 'data-mfm-color' ? ': #' : ': ') + attributes[key] + ';'
-      ).reduce((a,v) => a+v, '')
-    }
-
    // Processor to use with html_tree_converter
    const processItem = (item, index, array, what) => {
      // Handle text nodes - just add emoji
@ -204,15 +191,6 @@ export default {
            if (this.handleLinks && attrs?.['class']?.includes?.('h-card')) {
              return ['', children.map(processItem), '']
            }
-
-            let mfm_style = mfmStyleFromDataAttributes(attrs)
-            if (mfm_style !== '') {
-              return [
-                opener.slice(0,-1) + ' style="' + mfm_style + '">',
-                children.map(processItem),
-                closer
-              ]
-            }
        }

        if (children !== undefined) {
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@ -69,7 +69,7 @@ const SettingsModal = {
      this.$store.dispatch('closeSettingsModal')
    },
    logout () {
-      this.$router.replace('/main/public')
+      this.$router.replace(this.$store.state.instance.redirectRootNoLogin || '/main/all')
      this.$store.dispatch('closeSettingsModal')
      this.$store.dispatch('logout')
    },
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@ -3,7 +3,6 @@
 .StatusBody {
  display: flex;
  flex-direction: column;
-  overflow: hidden;

  .translation {
    border: 1px solid var(--accent, $fallback--link);
@ -24,6 +23,24 @@
    transition: 0.05s;
  }

+  ._mfm_x2_ {
+    .emoji {
+      height: 100px;
+    }
+  }
+
+  ._mfm_x3_ {
+    .emoji {
+      height: 150px;
+    }
+  }
+
+  ._mfm_x4_ {
+    .emoji {
+      height: 200px;
+    }
+  }
+
  .attachments {
    margin-top: 0.5em;
  }
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@ -1,7 +1,7 @@
 <template>
  <div
    class="StatusBody"
-    :class="{ '-compact': compact }"
+    :class="{ '-compact': compact, 'mfm-disabled': !renderMisskeyMarkdown }"
  >
    <div class="body">
      <div
--- a/src/components/status_content/mfm.scss
+++ b/src/components/status_content/mfm.scss
@ -1,423 +0,0 @@
-/**
- * "FEP-c16b: Formatting MFM functions" attributes that Akkoma supports
- */
-
-.StatusContent:not(.mfm-disabled) {
-  /* The following are the non-animated MFM */
-  .mfm-center {
-    display: block;
-    text-align: center;
-  }
-
-  .mfm-flip {
-    display: inline-block;
-    transform: scaleX(-1);
-  }
-
-  .mfm-flip[data-mfm-v] {
-    transform: scaleY(-1);
-  }
-
-  .mfm-flip[data-mfm-v][data-mfm-h] {
-    transform: scale(-1, -1);
-  }
-
-  .mfm-font[data-mfm-serif] {
-    font-family: serif;
-  }
-
-  .mfm-font[data-mfm-monospace] {
-    font-family: monospace;
-  }
-
-  .mfm-font[data-mfm-cursive] {
-    font-family: cursive;
-  }
-
-  .mfm-font[data-mfm-fantasy] {
-    font-family: fantasy;
-  }
-
-  .mfm-font[data-mfm-emoji] {
-    font-family: emoji;
-  }
-
-  .mfm-font[data-mfm-math] {
-    font-family: math;
-  }
-
-  .mfm-blur {
-    filter: blur(6px);
-    transition: filter 0.3s;
-
-    &:hover {
-      filter: blur(0);
-    }
-  }
-
-  .mfm-rotate {
-    display: inline-block;
-    transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
-    transform-origin: center center;
-  }
-
-  .mfm-x2 {
-    --mfm-zoom-size: 200%;
-  }
-
-  .mfm-x3 {
-    --mfm-zoom-size: 400%;
-  }
-
-  .mfm-x4 {
-    --mfm-zoom-size: 600%;
-  }
-
-  .mfm-x2,
-  .mfm-x3,
-  .mfm-x4,
-  .mfm-tada {
-    .emoji {
-      --emoji-size: 2em;
-    }
-    font-size: var(--mfm-zoom-size);
-
-    .mfm-x2,
-    .mfm-x3,
-    .mfm-x4,
-    .mfm-tada {
-      /* only half effective */
-      font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
-
-      .mfm-x2,
-      .mfm-x3,
-      .mfm-x4,
-      .mfm-tada {
-        /* disabled */
-        font-size: 100%;
-      }
-    }
-  }
-
-  .mfm-position {
-    display: inline-block;
-    transform: translate(calc(var(--mfm-x, 0) * 1em), calc(var(--mfm-y, 0) * 1em));
-  }
-
-  .mfm-scale {
-    display: inline-block;
-    transform: scale(var(--mfm-x, 1), var(--mfm-y, 1));
-  }
-
-  .mfm-fg {
-    color: var(--mfm-color, #f00);
-  }
-
-  .mfm-bg {
-    background-color: var(--mfm-color, #0f0);
-  }
-
-  /* The following are the animated MFM */
-
-  /* .mfm-hover means that we should only play animation when hovering over the StatusContent
-   * So either StatusContent does not have this class,
-   * or it has the class and we are hovering over StatusContent
-   */
-  &:not(.mfm-hover:not(:hover)) {
-    .mfm-jelly {
-      display: inline-block;
-      animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinite both;
-    }
-
-    .mfm-twitch {
-      display: inline-block;
-      animation: mfm-twitch var(--mfm-speed, 0.5s) ease infinite;
-    }
-
-    .mfm-shake {
-      display: inline-block;
-      animation: mfm-shake var(--mfm-speed, 0.5s) ease infinite;
-    }
-
-    .mfm-spin {
-      display: inline-block;
-      animation: mfm-spin var(--mfm-speed, 1.5s) linear infinite;
-    }
-
-    .mfm-spin[data-mfm-y] {
-      animation-name: mfm-spinY;
-    }
-
-    .mfm-spin[data-mfm-x] {
-      animation-name: mfm-spinX;
-    }
-
-    .mfm-spin[data-mfm-alternate] {
-      animation-direction: alternate;
-    }
-
-    .mfm-spin[data-mfm-left] {
-      animation-direction: reverse;
-    }
-
-    .mfm-jump {
-      display: inline-block;
-      animation: mfm-jump var(--mfm-speed, 0.75s) linear infinite;
-    }
-
-    .mfm-bounce {
-      display: inline-block;
-      animation: mfm-bounce var(--mfm-speed, 0.75s) linear infinite;
-      transform-origin: center bottom;
-    }
-
-    .mfm-rainbow {
-      animation: mfm-rainbow var(--mfm-speed, 1s) linear infinite;
-    }
-
-    .mfm-tada {
-      display: inline-block;
-      animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;
-
-      --mfm-zoom-size: 150%;
-    }
-  }
-
-  /* animation keyframes */
-
-  @keyframes mfm-spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  @keyframes mfm-spinX {
-    0% { transform: perspective(128px) rotateX(0deg); }
-    100% { transform: perspective(128px) rotateX(360deg); }
-  }
-
-  @keyframes mfm-spinY {
-    0% { transform: perspective(128px) rotateY(0deg); }
-    100% { transform: perspective(128px) rotateY(360deg); }
-  }
-
-  @keyframes mfm-jump {
-    0% { transform: translateY(0); }
-    25% { transform: translateY(-16px); }
-    50% { transform: translateY(0); }
-    75% { transform: translateY(-8px); }
-    100% { transform: translateY(0); }
-  }
-
-  @keyframes mfm-bounce {
-    0% { transform: translateY(0) scale(1, 1); }
-    25% { transform: translateY(-16px) scale(1, 1); }
-    50% { transform: translateY(0) scale(1, 1); }
-    75% { transform: translateY(0) scale(1.5, 0.75); }
-    100% { transform: translateY(0) scale(1, 1); }
-  }
-
-  @keyframes mfm-twitch {
-    0% { transform: translate(7px, -2px); }
-    5% { transform: translate(-3px, 1px); }
-    10% { transform: translate(-7px, -1px); }
-    15% { transform: translate(0, -1px); }
-    20% { transform: translate(-8px, 6px); }
-    25% { transform: translate(-4px, -3px); }
-    30% { transform: translate(-4px, -6px); }
-    35% { transform: translate(-8px, -8px); }
-    40% { transform: translate(4px, 6px); }
-    45% { transform: translate(-3px, 1px); }
-    50% { transform: translate(2px, -10px); }
-    55% { transform: translate(-7px, 0); }
-    60% { transform: translate(-2px, 4px); }
-    65% { transform: translate(3px, -8px); }
-    70% { transform: translate(6px, 7px); }
-    75% { transform: translate(-7px, -2px); }
-    80% { transform: translate(-7px, -8px); }
-    85% { transform: translate(9px, 3px); }
-    90% { transform: translate(-3px, -2px); }
-    95% { transform: translate(-10px, 2px); }
-    100% { transform: translate(-2px, -6px); }
-  }
-
-  @keyframes mfm-shake {
-    0% { transform: translate(-3px, -1px) rotate(-8deg); }
-    5% { transform: translate(0, -1px) rotate(-10deg); }
-    10% { transform: translate(1px, -3px) rotate(0deg); }
-    15% { transform: translate(1px, 1px) rotate(11deg); }
-    20% { transform: translate(-2px, 1px) rotate(1deg); }
-    25% { transform: translate(-1px, -2px) rotate(-2deg); }
-    30% { transform: translate(-1px, 2px) rotate(-3deg); }
-    35% { transform: translate(2px, 1px) rotate(6deg); }
-    40% { transform: translate(-2px, -3px) rotate(-9deg); }
-    45% { transform: translate(0, -1px) rotate(-12deg); }
-    50% { transform: translate(1px, 2px) rotate(10deg); }
-    55% { transform: translate(0, -3px) rotate(8deg); }
-    60% { transform: translate(1px, -1px) rotate(8deg); }
-    65% { transform: translate(0, -1px) rotate(-7deg); }
-    70% { transform: translate(-1px, -3px) rotate(6deg); }
-    75% { transform: translate(0, -2px) rotate(4deg); }
-    80% { transform: translate(-2px, -1px) rotate(3deg); }
-    85% { transform: translate(1px, -3px) rotate(-10deg); }
-    90% { transform: translate(1px, 0) rotate(3deg); }
-    95% { transform: translate(-2px, 0) rotate(-3deg); }
-    100% { transform: translate(2px, 1px) rotate(2deg); }
-  }
-
-  @keyframes mfm-rubberBand {
-    0% { transform: scale3d(1, 1, 1); }
-    30% { transform: scale3d(1.25, 0.75, 1); }
-    40% { transform: scale3d(0.75, 1.25, 1); }
-    50% { transform: scale3d(1.15, 0.85, 1); }
-    65% { transform: scale3d(0.95, 1.05, 1); }
-    75% { transform: scale3d(1.05, 0.95, 1); }
-    100% { transform: scale3d(1, 1, 1); }
-  }
-
-  @keyframes mfm-rainbow {
-    0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
-    100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
-  }
-
-  @keyframes mfm-tada {
-    0%,
-    100% { transform: scale3d(1, 1, 1); }
-
-    10%,
-    20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
-
-    30%,
-    50%,
-    70%,
-    90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
-
-    40%,
-    60%,
-    80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
-  }
-
-  /**
-   * Legacy MFM
-   * This is for backwards compatibility with posts formatted on Akkoma before support for FEP-c16b
-   * Note that it uses the keyframes as defined above for the FEP-c16b compatible MFM representation
-   */
-
-  .mfm {
-    display: inline-block;
-  }
-
-  /* The following are the legacy non-animated MFM */
-  ._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%;
-  }
-
-  ._mfm_x2_ {
-    .emoji {
-      height: 100px;
-    }
-  }
-
-  ._mfm_x3_ {
-    .emoji {
-      height: 150px;
-    }
-  }
-
-  ._mfm_x4_ {
-    .emoji {
-      height: 200px;
-    }
-  }
-
-  ._mfm_blur_ {
-    filter: blur(6px);
-    transition: filter 0.3s;
-  }
-
-  ._mfm_blur_:hover {
-    filter: blur(0);
-  }
-
-  ._mfm_rotate_ {
-    transform: rotate(90deg);
-    transform-origin: center center;
-  }
-
-  /* The following are the legacy animated MFM */
-
-  /* .mfm-hover means that we should only play animation when hovering over the StatusContent
-   * So either StatusContent does not have this class,
-   * or it has the class and we are hovering over StatusContent
-   */
-  &:not(.mfm-hover:not(:hover)) {
-    ._mfm_tada_ {
-      font-size: 150%;
-      animation: mfm-tada 1s linear infinite both;
-    }
-
-    ._mfm_jelly_ {
-      animation: mfm-rubberBand 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_[data-x] {
-      animation-name: mfm-spinX;
-    }
-
-    ._mfm_spin_[data-y] {
-      animation-name: mfm-spinY;
-    }
-
-    ._mfm_spin_[left] {
-      animation-direction: reverse;
-    }
-
-    ._mfm_spin_[alternate] {
-      animation-direction: alternate;
-    }
-
-    ._mfm_jump_ {
-      animation: mfm-jump 0.75s linear infinite;
-    }
-
-    ._mfm_bounce_ {
-      animation: mfm-bounce 0.75s linear infinite;
-      transform-origin: center bottom;
-    }
-
-    ._mfm_rainbow_ {
-      animation: mfm-rainbow 1s linear infinite;
-    }
-  }
-}
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@ -64,7 +64,6 @@
 </template>

 <script src="./status_content.js"></script>
-<style lang="scss" src="./mfm.scss" />
 <style lang="scss">
 .StatusContent {
  flex: 1;
@ -76,6 +75,23 @@
      height: 50px;
    }
  }
+
+  &.mfm-hover:not(:hover) {
+    .mfm {
+      animation: none !important;
+    }
+  }
+  &.mfm-disabled {
+    span {
+      font-size: 100% !important;
+    }
+    .mfm {
+      animation: none !important;
+    }
+    .emoji {
+      height: 32px !important;
+    }
+  }
 }

 .quote-inline,
--- a/src/modules/config.js
+++ b/src/modules/config.js
@ -22,7 +22,7 @@ export const multiChoiceProperties = [

 export const defaultState = {
  profile: 'default',
-  profileVersion: 0,
+  profileVersion: 0, // internal fe copy of server-side version
  expertLevel: 0, // used to track which settings to show and hide
  colors: {},
  theme: undefined,
@ -127,6 +127,21 @@ export const instanceDefaultProperties = Object.entries(defaultState)
  .filter(([key, value]) => value === undefined)
  .map(([key, value]) => key)

+function updateLocalSettings(store, settingEntries, version = null) {
+  if (version == null)
+    version = store.state.profileVersion
+
+  settingEntries.forEach(([name, value]) => {
+    if (store.state[name] !== value) {
+      store.dispatch('setOption', { name, value })
+    }
+  })
+
+  // Set this at the end to override any potentially stored profileVersion
+  store.commit('setOption', { name: 'profileVersion', value: version })
+}
+
+
 const config = {
  state: { ...defaultState },
  getters: {
@ -198,19 +213,17 @@ const config = {
        store.dispatch('listSettingsProfiles')
      })
    },
-    loadSettings ({ dispatch }, data) {
+    loadSettings (store, data) {
      const knownKeys = new Set(Object.keys(defaultState))
-      const presentKeys = new Set(Object.keys(data))
-      const intersection = new Set()
-      for (let elem of presentKeys) {
-        if (knownKeys.has(elem)) {
-          intersection.add(elem)
-        }
-      }

-      intersection.forEach(
-        name => dispatch('setOption', { name, value: data[name] })
-      )
+      // Limit to supported properties
+      const newSettingEntries =
+         Object.entries(data)
+        .filter(([key, value]) => knownKeys.has(key))
+
+      // disregard stored profileVersion; sync afterwards increases previous version
+      updateLocalSettings(store, newSettingEntries, null)
+      store.dispatch('syncSettings')
    },
    setHighlight ({ commit, dispatch }, { user, color, type }) {
      commit('setHighlight', { user, color, type })
@ -244,12 +257,7 @@ const config = {
        .then(({ settings, version }) => {
          console.log('found settings version', version)
          if (forceUpdate || (version > store.state.profileVersion)) {
-            store.commit('setOption', { name: 'profileVersion', value: version })
-            Object.entries(settings).forEach(([name, value]) => {
-              if (store.state[name] !== value) {
-                store.dispatch('setOption', { name, value })
-              }
-            })
+            updateLocalSettings(store, Object.entries(settings), version)
          } else {
            console.log('settings are up to date')
          }
--- a/src/panel.scss
+++ b/src/panel.scss
@ -18,7 +18,6 @@
    bottom: 0;
    left: 0;
    right: 0;
-    z-index: 5;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: var(--panelShadow);
    pointer-events: none;
@ -60,7 +59,6 @@
  padding: 0.6em;
  height: var(--__panel-heading-height);
  line-height: var(--__panel-heading-height-inner);
-  z-index: 4;

  &.-flexible-height {
    --__panel-heading-height: auto;
@ -131,6 +129,7 @@
  color: var(--panelText);
  background-color: $fallback--bg;
  background-color: var(--bg, $fallback--bg);
+  z-index: 4;

  &::after {
    background-color: $fallback--fg;
--- a/static/mfm.css
+++ b/static/mfm.css
@ -0,0 +1,227 @@
+.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_[data-x] {
+  animation-name: mfm-spinX;
+}
+._mfm_spin_[data-y] {
+  animation-name: mfm-spinY;
+}
+._mfm_spin_[left] {
+  animation-direction: reverse;
+}
+._mfm_spin_[alternate] {
+  animation-direction: alternate;
+}
+
+._mfm_jump_ {
+  animation: mfm-jump 0.75s linear infinite;
+}
+
+._mfm_bounce_ {
+  animation: mfm-bounce 0.75s 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%;
+}
+
+._mfm_blur_ {
+  filter: blur(6px);
+  transition: filter 0.3s
+}
+._mfm_blur_:hover {
+  filter: blur(0px);
+}
+
+._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);
+  }
+
+  10%,
+  20% {
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%,
+  60%,
+  80% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes bounce {
+  0% {
+    transform: scaleX(0.9) scaleY(0.9);
+  }
+
+  19% {
+    transform: scaleX(1.1) scaleY(1.1);
+  }
+
+  48% {
+    transform: scaleX(0.95) scaleY(0.95);
+  }
+
+  100% {
+    transform: scaleX(1) scaleY(1);
+  }
+}
+
+@keyframes mfm-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes mfm-spinX {
+  0% { transform: perspective(128px) rotateX(0deg); }
+  100% { transform: perspective(128px) rotateX(360deg); }
+}
+
+@keyframes mfm-spinY {
+  0% { transform: perspective(128px) rotateY(0deg); }
+  100% { transform: perspective(128px) rotateY(360deg); }
+}
+
+@keyframes mfm-jump {
+  0% { transform: translateY(0); }
+  25% { transform: translateY(-16px); }
+  50% { transform: translateY(0); }
+  75% { transform: translateY(-8px); }
+  100% { transform: translateY(0); }
+}
+
+@keyframes mfm-bounce {
+  0% { transform: translateY(0) scale(1, 1); }
+  25% { transform: translateY(-16px) scale(1, 1); }
+  50% { transform: translateY(0) scale(1, 1); }
+  75% { transform: translateY(0) scale(1.5, 0.75); }
+  100% { transform: translateY(0) scale(1, 1); }
+}
+
+@keyframes mfm-twitch {
+  0% { transform: translate(7px, -2px); }
+  5% { transform: translate(-3px, 1px); }
+  10% { transform: translate(-7px, -1px); }
+  15% { transform: translate(0, -1px); }
+  20% { transform: translate(-8px, 6px); }
+  25% { transform: translate(-4px, -3px); }
+  30% { transform: translate(-4px, -6px); }
+  35% { transform: translate(-8px, -8px); }
+  40% { transform: translate(4px, 6px); }
+  45% { transform: translate(-3px, 1px); }
+  50% { transform: translate(2px, -10px); }
+  55% { transform: translate(-7px, 0); }
+  60% { transform: translate(-2px, 4px); }
+  65% { transform: translate(3px, -8px); }
+  70% { transform: translate(6px, 7px); }
+  75% { transform: translate(-7px, -2px); }
+  80% { transform: translate(-7px, -8px); }
+  85% { transform: translate(9px, 3px); }
+  90% { transform: translate(-3px, -2px); }
+  95% { transform: translate(-10px, 2px); }
+  100% { transform: translate(-2px, -6px); }
+}
+
+@keyframes mfm-shake {
+  0% { transform: translate(-3px, -1px) rotate(-8deg); }
+  5% { transform: translate(0, -1px) rotate(-10deg); }
+  10% { transform: translate(1px, -3px) rotate(0deg); }
+  15% { transform: translate(1px, 1px) rotate(11deg); }
+  20% { transform: translate(-2px, 1px) rotate(1deg); }
+  25% { transform: translate(-1px, -2px) rotate(-2deg); }
+  30% { transform: translate(-1px, 2px) rotate(-3deg); }
+  35% { transform: translate(2px, 1px) rotate(6deg); }
+  40% { transform: translate(-2px, -3px) rotate(-9deg); }
+  45% { transform: translate(0, -1px) rotate(-12deg); }
+  50% { transform: translate(1px, 2px) rotate(10deg); }
+  55% { transform: translate(0, -3px) rotate(8deg); }
+  60% { transform: translate(1px, -1px) rotate(8deg); }
+  65% { transform: translate(0, -1px) rotate(-7deg); }
+  70% { transform: translate(-1px, -3px) rotate(6deg); }
+  75% { transform: translate(0, -2px) rotate(4deg); }
+  80% { transform: translate(-2px, -1px) rotate(3deg); }
+  85% { transform: translate(1px, -3px) rotate(-10deg); }
+  90% { transform: translate(1px, 0) rotate(3deg); }
+  95% { transform: translate(-2px, 0) rotate(-3deg); }
+  100% { transform: translate(2px, 1px) rotate(2deg); }
+}
+
+@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); }
+  50% { transform: scale3d(1.15, 0.85, 1); }
+  65% { transform: scale3d(0.95, 1.05, 1); }
+  75% { transform: scale3d(1.05, 0.95, 1); }
+  to { transform: scale3d(1, 1, 1); }
+}
+
+@keyframes mfm-rainbow {
+  0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
+  100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
+}
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@ -40,64 +40,6 @@ describe('RichContent', () => {
    expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html))
  })

-  it('it adds a # to the MFM color style value', () => {
-    const html_ok = '<span class="mfm-fg" data-mfm-color="fff">this text is not white</span>'
-    const expected_ok = '<span class="mfm-fg" data-mfm-color="fff" style="--mfm-color: #fff;">this text is not white</span>'
-    const wrapper_ok = shallowMount(RichContent, {
-      global,
-      props: {
-        attentions,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html: html_ok
-      }
-    })
-
-    expect(wrapper_ok.html()).to.eql(compwrap(expected_ok))
-  })
-
-  it('does not allow injection through MFM data- attributes', () => {
-    const html_ok = '<span class="mfm-spin" data-mfm-speed="-0.2s">brrr</span>'
-    const expected_ok = '<span class="mfm-spin" data-mfm-speed="-0.2s" style="--mfm-speed: -0.2s;">brrr</span>'
-    const wrapper_ok = shallowMount(RichContent, {
-      global,
-      props: {
-        attentions,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html: html_ok
-      }
-    })
-    const html_nok1 = '<span class="mfm-spin" data-mfm-speed="<">brrr</span>'
-    const wrapper_nok1 = shallowMount(RichContent, {
-      global,
-      props: {
-        attentions,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html: html_nok1
-      }
-    })
-    const html_nok2 = '<span class="mfm-spin" data-mfm-speed="\\">brrr</span>'
-    const wrapper_nok2 = shallowMount(RichContent, {
-      global,
-      props: {
-        attentions,
-        handleLinks: true,
-        greentext: true,
-        emoji: [],
-        html: html_nok2
-      }
-    })
-
-    expect(wrapper_ok.html()).to.eql(compwrap(expected_ok))
-    expect(wrapper_nok1.html()).to.eql(compwrap(html_nok1))
-    expect(wrapper_nok2.html()).to.eql(compwrap(html_nok2))
-  })
-
  it('unescapes everything as needed', () => {
    const html = [
      p('Testing &#39;em all'),
--- a/yarn.lock
+++ b/yarn.lock
@ -249,11 +249,21 @@
  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.6.tgz#28583c28b15f2a3339cfafafeaad42f9a0e828df"
  integrity sha512-WdJjwMEkmBicq5T9fm/cHND3+UlFa2Yj8ALLgmoSQAJZysYbBjw+azChSGPN4DSPLXOcooGRvDwZWMcF/mLO2Q==

+"@babel/helper-string-parser@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
+  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
+
 "@babel/helper-validator-identifier@^7.24.6":
  version "7.24.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.6.tgz#08bb6612b11bdec78f3feed3db196da682454a5e"
  integrity sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==

+"@babel/helper-validator-identifier@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
+  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+
 "@babel/helper-validator-option@^7.24.6":
  version "7.24.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.6.tgz#59d8e81c40b7d9109ab7e74457393442177f460a"
@ -291,6 +301,13 @@
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.6.tgz#5e030f440c3c6c78d195528c3b688b101a365328"
  integrity sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==

+"@babel/parser@^7.24.7":
+  version "7.25.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
+  integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
+  dependencies:
+    "@babel/types" "^7.25.2"
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.6":
  version "7.24.6"
  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.6.tgz#283a74ef365b1e954cda6b2724c678a978215e88"
@ -1021,6 +1038,15 @@
    "@babel/helper-validator-identifier" "^7.24.6"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.25.2":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
+  integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@chenfengyuan/vue-qrcode@^2.0.0":
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/@chenfengyuan/vue-qrcode/-/vue-qrcode-2.0.0.tgz#8cd01f6fc528d471680ebe812ec47c830aea7e63"
@ -1141,20 +1167,20 @@
    source-map "0.6.1"
    yaml-eslint-parser "^0.3.2"

-"@intlify/core-base@9.13.1":
-  version "9.13.1"
-  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.13.1.tgz#bd1f38e665095993ef9b67aeeb794f3cabcb515d"
-  integrity sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==
+"@intlify/core-base@9.14.0":
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.14.0.tgz#63ce687a6560c0af6a16cb567d9d8a1ea1a5a65e"
+  integrity sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==
  dependencies:
-    "@intlify/message-compiler" "9.13.1"
-    "@intlify/shared" "9.13.1"
+    "@intlify/message-compiler" "9.14.0"
+    "@intlify/shared" "9.14.0"

-"@intlify/message-compiler@9.13.1":
-  version "9.13.1"
-  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.13.1.tgz#ff8129badf77db3fb648b8d3cceee87c8033ed0a"
-  integrity sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==
+"@intlify/message-compiler@9.14.0":
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.14.0.tgz#e767141dd12862b3c1bf02ab5fc4852792812381"
+  integrity sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==
  dependencies:
-    "@intlify/shared" "9.13.1"
+    "@intlify/shared" "9.14.0"
    source-map-js "^1.0.2"

 "@intlify/message-compiler@next":
@ -1170,7 +1196,12 @@
  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-10.0.0-beta.1.tgz#7a72310c8fb81ee9d4ec0a534fd7782139b67c3a"
  integrity sha512-61MnYhgqS/TyAto9CXOltHlhK2WflLBcKpIkRhZCUL2IkiVvh7qKevsqZ3RYZylyC3q19ajLW6mB+iJtnbAOpg==

-"@intlify/shared@9.13.1", "@intlify/shared@^9.2.2":
+"@intlify/shared@9.14.0":
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.14.0.tgz#e8fb3693ad4171442cbe6cb8922a9b5a22ffb4ef"
+  integrity sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==
+
+"@intlify/shared@^9.2.2":
  version "9.13.1"
  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.13.1.tgz#202741d11ece1a9c7480bfd3f27afcf9cb8f72e4"
  integrity sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==
@ -1669,6 +1700,17 @@
    estree-walker "^2.0.2"
    source-map-js "^1.2.0"

+"@vue/compiler-core@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.38.tgz#326dfe3c92fa2b0f1dc9b39a948a231980253496"
+  integrity sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==
+  dependencies:
+    "@babel/parser" "^7.24.7"
+    "@vue/shared" "3.4.38"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.0"
+
 "@vue/compiler-dom@3.4.27":
  version "3.4.27"
  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz#d51d35f40d00ce235d7afc6ad8b09dfd92b1cc1c"
@ -1677,7 +1719,30 @@
    "@vue/compiler-core" "3.4.27"
    "@vue/shared" "3.4.27"

-"@vue/compiler-sfc@3.4.27", "@vue/compiler-sfc@^3.1.0", "@vue/compiler-sfc@^3.4.15":
+"@vue/compiler-dom@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz#90348fac1130e0bbd408b650635cb626b3b9df06"
+  integrity sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==
+  dependencies:
+    "@vue/compiler-core" "3.4.38"
+    "@vue/shared" "3.4.38"
+
+"@vue/compiler-sfc@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz#954c3f6777bbbcca28771ba59b795f12f76ef188"
+  integrity sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==
+  dependencies:
+    "@babel/parser" "^7.24.7"
+    "@vue/compiler-core" "3.4.38"
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/compiler-ssr" "3.4.38"
+    "@vue/shared" "3.4.38"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.10"
+    postcss "^8.4.40"
+    source-map-js "^1.2.0"
+
+"@vue/compiler-sfc@^3.1.0", "@vue/compiler-sfc@^3.4.15":
  version "3.4.27"
  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz#399cac1b75c6737bf5440dc9cf3c385bb2959701"
  integrity sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==
@ -1700,48 +1765,67 @@
    "@vue/compiler-dom" "3.4.27"
    "@vue/shared" "3.4.27"

-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.5.1":
+"@vue/compiler-ssr@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz#9ded18f6d9c8b2440039a58492cfff36fa1a7774"
+  integrity sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==
+  dependencies:
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/shared" "3.4.38"
+
+"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0":
  version "6.6.1"
  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
  integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==

-"@vue/reactivity@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.27.tgz#6ece72331bf719953f5eaa95ec60b2b8d49e3791"
-  integrity sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==
-  dependencies:
-    "@vue/shared" "3.4.27"
+"@vue/devtools-api@^6.6.3":
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
+  integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==

-"@vue/runtime-core@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.27.tgz#1b6e1d71e4604ba7442dd25ed22e4a1fc6adbbda"
-  integrity sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==
+"@vue/reactivity@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.38.tgz#ec2d549f4b831cd03d0baabf7d77e840b8536000"
+  integrity sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==
  dependencies:
-    "@vue/reactivity" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/shared" "3.4.38"

-"@vue/runtime-dom@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.27.tgz#fe8d1ce9bbe8921d5dd0ad5c10df0e04ef7a5ee7"
-  integrity sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==
+"@vue/runtime-core@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.38.tgz#bead9085e9a1c5a446e27d74ffb450f9261cf097"
+  integrity sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==
  dependencies:
-    "@vue/runtime-core" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/reactivity" "3.4.38"
+    "@vue/shared" "3.4.38"
+
+"@vue/runtime-dom@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz#52678ba0b85f94400a0a9c8dd23ddef4dd65657d"
+  integrity sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==
+  dependencies:
+    "@vue/reactivity" "3.4.38"
+    "@vue/runtime-core" "3.4.38"
+    "@vue/shared" "3.4.38"
    csstype "^3.1.3"

-"@vue/server-renderer@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.27.tgz#3306176f37e648ba665f97dda3ce705687be63d2"
-  integrity sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==
+"@vue/server-renderer@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.38.tgz#457401ef2b0f969156702061e56915acecc9fe2c"
+  integrity sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==
  dependencies:
-    "@vue/compiler-ssr" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/compiler-ssr" "3.4.38"
+    "@vue/shared" "3.4.38"

 "@vue/shared@3.4.27":
  version "3.4.27"
  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.27.tgz#f05e3cd107d157354bb4ae7a7b5fc9cf73c63b50"
  integrity sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==

+"@vue/shared@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.38.tgz#552a6770098bfd556fa3e2c686c9d3b4f4cd94c2"
+  integrity sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==
+
 "@vue/test-utils@^2.0.2":
  version "2.4.6"
  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.4.6.tgz#7d534e70c4319d2a587d6a3b45a39e9695ade03c"
@ -6506,6 +6590,15 @@ postcss@^8.2.14, postcss@^8.4.0, postcss@^8.4.19, postcss@^8.4.33, postcss@^8.4.
    picocolors "^1.0.0"
    source-map-js "^1.2.0"

+postcss@^8.4.40:
+  version "8.4.41"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
+  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.1"
+    source-map-js "^1.2.0"
+
 prelude-ls@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@ -7297,16 +7390,7 @@ streamroller@^3.1.5:
    debug "^4.3.4"
    fs-extra "^8.1.0"

-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -7393,14 +7477,7 @@ stringify-object@^3.3.0:
    is-obj "^1.0.1"
    is-regexp "^1.0.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -8051,13 +8128,13 @@ vue-eslint-parser@^9.4.2:
    lodash "^4.17.21"
    semver "^7.3.6"

-vue-i18n@^9.2.2:
-  version "9.13.1"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.13.1.tgz#a292c8021b7be604ebfca5609ae1f8fafe5c36d7"
-  integrity sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==
+vue-i18n@^9.14.0:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.14.0.tgz#d6f1b3d95bfc4f40e630ff9456c78ab5becfd933"
+  integrity sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==
  dependencies:
-    "@intlify/core-base" "9.13.1"
-    "@intlify/shared" "9.13.1"
+    "@intlify/core-base" "9.14.0"
+    "@intlify/shared" "9.14.0"
    "@vue/devtools-api" "^6.5.0"

 vue-loader@^17.4.2:
@ -8069,12 +8146,12 @@ vue-loader@^17.4.2:
    hash-sum "^2.0.0"
    watchpack "^2.4.0"

-vue-router@^4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.3.2.tgz#08096c7765dacc6832f58e35f7a081a8b34116a7"
-  integrity sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==
+vue-router@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.3.tgz#58a39dc804632bfb6d26f052aa8f6718bd130299"
+  integrity sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==
  dependencies:
-    "@vue/devtools-api" "^6.5.1"
+    "@vue/devtools-api" "^6.6.3"

 vue-style-loader@^4.1.3:
  version "4.1.3"
@ -8092,16 +8169,16 @@ vue-template-compiler@^2.7.16:
    de-indent "^1.0.2"
    he "^1.2.0"

-vue@^3.2.31:
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.27.tgz#40b7d929d3e53f427f7f5945386234d2854cc2a1"
-  integrity sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==
+vue@^3.4.38:
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.38.tgz#0ccbb64ed03ef3c4ab73e540793290b18e7c4236"
+  integrity sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==
  dependencies:
-    "@vue/compiler-dom" "3.4.27"
-    "@vue/compiler-sfc" "3.4.27"
-    "@vue/runtime-dom" "3.4.27"
-    "@vue/server-renderer" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/compiler-sfc" "3.4.38"
+    "@vue/runtime-dom" "3.4.38"
+    "@vue/server-renderer" "3.4.38"
+    "@vue/shared" "3.4.38"

 vuex@^4.1.0:
  version "4.1.0"
@ -8500,7 +8577,8 @@ workerpool@6.2.1:
  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
  integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==

-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@ -8518,15 +8596,6 @@ wrap-ansi@^6.2.0:
    string-width "^4.1.0"
    strip-ansi "^6.0.0"

-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
Author	SHA1	Message	Date
floatingghost	4a50b1273d	Merge pull request 'fix panel z-index conflicting with heading popover' (#422 ) from tea/akkoma-fe:fix/panel-z-index into develop Reviewed-on: AkkomaGang/akkoma-fe#422	2024-10-26 03:42:48 +00:00
floatingghost	c76dc6d79e	Merge pull request 'Fix redirect on logout' (#420 ) from Oneric/akkoma-fe:logout-redirect into develop Reviewed-on: AkkomaGang/akkoma-fe#420	2024-10-26 03:42:23 +00:00
floatingghost	cb4c581cde	Merge pull request 'Add proper autocomplete prop for TOTP login field' (#424 ) from tudbut/akkoma-fe:develop into develop Reviewed-on: AkkomaGang/akkoma-fe#424	2024-10-26 03:41:15 +00:00
TudbuT	8231c8f0b6	add proper autocomplete prop for TOTP login field	2024-10-19 19:19:15 +02:00
tea	35cf3327c8	fix panel z-index conflicting with heading popover resolves #342	2024-10-05 10:59:46 +02:00
Oneric	1ae09458c6	Fix redirect on logout An instance may restrict access to the public timeline (among others) to authenticated users and there already is a setting to decide which page to show authenticated and unauthenticated viewers by default each. However, the logout redirect didn't honour this setting leading to potentially broken pages and errors on logout	2024-09-28 17:47:28 +02:00
floatingghost	f391cf70a4	Merge pull request 'README: Add line to install Node.js' (#409 ) from ilja/akkoma-fe:README_add_to_install_node into develop Reviewed-on: AkkomaGang/akkoma-fe#409	2024-08-25 09:09:35 +00:00
floatingghost	fa8fde2ab1	Merge pull request 'Upgrade vue packages' (#411 ) from Oneric/akkoma-fe:vue-mathml into develop Reviewed-on: AkkomaGang/akkoma-fe#411	2024-08-25 09:08:04 +00:00
floatingghost	1f2c96a485	Merge pull request 'Fix setting restore from file' (#406 ) from Oneric/akkoma-fe:fix-file-restore into develop Reviewed-on: AkkomaGang/akkoma-fe#406	2024-08-25 09:07:18 +00:00
Oneric	6c178aa257	Upgrade vue packages Bumping past vue 3.4.0 guarantees MathML support for FEP-dc88. Related to: AkkomaGang/akkoma#642	2024-08-17 18:01:59 +02:00
ilja	3349fe6ff2	Add line to install Node.js For someone who isn't used to building fe things like this, it's not always clear to install Node.js or what version. A line has been added to the installation instructions pointing to resources where to get it and what version to use. For version I point to the woodpecker config because that is what the CI uses and therefor always "tested". There was a file .node-version who contained a node version, but this was seriously outdated and removing it didn't seem to break anything. Assuming it indeed doesn't do anything any more, it seems better to remove to avoid confusion.	2024-08-03 09:54:14 +02:00
Oneric	e274adf47d	Fix setting restore from file Previously restoring from file would also restore the old version value breaking upload of the new settings to the server. Additionallly it didn’t even attempt to sync settings after restore and was insufferably slow due to individually updating every single setting with a dispatch. Instead only update changed settings like on server syncs which usually speeds the process up considerably. Fixes: AkkomaGang/akkoma-fe#405	2024-07-06 01:59:42 +02:00