Add "View as JSON" action to posts

This is placed in "fun" section as it is more of a tool for developers to quickly view based on what information the status is rendered.

src/components/extra_buttons/extra_buttons.js

@@ -9,7 +9,8 @@ import {
   faShareAlt,
   faExternalLinkAlt,
   faHistory,
-  faFilePen
+  faFilePen,
+  faCode
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faBookmark as faBookmarkReg,
@@ -27,7 +28,8 @@ library.add(
   faExternalLinkAlt,
   faFlag,
   faHistory,
-  faFilePen
+  faFilePen,
+  faCode
 )
 
 const ExtraButtons = {
@@ -70,6 +72,10 @@ const ExtraButtons = {
         .then(() => this.$emit('onSuccess'))
         .catch(err => this.$emit('onError', err.error.error))
     },
+    viewStatusAsJson () {
+      const blob = new Blob([JSON.stringify(this.status, null, 2)], {type: "application/json"})
+      window.open(URL.createObjectURL(blob))
+    },
     pinStatus () {
       this.$store.dispatch('pinStatus', this.status.id)
         .then(() => this.$emit('onSuccess'))
@@ -201,6 +207,7 @@ const ExtraButtons = {
       return this.status.edited_at !== null
     },
     editingAvailable () { return this.$store.state.instance.editingAvailable },
+    showViewStatusAsJson () { return !!this.$store.getters.mergedConfig.showViewStatusAsJson },
   }
 }
 

src/components/extra_buttons/extra_buttons.vue

@@ -139,6 +139,17 @@
             icon="external-link-alt"
           /><span>{{ $t("status.external_source") }}</span>
         </a>
+        <button
+          v-if="showViewStatusAsJson"
+          class="button-default dropdown-item dropdown-item-icon"
+          @click.prevent="viewStatusAsJson"
+          @click="close"
+        >
+          <FAIcon
+            fixed-width
+            :icon="['fa', 'code']"
+          /><span>{{ $t("status.view_as_json") }}</span>
+        </button>
         <button
           class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="reportStatus"

src/components/settings_modal/tabs/general_tab.vue

@@ -536,6 +536,14 @@
             {{ $t('settings.show_yous') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="showViewStatusAsJson"
+            expert="1"
+          >
+            {{ $t('settings.show_view_status_as_json') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
 

src/i18n/en.json

@@ -753,6 +753,7 @@
         "show_panel_nav_shortcuts": "Show timeline navigation shortcuts at the top of the panel",
         "show_scrollbars": "Show side column's scrollbars",
         "show_page_backgrounds": "Show page-specific backgrounds, e.g. for user profiles",
+        "show_view_status_as_json": "Show \"View status as JSON\" in post actions",
         "show_wider_shortcuts": "Show wider gap between top panel shortcuts",
         "show_yous": "Show (You)s",
         "stop_gifs": "Pause animated images until you hover on them",
@@ -1027,6 +1028,7 @@
         "unbookmark": "Unbookmark",
         "unmute_conversation": "Unmute conversation",
         "unpin": "Unpin from profile",
+        "view_as_json": "View as JSON",
         "you": "(You)"
     },
     "time": {

src/modules/config.js

@@ -120,6 +120,7 @@ export const defaultState = {
   supportedTranslationLanguages: {}, // instance default
   userProfileDefaultTab: 'statuses',
   useBlurhash: true,
+  showViewStatusAsJson: false,
 }
 
 // caching the instance default properties

src/modules/instance.js

@@ -75,6 +75,7 @@ const defaultState = {
   maxDepthInThread: 6,
   backendCommitUrl: 'https://akkoma.dev/AkkomaGang/akkoma/commit/',
   frontendCommitUrl: 'https://akkoma.dev/AkkomaGang/pleroma-fe/commit/',
+  showViewStatusAsJson: false,
 
   // Nasty stuff
   customEmoji: [],