Merge pull request 'Add raw JSON button, if enabled' (#320) from jbcarreon123/wafrn:feature/raw-jsonld into development

Reviewed-on: https://codeberg.org/wafrn/wafrn/pulls/320

.env.example

···
 POSTGRES_METRICS_PASSWORD=
 POSTGRES_METRICS_DBNAME=pgwatch_metrics
 GF_SECURITY_ADMIN_PASSWORD=
+
+# Debugging
+ENABLE_RAW_OUTPUT=false

package-lock.json

···
       ],
       "dependencies": {
         "cheerio": "^1.1.0",
+        "nxt-json-view": "^20.0.0",
         "tsx": "^4.19.1"
       },
       "devDependencies": {
···
         "node": ">=0.2.0"
       }
     },
-    "node_modules/bufferutil": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.9.tgz",
-      "integrity": "sha512-WDtdLmJvAuNNPzByAYpRo2rF1Mmradw6gvWsQKf63476DDXmomT9zUiGypLcG4ibIM67vhAj8jJRdbmEws2Aqw==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/bullmq": {
       "version": "5.61.2",
       "resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.61.2.tgz",
···
         "express": "^4.0.0 || ^5.0.0-alpha.1"
       }
     },
-    "node_modules/express-ws/node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/express-ws/node_modules/ws": {
       "version": "7.5.10",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
···
       "integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cli-truncate": "^4.0.0",
         "colorette": "^2.0.20",
···
       "integrity": "sha512-ujSMe1OWVn55euT1ihwCI1ZcAaAU3nxUiDwfDQldc51ZXaB9m2AyOn6/jh1BLe2t/G8xd6uKG1UBF2aZJeg2SQ==",
       "license": "MIT"
     },
+    "node_modules/nxt-json-view": {
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/nxt-json-view/-/nxt-json-view-20.0.0.tgz",
+      "integrity": "sha512-//xUAboII2oPbixtW4mSzZ6J3PVlX4dQ/JxtiLqwv/5lfgu7Cpbo5hhsud+H1YOkybyq5smjt6FLWlytqB2JQA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      },
+      "peerDependencies": {
+        "@angular/common": "^20.0.0",
+        "@angular/core": "^20.0.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
···
       "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==",
       "license": "MIT"
     },
-    "node_modules/utf-8-validate": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-6.0.5.tgz",
-      "integrity": "sha512-EYZR+OpIXp9Y1eG1iueg8KRsY8TuT8VNgnanZ0uA3STqhHQTLwbl+WX76/9X5OY12yQubymBpaBSmMPkSTQcKA==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
···
       "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
···
       "integrity": "sha512-QcQ72gh8a+7JO63TAx/6XZf/CWhgMzu5m0QirvPfGvptOusAxG12w2+aua1Jkjr7hzaWDnJ2n6JFeexMHI+Zjg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/bonjour": "^3.5.13",
         "@types/connect-history-api-fallback": "^1.5.4",
···
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
       "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "packages/backend": {
       "name": "wafrn-backend",
···
       }
     }
   }
-}
+}

package.json

···
   },
   "dependencies": {
     "cheerio": "^1.1.0",
+    "nxt-json-view": "^20.0.0",
     "tsx": "^4.19.1"
   }
 }

packages/backend/environment.example.ts

···
     externalCacheurl: '${{FRONTEND_CACHE_URL}}',
     shortenPosts: ${{FRONTEND_SHORTEN_POSTS:-3}},
     disablePWA: ${{FRONTEND_DISABLE_PWA:-false}},
-    maintenance: ${{FRONTEND_MAINTENANCE:-false}}
+    maintenance: ${{FRONTEND_MAINTENANCE:-false}},
+    enableRawOutput: ${{ENABLE_RAW_OUTPUT:-false}}
   }
 }

packages/backend/environment.local.example.ts

···
     externalCacheurl: '/api/cache?media=',
     shortenPosts: 3,
     disablePWA: false,
-    maintenance: false
+    maintenance: false,
+    enableRawOutput: true
   }
 }

packages/backend/routes/activitypub/activitypub.ts

···
 import { userToJSONLD } from '../../utils/activitypub/userToJSONLD.js'
 import { completeEnvironment } from '../../utils/backendOptions.js'
 import { activityPubObject } from '../../interfaces/fediverse/activityPubObject.js'
-import { getPostUrlForQuote } from '../../utils/activitypub/postToJSONLD.js'
+import { getPostUrlForQuote, postToJSONLD } from '../../utils/activitypub/postToJSONLD.js'
+import { getPostAndUserFromPostId } from '../../utils/cacheGetters/getPostAndUserFromPostId.js'
 
 // we get the user from the memory cache. if does not exist we try to find it
 async function getLocalUserByUrl(url: string): Promise<any> {
···
               orderedItems: itemsToSend
             }
             if (page > 1) {
-              response['prev'] = `${
-                completeEnvironment.frontendUrl
-              }/fediverse/blog/${user.url.toLowerCase()}/following?page=${page - 1}`
+              response['prev'] = `${completeEnvironment.frontendUrl
+                }/fediverse/blog/${user.url.toLowerCase()}/following?page=${page - 1}`
             }
             if (followedUsers.length > pageSize * page) {
-              response['next'] = `${
-                completeEnvironment.frontendUrl
-              }/fediverse/blog/${user.url.toLowerCase()}/following?page=${page + 1}`
+              response['next'] = `${completeEnvironment.frontendUrl
+                }/fediverse/blog/${user.url.toLowerCase()}/following?page=${page + 1}`
             }
           } else {
             response = {
···
             const itemsToSend = followers.slice((page - 1) * pageSize, page * pageSize)
             response = {
               '@context': 'https://www.w3.org/ns/activitystreams',
-              id: `${completeEnvironment.frontendUrl}/fediverse/blog/${user.url.toLowerCase()}/followers?page=${
-                req.query.page
-              }`,
+              id: `${completeEnvironment.frontendUrl}/fediverse/blog/${user.url.toLowerCase()}/followers?page=${req.query.page
+                }`,
               type: 'OrderedCollectionPage',
               orderedItems: itemsToSend,
               totalItems: followersNumber
             }
             if (page > 1) {
-              response['prev'] = `${
-                completeEnvironment.frontendUrl
-              }/fediverse/blog/${user.url.toLowerCase()}/followers?page=${page - 1}`
+              response['prev'] = `${completeEnvironment.frontendUrl
+                }/fediverse/blog/${user.url.toLowerCase()}/followers?page=${page - 1}`
             }
             if (followers.length > pageSize * page) {
-              response['next'] = `${
-                completeEnvironment.frontendUrl
-              }/fediverse/blog/${user.url.toLowerCase()}/followers?page=${page + 1}`
+              response['next'] = `${completeEnvironment.frontendUrl
+                }/fediverse/blog/${user.url.toLowerCase()}/followers?page=${page + 1}`
             }
           } else {
             response = {
···
       res.sendStatus(404)
     }
   })
+
+  if (completeEnvironment.frontendEnvironment.enableRawOutput) {
+    app.get('/fediverse/post/:id/raw', async (req: Request, res: Response) => {
+      const id = req.params.id;
+      const jsonLd = await postToJSONLD(id)
+      if (jsonLd) {
+        res
+          .set({
+            'content-type': 'application/activity+json'
+          })
+          .send(jsonLd)
+      } else {
+        return404(res)
+      }
+    })
+  }
 
   app.get('/fediverse/post/:id/replies', async (req: Request, res: Response) => {
     res.send({

packages/frontend/src/app/components/blog-header/blog-header.component.html

···
       <div>
         <img [src]="avatarUrl()" alt="user avatar" class="blog-avatar-image" />
       </div>
+      @if (rawOutputEnabled && blog) {
+      <button matButton="outlined" style="width: 40px; padding: 0; margin-right: 4px" (click)="getRawJson(blog.url)"
+        matTooltip="{{ 'dialog.common.rawData' | translate }}">
+        <fa-icon [fixedWidth]="true" [icon]="rawJsonIcon"></fa-icon>
+      </button>
+      }
       @if (loggedIn && !isMe && blog) {
-        @if (loggedIn) {
-          <div class="flex">
-            @if (!blog.isBlueskyUser) {
-              <button
-                matButton="outlined"
-                style="width: 40px; padding: 0; margin-right: 4px"
-                (click)="biteAccount(blog.id)"
-                matTooltip="{{ 'post-actions.biteUser' | translate }}"
-              >
-                <fa-icon [fixedWidth]="true" [icon]="biteUserIcon"></fa-icon>
-              </button>
-            }
-            @if (!postService.notYetAcceptedFollowedUsersIds.includes(blog.id)) {
-              <button
-                mat-stroked-button
-                [color]="postService.followedUserIds.indexOf(blog.id) === -1 ? 'primary' : 'warn'"
-                class="split-button-left"
-                (click)="
+      @if (loggedIn) {
+      <div class="flex">
+
+        @if (!blog.isBlueskyUser) {
+        <button matButton="outlined" style="width: 40px; padding: 0; margin-right: 4px" (click)="biteAccount(blog.id)"
+          matTooltip="{{ 'post-actions.biteUser' | translate }}">
+          <fa-icon [fixedWidth]="true" [icon]="biteUserIcon"></fa-icon>
+        </button>
+        }
+        @if (!postService.notYetAcceptedFollowedUsersIds.includes(blog.id)) {
+        <button mat-stroked-button [color]="postService.followedUserIds.indexOf(blog.id) === -1 ? 'primary' : 'warn'"
+          class="split-button-left" (click)="
                   postService.followedUserIds.indexOf(blog.id) === -1 ? followUser(blog.id) : unfollowUser(blog.id)
-                "
-              >
-                {{ postService.followedUserIds.indexOf(blog.id) === -1 ? 'Follow' : 'Unfollow' }}
-              </button>
-            }
-            @if (postService.notYetAcceptedFollowedUsersIds.includes(blog.id) && loggedIn) {
-              <button mat-stroked-button color="accent" class="split-button-left" (click)="unfollowUser(blog.id)">
-                Awaiting approval
-              </button>
-            }
-            <button
-              aria-label="More options"
-              [matMenuTriggerFor]="menu"
-              mat-stroked-button
-              [color]="postService.followedUserIds.indexOf(blog.id) === -1 ? 'primary' : 'warn'"
-              class="split-button-right"
-            >
-              <fa-icon [icon]="expandDownIcon"></fa-icon>
-            </button>
-          </div>
+                ">
+          {{ postService.followedUserIds.indexOf(blog.id) === -1 ? 'Follow' : 'Unfollow' }}
+        </button>
+        }
+        @if (postService.notYetAcceptedFollowedUsersIds.includes(blog.id) && loggedIn) {
+        <button mat-stroked-button color="accent" class="split-button-left" (click)="unfollowUser(blog.id)">
+          Awaiting approval
+        </button>
+        }
+        <button aria-label="More options" [matMenuTriggerFor]="menu" mat-stroked-button
+          [color]="postService.followedUserIds.indexOf(blog.id) === -1 ? 'primary' : 'warn'" class="split-button-right">
+          <fa-icon [icon]="expandDownIcon"></fa-icon>
+        </button>
+      </div>
+      }
+      <mat-menu #menu="matMenu" xPosition="before">
+        @if (!blog.muted) {
+        <button (click)="muteAccount()" mat-menu-item class="dangerous-option">
+          <span class="flex gap-2">
+            <fa-icon [fixedWidth]="true" [icon]="muteUserIcon"></fa-icon>
+            {{ 'post-actions.muteUser' | translate }}
+          </span>
+        </button>
+        } @else {
+        <button (click)="unmuteAccount()" mat-menu-item class="dangerous-option">
+          <span class="flex gap-2">
+            <fa-icon [fixedWidth]="true" [icon]="unmuteUserIcon"></fa-icon>
+            {{ 'post-actions.unmuteUser' | translate }}
+          </span>
+        </button>
+        }
+        @if (!blog.blocked) {
+        <button (click)="blockAccount()" mat-menu-item class="dangerous-option">
+          <span class="flex gap-2">
+            <fa-icon [fixedWidth]="true" [icon]="blockUserIcon"></fa-icon>
+            {{ 'post-actions.blockUser' | translate }}
+          </span>
+        </button>
+        } @else {
+        <button (click)="unblockAccount()" mat-menu-item class="dangerous-option">
+          <span class="flex gap-2">
+            <fa-icon [fixedWidth]="true" [icon]="userIcon"></fa-icon>
+            {{ 'post-actions.unblockUser' | translate }}
+          </span>
+        </button>
         }
-        <mat-menu #menu="matMenu" xPosition="before">
-          @if (!blog.muted) {
-            <button (click)="muteAccount()" mat-menu-item class="dangerous-option">
-              <span class="flex gap-2">
-                <fa-icon [fixedWidth]="true" [icon]="muteUserIcon"></fa-icon>
-                {{ 'post-actions.muteUser' | translate }}
-              </span>
-            </button>
-          } @else {
-            <button (click)="unmuteAccount()" mat-menu-item class="dangerous-option">
-              <span class="flex gap-2">
-                <fa-icon [fixedWidth]="true" [icon]="unmuteUserIcon"></fa-icon>
-                {{ 'post-actions.unmuteUser' | translate }}
-              </span>
-            </button>
-          }
-          @if (!blog.blocked) {
-            <button (click)="blockAccount()" mat-menu-item class="dangerous-option">
-              <span class="flex gap-2">
-                <fa-icon [fixedWidth]="true" [icon]="blockUserIcon"></fa-icon>
-                {{ 'post-actions.blockUser' | translate }}
-              </span>
-            </button>
-          } @else {
-            <button (click)="unblockAccount()" mat-menu-item class="dangerous-option">
-              <span class="flex gap-2">
-                <fa-icon [fixedWidth]="true" [icon]="userIcon"></fa-icon>
-                {{ 'post-actions.unblockUser' | translate }}
-              </span>
-            </button>
-          }
-          @if (blog.url.startsWith('@')) {
-            @if (!blog.isBlueskyUser) {
-              @if (!blog.serverBlocked) {
-                <button mat-menu-item (click)="blockService.blockServer(blog.id)">
-                  <fa-icon class="mr-2" [icon]="unblockServerIcon"></fa-icon>Block server
-                </button>
-              } @else {
-                @if (blog.federatedHost) {
-                  <button mat-menu-item (click)="blockService.unblockServer(blog.federatedHost!.id)">
-                    <fa-icon class="mr-2" [icon]="unblockServerIcon"></fa-icon>Unblock server
-                  </button>
-                }
-              }
-            }
-          }
-          @if (
-            !isMe &&
-            (postService.notYetAcceptedFollowedUsersIds.includes(blog.id) ||
-              postService.followedUserIds.includes(blog.id))
-          ) {
-            @if (postService.usersRewootsDisabled.includes(blog.id)) {
-              <button mat-menu-item (click)="updateDisableRewoots()">
-                <fa-icon class="mr-2" [icon]="disableRewootIcon"></fa-icon>Re-show rewoots made by this user
-              </button>
-            } @else {
-              <button mat-menu-item (click)="updateDisableRewoots()">
-                <fa-icon class="mr-2" [icon]="disableRewootIcon"></fa-icon>Hide rewoots made by this user
-              </button>
-            }
-            @if (postService.usersQuotesDisabled.includes(blog.id)) {
-              <button mat-menu-item (click)="updateDisableQuotes()">
-                <fa-icon class="mr-2" [icon]="disableQuotesIcon"></fa-icon>Re-hide quotes from this user
-              </button>
-            } @else {
-              <button mat-menu-item (click)="updateDisableQuotes()">
-                <fa-icon class="mr-2" [icon]="disableQuotesIcon"></fa-icon>Hide quotes from this user
-              </button>
-            }
-          }
-          <button (click)="reportService.report(blog.id)" mat-menu-item class="dangerous-option">
-            <span class="flex gap-2">
-              <fa-icon [fixedWidth]="true" [icon]="reportUserIcon"></fa-icon>
-              {{ 'post-actions.reportUser' | translate }}
-            </span>
-          </button>
-        </mat-menu>
+        @if (blog.url.startsWith('@')) {
+        @if (!blog.isBlueskyUser) {
+        @if (!blog.serverBlocked) {
+        <button mat-menu-item (click)="blockService.blockServer(blog.id)">
+          <fa-icon class="mr-2" [icon]="unblockServerIcon"></fa-icon>Block server
+        </button>
+        } @else {
+        @if (blog.federatedHost) {
+        <button mat-menu-item (click)="blockService.unblockServer(blog.federatedHost!.id)">
+          <fa-icon class="mr-2" [icon]="unblockServerIcon"></fa-icon>Unblock server
+        </button>
+        }
+        }
+        }
+        }
+        @if (
+        !isMe &&
+        (postService.notYetAcceptedFollowedUsersIds.includes(blog.id) ||
+        postService.followedUserIds.includes(blog.id))
+        ) {
+        @if (postService.usersRewootsDisabled.includes(blog.id)) {
+        <button mat-menu-item (click)="updateDisableRewoots()">
+          <fa-icon class="mr-2" [icon]="disableRewootIcon"></fa-icon>Re-show rewoots made by this user
+        </button>
+        } @else {
+        <button mat-menu-item (click)="updateDisableRewoots()">
+          <fa-icon class="mr-2" [icon]="disableRewootIcon"></fa-icon>Hide rewoots made by this user
+        </button>
+        }
+        @if (postService.usersQuotesDisabled.includes(blog.id)) {
+        <button mat-menu-item (click)="updateDisableQuotes()">
+          <fa-icon class="mr-2" [icon]="disableQuotesIcon"></fa-icon>Re-hide quotes from this user
+        </button>
+        } @else {
+        <button mat-menu-item (click)="updateDisableQuotes()">
+          <fa-icon class="mr-2" [icon]="disableQuotesIcon"></fa-icon>Hide quotes from this user
+        </button>
+        }
+        }
+        <button (click)="reportService.report(blog.id)" mat-menu-item class="dangerous-option">
+          <span class="flex gap-2">
+            <fa-icon [fixedWidth]="true" [icon]="reportUserIcon"></fa-icon>
+            {{ 'post-actions.reportUser' | translate }}
+          </span>
+        </button>
+      </mat-menu>
       }
     </div>
     <div class="min-w-0">
···
       <p class="m-0 text-sm line-height-3 blog-url">{{ blog?.url ?? '-' }}</p>
       <div class="flex gap-2 mt-2 mb-0 text-sm line-height-3 profile-badges">
         @if (blog?.isBlueskyUser) {
-          <span class="badge bsky-badge"> <fa-icon class="mr-2" [icon]="bskyIcon"></fa-icon>Bluesky </span>
+        <span class="badge bsky-badge"> <fa-icon class="mr-2" [icon]="bskyIcon"></fa-icon>Bluesky </span>
         }
         @if (blog && blog.followers / blog.followed > 5) {
-          <span
-            class="badge ratio-badge"
-            matTooltip="{{
+        <span class="badge ratio-badge" matTooltip="{{
               'For every ' +
                 (blog.followers / blog.followed | number: '1.0-0') +
                 ' followers ' +
                 blog.url +
                 ' follows 1 user.'
-            }}"
-          >
-            <fa-icon class="mr-2" [icon]="usersIcon"></fa-icon>Follower Ratio:
-            {{ blog.followers / blog.followed | number: '1.0-0' }}:1
-          </span>
+            }}">
+          <fa-icon class="mr-2" [icon]="usersIcon"></fa-icon>Follower Ratio:
+          {{ blog.followers / blog.followed | number: '1.0-0' }}:1
+        </span>
         }
       </div>
     </div>
   </div>
   <div [innerHtml]="headerHTML ?? '-'" class="mt-2 post-text"></div>
   @if (fediComp().length !== 0) {
-    <hr class="my-3" />
-    <div class="w-full overflow-hidden flex flex-column gap-2">
-      <p class="m-0 text-sm subtle-title">Fediverse Attachments</p>
-      @for (fediAt of fediComp(); track fediAt) {
-        <dl class="flex m-0">
-          <dt [innerHTML]="fediAt.name" class="w-3 font-bold"></dt>
-          <dd [innerHTML]="fediAt.value" class="w-8 ml-2"></dd>
-        </dl>
-      }
-    </div>
+  <hr class="my-3" />
+  <div class="w-full overflow-hidden flex flex-column gap-2">
+    <p class="m-0 text-sm subtle-title">Fediverse Attachments</p>
+    @for (fediAt of fediComp(); track fediAt) {
+    <dl class="flex m-0">
+      <dt [innerHTML]="fediAt.name" class="w-3 font-bold"></dt>
+      <dd [innerHTML]="fediAt.value" class="w-8 ml-2"></dd>
+    </dl>
+    }
+  </div>
   }
   @if (allowAsk) {
-    <hr class="my-4" />
-    <div class="flex flex-wrap justify-content-center gap-3">
-      <button mat-stroked-button color="accent" (click)="openAskDialog()">Ask a question</button>
-    </div>
+  <hr class="my-4" />
+  <div class="flex flex-wrap justify-content-center gap-3">
+    <button mat-stroked-button color="accent" (click)="openAskDialog()">Ask a question</button>
+  </div>
   }
   @if (allowRemoteAsk) {
-    <details class="mt-2">
-      <summary class="text-center">Send ask from outside Wafrn</summary>
-      <p class="m-0">
-        You can send this user a non-anonymous ask from your fedi instance with the following structure: " !ask &#64;{{
-          blog?.url
-        }}
-        YOUR QUESTION HERE". The medias and emojis you attach will be ignored, and you can only send one mention on the
-        post. If it goes wrong, the user will receive it as a regular DM. Also, the content of the DM will be published
-        as the AP object to verify the ask as genuine
-      </p>
-    </details>
+  <details class="mt-2">
+    <summary class="text-center">Send ask from outside Wafrn</summary>
+    <p class="m-0">
+      You can send this user a non-anonymous ask from your fedi instance with the following structure: " !ask &#64;{{
+      blog?.url
+      }}
+      YOUR QUESTION HERE". The medias and emojis you attach will be ignored, and you can only send one mention on the
+      post. If it goes wrong, the user will receive it as a regular DM. Also, the content of the DM will be published
+      as the AP object to verify the ask as genuine
+    </p>
+  </details>
   }
   @if (blog?.url?.startsWith('@')) {
-    <app-info-card [type]="loggedIn ? 'info' : 'caution'">
-      {{
-        loggedIn
-          ? 'As this user is from a remote instance, the shown information may be incomplete.'
-          : 'To see external users you need to be logged in. You can view their profile on their actual instance.'
-      }}
-      <a
-        [href]="
+  <app-info-card [type]="loggedIn ? 'info' : 'caution'">
+    {{
+    loggedIn
+    ? 'As this user is from a remote instance, the shown information may be incomplete.'
+    : 'To see external users you need to be logged in. You can view their profile on their actual instance.'
+    }}
+    <a [href]="
           blog?.url?.split('@')?.length === 3
             ? blog?.remoteId
             : 'https://bsky.app/profile/' + blog?.url?.split('@')?.at(1)
-        "
-        target="_blank"
-        >View on remote instance</a
-      >
-    </app-info-card>
+        " target="_blank">View on remote instance</a>
+  </app-info-card>
   }
   <footer class="mt-4 py-3 flex justify-content-evenly follow-counts">
     <a [routerLink]="['/blog', blog?.url]" class="flex flex-column justify-content-center subtle-link">
···
       <p class="m-0 text-xs">Followers</p>
     </a>
   </footer>
-</mat-card>
+</mat-card>

packages/frontend/src/app/components/blog-header/blog-header.component.ts

···
   faTriangleExclamation,
   faRepeat,
   faQuoteRight,
-  faCookieBite
+  faCookieBite,
+  faCode
 } from '@fortawesome/free-solid-svg-icons'
 import { BlogDetails } from 'src/app/interfaces/blogDetails'
 import { BlocksService } from 'src/app/services/blocks.service'
 import { LoginService } from 'src/app/services/login.service'
 import { MessageService } from 'src/app/services/message.service'
 import { PostsService } from 'src/app/services/posts.service'
+import { UtilsService } from 'src/app/services/utils.service'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { EnvironmentService } from 'src/app/services/environment.service'
 import { InfoCardComponent } from '../info-card/info-card.component'
···
 import { TranslatePipe } from '@ngx-translate/core'
 import { SimpleDialogService } from 'src/app/services/simple-dialog.service'
 import { BlogService } from 'src/app/services/blog.service'
+import { RawJsonDialogComponent } from '../raw-json-dialog/raw-json-dialog.component'
 
 @Component({
   selector: 'app-blog-header',
···
   reportUserIcon = faTriangleExclamation
   disableRewootIcon = faRepeat
   disableQuotesIcon = faQuoteRight
+  rawJsonIcon = faCode
 
   userIcon = faUser
   bskyIcon = faBluesky
···
   isBlueskyUser = false
   headerHTML: string | undefined
 
+  rawOutputEnabled = EnvironmentService.environment.enableRawOutput
+
   fediComp = computed<{ name: string; value: string }[]>(() => {
     const fediAttachment = this.blogDetails()?.publicOptions.find(
       (elem) => elem.optionName == 'fediverse.public.attachment'
···
     public environmentService: EnvironmentService,
     public reportService: ReportService,
     public simpleDialog: SimpleDialogService,
-    public blogService: BlogService
+    public blogService: BlogService,
+    public utilsService: UtilsService
   ) { }
   ngOnChanges(changes: SimpleChanges): void {
     const blog = this.blogDetails()
···
         translate: true
       })
     }
+  }
+
+  async getRawJsonComponent(): Promise<typeof RawJsonDialogComponent> {
+    const { RawJsonDialogComponent } = await import('../raw-json-dialog/raw-json-dialog.component')
+    return RawJsonDialogComponent
+  }
+
+  async getRawJson(id: string) {
+    const raw = await this.utilsService.getRawJsonUser(id);
+    this.dialogService.open(await this.getRawJsonComponent(), {
+      data: raw,
+      width: '800px'
+    })
   }
 
   async getAskDialogComponent(): Promise<typeof AskDialogContentComponent> {

packages/frontend/src/app/components/post-action-buttons/post-action-buttons.component.ts

···
   bookmarkIcon = faBookmark
   unbookmarkIcon = faBookBookmark
 
+
   // Ordering
   buttonList: SettingListItem[] = []
 

packages/frontend/src/app/components/post-actions/post-actions.component.html

···
 @let isBskyPost = !!post.bskyUri;
 @let isExternalPost = post.user.url.startsWith('@') && post.privacy !== 1 && post.privacy !== 10;
 @let isMyPost = myId == post.userId && post.privacy != 2;
-<button
-  aria-label="Post actions"
-  mat-button
-  class="mat-circle-button split-button-right"
-  matTooltip="Post actions"
-  [matMenuTriggerFor]="menu"
->
+<button aria-label="Post actions" mat-button class="mat-circle-button split-button-right" matTooltip="Post actions"
+  [matMenuTriggerFor]="menu">
   <fa-icon [icon]="expandDownIcon"></fa-icon>
 </button>
 <mat-menu #menu="matMenu" xPosition="before" id="post-actions-menu">
   <ng-template matMenuContent>
     @if (loggedIn) {
-      <div class="post-action-buttons" mat-menu-item>
-        <app-post-action-buttons [fragment]="post" settingKey="postActionsButtonBarOrder"></app-post-action-buttons>
-      </div>
-      <hr class="my-0" />
+    <div class="post-action-buttons" mat-menu-item>
+      <app-post-action-buttons [fragment]="post" settingKey="postActionsButtonBarOrder"></app-post-action-buttons>
+    </div>
+    <hr class="my-0" />
     }
     <button (click)="sharePost()" mat-menu-item>
       <span class="post-actions-menu-span-content">
···
       </span>
     </button>
     @if (post.remotePostId && post.user.url.startsWith('@')) {
-      <a (click)="shareOriginalPost()" mat-menu-item>
-        <span class="post-actions-menu-span-content">
-          {{ 'post-actions.shareExternalUrl' | translate }}
-          <fa-icon [fixedWidth]="true" [icon]="shareExternalIcon"></fa-icon>
-        </span>
-      </a>
+    <a (click)="shareOriginalPost()" mat-menu-item>
+      <span class="post-actions-menu-span-content">
+        {{ 'post-actions.shareExternalUrl' | translate }}
+        <fa-icon [fixedWidth]="true" [icon]="shareExternalIcon"></fa-icon>
+      </span>
+    </a>
     }
     @if (isBskyPost) {
-      <a [href]="bskyUrl()" target="_blank" mat-menu-item>
-        <span class="post-actions-menu-span-content">
-          {{ 'post-actions.viewOnAtproto' | translate }}
-          <fa-icon size="lg" [fixedWidth]="true" [icon]="bskyIcon"></fa-icon>
-        </span>
-      </a>
+    <a [href]="bskyUrl()" target="_blank" mat-menu-item>
+      <span class="post-actions-menu-span-content">
+        {{ 'post-actions.viewOnAtproto' | translate }}
+        <fa-icon size="lg" [fixedWidth]="true" [icon]="bskyIcon"></fa-icon>
+      </span>
+    </a>
     }
     @if (isExternalPost && externalUrl() !== bskyUrl()) {
-      <a [href]="externalUrl()" target="_blank" mat-menu-item>
-        <span class="post-actions-menu-span-content">
-          {{ 'post-actions.viewOriginalPost' | translate }}
-          <fa-icon size="lg" [fixedWidth]="true" [icon]="goExternalPost"></fa-icon>
-        </span>
-      </a>
+    <a [href]="externalUrl()" target="_blank" mat-menu-item>
+      <span class="post-actions-menu-span-content">
+        {{ 'post-actions.viewOriginalPost' | translate }}
+        <fa-icon size="lg" [fixedWidth]="true" [icon]="goExternalPost"></fa-icon>
+      </span>
+    </a>
     }
     @if (isMyPost) {
-      <button (click)="forceRefederate()" mat-menu-item>
-        <span class="post-actions-menu-span-content">
-          {{ 'post-actions.forceRefederate' | translate }}
-          <fa-icon size="lg" [fixedWidth]="true" [icon]="refederateIcon"></fa-icon>
-        </span>
-      </button>
+    <button (click)="forceRefederate()" mat-menu-item>
+      <span class="post-actions-menu-span-content">
+        {{ 'post-actions.forceRefederate' | translate }}
+        <fa-icon size="lg" [fixedWidth]="true" [icon]="refederateIcon"></fa-icon>
+      </span>
+    </button>
     }
     @if (loggedIn) {
-      @if (!postSilenced) {
-        <button (click)="silencePost()" mat-menu-item>
-          <span class="post-actions-menu-span-content">
-            {{ 'post-actions.silenceInteractions' | translate }}
-            <fa-icon size="lg" [fixedWidth]="true" [icon]="silenceIcon"></fa-icon>
-          </span>
-        </button>
-      }
-      @if (!postSilenced) {
-        <button (click)="silencePost(true)" mat-menu-item>
-          <span class="post-actions-menu-span-content">
-            {{ 'post-actions.silenceReplyNotifications' | translate }}
-            <fa-icon size="lg" [fixedWidth]="true" [icon]="silenceReplyIcon"></fa-icon>
-          </span>
-        </button>
-      }
-      @if (postSilenced) {
-        <button (click)="unsilencePost()" mat-menu-item>
-          <span class="post-actions-menu-span-content">
-            {{ 'post-actions.unsilenceReplyNotifications' | translate }}
-            <fa-icon size="lg" [fixedWidth]="true" [icon]="unsilenceIcon"></fa-icon>
-          </span>
-        </button>
-      }
-      @if (!isMyPost) {
-        <a (click)="bitePost()" mat-menu-item>
-          <span class="post-actions-menu-span-content">
-            {{ 'post-actions.bitePost' | translate }}
-            <fa-icon [fixedWidth]="true" [icon]="biteIcon"></fa-icon>
-          </span>
-        </a>
-      }
+    @if (!postSilenced) {
+    <button (click)="silencePost()" mat-menu-item>
+      <span class="post-actions-menu-span-content">
+        {{ 'post-actions.silenceInteractions' | translate }}
+        <fa-icon size="lg" [fixedWidth]="true" [icon]="silenceIcon"></fa-icon>
+      </span>
+    </button>
+    }
+    @if (!postSilenced) {
+    <button (click)="silencePost(true)" mat-menu-item>
+      <span class="post-actions-menu-span-content">
+        {{ 'post-actions.silenceReplyNotifications' | translate }}
+        <fa-icon size="lg" [fixedWidth]="true" [icon]="silenceReplyIcon"></fa-icon>
+      </span>
+    </button>
+    }
+    @if (postSilenced) {
+    <button (click)="unsilencePost()" mat-menu-item>
+      <span class="post-actions-menu-span-content">
+        {{ 'post-actions.unsilenceReplyNotifications' | translate }}
+        <fa-icon size="lg" [fixedWidth]="true" [icon]="unsilenceIcon"></fa-icon>
+      </span>
+    </button>
     }
     @if (!isMyPost) {
-      @if (loggedIn) {
-        <hr class="my-0" />
-        <button (click)="muteAccount()" mat-menu-item class="dangerous-option">
-          <span class="post-actions-menu-span-content">
-            {{ 'post-actions.muteUser' | translate }}
-            <fa-icon size="lg" [fixedWidth]="true" [icon]="muteIcon"></fa-icon>
-          </span>
-        </button>
-        <button (click)="blockAccount()" mat-menu-item class="dangerous-option">
-          <span class="post-actions-menu-span-content">
-            {{ 'post-actions.blockUser' | translate }}
-            <fa-icon size="lg" [fixedWidth]="true" [icon]="blockIcon"></fa-icon>
-          </span>
-        </button>
-      }
-      <button (click)="reportPost()" mat-menu-item class="dangerous-option">
-        <span class="post-actions-menu-span-content">
-          {{ 'post-actions.reportPost' | translate }}
-          <fa-icon size="lg" [fixedWidth]="true" [icon]="reportIcon"></fa-icon>
-        </span>
-      </button>
+    <a (click)="bitePost()" mat-menu-item>
+      <span class="post-actions-menu-span-content">
+        {{ 'post-actions.bitePost' | translate }}
+        <fa-icon [fixedWidth]="true" [icon]="biteIcon"></fa-icon>
+      </span>
+    </a>
+    }
+    }
+    @if (!isMyPost) {
+    @if (loggedIn) {
+    <hr class="my-0" />
+    <button (click)="muteAccount()" mat-menu-item class="dangerous-option">
+      <span class="post-actions-menu-span-content">
+        {{ 'post-actions.muteUser' | translate }}
+        <fa-icon size="lg" [fixedWidth]="true" [icon]="muteIcon"></fa-icon>
+      </span>
+    </button>
+    <button (click)="blockAccount()" mat-menu-item class="dangerous-option">
+      <span class="post-actions-menu-span-content">
+        {{ 'post-actions.blockUser' | translate }}
+        <fa-icon size="lg" [fixedWidth]="true" [icon]="blockIcon"></fa-icon>
+      </span>
+    </button>
+    }
+    <button (click)="reportPost()" mat-menu-item class="dangerous-option">
+      <span class="post-actions-menu-span-content">
+        {{ 'post-actions.reportPost' | translate }}
+        <fa-icon size="lg" [fixedWidth]="true" [icon]="reportIcon"></fa-icon>
+      </span>
+    </button>
+    }
+    @if (rawOutputEnabled && post) {
+    <hr class="my-0" />
+    <button (click)="getRawJson(post.id)" mat-menu-item>
+      <span class="post-actions-menu-span-content">
+        {{ 'dialog.common.rawData' | translate }}
+        <fa-icon [fixedWidth]="true" [icon]="rawJsonIcon"></fa-icon>
+      </span>
+    </button>
     }
   </ng-template>
-</mat-menu>
+</mat-menu>

packages/frontend/src/app/components/post-actions/post-actions.component.ts

···
   faPaperPlane,
   faUserSlash,
   faVolumeMute,
-  faCookieBite
+  faCookieBite,
+  faCode
 } from '@fortawesome/free-solid-svg-icons'
 import { MatButtonModule } from '@angular/material/button'
 import { MatMenuModule } from '@angular/material/menu'
···
 import { PostActionButtonsComponent } from '../post-action-buttons/post-action-buttons.component'
 import { SimpleDialogService } from 'src/app/services/simple-dialog.service'
 import { BlocksService } from 'src/app/services/blocks.service'
+import { MatDialog } from '@angular/material/dialog'
 
 @Component({
   selector: 'app-post-actions',
···
   muteIcon = faVolumeMute
   blockIcon = faUserSlash
   biteIcon = faCookieBite
+  rawJsonIcon = faCode
+
+  rawOutputEnabled = EnvironmentService.environment.enableRawOutput
 
   constructor(
     private messages: MessageService,
···
     private utilsService: UtilsService,
     private settingsService: SettingsService,
     private simpleDialog: SimpleDialogService,
+    public dialogService: MatDialog,
     private blockService: BlocksService
   ) {
     if (loginService.loggedIn.value) {
···
         translate: true
       })
     }
+  }
+
+  async getRawJsonComponent(): Promise<typeof RawJsonDialogComponent> {
+    const { RawJsonDialogComponent } = await import('../raw-json-dialog/raw-json-dialog.component')
+    return RawJsonDialogComponent
+  }
+
+  async getRawJson(id: string) {
+    const raw = await this.utilsService.getRawJsonPost(id);
+    this.dialogService.open(await this.getRawJsonComponent(), {
+      data: raw,
+      width: '800px'
+    })
   }
 
   // Dangerous options

packages/frontend/src/app/components/raw-json-dialog/raw-json-dialog.component.html

···
+<h1 mat-dialog-title>{{ 'dialog.common.rawData' | translate }}</h1>
+<div class="raw-dialog-data" mat-dialog-content>
+    <nxt-json-view [data]="data" [levelOpen]="0"></nxt-json-view>
+</div>
+<button mat-flat-button (click)="closeDialog()" class="w-full">{{ 'dialog.close' | translate }}</button>

packages/frontend/src/app/components/raw-json-dialog/raw-json-dialog.component.scss

···
+nxt-json-view {
+    --nxt-json-view-color-value: var(--mat-sys-on-primary-container);
+    --nxt-json-view-color-key: var(--mat-sys-on-tertiary-container);
+    --nxt-json-view-color-boolean: var(--mat-sys-error);
+}

packages/frontend/src/app/components/raw-json-dialog/raw-json-dialog.component.ts

···
+import { Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
+import { LoaderComponent } from '../loader/loader.component';
+import { JsonViewModule } from 'nxt-json-view';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-raw-json-dialog',
+  imports: [
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    JsonViewModule,
+    TranslateModule
+  ],
+  templateUrl: './raw-json-dialog.component.html',
+  styleUrl: './raw-json-dialog.component.scss',
+})
+export class RawJsonDialogComponent {
+  data = {}
+
+  constructor(
+    private dialogRef: MatDialogRef<RawJsonDialogComponent>,
+    @Inject(MAT_DIALOG_DATA)
+    public jsonData: object
+  ) {
+    this.data = jsonData
+  }
+
+  closeDialog() {
+    this.dialogRef.close()
+  }
+}

packages/frontend/src/app/services/utils.service.ts

···
   constructor(
     private postsService: PostsService,
     private http: HttpClient
-  ) {}
+  ) { }
 
   objectToFormData(obj: any): FormData {
     const res = new FormData()
···
     )
     let result = servers.map((elem) => elem.displayName.toLowerCase().trim()).filter((elem) => elem != '')
     return result.sort()
+  }
+
+  async getRawJsonUser(id: string): Promise<object> {
+    const raw = await firstValueFrom(
+      this.http.get(`${EnvironmentService.environment.frontUrl}/fediverse/blog/${id}`, {
+        headers: {
+          Accept: 'application/json'
+        }
+      })
+    )
+    return raw
+  }
+
+  async getRawJsonPost(id: string): Promise<object> {
+    const raw = await firstValueFrom(
+      this.http.get(`${EnvironmentService.environment.frontUrl}/fediverse/post/${id}/raw`, {
+        headers: {
+          Accept: 'application/json'
+        }
+      })
+    )
+    return raw
   }
 }

packages/frontend/src/assets/i18n/en.json

···
   "dialog": {
     "confirm": "Confirm",
     "cancel": "Cancel",
+    "close": "Close",
     "bluesky": {
       "generateInviteCodeWarningTitle": "Attention",
       "generateInviteCodeWarning": "Generating an invite code will delete IRREVERSIBLY any associated bsky account"
···
       "reportDescription": "Description",
       "reportBlockUser": "Block this user",
       "reportConfirm": "Report"
+    },
+    "common": {
+      "rawData": "Raw JSON data"
     }
   },
   "ask-dialog-content": {
···
     "couldNotFind": "does not lead to a page",
     "returnHome": "Go Home"
   }
-}
+}